diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.cljs index 2a2f4aeec4..7e1398899a 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.cljs @@ -84,11 +84,7 @@ {:value "justify" :id "text-align-justify" :label (tr "workspace.options.text-options.text-align-justify") - :icon (if vertical? i/text-justify-vertical i/text-justify)} - {:value "distribute" - :id "text-align-distribute" - :label (tr "workspace.options.text-options.text-align-distribute") - :icon (if vertical? i/distribute-vertical-spacing i/distribute-horizontally)}]) + :icon (if vertical? i/text-justify-vertical i/text-justify)}]) handle-change (mf/use-fn diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/text_language_layout.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/text_language_layout.cljs index 580d1977b8..48da22222b 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/text_language_layout.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/text_language_layout.cljs @@ -9,6 +9,8 @@ (:require [app.common.types.text.cjk-layout :as cjk] [app.main.ui.ds.controls.select :refer [select*]] + [app.main.ui.ds.controls.switch :refer [switch*]] + [app.main.ui.workspace.sidebar.options.common :refer [radio-selected]] [app.main.ui.workspace.sidebar.options.menus.text-japanese-layout :as tjl] [app.util.i18n :refer [tr]] [app.util.text.layout :as tl] @@ -130,6 +132,24 @@ (mf/spread-props props {:values ruby-values :on-change on-ruby-presentation-change})]))])])) +(mf/defc distribute-option* + "Distributed alignment (均等割り付け, 分散对齐, 배분 정렬): spreads the + characters of every line over the box. Turning it off aligns the text to + the start." + [{:keys [values on-change on-blur]}] + (let [label (tr "workspace.options.text-options.text-align-distribute") + handle-change + (mf/use-fn + (mf/deps on-change on-blur) + (fn [checked?] + (on-change {:text-align (if checked? "distribute" "left")}) + (when (some? on-blur) (on-blur))))] + [:div {:class (stl/css :distribute-option)} + [:span {:class (stl/css :option-label)} label] + [:> switch* {:default-checked (= "distribute" (radio-selected (:text-align values))) + :aria-label label + :on-change handle-change}]])) + (mf/defc language-layout-options* [{:keys [language values ruby-values text-selection-active reading-selection-active zhuyin-selection-active on-change on-ruby-presentation-change on-blur]}] @@ -149,6 +169,8 @@ :aria-label (tr "workspace.options.text-options.language-profile") :options options :on-change handle-profile-change}]] + (when matches? + [:> distribute-option* props]) (if (and (= :japanese language) matches?) [:> tjl/japanese-layout-options* (mf/spread-props props {:ruby-values ruby-values diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/text_language_layout.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/text_language_layout.scss index c67f55971c..7532d913ed 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/text_language_layout.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/text_language_layout.scss @@ -5,6 +5,7 @@ // Copyright (c) KALEIDOS INC Sucursal en España SL @use "ds/typography.scss" as t; +@use "ds/_sizes.scss" as *; .language-layout-options { display: flex; @@ -20,6 +21,14 @@ gap: var(--sp-s); } +.distribute-option { + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--sp-s); + min-block-size: $sz-32; +} + .option-label { @include t.use-typography("body-small"); diff --git a/frontend/test/frontend_tests/ui/text_options_test.cljs b/frontend/test/frontend_tests/ui/text_options_test.cljs index a4822b9876..2071f0b174 100644 --- a/frontend/test/frontend_tests/ui/text_options_test.cljs +++ b/frontend/test/frontend_tests/ui/text_options_test.cljs @@ -406,17 +406,25 @@ (t/deftest vertical-paragraph-alignment-shows-top-middle-bottom-and-vertical-justify (let [markup (alignment-markup text-menu/text-align-options* "vertical-rl" true)] - (t/is (= ["text-align-top" "text-align-middle" "text-align-bottom" "text-justify-vertical" "distribute-vertical-spacing"] + (t/is (= ["text-align-top" "text-align-middle" "text-align-bottom" "text-justify-vertical"] (alignment-icons markup))) (t/is (= ["workspace.options.text-options.align-top" "workspace.options.text-options.align-middle" "workspace.options.text-options.align-bottom" - "workspace.options.text-options.text-align-justify" - "workspace.options.text-options.text-align-distribute"] + "workspace.options.text-options.text-align-justify"] (alignment-labels markup))) - (t/is (= ["left" "center" "right" "justify" "distribute"] + (t/is (= ["left" "center" "right" "justify"] (mapv second (re-seq #"value=\"([^\"]+)\"" markup)))))) +(t/deftest distributed-alignment-is-a-switch-of-the-language-layout + (let [markup #(alignment-markup tll/distribute-option* "horizontal-tb" true {:text-align %}) + checked #(second (re-find #"aria-checked=\"([^\"]+)\"" %))] + (t/is (= ["workspace.options.text-options.text-align-distribute"] + (alignment-labels (markup "left")))) + (t/is (= "true" (checked (markup "distribute")))) + (t/is (= "false" (checked (markup "left")))) + (t/is (= "false" (checked (markup :multiple)))))) + (t/deftest vertical-column-block-alignment-shows-right-center-and-left (let [markup (alignment-markup text-menu/vertical-align* "vertical-rl" true)] (t/is (= ["text-right" "text-horizontal-center" "text-left"] @@ -432,14 +440,14 @@ (doseq [writing-mode [nil "horizontal-tb" :multiple]] (let [paragraph (alignment-markup text-menu/text-align-options* writing-mode true) block (alignment-markup text-menu/vertical-align* writing-mode true)] - (t/is (= ["text-align-left" "text-align-center" "text-align-right" "text-justify" "distribute-horizontally"] + (t/is (= ["text-align-left" "text-align-center" "text-align-right" "text-justify"] (alignment-icons paragraph))) (t/is (= ["text-top" "text-middle" "text-bottom"] (alignment-icons block)))))) (t/deftest svg-renderer-keeps-horizontal-alignment-for-stored-vertical-text (let [paragraph (alignment-markup text-menu/text-align-options* "vertical-rl" false) block (alignment-markup text-menu/vertical-align* "vertical-rl" false)] - (t/is (= ["text-align-left" "text-align-center" "text-align-right" "text-justify" "distribute-horizontally"] + (t/is (= ["text-align-left" "text-align-center" "text-align-right" "text-justify"] (alignment-icons paragraph))) (t/is (= ["text-top" "text-middle" "text-bottom"] (alignment-icons block))) (t/is (= "workspace.options.text-options.text-align-left" (first (alignment-labels paragraph)))) diff --git a/frontend/translations/en.po b/frontend/translations/en.po index 5f5ce84851..a917d49325 100644 --- a/frontend/translations/en.po +++ b/frontend/translations/en.po @@ -8311,9 +8311,9 @@ msgstr "Strikethrough (%s)" msgid "workspace.options.text-options.text-align-center" msgstr "Align center" -#: src/app/main/ui/workspace/sidebar/options/menus/text.cljs:77 +#: src/app/main/ui/workspace/sidebar/options/menus/text_language_layout.cljs msgid "workspace.options.text-options.text-align-distribute" -msgstr "Distribute characters on every line" +msgstr "Distribute characters" #: src/app/main/ui/workspace/sidebar/options/menus/text.cljs msgid "workspace.options.text-options.text-align-justify" diff --git a/frontend/translations/es.po b/frontend/translations/es.po index b27c910161..4e7328a7af 100644 --- a/frontend/translations/es.po +++ b/frontend/translations/es.po @@ -8259,9 +8259,9 @@ msgstr "Tachado (%s)" msgid "workspace.options.text-options.text-align-center" msgstr "Alinear al centro" -#: src/app/main/ui/workspace/sidebar/options/menus/text.cljs:77 +#: src/app/main/ui/workspace/sidebar/options/menus/text_language_layout.cljs msgid "workspace.options.text-options.text-align-distribute" -msgstr "Distribuir caracteres en todas las líneas" +msgstr "Distribuir caracteres" #: src/app/main/ui/workspace/sidebar/options/menus/text.cljs msgid "workspace.options.text-options.text-align-justify"