Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-04-05 03:21:26 -05:00
Code Issues Activity

✨ Update inspect-title-bar and copy-button to the new components format

Browse source
This commit is contained in:
Pablo Alba 2025-03-17 16:34:59 +01:00 • committed by Pablo Alba
parent 625cbfc50a
commit 0901807db8
16 changed files with 80 additions and 82 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
frontend/src/app/main/ui/components/copy_button.cljs
View file

@ -16,8 +16,7 @@
[app.util.webapi :as wapi]
[rumext.v2 :as mf]))
(mf/defc copy-button
{::mf/props :obj}
(mf/defc copy-button*
[{:keys [data on-copied children class aria-label]}]
(let [active* (mf/use-state false)
active? (deref active*)

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

@ -51,8 +51,7 @@
:on-click on-btn-click}
btn-children])]))
(mf/defc inspect-title-bar
{::mf/props :obj}
(mf/defc inspect-title-bar*
[{:keys [class title]}]
[:div {:class (dm/str (stl/css :title-bar) " " class)}
[:div {:class (stl/css :title-only :inspect-title)} title]])

6
frontend/src/app/main/ui/inspect/annotation.cljs
View file

@ -7,7 +7,7 @@
(ns app.main.ui.inspect.annotation
(:require-macros [app.main.style :as stl])
(:require
[app.main.ui.components.copy-button :refer [copy-button]]
[app.main.ui.components.copy-button :refer [copy-button*]]
[app.main.ui.components.title-bar :refer [title-bar]]
[app.util.i18n :as i18n :refer [tr]]
[rumext.v2 :as mf]))
@ -18,7 +18,7 @@
[:& 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)}]]
[:> copy-button* {:data content
:class (stl/css :copy-btn-title)}]]
[:div {:class (stl/css :annotation-content)} content]])

12
frontend/src/app/main/ui/inspect/attributes/blur.cljs
View file

@ -8,8 +8,8 @@
(:require-macros [app.main.style :as stl])
(:require
[app.common.data.macros :as dm]
[app.main.ui.components.copy-button :refer [copy-button]]
[app.main.ui.components.title-bar :refer [inspect-title-bar]]
[app.main.ui.components.copy-button :refer [copy-button*]]
[app.main.ui.components.title-bar :refer [inspect-title-bar*]]
[app.util.code-gen.style-css :as css]
[app.util.i18n :refer [tr]]
[rumext.v2 :as mf]))
@ -22,12 +22,12 @@
(let [shapes (->> shapes (filter has-blur?))]
(when (seq shapes)
[:div {:class (stl/css :attributes-block)}
[:& inspect-title-bar
[:> inspect-title-bar*
{:title (tr "inspect.attributes.blur")
:class (stl/css :title-spacing-blur)}
(when (= (count shapes) 1)
[:& copy-button {:data (css/get-css-property objects (first shapes) :filter)
:class (stl/css :copy-btn-title)}])]
[:> copy-button* {:data (css/get-css-property objects (first shapes) :filter)
:class (stl/css :copy-btn-title)}])]
[:div {:class (stl/css :attributes-content)}
(for [shape shapes]
@ -35,6 +35,6 @@
:key (dm/str "block-" (:id shape) "-blur")}
[:div {:class (stl/css :global/attr-label)} "Filter"]
[:div {:class (stl/css :global/attr-value)}
[:& copy-button {:data (css/get-css-property objects shape :filter)}
[:> copy-button* {:data (css/get-css-property objects shape :filter)}
[:div {:class (stl/css :button-children)}
(css/get-css-value objects shape :filter)]]]])]])))

16
frontend/src/app/main/ui/inspect/attributes/common.cljs
View file

@ -15,7 +15,7 @@
[app.main.refs :as refs]
[app.main.store :as st]
[app.main.ui.components.color-bullet :as cb]
[app.main.ui.components.copy-button :refer [copy-button]]
[app.main.ui.components.copy-button :refer [copy-button*]]
[app.main.ui.components.select :refer [select]]
[app.main.ui.formats :as fmt]
[app.util.i18n :refer [tr]]
@ -75,8 +75,8 @@
[:div {:class (stl/css :format-wrapper)}
[:div {:class (stl/css :image-format)}
(tr "media.image.short")]]
[:& copy-button {:data copy-data
:class (stl/css :color-row-copy-btn)}
[:> copy-button* {:data copy-data
:class (stl/css :color-row-copy-btn)}
[:div {:class (stl/css-case :color-info true
:two-line (some? color-library-name))}
[:div {:class (stl/css :first-row)}
@ -116,11 +116,11 @@
(when (:gradient color)
[:div {:class (stl/css :format-info)} "rgba"])]
[:& copy-button {:data copy-data
:aria-label (tr "labels.copy-color")
:class (stl/css-case :color-row-copy-btn true
:one-line (not color-library-name)
:two-line (some? color-library-name))}
[:> copy-button* {:data copy-data
:aria-label (tr "labels.copy-color")
:class (stl/css-case :color-row-copy-btn true
:one-line (not color-library-name)
:two-line (some? color-library-name))}
[:div {:class (stl/css :first-row)}
[:div {:class (stl/css :name-opacity)}
[:span {:class (stl/css-case :color-value-wrapper true

4
frontend/src/app/main/ui/inspect/attributes/fill.cljs
View file

@ -7,7 +7,7 @@
(ns app.main.ui.inspect.attributes.fill
(:require-macros [app.main.style :as stl])
(:require
[app.main.ui.components.title-bar :refer [inspect-title-bar]]
[app.main.ui.components.title-bar :refer [inspect-title-bar*]]
[app.main.ui.inspect.attributes.common :refer [color-row]]
[app.util.code-gen.style-css :as css]
[app.util.i18n :refer [tr]]
@ -53,7 +53,7 @@
(let [shapes (filter has-fill? shapes)]
(when (seq shapes)
[:div {:class (stl/css :attributes-block)}
[:& inspect-title-bar
[:> inspect-title-bar*
{:title (tr "inspect.attributes.fill")
:class (stl/css :title-spacing-fill)}]

12
frontend/src/app/main/ui/inspect/attributes/geometry.cljs
View file

@ -9,8 +9,8 @@
(:require
[app.common.data :as d]
[app.common.data.macros :as dm]
[app.main.ui.components.copy-button :refer [copy-button]]
[app.main.ui.components.title-bar :refer [inspect-title-bar]]
[app.main.ui.components.copy-button :refer [copy-button*]]
[app.main.ui.components.title-bar :refer [inspect-title-bar*]]
[app.main.ui.inspect.attributes.common :as cmm]
[app.util.code-gen.style-css :as css]
[app.util.i18n :refer [tr]]
@ -29,20 +29,20 @@
:class (stl/css :geometry-row)}
[:div {:class (stl/css :global/attr-label)} property-name]
[:div {:class (stl/css :global/attr-value)}
[:& copy-button {:data (css/get-css-property objects shape property)}
[:> copy-button* {:data (css/get-css-property objects shape property)}
[:div {:class (stl/css :button-children)} value]]]])))])
(mf/defc geometry-panel
[{:keys [objects shapes]}]
[:div {:class (stl/css :attributes-block)}
[:& inspect-title-bar
[:> inspect-title-bar*
{:title (tr "inspect.attributes.size")
:class (stl/css :title-spacing-geometry)}
(when (= (count shapes) 1)
[:& copy-button {:data (css/get-shape-properties-css objects (first shapes) properties)
:class (stl/css :copy-btn-title)}])]
[:> copy-button* {:data (css/get-shape-properties-css objects (first shapes) properties)
:class (stl/css :copy-btn-title)}])]
(for [shape shapes]
[:& geometry-block {:shape shape

6
frontend/src/app/main/ui/inspect/attributes/image.cljs
View file

@ -10,7 +10,7 @@
[app.common.files.helpers :as cfh]
[app.common.media :as cm]
[app.config :as cf]
[app.main.ui.components.copy-button :refer [copy-button]]
[app.main.ui.components.copy-button :refer [copy-button*]]
[app.util.code-gen.style-css :as css]
[app.util.i18n :refer [tr]]
[cuerdas.core :as str]
@ -31,14 +31,14 @@
[:div {:class (stl/css :global/attr-label)}
(tr "inspect.attributes.image.width")]
[:div {:class (stl/css :global/attr-value)}
[:& copy-button {:data (css/get-css-property objects (:metadata shape) :width)}
[:> copy-button* {:data (css/get-css-property objects (:metadata shape) :width)}
[:div {:class (stl/css :button-children)} (css/get-css-value objects (:metadata shape) :width)]]]]
[:div {:class (stl/css :image-row)}
[:div {:class (stl/css :global/attr-label)}
(tr "inspect.attributes.image.height")]
[:div {:class (stl/css :global/attr-value)}
[:& copy-button {:data (css/get-css-property objects (:metadata shape) :height)}
[:> copy-button* {:data (css/get-css-property objects (:metadata shape) :height)}
[:div {:class (stl/css :button-children)} (css/get-css-value objects (:metadata shape) :height)]]]]
(let [mtype (-> shape :metadata :mtype)

12
frontend/src/app/main/ui/inspect/attributes/layout.cljs
View file

@ -10,8 +10,8 @@
[app.common.data :as d]
[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 [inspect-title-bar]]
[app.main.ui.components.copy-button :refer [copy-button*]]
[app.main.ui.components.title-bar :refer [inspect-title-bar*]]
[app.main.ui.inspect.attributes.common :as cmm]
[app.util.code-gen.style-css :as css]
[rumext.v2 :as mf]))
@ -43,7 +43,7 @@
property-name]
[:div {:class (stl/css :global/attr-value)}
[:& copy-button {:data (css/get-css-property objects shape property)}
[:> copy-button* {:data (css/get-css-property objects shape property)}
[:div {:class (stl/css :button-children)} value]]]]))))
(mf/defc layout-panel
@ -52,13 +52,13 @@
(when (seq shapes)
[:div {:class (stl/css :attributes-block)}
[:& inspect-title-bar
[:> inspect-title-bar*
{:title "Layout"
:class (stl/css :title-spacing-layout)}
(when (= (count shapes) 1)
[:& copy-button {:data (css/get-shape-properties-css objects (first shapes) properties)
:class (stl/css :copy-btn-title)}])]
[:> copy-button* {:data (css/get-shape-properties-css objects (first shapes) properties)
:class (stl/css :copy-btn-title)}])]
(for [shape shapes]
[:& layout-block {:shape shape

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

@ -10,7 +10,7 @@
[app.common.data :as d]
[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.copy-button :refer [copy-button*]]
[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]
@ -41,7 +41,7 @@
[:div {:class (stl/css :global/attr-label)} property-name]
[:div {:class (stl/css :global/attr-value)}
[:& copy-button {:data (css/get-css-property objects shape property)}
[:> copy-button* {:data (css/get-css-property objects shape property)}
[:div {:class (stl/css :button-children)} value]]]]))))
(mf/defc layout-element-panel
@ -71,8 +71,8 @@
: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)}])]
[:> copy-button* {:data (css/get-shape-properties-css objects (first shapes) properties)
:class (stl/css :copy-btn-title)}])]
(for [shape shapes]
[:& layout-element-block {:shape shape

10
frontend/src/app/main/ui/inspect/attributes/shadow.cljs
View file

@ -9,8 +9,8 @@
(:require
[app.common.data :as d]
[app.common.data.macros :as dm]
[app.main.ui.components.copy-button :refer [copy-button]]
[app.main.ui.components.title-bar :refer [inspect-title-bar]]
[app.main.ui.components.copy-button :refer [copy-button*]]
[app.main.ui.components.title-bar :refer [inspect-title-bar*]]
[app.main.ui.inspect.attributes.common :refer [color-row]]
[app.util.code-gen.style-css :as css]
[app.util.i18n :refer [tr]]
@ -32,8 +32,8 @@
[:div {:class (stl/css :shadow-row)}
[:div {:class (stl/css :global/attr-label)} (->> shadow :style d/name (str "workspace.options.shadow-options.") (tr))]
[:div {:class (stl/css :global/attr-value)}
[:& copy-button {:data (shadow-copy-data shadow)
:class (stl/css :color-row-copy-btn)}
[:> copy-button* {:data (shadow-copy-data shadow)
:class (stl/css :color-row-copy-btn)}
[:div {:class (stl/css :button-children)
:title (dm/str (tr "workspace.options.shadow-options.offsetx") " "
(tr "workspace.options.shadow-options.offsety") " "
@ -53,7 +53,7 @@
(when (and (seq shapes) (> (count shapes) 0))
[:div {:class (stl/css :attributes-block)}
[:& inspect-title-bar
[:> inspect-title-bar*
{:title (tr "inspect.attributes.shadow")
:class (stl/css :title-spacing-shadow)}]

4
frontend/src/app/main/ui/inspect/attributes/stroke.cljs
View file

@ -7,7 +7,7 @@
(ns app.main.ui.inspect.attributes.stroke
(:require-macros [app.main.style :as stl])
(:require
[app.main.ui.components.title-bar :refer [inspect-title-bar]]
[app.main.ui.components.title-bar :refer [inspect-title-bar*]]
[app.main.ui.inspect.attributes.common :refer [color-row]]
[app.util.code-gen.style-css :as css]
[app.util.i18n :refer [tr]]
@ -48,7 +48,7 @@
(let [shapes (->> shapes (filter has-stroke?))]
(when (seq shapes)
[:div {:class (stl/css :attributes-block)}
[:& inspect-title-bar
[:> inspect-title-bar*
{:title (tr "inspect.attributes.stroke")
:class (stl/css :title-spacing-stroke)}]

12
frontend/src/app/main/ui/inspect/attributes/svg.cljs
View file

@ -8,8 +8,8 @@
(:require-macros [app.main.style :as stl])
(:require
[app.common.data :as d]
[app.main.ui.components.copy-button :refer [copy-button]]
[app.main.ui.components.title-bar :refer [inspect-title-bar]]
[app.main.ui.components.copy-button :refer [copy-button*]]
[app.main.ui.components.title-bar :refer [inspect-title-bar*]]
[app.util.i18n :refer [tr]]
[cuerdas.core :as str]
[rumext.v2 :as mf]))
@ -24,7 +24,7 @@
[:*
[:div {:class (stl/css :attributes-subtitle)}
[:span (d/name attr)]
[:& copy-button {:data (map->css value)}]]
[:> copy-button* {:data (map->css value)}]]
(for [[attr-key attr-value] value]
[:& svg-attr {:attr attr-key :value attr-value :key (str/join "svg-key-" (d/name attr-key))}])]
@ -37,8 +37,8 @@
[:div {:class (stl/css :svg-row)}
[:div {:class (stl/css :global/attr-label)} attr-name]
[:div {:class (stl/css :global/attr-value)}
[:& copy-button {:data (d/name value)
:class (stl/css :copy-btn-title)}
[:> copy-button* {:data (d/name value)
:class (stl/css :copy-btn-title)}
[:div {:class (stl/css :button-children)} (str value)]]]])))
(mf/defc svg-block
@ -52,7 +52,7 @@
(let [shape (first shapes)]
(when (seq (:svg-attrs shape))
[:div {:class (stl/css :attributes-block)}
[:& inspect-title-bar
[:> inspect-title-bar*
{:title (tr "workspace.sidebar.options.svg-attrs.title")
:class (stl/css :title-spacing-svg)}]
[:& svg-block {:shape shape}]])))

30
frontend/src/app/main/ui/inspect/attributes/text.cljs
View file

@ -13,8 +13,8 @@
[app.main.fonts :as fonts]
[app.main.refs :as refs]
[app.main.store :as st]
[app.main.ui.components.copy-button :refer [copy-button]]
[app.main.ui.components.title-bar :refer [inspect-title-bar]]
[app.main.ui.components.copy-button :refer [copy-button*]]
[app.main.ui.components.title-bar :refer [inspect-title-bar*]]
[app.main.ui.formats :as fmt]
[app.main.ui.inspect.attributes.common :refer [color-row]]
[app.util.i18n :refer [tr]]
@ -82,15 +82,15 @@
[:div {:class (stl/css :global/attr-label)}
(tr "inspect.attributes.typography")]
[:div {:class (stl/css :global/attr-value)}
[:& copy-button {:data (copy-style-data typography :font-family :font-weight :font-style)
:class (stl/css :copy-btn-wrapper)}
[:> copy-button* {:data (copy-style-data typography :font-family :font-weight :font-style)
:class (stl/css :copy-btn-wrapper)}
[:div {:class (stl/css :button-children)} (:name typography)]]]])
(when (:font-id style)
[:div {:class (stl/css :text-row)}
[:div {:class (stl/css :global/attr-label)} (tr "inspect.attributes.typography.font-family")]
[:div {:class (stl/css :global/attr-value)}
[:& copy-button {:data (copy-style-data style :font-family)}
[:> copy-button* {:data (copy-style-data style :font-family)}
[:div {:class (stl/css :button-children)}
(-> style :font-id fonts/get-font-data :name)]]]])
@ -99,7 +99,7 @@
[:div {:class (stl/css :global/attr-label)}
(tr "inspect.attributes.typography.font-style")]
[:div {:class (stl/css :global/attr-value)}
[:& copy-button {:data (copy-style-data style :font-style)}
[:> copy-button* {:data (copy-style-data style :font-style)}
[:div {:class (stl/css :button-children)}
(dm/str (:font-style style))]]]])
@ -108,7 +108,7 @@
[:div {:class (stl/css :global/attr-label)}
(tr "inspect.attributes.typography.font-size")]
[:div {:class (stl/css :global/attr-value)}
[:& copy-button {:data (copy-style-data style :font-size)}
[:> copy-button* {:data (copy-style-data style :font-size)}
[:div {:class (stl/css :button-children)}
(fmt/format-pixels (:font-size style))]]]])
@ -117,7 +117,7 @@
[:div {:class (stl/css :global/attr-label)}
(tr "inspect.attributes.typography.font-weight")]
[:div {:class (stl/css :global/attr-value)}
[:& copy-button {:data (copy-style-data style :font-weight)}
[:> copy-button* {:data (copy-style-data style :font-weight)}
[:div {:class (stl/css :button-children)}
(dm/str (:font-weight style))]]]])
@ -126,7 +126,7 @@
[:div {:class (stl/css :global/attr-label)}
(tr "inspect.attributes.typography.line-height")]
[:div {:class (stl/css :global/attr-value)}
[:& copy-button {:data (copy-style-data style :line-height)}
[:> copy-button* {:data (copy-style-data style :line-height)}
[:div {:class (stl/css :button-children)}
(fmt/format-number (:line-height style))]]]])
@ -135,7 +135,7 @@
[:div {:class (stl/css :global/attr-label)}
(tr "inspect.attributes.typography.letter-spacing")]
[:div {:class (stl/css :global/attr-value)}
[:& copy-button {:data (copy-style-data style :letter-spacing)}
[:> copy-button* {:data (copy-style-data style :letter-spacing)}
[:div {:class (stl/css :button-children)}
(fmt/format-pixels (:letter-spacing style))]]]])
@ -148,7 +148,7 @@
;; (tr "inspect.attributes.typography.text-decoration.strikethrough")
;; (tr "inspect.attributes.typography.text-decoration.underline")
[:div {:class (stl/css :global/attr-value)}
[:& copy-button {:data (copy-style-data style :text-decoration)}
[:> copy-button* {:data (copy-style-data style :text-decoration)}
[:div {:class (stl/css :button-children)}
(tr (dm/str "inspect.attributes.typography.text-decoration." (:text-decoration style)))]]]])
@ -163,12 +163,12 @@
;; (tr "inspect.attributes.typography.text-transform.uppercase")
;; (tr "inspect.attributes.typography.text-transform.unset")
[:div {:class (stl/css :global/attr-value)}
[:& copy-button {:data (copy-style-data style :text-transform)}
[:> copy-button* {:data (copy-style-data style :text-transform)}
[:div {:class (stl/css :button-children)}
(tr (dm/str "inspect.attributes.typography.text-transform." (:text-transform style)))]]]])
[:& copy-button {:data (str/trim text)
:class (stl/css :attributes-content-row)}
[:> copy-button* {:data (str/trim text)
:class (stl/css :attributes-content-row)}
[:span {:class (stl/css :content)
:style {:font-family (:font-family style)
:font-weight (:font-weight style)
@ -192,7 +192,7 @@
[{:keys [shapes]}]
(when-let [shapes (seq (filter has-text? shapes))]
[:div {:class (stl/css :attributes-block)}
[:& inspect-title-bar
[:> inspect-title-bar*
{:title (tr "inspect.attributes.typography")
:class (stl/css :title-spacing-text)}]

10
frontend/src/app/main/ui/inspect/attributes/variant.cljs
View file

@ -11,8 +11,8 @@
[app.common.logic.variants :as clv]
[app.common.types.component :as ctc]
[app.common.types.components-list :as ctkl]
[app.main.ui.components.copy-button :refer [copy-button]]
[app.main.ui.components.title-bar :refer [inspect-title-bar]]
[app.main.ui.components.copy-button :refer [copy-button*]]
[app.main.ui.components.title-bar :refer [inspect-title-bar*]]
[app.util.i18n :refer [tr]]
[cuerdas.core :as str]
[rumext.v2 :as mf]))
@ -23,12 +23,12 @@
:class (stl/css :variant-row)}
[:div {:class (stl/css :global/attr-label)} name]
[:div {:class (stl/css :global/attr-value)}
[:& copy-button {:data value}
[:> copy-button* {:data value}
[:div {:class (stl/css :button-children)} value]]]])
(mf/defc variant-panel*
[{:keys [objects shapes libraries file-id] :as kk} ]
[{:keys [objects shapes libraries file-id] :as kk}]
(let [shape (->> shapes first)
title (cond
(ctc/is-variant-container? shape)
@ -48,7 +48,7 @@
(->> (:variant-properties component)
(map #(update % :value (fn [v] (if (str/blank? v) "--" v))))))))]
[:div {:class (stl/css :attributes-block)}
[:& inspect-title-bar
[:> inspect-title-bar*
{:title (tr title)
:class (stl/css :title-spacing-variant)}]

14
frontend/src/app/main/ui/inspect/code.cljs
View file

@ -18,7 +18,7 @@
[app.main.refs :as refs]
[app.main.store :as st]
[app.main.ui.components.code-block :refer [code-block]]
[app.main.ui.components.copy-button :refer [copy-button]]
[app.main.ui.components.copy-button :refer [copy-button*]]
[app.main.ui.components.radio-buttons :refer [radio-button radio-buttons]]
[app.main.ui.hooks.resize :refer [use-resize-hook]]
[app.main.ui.icons :as i]
@ -293,9 +293,9 @@
:on-click on-expand}
i/code]
[:& copy-button {:data copy-css-fn
:class (stl/css :css-copy-btn)
:on-copied on-style-copied}]]]
[:> copy-button* {:data copy-css-fn
:class (stl/css :css-copy-btn)
:on-copied on-style-copied}]]]
(when-not collapsed-css?
[:div {:class (stl/css :code-row-display)
@ -334,9 +334,9 @@
:on-click on-expand}
i/code]
[:& copy-button {:data copy-html-fn
:class (stl/css :html-copy-btn)
:on-copied on-markup-copied}]]]
[:> copy-button* {:data copy-html-fn
:class (stl/css :html-copy-btn)
:on-copied on-markup-copied}]]]
(when-not collapsed-markup?
[:div {:class (stl/css :code-row-display)