From ee1f52496d44baa8566b03a05eb24d67fe80a89a Mon Sep 17 00:00:00 2001 From: Geireann Lindfield Roberts <60007097+geireann@users.noreply.github.com> Date: Tue, 27 Oct 2020 12:43:00 +0800 Subject: Performance updates for up/down arrows Only calls resetSelection when necessary --- src/client/views/collections/CollectionMenu.tsx | 5 ++++- src/client/views/collections/TabDocView.tsx | 7 ++++++- src/client/views/collections/collectionFreeForm/MarqueeView.tsx | 7 +++++-- 3 files changed, 15 insertions(+), 4 deletions(-) (limited to 'src/client/views/collections') diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx index 34a1c0697..338b067fa 100644 --- a/src/client/views/collections/CollectionMenu.tsx +++ b/src/client/views/collections/CollectionMenu.tsx @@ -400,7 +400,10 @@ export class CollectionViewBaseChrome extends React.Component) => { if (targetDoc) { TabDocView.PinDoc(targetDoc, false); - const activeDoc = PresBox.Instance?.childDocs[PresBox.Instance?.childDocs.length - 1]; + const presArray: Doc[] = PresBox.Instance?.sortArray(); + const size: number = PresBox.Instance?._selectedArray.size; + const presSelected: Doc | undefined = presArray && size ? presArray[size - 1] : undefined; + const activeDoc = presSelected ? PresBox.Instance?.childDocs[PresBox.Instance?.childDocs.indexOf(presSelected) + 1] : PresBox.Instance?.childDocs[PresBox.Instance?.childDocs.length - 1]; if (targetDoc.type === DocumentType.PDF || targetDoc.type === DocumentType.RTF || targetDoc.type === DocumentType.WEB || targetDoc._viewType === CollectionViewType.Stacking) { const scroll = targetDoc._scrollTop; activeDoc.presPinView = true; diff --git a/src/client/views/collections/TabDocView.tsx b/src/client/views/collections/TabDocView.tsx index dcd94a7e6..82530c26d 100644 --- a/src/client/views/collections/TabDocView.tsx +++ b/src/client/views/collections/TabDocView.tsx @@ -134,7 +134,10 @@ export class TabDocView extends React.Component { pinDoc.title = doc.title + " - Slide"; pinDoc.presMovement = PresMovement.Zoom; pinDoc.context = curPres; - Doc.AddDocToList(curPres, "data", pinDoc); + const presArray: Doc[] = PresBox.Instance?.sortArray(); + const size: number = PresBox.Instance?._selectedArray.size; + const presSelected: Doc | undefined = presArray && size ? presArray[size - 1] : undefined; + Doc.AddDocToList(curPres, "data", pinDoc, presSelected); if (pinDoc.type === "audio" && !audioRange) { pinDoc.presStartTime = 0; pinDoc.presEndTime = doc.duration; @@ -149,6 +152,8 @@ export class TabDocView extends React.Component { tabdocs?.push(curPres); // bcz: Argh! this is annoying. if multiple documents are pinned, this will get called multiple times before the presentation view is drawn. Thus it won't be in the tabdocs list and it will get created multple times. so need to explicilty add the presbox to the list of open tabs CollectionDockingView.AddSplit(curPres, "right"); } + PresBox.Instance?._selectedArray.clear(); + pinDoc && PresBox.Instance?._selectedArray.set(pinDoc, undefined); //Update selected array DocumentManager.Instance.jumpToDocument(doc, false, undefined); batch.end(); } diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx index c6d1c9da2..efbe85f1a 100644 --- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx +++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx @@ -25,7 +25,7 @@ import "./MarqueeView.scss"; import React = require("react"); import { Id } from "../../../../fields/FieldSymbols"; import { CurrentUserUtils } from "../../../util/CurrentUserUtils"; -import { PresMovement } from "../../nodes/PresBox"; +import { PresBox, PresMovement } from "../../nodes/PresBox"; interface MarqueeViewProps { getContainerTransform: () => Transform; @@ -399,7 +399,10 @@ export class MarqueeView extends React.Component Date: Wed, 28 Oct 2020 09:19:26 -0400 Subject: fixed up dark schema a bit. --- src/client/views/MainView.scss | 1 - src/client/views/MainView.tsx | 23 ++++++++++++---------- .../views/collections/CollectionDockingView.scss | 2 +- src/client/views/globalCssVariables.scss | 2 +- .../nodes/formattedText/FormattedTextBox.scss | 2 +- .../views/presentationview/PresElementBox.tsx | 2 +- 6 files changed, 17 insertions(+), 15 deletions(-) (limited to 'src/client/views/collections') diff --git a/src/client/views/MainView.scss b/src/client/views/MainView.scss index b608eceb1..d571a0428 100644 --- a/src/client/views/MainView.scss +++ b/src/client/views/MainView.scss @@ -334,7 +334,6 @@ position: relative; z-index: 41; // lm_maximised has a z-index of 40 and this needs to be above that touch-action: none; - background-color: lightgrey; cursor: grab; display: flex; align-items: center; 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; }); diff --git a/src/client/views/collections/CollectionDockingView.scss b/src/client/views/collections/CollectionDockingView.scss index 8b1594b21..f4736eb29 100644 --- a/src/client/views/collections/CollectionDockingView.scss +++ b/src/client/views/collections/CollectionDockingView.scss @@ -4,7 +4,7 @@ .lm_title { margin-top: 3px; border-radius: 5px; - border: solid 1px dimgray; + border: solid 0px dimgray; border-width: 2px 2px 0px; height: 20px; transform: translate(0px, -3px); diff --git a/src/client/views/globalCssVariables.scss b/src/client/views/globalCssVariables.scss index 1e0b023d7..b2ea87c06 100644 --- a/src/client/views/globalCssVariables.scss +++ b/src/client/views/globalCssVariables.scss @@ -33,7 +33,7 @@ $searchpanel-height: 32px; $mainTextInput-zindex: 999; // then text input overlay so that it's context menu will appear over decorations, etc $docDecorations-zindex: 998; // then doc decorations appear over everything else $remoteCursors-zindex: 997; // ... not sure what level the remote cursors should go -- is this right? -$COLLECTION_BORDER_WIDTH: 1; +$COLLECTION_BORDER_WIDTH: 0; $SCHEMA_DIVIDER_WIDTH: 4; $MINIMIZED_ICON_SIZE:25; $MAX_ROW_HEIGHT: 44px; diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.scss b/src/client/views/nodes/formattedText/FormattedTextBox.scss index 9307f1649..b75cc230f 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.scss +++ b/src/client/views/nodes/formattedText/FormattedTextBox.scss @@ -22,7 +22,7 @@ border-style: solid; overflow-y: auto; overflow-x: hidden; - color: initial; + color: inherit; display: flex; flex-direction: row; transition: opacity 1s; diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx index 8017468c3..7a28f8bff 100644 --- a/src/client/views/presentationview/PresElementBox.tsx +++ b/src/client/views/presentationview/PresElementBox.tsx @@ -311,7 +311,7 @@ export class PresElementBox extends ViewBoxBaseComponent {`${this.indexInPres + 1}.`}
} - {miniView ? (null) :
+ {miniView ? (null) :
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/collections') 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