Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-24 07:29:08 -05:00
Code Issues 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
Show stats Download patch file Download diff file Expand all files Collapse all files

3
frontend/resources/images/icons/text-direction-ltr.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 132.29 132.29">
<path d="M0 92.6V39.7l26.45 26.45zm111.13 39.7V14.1h21.16V0H75.86C44.94 0 26.5 15.82 26.5 42.32c0 24.4 15.69 39.73 42.32 42v47.97h14.1V14.11h14.11v118.18zM40.59 42.31c0-19.97 14.07-26.4 28.22-27.85v55.7c-14.15-1.44-28.22-7.88-28.22-27.85z" fill="#000"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 357 B

3
frontend/resources/images/icons/text-direction-rtl.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 132.29 132.29">
<path d="M132.3 39.69V92.6l-26.46-26.45zm-47.65 92.6V14.11h21.16V0H49.38C18.46 0 0 15.82 0 42.32c0 24.4 15.7 39.73 42.32 42v47.97h14.11V14.11h14.1v118.18zM14.1 42.32c0-19.97 14.06-26.4 28.21-27.85v55.7c-14.15-1.44-28.21-7.88-28.21-27.85z" fill="#000"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 356 B

15
frontend/resources/locales.json
View file

@ -5201,6 +5201,21 @@
},
"used-in" : [ "src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs" ]
},
"workspace.options.text-options.direction-rtl" : {
"translations" : {
"en" : "RTL",
"es" : "RTL"
}
},
"workspace.options.text-options.direction-ltr" : {
"translations" : {
"en" : "LTR",
"es" : "LTR"
}
},
"workspace.options.text-options.align-bottom" : {
"translations" : {
"de" : "Unten ausrichten",

7
frontend/resources/styles/main/partials/texts.scss
View file

@ -16,13 +16,6 @@ foreignObject {
}
.text-editor {
.public-DraftStyleDefault-rtl {
direction: rtl;
}
.public-DraftStyleDefault-ltr {
direction: ltr;
}
.DraftEditor-root {
height: 100%;
display: flex;

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