3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-07-11 18:57:19 +02:00
Code Issues Projects Releases Packages Wiki Activity

🎉 Add text-direction option on for text shape.

Browse source
This commit is contained in:
Andrey Antukh 2021-03-22 15:20:35 +01:00 • committed by Alonso Torres
parent a988292253
commit 422f4ee6c2
8 changed files with 61 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/app/main/ui/icons.cljs
View file

@ -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))

5
frontend/src/app/main/ui/shapes/text.cljs
View file

@ -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

7
frontend/src/app/main/ui/workspace/shapes/text/editor.cljs
View file

@ -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

33
frontend/src/app/main/ui/workspace/sidebar/options/menus/text.cljs
View file

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