From 09dae896673d08d7030b71fb2c3f52924726f58e Mon Sep 17 00:00:00 2001 From: bobzel Date: Wed, 28 Oct 2020 09:19:26 -0400 Subject: fixed up dark schema a bit. --- src/client/views/MainView.tsx | 23 +++++++++++++---------- 1 file changed, 13 insertions(+), 10 deletions(-) (limited to 'src/client/views/MainView.tsx') diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 1730007a5..b3d198bd1 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -229,25 +229,28 @@ export class MainView extends React.Component { getContentsHeight = () => this._panelHeight - Number(SEARCH_PANEL_HEIGHT.replace("px", "")); defaultBackgroundColors = (doc: Opt, renderDepth: number) => { - if (doc?.type === DocumentType.COL) { - return Doc.IsSystem(doc) ? "lightgrey" : StrCast(renderDepth > 0 ? Doc.UserDoc().activeCollectionNestedBackground : Doc.UserDoc().activeCollectionBackground); - } if (this.darkScheme) { switch (doc?.type) { - case DocumentType.FONTICON: return "white"; + case DocumentType.PRESELEMENT: return "dimgrey"; + case DocumentType.FONTICON: return "black"; case DocumentType.RTF || DocumentType.LABEL || DocumentType.BUTTON: return "#2d2d2d"; case DocumentType.LINK: - case DocumentType.COL: if (doc._viewType !== CollectionViewType.Freeform && doc._viewType !== CollectionViewType.Time) return "rgb(62,62,62)"; + case DocumentType.COL: + return Doc.IsSystem(doc) ? "rgb(62,62,62)" : StrCast(renderDepth > 0 ? Doc.UserDoc().activeCollectionNestedBackground : Doc.UserDoc().activeCollectionBackground); + //if (doc._viewType !== CollectionViewType.Freeform && doc._viewType !== CollectionViewType.Time) return "rgb(62,62,62)"; default: return "black"; } } else { switch (doc?.type) { + case DocumentType.PRESELEMENT: return ""; case DocumentType.FONTICON: return "black"; case DocumentType.RTF: return "#f1efeb"; case DocumentType.BUTTON: case DocumentType.LABEL: return "lightgray"; case DocumentType.LINK: - case DocumentType.COL: if (doc._viewType !== CollectionViewType.Freeform && doc._viewType !== CollectionViewType.Time) return "lightgray"; + case DocumentType.COL: + return Doc.IsSystem(doc) ? "lightgrey" : StrCast(renderDepth > 0 ? Doc.UserDoc().activeCollectionNestedBackground : Doc.UserDoc().activeCollectionBackground); + //if (doc._viewType !== CollectionViewType.Freeform && doc._viewType !== CollectionViewType.Time) return "lightgray"; default: return "white"; } } @@ -345,7 +348,7 @@ export class MainView extends React.Component { ContainingCollectionView={undefined} ContainingCollectionDoc={undefined} relative={true} - forcedBackgroundColor={() => "lightgrey"} + forcedBackgroundColor={() => this.darkScheme ? "rgb(62,62,62)" : "lightgrey"} /> {this.docButtons} @@ -413,8 +416,8 @@ export class MainView extends React.Component { {this.menuPanel}
{this.flyout} -
- +
+
{this.dockingContent} @@ -443,7 +446,7 @@ export class MainView extends React.Component { expandFlyout = action((button: Doc) => { this._flyoutWidth = (this._flyoutWidth || 250); this._sidebarContent.proto = button.target as any; - button._backgroundColor = "lightgrey"; + button._backgroundColor = this.darkScheme ? "dimgrey" : "lightgrey"; button.color = "black"; this._lastButton = button; }); -- cgit v1.2.3-70-g09d2 From 2b580e4d8acfa1ce8ddb7a323391ccfb90885117 Mon Sep 17 00:00:00 2001 From: bobzel Date: Wed, 28 Oct 2020 14:48:04 -0400 Subject: fixed dark scheme mode for menu, properties view, and minimap button. --- src/client/views/ContextMenu.scss | 4 --- src/client/views/MainView.scss | 39 +++++++++++++++++++++++++++- src/client/views/MainView.tsx | 9 ++++--- src/client/views/PropertiesView.scss | 8 ++---- src/client/views/PropertiesView.tsx | 16 ++++++------ src/client/views/collections/TabDocView.scss | 1 - src/client/views/collections/TabDocView.tsx | 3 ++- src/client/views/nodes/ColorBox.tsx | 4 +-- 8 files changed, 57 insertions(+), 27 deletions(-) (limited to 'src/client/views/MainView.tsx') diff --git a/src/client/views/ContextMenu.scss b/src/client/views/ContextMenu.scss index 7467bc043..b514de5f2 100644 --- a/src/client/views/ContextMenu.scss +++ b/src/client/views/ContextMenu.scss @@ -43,7 +43,6 @@ .contextMenu-item { // width: 11vw; //10vw height: 25px; //2vh - background: whitesmoke; display: flex; //comment out to allow search icon to be inline with search text justify-content: left; align-items: center; @@ -58,7 +57,6 @@ // padding: 10px 0px 10px 0px; white-space: nowrap; font-size: 13px; - color: grey; letter-spacing: 2px; text-transform: uppercase; padding-right: 30px; @@ -75,7 +73,6 @@ .contextMenu-description { // width: 11vw; //10vw - background: whitesmoke; display: flex; //comment out to allow search icon to be inline with search text justify-content: left; -webkit-touch-callout: none; @@ -89,7 +86,6 @@ // padding: 10px 0px 10px 0px; white-space: nowrap; font-size: 10px; - color: grey; letter-spacing: 1px; text-transform: uppercase; padding-right: 30px; diff --git a/src/client/views/MainView.scss b/src/client/views/MainView.scss index d571a0428..b49990433 100644 --- a/src/client/views/MainView.scss +++ b/src/client/views/MainView.scss @@ -153,7 +153,7 @@ cursor: auto; } -.mainView-innerContent { +.mainView-innerContent, .mainView-innerContent-dark { display: contents; flex-direction: row; position: relative; @@ -174,6 +174,43 @@ right: 0; position: absolute; z-index: 2; + background-color: rgb(159, 159, 159); + .editable-title { + background-color: lightgrey; + } + } + +} +.mainView-innerContent-dark +{ + .propertiesView { + background-color: #252525; + input { + background-color: dimgrey; + } + .propertiesView-sharingTable + { + background-color: dimgrey; + } + .editable-title { + background-color: dimgrey; + } + .propertiesView-field { + background-color: dimgrey; + } + } + .mainView-propertiesDragger, + .mainView-libraryHandle { + background: #353535; + } +} +.mainView-container-dark { + .contextMenu-cont { + background: dimgrey; + color: white; + input::placeholder { + color:white; + } } } diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index b3d198bd1..3a3dbc68f 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -232,6 +232,7 @@ export class MainView extends React.Component { if (this.darkScheme) { switch (doc?.type) { case DocumentType.PRESELEMENT: return "dimgrey"; + case DocumentType.PRES: return "#3e3e3e"; case DocumentType.FONTICON: return "black"; case DocumentType.RTF || DocumentType.LABEL || DocumentType.BUTTON: return "#2d2d2d"; case DocumentType.LINK: @@ -414,18 +415,18 @@ export class MainView extends React.Component { @computed get mainInnerContent() { return <> {this.menuPanel} -
+
{this.flyout} -
+ < div className="mainView-libraryHandle" style={{ display: !this._flyoutWidth ? "none" : undefined, }} onPointerDown={this.onFlyoutPointerDown} >
{this.dockingContent}
- +
- {this.propertiesWidth() < 10 ? (null) : } + {this.propertiesWidth() < 10 ? (null) : }
; } diff --git a/src/client/views/PropertiesView.scss b/src/client/views/PropertiesView.scss index ce2a87733..1365725cb 100644 --- a/src/client/views/PropertiesView.scss +++ b/src/client/views/PropertiesView.scss @@ -1,6 +1,4 @@ .propertiesView { - - background-color: rgb(205, 205, 205); height: 100%; font-family: "Noto Sans"; cursor: auto; @@ -9,7 +7,6 @@ overflow-y: auto; .propertiesView-title { - background-color: rgb(159, 159, 159); text-align: center; padding-top: 12px; padding-bottom: 12px; @@ -335,7 +332,6 @@ } } } - .propertiesView-fields { //border-bottom: 1px solid black; //padding: 8.5px; @@ -390,7 +386,7 @@ } } - .field { + .propertiesView-field { display: flex; font-size: 7px; background-color: #e8e8e8; @@ -400,7 +396,7 @@ padding-left: 3px; } - .uneditable-field { + .propertiesView-uneditable-field { display: flex; overflow-y: visible; margin-bottom: 2px; diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx index 4dea0ddaa..2a13ab937 100644 --- a/src/client/views/PropertiesView.tsx +++ b/src/client/views/PropertiesView.tsx @@ -5,7 +5,7 @@ import { intersection } from "lodash"; import { action, computed, observable } from "mobx"; import { observer } from "mobx-react"; import { ColorState, SketchPicker } from "react-color"; -import { AclAddonly, AclAdmin, AclEdit, AclPrivate, AclReadonly, AclSym, AclUnset, DataSym, Doc, Field, HeightSym, WidthSym } from "../../fields/Doc"; +import { AclAddonly, AclAdmin, AclEdit, AclPrivate, AclReadonly, AclSym, AclUnset, DataSym, Doc, Field, HeightSym, WidthSym, Opt } from "../../fields/Doc"; import { Id } from "../../fields/FieldSymbols"; import { InkField } from "../../fields/InkField"; import { ComputedField } from "../../fields/ScriptField"; @@ -36,6 +36,7 @@ const _global = (window /* browser */ || global /* node */) as any; interface PropertiesViewProps { width: number; height: number; + backgroundColor: (doc: Opt, renderDepth: number) => Opt; } @observer @@ -144,7 +145,7 @@ export class PropertiesView extends React.Component {
); } } - rows.push(
+ rows.push(
{ docs.forEach(doc => docvals.add(doc[key])); const contents = Array.from(docvals.keys()).length > 1 ? "-multiple" : docs[0][key]; if (key[0] === "#") { - rows.push(
+ rows.push(
{key}  
); } else if (contents !== undefined) { const value = Field.toString(contents as Field); if (noviceReqFields.includes(key) || key.indexOf("lastModified") !== -1) { - rows.push(
+ rows.push(
{key + ": "}
{value}
); @@ -200,7 +201,7 @@ export class PropertiesView extends React.Component { } } } - rows.push(
+ rows.push(
{ return !this.selectedDoc ? (null) : CollectionDockingView.AddSplit(doc, "right")} />; } - previewBackground = () => "lightgrey"; @computed get layoutPreview() { if (SelectionManager.SelectedDocuments().length > 1) { return "-- multiple selected --"; @@ -270,7 +270,7 @@ export class PropertiesView extends React.Component { renderDepth={1} rootSelected={returnFalse} treeViewDoc={undefined} - backgroundColor={this.previewBackground} + backgroundColor={this.props.backgroundColor} fitToBox={true} FreezeDimensions={true} dontCenter={true} @@ -856,7 +856,7 @@ export class PropertiesView extends React.Component { if (this.selectedDoc && !this.isPres) { return
diff --git a/src/client/views/collections/TabDocView.scss b/src/client/views/collections/TabDocView.scss index edf556c9f..9acbc4f85 100644 --- a/src/client/views/collections/TabDocView.scss +++ b/src/client/views/collections/TabDocView.scss @@ -43,7 +43,6 @@ input.lm_title { right: 0; width: 45px; height: 45px; - background: white; transform: translate(20px, 20px) rotate(45deg); border-radius: 30px; padding: 2px; diff --git a/src/client/views/collections/TabDocView.tsx b/src/client/views/collections/TabDocView.tsx index 82530c26d..38b9b399d 100644 --- a/src/client/views/collections/TabDocView.tsx +++ b/src/client/views/collections/TabDocView.tsx @@ -336,7 +336,8 @@ export class TabDocView extends React.Component {
{"toggle minimap"}
}> -
e.stopPropagation()} onClick={action(e => { e.stopPropagation(); this._document!.hideMinimap = !this._document!.hideMinimap; })} > +
e.stopPropagation()} onClick={action(e => { e.stopPropagation(); this._document!.hideMinimap = !this._document!.hideMinimap; })} + style={{ background: CollectionDockingView.Instance.props.backgroundColor?.(this._document, 0) }} >
diff --git a/src/client/views/nodes/ColorBox.tsx b/src/client/views/nodes/ColorBox.tsx index fcc9e50f5..4fb350b55 100644 --- a/src/client/views/nodes/ColorBox.tsx +++ b/src/client/views/nodes/ColorBox.tsx @@ -69,11 +69,11 @@ export class ColorBox extends ViewBoxBaseComponent StrCast(i.rootDoc.type) === DocumentType.INK).map(i => i.rootDoc.strokeWidth = Number(e.target.value)); }} /> -
{ActiveInkBezierApprox() ?? 2}
+ {/*
{ActiveInkBezierApprox() ?? 2}
) => { SetActiveBezierApprox(e.target.value); SelectionManager.SelectedDocuments().filter(i => StrCast(i.rootDoc.type) === DocumentType.INK).map(i => i.rootDoc.strokeBezier = e.target.value); - }} /> + }} /> */}

-- cgit v1.2.3-70-g09d2