hardcoded lock/hide buttons

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}
         </>;
     }