mirror of
https://github.com/penpot/penpot.git
synced 2025-07-11 18:57:19 +02:00
🎉 Add text-direction option on for text shape.
This commit is contained in:
parent
a988292253
commit
422f4ee6c2
8 changed files with 61 additions and 14 deletions
|
@ -113,6 +113,8 @@
|
|||
(def text-align-justify (icon-xref :text-align-justify))
|
||||
(def text-align-left (icon-xref :text-align-left))
|
||||
(def text-align-right (icon-xref :text-align-right))
|
||||
(def text-direction-ltr (icon-xref :text-direction-ltr))
|
||||
(def text-direction-rtl (icon-xref :text-direction-rtl))
|
||||
(def titlecase (icon-xref :titlecase))
|
||||
(def toggle (icon-xref :toggle))
|
||||
(def trash (icon-xref :trash))
|
||||
|
|
|
@ -58,8 +58,9 @@
|
|||
(let [node (obj/get props "node")
|
||||
shape (obj/get props "shape")
|
||||
children (obj/get props "children")
|
||||
style (sts/generate-paragraph-styles shape node)]
|
||||
[:p.paragraph {:style style :dir "auto"} children]))
|
||||
style (sts/generate-paragraph-styles shape node)
|
||||
dir (:text-direction node "auto")]
|
||||
[:p.paragraph {:style style :dir dir} children]))
|
||||
|
||||
;; -- Text nodes
|
||||
(mf/defc render-node
|
||||
|
|
|
@ -49,10 +49,13 @@
|
|||
[props]
|
||||
(let [children (obj/get props "children")
|
||||
bprops (obj/get props "blockProps")
|
||||
data (obj/get bprops "data")
|
||||
style (sts/generate-paragraph-styles (obj/get bprops "shape")
|
||||
(obj/get bprops "data"))]
|
||||
(obj/get bprops "data"))
|
||||
dir (:text-direction data "auto")]
|
||||
|
||||
[:div {:style style :dir "auto"}
|
||||
|
||||
[:div {:style style :dir dir}
|
||||
[:> draft/EditorBlock props]]))
|
||||
|
||||
(mf/defc selection-component
|
||||
|
|
|
@ -48,6 +48,9 @@
|
|||
(def text-align-attrs
|
||||
[:text-align])
|
||||
|
||||
(def text-direction-attrs
|
||||
[:text-direction])
|
||||
|
||||
(def text-spacing-attrs
|
||||
[:line-height
|
||||
:letter-spacing])
|
||||
|
@ -68,7 +71,8 @@
|
|||
(d/concat text-valign-attrs text-align-attrs))
|
||||
|
||||
(def paragraph-attrs
|
||||
text-align-attrs)
|
||||
(d/concat text-align-attrs
|
||||
text-direction-attrs))
|
||||
|
||||
(def text-attrs
|
||||
(d/concat text-typography-attrs
|
||||
|
@ -109,6 +113,24 @@
|
|||
:on-click #(handle-change % "justify")}
|
||||
i/text-align-justify]]))
|
||||
|
||||
(mf/defc text-direction-options
|
||||
[{:keys [ids values on-change] :as props}]
|
||||
(let [direction (:text-direction values)
|
||||
handle-change (fn [event val]
|
||||
(on-change {:text-direction val}))]
|
||||
;; --- Align
|
||||
[:div.align-icons
|
||||
[:span.tooltip.tooltip-bottom
|
||||
{:alt (tr "workspace.options.text-options.direction-ltr")
|
||||
:class (dom/classnames :current (= "ltr" direction))
|
||||
:on-click #(handle-change % "ltr")}
|
||||
i/text-direction-ltr]
|
||||
[:span.tooltip.tooltip-bottom
|
||||
{:alt (tr "workspace.options.text-options.direction-rtl")
|
||||
:class (dom/classnames :current (= "rtl" direction))
|
||||
:on-click #(handle-change % "rtl")}
|
||||
i/text-direction-rtl]]))
|
||||
|
||||
|
||||
(mf/defc vertical-align
|
||||
[{:keys [shapes ids values on-change] :as props}]
|
||||
|
@ -293,6 +315,11 @@
|
|||
[:> vertical-align opts]]
|
||||
|
||||
[:div.row-flex
|
||||
[:> grow-options opts]
|
||||
[:> text-decoration-options opts]]]]))
|
||||
[:> text-decoration-options opts]
|
||||
[:> text-direction-options opts]]
|
||||
|
||||
[:div.row-flex
|
||||
[:> grow-options opts]
|
||||
[:div.align-icons]]]]))
|
||||
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue