diff options
Diffstat (limited to 'src/client')
| -rw-r--r-- | src/client/views/MainView.tsx | 5 | ||||
| -rw-r--r-- | src/client/views/StyleProvider.tsx | 37 | ||||
| -rw-r--r-- | src/client/views/collections/TreeView.scss | 6 | ||||
| -rw-r--r-- | src/client/views/collections/TreeView.tsx | 30 |
4 files changed, 45 insertions, 33 deletions
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 ? <div className={`mainView-libraryFlyout-out`}> {this.docButtons} </div> : @@ -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} diff --git a/src/client/views/StyleProvider.tsx b/src/client/views/StyleProvider.tsx index 312cfc73e..10cad5806 100644 --- a/src/client/views/StyleProvider.tsx +++ b/src/client/views/StyleProvider.tsx @@ -160,6 +160,43 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<FieldViewProps | </div> : (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<Doc>, props: Opt<FieldViewProps | DocumentViewProps>, 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) : + <> + <div className={`styleProvider-treeView-hide${hidden ? "-active" : ""}`} onClick={(e) => toggleHidden(e, doc)}> + <FontAwesomeIcon icon={hidden ? "eye-slash" : "eye"} size="sm" /> + </div> + <div className={`styleProvider-treeView-lock${locked ? "-active" : ""}`} onClick={(e) => toggleLock(e, doc)}> + <FontAwesomeIcon icon={locked ? "lock" : "unlock"} size="sm" /> + </div> + </> + } + default: return DefaultStyleProvider(doc, props, property); } } diff --git a/src/client/views/collections/TreeView.scss b/src/client/views/collections/TreeView.scss index 1cd7cf82a..45dec2661 100644 --- a/src/client/views/collections/TreeView.scss +++ b/src/client/views/collections/TreeView.scss @@ -98,12 +98,12 @@ width: unset; } - >svg, .treeView-lock, .treeView-hide, .treeView-lock-active, .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; } - >svg, .treeView-lock, .treeView-hide { + >svg, .styleProvider-treeView-lock, .styleProvider-treeView-hide { display: none; } @@ -131,7 +131,7 @@ } } - .treeView-lock, .treeView-hide { + .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 bc0fd287b..8d25cc295 100644 --- a/src/client/views/collections/TreeView.tsx +++ b/src/client/views/collections/TreeView.tsx @@ -466,33 +466,6 @@ export class TreeView extends React.Component<TreeViewProps> { } </div>; } - - @action - toggleHidden = (e: React.MouseEvent) => { - e.stopPropagation(); - this.doc.hidden = this.doc.hidden ? undefined : true; - } - - @action - toggleLock = (e: React.MouseEvent) => { - e.stopPropagation(); - this.doc.lockedPosition = this.doc.lockedPosition ? undefined : true; - } - - @computed get renderRightButtons() { - TraceMobx(); - const hidden = this.doc.hidden; - const locked = this.doc.lockedPosition; - return this.doc._viewType == CollectionViewType.Docking || (Doc.IsSystem(this.doc) && Doc.UserDoc().noviceMode) ? (null) : - <> - <div className={`treeView-hide${hidden ? "-active" : ""}`} onClick={this.toggleHidden}> - <FontAwesomeIcon icon={hidden ? "eye-slash" : "eye"} size="sm" /> - </div> - <div className={`treeView-lock${locked ? "-active" : ""}`} onClick={this.toggleLock}> - <FontAwesomeIcon icon={locked ? "lock" : "unlock"} size="sm" /> - </div> - </> - } @computed get showTitleEditorControl() { return ["*", this._uniqueId, this.props.treeView._uniqueId].includes(Doc.GetT(this.doc, "editTitle", "string", true) || ""); } @computed get headerElements() { @@ -612,7 +585,8 @@ export class TreeView extends React.Component<TreeViewProps> { }} > {view} </div > - {this.renderRightButtons} + {/* hide and lock buttons */} + {this.props.styleProvider?.(this.doc, this.props.treeView.props, StyleProp.Decorations)} {this.headerElements} </>; } |