CalvinBackup/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2026-02-13 07:02:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #7143 from penpot/luis-11856-adjust-component-title

Browse Source 
✨ Adjust the appearance of the variant-related elements in the design tab
This commit is contained in:
Andrey Antukh
2025-08-20 17:41:50 +02:00
committed by GitHub
parent cac639d267 4d8ad19eea
commit a702fee3cd
29 changed files with 312 additions and 285 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

@@ -20,7 +20,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]]
@@ -99,16 +99,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)}

210
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*]]
@@ -361,15 +361,17 @@
[:*
[:div {:class (stl/css :variant-property-list)}
(for [[pos prop] (map-indexed vector properties)]
[:div {:key (str variant-id "-" pos) :class (stl/css :variant-property-container)}
[:*
[:div {:class (stl/css :variant-property-name-wrapper)}
[:> input-with-meta* {:value (:name prop)
:is-editing (:editing? (meta prop))
:max-length ctv/property-max-length
:data-position pos
:on-blur update-property-name}]]
[:div {:key (str variant-id "-" pos)
:class (stl/css :variant-property-container)}
[:div {:class (stl/css :variant-property-name-wrapper)}
[:> input-with-meta* {:value (:name prop)
:is-editing (:editing? (meta prop))
:max-length ctv/property-max-length
:data-position pos
:on-blur update-property-name}]]
[:div {:class (stl/css :variant-property-value-wrapper)}
(let [mixed-value? (= (:value prop) false)]
[:> combobox* {:id (str "variant-prop-" variant-id "-" pos)
:placeholder (if mixed-value? (tr "settings.multiple") "--")
@@ -463,12 +465,15 @@
[:*
[:div {:class (stl/css :variant-property-list)}
(for [[pos prop] (map vector (range) properties)]
[:div {:key (str (:id shape) pos) :class (stl/css :variant-property-container)}
[:*
[:div {:class (stl/css :variant-property-name-wrapper-copy)
:title (:name prop)}
[:span {:class (stl/css :variant-property-name)}
(:name prop)]]
[:div {:key (str (:id shape) pos)
:class (stl/css :variant-property-container)}
[:div {:class (stl/css :variant-property-name-wrapper)
:title (:name prop)}
[:div {:class (stl/css :variant-property-name)}
(:name prop)]]
[:div {:class (stl/css :variant-property-value-wrapper)}
[:> select* {:default-selected (:value prop)
:options (get-options (:name prop))
:empty-to-end true
@@ -901,18 +906,19 @@
[: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?)}
[:span {:class (stl/css :copy-text)}
(if main-instance?
(if is-variant?
(tr "workspace.options.component.variant")
(tr "workspace.options.component.main"))
(tr "workspace.options.component.copy"))]
[:*
[:> 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)}
(if main-instance?
(if is-variant?
(tr "workspace.options.component.variant")
(tr "workspace.options.component.main"))
(tr "workspace.options.component.copy"))]]
(when is-variant?
[:div {:class (stl/css :variants-help-modal-button)}
@@ -1032,6 +1038,9 @@
properties (mf/with-memo [data objects variant-id]
(cfv/extract-properties-values data objects (:id shape)))
open* (mf/use-state true)
open? (deref open*)
menu-open* (mf/use-state false)
menu-open? (deref menu-open*)
@@ -1041,6 +1050,10 @@
{:title (tr "workspace.shape.menu.add-variant")
:action #(st/emit! (dwv/add-new-variant (:id shape)))}]
toggle-content
(mf/use-fn
#(swap! open* not))
on-menu-click
(mf/use-fn
(mf/deps menu-open* menu-open?)
@@ -1095,13 +1108,15 @@
[:div {:class (stl/css :element-set)}
[:div {:class (stl/css :element-title)}
[:& title-bar {:collapsable false
:title (tr "workspace.options.component")
:class (stl/css :title-spacing-component)}
[:span {:class (stl/css :copy-text)}
(tr "workspace.options.component.main")]
[:*
[:> 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")]]
[:div {:class (stl/css :variants-help-modal-button)}
[:> icon-button* {:variant "ghost"
@@ -1109,78 +1124,79 @@
:on-click on-click-variant-title-help
:icon "help"}]]]]
[:div {:class (stl/css :element-content)}
[:div {:class (stl/css-case :component-wrapper true
:with-actions (not multi?)
:without-actions multi?)}
[:button {:class (stl/css-case :component-name-wrapper true
:with-main true
:swappeable false)}
(when open?
[:div {:class (stl/css :element-content)}
[:div {:class (stl/css-case :component-wrapper true
:with-actions (not multi?)
:without-actions multi?)}
[:button {:class (stl/css-case :component-name-wrapper true
:with-main true
:swappeable false)}
[:span {:class (stl/css :component-icon)} i/component]
[:span {:class (stl/css :component-icon)} i/component]
[:div {:class (stl/css :name-wrapper)}
[:div {:class (stl/css :component-name)}
[:span {:class (stl/css :component-name-inside)}
(if multi?
(tr "settings.multiple")
(cfh/last-path shape-name))]]]]
[:div {:class (stl/css :name-wrapper)}
[:div {:class (stl/css :component-name)}
[:span {:class (stl/css :component-name-inside)}
(if multi?
(tr "settings.multiple")
(cfh/last-path shape-name))]]]]
(when-not multi?
[:div {:class (stl/css :component-actions)}
[:button {:class (stl/css-case :menu-btn true
:selected menu-open?)
:on-click on-menu-click}
i/menu]
(when-not multi?
[:div {:class (stl/css :component-actions)}
[:button {:class (stl/css-case :menu-btn true
:selected menu-open?)
:on-click on-menu-click}
i/menu]
[:& component-ctx-menu {:show menu-open?
:on-close on-menu-close
:menu-entries menu-entries
:main-instance true}]])]
[:& component-ctx-menu {:show menu-open?
:on-close on-menu-close
:menu-entries menu-entries
:main-instance true}]])]
(when-not multi?
[:div {:class (stl/css :variant-property-list)}
(for [[pos property] (map-indexed vector properties)]
(let [last-prop? (<= (count properties) 1)
values (->> (:value property)
(move-empty-items-to-end)
(replace {"" "--"})
(str/join ", "))
is-editing (:editing? (meta property))]
[:div {:key (str (:id shape) pos)
:class (stl/css :variant-property-row)}
[:> input-with-meta* {:value (:name property)
:meta values
:is-editing is-editing
:max-length ctv/property-max-length
:data-position pos
:on-blur update-property-name}]
[:> icon-button* {:variant "ghost"
:aria-label (if last-prop?
(tr "workspace.shape.menu.remove-variant-property.last-property")
(tr "workspace.shape.menu.remove-variant-property"))
:on-click remove-property
:data-position pos
:icon "remove"
:disabled last-prop?}]]))])
(when-not multi?
[:div {:class (stl/css :variant-property-list)}
(for [[pos property] (map-indexed vector properties)]
(let [last-prop? (<= (count properties) 1)
values (->> (:value property)
(move-empty-items-to-end)
(replace {"" "--"})
(str/join ", "))
is-editing (:editing? (meta property))]
[:div {:key (str (:id shape) pos)
:class (stl/css :variant-property-row)}
[:> input-with-meta* {:value (:name property)
:meta values
:is-editing is-editing
:max-length ctv/property-max-length
:data-position pos
:on-blur update-property-name}]
[:> icon-button* {:variant "ghost"
:aria-label (if last-prop?
(tr "workspace.shape.menu.remove-variant-property.last-property")
(tr "workspace.shape.menu.remove-variant-property"))
:on-click remove-property
:data-position pos
:icon "remove"
:disabled last-prop?}]]))])
(if malformed?
[:div {:class (stl/css :variant-warning-wrapper)}
[:> icon* {:icon-id "msg-neutral"
:class (stl/css :variant-warning-darken)}]
[:div {:class (stl/css :variant-warning-highlight)}
(tr "workspace.options.component.variant.malformed.group.title")]
[:button {:class (stl/css :variant-warning-button)
:on-click select-shapes-with-malformed}
(tr "workspace.options.component.variant.malformed.group.locate")]]
(when duplicated?
(if malformed?
[:div {:class (stl/css :variant-warning-wrapper)}
[:> icon* {:icon-id "msg-neutral"
:class (stl/css :variant-warning-darken)}]
[:div {:class (stl/css :variant-warning-highlight)}
(tr "workspace.options.component.variant.duplicated.group.title")]
(tr "workspace.options.component.variant.malformed.group.title")]
[:button {:class (stl/css :variant-warning-button)
:on-click select-shapes-with-duplicated}
(tr "workspace.options.component.variant.duplicated.group.locate")]]))]])))
:on-click select-shapes-with-malformed}
(tr "workspace.options.component.variant.malformed.group.locate")]]
(when duplicated?
[:div {:class (stl/css :variant-warning-wrapper)}
[:> icon* {:icon-id "msg-neutral"
:class (stl/css :variant-warning-darken)}]
[:div {:class (stl/css :variant-warning-highlight)}
(tr "workspace.options.component.variant.duplicated.group.title")]
[:button {:class (stl/css :variant-warning-button)
:on-click select-shapes-with-duplicated}
(tr "workspace.options.component.variant.duplicated.group.locate")]]))])])))

72
frontend/src/app/main/ui/workspace/sidebar/options/menus/component.scss
View File

@@ -9,12 +9,21 @@
.element-set {
margin: 0;
padding-top: $s-8;
}
.element-content {
@include flexColumn;
gap: var(--sp-m);
display: grid;
grid-template-columns: repeat(8, var(--sp-xxxl));
row-gap: var(--sp-m);
padding-top: $s-4;
padding-bottom: $s-8;
}
.element-title {
display: grid;
grid-template-columns: repeat(8, var(--sp-xxxl));
column-gap: var(--sp-xs);
}
.title-back {
@@ -34,8 +43,8 @@
.title-spacing-component {
justify-content: flex-start;
gap: $s-4;
margin-bottom: $s-4;
gap: $s-8;
grid-column: span 7;
}
.title-bar-variant {
@@ -44,6 +53,7 @@
.variants-help-modal-button {
margin-inline-start: auto;
grid-column: span 1;
}
.icon-back {
@@ -60,14 +70,14 @@
}
.component-wrapper {
grid-column: span 8;
width: 100%;
min-height: $s-32;
border-radius: $br-8;
&.with-actions {
display: grid;
grid-template-columns: 1fr $s-28;
gap: $s-2;
display: flex;
gap: $s-1;
}
&.without-actions {
@@ -83,8 +93,9 @@
.component-name-wrapper {
@include buttonStyle;
cursor: default;
flex-grow: 1;
display: grid;
grid-template-columns: $s-12 1fr;
grid-template-columns: $s-16 1fr;
gap: $s-4;
padding: 0 $s-8;
border-radius: $br-8 0 0 $br-8;
@@ -100,7 +111,7 @@
.component-icon {
@include flexCenter;
height: $s-32;
width: $s-12;
width: $s-16;
svg {
@extend .button-icon-small;
@@ -114,6 +125,7 @@
padding: $s-8 0 $s-8 $s-2;
border-radius: $br-8 0 0 $br-8;
overflow: hidden;
gap: 0;
}
.component-name {
@@ -121,7 +133,7 @@
@include textEllipsis;
direction: rtl;
text-align: left;
min-height: $s-16;
height: $s-16;
}
.component-name-inside {
@@ -134,19 +146,20 @@
@include textEllipsis;
direction: rtl;
text-align: left;
min-height: $s-16;
height: $s-16;
max-width: $s-184;
color: var(--title-foreground-color);
}
.component-actions {
position: relative;
width: $s-32;
}
.menu-btn {
@extend .button-tertiary;
height: 100%;
width: $s-28;
width: 100%;
border-radius: 0 $br-8 $br-8 0;
background-color: var(--assets-item-background-color);
color: var(--assets-item-name-foreground-color-hover);
@@ -191,7 +204,7 @@
}
.not-main {
top: $s-56;
top: $s-48;
}
.dropdown-element {
@@ -450,6 +463,7 @@
.component-swap {
padding-top: $s-12;
grid-column: span 8;
}
.component-swap-content {
@@ -733,36 +747,32 @@
}
.variant-property-list {
display: flex;
grid-column: span 8;
display: grid;
flex-direction: column;
gap: var(--sp-xs);
}
.variant-property-container {
@include t.use-typography("body-small");
width: 100%;
display: flex;
display: grid;
grid-template-columns: repeat(8, var(--sp-xxxl));
gap: var(--sp-xs);
padding-right: var(--sp-xxs);
}
.variant-property-name-wrapper-copy {
display: flex;
align-items: center;
justify-content: center;
height: var(--sp-xxxl);
width: $s-104;
}
.variant-property-name-wrapper {
display: flex;
flex: 0 0 auto;
width: $s-104;
grid-column: span 3;
align-self: center;
}
.variant-property-value-wrapper {
grid-column: span 5;
align-self: center;
}
.variant-property-name {
color: var(--color-foreground-primary);
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
@@ -770,6 +780,8 @@
.variant-warning-wrapper {
@include bodySmallTypography;
grid-column: span 8;
border: 1px solid var(--color-background-quaternary);
border-radius: $s-8;
padding: $s-12;

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*])]]