From 9c7e15f43f9fb6e8601dd72237e896f173c5450c Mon Sep 17 00:00:00 2001 From: Florian Schroedl Date: Thu, 28 Nov 2024 09:09:56 +0100 Subject: [PATCH 01/12] =?UTF-8?q?=F0=9F=92=84=20Disable=20group=20selectio?= =?UTF-8?q?n?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/app/main/ui/workspace/tokens/sets.cljs | 15 ++++----------- .../src/app/main/ui/workspace/tokens/sets.scss | 8 ++++++++ 2 files changed, 12 insertions(+), 11 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/tokens/sets.cljs b/frontend/src/app/main/ui/workspace/tokens/sets.cljs index bf7f42c8ca..9e70302a19 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sets.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/sets.cljs @@ -60,16 +60,8 @@ :default-value default-value}])) (mf/defc sets-tree-set-group - [{:keys [label tree-depth tree-path selected? collapsed? on-select editing? on-edit on-edit-reset on-edit-submit]}] + [{:keys [label tree-depth tree-path selected? collapsed? editing? on-edit on-edit-reset on-edit-submit]}] (let [editing?' (editing? tree-path) - on-click - (mf/use-fn - (mf/deps editing? tree-path) - (fn [event] - (dom/stop-propagation event) - (when-not (editing? tree-path) - (on-select tree-path)))) - on-context-menu (mf/use-fn (mf/deps editing? tree-path) @@ -86,12 +78,13 @@ :data-testid "tokens-set-group-item" :style {"--tree-depth" tree-depth} :class (stl/css-case :set-item-container true + :set-item-group true :selected-set selected?) - :on-click on-click :on-context-menu on-context-menu :on-double-click #(on-edit tree-path)} [:> icon-button* - {:on-click (fn [event] + {:class (stl/css :set-item-group-collapse-button) + :on-click (fn [event] (.stopPropagation event) (swap! collapsed? not)) :aria-label (tr "labels.collapse") diff --git a/frontend/src/app/main/ui/workspace/tokens/sets.scss b/frontend/src/app/main/ui/workspace/tokens/sets.scss index 10c7c83f04..a0a84192fa 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sets.scss +++ b/frontend/src/app/main/ui/workspace/tokens/sets.scss @@ -34,6 +34,14 @@ } } +.set-item-group { + cursor: unset; +} + +.set-item-group-collapse-button { + cursor: pointer; +} + .set-name { @include textEllipsis; flex-grow: 1; From a0b2b4c55fdfc3d702bac750659190e826e24a5a Mon Sep 17 00:00:00 2001 From: Florian Schroedl Date: Thu, 28 Nov 2024 09:11:53 +0100 Subject: [PATCH 02/12] =?UTF-8?q?=F0=9F=92=84=20Remove=20folder=20icon?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/app/main/ui/workspace/tokens/sets.cljs | 3 --- 1 file changed, 3 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/tokens/sets.cljs b/frontend/src/app/main/ui/workspace/tokens/sets.cljs index 9e70302a19..af794ffbe0 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sets.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/sets.cljs @@ -90,9 +90,6 @@ :aria-label (tr "labels.collapse") :icon (if @collapsed? "arrow-right" "arrow-down") :variant "action"}] - [:> icon* - {:id "group" - :class (stl/css :icon)}] (if editing?' [:& editing-label {:default-value label From 27d0f0a7bc0ed972e87525cec39b40dbe7ad58d5 Mon Sep 17 00:00:00 2001 From: Florian Schroedl Date: Thu, 28 Nov 2024 09:16:38 +0100 Subject: [PATCH 03/12] =?UTF-8?q?=F0=9F=90=9B=20Fix=20collapse=20button=20?= =?UTF-8?q?triggering=20rename?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/app/main/ui/workspace/tokens/sets.cljs | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/tokens/sets.cljs b/frontend/src/app/main/ui/workspace/tokens/sets.cljs index af794ffbe0..2653076448 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sets.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/sets.cljs @@ -80,8 +80,7 @@ :class (stl/css-case :set-item-container true :set-item-group true :selected-set selected?) - :on-context-menu on-context-menu - :on-double-click #(on-edit tree-path)} + :on-context-menu on-context-menu} [:> icon-button* {:class (stl/css :set-item-group-collapse-button) :on-click (fn [event] @@ -96,7 +95,9 @@ :on-cancel on-edit-reset :on-create on-edit-reset :on-submit #(on-edit-submit)}] - [:div {:class (stl/css :set-name)} label])])) + [:div {:class (stl/css :set-name) + :on-double-click #(on-edit tree-path)} + label])])) (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]}] @@ -131,7 +132,6 @@ :class (stl/css-case :set-item-container true :selected-set selected?) :on-click on-click - :on-double-click #(on-edit tree-path) :on-context-menu on-context-menu :aria-checked active?'} [:> icon* @@ -145,9 +145,13 @@ :on-create on-edit-reset :on-submit #(on-edit-submit set-name (ctob/update-name set %))}] [:* - [:div {:class (stl/css :set-name)} label] - [:button {:on-click on-click - :type "button" + [:div {:class (stl/css :set-name) + :on-double-click #(on-edit tree-path)} + label] + [:button {:type "button" + :on-click (fn [event] + (dom/stop-propagation event) + (on-toggle set-name)) :class (stl/css-case :checkbox-style true :checkbox-checked-style active?')} (when active?' From 42ee08445b56f9da70b0c622fa1927961fdd719a Mon Sep 17 00:00:00 2001 From: Florian Schroedl Date: Thu, 28 Nov 2024 09:24:16 +0100 Subject: [PATCH 04/12] =?UTF-8?q?=20=F0=9F=92=84=20Make=20sets=20section?= =?UTF-8?q?=20not=20collapsable=20anymore?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/app/main/ui/workspace/tokens/sidebar.cljs | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs index 4818ff8792..be90c259f0 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs @@ -245,11 +245,7 @@ [:div {:class (stl/css :sets-sidebar)} [:& themes-header] [:div {:class (stl/css :sidebar-header)} - [:& title-bar {:collapsable true - :collapsed (not @open?) - :all-clickable true - :title (tr "labels.sets") - :on-collapsed #(swap! open? not)} + [:& title-bar {:title (tr "labels.sets")} [:& add-set-button {:on-open on-open :style "header"}]]] [:& theme-sets-list {:on-open on-open}]]]])) From 384616c9a80bd37781fa382fd9de067c60a0b8b3 Mon Sep 17 00:00:00 2001 From: Florian Schroedl Date: Thu, 28 Nov 2024 09:32:11 +0100 Subject: [PATCH 05/12] =?UTF-8?q?=E2=99=BB=20Rename=20to=20match=20ITokenS?= =?UTF-8?q?et=20glossary?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/app/main/ui/workspace/tokens/sets.cljs | 5 ++--- .../app/main/ui/workspace/tokens/sets_context_menu.cljs | 8 ++++---- 2 files changed, 6 insertions(+), 7 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/tokens/sets.cljs b/frontend/src/app/main/ui/workspace/tokens/sets.cljs index 2653076448..fc969bdbea 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sets.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/sets.cljs @@ -72,7 +72,7 @@ (st/emit! (wdt/show-token-set-context-menu {:position (dom/get-client-position event) - :tree-path tree-path})))))] + :prefixed-set-path tree-path})))))] [:div {;; :ref dref :role "button" :data-testid "tokens-set-group-item" @@ -123,8 +123,7 @@ (st/emit! (wdt/show-token-set-context-menu {:position (dom/get-client-position event) - :tree-path tree-path})))))] - + :prefixed-set-path tree-path})))))] [:div {;; :ref dref :role "button" :data-testid "tokens-set-item" diff --git a/frontend/src/app/main/ui/workspace/tokens/sets_context_menu.cljs b/frontend/src/app/main/ui/workspace/tokens/sets_context_menu.cljs index 4fb37428a1..426232a97c 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sets_context_menu.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/sets_context_menu.cljs @@ -35,10 +35,10 @@ [:span {:class (stl/css :title)} title]]) (mf/defc menu - [{:keys [tree-path]}] + [{:keys [prefixed-set-path]}] (let [{:keys [on-edit]} (sets-context/use-context) - edit-name (mf/use-fn #(on-edit tree-path)) - delete-set (mf/use-fn #(st/emit! (wdt/delete-token-set-path tree-path)))] + edit-name (mf/use-fn #(on-edit prefixed-set-path)) + delete-set (mf/use-fn #(st/emit! (wdt/delete-token-set-path prefixed-set-path)))] [:ul {:class (stl/css :context-list)} [:& menu-entry {:title (tr "labels.rename") :on-click edit-name}] [:& menu-entry {:title (tr "labels.delete") :on-click delete-set}]])) @@ -61,4 +61,4 @@ :ref dropdown-ref :style {:top top :left left} :on-context-menu prevent-default} - [:& menu {:tree-path (:tree-path mdata)}]]])) + [:& menu {:prefixed-set-path (:prefixed-set-path mdata)}]]])) From c9414824a59e85ea51563d2d73b2b476aa6714d0 Mon Sep 17 00:00:00 2001 From: Florian Schroedl Date: Thu, 28 Nov 2024 09:46:21 +0100 Subject: [PATCH 06/12] =?UTF-8?q?=E2=99=BB=20Remove=20unused=20token=20fil?= =?UTF-8?q?es?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- common/src/app/common/types/tokens_list.cljc | 49 ------------ .../app/common/types/tokens_theme_list.cljc | 79 ------------------- 2 files changed, 128 deletions(-) delete mode 100644 common/src/app/common/types/tokens_list.cljc delete mode 100644 common/src/app/common/types/tokens_theme_list.cljc diff --git a/common/src/app/common/types/tokens_list.cljc b/common/src/app/common/types/tokens_list.cljc deleted file mode 100644 index b31262d4d0..0000000000 --- a/common/src/app/common/types/tokens_list.cljc +++ /dev/null @@ -1,49 +0,0 @@ -;; 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 INC - -(ns app.common.types.tokens-list - (:require - [app.common.data :as d] - [app.common.time :as dt])) - -(defn tokens-seq - "Returns a sequence of all tokens within the file data." - [file-data] - (vals (:tokens file-data))) - -(defn- touch - "Updates the `modified-at` timestamp of a token." - [token] - (assoc token :modified-at (dt/now))) - -(defn add-token - "Adds a new token to the file data, setting its `modified-at` timestamp." - [file-data token-set-id token] - (-> file-data - (update :tokens assoc (:id token) (touch token)) - (d/update-in-when [:token-sets-index token-set-id] #(-> - (update % :tokens conj (:id token)) - (touch))))) - -(defn get-token - "Retrieves a token by its ID from the file data." - [file-data token-id] - (get-in file-data [:tokens token-id])) - -(defn set-token - "Sets or updates a token in the file data, updating its `modified-at` timestamp." - [file-data token] - (d/assoc-in-when file-data [:tokens (:id token)] (touch token))) - -(defn update-token - "Applies a function to update a token in the file data, then touches it." - [file-data token-id f & args] - (d/update-in-when file-data [:tokens token-id] #(-> (apply f % args) (touch)))) - -(defn delete-token - "Removes a token from the file data by its ID." - [file-data token-id] - (update file-data :tokens dissoc token-id)) diff --git a/common/src/app/common/types/tokens_theme_list.cljc b/common/src/app/common/types/tokens_theme_list.cljc deleted file mode 100644 index 971c96946c..0000000000 --- a/common/src/app/common/types/tokens_theme_list.cljc +++ /dev/null @@ -1,79 +0,0 @@ -;; 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 INC - -(ns app.common.types.tokens-theme-list - (:require - [app.common.data :as d] - [app.common.time :as dt])) - -(defn- touch - "Updates the `modified-at` timestamp of a token set." - [token-set] - (assoc token-set :modified-at (dt/now))) - -(defn assoc-active-token-themes - [file-data theme-ids] - (assoc file-data :token-active-themes theme-ids)) - -(defn add-temporary-token-theme - [file-data {:keys [id name] :as token-theme}] - (-> file-data - (d/dissoc-in [:token-themes-index (:token-theme-temporary-id file-data)]) - (assoc :token-theme-temporary-id id) - (assoc :token-theme-temporary-name name) - (update :token-themes-index assoc id token-theme))) - -(defn delete-temporary-token-theme - [file-data token-theme-id] - (cond-> file-data - (= (:token-theme-temporary-id file-data) token-theme-id) (dissoc :token-theme-temporary-id :token-theme-temporary-name) - :always (d/dissoc-in [:token-themes-index (:token-theme-temporary-id file-data)]))) - -(defn add-token-theme - [file-data {:keys [index id] :as token-theme}] - (-> file-data - (update :token-themes - (fn [token-themes] - (let [exists? (some (partial = id) token-themes)] - (cond - exists? token-themes - (nil? index) (conj (or token-themes []) id) - :else (d/insert-at-index token-themes index [id]))))) - (update :token-themes-index assoc id token-theme))) - -(defn update-token-theme - [file-data token-theme-id f & args] - (d/update-in-when file-data [:token-themes-index token-theme-id] #(-> (apply f % args) (touch)))) - -(defn delete-token-theme - [file-data theme-id] - (-> file-data - (update :token-themes (fn [ids] (d/removev #(= % theme-id) ids))) - (update :token-themes-index dissoc theme-id) - (update :token-active-themes disj theme-id))) - -(defn add-token-set - [file-data {:keys [index id] :as token-set}] - (-> file-data - (update :token-set-groups - (fn [token-set-groups] - (let [exists? (some (partial = id) token-set-groups)] - (cond - exists? token-set-groups - (nil? index) (conj (or token-set-groups []) id) - :else (d/insert-at-index token-set-groups index [id]))))) - (update :token-sets-index assoc id token-set))) - -(defn update-token-set - [file-data token-set-id f & args] - (d/update-in-when file-data [:token-sets-index token-set-id] #(-> (apply f % args) (touch)))) - -(defn delete-token-set - [file-data token-set-id] - (-> file-data - (update :token-set-groups (fn [xs] (into [] (remove #(= (:id %) token-set-id) xs)))) - (update :token-sets-index dissoc token-set-id) - (update :token-themes-index (fn [xs] (update-vals xs #(update % :sets disj token-set-id)))))) From 1f6512cff012bbb1a55e6d4695f5af82106f532a Mon Sep 17 00:00:00 2001 From: Florian Schroedl Date: Thu, 28 Nov 2024 10:16:30 +0100 Subject: [PATCH 07/12] =?UTF-8?q?=E2=99=BB=20Remove=20unused=20ref?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/app/main/refs.cljs | 3 --- 1 file changed, 3 deletions(-) diff --git a/frontend/src/app/main/refs.cljs b/frontend/src/app/main/refs.cljs index c2d54a11e5..16ebf7a767 100644 --- a/frontend/src/app/main/refs.cljs +++ b/frontend/src/app/main/refs.cljs @@ -493,9 +493,6 @@ (def workspace-selected-token-set-path (l/derived wtts/get-selected-token-set-path st/state)) -(def workspace-token-set-group-selected? - (l/derived wtts/token-group-selected? st/state)) - (def workspace-ordered-token-sets (l/derived #(or (some-> % ctob/get-sets) []) tokens-lib)) From d34c88b6e46111dac05cd8eda8ccb6dfb6fc2812 Mon Sep 17 00:00:00 2001 From: Florian Schroedl Date: Tue, 3 Dec 2024 10:01:18 +0100 Subject: [PATCH 08/12] =?UTF-8?q?=F0=9F=90=9B=20Fix=20selecting=20a=20set?= =?UTF-8?q?=20in=20the=20sidebar=20toggling=20the=20active=20state?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../app/main/ui/workspace/tokens/modals/themes.cljs | 7 ++++++- frontend/src/app/main/ui/workspace/tokens/sets.cljs | 10 ++++------ 2 files changed, 10 insertions(+), 7 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/tokens/modals/themes.cljs b/frontend/src/app/main/ui/workspace/tokens/modals/themes.cljs index 7682e22c39..476156b618 100644 --- a/frontend/src/app/main/ui/workspace/tokens/modals/themes.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/modals/themes.cljs @@ -271,6 +271,11 @@ (mf/deps theme-state) (fn [set-name] (swap! theme-state #(ctob/toggle-set % set-name)))) + on-click-token-set (mf/use-callback + (mf/deps on-toggle-token-set) + (fn [prefixed-set-path-str] + (let [set-name (ctob/prefixed-set-path-string->set-name-string prefixed-set-path-str)] + (on-toggle-token-set set-name)))) on-change-field (fn [field value] (swap! theme-state #(assoc % field value))) on-save-form (mf/use-callback @@ -322,7 +327,7 @@ {:token-sets token-sets :token-set-selected? (constantly false) :token-set-active? token-set-active? - :on-select on-toggle-token-set + :on-select on-click-token-set :on-toggle-token-set on-toggle-token-set :origin "theme-modal" :context sets-context/static-context}]] diff --git a/frontend/src/app/main/ui/workspace/tokens/sets.cljs b/frontend/src/app/main/ui/workspace/tokens/sets.cljs index fc969bdbea..7b15da0bef 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sets.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/sets.cljs @@ -110,9 +110,7 @@ (fn [event] (dom/stop-propagation event) (when-not editing?' - (on-toggle set-name) (on-select tree-path)))) - on-context-menu (mf/use-fn (mf/deps editing?' tree-path) @@ -163,9 +161,9 @@ [{:keys [set-path set-node tree-depth tree-path on-select selected? on-toggle active? editing? on-edit on-edit-reset on-edit-submit] :or {tree-depth 0} :as props}] - (let [[set-prefix set-path'] (some-> set-path (ctob/split-set-str-path-prefix)) + (let [[set-path-prefix set-fname] (some-> set-path (ctob/split-set-str-path-prefix)) set? (instance? ctob/TokenSet set-node) - set-group? (= ctob/set-group-prefix set-prefix) + set-group? (= ctob/set-group-prefix set-path-prefix) root? (= tree-depth 0) collapsed? (mf/use-state false) children? (and @@ -180,7 +178,7 @@ :active? active? :selected? (selected? tree-path) :on-select on-select - :label set-path' + :label set-fname :tree-path (or tree-path set-path) :tree-depth tree-depth :editing? editing? @@ -192,7 +190,7 @@ [:& sets-tree-set-group {:selected? (selected? tree-path) :on-select on-select - :label set-path' + :label set-fname :collapsed? collapsed? :tree-path (or tree-path set-path) :tree-depth tree-depth From 53229c03d637ef8c8f40b452ac93d11ea43d8e5e Mon Sep 17 00:00:00 2001 From: Florian Schroedl Date: Tue, 3 Dec 2024 11:13:51 +0100 Subject: [PATCH 09/12] =?UTF-8?q?=E2=9C=A8=20Add=20context=20menu=20item?= =?UTF-8?q?=20for=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 | 19 +++++++++++++++++++ .../workspace/tokens/sets_context_menu.cljs | 3 +++ 2 files changed, 22 insertions(+) diff --git a/common/src/app/common/types/tokens_lib.cljc b/common/src/app/common/types/tokens_lib.cljc index 5574d8f9c8..1df9c698ce 100644 --- a/common/src/app/common/types/tokens_lib.cljc +++ b/common/src/app/common/types/tokens_lib.cljc @@ -215,6 +215,10 @@ (defn split-token-set-path [path] (split-path path set-separator)) +(defn get-token-set-final-name [path] + (-> (split-token-set-path path) + (last))) + (defn set-name->prefixed-full-path [name-str] (-> (split-token-set-path name-str) (set-full-path->set-prefixed-full-path))) @@ -223,6 +227,11 @@ (let [path (get-path token-set set-separator)] (set-full-path->set-prefixed-full-path path))) +(defn get-prefixed-token-set-final-prefix [prefixed-path-str] + (some-> (get-token-set-final-name prefixed-path-str) + (split-set-str-path-prefix) + (first))) + (defn set-name-string->prefixed-set-path-string [name-str] (-> (set-name->prefixed-full-path name-str) (join-set-path))) @@ -235,6 +244,16 @@ path-part))) (join-set-path))) +(defn prefixed-set-path-final-group? + "Predicate if the given prefixed path string ends with a group." + [prefixed-path-str] + (= (get-prefixed-token-set-final-prefix prefixed-path-str) set-group-prefix)) + +(defn prefixed-set-path-final-set? + "Predicate if the given prefixed path string ends with a set." + [prefixed-path-str] + (= (get-prefixed-token-set-final-prefix prefixed-path-str) set-prefix)) + (defn tokens-tree "Convert tokens into a nested tree with their `:name` as the path. Optionally use `update-token-fn` option to transform the token." diff --git a/frontend/src/app/main/ui/workspace/tokens/sets_context_menu.cljs b/frontend/src/app/main/ui/workspace/tokens/sets_context_menu.cljs index 426232a97c..cf3c1c4128 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sets_context_menu.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/sets_context_menu.cljs @@ -7,6 +7,7 @@ (ns app.main.ui.workspace.tokens.sets-context-menu (:require-macros [app.main.style :as stl]) (:require + [app.common.types.tokens-lib :as ctob] [app.main.data.tokens :as wdt] [app.main.refs :as refs] [app.main.store :as st] @@ -40,6 +41,8 @@ edit-name (mf/use-fn #(on-edit prefixed-set-path)) delete-set (mf/use-fn #(st/emit! (wdt/delete-token-set-path prefixed-set-path)))] [:ul {:class (stl/css :context-list)} + (when (ctob/prefixed-set-path-final-group? prefixed-set-path) + [:& menu-entry {:title "Add set to this group" :on-click js/console.log}]) [:& menu-entry {:title (tr "labels.rename") :on-click edit-name}] [:& menu-entry {:title (tr "labels.delete") :on-click delete-set}]])) From 656afa8a35f9a9484615080d6dce2407ad920da2 Mon Sep 17 00:00:00 2001 From: Florian Schroedl Date: Tue, 3 Dec 2024 15:48:54 +0100 Subject: [PATCH 10/12] =?UTF-8?q?=E2=99=BB=20PR=20Feedback?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../app/main/ui/workspace/tokens/sets.cljs | 57 ++++++++++--------- 1 file changed, 29 insertions(+), 28 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/tokens/sets.cljs b/frontend/src/app/main/ui/workspace/tokens/sets.cljs index 7b15da0bef..f3c0c31f9c 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sets.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/sets.cljs @@ -72,9 +72,11 @@ (st/emit! (wdt/show-token-set-context-menu {:position (dom/get-client-position event) - :prefixed-set-path tree-path})))))] - [:div {;; :ref dref - :role "button" + :prefixed-set-path tree-path}))))) + on-click (fn [event] + (.stopPropagation event) + (swap! collapsed? not))] + [:div {:role "button" :data-testid "tokens-set-group-item" :style {"--tree-depth" tree-depth} :class (stl/css-case :set-item-container true @@ -83,18 +85,17 @@ :on-context-menu on-context-menu} [:> icon-button* {:class (stl/css :set-item-group-collapse-button) - :on-click (fn [event] - (.stopPropagation event) - (swap! collapsed? not)) + :on-click on-click :aria-label (tr "labels.collapse") :icon (if @collapsed? "arrow-right" "arrow-down") :variant "action"}] (if editing?' - [:& editing-label - {:default-value label - :on-cancel on-edit-reset - :on-create on-edit-reset - :on-submit #(on-edit-submit)}] + (let [on-submit #(on-edit-submit)] + [:& editing-label + {:default-value label + :on-cancel on-edit-reset + :on-create on-edit-reset + :on-submit on-submit}]) [:div {:class (stl/css :set-name) :on-double-click #(on-edit tree-path)} label])])) @@ -122,8 +123,7 @@ (wdt/show-token-set-context-menu {:position (dom/get-client-position event) :prefixed-set-path tree-path})))))] - [:div {;; :ref dref - :role "button" + [:div {:role "button" :data-testid "tokens-set-item" :style {"--tree-depth" tree-depth} :class (stl/css-case :set-item-container true @@ -141,21 +141,22 @@ :on-cancel on-edit-reset :on-create on-edit-reset :on-submit #(on-edit-submit set-name (ctob/update-name set %))}] - [:* - [:div {:class (stl/css :set-name) - :on-double-click #(on-edit tree-path)} - label] - [:button {:type "button" - :on-click (fn [event] - (dom/stop-propagation event) - (on-toggle set-name)) - :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}])]])])) + (let [on-checkbox-click (fn [event] + (dom/stop-propagation event) + (on-toggle set-name))] + [:* + [: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}])]]))])) (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] From b875804bce66434d324f8716e574ff19df6f59c0 Mon Sep 17 00:00:00 2001 From: Florian Schroedl Date: Tue, 3 Dec 2024 17:07:46 +0100 Subject: [PATCH 11/12] =?UTF-8?q?=E2=99=BB=20Use=20use-fn?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../app/main/ui/workspace/tokens/sets.cljs | 42 ++++++++++--------- 1 file changed, 22 insertions(+), 20 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/tokens/sets.cljs b/frontend/src/app/main/ui/workspace/tokens/sets.cljs index f3c0c31f9c..ceea17cfe9 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sets.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/sets.cljs @@ -73,9 +73,10 @@ (wdt/show-token-set-context-menu {:position (dom/get-client-position event) :prefixed-set-path tree-path}))))) - on-click (fn [event] - (.stopPropagation event) - (swap! collapsed? not))] + on-click (mf/use-fn + (fn [event] + (dom/stop-propagation event) + (swap! collapsed? not)))] [:div {:role "button" :data-testid "tokens-set-group-item" :style {"--tree-depth" tree-depth} @@ -122,7 +123,11 @@ (st/emit! (wdt/show-token-set-context-menu {:position (dom/get-client-position event) - :prefixed-set-path tree-path})))))] + :prefixed-set-path tree-path}))))) + on-checkbox-click (mf/use-fn + (fn [event] + (dom/stop-propagation event) + (on-toggle set-name)))] [:div {:role "button" :data-testid "tokens-set-item" :style {"--tree-depth" tree-depth} @@ -141,22 +146,19 @@ :on-cancel on-edit-reset :on-create on-edit-reset :on-submit #(on-edit-submit set-name (ctob/update-name set %))}] - (let [on-checkbox-click (fn [event] - (dom/stop-propagation event) - (on-toggle set-name))] - [:* - [: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}])]]))])) + [:* + [: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}])]])])) (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] From ab0cd29af95262953ed760753096ed98aaad7af0 Mon Sep 17 00:00:00 2001 From: Florian Schroedl Date: Tue, 3 Dec 2024 17:08:29 +0100 Subject: [PATCH 12/12] =?UTF-8?q?=F0=9F=9A=A7=20Add=20todo?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/app/main/ui/workspace/tokens/sets.cljs | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/tokens/sets.cljs b/frontend/src/app/main/ui/workspace/tokens/sets.cljs index ceea17cfe9..145cd2f957 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sets.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/sets.cljs @@ -91,12 +91,12 @@ :icon (if @collapsed? "arrow-right" "arrow-down") :variant "action"}] (if editing?' - (let [on-submit #(on-edit-submit)] - [:& editing-label - {:default-value label - :on-cancel on-edit-reset - :on-create on-edit-reset - :on-submit on-submit}]) + [:& editing-label + {:default-value label + :on-cancel on-edit-reset + :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])]))