♻️ Title bar refactor (#7201)

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.ds.buttons.icon-button :refer [icon-button*]]
-   [app.main.ui.icons :as i]
+   [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
+  [:div {:class [(stl/css-case :title-bar true
-                                :all-clickable all-clickable)
+                               :all-clickable all-clickable)
-        klass     (dm/str klass " " class)]
+                 class]}
-    [:div {:class klass}
+
-     (if ^boolean collapsable
+   (if ^boolean collapsable
-       [:div {:class [(stl/css :title-wrapper) title-class]}
+     [: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
+           [:> icon* {:icon-id icon-id
-                           :collapsabled-icon true
+                      :size "s"
-                           :collapsed collapsed)}
+                      :class (stl/css :icon)}]
-            chevron-icon]
            [:div {:class (stl/css :title)} title]]
           [:*
-           [:button {:class (stl/css-case
+           [:button {:class (stl/css :icon-btn)
-                             :collapsabled-icon true
-                             :collapsed collapsed)
                      :on-click on-collapsed}
-            chevron-icon]
+            [:> icon* {:icon-id icon-id
-           [:div {:class (stl/css :title)}
+                       :size "s"
-            title]])]
+                       :class (stl/css :icon)}]]
-       [:div {:class [(stl/css-case
+           [:div {:class (stl/css :title)} title]]))]
-                       :title-only true
+
-                       :title-only-icon-gap add-icon-gap) title-class]}
+     [:div {:class [(stl/css-case :title-only true
-        title])
+                                  :title-only-icon-gap add-icon-gap)
-     children
+                    title-class]}
-     (when (some? on-btn-click)
+      title])
-       [:button {:class (stl/css :title-button)
+
-                 :on-click on-btn-click}
+   children
-        btn-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]])

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);
+  --arrow-icon-color: var(--icon-foreground);
-  color: var(--title-foreground-color);
+  --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 {
+.icon-text-btn {
-  @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 {
   @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);
+    --arrow-icon-color: var(--icon-foreground-hover);
-
+    --title-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);
-    }
   }
 }
 
-.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);
-}

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]
+                                                   last-path]])}]
-                                                  #_[:span {:class (stl/css :title-menu)
-                                                            :on-click on-context-menu}
-                                                     "aaa"]])}]
 
         [:& cmm/assets-context-menu
          {:on-close on-close-menu

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