diff options
| -rw-r--r-- | src/client/views/collections/CollectionTreeView.tsx | 2 | ||||
| -rw-r--r-- | src/client/views/collections/TreeView.scss | 11 | ||||
| -rw-r--r-- | src/client/views/collections/TreeView.tsx | 29 |
3 files changed, 40 insertions, 2 deletions
diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx index 344a6c103..564939270 100644 --- a/src/client/views/collections/CollectionTreeView.tsx +++ b/src/client/views/collections/CollectionTreeView.tsx @@ -213,7 +213,7 @@ export class CollectionTreeView extends CollectionSubView<Document, Partial<coll TraceMobx(); if (!(this.doc instanceof Doc)) return (null); const background = this.props.styleProvider?.(this.doc, this.props, StyleProp.BackgroundColor); - const paddingX = `${NumCast(this.doc._xPadding, 10)}px`; + const paddingX = `${NumCast(this.doc._xPadding, 15)}px`; const paddingTop = `${NumCast(this.doc._yPadding, 20)}px`; const pointerEvents = !this.props.active() && !SnappingManager.GetIsDragging() && !this._isChildActive ? "none" : undefined; diff --git a/src/client/views/collections/TreeView.scss b/src/client/views/collections/TreeView.scss index 7a654c7cf..1cd7cf82a 100644 --- a/src/client/views/collections/TreeView.scss +++ b/src/client/views/collections/TreeView.scss @@ -98,7 +98,12 @@ width: unset; } - >svg { + >svg, .treeView-lock, .treeView-hide, .treeView-lock-active, .treeView-hide-active { + margin-left: 0.25rem; + margin-right: 0.25rem; + } + + >svg, .treeView-lock, .treeView-hide { display: none; } @@ -125,6 +130,10 @@ margin-left: 3px; } } + + .treeView-lock, .treeView-hide { + display: inherit; + } } .treeView-header-above { diff --git a/src/client/views/collections/TreeView.tsx b/src/client/views/collections/TreeView.tsx index 93d3be1fc..bc0fd287b 100644 --- a/src/client/views/collections/TreeView.tsx +++ b/src/client/views/collections/TreeView.tsx @@ -466,6 +466,34 @@ 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() { return (Doc.IsSystem(this.doc) && Doc.UserDoc().noviceMode) || this.props.treeViewHideHeaderFields() ? (null) : @@ -584,6 +612,7 @@ export class TreeView extends React.Component<TreeViewProps> { }} > {view} </div > + {this.renderRightButtons} {this.headerElements} </>; } |