CalvinBackup/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2026-03-03 08:43:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

♻️ Adapt title-bar component

Browse Source
This commit is contained in:
Luis de Dios
2025-08-19 09:49:18 +02:00
parent 7f2af1c355
commit e7e7d576b2
28 changed files with 170 additions and 171 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/src/app/main/ui/components/title_bar.cljs
View File

@@ -14,8 +14,7 @@
(def ^:private chevron-icon
(i/icon-xref :arrow (stl/css :chevron-icon)))
(mf/defc title-bar
{::mf/props :obj}
(mf/defc title-bar*
[{:keys [class collapsable collapsed title children
btn-children all-clickable add-icon-gap
title-class on-collapsed on-btn-click]}]

8
frontend/src/app/main/ui/inspect/annotation.cljs
View File

@@ -8,16 +8,16 @@
(:require-macros [app.main.style :as stl])
(:require
[app.main.ui.components.copy-button :refer [copy-button*]]
[app.main.ui.components.title-bar :refer [title-bar]]
[app.main.ui.components.title-bar :refer [title-bar*]]
[app.util.i18n :as i18n :refer [tr]]
[rumext.v2 :as mf]))
(mf/defc annotation
[{:keys [content] :as props}]
[:div {:class (stl/css :attributes-block)}
[:& title-bar {:collapsable false
:title (tr "workspace.options.component.annotation")
:class (stl/css :title-spacing-annotation)}
[:> title-bar* {:collapsable false
:title (tr "workspace.options.component.annotation")
:class (stl/css :title-spacing-annotation)}
[:> copy-button* {:data content
:class (stl/css :copy-btn-title)}]]

8
frontend/src/app/main/ui/inspect/attributes/layout_element.cljs
View File

@@ -11,7 +11,7 @@
[app.common.data.macros :as dm]
[app.common.types.shape.layout :as ctl]
[app.main.ui.components.copy-button :refer [copy-button*]]
[app.main.ui.components.title-bar :refer [title-bar]]
[app.main.ui.components.title-bar :refer [title-bar*]]
[app.main.ui.inspect.attributes.common :as cmm]
[app.util.code-gen.style-css :as css]
[rumext.v2 :as mf]))
@@ -67,9 +67,9 @@
(when some-layout-prop?
[:div {:class (stl/css :attributes-block)}
[:& title-bar {:collapsable false
:title menu-title
:class (stl/css :title-spacing-layout-element)}
[:> title-bar* {:collapsable false
:title menu-title
:class (stl/css :title-spacing-layout-element)}
(when (= (count shapes) 1)
[:> copy-button* {:data (css/get-shape-properties-css objects (first shapes) properties)
:class (stl/css :copy-btn-title)}])]

8
frontend/src/app/main/ui/inspect/exports.cljs
View File

@@ -12,7 +12,7 @@
[app.main.refs :as refs]
[app.main.store :as st]
[app.main.ui.components.select :refer [select]]
[app.main.ui.components.title-bar :refer [title-bar]]
[app.main.ui.components.title-bar :refer [title-bar*]]
[app.main.ui.icons :as i]
[app.util.dom :as dom]
[app.util.i18n :refer [tr c]]
@@ -136,9 +136,9 @@
vec))))
[:div {:class (stl/css :element-set)}
[:div {:class (stl/css :element-title)}
[:& title-bar {:collapsable false
:title (tr "workspace.options.export")
:class (stl/css :title-spacing-export-viewer)}
[:> title-bar* {:collapsable false
:title (tr "workspace.options.export")
:class (stl/css :title-spacing-export-viewer)}
[:button {:class (stl/css :add-export)
:on-click add-export} i/add]]]

14
frontend/src/app/main/ui/workspace/libraries.cljs
View File

@@ -27,7 +27,7 @@
[app.main.ui.components.color-bullet :as cb]
[app.main.ui.components.link-button :as lb]
[app.main.ui.components.search-bar :refer [search-bar]]
[app.main.ui.components.title-bar :refer [title-bar]]
[app.main.ui.components.title-bar :refer [title-bar*]]
[app.main.ui.context :as ctx]
[app.main.ui.ds.layout.tab-switcher :refer [tab-switcher*]]
[app.main.ui.hooks :as h]
@@ -287,9 +287,9 @@
[:div {:class (stl/css :libraries-content)}
[:div {:class (stl/css :lib-section)}
[:& title-bar {:collapsable false
:title (tr "workspace.libraries.in-this-file")
:class (stl/css :title-spacing-lib)}]
[:> title-bar* {:collapsable false
:title (tr "workspace.libraries.in-this-file")
:class (stl/css :title-spacing-lib)}]
[:div {:class (stl/css :section-list)}
[:div {:class (stl/css :section-list-item)}
@@ -326,9 +326,9 @@
detach-icon]])]]
[:div {:class (stl/css :shared-section)}
[:& title-bar {:collapsable false
:title (tr "workspace.libraries.shared-libraries")
:class (stl/css :title-spacing-lib)}]
[:> title-bar* {:collapsable false
:title (tr "workspace.libraries.shared-libraries")
:class (stl/css :title-spacing-lib)}]
[:& search-bar {:on-change change-search-term
:value search-term
:placeholder (tr "workspace.libraries.search-shared-libraries")

6
frontend/src/app/main/ui/workspace/plugins.cljs
View File

@@ -16,7 +16,7 @@
[app.main.refs :as refs]
[app.main.store :as st]
[app.main.ui.components.search-bar :refer [search-bar]]
[app.main.ui.components.title-bar :refer [title-bar]]
[app.main.ui.components.title-bar :refer [title-bar*]]
[app.main.ui.ds.buttons.button :refer [button*]]
[app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
[app.main.ui.icons :as i]
@@ -209,8 +209,8 @@
(tr "workspace.plugins.plugin-list-link") i/external-link]]
[:*
[:& title-bar {:collapsable false
:title (tr "workspace.plugins.installed-plugins")}]
[:> title-bar* {:collapsable false
:title (tr "workspace.plugins.installed-plugins")}]
[:div {:class (stl/css :plugins-list)}
(for [[idx manifest] (d/enumerate plugins-state)]

4
frontend/src/app/main/ui/workspace/sidebar/assets/common.cljs
View File

@@ -28,7 +28,7 @@
[app.main.render :refer [component-svg component-svg-thumbnail]]
[app.main.store :as st]
[app.main.ui.components.context-menu-a11y :refer [context-menu*]]
[app.main.ui.components.title-bar :refer [title-bar]]
[app.main.ui.components.title-bar :refer [title-bar*]]
[app.main.ui.context :as ctx]
[app.main.ui.ds.foundations.assets.icon :refer [icon*]]
[app.util.array :as array]
@@ -176,7 +176,7 @@
:opened (and (< 0 assets-count)
open?))
:on-click on-click}
[:& title-bar
[:> title-bar*
{:collapsable (< 0 assets-count)
:collapsed (not open?)
:all-clickable true

20
frontend/src/app/main/ui/workspace/sidebar/assets/file_library.cljs
View File

@@ -18,7 +18,7 @@
[app.main.refs :as refs]
[app.main.router :as rt]
[app.main.store :as st]
[app.main.ui.components.title-bar :refer [title-bar]]
[app.main.ui.components.title-bar :refer [title-bar*]]
[app.main.ui.context :as ctx]
[app.main.ui.icons :as i]
[app.main.ui.workspace.sidebar.assets.colors :refer [colors-section]]
@@ -97,16 +97,16 @@
[:div {:class (stl/css-case
:library-title true
:open is-open)}
[:& title-bar {:collapsable true
:collapsed (not is-open)
:all-clickable true
:on-collapsed toggle-open
:title (if is-local
(mf/html [:div {:class (stl/css :special-title)}
(tr "workspace.assets.local-library")])
[:> title-bar* {:collapsable true
:collapsed (not is-open)
:all-clickable true
:on-collapsed toggle-open
:title (if is-local
(mf/html [:div {:class (stl/css :special-title)}
(tr "workspace.assets.local-library")])
;; Do we need to add shared info here?
(mf/html [:div {:class (stl/css :special-title)}
file-name]))}
(mf/html [:div {:class (stl/css :special-title)}
file-name]))}
(when-not ^boolean is-local
[:span {:title (tr "workspace.assets.open-library")}
[:a {:class (stl/css :file-link)

30
frontend/src/app/main/ui/workspace/sidebar/assets/groups.cljs
View File

@@ -13,7 +13,7 @@
[app.main.data.workspace :as dw]
[app.main.store :as st]
[app.main.ui.components.forms :as fm]
[app.main.ui.components.title-bar :refer [title-bar]]
[app.main.ui.components.title-bar :refer [title-bar*]]
[app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
[app.main.ui.icons :as i]
[app.main.ui.workspace.sidebar.assets.common :as cmm]
@@ -48,20 +48,20 @@
[:div {:class (stl/css :group-title-wrapper)}
[:div {:class (stl/css :group-title)
:on-context-menu on-context-menu}
[:& title-bar {:collapsable true
:collapsed (not group-open?)
:all-clickable true
:on-collapsed on-fold-group
:title (mf/html [:* (when-not (empty? other-path)
[:span {:class (stl/css :pre-path)
:title (when truncated path)}
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"]])}]
[:> title-bar* {:collapsable true
:collapsed (not group-open?)
:all-clickable true
:on-collapsed on-fold-group
:title (mf/html [:* (when-not (empty? other-path)
[:span {:class (stl/css :pre-path)
:title (when truncated path)}
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"]])}]
[:& cmm/assets-context-menu
{:on-close on-close-menu

10
frontend/src/app/main/ui/workspace/sidebar/layers.cljs
View File

@@ -17,7 +17,7 @@
[app.main.store :as st]
[app.main.ui.components.search-bar :refer [search-bar]]
[app.main.ui.components.shape-icon :as sic]
[app.main.ui.components.title-bar :refer [title-bar]]
[app.main.ui.components.title-bar :refer [title-bar*]]
[app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
[app.main.ui.hooks :as hooks]
[app.main.ui.icons :as i]
@@ -430,10 +430,10 @@
i/tick])]])]
[:div {:class (stl/css :tool-window-bar)}
[:& title-bar {:collapsable false
:title (:name page)
:on-btn-click toggle-search
:btn-children i/search}]]))]))
[:> title-bar* {:collapsable false
:title (:name page)
:on-btn-click toggle-search
:btn-children i/search}]]))]))
(defn- on-scroll

18
frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.cljs
View File

@@ -12,7 +12,7 @@
[app.main.data.workspace.shapes :as dwsh]
[app.main.store :as st]
[app.main.ui.components.numeric-input :refer [numeric-input*]]
[app.main.ui.components.title-bar :refer [title-bar]]
[app.main.ui.components.title-bar :refer [title-bar*]]
[app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
[app.main.ui.icons :as i]
[app.util.i18n :as i18n :refer [tr]]
@@ -83,14 +83,14 @@
[:div {:class (stl/css :element-set)}
[:div {:class (stl/css :element-title)}
[:& title-bar {:collapsable has-value?
:collapsed (not open?)
:on-collapsed toggle-content
:title (case type
:multiple (tr "workspace.options.blur-options.title.multiple")
:group (tr "workspace.options.blur-options.title.group")
(tr "workspace.options.blur-options.title"))
:class (stl/css-case :title-spacing-blur (not has-value?))}
[:> title-bar* {:collapsable has-value?
:collapsed (not open?)
:on-collapsed toggle-content
:title (case type
:multiple (tr "workspace.options.blur-options.title.multiple")
:group (tr "workspace.options.blur-options.title.group")
(tr "workspace.options.blur-options.title"))
:class (stl/css-case :title-spacing-blur (not has-value?))}
(when-not has-value?
[:> icon-button* {:variant "ghost"
:aria-label (tr "workspace.options.blur-options.add-blur")

12
frontend/src/app/main/ui/workspace/sidebar/options/menus/color_selection.cljs
View File

@@ -11,7 +11,7 @@
[app.main.data.workspace.colors :as dwc]
[app.main.data.workspace.selection :as dws]
[app.main.store :as st]
[app.main.ui.components.title-bar :refer [title-bar]]
[app.main.ui.components.title-bar :refer [title-bar*]]
[app.main.ui.hooks :as h]
[app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row*]]
[app.util.i18n :as i18n :refer [tr]]
@@ -107,11 +107,11 @@
[:div {:class (stl/css :element-set)}
[:div {:class (stl/css :element-title)}
[:& title-bar {:collapsable has-colors?
:collapsed (not open?)
:on-collapsed toggle-content
:title (tr "workspace.options.selection-color")
:class (stl/css-case :title-spacing-selected-colors (not has-colors?))}]]
[:> title-bar* {:collapsable has-colors?
:collapsed (not open?)
:on-collapsed toggle-content
:title (tr "workspace.options.selection-color")
:class (stl/css-case :title-spacing-selected-colors (not has-colors?))}]]
(when open?
[:div {:class (stl/css :element-content)}

26
frontend/src/app/main/ui/workspace/sidebar/options/menus/component.cljs
View File

@@ -28,7 +28,7 @@
[app.main.ui.components.radio-buttons :refer [radio-button radio-buttons]]
[app.main.ui.components.search-bar :refer [search-bar]]
[app.main.ui.components.select :refer [select]]
[app.main.ui.components.title-bar :refer [title-bar]]
[app.main.ui.components.title-bar :refer [title-bar*]]
[app.main.ui.context :as ctx]
[app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
[app.main.ui.ds.controls.combobox :refer [combobox*]]
@@ -901,12 +901,12 @@
[:span {:class (stl/css :icon-back)} i/arrow]
[:span (tr "workspace.options.component")]]
[:& title-bar {:collapsable true
:collapsed (not open?)
:on-collapsed toggle-content
:title (tr "workspace.options.component")
:class (stl/css :title-spacing-component)
:title-class (stl/css-case :title-bar-variant is-variant?)}
[:> title-bar* {:collapsable true
:collapsed (not open?)
:on-collapsed toggle-content
:title (tr "workspace.options.component")
:class (stl/css :title-spacing-component)
:title-class (stl/css-case :title-bar-variant is-variant?)}
[:span {:class (stl/css :copy-text)}
(if main-instance?
(if is-variant?
@@ -1103,12 +1103,12 @@
[:div {:class (stl/css :element-title)}
[:& title-bar {:collapsable true
:collapsed (not open?)
:on-collapsed toggle-content
:title (tr "workspace.options.component")
:class (stl/css :title-spacing-component)
:title-class (stl/css :title-bar-variant)}
[:> title-bar* {:collapsable true
:collapsed (not open?)
:on-collapsed toggle-content
:title (tr "workspace.options.component")
:class (stl/css :title-spacing-component)
:title-class (stl/css :title-bar-variant)}
[:span {:class (stl/css :copy-text)}
(tr "workspace.options.component.main")]

10
frontend/src/app/main/ui/workspace/sidebar/options/menus/constraints.cljs
View File

@@ -15,7 +15,7 @@
[app.main.refs :as refs]
[app.main.store :as st]
[app.main.ui.components.select :refer [select]]
[app.main.ui.components.title-bar :refer [title-bar]]
[app.main.ui.components.title-bar :refer [title-bar*]]
[app.main.ui.icons :as i]
[app.util.dom :as dom]
[app.util.i18n :as i18n :refer [tr]]
@@ -157,10 +157,10 @@
(when in-frame?
[:div {:class (stl/css :element-set)}
[:div {:class (stl/css :element-title)}
[:& title-bar {:collapsable true
:collapsed (not open?)
:on-collapsed toggle-content
:title (tr "workspace.options.constraints")}]]
[:> title-bar* {:collapsable true
:collapsed (not open?)
:on-collapsed toggle-content
:title (tr "workspace.options.constraints")}]]
(when open?
[:div {:class (stl/css :element-set-content)}
[:div {:class (stl/css :constraints-widget)}

12
frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.cljs
View File

@@ -14,7 +14,7 @@
[app.main.refs :as refs]
[app.main.store :as st]
[app.main.ui.components.select :refer [select]]
[app.main.ui.components.title-bar :refer [title-bar]]
[app.main.ui.components.title-bar :refer [title-bar*]]
[app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
[app.main.ui.exports.assets]
[app.util.dom :as dom]
@@ -179,11 +179,11 @@
[:div {:class (stl/css :element-set)}
[:div {:class (stl/css :element-title)}
[:& title-bar {:collapsable has-exports?
:collapsed (not open?)
:on-collapsed toggle-content
:title (tr (if (> (count ids) 1) "workspace.options.export-multiple" "workspace.options.export"))
:class (stl/css-case :title-spacing-export (not has-exports?))}
[:> title-bar* {:collapsable has-exports?
:collapsed (not open?)
:on-collapsed toggle-content
:title (tr (if (> (count ids) 1) "workspace.options.export-multiple" "workspace.options.export"))
:class (stl/css-case :title-spacing-export (not has-exports?))}
[:> icon-button* {:variant "ghost"
:aria-label (tr "workspace.options.export.add-export")
:on-click add-export

12
frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.cljs
View File

@@ -14,7 +14,7 @@
[app.main.data.workspace :as udw]
[app.main.data.workspace.colors :as dc]
[app.main.store :as st]
[app.main.ui.components.title-bar :refer [title-bar]]
[app.main.ui.components.title-bar :refer [title-bar*]]
[app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
[app.main.ui.hooks :as h]
[app.main.ui.icons :as i]
@@ -183,11 +183,11 @@
[:div {:class (stl/css :element-set)}
[:div {:class (stl/css :element-title)}
[:& title-bar {:collapsable has-fills?
:collapsed (not open?)
:on-collapsed toggle-content
:title label
:class (stl/css-case :title-spacing-fill (not has-fills?))}
[:> title-bar* {:collapsable has-fills?
:collapsed (not open?)
:on-collapsed toggle-content
:title label
:class (stl/css-case :title-spacing-fill (not has-fills?))}
(when (not (= :multiple fills))
[:> icon-button* {:variant "ghost"

12
frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs
View File

@@ -15,7 +15,7 @@
[app.main.ui.components.editable-select :refer [editable-select]]
[app.main.ui.components.numeric-input :refer [numeric-input*]]
[app.main.ui.components.select :refer [select]]
[app.main.ui.components.title-bar :refer [title-bar]]
[app.main.ui.components.title-bar :refer [title-bar*]]
[app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
[app.main.ui.icons :as i]
[app.main.ui.workspace.sidebar.options.common :refer [advanced-options]]
@@ -313,11 +313,11 @@
#(st/emit! (dw/add-frame-grid id)))]
[:div {:class (stl/css :element-set)}
[:& title-bar {:collapsable has-frame-grids?
:collapsed (not open?)
:on-collapsed toggle-content
:class (stl/css-case :title-spacing-board-grid (not has-frame-grids?))
:title (tr "workspace.options.guides.title")}
[:> title-bar* {:collapsable has-frame-grids?
:collapsed (not open?)
:on-collapsed toggle-content
:class (stl/css-case :title-spacing-board-grid (not has-frame-grids?))
:title (tr "workspace.options.guides.title")}
[:> icon-button* {:variant "ghost"
:aria-label (tr "workspace.options.guides.add-guide")

10
frontend/src/app/main/ui/workspace/sidebar/options/menus/grid_cell.cljs
View File

@@ -17,7 +17,7 @@
[app.main.store :as st]
[app.main.ui.components.numeric-input :refer [numeric-input*]]
[app.main.ui.components.radio-buttons :refer [radio-button radio-buttons]]
[app.main.ui.components.title-bar :refer [title-bar]]
[app.main.ui.components.title-bar :refer [title-bar*]]
[app.main.ui.hooks :as hooks]
[app.main.ui.icons :as i]
[app.util.dom :as dom]
@@ -174,10 +174,10 @@
[:div {:class (stl/css :grid-cell-menu)}
[:div {:class (stl/css :grid-cell-menu-title)}
[:& title-bar {:collapsable true
:collapsed (not open?)
:on-collapsed #(swap! state* update :open not)
:title "Grid cell"}]]
[:> title-bar* {:collapsable true
:collapsed (not open?)
:on-collapsed #(swap! state* update :open not)
:title "Grid cell"}]]
(when open?
[:div {:class (stl/css :grid-cell-menu-container)}

20
frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
View File

@@ -21,7 +21,7 @@
[app.main.ui.components.numeric-input :refer [numeric-input*]]
[app.main.ui.components.radio-buttons :refer [radio-buttons radio-button]]
[app.main.ui.components.select :refer [select]]
[app.main.ui.components.title-bar :refer [title-bar]]
[app.main.ui.components.title-bar :refer [title-bar*]]
[app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
[app.main.ui.icons :as i]
[app.util.dom :as dom]
@@ -160,9 +160,9 @@
[{:keys [flows]}]
(when flows
[:div {:class (stl/css :interaction-options)}
[:& title-bar {:collapsable false
:title (tr "workspace.options.flows.flow-starts")
:class (stl/css :title-spacing-layout-flow)}]
[:> title-bar* {:collapsable false
:title (tr "workspace.options.flows.flow-starts")
:class (stl/css :title-spacing-layout-flow)}]
(for [[id flow] flows]
[:& flow-item {:flow flow :key (dm/str id)}])]))
@@ -174,9 +174,9 @@
add-flow (mf/use-fn #(st/emit! (dwi/add-flow-selected-frame)))]
[:div {:class (stl/css :element-set)}
[:& title-bar {:collapsable false
:title (tr "workspace.options.flows.flow")
:class (stl/css :title-spacing-layout-flow)}
[:> title-bar* {:collapsable false
:title (tr "workspace.options.flows.flow")
:class (stl/css :title-spacing-layout-flow)}
(when (nil? flow)
[:> icon-button* {:variant "ghost"
:aria-label (tr "workspace.options.flows.add-flow-start")
@@ -727,9 +727,9 @@
[:div {:class (stl/css :interaction-options)}
(when (and shape (not (cfh/unframed-shape? shape)))
[:div {:class (stl/css :element-title)}
[:& title-bar {:collapsable false
:title (tr "workspace.options.interactions")
:class (stl/css :title-spacing-layout-interactions)}
[:> title-bar* {:collapsable false
:title (tr "workspace.options.interactions")
:class (stl/css :title-spacing-layout-interactions)}
[:> icon-button* {:variant "ghost"
:aria-label (tr "workspace.options.interactions.add-interaction")

4
frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs
View File

@@ -22,7 +22,7 @@
[app.main.ui.components.numeric-input :refer [numeric-input*]]
[app.main.ui.components.radio-buttons :refer [radio-button radio-buttons]]
[app.main.ui.components.select :refer [select]]
[app.main.ui.components.title-bar :refer [title-bar]]
[app.main.ui.components.title-bar :refer [title-bar*]]
[app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
[app.main.ui.formats :as fmt]
[app.main.ui.hooks :as h]
@@ -1002,7 +1002,7 @@
[:div {:class (stl/css :element-set) :data-testid "inspect-layout"}
[:div {:class (stl/css :element-title)}
[:& title-bar
[:> title-bar*
{:collapsable has-layout?
:collapsed (not open?)
:on-collapsed on-toggle-visibility

14
frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs
View File

@@ -15,7 +15,7 @@
[app.main.store :as st]
[app.main.ui.components.numeric-input :refer [numeric-input*]]
[app.main.ui.components.radio-buttons :refer [radio-button radio-buttons]]
[app.main.ui.components.title-bar :refer [title-bar]]
[app.main.ui.components.title-bar :refer [title-bar*]]
[app.main.ui.icons :as i]
[app.main.ui.workspace.sidebar.options.menus.layout-container :refer [get-layout-flex-icon]]
[app.util.dom :as dom]
@@ -440,12 +440,12 @@
[:div {:class (stl/css :element-set)}
[:div {:class (stl/css :element-title)}
[:& title-bar {:collapsable has-content?
:collapsed (not open?)
:on-collapsed toggle-content
:title title
:class (stl/css-case :title-spacing-layout-element true
:title-spacing-empty (not has-content?))}]]
[:> title-bar* {:collapsable has-content?
:collapsed (not open?)
:on-collapsed toggle-content
:title title
:class (stl/css-case :title-spacing-layout-element true
:title-spacing-empty (not has-content?))}]]
(when open?
[:div {:class (stl/css :flex-element-menu)}
(when (or is-layout-child? is-absolute?)

18
frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs
View File

@@ -20,7 +20,7 @@
[app.main.ui.components.numeric-input :refer [numeric-input*]]
[app.main.ui.components.reorder-handler :refer [reorder-handler*]]
[app.main.ui.components.select :refer [select]]
[app.main.ui.components.title-bar :refer [title-bar]]
[app.main.ui.components.title-bar :refer [title-bar*]]
[app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
[app.main.ui.hooks :as h]
[app.main.ui.icons :as i]
@@ -321,14 +321,14 @@
(ctss/check-shadow))))))))))]
[:div {:class (stl/css :element-set)}
[:div {:class (stl/css :element-title)}
[:& title-bar {:collapsable has-shadows?
:collapsed (not show-content?)
:on-collapsed toggle-content
:title (case type
:multiple (tr "workspace.options.shadow-options.title.multiple")
:group (tr "workspace.options.shadow-options.title.group")
(tr "workspace.options.shadow-options.title"))
:class (stl/css-case :title-spacing-shadow (not has-shadows?))}
[:> title-bar* {:collapsable has-shadows?
:collapsed (not show-content?)
:on-collapsed toggle-content
:title (case type
:multiple (tr "workspace.options.shadow-options.title.multiple")
:group (tr "workspace.options.shadow-options.title.group")
(tr "workspace.options.shadow-options.title"))
:class (stl/css-case :title-spacing-shadow (not has-shadows?))}
(when-not (= :multiple shadows)
[:> icon-button* {:variant "ghost"

12
frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs
View File

@@ -13,7 +13,7 @@
[app.main.data.workspace :as udw]
[app.main.data.workspace.colors :as dc]
[app.main.store :as st]
[app.main.ui.components.title-bar :refer [title-bar]]
[app.main.ui.components.title-bar :refer [title-bar*]]
[app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
[app.main.ui.hooks :as h]
[app.main.ui.workspace.sidebar.options.rows.stroke-row :refer [stroke-row]]
@@ -170,11 +170,11 @@
[:div {:class (stl/css :element-set)}
[:div {:class (stl/css :element-title)}
[:& title-bar {:collapsable has-strokes?
:collapsed (not open?)
:on-collapsed toggle-content
:title label
:class (stl/css-case :title-spacing-stroke (not has-strokes?))}
[:> title-bar* {:collapsable has-strokes?
:collapsed (not open?)
:on-collapsed toggle-content
:title label
:class (stl/css-case :title-spacing-stroke (not has-strokes?))}
(when (not (= :multiple strokes))
[:> icon-button* {:variant "ghost"
:aria-label (tr "workspace.options.stroke.add-stroke")

12
frontend/src/app/main/ui/workspace/sidebar/options/menus/svg_attrs.cljs
View File

@@ -10,7 +10,7 @@
[app.common.data :as d]
[app.main.data.workspace.shapes :as dwsh]
[app.main.store :as st]
[app.main.ui.components.title-bar :refer [title-bar]]
[app.main.ui.components.title-bar :refer [title-bar*]]
[app.main.ui.icons :as i]
[app.util.dom :as dom]
[app.util.functions :as uf]
@@ -95,11 +95,11 @@
(when-not (empty? attrs)
[:div {:class (stl/css :element-set)}
[:div {:class (stl/css :element-set-title)}
[:& title-bar {:collapsable has-attributes?
:collapsed (not open?)
:on-collapsed toggle-content
:title (tr "workspace.sidebar.options.svg-attrs.title")
:class (stl/css-case :title-spacing-svg-attrs (not has-attributes?))}]]
[:> title-bar* {:collapsable has-attributes?
:collapsed (not open?)
:on-collapsed toggle-content
:title (tr "workspace.sidebar.options.svg-attrs.title")
:class (stl/css-case :title-spacing-svg-attrs (not has-attributes?))}]]
(when open?
[:div {:class (stl/css :element-set-content)}
(for [[attr-key attr-value] attrs]

12
frontend/src/app/main/ui/workspace/sidebar/options/menus/text.cljs
View File

@@ -19,7 +19,7 @@
[app.main.refs :as refs]
[app.main.store :as st]
[app.main.ui.components.radio-buttons :refer [radio-button radio-buttons]]
[app.main.ui.components.title-bar :refer [title-bar]]
[app.main.ui.components.title-bar :refer [title-bar*]]
[app.main.ui.context :as ctx]
[app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
[app.main.ui.hooks :as hooks]
@@ -299,11 +299,11 @@
[:div {:class (stl/css :element-set)}
[:div {:class (stl/css :element-title)}
[:& title-bar {:collapsable true
:collapsed (not main-menu-open?)
:on-collapsed toggle-main-menu
:title label
:class (stl/css :title-spacing-text)}
[:> title-bar* {:collapsable true
:collapsed (not main-menu-open?)
:on-collapsed toggle-main-menu
:title label
:class (stl/css :title-spacing-text)}
(when (and (not typography) (not multiple?))
[:> icon-button* {:variant "ghost"
:aria-label (tr "labels.options")

8
frontend/src/app/main/ui/workspace/sidebar/options/page.cljs
View File

@@ -14,7 +14,7 @@
[app.main.data.workspace.undo :as dwu]
[app.main.refs :as refs]
[app.main.store :as st]
[app.main.ui.components.title-bar :refer [title-bar]]
[app.main.ui.components.title-bar :refer [title-bar*]]
[app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row*]]
[app.util.i18n :as i18n :refer [tr]]
[okulary.core :as l]
@@ -38,9 +38,9 @@
[:div {:class (stl/css :element-set)}
[:div {:class (stl/css :element-title)}
[:& title-bar {:collapsable false
:title (tr "workspace.options.canvas-background")
:class (stl/css :title-spacing-page)}]]
[:> title-bar* {:collapsable false
:title (tr "workspace.options.canvas-background")
:class (stl/css :title-spacing-page)}]]
[:div {:class (stl/css :element-content)}
[:> color-row*

14
frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs
View File

@@ -15,7 +15,7 @@
[app.main.data.workspace :as dw]
[app.main.refs :as refs]
[app.main.store :as st]
[app.main.ui.components.title-bar :refer [title-bar]]
[app.main.ui.components.title-bar :refer [title-bar*]]
[app.main.ui.context :as ctx]
[app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
[app.main.ui.hooks :as hooks]
@@ -231,12 +231,12 @@
[:div {:class (stl/css :sitemap)
:style {:--height (dm/str height "px")}}
[:& title-bar {:collapsable true
:collapsed collapsed
:on-collapsed on-toggle-collapsed
:all-clickable true
:title (tr "workspace.sidebar.sitemap")
:class (stl/css :title-spacing-sitemap)}
[:> title-bar* {:collapsable true
:collapsed collapsed
:on-collapsed on-toggle-collapsed
:all-clickable true
:title (tr "workspace.sidebar.sitemap")
:class (stl/css :title-spacing-sitemap)}
(if ^boolean read-only?
(when ^boolean (:can-edit permissions)

4
frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
View File

@@ -13,7 +13,7 @@
[app.main.refs :as refs]
[app.main.ui.components.dropdown-menu :refer [dropdown-menu*
dropdown-menu-item*]]
[app.main.ui.components.title-bar :refer [title-bar]]
[app.main.ui.components.title-bar :refer [title-bar*]]
[app.main.ui.context :as ctx]
[app.main.ui.ds.buttons.button :refer [button*]]
[app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
@@ -76,7 +76,7 @@
:style {"--resize-height" (str resize-height "px")}}
[:> themes-header*]
[:div {:class (stl/css :sidebar-header)}
[:& title-bar {:title (tr "labels.sets")}
[:> title-bar* {:title (tr "labels.sets")}
(when can-edit?
[:> tsetslist/add-button*])]]