From cf5303a39c241e102f4bd46338b659db153df38d Mon Sep 17 00:00:00 2001 From: Luis de Dios Date: Thu, 28 Aug 2025 09:51:53 +0200 Subject: [PATCH] :recycle: Title bar refactor (#7201) --- .../src/app/main/ui/components/title_bar.cljs | 68 +++++++++-------- .../src/app/main/ui/components/title_bar.scss | 76 +++++-------------- .../ui/workspace/sidebar/assets/groups.cljs | 5 +- .../app/main/ui/workspace/sidebar/layers.cljs | 4 +- 4 files changed, 58 insertions(+), 95 deletions(-) diff --git a/frontend/src/app/main/ui/components/title_bar.cljs b/frontend/src/app/main/ui/components/title_bar.cljs index 94a89f4800..9c63312590 100644 --- a/frontend/src/app/main/ui/components/title_bar.cljs +++ b/frontend/src/app/main/ui/components/title_bar.cljs @@ -7,50 +7,52 @@ (ns app.main.ui.components.title-bar (:require-macros [app.main.style :as stl]) (:require - [app.common.data.macros :as dm] - [app.main.ui.icons :as i] + [app.main.ui.ds.buttons.icon-button :refer [icon-button*]] + [app.main.ui.ds.foundations.assets.icon :refer [icon*]] [rumext.v2 :as mf])) -(def ^:private chevron-icon - (i/icon-xref :arrow (stl/css :chevron-icon))) - (mf/defc title-bar* [{:keys [class collapsable collapsed title children - btn-children all-clickable add-icon-gap + btn-icon btn-title all-clickable add-icon-gap title-class on-collapsed on-btn-click]}] - (let [klass (stl/css-case :title-bar true - :all-clickable all-clickable) - klass (dm/str klass " " class)] - [:div {:class klass} - (if ^boolean collapsable - [:div {:class [(stl/css :title-wrapper) title-class]} + [:div {:class [(stl/css-case :title-bar true + :all-clickable all-clickable) + class]} + + (if ^boolean collapsable + [:div {:class [(stl/css :title-wrapper) title-class]} + + (let [icon-id (if collapsed "arrow-right" "arrow-down")] (if ^boolean all-clickable - [:button {:class (stl/css :toggle-btn) + [:button {:class (stl/css :icon-text-btn) :on-click on-collapsed} - [:span {:class (stl/css-case - :collapsabled-icon true - :collapsed collapsed)} - chevron-icon] + [:> icon* {:icon-id icon-id + :size "s" + :class (stl/css :icon)}] [:div {:class (stl/css :title)} title]] [:* - [:button {:class (stl/css-case - :collapsabled-icon true - :collapsed collapsed) + [:button {:class (stl/css :icon-btn) :on-click on-collapsed} - chevron-icon] - [:div {:class (stl/css :title)} - title]])] - [:div {:class [(stl/css-case - :title-only true - :title-only-icon-gap add-icon-gap) title-class]} - title]) - children - (when (some? on-btn-click) - [:button {:class (stl/css :title-button) - :on-click on-btn-click} - btn-children])])) + [:> icon* {:icon-id icon-id + :size "s" + :class (stl/css :icon)}]] + [:div {:class (stl/css :title)} title]]))] + + [:div {:class [(stl/css-case :title-only true + :title-only-icon-gap add-icon-gap) + title-class]} + title]) + + children + + (when (some? on-btn-click) + [:> icon-button* {:variant "ghost" + :aria-label btn-title + :on-click on-btn-click + :icon btn-icon}])]) + (mf/defc inspect-title-bar* [{:keys [class title]}] - [:div {:class (dm/str (stl/css :title-bar) " " class)} + [:div {:class [(stl/css :title-bar) class]} [:div {:class (stl/css :title-only :inspect-title)} title]]) diff --git a/frontend/src/app/main/ui/components/title_bar.scss b/frontend/src/app/main/ui/components/title_bar.scss index 20e25e233b..08ec58ebbb 100644 --- a/frontend/src/app/main/ui/components/title_bar.scss +++ b/frontend/src/app/main/ui/components/title_bar.scss @@ -13,8 +13,8 @@ height: $s-32; width: 100%; min-height: $s-32; - background-color: var(--title-background-color); - color: var(--title-foreground-color); + --arrow-icon-color: var(--icon-foreground); + --title-color: var(--title-foreground-color); } .title, @@ -27,94 +27,58 @@ grid-auto-flow: column; height: 100%; min-height: $s-32; - overflow: hidden; } +.title { + color: var(--title-color); +} + .title-only { + color: var(--title-color); --title-bar-title-margin: #{$s-8}; margin-inline-start: var(--title-bar-title-margin); } +.title-only-icon-gap { + --title-bar-title-margin: #{$s-12}; +} + .inspect-title { color: var(--title-foreground-color-hover); } +.icon { + color: var(--arrow-icon-color); +} + .title-wrapper { display: flex; align-items: center; flex-grow: 1; padding: 0; - color: var(--title-foreground-color); - stroke: var(--title-foreground-color); overflow: hidden; - - &:hover { - color: var(--title-foreground-color-hover); - .title { - stroke: var(--title-foreground-color-hover); - } - } } -.title-button { - @extend .button-tertiary; - height: $s-32; - width: calc($s-24 + $s-4); - padding: 0; - border-radius: $br-8; - svg { - @extend .button-icon; - stroke: var(--icon-foreground); - } -} - -.title-only-icon-gap { - --title-bar-title-margin: #{$s-12}; -} - -.toggle-btn { +.icon-text-btn { @include buttonStyle; display: flex; align-items: center; flex-grow: 1; padding: 0; - color: var(--title-foreground-color); - stroke: var(--title-foreground-color); overflow: hidden; - --chevron-icon-color: var(--icon-foreground); - &:hover { - --chevron-icon-color: var(--title-foreground-color-hover); - - color: var(--title-foreground-color-hover); - .title { - color: var(--title-foreground-color-hover); - stroke: var(--title-foreground-color-hover); - } + --arrow-icon-color: var(--icon-foreground-hover); + --title-color: var(--title-foreground-color-hover); } } -.collapsabled-icon { +.icon-btn { @include buttonStyle; @include flexCenter; - height: $s-24; - border-radius: $br-8; - - --chevron-icon-rotation: 90deg; - - &.collapsed { - --chevron-icon-rotation: 0deg; - } &:hover { - --chevron-icon-color: var(--title-foreground-color-hover); + --arrow-icon-color: var(--icon-foreground-hover); } } - -.chevron-icon { - @extend .button-icon-small; - transform: rotate(var(--chevron-icon-rotation)); - stroke: var(--chevron-icon-color); -} diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/groups.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets/groups.cljs index 10a5dec9a3..ba62c19c3c 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/groups.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/groups.cljs @@ -58,10 +58,7 @@ other-path "\u00A0\u2022\u00A0"]) [:span {:class (stl/css :path) :title (when truncated path)} - last-path] - #_[:span {:class (stl/css :title-menu) - :on-click on-context-menu} - "aaa"]])}] + last-path]])}] [:& cmm/assets-context-menu {:on-close on-close-menu diff --git a/frontend/src/app/main/ui/workspace/sidebar/layers.cljs b/frontend/src/app/main/ui/workspace/sidebar/layers.cljs index 4a8424a446..7d41cbd2d3 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/layers.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/layers.cljs @@ -20,7 +20,6 @@ [app.main.ui.ds.buttons.icon-button :refer [icon-button*]] [app.main.ui.ds.foundations.assets.icon :refer [icon*]] [app.main.ui.hooks :as hooks] - [app.main.ui.icons :as i] [app.main.ui.notifications.badge :refer [badge-notification]] [app.main.ui.workspace.sidebar.layer-item :refer [layer-item]] [app.util.dom :as dom] @@ -418,7 +417,8 @@ [:> title-bar* {:collapsable false :title (:name page) :on-btn-click toggle-search - :btn-children i/search}]]))])) + :btn-icon "search" + :btn-title (tr "labels.search")}]]))])) (defn- on-scroll