Merge pull request #760 from TriliumNext/style/next/restyle-tree-actions

Style Next: Restyle the tree action buttons

src/public/stylesheets/theme-next.css

@@ -48,6 +48,12 @@
     --launcher-pane-button-margin: 6px;
     --launcher-pane-button-gap: 3px;
 
+    --tree-actions-toolbar-horizontal-margin: 8px;
+    --tree-actions-toolbar-vertical-margin: 8px;
+    --tree-actions-toolbar-padding-size: 4px;
+    --tree-actions-toolbar-collapsed-width: 40px;
+    --tree-actions-toolbar-expand-button-size: 25px;
+
     --tab-bar-height: 50px;
     --tab-height: 36px;
     --tab-first-item-horiz-offset: 1px;

src/public/stylesheets/theme-next/shell.css

@@ -345,23 +345,8 @@ div.quick-search .search-button.show  {
 
 /* Tree */
 
-#left-pane .tree-actions {
-    right: 3px;
-    bottom: 6px;
-    transform: translateY(200%) !important;
-    transition: transform 250ms ease-in-out;
-}
-
-#left-pane:hover .tree-actions {
-    transform: translateY(0) !important;
-}
-
-button.tree-floating-button {
-    font-size: 18px !important;
-}
-
 #left-pane div.tree {
-    padding: 3px 6px;
+    padding: 3px 6px 40px 6px;
     animation: fade-in 200ms ease-in;
 }
 
@@ -481,6 +466,82 @@ button.tree-floating-button {
     --menu-item-icon-vert-offset: 1.5px;
 }
 
+/* Tree actions toolbar */
+
+/* Toolbar container (collapsed state) */
+#left-pane .tree-actions {
+    max-width: var(--tree-actions-toolbar-collapsed-width);
+    right: var(--tree-actions-toolbar-horizontal-margin);
+    bottom: var(--tree-actions-toolbar-vertical-margin);
+    overflow: hidden;
+    border: 1px solid transparent;
+    padding: var(--tree-actions-toolbar-padding-size);
+    padding-right: var(--tree-actions-toolbar-collapsed-width);
+    background: transparent;
+    transition: max-width 400ms ease-out,
+                background-color 400ms ease-out,
+                border-color 400ms ease-out;
+}
+
+/* Toolbar container (expanded state) */
+#left-pane .tree-actions:hover {
+    max-width: 200px;
+    border-color: var(--dropdown-border-color);
+    background: var(--menu-background-color);
+    backdrop-filter: blur(10px) saturate(6);
+    box-shadow: 0 5px 10px rgba(0, 0, 0, var(--dropdown-shadow-opacity));
+}
+
+/* Toolbar button (toolbar collapsed)*/
+#left-pane .tree-actions button {
+    border: unset;
+    color: var(--menu-item-icon-color);
+    opacity: 0;
+    transition: opacity 200ms ease-out;
+}
+
+/* Toolbar button on hover */
+#left-pane .tree-actions button:hover {
+    background: var(--hover-item-background-color);
+}
+
+/* Toolbar button (toolbar expanded) */
+#left-pane .tree-actions:hover button {
+    opacity: 1;
+    transition: opacity 250ms ease-in;
+}
+
+/* The floating expand button (toolbar collapsed) */
+#left-pane .tree-actions::after {
+    display: flex;
+    content: "\eab4";
+    position: absolute;
+    justify-content: center;
+    align-items: center;
+    top: 50%;
+    right: calc((var(--tree-actions-toolbar-collapsed-width) - var(--tree-actions-toolbar-expand-button-size)) / 2);
+    width: var(--tree-actions-toolbar-expand-button-size);
+    height: var(--tree-actions-toolbar-expand-button-size);
+    box-shadow: 2px 2px 6px var(--left-pane-background-color);
+    border-radius: 50%;
+    background: var(--left-pane-item-action-button-background);
+    backdrop-filter: blur(10px);
+    color: var(--left-pane-item-action-button-color);
+    font-family: boxicons;
+    font-size: 18px;
+    line-height: 1;
+    transform: translateY(-50%);
+    transition: color 200ms ease-in;
+}
+
+/* The floating expand button (toolbar expanded) */
+#left-pane .tree-actions:hover::after {
+    background: transparent;
+    color: var(--menu-item-icon-color);
+    opacity: var(--menu-item-disabled-opacity);
+    transition: color 200ms ease-out;
+}
+
 /*
  * Gutter
  */