From 9ce97decf247108f00b0865cf4d6750b2cee9fde Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Thu, 12 Dec 2024 00:31:19 +0200 Subject: [PATCH 1/7] style(next): overhaul the tree actions toolbar --- src/public/stylesheets/theme-next/shell.css | 80 +++++++++++++++++++-- 1 file changed, 75 insertions(+), 5 deletions(-) diff --git a/src/public/stylesheets/theme-next/shell.css b/src/public/stylesheets/theme-next/shell.css index 2ddfebc8c..b3b8b9b69 100644 --- a/src/public/stylesheets/theme-next/shell.css +++ b/src/public/stylesheets/theme-next/shell.css @@ -345,11 +345,6 @@ div.quick-search .search-button.show { /* Tree */ -#left-pane .tree-actions { - /* TODO: relocate instead of hiding */ - display: none; -} - #left-pane div.tree { padding: 3px 6px; animation: fade-in 200ms ease-in; @@ -471,6 +466,81 @@ div.quick-search .search-button.show { --menu-item-icon-vert-offset: 1.5px; } +/* Tree actions toolbar */ + +#left-pane .tree-actions { + --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; +} + +/* 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 300ms 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); + 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; +} + +/* 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 200ms 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); + border-radius: 50%; + background: var(--left-pane-item-action-button-background); + color: var(--left-pane-item-action-button-color); + font-family: boxicons; + font-size: 18px; + transform: translateY(-50%); +} + +/* 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); +} + /* * Gutter */ From 8b9d4ed106655710d6656bc22085afdc413871d6 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Thu, 12 Dec 2024 00:49:05 +0200 Subject: [PATCH 2/7] style(next): tree actions toolbar: improve styling --- src/public/stylesheets/theme-next/shell.css | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/public/stylesheets/theme-next/shell.css b/src/public/stylesheets/theme-next/shell.css index b3b8b9b69..28361a853 100644 --- a/src/public/stylesheets/theme-next/shell.css +++ b/src/public/stylesheets/theme-next/shell.css @@ -486,7 +486,7 @@ div.quick-search .search-button.show { padding: var(--tree-actions-toolbar-padding-size); padding-right: var(--tree-actions-toolbar-collapsed-width); background: transparent; - transition: max-width 300ms ease-out; + transition: max-width 200ms ease-in; } /* Toolbar container (expanded state) */ @@ -494,6 +494,7 @@ div.quick-search .search-button.show { 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)) } @@ -512,7 +513,7 @@ div.quick-search .search-button.show { /* Toolbar button (toolbar expanded) */ #left-pane .tree-actions:hover button { opacity: 1; - transition: opacity 200ms ease-in; + transition: opacity 250ms ease-in; } /* The floating expand button (toolbar collapsed) */ @@ -532,6 +533,7 @@ div.quick-search .search-button.show { font-family: boxicons; font-size: 18px; transform: translateY(-50%); + transition: color 200ms ease-in; } /* The floating expand button (toolbar expanded) */ @@ -539,6 +541,7 @@ div.quick-search .search-button.show { background: transparent; color: var(--menu-item-icon-color); opacity: var(--menu-item-disabled-opacity); + transition: color 200ms ease-out; } /* From 336f978adddb3e3a0f8f7132c57aa91c8e64cac3 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Thu, 12 Dec 2024 00:50:28 +0200 Subject: [PATCH 3/7] style(next): tree actions toolbar: relocate variable declarations --- src/public/stylesheets/theme-next.css | 6 ++++++ src/public/stylesheets/theme-next/shell.css | 8 -------- 2 files changed, 6 insertions(+), 8 deletions(-) diff --git a/src/public/stylesheets/theme-next.css b/src/public/stylesheets/theme-next.css index 2c0b089c7..82fa98b39 100644 --- a/src/public/stylesheets/theme-next.css +++ b/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; diff --git a/src/public/stylesheets/theme-next/shell.css b/src/public/stylesheets/theme-next/shell.css index 28361a853..7f773fe53 100644 --- a/src/public/stylesheets/theme-next/shell.css +++ b/src/public/stylesheets/theme-next/shell.css @@ -468,14 +468,6 @@ div.quick-search .search-button.show { /* Tree actions toolbar */ -#left-pane .tree-actions { - --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; -} - /* Toolbar container (collapsed state) */ #left-pane .tree-actions { max-width: var(--tree-actions-toolbar-collapsed-width); From 9d7caaae96d44a08402566200e6af6ca43e99d52 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Thu, 12 Dec 2024 00:59:48 +0200 Subject: [PATCH 4/7] style(next): tree actions toolbar: tweak transitions --- src/public/stylesheets/theme-next/shell.css | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/public/stylesheets/theme-next/shell.css b/src/public/stylesheets/theme-next/shell.css index 7f773fe53..027e847f6 100644 --- a/src/public/stylesheets/theme-next/shell.css +++ b/src/public/stylesheets/theme-next/shell.css @@ -478,7 +478,9 @@ div.quick-search .search-button.show { padding: var(--tree-actions-toolbar-padding-size); padding-right: var(--tree-actions-toolbar-collapsed-width); background: transparent; - transition: max-width 200ms ease-in; + transition: max-width 400ms ease-out, + background-color 400ms ease-out, + border-color 400ms ease-out; } /* Toolbar container (expanded state) */ @@ -487,7 +489,7 @@ div.quick-search .search-button.show { 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)) + box-shadow: 0 5px 10px rgba(0, 0, 0, var(--dropdown-shadow-opacity)); } /* Toolbar button (toolbar collapsed)*/ @@ -495,6 +497,7 @@ div.quick-search .search-button.show { border: unset; color: var(--menu-item-icon-color); opacity: 0; + transition: opacity 200ms ease-out; } /* Toolbar button on hover */ From a7e000035d96c72dfcce798327ac1bac90bcdcbb Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Thu, 12 Dec 2024 01:07:18 +0200 Subject: [PATCH 5/7] style(next): tree actions toolbar: fix the user being unable to activate the action button for the last item --- src/public/stylesheets/theme-next/shell.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/public/stylesheets/theme-next/shell.css b/src/public/stylesheets/theme-next/shell.css index 027e847f6..63c09c97c 100644 --- a/src/public/stylesheets/theme-next/shell.css +++ b/src/public/stylesheets/theme-next/shell.css @@ -346,7 +346,7 @@ div.quick-search .search-button.show { /* Tree */ #left-pane div.tree { - padding: 3px 6px; + padding: 3px 6px 40px 6px; animation: fade-in 200ms ease-in; } From e4b1f56a5ea1a7c4c31a4f2ec039f97d7c007950 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Thu, 12 Dec 2024 01:29:14 +0200 Subject: [PATCH 6/7] style(next): tree actions toolbar: fix icon alignment in certain conditions --- src/public/stylesheets/theme-next/shell.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/public/stylesheets/theme-next/shell.css b/src/public/stylesheets/theme-next/shell.css index 63c09c97c..52481e460 100644 --- a/src/public/stylesheets/theme-next/shell.css +++ b/src/public/stylesheets/theme-next/shell.css @@ -527,6 +527,7 @@ div.quick-search .search-button.show { 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; } From 87dcdcacc3824de9b06157d0e0fe23f021cdae9e Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Thu, 12 Dec 2024 02:52:18 +0200 Subject: [PATCH 7/7] style(next): tree actions toolbar: gracefully handle when the floating button overlaps with the tree item action buttons --- src/public/stylesheets/theme-next/shell.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/public/stylesheets/theme-next/shell.css b/src/public/stylesheets/theme-next/shell.css index a1a5ec5b6..e8bae1f61 100644 --- a/src/public/stylesheets/theme-next/shell.css +++ b/src/public/stylesheets/theme-next/shell.css @@ -522,8 +522,10 @@ div.quick-search .search-button.show { 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;