From 8f5c66c2d556e093ce67b55e2ce275249285eb5e Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Tue, 27 Oct 2026 16:59:11 +0000 Subject: [PATCH] :bug: Move distributed alignment to the language layout sections MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The fifth alignment button made the first row of the text options 36px wider than the sidebar grid: the options button fell outside it and the panel scrolled sideways. Distributed alignment is an East Asian convention (均等割り付け, 分散对齐, 배분 정렬), so it moves out of the alignment group into a switch of the Japanese, Chinese and Korean layout sections, shown when the text's language matches. Turning it off aligns the text to the start. The label shortens to fit beside the switch. AI-assisted-by: claude-opus-5-5 --- .../workspace/sidebar/options/menus/text.cljs | 6 +---- .../options/menus/text_language_layout.cljs | 22 +++++++++++++++++++ .../options/menus/text_language_layout.scss | 9 ++++++++ .../frontend_tests/ui/text_options_test.cljs | 20 ++++++++++++----- frontend/translations/en.po | 4 ++-- frontend/translations/es.po | 4 ++-- 6 files changed, 50 insertions(+), 15 deletions(-) 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"