From 57552e7b8640bbb6896e8d484aea9656b264e548 Mon Sep 17 00:00:00 2001 From: Melissa Zhang Date: Wed, 23 Dec 2020 13:20:51 -0800 Subject: move lock/hide buttons to StyleProvider --- src/client/views/MainView.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) (limited to 'src/client/views/MainView.tsx') diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 5eb8429f0..daa059a49 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -58,7 +58,7 @@ import { PDFMenu } from './pdf/PDFMenu'; import { PreviewCursor } from './PreviewCursor'; import { PropertiesView } from './PropertiesView'; import { SearchBox } from './search/SearchBox'; -import { DefaultStyleProvider } from './StyleProvider'; +import { DefaultStyleProvider, DashboardStyleProvider } from './StyleProvider'; const _global = (window /* browser */ || global /* node */) as any; @observer @@ -296,6 +296,7 @@ export class MainView extends React.Component { } @computed get flyout() { + console.log(this._sidebarContent.title); return !this._flyoutWidth ?
{this.docButtons}
: @@ -314,7 +315,7 @@ export class MainView extends React.Component { PanelHeight={this.getContentsHeight} renderDepth={0} focus={emptyFunction} - styleProvider={DefaultStyleProvider} + styleProvider={this._sidebarContent.title === "My Dashboards" ? DashboardStyleProvider : DefaultStyleProvider} parentActive={returnTrue} whenActiveChanged={emptyFunction} bringToFront={emptyFunction} -- cgit v1.2.3-70-g09d2 From 7aba0a9b1b1a3e7d72e24118ecbb05b98165d3b9 Mon Sep 17 00:00:00 2001 From: Melissa Zhang Date: Wed, 23 Dec 2020 14:39:29 -0800 Subject: UI styling changes --- src/client/views/MainView.scss | 1 - src/client/views/MainView.tsx | 5 ++--- src/client/views/collections/TreeView.scss | 27 +++++++++++++++------------ src/client/views/collections/TreeView.tsx | 7 ++++--- src/client/views/search/SearchBox.scss | 29 ++++++++--------------------- src/client/views/search/SearchBox.tsx | 2 +- 6 files changed, 30 insertions(+), 41 deletions(-) (limited to 'src/client/views/MainView.tsx') diff --git a/src/client/views/MainView.scss b/src/client/views/MainView.scss index 33bd7e77e..d6a455a22 100644 --- a/src/client/views/MainView.scss +++ b/src/client/views/MainView.scss @@ -369,7 +369,6 @@ height: 55px; top: 50%; left: -10px; - border: 1px solid black; border-radius: 8px; position: relative; z-index: 41; // lm_maximised has a z-index of 40 and this needs to be above that diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index daa059a49..48cc6f36d 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -296,7 +296,6 @@ export class MainView extends React.Component { } @computed get flyout() { - console.log(this._sidebarContent.title); return !this._flyoutWidth ?
{this.docButtons}
: @@ -387,8 +386,8 @@ export class MainView extends React.Component { {this.menuPanel}
{this.flyout} - < div className="mainView-libraryHandle" style={{ display: !this._flyoutWidth ? "none" : undefined, }} onPointerDown={this.onFlyoutPointerDown} > - +
+
{this.dockingContent} diff --git a/src/client/views/collections/TreeView.scss b/src/client/views/collections/TreeView.scss index 45dec2661..3c1e16f6c 100644 --- a/src/client/views/collections/TreeView.scss +++ b/src/client/views/collections/TreeView.scss @@ -98,15 +98,20 @@ width: unset; } - >svg, .styleProvider-treeView-lock, .styleProvider-treeView-hide, .styleProvider-treeView-lock-active, .styleProvider-treeView-hide-active { + .right-buttons-container { + display: flex; + align-items: center; margin-left: 0.25rem; - margin-right: 0.25rem; - } - >svg, .styleProvider-treeView-lock, .styleProvider-treeView-hide { - display: none; + >svg, .styleProvider-treeView-lock, .styleProvider-treeView-hide, .styleProvider-treeView-lock-active, .styleProvider-treeView-hide-active { + margin-left: 0.25rem; + margin-right: 0.25rem; + } + + >svg, .styleProvider-treeView-lock, .styleProvider-treeView-hide { + display: none; + } } - } .treeView-header:hover { @@ -114,10 +119,6 @@ display: inherit; } - >svg { - display: inherit; - } - .treeView-openRight { display: inline-block; height: 17px; @@ -131,8 +132,10 @@ } } - .styleProvider-treeView-lock, .styleProvider-treeView-hide { - display: inherit; + .right-buttons-container { + >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 8d25cc295..bce0ba9e2 100644 --- a/src/client/views/collections/TreeView.tsx +++ b/src/client/views/collections/TreeView.tsx @@ -585,9 +585,10 @@ export class TreeView extends React.Component { }} > {view}
- {/* hide and lock buttons */} - {this.props.styleProvider?.(this.doc, this.props.treeView.props, StyleProp.Decorations)} - {this.headerElements} +
+ {this.props.styleProvider?.(this.doc, this.props.treeView.props, StyleProp.Decorations)} {/* hide and lock buttons */} + {this.headerElements} +
; } diff --git a/src/client/views/search/SearchBox.scss b/src/client/views/search/SearchBox.scss index 13d4a6d5a..76f9b66eb 100644 --- a/src/client/views/search/SearchBox.scss +++ b/src/client/views/search/SearchBox.scss @@ -30,42 +30,29 @@ .searchBox-lozenge-user, .searchBox-lozenge-dashboard, .searchBox-lozenge { - background-color: #313131; - border-radius: 5px; height: 18px; padding: 4px; - box-shadow: lightgrey 0.15em 0.15em 0.1em; - margin: 2px; - margin-bottom: 4px; - border-top: dimgrey 1px solid; - border-left: dimgrey 1px solid; + margin-right: 5px; display: flex; + align-items: center; + border: grey 1px solid; .searchBox-logoff, .searchBox-dashboards { border-radius: 3px; background: olivedrab; color: white; - position: relative; display: none; - margin-left: 3px; - padding-left: 2px; - padding-right: 2px; - padding-bottom: 11px; - cursor: default; + margin-left: 5px; + padding: 1px 2px 1px 2px; + cursor: pointer; } .searchBox-logoff { background: red; } .searchBox-dashSelect{ - background-color: black; - color: white; - font-size: 9; - margin-right: 6; - border-radius: 5px; - position: relative; - height: 15px; - transform: translate(0,-3px); + border: none; + background-color: transparent; &:hover { cursor: pointer; diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index d3fee85a7..d10afdcf9 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -466,7 +466,7 @@ export class SearchBox extends ViewBoxBaseComponent + return
-- cgit v1.2.3-70-g09d2 From a2807a42ab6af0d683726d8263b14fc8121fc6f0 Mon Sep 17 00:00:00 2001 From: bobzel Date: Wed, 23 Dec 2020 19:21:10 -0500 Subject: changed DashbaoardStyleProvider to not show icons for tab's by adding an 'afterHeader' property extension to treeView styleprovider calls. --- src/client/views/MainView.tsx | 40 ++++++++++++++++++++++++++----- src/client/views/StyleProvider.tsx | 37 ---------------------------- src/client/views/collections/TreeView.tsx | 2 +- 3 files changed, 35 insertions(+), 44 deletions(-) (limited to 'src/client/views/MainView.tsx') diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 48cc6f36d..f301d6c51 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -3,7 +3,7 @@ import { faBuffer, faHireAHelper } from '@fortawesome/free-brands-svg-icons'; import * as far from '@fortawesome/free-regular-svg-icons'; import * as fa from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { action, computed, configure, observable, reaction } from 'mobx'; +import { action, computed, configure, observable, reaction, runInAction } from 'mobx'; import { observer } from 'mobx-react'; import "normalize.css"; import * as React from 'react'; @@ -28,7 +28,7 @@ import { SettingsManager } from '../util/SettingsManager'; import { SharingManager } from '../util/SharingManager'; import { SnappingManager } from '../util/SnappingManager'; import { Transform } from '../util/Transform'; -import { UndoManager } from '../util/UndoManager'; +import { UndoManager, undoBatch } from '../util/UndoManager'; import { TimelineMenu } from './animationtimeline/TimelineMenu'; import { CollectionDockingView } from './collections/CollectionDockingView'; import { MarqueeOptionsMenu } from './collections/collectionFreeForm/MarqueeOptionsMenu'; @@ -46,7 +46,7 @@ import { LinkMenu } from './linking/LinkMenu'; import "./MainView.scss"; import { AudioBox } from './nodes/AudioBox'; import { DocumentLinksButton } from './nodes/DocumentLinksButton'; -import { DocumentView } from './nodes/DocumentView'; +import { DocumentView, DocumentViewProps } from './nodes/DocumentView'; import { FormattedTextBox } from './nodes/formattedText/FormattedTextBox'; import { LinkDescriptionPopup } from './nodes/LinkDescriptionPopup'; import { LinkDocPreview } from './nodes/LinkDocPreview'; @@ -58,7 +58,8 @@ import { PDFMenu } from './pdf/PDFMenu'; import { PreviewCursor } from './PreviewCursor'; import { PropertiesView } from './PropertiesView'; import { SearchBox } from './search/SearchBox'; -import { DefaultStyleProvider, DashboardStyleProvider } from './StyleProvider'; +import { DefaultStyleProvider, StyleProp } from './StyleProvider'; +import { FieldViewProps } from './nodes/FieldView'; const _global = (window /* browser */ || global /* node */) as any; @observer @@ -295,6 +296,33 @@ export class MainView extends React.Component { doc.dockingConfig ? CurrentUserUtils.openDashboard(Doc.UserDoc(), doc) : CollectionDockingView.AddSplit(doc, "right"); } + + /** + * add lock and hide button decorations for the "Dashboards" flyout TreeView + */ + DashboardStyleProvider(doc: Opt, props: Opt, property: string) { + const toggleField = undoBatch(action((e: React.MouseEvent, doc: Doc, field: string) => { + e.stopPropagation(); + doc[field] = doc[field] ? undefined : true; + })); + switch (property.split(":")[0]) { + case StyleProp.Decorations: + return !doc || property.includes(":afterHeader") || // bcz: Todo: afterHeader should be generalized into a renderPath that is a list of the documents rendered so far which would mimic much of CSS property selectors + DocListCast((Doc.UserDoc().myDashboards as Doc).data).some(dash => dash === doc || + DocListCast(dash.data).some(tabset => tabset === doc)) ? (null) : + <> +
toggleField(e, doc, "hidden")}> + +
+
toggleField(e, doc, "lockedPosition")}> + +
+ ; + } + return DefaultStyleProvider(doc, props, property); + } + + @computed get flyout() { return !this._flyoutWidth ?
{this.docButtons} @@ -314,7 +342,7 @@ export class MainView extends React.Component { PanelHeight={this.getContentsHeight} renderDepth={0} focus={emptyFunction} - styleProvider={this._sidebarContent.title === "My Dashboards" ? DashboardStyleProvider : DefaultStyleProvider} + styleProvider={this._sidebarContent.proto === Doc.UserDoc().myDashboards ? this.DashboardStyleProvider : DefaultStyleProvider} parentActive={returnTrue} whenActiveChanged={emptyFunction} bringToFront={emptyFunction} @@ -387,7 +415,7 @@ export class MainView extends React.Component {
{this.flyout}
- +
{this.dockingContent} diff --git a/src/client/views/StyleProvider.tsx b/src/client/views/StyleProvider.tsx index 10cad5806..312cfc73e 100644 --- a/src/client/views/StyleProvider.tsx +++ b/src/client/views/StyleProvider.tsx @@ -160,43 +160,6 @@ export function DefaultStyleProvider(doc: Opt, props: Opt : (null); } - } -} - -function toggleHidden(e: React.MouseEvent, doc: Doc) { - UndoManager.RunInBatch(() => 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); } } diff --git a/src/client/views/collections/TreeView.tsx b/src/client/views/collections/TreeView.tsx index bce0ba9e2..e05e5925d 100644 --- a/src/client/views/collections/TreeView.tsx +++ b/src/client/views/collections/TreeView.tsx @@ -586,7 +586,7 @@ export class TreeView extends React.Component { {view}
- {this.props.styleProvider?.(this.doc, this.props.treeView.props, StyleProp.Decorations)} {/* hide and lock buttons */} + {this.props.styleProvider?.(this.doc, this.props.treeView.props, StyleProp.Decorations + (Doc.IsSystem(this.props.containingCollection) ? ":afterHeader" : ""))} {/* hide and lock buttons */} {this.headerElements}
; -- cgit v1.2.3-70-g09d2