Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-15 01:01:30 -05:00
Code Issues Activity

💄 Update copy button to new UI in text attributes

Browse source
This commit is contained in:
Eva 2023-10-20 16:01:08 +02:00
parent 5a9421a1e2
commit b23ea27cb0
2 changed files with 30 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -82,55 +82,61 @@
[:div {:class (stl/css :global/attr-label)} [:div {:class (stl/css :global/attr-label)}
(tr "inspect.attributes.typography")] (tr "inspect.attributes.typography")]
[:div {:class (stl/css :global/attr-value)} [:div {:class (stl/css :global/attr-value)}
[:div (:name typography)] [:& copy-button {:data (copy-style-data typography :font-family :font-weight :font-style)}
[:& copy-button {:data (copy-style-data typography :font-family :font-weight :font-style)}]]]) [:div {:class (stl/css :button-children)} (:name typography)]]]])
(when (:font-id style) (when (:font-id style)
[:div {:class (stl/css :text-row)} [: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-label)} (tr "inspect.attributes.typography.font-family")]
[:div {:class (stl/css :global/attr-value)} [:div {:class (stl/css :global/attr-value)}
[:div (-> style :font-id fonts/get-font-data :name)] [:& 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)]]]])
(when (:font-style style) (when (:font-style style)
[:div {:class (stl/css :text-row)} [:div {:class (stl/css :text-row)}
[:div {:class (stl/css :global/attr-label)} [:div {:class (stl/css :global/attr-label)}
(tr "inspect.attributes.typography.font-style")] (tr "inspect.attributes.typography.font-style")]
[:div {:class (stl/css :global/attr-value)} [:div {:class (stl/css :global/attr-value)}
[:div (str (:font-style style))] [:& copy-button {:data (copy-style-data style :font-style)}
[:& copy-button {:data (copy-style-data style :font-style)}]]]) [:div {:class (stl/css :button-children)}
(str (:font-style style))]]]])
(when (:font-size style) (when (:font-size style)
[:div {:class (stl/css :text-row)} [:div {:class (stl/css :text-row)}
[:div {:class (stl/css :global/attr-label)} [:div {:class (stl/css :global/attr-label)}
(tr "inspect.attributes.typography.font-size")] (tr "inspect.attributes.typography.font-size")]
[:div {:class (stl/css :global/attr-value)} [:div {:class (stl/css :global/attr-value)}
[:div (fmt/format-pixels (:font-size style))] [:& 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))]]]])
(when (:font-weight style) (when (:font-weight style)
[:div {:class (stl/css :text-row)} [:div {:class (stl/css :text-row)}
[:div {:class (stl/css :global/attr-label)} [:div {:class (stl/css :global/attr-label)}
(tr "inspect.attributes.typography.font-weight")] (tr "inspect.attributes.typography.font-weight")]
[:div {:class (stl/css :global/attr-value)} [:div {:class (stl/css :global/attr-value)}
[:span (str (:font-weight style))] [:& copy-button {:data (copy-style-data style :font-weight)}
[:& copy-button {:data (copy-style-data style :font-weight)}]]]) [:div {:class (stl/css :button-children)}
(str (:font-weight style))]]]])
(when (:line-height style) (when (:line-height style)
[:div {:class (stl/css :text-row)} [:div {:class (stl/css :text-row)}
[:div {:class (stl/css :global/attr-label)} [:div {:class (stl/css :global/attr-label)}
(tr "inspect.attributes.typography.line-height")] (tr "inspect.attributes.typography.line-height")]
[:div {:class (stl/css :global/attr-value)} [:div {:class (stl/css :global/attr-value)}
[:div (fmt/format-number (:line-height style))] [:& 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))]]]])
(when (:letter-spacing style) (when (:letter-spacing style)
[:div {:class (stl/css :text-row)} [:div {:class (stl/css :text-row)}
[:div {:class (stl/css :global/attr-label)} [:div {:class (stl/css :global/attr-label)}
(tr "inspect.attributes.typography.letter-spacing")] (tr "inspect.attributes.typography.letter-spacing")]
[:div {:class (stl/css :global/attr-value)} [:div {:class (stl/css :global/attr-value)}
[:div (fmt/format-pixels (:letter-spacing style))] [:& 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))]]]])
(when (:text-decoration style) (when (:text-decoration style)
[:div {:class (stl/css :text-row)} [:div {:class (stl/css :text-row)}
@ -141,8 +147,9 @@
;; inspect.attributes.typography.text-decoration.strikethrough ;; inspect.attributes.typography.text-decoration.strikethrough
;; inspect.attributes.typography.text-decoration.underline ;; inspect.attributes.typography.text-decoration.underline
[:div {:class (stl/css :global/attr-value)} [:div {:class (stl/css :global/attr-value)}
[:div (tr (dm/str "inspect.attributes.typography.text-decoration." (:text-decoration style)))] [:& 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)))]]]])
(when (:text-transform style) (when (:text-transform style)
[:div {:class (stl/css :text-row)} [:div {:class (stl/css :text-row)}
@ -155,8 +162,9 @@
;; inspect.attributes.typography.text-transform.uppercase ;; inspect.attributes.typography.text-transform.uppercase
;; inspect.attributes.typography.text-transform.unset ;; inspect.attributes.typography.text-transform.unset
[:div {:class (stl/css :global/attr-value)} [:div {:class (stl/css :global/attr-value)}
[:div (tr (dm/str "inspect.attributes.typography.text-transform." (:text-transform style)))] [:& 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) [:& copy-button {:data (str/trim text)
:class (stl/css :attributes-content-row)} :class (stl/css :attributes-content-row)}

3
frontend/src/app/main/ui/viewer/inspect/attributes/text.scss
View file

@ -19,6 +19,9 @@
:global(.attr-value) { :global(.attr-value) {
align-items: center; align-items: center;
} }
.button-children {
@extend .copy-button-children;
}
} }
.attributes-content-row { .attributes-content-row {
width: $s-252; width: $s-252;