diff --git a/common/src/app/common/types/text.cljc b/common/src/app/common/types/text.cljc index 7def038383..fbeb80695c 100644 --- a/common/src/app/common/types/text.cljc +++ b/common/src/app/common/types/text.cljc @@ -146,6 +146,11 @@ "Older paragraphs have no list attrs; read them as no list." {:list-style-type "none"}) +(defn list-paragraph? + "True when a paragraph (or its merged style map) is a list item." + [node] + (= "disc" (:list-style-type node))) + (def default-text-attrs {:typography-ref-file nil :typography-ref-id nil diff --git a/common/test/common_tests/types/text_test.cljc b/common/test/common_tests/types/text_test.cljc index ace36f0c4d..e0027b7b16 100644 --- a/common/test/common_tests/types/text_test.cljc +++ b/common/test/common_tests/types/text_test.cljc @@ -368,3 +368,8 @@ (t/is (every? #(= % "14") original-font-sizes)) (t/is (every? #(= % "32") updated-font-sizes)))) + +(t/deftest test-list-paragraph + (t/is (true? (cttx/list-paragraph? {:type "paragraph" :list-style-type "disc"}))) + (t/is (false? (cttx/list-paragraph? {:type "paragraph" :list-style-type "none"}))) + (t/is (false? (cttx/list-paragraph? {:type "paragraph"})))) diff --git a/frontend/src/app/main/ui/inspect/attributes/text.cljs b/frontend/src/app/main/ui/inspect/attributes/text.cljs index 51cf288266..ea1d5e4f30 100644 --- a/frontend/src/app/main/ui/inspect/attributes/text.cljs +++ b/frontend/src/app/main/ui/inspect/attributes/text.cljs @@ -129,6 +129,14 @@ "uppercase" (tr "inspect.attributes.typography.text-transform.uppercase") "unset" (tr "inspect.attributes.typography.text-transform.unset"))]]]]) + (when (types.text/list-paragraph? style) + [:div {:class (stl/css :text-row)} + [:div {:class (stl/css :global/attr-label)} "List Style"] + [:div {:class (stl/css :global/attr-value)} + [:> copy-button* {:data (copy-style-data style :list-style-type)} + [:div {:class (stl/css :button-children)} + (tr "inspect.attributes.typography.list-style-type.disc")]]]]) + [:> copy-button* {:data (str/trim text) :class (stl/css :attributes-content-row)} [:span {:class (stl/css :content) diff --git a/frontend/src/app/main/ui/inspect/styles/panels/text.cljs b/frontend/src/app/main/ui/inspect/styles/panels/text.cljs index f68c764913..a2491d78f7 100644 --- a/frontend/src/app/main/ui/inspect/styles/panels/text.cljs +++ b/frontend/src/app/main/ui/inspect/styles/panels/text.cljs @@ -180,6 +180,12 @@ :property (str "text-transform: " (:text-transform style) ";") :copiable true}])) + (when (txt/list-paragraph? style) + [:> properties-row* {:term "List Style" + :detail (:list-style-type style) + :property (str "list-style-type: " (:list-style-type style) ";") + :copiable true}]) + [:pre {:class (stl/css :text-content-wrapper) :role "presentation"} [:> property-detail-copiable* {:copied copied diff --git a/frontend/test/frontend_tests/runner.cljs b/frontend/test/frontend_tests/runner.cljs index bdc9193088..b1e66d687e 100644 --- a/frontend/test/frontend_tests/runner.cljs +++ b/frontend/test/frontend_tests/runner.cljs @@ -129,6 +129,7 @@ [frontend-tests.ui.history-test] [frontend-tests.ui.inspect-geometry-test] [frontend-tests.ui.inspect-stroke-tokens-test] + [frontend-tests.ui.inspect-text-list-test] [frontend-tests.ui.jobs-progress-test] [frontend-tests.ui.layout-container-multiple-test] [frontend-tests.ui.mcp-authorize-test] @@ -298,6 +299,7 @@ 'frontend-tests.ui.history-test 'frontend-tests.ui.inspect-geometry-test 'frontend-tests.ui.inspect-stroke-tokens-test + 'frontend-tests.ui.inspect-text-list-test 'frontend-tests.ui.jobs-progress-test 'frontend-tests.ui.layout-container-multiple-test 'frontend-tests.ui.measurements-test diff --git a/frontend/test/frontend_tests/ui/inspect_text_list_test.cljs b/frontend/test/frontend_tests/ui/inspect_text_list_test.cljs new file mode 100644 index 0000000000..067ee6f178 --- /dev/null +++ b/frontend/test/frontend_tests/ui/inspect_text_list_test.cljs @@ -0,0 +1,61 @@ +;; This Source Code Form is subject to the terms of the Mozilla Public +;; License, v. 2.0. If a copy of the MPL was not distributed with this +;; file, You can obtain one at http://mozilla.org/MPL/2.0/. +;; +;; Copyright (c) KALEIDOS SUBSIDIARY SL + +(ns frontend-tests.ui.inspect-text-list-test + (:require + ["react-dom/server" :as rds] + [app.common.uuid :as uuid] + [app.config :as cf] + [app.main.ui.hooks :as hooks] + [app.main.ui.inspect.attributes.text :as attributes-text] + [app.main.ui.inspect.styles.panels.text :as styles-text] + [cljs.test :as t :include-macros true] + [cuerdas.core :as str] + [frontend-tests.helpers.mock :as mock] + [rumext.v2 :as mf])) + +(defn- text-shape + [paragraph-attrs] + {:id (uuid/next) + :type :text + :content {:type "root" + :children [{:type "paragraph-set" + :children [(merge {:type "paragraph" + :children [{:text "Item" + :font-id "sourcesanspro" + :font-family "sourcesanspro" + :font-size "14"}]} + paragraph-attrs)]}]}}) + +(defn- render-panel + [panel shapes] + (rds/renderToStaticMarkup + (mf/element panel + #js {:shapes shapes + :resolvedTokens {} + :colorSpace "hex" + :onFontShorthand identity}))) + +(t/deftest text-panels-show-the-list-style + (with-redefs [cf/flags (conj cf/flags :inspect-styles) + hooks/use-portal-container (mock/stub (fn [_] nil))] + (let [shapes [(text-shape {:list-style-type "disc"})]] + (t/testing "styles tab" + (let [markup (render-panel styles-text/text-panel* shapes)] + (t/is (str/includes? markup "List Style")) + (t/is (str/includes? markup ">disc<")))) + (t/testing "computed tab" + (let [markup (render-panel attributes-text/text-panel* shapes)] + (t/is (str/includes? markup "List Style")) + (t/is (str/includes? markup "inspect.attributes.typography.list-style-type.disc"))))))) + +(t/deftest text-panels-hide-the-list-style-without-a-list + (with-redefs [cf/flags (conj cf/flags :inspect-styles) + hooks/use-portal-container (mock/stub (fn [_] nil))] + (doseq [paragraph-attrs [{} {:list-style-type "none"}] + panel [styles-text/text-panel* attributes-text/text-panel*]] + (let [markup (render-panel panel [(text-shape paragraph-attrs)])] + (t/is (not (str/includes? markup "List Style"))))))) diff --git a/frontend/translations/en.po b/frontend/translations/en.po index a1a4afed2b..820d7334ca 100644 --- a/frontend/translations/en.po +++ b/frontend/translations/en.po @@ -2245,6 +2245,10 @@ msgstr "Letter Spacing" msgid "inspect.attributes.typography.line-height" msgstr "Line Height" +#: src/app/main/ui/inspect/attributes/text.cljs:138 +msgid "inspect.attributes.typography.list-style-type.disc" +msgstr "Disc" + #: src/app/main/ui/workspace/sidebar/options/menus/typography.cljs:594 msgid "inspect.attributes.typography.mixed-font-family" msgstr "Mixed Font Families" diff --git a/frontend/translations/es.po b/frontend/translations/es.po index 2b92c4aca5..fa5b7f14d2 100644 --- a/frontend/translations/es.po +++ b/frontend/translations/es.po @@ -2281,6 +2281,10 @@ msgstr "Espaciado de letras" msgid "inspect.attributes.typography.line-height" msgstr "Interlineado" +#: src/app/main/ui/inspect/attributes/text.cljs:138 +msgid "inspect.attributes.typography.list-style-type.disc" +msgstr "Disco" + #: src/app/main/ui/workspace/sidebar/options/menus/typography.cljs:594 msgid "inspect.attributes.typography.mixed-font-family" msgstr "Varias Familias tipográficas"