From 07e3f581d34eba3657cbfcc5a72c7e59810dd067 Mon Sep 17 00:00:00 2001 From: Florian Schroedl Date: Wed, 4 Dec 2024 16:58:43 +0100 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Display=20active=20state=20of=20chi?= =?UTF-8?q?ldren=20checkmark=20next=20to=20set=20groups?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- common/src/app/common/types/tokens_lib.cljc | 6 +- .../common_tests/types/tokens_lib_test.cljc | 4 +- frontend/src/app/main/refs.cljs | 8 +++ .../app/main/ui/workspace/tokens/sets.cljs | 63 ++++++++++++++----- 4 files changed, 60 insertions(+), 21 deletions(-) diff --git a/common/src/app/common/types/tokens_lib.cljc b/common/src/app/common/types/tokens_lib.cljc index 54dea7616..7495ccac2 100644 --- a/common/src/app/common/types/tokens_lib.cljc +++ b/common/src/app/common/types/tokens_lib.cljc @@ -875,16 +875,16 @@ Will return a value that matches this schema: (mapcat :sets) (get-active-themes this))) - (sets-at-path-all-active? [this prefix-path] + (sets-at-path-all-active? [this prefixed-path] (let [active-set-names (get-active-themes-set-names this)] (if (seq active-set-names) - (let [path-active-set-names (->> (get-sets-at-prefix-path this prefix-path) + (let [path-active-set-names (->> (get-sets-at-prefix-path this prefixed-path) (map :name) (into #{})) difference (set/difference path-active-set-names active-set-names)] (if (empty? difference) :all - difference)) + :partial)) :none))) (get-active-themes-set-tokens [this] diff --git a/common/test/common_tests/types/tokens_lib_test.cljc b/common/test/common_tests/types/tokens_lib_test.cljc index c9dff8dd7..96f124772 100644 --- a/common/test/common_tests/types/tokens_lib_test.cljc +++ b/common/test/common_tests/types/tokens_lib_test.cljc @@ -425,9 +425,7 @@ (ctob/sets-at-path-all-active? "G-foo"))] (t/is (= :none expected-none)) (t/is (= :all expected-all)) - (t/is (= #{"foo/bar/baz"} expected-partial)) - expected-partial)) - nil) + (t/is (= :partial expected-partial))))) (t/deftest token-theme-in-a-lib (t/testing "add-token-theme" diff --git a/frontend/src/app/main/refs.cljs b/frontend/src/app/main/refs.cljs index 16ebf7a76..dce5e7463 100644 --- a/frontend/src/app/main/refs.cljs +++ b/frontend/src/app/main/refs.cljs @@ -502,6 +502,14 @@ (def workspace-active-theme-paths (l/derived (d/nilf ctob/get-active-theme-paths) tokens-lib)) +(defn token-sets-at-path-all-active? + [prefixed-path] + (l/derived + (fn [lib] + (when lib + (ctob/sets-at-path-all-active? lib prefixed-path))) + tokens-lib)) + (def workspace-active-theme-paths-no-hidden (l/derived #(disj % ctob/hidden-token-theme-path) workspace-active-theme-paths)) diff --git a/frontend/src/app/main/ui/workspace/tokens/sets.cljs b/frontend/src/app/main/ui/workspace/tokens/sets.cljs index 145cd2f95..aa8e72d0c 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sets.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/sets.cljs @@ -59,9 +59,22 @@ :auto-focus true :default-value default-value}])) +(mf/defc checkbox + [{:keys [on-click active? aria-label icon]}] + [:button {:type "button" + :on-click on-click + :class (stl/css-case :checkbox-style true + :checkbox-checked-style active?)} + (when active? + [:> icon* {:aria-label aria-label + :class (stl/css :check-icon) + :size "s" + :id (or icon ic/tick)}])]) + (mf/defc sets-tree-set-group - [{:keys [label tree-depth tree-path selected? collapsed? editing? on-edit on-edit-reset on-edit-submit]}] + [{:keys [active? label tree-depth tree-path selected? collapsed? editing? on-edit on-edit-reset on-edit-submit]}] (let [editing?' (editing? tree-path) + active?' (active? tree-path) on-context-menu (mf/use-fn (mf/deps editing? tree-path) @@ -97,9 +110,14 @@ :on-create on-edit-reset ;; TODO Implement set group renaming :on-submit (constantly nil)}] - [:div {:class (stl/css :set-name) - :on-double-click #(on-edit tree-path)} - label])])) + [:* + [:div {:class (stl/css :set-name) + :on-double-click #(on-edit tree-path)} + label] + [:& checkbox + {:active? (not= :none active?') + :icon (when (= active?' :partial) ic/remove) + :arial-label (tr "workspace.token.select-set")}]])])) (mf/defc sets-tree-set [{:keys [set label tree-depth tree-path selected? on-select active? on-toggle editing? on-edit on-edit-reset on-edit-submit]}] @@ -150,18 +168,25 @@ [:div {:class (stl/css :set-name) :on-double-click #(on-edit tree-path)} label] - [:button {:type "button" - :on-click on-checkbox-click - :class (stl/css-case :checkbox-style true - :checkbox-checked-style active?')} - (when active?' - [:> icon* {:aria-label (tr "workspace.token.select-set") - :class (stl/css :check-icon) - :size "s" - :id ic/tick}])]])])) + [:& checkbox + {:on-click on-checkbox-click + :arial-label (tr "workspace.token.select-set") + :active? active?'}]])])) (mf/defc sets-tree - [{:keys [set-path set-node tree-depth tree-path on-select selected? on-toggle active? editing? on-edit on-edit-reset on-edit-submit] + [{:keys [active? + group-active? + editing? + on-edit + on-edit-reset + on-edit-submit + on-select + on-toggle + selected? + set-node + set-path + tree-depth + tree-path] :or {tree-depth 0} :as props}] (let [[set-path-prefix set-fname] (some-> set-path (ctob/split-set-str-path-prefix)) @@ -192,6 +217,7 @@ set-group? [:& sets-tree-set-group {:selected? (selected? tree-path) + :active? group-active? :on-select on-select :label set-fname :collapsed? collapsed? @@ -214,6 +240,7 @@ :selected? selected? :on-toggle on-toggle :active? active? + :group-active? group-active? :editing? editing? :on-edit on-edit :on-edit-reset on-edit-reset @@ -224,6 +251,7 @@ on-update-token-set token-set-selected? token-set-active? + token-set-group-active? on-create-token-set on-toggle-token-set origin @@ -247,6 +275,7 @@ :selected? token-set-selected? :on-select on-select :active? token-set-active? + :group-active? token-set-group-active? :on-toggle on-toggle-token-set :editing? editing? :on-edit on-edit @@ -276,11 +305,15 @@ token-set-active? (mf/use-fn (mf/deps active-token-set-names) (fn [set-name] - (get active-token-set-names set-name)))] + (get active-token-set-names set-name))) + token-set-group-active? (mf/use-fn + (fn [prefixed-path] + @(refs/token-sets-at-path-all-active? prefixed-path)))] [:& controlled-sets-list {:token-sets token-sets :token-set-selected? token-set-selected? :token-set-active? token-set-active? + :token-set-group-active? token-set-group-active? :on-select on-select-token-set-click :origin "set-panel" :on-toggle-token-set on-toggle-token-set-click