diff --git a/frontend/src/app/main/ui/components/title_bar.cljs b/frontend/src/app/main/ui/components/title_bar.cljs index 61c664303..0c9899bbc 100644 --- a/frontend/src/app/main/ui/components/title_bar.cljs +++ b/frontend/src/app/main/ui/components/title_bar.cljs @@ -13,7 +13,7 @@ (mf/defc title-bar {::mf/wrap-props false} - [{:keys [collapsable collapsed on-collapsed title children on-btn-click btn-children class all-clickable]}] + [{:keys [collapsable collapsed on-collapsed title children on-btn-click btn-children class all-clickable add-icon-gap]}] (let [klass (dm/str (stl/css :title-bar) " " class)] [:div {:class klass} (if ^boolean collapsable @@ -33,7 +33,7 @@ :on-click on-collapsed} i/arrow-refactor] [:div {:class (stl/css :title)} title]])] - [:div {:class (stl/css :title-only)} title]) + [:div {:class (stl/css-case :title-only true :title-only-icon-gap add-icon-gap)} title]) children (when (some? on-btn-click) [:button {:class (stl/css :title-button) diff --git a/frontend/src/app/main/ui/components/title_bar.scss b/frontend/src/app/main/ui/components/title_bar.scss index 2ec13406b..e76b9fe2b 100644 --- a/frontend/src/app/main/ui/components/title_bar.scss +++ b/frontend/src/app/main/ui/components/title_bar.scss @@ -14,20 +14,6 @@ width: 100%; min-height: $s-32; background-color: var(--title-background-color); - .title, - .title-only { - @include tabTitleTipography; - display: flex; - align-items: center; - flex-grow: 1; - height: 100%; - min-height: $s-32; - color: var(--title-foreground-color); - overflow: hidden; - } - .title-only { - margin-left: $s-8; - } .title-wrapper { display: flex; @@ -109,3 +95,24 @@ } } } + +.title, +.title-only { + @include tabTitleTipography; + display: flex; + align-items: center; + flex-grow: 1; + height: 100%; + min-height: $s-32; + color: var(--title-foreground-color); + overflow: hidden; +} + +.title-only { + --title-bar-title-margin: #{$s-8}; + margin-inline-start: var(--title-bar-title-margin); +} + +.title-only-icon-gap { + --title-bar-title-margin: #{$s-12}; +} diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/common.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets/common.cljs index d2f3ed1db..3ef6fb6ad 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/common.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/common.cljs @@ -166,6 +166,7 @@ :collapsed (not open?) :all-clickable true :on-collapsed on-collapsed + :add-icon-gap (= 0 assets-count) :class (stl/css-case :title-spacing open?) :title title} buttons] diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/common.scss b/frontend/src/app/main/ui/workspace/sidebar/assets/common.scss index 84d86bdc8..063cfa831 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/common.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/common.scss @@ -21,8 +21,8 @@ @include flexCenter; height: $s-16; width: $s-16; - color: transparent; fill: none; + stroke: currentColor; } }