mirror of
https://github.com/penpot/penpot.git
synced 2025-03-15 01:01:30 -05:00
💄 Update copy button to new UI in text attributes
This commit is contained in:
parent
5a9421a1e2
commit
b23ea27cb0
2 changed files with 30 additions and 19 deletions
|
@ -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)}
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Loading…
Add table
Reference in a new issue