Merge branch 'master' into ink_edits

1 files changed, 49 insertions, 11 deletions

diff --git a/src/client/views/collections/TreeView.scss b/src/client/views/collections/TreeView.scss
index 17c6b0750..067675038 100644
--- a/src/client/views/collections/TreeView.scss
+++ b/src/client/views/collections/TreeView.scss
@@ -1,5 +1,13 @@
 @import "../globalCssVariables";
 
+.treeView-label {
+    max-height: 1.5em;
+    text-overflow: ellipsis;
+    display: inline-block;
+    white-space: pre;
+    width: 100%;
+    overflow: hidden;
+}
 .treeView-container,
 .treeView-container-active {
     .bullet-outline {
@@ -10,9 +18,26 @@
         display: inline-block;
     }
 
+    .treeView-bulletIcons {
+        width: 15px;
+        .treeView-expandIcon {
+            display: none;
+            left: -10px;
+            position: absolute;
+        }
+        .treeView-checkIcon {
+            left: -10px;
+            position: absolute;
+        }
+        &:hover {
+            .treeView-expandIcon {
+                display: unset;
+            }
+        }
+    }
     .bullet {
         position: relative;
-        width: 15px;
+        width: $TREE_BULLET_WIDTH;
         color: $intermediate-color;
         margin-top: 3px;
         transform: scale(1.3, 1.3);
@@ -22,7 +47,7 @@
 }
 .treeView-container-active {
     z-index: 100;
-    position: relative;;
+    position: relative;
     .formattedTextbox-sidebar {
         background-color: #ffff001f !important;
         height: 500px !important;
@@ -40,7 +65,7 @@
     cursor: pointer;
 }
 
-.treeView-border-outline,
+.treeView-borderoutline,
 .treeView-border {
     display: flex;
     overflow: hidden;
@@ -58,7 +83,7 @@
             display: none;
     }
     .formattedTextBox-cont {
-        .formattedTextbox-sidebar {
+        .formattedTextbox-sidebar, .formattedTextbox-sidebar-inking {
             overflow: visible !important;
             border-left: unset;
         }
@@ -73,10 +98,21 @@
         width: unset;
     }
 
-    >svg {
-        display: none;
-    }
+    .right-buttons-container {
+        display: flex;
+        align-items: center;
+        margin-left: 0.25rem;
+        opacity: 0.75;
 
+        >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 {
@@ -84,10 +120,6 @@
         display: inherit;
     }
 
-    >svg {
-        display: inherit;
-    }
-
     .treeView-openRight {
         display: inline-block;
         height: 17px;
@@ -100,6 +132,12 @@
             margin-left: 3px;
         }
     }
+
+    .right-buttons-container {
+        >svg, .styleProvider-treeView-lock, .styleProvider-treeView-hide {
+            display: inherit;
+        }
+    }
 }
 
 .treeView-header-above {