From b7296dc3bfb9ad0842a4c0298152f2023d47e1b3 Mon Sep 17 00:00:00 2001 From: anika Date: Sun, 27 Dec 2020 14:19:01 -0600 Subject: rough UI restructure --- src/client/views/MainView.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/client/views/MainView.tsx') diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 5eb8429f0..b05346d4c 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -163,7 +163,7 @@ export class MainView extends React.Component { fa.faWindowMinimize, fa.faWindowRestore, fa.faTextWidth, fa.faTextHeight, fa.faClosedCaptioning, fa.faInfoCircle, fa.faTag, fa.faSyncAlt, fa.faPhotoVideo, fa.faArrowAltCircleDown, fa.faArrowAltCircleUp, fa.faArrowAltCircleLeft, fa.faArrowAltCircleRight, fa.faStopCircle, fa.faCheckCircle, fa.faGripVertical, fa.faSortUp, fa.faSortDown, fa.faTable, fa.faTh, fa.faThList, fa.faProjectDiagram, fa.faSignature, fa.faColumns, fa.faChevronCircleUp, fa.faUpload, fa.faBorderAll, - fa.faBraille, fa.faChalkboard, fa.faPencilAlt, fa.faEyeSlash, fa.faSmile, fa.faIndent, fa.faOutdent, fa.faChartBar, fa.faBan, fa.faPhoneSlash, fa.faGripLines); + fa.faBraille, fa.faChalkboard, fa.faPencilAlt, fa.faEyeSlash, fa.faSmile, fa.faIndent, fa.faOutdent, fa.faChartBar, fa.faBan, fa.faPhoneSlash, fa.faGripLines, fa.faBookmark); this.initAuthenticationRouters(); } -- cgit v1.2.3-70-g09d2 From a70a224d40ed511e8278ce01a74fb0a8a012b075 Mon Sep 17 00:00:00 2001 From: anika Date: Thu, 31 Dec 2020 11:32:41 -0600 Subject: small merge fixes --- src/client/views/MainView.tsx | 5 ++-- src/client/views/StyleProvider.tsx | 40 ++++++++++++++++++++++++++++++ src/client/views/collections/TreeView.scss | 21 +++++++++++----- src/client/views/collections/TreeView.tsx | 5 +++- 4 files changed, 62 insertions(+), 9 deletions(-) (limited to 'src/client/views/MainView.tsx') diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index e43b8baf1..d17b72639 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -44,6 +44,7 @@ import { KeyManager } from './GlobalKeyHandler'; import { InkStrokeProperties } from './InkStrokeProperties'; import { LinkMenu } from './linking/LinkMenu'; import "./MainView.scss"; +import "./collections/TreeView.scss"; import { AudioBox } from './nodes/AudioBox'; import { DocumentLinksButton } from './nodes/DocumentLinksButton'; import { DocumentView, DocumentViewProps } from './nodes/DocumentView'; @@ -58,7 +59,7 @@ import { PDFMenu } from './pdf/PDFMenu'; import { PreviewCursor } from './PreviewCursor'; import { PropertiesView } from './PropertiesView'; import { SearchBox } from './search/SearchBox'; -import { DefaultStyleProvider, StyleProp } from './StyleProvider'; +import { DefaultStyleProvider, DashboardStyleProvider, StyleProp } from './StyleProvider'; import { FieldViewProps } from './nodes/FieldView'; const _global = (window /* browser */ || global /* node */) as any; @@ -342,7 +343,7 @@ export class MainView extends React.Component { PanelHeight={this.getContentsHeight} renderDepth={0} focus={emptyFunction} - styleProvider={this._sidebarContent.proto === Doc.UserDoc().myDashboards ? this.DashboardStyleProvider : DefaultStyleProvider} + styleProvider={this._sidebarContent.title === "My Dashboards" ? DashboardStyleProvider : DefaultStyleProvider} parentActive={returnTrue} whenActiveChanged={emptyFunction} bringToFront={emptyFunction} diff --git a/src/client/views/StyleProvider.tsx b/src/client/views/StyleProvider.tsx index a6e3516ed..c9eedb85d 100644 --- a/src/client/views/StyleProvider.tsx +++ b/src/client/views/StyleProvider.tsx @@ -15,6 +15,7 @@ import { MainView } from './MainView'; import { DocumentViewProps } from "./nodes/DocumentView"; import { FieldViewProps } from './nodes/FieldView'; import "./StyleProvider.scss"; +import "./collections/TreeView.scss"; import React = require("react"); import Color = require('color'); @@ -169,6 +170,45 @@ export function DefaultStyleProvider(doc: Opt, props: Opt runInAction(() => { + e.stopPropagation(); + doc.hidden = doc.hidden ? undefined : true; + }), "toggleHidden"); +} + +function toggleLock(e: React.MouseEvent, doc: Doc) { + UndoManager.RunInBatch(() => runInAction(() => { + e.stopPropagation(); + doc.lockedPosition = doc.lockedPosition ? undefined : true; + }), "toggleHidden"); +} + +/** + * add lock and hide button decorations for the "Dashboards" flyout TreeView + */ +export function DashboardStyleProvider(doc: Opt, props: Opt, property: string) { + switch (property.split(":")[0]) { + case StyleProp.Decorations: + if (doc) { + const hidden = doc.hidden; + const locked = doc.lockedPosition; + return doc._viewType === CollectionViewType.Docking || (Doc.IsSystem(doc) && Doc.UserDoc().noviceMode) ? (null) : + <> +
toggleHidden(e, doc)}> + +
+
toggleLock(e, doc)}> + +
+ ; + } + default: return DefaultStyleProvider(doc, props, property); + + } +} + // // a preliminary semantic-"layering/grouping" mechanism for determining interactive properties of documents // currently, the provider tests whether the docuemnt's layer field matches the activeLayer field of the tab. diff --git a/src/client/views/collections/TreeView.scss b/src/client/views/collections/TreeView.scss index 1208fa07d..2f74a49bb 100644 --- a/src/client/views/collections/TreeView.scss +++ b/src/client/views/collections/TreeView.scss @@ -29,7 +29,7 @@ } .treeView-checkIcon { - left: 3px; + left: 3.5px; top: 2px; position: absolute; } @@ -118,12 +118,18 @@ margin-left: 0.25rem; opacity: 0.75; - >svg, .styleProvider-treeView-lock, .styleProvider-treeView-hide, .styleProvider-treeView-lock-active, .styleProvider-treeView-hide-active { + >svg, + .styleProvider-treeView-lock, + .styleProvider-treeView-hide, + .styleProvider-treeView-lock-active, + .styleProvider-treeView-hide-active { margin-left: 0.25rem; - margin-right: 0.25rem; + margin-right: 0.25rem; } - - >svg, .styleProvider-treeView-lock, .styleProvider-treeView-hide { + + >svg, + .styleProvider-treeView-lock, + .styleProvider-treeView-hide { display: none; } } @@ -148,7 +154,10 @@ } .right-buttons-container { - >svg, .styleProvider-treeView-lock, .styleProvider-treeView-hide { + + >svg, + .styleProvider-treeView-lock, + .styleProvider-treeView-hide { display: inherit; } } diff --git a/src/client/views/collections/TreeView.tsx b/src/client/views/collections/TreeView.tsx index 2f9a2f3eb..a297ad708 100644 --- a/src/client/views/collections/TreeView.tsx +++ b/src/client/views/collections/TreeView.tsx @@ -590,7 +590,10 @@ export class TreeView extends React.Component { }} > {view} - {this.headerElements} +
+ {this.props.styleProvider?.(this.doc, this.props.treeView.props, StyleProp.Decorations)} {/* hide and lock buttons */} + {this.headerElements} +
; } -- cgit v1.2.3-70-g09d2 From f32df5a6b290318845afb842d938e21b938041d7 Mon Sep 17 00:00:00 2001 From: anika Date: Fri, 8 Jan 2021 01:37:39 -0600 Subject: UI changes and clean up --- src/client/util/CurrentUserUtils.ts | 6 +++--- src/client/views/MainView.tsx | 5 +++-- src/client/views/PropertiesView.tsx | 10 +++++----- src/client/views/nodes/FilterBox.scss | 32 +++++++++++++++++++++----------- src/client/views/nodes/FilterBox.tsx | 27 ++++++++++++++++++++------- 5 files changed, 52 insertions(+), 28 deletions(-) (limited to 'src/client/views/MainView.tsx') diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index e47c9a0e2..c4f7744ce 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -799,9 +799,9 @@ export class CurrentUserUtils { (doc.currentFilter as any as Doc).contextMenuScripts = new List([clearAll!]); (doc.currentFilter as any as Doc).contextMenuLabels = new List(["Clear All"]); } - const clearAll = ScriptField.MakeScript(`getProto(self).data = new List([]); scriptContext._docFilters = scriptContext._docRangeFilters = undefined;`, { scriptContext: Doc.name }); - (doc.myFilter as any as Doc).contextMenuScripts = new List([clearAll!]); - (doc.myFilter as any as Doc).contextMenuLabels = new List(["Clear All"]); + // const clearAll = ScriptField.MakeScript(`getProto(self).data = new List([]); scriptContext._docFilters = scriptContext._docRangeFilters = undefined;`, { scriptContext: Doc.name }); + // (doc.myFilter as any as Doc).contextMenuScripts = new List([clearAll!]); + // (doc.myFilter as any as Doc).contextMenuLabels = new List(["Clear All"]); } diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index ab63ebd03..6c0b85f4b 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -165,7 +165,8 @@ export class MainView extends React.Component { fa.faWindowMinimize, fa.faWindowRestore, fa.faTextWidth, fa.faTextHeight, fa.faClosedCaptioning, fa.faInfoCircle, fa.faTag, fa.faSyncAlt, fa.faPhotoVideo, fa.faArrowAltCircleDown, fa.faArrowAltCircleUp, fa.faArrowAltCircleLeft, fa.faArrowAltCircleRight, fa.faStopCircle, fa.faCheckCircle, fa.faGripVertical, fa.faSortUp, fa.faSortDown, fa.faTable, fa.faTh, fa.faThList, fa.faProjectDiagram, fa.faSignature, fa.faColumns, fa.faChevronCircleUp, fa.faUpload, fa.faBorderAll, - fa.faBraille, fa.faChalkboard, fa.faPencilAlt, fa.faEyeSlash, fa.faSmile, fa.faIndent, fa.faOutdent, fa.faChartBar, fa.faBan, fa.faPhoneSlash, fa.faGripLines, fa.faBookmark); + fa.faBraille, fa.faChalkboard, fa.faPencilAlt, fa.faEyeSlash, fa.faSmile, fa.faIndent, fa.faOutdent, fa.faChartBar, fa.faBan, fa.faPhoneSlash, fa.faGripLines, + fa.faSave, fa.faBookmark); this.initAuthenticationRouters(); } @@ -344,7 +345,7 @@ export class MainView extends React.Component { renderDepth={0} scriptContext={CollectionDockingView.Instance.props.Document} focus={emptyFunction} - styleProvider={this._sidebarContent.title === "My Dashboards" ? DashboardStyleProvider : DefaultStyleProvider} + styleProvider={this._sidebarContent.title === "My Dashboards" ? this.DashboardStyleProvider : DefaultStyleProvider} parentActive={returnTrue} whenActiveChanged={emptyFunction} bringToFront={emptyFunction} diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx index a8b65c114..1c6ad26e6 100644 --- a/src/client/views/PropertiesView.tsx +++ b/src/client/views/PropertiesView.tsx @@ -908,19 +908,19 @@ export class PropertiesView extends React.Component { } -
-
+
this.openFilters = !this.openFilters)} style={{ backgroundColor: this.openFilters ? "black" : "" }}> Filters -
+
{!this.openFilters ? (null) : -
+
AND -
specified filters
+
filters in
+
-
+ {/*
Scope:
-
+
*/} {/*
*/}
@@ -291,10 +296,18 @@ export class FilterBox extends ViewBoxBaseComponentdocuments
-
-
- -
SAVE
+
+
+
+ +
SAVE
+
+
+
+
+ +
MY FILTERS
+
-- cgit v1.2.3-70-g09d2