From 22e497398f2e4ae80e951df117503f2e2f32fbbe Mon Sep 17 00:00:00 2001 From: Akshay Gupta Date: Wed, 7 Aug 2024 00:08:12 +0530 Subject: [PATCH 01/41] Initial commit --- .../app/main/ui/workspace/tokens/sets.cljs | 68 +++++++++++++++++ .../app/main/ui/workspace/tokens/sets.scss | 74 +++++++++++++++++++ .../app/main/ui/workspace/tokens/sidebar.cljs | 2 + 3 files changed, 144 insertions(+) create mode 100644 frontend/src/app/main/ui/workspace/tokens/sets.cljs create mode 100644 frontend/src/app/main/ui/workspace/tokens/sets.scss diff --git a/frontend/src/app/main/ui/workspace/tokens/sets.cljs b/frontend/src/app/main/ui/workspace/tokens/sets.cljs new file mode 100644 index 0000000000..8c56aa21bf --- /dev/null +++ b/frontend/src/app/main/ui/workspace/tokens/sets.cljs @@ -0,0 +1,68 @@ +(ns app.main.ui.workspace.tokens.sets + (:require-macros [app.main.style :as stl]) + (:require + [app.main.ui.icons :as i] + [rumext.v2 :as mf])) + +;; Sample data +(def active-sets #{#uuid "2858b330-828e-4131-86ed-e4d1c0f4b3e3" + #uuid "d608877b-842a-473b-83ca-b5f8305caf83"}) + +(def sets-root-order [#uuid "2858b330-828e-4131-86ed-e4d1c0f4b3e3" + #uuid "9c5108aa-bdb4-409c-a3c8-c3dfce2f8bf8" + #uuid "0381446e-1f1d-423f-912c-ab577d61b79b"]) + +(def sets {#uuid "9c5108aa-bdb4-409c-a3c8-c3dfce2f8bf8" {:type :group + :name "Group A" + :children [#uuid "d1754e56-3510-493f-8287-5ef3417d4141" + #uuid "d608877b-842a-473b-83ca-b5f8305caf83"]} + #uuid "d608877b-842a-473b-83ca-b5f8305caf83" {:type :set + :name "Set A / 1"} + #uuid "d1754e56-3510-493f-8287-5ef3417d4141" {:type :group + :name "Group A / B" + :children [#uuid "d608877b-842a-473b-83ca-b5f8305caf83" + #uuid "7cc05389-9391-426e-bc0e-ba5cb8f425eb"]} + #uuid "f608877b-842a-473b-83ca-b5f8305caf83" {:type :set + :name "Set A / B / 1"} + #uuid "7cc05389-9391-426e-bc0e-ba5cb8f425eb" {:type :set + :name "Set A / B / 2"} + #uuid "2858b330-828e-4131-86ed-e4d1c0f4b3e3" {:type :set + :name "Set Root 1"} + #uuid "0381446e-1f1d-423f-912c-ab577d61b79b" {:type :set + :name "Set Root 2"}}) + +(defn render-set [set-id] + (println "Rendering set with ID:" set-id) + (let [set (get sets set-id) + {:keys [type name children]} set + icon (if (= type :group) i/document i/document)] ;; Correct icon for groups + [:div {:class (stl/css-case :set-item true :group (= type :group))} + [:div {:class (stl/css :set-icon)} icon] + [:span {:class (stl/css :set-name)} name] + (when children + [:div {:class (stl/css :set-children)} + (for [child-id children] + (do + (println "Rendering child ID:" child-id) + ^{:key (str child-id)} [render-set child-id]))])])) + +(mf/defc sets-list + {::mf/wrap-props false} + [] + (println "Rendering Sets List with root order:" sets-root-order) + [:div.assets-bar + (for [set-id sets-root-order] + ^{:key (str set-id)} + [:& render-set {:key (str set-id) :set-id set-id}])]) + +(mf/defc sets-sidebar + {::mf/wrap-props false} + [] + (println "Rendering sets sidebar") + [:div {:class (stl/css :sets-sidebar)} + [:div {:class (stl/css :sidebar-header)} + "SETS" + [:button {:class (stl/css :add-button) + :on-click #(println "Add Set")} + "Add"]] + [:& sets-list]]) diff --git a/frontend/src/app/main/ui/workspace/tokens/sets.scss b/frontend/src/app/main/ui/workspace/tokens/sets.scss new file mode 100644 index 0000000000..7a24a23d8b --- /dev/null +++ b/frontend/src/app/main/ui/workspace/tokens/sets.scss @@ -0,0 +1,74 @@ +// 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 + +@import "refactor/common-refactor.scss"; + +.sets-sidebar { + position: relative; + display: flex; + flex-direction: column; + flex: 1; + width: 100%; + height: var(--height, $s-200); +} + +.sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + margin-left: $s-2; + color: var(--title-foreground-color-hover); +} + +.add-button { + @extend .button-tertiary; + height: $s-32; + width: $s-28; + padding: 0; + margin-right: $s-12; + svg { + @extend .button-icon; + stroke: var(--icon-foreground); + } +} + +.sets-list { + width: 100%; + max-height: $s-152; + margin-bottom: $s-12; +} + +.set-item { + @include bodySmallTypography; + min-height: $s-32; + width: 100%; + cursor: pointer; + &.group { + padding-left: $s-12; + } + .set-name { + @include textEllipsis; + flex-grow: 1; + padding-left: $s-2; + } + .set-icon { + @include flexCenter; + height: $s-32; + width: $s-24; + padding: 0 $s-4 0 $s-8; + svg { + @extend .button-icon-small; + height: $s-12; + width: $s-12; + color: transparent; + fill: none; + stroke: var(--icon-foreground); + } + } + .set-children { + padding-left: $s-12; + } +} diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs index 7cab3ea9ac..e976a9510b 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs @@ -20,6 +20,7 @@ [app.main.ui.workspace.tokens.style-dictionary :as sd] [app.main.ui.workspace.tokens.token :as wtt] [app.main.ui.workspace.tokens.token-types :as wtty] + [app.main.ui.workspace.tokens.sets :refer [sets-sidebar]] [app.util.dom :as dom] [cuerdas.core :as str] [okulary.core :as l] @@ -171,6 +172,7 @@ ::mf/wrap-props false} [_props] [:div {:class (stl/css :sidebar-tab-wrapper)} + [:& sets-sidebar] ;; Add sets sidebar here [:& tokens-explorer] [:button {:class (stl/css :download-json-button) :on-click wtc/download-tokens-as-json} From 02a19a6b330e6e5df71be5338d16468f3b868547 Mon Sep 17 00:00:00 2001 From: Akshay Gupta Date: Wed, 7 Aug 2024 00:57:13 +0530 Subject: [PATCH 02/41] Next commit --- .../app/main/ui/workspace/tokens/sets.cljs | 29 ++++++++++--------- 1 file changed, 16 insertions(+), 13 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/tokens/sets.cljs b/frontend/src/app/main/ui/workspace/tokens/sets.cljs index 8c56aa21bf..023c1eae9a 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sets.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/sets.cljs @@ -31,20 +31,23 @@ #uuid "0381446e-1f1d-423f-912c-ab577d61b79b" {:type :set :name "Set Root 2"}}) -(defn render-set [set-id] + +(mf/defc render-set + [{:keys [set-id]}] (println "Rendering set with ID:" set-id) - (let [set (get sets set-id) - {:keys [type name children]} set - icon (if (= type :group) i/document i/document)] ;; Correct icon for groups - [:div {:class (stl/css-case :set-item true :group (= type :group))} - [:div {:class (stl/css :set-icon)} icon] - [:span {:class (stl/css :set-name)} name] - (when children - [:div {:class (stl/css :set-children)} - (for [child-id children] - (do - (println "Rendering child ID:" child-id) - ^{:key (str child-id)} [render-set child-id]))])])) + (let [set (get sets set-id)] + (when set + (let [{:keys [type name children]} set + icon (if (= type :group) i/document i/document)] ;; Correct icon for groups + [:div {:class (stl/css-case :set-item true :group (= type :group))} + [:div {:class (stl/css :set-icon)} icon] + [:span {:class (stl/css :set-name)} name] + (when children + [:div {:class (stl/css :set-children)} + (for [child-id children] + (do + (println "Rendering child ID:" child-id) + ^{:key (str child-id)} [:& render-set {:key (str child-id):set-id child-id}]))])])))) (mf/defc sets-list {::mf/wrap-props false} From 1434ddb5d58b1907cc9b94598ff1dc344780adb1 Mon Sep 17 00:00:00 2001 From: Akshay Gupta Date: Wed, 7 Aug 2024 20:58:21 +0530 Subject: [PATCH 03/41] change fotn color --- frontend/src/app/main/ui/workspace/tokens/sets.cljs | 9 +++++---- frontend/src/app/main/ui/workspace/tokens/sets.scss | 3 ++- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/tokens/sets.cljs b/frontend/src/app/main/ui/workspace/tokens/sets.cljs index 023c1eae9a..05601080d6 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sets.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/sets.cljs @@ -32,7 +32,7 @@ :name "Set Root 2"}}) -(mf/defc render-set +(mf/defc sets-tree [{:keys [set-id]}] (println "Rendering set with ID:" set-id) (let [set (get sets set-id)] @@ -40,14 +40,15 @@ (let [{:keys [type name children]} set icon (if (= type :group) i/document i/document)] ;; Correct icon for groups [:div {:class (stl/css-case :set-item true :group (= type :group))} - [:div {:class (stl/css :set-icon)} icon] + [:div {:class (stl/css :set-icon)} + [:svg {:class (stl/css :set-icon-svg)} icon]] [:span {:class (stl/css :set-name)} name] (when children [:div {:class (stl/css :set-children)} (for [child-id children] (do (println "Rendering child ID:" child-id) - ^{:key (str child-id)} [:& render-set {:key (str child-id):set-id child-id}]))])])))) + ^{:key (str child-id)} [:& sets-tree {:key (str child-id) :set-id child-id}]))])])))) (mf/defc sets-list {::mf/wrap-props false} @@ -56,7 +57,7 @@ [:div.assets-bar (for [set-id sets-root-order] ^{:key (str set-id)} - [:& render-set {:key (str set-id) :set-id set-id}])]) + [:& sets-tree {:key (str set-id) :set-id set-id}])]) (mf/defc sets-sidebar {::mf/wrap-props false} diff --git a/frontend/src/app/main/ui/workspace/tokens/sets.scss b/frontend/src/app/main/ui/workspace/tokens/sets.scss index 7a24a23d8b..1b54a602ba 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sets.scss +++ b/frontend/src/app/main/ui/workspace/tokens/sets.scss @@ -20,7 +20,7 @@ align-items: center; justify-content: space-between; margin-left: $s-2; - color: var(--title-foreground-color-hover); + color: var(--layer-row-foreground-color); } .add-button { @@ -46,6 +46,7 @@ min-height: $s-32; width: 100%; cursor: pointer; + color: var(--layer-row-foreground-color); &.group { padding-left: $s-12; } From fcea98958693dd0f180ec5416130a5fcd0eca92b Mon Sep 17 00:00:00 2001 From: Akshay Gupta Date: Wed, 7 Aug 2024 22:39:41 +0530 Subject: [PATCH 04/41] add more changes --- .../app/main/ui/workspace/tokens/sets.cljs | 10 ++++---- .../app/main/ui/workspace/tokens/sets.scss | 17 ++++++------- .../app/main/ui/workspace/tokens/sidebar.cljs | 6 +++-- .../app/main/ui/workspace/tokens/sidebar.scss | 24 ++++++++++++++++++- 4 files changed, 41 insertions(+), 16 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/tokens/sets.cljs b/frontend/src/app/main/ui/workspace/tokens/sets.cljs index 05601080d6..affad9f6f1 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sets.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/sets.cljs @@ -20,7 +20,7 @@ :name "Set A / 1"} #uuid "d1754e56-3510-493f-8287-5ef3417d4141" {:type :group :name "Group A / B" - :children [#uuid "d608877b-842a-473b-83ca-b5f8305caf83" + :children [#uuid "f608877b-842a-473b-83ca-b5f8305caf83" #uuid "7cc05389-9391-426e-bc0e-ba5cb8f425eb"]} #uuid "f608877b-842a-473b-83ca-b5f8305caf83" {:type :set :name "Set A / B / 1"} @@ -38,7 +38,7 @@ (let [set (get sets set-id)] (when set (let [{:keys [type name children]} set - icon (if (= type :group) i/document i/document)] ;; Correct icon for groups + icon (if (= type :group) i/document i/document)] [:div {:class (stl/css-case :set-item true :group (= type :group))} [:div {:class (stl/css :set-icon)} [:svg {:class (stl/css :set-icon-svg)} icon]] @@ -54,7 +54,7 @@ {::mf/wrap-props false} [] (println "Rendering Sets List with root order:" sets-root-order) - [:div.assets-bar + [:div {:class (stl/css :sets-list)} (for [set-id sets-root-order] ^{:key (str set-id)} [:& sets-tree {:key (str set-id) :set-id set-id}])]) @@ -66,7 +66,7 @@ [:div {:class (stl/css :sets-sidebar)} [:div {:class (stl/css :sidebar-header)} "SETS" - [:button {:class (stl/css :add-button) + [:button {:class (stl/css :add-set) :on-click #(println "Add Set")} - "Add"]] + i/add]] [:& sets-list]]) diff --git a/frontend/src/app/main/ui/workspace/tokens/sets.scss b/frontend/src/app/main/ui/workspace/tokens/sets.scss index 1b54a602ba..d26bb6e7a7 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sets.scss +++ b/frontend/src/app/main/ui/workspace/tokens/sets.scss @@ -13,6 +13,7 @@ flex: 1; width: 100%; height: var(--height, $s-200); + overflow-y: auto; } .sidebar-header { @@ -23,7 +24,7 @@ color: var(--layer-row-foreground-color); } -.add-button { +.add-set { @extend .button-tertiary; height: $s-32; width: $s-28; @@ -32,13 +33,14 @@ svg { @extend .button-icon; stroke: var(--icon-foreground); + transform: rotate(90deg); } } .sets-list { width: 100%; - max-height: $s-152; margin-bottom: $s-12; + overflow-y: auto; } .set-item { @@ -57,14 +59,13 @@ } .set-icon { @include flexCenter; - height: $s-32; - width: $s-24; + height: $s-20; + width: $s-20; padding: 0 $s-4 0 $s-8; svg { - @extend .button-icon-small; - height: $s-12; - width: $s-12; - color: transparent; + height: $s-20; + width: $s-20; + color: white; fill: none; stroke: var(--icon-foreground); } diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs index e976a9510b..c4bbfc7988 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs @@ -172,8 +172,10 @@ ::mf/wrap-props false} [_props] [:div {:class (stl/css :sidebar-tab-wrapper)} - [:& sets-sidebar] ;; Add sets sidebar here - [:& tokens-explorer] + [:& sets-sidebar] + ;;[:div {:class (stl/css :divider)}] + [:div {:class (stl/css :tokens-section-wrapper)} + [:& tokens-explorer]] [:button {:class (stl/css :download-json-button) :on-click wtc/download-tokens-as-json} download-icon diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.scss b/frontend/src/app/main/ui/workspace/tokens/sidebar.scss index 67ff95ee03..d42befb067 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sidebar.scss +++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.scss @@ -5,11 +5,33 @@ // Copyright (c) KALEIDOS INC @import "refactor/common-refactor.scss"; - @import "./common.scss"; .sidebar-tab-wrapper { + display: flex; + flex-direction: column; + height: 100%; + overflow: hidden; padding: $s-12; + //justify-content: space-evenly; +// align-items: flex-start; +} + +.sets-sidebar { + flex-shrink: 0; + overflow-y: auto; + max-height: 40%; // Adjust this value as needed +} + +.tokens-section-wrapper { + flex: 1; + overflow-y: auto; +} + +.divider { + height: 1px; + background-color: var(--border-color); + margin: $s-8 0; } .token-pills-wrapper { From b28a45c2d8a0d7e2f6251b3421939d6b32db8287 Mon Sep 17 00:00:00 2001 From: Akshay Gupta Date: Thu, 8 Aug 2024 00:14:36 +0530 Subject: [PATCH 05/41] add more changes working tree display --- .../app/main/ui/workspace/tokens/sets.cljs | 35 +++++++++++++------ .../app/main/ui/workspace/tokens/sets.scss | 32 +++++++++++------ 2 files changed, 45 insertions(+), 22 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/tokens/sets.cljs b/frontend/src/app/main/ui/workspace/tokens/sets.cljs index affad9f6f1..58304a8b79 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sets.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/sets.cljs @@ -2,6 +2,7 @@ (:require-macros [app.main.style :as stl]) (:require [app.main.ui.icons :as i] + [app.main.ui.components.title-bar :refer [title-bar]] [rumext.v2 :as mf])) ;; Sample data @@ -32,28 +33,34 @@ :name "Set Root 2"}}) +(mf/defc set-item + [{:keys [icon name]}] + [:div {:class (stl/css :set-item)} + [:span {:class (stl/css :icon)} icon] + [:span {:class (stl/css :set-name)} name]]) + (mf/defc sets-tree [{:keys [set-id]}] - (println "Rendering set with ID:" set-id) + ;;(println "Rendering set with ID:" set-id) (let [set (get sets set-id)] (when set (let [{:keys [type name children]} set - icon (if (= type :group) i/document i/document)] - [:div {:class (stl/css-case :set-item true :group (= type :group))} - [:div {:class (stl/css :set-icon)} - [:svg {:class (stl/css :set-icon-svg)} icon]] - [:span {:class (stl/css :set-name)} name] + icon i/document] + [:div {:class (stl/css :set-item-container)} + [:div {:class (stl/css :set-item)} + [:span {:class (stl/css :icon)} icon] + [:div {:class (stl/css :set-name)} name]] (when children [:div {:class (stl/css :set-children)} (for [child-id children] (do - (println "Rendering child ID:" child-id) + ;;(println "Rendering child ID:" child-id) ^{:key (str child-id)} [:& sets-tree {:key (str child-id) :set-id child-id}]))])])))) (mf/defc sets-list {::mf/wrap-props false} [] - (println "Rendering Sets List with root order:" sets-root-order) + ;;(println "Rendering Sets List with root order:" sets-root-order) [:div {:class (stl/css :sets-list)} (for [set-id sets-root-order] ^{:key (str set-id)} @@ -62,11 +69,17 @@ (mf/defc sets-sidebar {::mf/wrap-props false} [] - (println "Rendering sets sidebar") + + (let [open? (mf/use-state true)] + (println "Rendering sets sidebar" open?) [:div {:class (stl/css :sets-sidebar)} [:div {:class (stl/css :sidebar-header)} - "SETS" + [:& title-bar {:collapsable true + :collapsed (not @open?) + :title "SETS" + :on-collapsed #(swap! open? not)}] [:button {:class (stl/css :add-set) :on-click #(println "Add Set")} i/add]] - [:& sets-list]]) + (when @open? + [:& sets-list])])) diff --git a/frontend/src/app/main/ui/workspace/tokens/sets.scss b/frontend/src/app/main/ui/workspace/tokens/sets.scss index d26bb6e7a7..be7cf1caf7 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sets.scss +++ b/frontend/src/app/main/ui/workspace/tokens/sets.scss @@ -43,34 +43,44 @@ overflow-y: auto; } +.set-item-container { + width: 100%; + cursor: pointer; + color: var(--layer-row-foreground-color); + padding-left: 20px; +} + .set-item { - @include bodySmallTypography; + display: flex; + align-items: center; min-height: $s-32; width: 100%; cursor: pointer; color: var(--layer-row-foreground-color); + &.group { padding-left: $s-12; } + .set-name { @include textEllipsis; flex-grow: 1; padding-left: $s-2; } - .set-icon { - @include flexCenter; - height: $s-20; - width: $s-20; - padding: 0 $s-4 0 $s-8; + + .icon { + display: flex; + align-items: center; + width: $s-20; + height: $s-20; + padding-right: $s-4; + svg { - height: $s-20; - width: $s-20; + height: $s-20; + width: $s-20; color: white; fill: none; stroke: var(--icon-foreground); } } - .set-children { - padding-left: $s-12; - } } From bb3a22a219496d5577f66b9eafbc186159d7421f Mon Sep 17 00:00:00 2001 From: Akshay Gupta Date: Thu, 8 Aug 2024 18:46:58 +0530 Subject: [PATCH 06/41] add hide/show icon --- .../app/main/ui/workspace/tokens/sets.cljs | 28 +++++++++++-------- .../app/main/ui/workspace/tokens/sets.scss | 9 ++++++ 2 files changed, 25 insertions(+), 12 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/tokens/sets.cljs b/frontend/src/app/main/ui/workspace/tokens/sets.cljs index 58304a8b79..fc947c7e15 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sets.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/sets.cljs @@ -31,40 +31,44 @@ :name "Set Root 1"} #uuid "0381446e-1f1d-423f-912c-ab577d61b79b" {:type :set :name "Set Root 2"}}) - - -(mf/defc set-item - [{:keys [icon name]}] - [:div {:class (stl/css :set-item)} - [:span {:class (stl/css :icon)} icon] - [:span {:class (stl/css :set-name)} name]]) (mf/defc sets-tree - [{:keys [set-id]}] + [{:keys [set-id toggle-visibility]}] ;;(println "Rendering set with ID:" set-id) (let [set (get sets set-id)] (when set (let [{:keys [type name children]} set - icon i/document] + icon i/document + visible? (mf/use-state (contains? active-sets set-id))] [:div {:class (stl/css :set-item-container)} [:div {:class (stl/css :set-item)} [:span {:class (stl/css :icon)} icon] - [:div {:class (stl/css :set-name)} name]] + [:div {:class (stl/css :set-name)} name] + (when (= type :set) + [:span {:class (stl/css :action-btn) + :on-click #(swap! visible? not)} + (if @visible? + i/shown + i/hide)])] (when children [:div {:class (stl/css :set-children)} (for [child-id children] (do ;;(println "Rendering child ID:" child-id) - ^{:key (str child-id)} [:& sets-tree {:key (str child-id) :set-id child-id}]))])])))) + ^{:key (str child-id)} [:& sets-tree {:key (str child-id) :set-id child-id :toggle-visibility toggle-visibility }]))])])))) (mf/defc sets-list {::mf/wrap-props false} [] ;;(println "Rendering Sets List with root order:" sets-root-order) + (let [toggle-visibility (fn [set-id] + (if (contains? active-sets set-id) + (swap! active-sets disj set-id) + (swap! active-sets conj set-id)))] [:div {:class (stl/css :sets-list)} (for [set-id sets-root-order] ^{:key (str set-id)} - [:& sets-tree {:key (str set-id) :set-id set-id}])]) + [:& sets-tree {:key (str set-id) :set-id set-id}])])) (mf/defc sets-sidebar {::mf/wrap-props false} diff --git a/frontend/src/app/main/ui/workspace/tokens/sets.scss b/frontend/src/app/main/ui/workspace/tokens/sets.scss index be7cf1caf7..3da55df5f5 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sets.scss +++ b/frontend/src/app/main/ui/workspace/tokens/sets.scss @@ -84,3 +84,12 @@ } } } + +.action-btn { + @extend .button-tertiary; + height: $s-32; + width: $s-28; + svg { + @extend .button-icon; + } +} From b93b0b209a24bf5c558b7d599f8d3c62eb5d20d4 Mon Sep 17 00:00:00 2001 From: Akshay Gupta Date: Thu, 8 Aug 2024 21:40:35 +0530 Subject: [PATCH 07/41] Add hover styles and collapse capabilities --- .../src/app/main/ui/workspace/tokens/sets.cljs | 11 +++++++---- .../src/app/main/ui/workspace/tokens/sets.scss | 18 ++++++++++-------- 2 files changed, 17 insertions(+), 12 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/tokens/sets.cljs b/frontend/src/app/main/ui/workspace/tokens/sets.cljs index fc947c7e15..520fbd79f7 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sets.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/sets.cljs @@ -39,10 +39,13 @@ (when set (let [{:keys [type name children]} set icon i/document - visible? (mf/use-state (contains? active-sets set-id))] + visible? (mf/use-state (contains? active-sets set-id)) + collapsed? (mf/use-state false)] [:div {:class (stl/css :set-item-container)} - [:div {:class (stl/css :set-item)} - [:span {:class (stl/css :icon)} icon] + [:div {:class (stl/css-case :set-item-group (= type :group) + :set-item-set (= type :set))} + [:span {:class (stl/css :icon) + :on-click #(when (= type :group) (swap! collapsed? not))} icon] [:div {:class (stl/css :set-name)} name] (when (= type :set) [:span {:class (stl/css :action-btn) @@ -50,7 +53,7 @@ (if @visible? i/shown i/hide)])] - (when children + (when (and children (not @collapsed?)) [:div {:class (stl/css :set-children)} (for [child-id children] (do diff --git a/frontend/src/app/main/ui/workspace/tokens/sets.scss b/frontend/src/app/main/ui/workspace/tokens/sets.scss index 3da55df5f5..54015fe939 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sets.scss +++ b/frontend/src/app/main/ui/workspace/tokens/sets.scss @@ -50,18 +50,14 @@ padding-left: 20px; } -.set-item { +.set-item-set, .set-item-group { + @include bodySmallTypography; display: flex; align-items: center; min-height: $s-32; width: 100%; cursor: pointer; color: var(--layer-row-foreground-color); - - &.group { - padding-left: $s-12; - } - .set-name { @include textEllipsis; flex-grow: 1; @@ -85,10 +81,16 @@ } } +.set-item-set{ + &:hover { + background-color: var(--layer-row-background-color-hover); + color: var(--layer-row-foreground-color-hover); + } +} .action-btn { @extend .button-tertiary; - height: $s-32; - width: $s-28; + height: $s-20; + width: $s-20; svg { @extend .button-icon; } From ad9a4e7244f1d96ab3816757cff8a4ef1c3112c5 Mon Sep 17 00:00:00 2001 From: Akshay Gupta Date: Tue, 13 Aug 2024 01:17:18 +0530 Subject: [PATCH 08/41] Add full lenght highlight --- frontend/src/app/main/ui/workspace/tokens/sets.scss | 9 ++++++++- frontend/src/app/main/ui/workspace/tokens/sidebar.scss | 3 --- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/tokens/sets.scss b/frontend/src/app/main/ui/workspace/tokens/sets.scss index 54015fe939..e6a8a9aa93 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sets.scss +++ b/frontend/src/app/main/ui/workspace/tokens/sets.scss @@ -48,6 +48,11 @@ cursor: pointer; color: var(--layer-row-foreground-color); padding-left: 20px; + + /*&:hover{ + box-shadow: 20px 0 0 0 var(--layer-row-background-color-hover); + }*/ + } .set-item-set, .set-item-group { @@ -57,7 +62,7 @@ min-height: $s-32; width: 100%; cursor: pointer; - color: var(--layer-row-foreground-color); + color: var(--layer-row-foreground-color); .set-name { @include textEllipsis; flex-grow: 1; @@ -85,6 +90,8 @@ &:hover { background-color: var(--layer-row-background-color-hover); color: var(--layer-row-foreground-color-hover); + box-shadow: -100px 0 0 0 var(--layer-row-background-color-hover); + } } .action-btn { diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.scss b/frontend/src/app/main/ui/workspace/tokens/sidebar.scss index d42befb067..4f2fd9bee2 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sidebar.scss +++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.scss @@ -12,9 +12,6 @@ flex-direction: column; height: 100%; overflow: hidden; - padding: $s-12; - //justify-content: space-evenly; -// align-items: flex-start; } .sets-sidebar { From bcf61f34fe0625e51cacea59cc803774c5d2633b Mon Sep 17 00:00:00 2001 From: Akshay Gupta Date: Tue, 13 Aug 2024 14:11:30 +0530 Subject: [PATCH 09/41] add current set and selected set --- .../app/main/ui/workspace/tokens/sets.cljs | 50 ++++++++++++++----- .../app/main/ui/workspace/tokens/sets.scss | 48 +++++++++++++++++- 2 files changed, 84 insertions(+), 14 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/tokens/sets.cljs b/frontend/src/app/main/ui/workspace/tokens/sets.cljs index 520fbd79f7..25c64ec191 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sets.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/sets.cljs @@ -3,6 +3,11 @@ (:require [app.main.ui.icons :as i] [app.main.ui.components.title-bar :refer [title-bar]] + [app.main.ui.context :as ctx] + [app.main.store :as st] + [app.common.data.macros :as dm] + [app.util.dom :as dom] + [potok.v2.core :as ptk] [rumext.v2 :as mf])) ;; Sample data @@ -31,19 +36,39 @@ :name "Set Root 1"} #uuid "0381446e-1f1d-423f-912c-ab577d61b79b" {:type :set :name "Set Root 2"}}) + +(defn set-current-set + [set-id] + (println "here") + (dm/assert! (uuid? set-id)) + (ptk/reify ::set-current-set + ptk/UpdateEvent + (update [_ state] + (assoc state :current-set-id set-id)))) + (mf/defc sets-tree - [{:keys [set-id toggle-visibility]}] - ;;(println "Rendering set with ID:" set-id) + [{:keys [current-set-id set-id toggle-visibility]}] + (println "Rendering set with ID:" set-id) (let [set (get sets set-id)] (when set (let [{:keys [type name children]} set icon i/document visible? (mf/use-state (contains? active-sets set-id)) - collapsed? (mf/use-state false)] - [:div {:class (stl/css :set-item-container)} + collapsed? (mf/use-state false) + selected? (mf/use-state (= set-id current-set-id)) + + on-click + (mf/use-fn + (mf/deps type set-id) + #(st/emit! (set-current-set set-id)) + )] + (println "current set id is" current-set-id @selected?) + [:div {:class (stl/css :set-item-container) + :on-click on-click} [:div {:class (stl/css-case :set-item-group (= type :group) - :set-item-set (= type :set))} + :set-item-set-selected @selected? + :set-item-set (and (= type :set ) (not @selected?)))} [:span {:class (stl/css :icon) :on-click #(when (= type :group) (swap! collapsed? not))} icon] [:div {:class (stl/css :set-name)} name] @@ -58,11 +83,10 @@ (for [child-id children] (do ;;(println "Rendering child ID:" child-id) - ^{:key (str child-id)} [:& sets-tree {:key (str child-id) :set-id child-id :toggle-visibility toggle-visibility }]))])])))) + ^{:key (str child-id)} [:& sets-tree {:key (str child-id) :set-id child-id :current-set-id current-set-id :toggle-visibility toggle-visibility}]))])])))) (mf/defc sets-list - {::mf/wrap-props false} - [] + [{:keys [current-set-id]}] ;;(println "Rendering Sets List with root order:" sets-root-order) (let [toggle-visibility (fn [set-id] (if (contains? active-sets set-id) @@ -71,13 +95,13 @@ [:div {:class (stl/css :sets-list)} (for [set-id sets-root-order] ^{:key (str set-id)} - [:& sets-tree {:key (str set-id) :set-id set-id}])])) + [:& sets-tree {:key (str set-id) :set-id set-id :current-set-id current-set-id}])])) (mf/defc sets-sidebar - {::mf/wrap-props false} [] - - (let [open? (mf/use-state true)] + (let [current-set-id (:current-set-id @st/state) + ;;current-set-id (deref current-set-id*) + open? (mf/use-state true)] (println "Rendering sets sidebar" open?) [:div {:class (stl/css :sets-sidebar)} [:div {:class (stl/css :sidebar-header)} @@ -89,4 +113,4 @@ :on-click #(println "Add Set")} i/add]] (when @open? - [:& sets-list])])) + [:& sets-list {:current-set-id current-set-id}])])) diff --git a/frontend/src/app/main/ui/workspace/tokens/sets.scss b/frontend/src/app/main/ui/workspace/tokens/sets.scss index e6a8a9aa93..ff4c959915 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sets.scss +++ b/frontend/src/app/main/ui/workspace/tokens/sets.scss @@ -48,7 +48,6 @@ cursor: pointer; color: var(--layer-row-foreground-color); padding-left: 20px; - /*&:hover{ box-shadow: 20px 0 0 0 var(--layer-row-background-color-hover); }*/ @@ -94,6 +93,53 @@ } } + +.selected-set { + background-color: var(--layer-row-background-color-selected); + color: var(--layer-row-foreground-color-selected); + box-shadow: -20px 0 0 0 var(--layer-row-background-color-selected); +} + +.set-item-set-selected { + @include bodySmallTypography; + display: flex; + align-items: center; + min-height: $s-32; + width: 100%; + cursor: pointer; + //color: var(--layer-row-foreground-color); + background-color: var(--layer-row-background-color-selected); + color: var(--layer-row-foreground-color-selected); + box-shadow: -20px 0 0 0 var(--layer-row-background-color-selected); + + .set-name { + @include textEllipsis; + flex-grow: 1; + padding-left: $s-2; + } + + .icon { + display: flex; + align-items: center; + width: $s-20; + height: $s-20; + padding-right: $s-4; + + svg { + height: $s-20; + width: $s-20; + color: white; + fill: none; + stroke: var(--icon-foreground); + } + } + &:hover { + background-color: var(--layer-row-background-color-hover); + color: var(--layer-row-foreground-color-hover); + box-shadow: -100px 0 0 0 var(--layer-row-background-color-hover); + + } +} .action-btn { @extend .button-tertiary; height: $s-20; From fa230a4224355b415f24ec8cb3675c3dab3cfb49 Mon Sep 17 00:00:00 2001 From: Akshay Gupta Date: Tue, 13 Aug 2024 19:31:34 +0530 Subject: [PATCH 10/41] add folder-open icon and use for open groups --- frontend/resources/images/icons/folder-open.svg | 7 +++++++ frontend/src/app/main/ui/icons.cljs | 1 + frontend/src/app/main/ui/workspace/tokens/sets.cljs | 5 ++++- 3 files changed, 12 insertions(+), 1 deletion(-) create mode 100644 frontend/resources/images/icons/folder-open.svg diff --git a/frontend/resources/images/icons/folder-open.svg b/frontend/resources/images/icons/folder-open.svg new file mode 100644 index 0000000000..ef5d15ab89 --- /dev/null +++ b/frontend/resources/images/icons/folder-open.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/frontend/src/app/main/ui/icons.cljs b/frontend/src/app/main/ui/icons.cljs index 3191194248..ca19dc77b1 100644 --- a/frontend/src/app/main/ui/icons.cljs +++ b/frontend/src/app/main/ui/icons.cljs @@ -121,6 +121,7 @@ (def ^:icon flex (icon-xref :flex)) (def ^:icon flip-horizontal (icon-xref :flip-horizontal)) (def ^:icon flip-vertical (icon-xref :flip-vertical)) +(def ^:icon folder-open (icon-xref :folder-open)) (def ^:icon gap-horizontal (icon-xref :gap-horizontal)) (def ^:icon gap-vertical (icon-xref :gap-vertical)) (def ^:icon graphics (icon-xref :graphics)) diff --git a/frontend/src/app/main/ui/workspace/tokens/sets.cljs b/frontend/src/app/main/ui/workspace/tokens/sets.cljs index 25c64ec191..54b627b924 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sets.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/sets.cljs @@ -53,9 +53,12 @@ (let [set (get sets set-id)] (when set (let [{:keys [type name children]} set - icon i/document visible? (mf/use-state (contains? active-sets set-id)) collapsed? (mf/use-state false) + icon (cond + (= type :set) i/document + (and (= type :group) @collapsed?) i/group + :else i/folder-open) selected? (mf/use-state (= set-id current-set-id)) on-click From 950257a212aa5a41702b90ee170a29d37015679c Mon Sep 17 00:00:00 2001 From: Akshay Gupta Date: Tue, 13 Aug 2024 20:42:42 +0530 Subject: [PATCH 11/41] change eye icon size --- frontend/src/app/main/ui/workspace/tokens/sets.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/frontend/src/app/main/ui/workspace/tokens/sets.scss b/frontend/src/app/main/ui/workspace/tokens/sets.scss index ff4c959915..1dd0472c60 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sets.scss +++ b/frontend/src/app/main/ui/workspace/tokens/sets.scss @@ -146,5 +146,7 @@ width: $s-20; svg { @extend .button-icon; + width: 12px; + height: 12px; } } From 7addba71fbb4dbb1879e7c36e2a1dcb6ea09be88 Mon Sep 17 00:00:00 2001 From: Akshay Gupta Date: Tue, 13 Aug 2024 21:07:52 +0530 Subject: [PATCH 12/41] remove debug statements --- frontend/src/app/main/ui/workspace/tokens/sets.cljs | 5 ----- 1 file changed, 5 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/tokens/sets.cljs b/frontend/src/app/main/ui/workspace/tokens/sets.cljs index 54b627b924..1a9fe3c6df 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sets.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/sets.cljs @@ -10,7 +10,6 @@ [potok.v2.core :as ptk] [rumext.v2 :as mf])) -;; Sample data (def active-sets #{#uuid "2858b330-828e-4131-86ed-e4d1c0f4b3e3" #uuid "d608877b-842a-473b-83ca-b5f8305caf83"}) @@ -85,12 +84,10 @@ [:div {:class (stl/css :set-children)} (for [child-id children] (do - ;;(println "Rendering child ID:" child-id) ^{:key (str child-id)} [:& sets-tree {:key (str child-id) :set-id child-id :current-set-id current-set-id :toggle-visibility toggle-visibility}]))])])))) (mf/defc sets-list [{:keys [current-set-id]}] - ;;(println "Rendering Sets List with root order:" sets-root-order) (let [toggle-visibility (fn [set-id] (if (contains? active-sets set-id) (swap! active-sets disj set-id) @@ -103,9 +100,7 @@ (mf/defc sets-sidebar [] (let [current-set-id (:current-set-id @st/state) - ;;current-set-id (deref current-set-id*) open? (mf/use-state true)] - (println "Rendering sets sidebar" open?) [:div {:class (stl/css :sets-sidebar)} [:div {:class (stl/css :sidebar-header)} [:& title-bar {:collapsable true From 68c0d93f91d582244004dae361a8d04b2068f5c9 Mon Sep 17 00:00:00 2001 From: Akshay Gupta Date: Tue, 13 Aug 2024 21:12:38 +0530 Subject: [PATCH 13/41] change sets list div to ul --- frontend/src/app/main/ui/workspace/tokens/sets.cljs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/app/main/ui/workspace/tokens/sets.cljs b/frontend/src/app/main/ui/workspace/tokens/sets.cljs index 1a9fe3c6df..c625a03168 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sets.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/sets.cljs @@ -92,7 +92,7 @@ (if (contains? active-sets set-id) (swap! active-sets disj set-id) (swap! active-sets conj set-id)))] - [:div {:class (stl/css :sets-list)} + [:ul {:class (stl/css :sets-list)} (for [set-id sets-root-order] ^{:key (str set-id)} [:& sets-tree {:key (str set-id) :set-id set-id :current-set-id current-set-id}])])) From 66170eb889b83ae4250c1a88eaffe92beca76faa Mon Sep 17 00:00:00 2001 From: Akshay Gupta Date: Tue, 13 Aug 2024 21:42:08 +0530 Subject: [PATCH 14/41] make current-set-id the key on div element --- .../src/app/main/ui/workspace/tokens/sets.cljs | 16 +++++++++------- 1 file changed, 9 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 c625a03168..3a870fcdcb 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sets.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/sets.cljs @@ -8,8 +8,13 @@ [app.common.data.macros :as dm] [app.util.dom :as dom] [potok.v2.core :as ptk] + [okulary.core :as l] [rumext.v2 :as mf])) + +(def current-set-id + (l/derived :current-set-id st/state)) + (def active-sets #{#uuid "2858b330-828e-4131-86ed-e4d1c0f4b3e3" #uuid "d608877b-842a-473b-83ca-b5f8305caf83"}) @@ -38,17 +43,14 @@ (defn set-current-set [set-id] - (println "here") (dm/assert! (uuid? set-id)) (ptk/reify ::set-current-set ptk/UpdateEvent (update [_ state] (assoc state :current-set-id set-id)))) - (mf/defc sets-tree [{:keys [current-set-id set-id toggle-visibility]}] - (println "Rendering set with ID:" set-id) (let [set (get sets set-id)] (when set (let [{:keys [type name children]} set @@ -65,7 +67,6 @@ (mf/deps type set-id) #(st/emit! (set-current-set set-id)) )] - (println "current set id is" current-set-id @selected?) [:div {:class (stl/css :set-item-container) :on-click on-click} [:div {:class (stl/css-case :set-item-group (= type :group) @@ -99,9 +100,10 @@ (mf/defc sets-sidebar [] - (let [current-set-id (:current-set-id @st/state) - open? (mf/use-state true)] - [:div {:class (stl/css :sets-sidebar)} + (let [current-set-id (mf/deref current-set-id) + open? (mf/use-state true)] + [:div {:key (str "sidebar-" current-set-id) + :class (stl/css :sets-sidebar)} [:div {:class (stl/css :sidebar-header)} [:& title-bar {:collapsable true :collapsed (not @open?) From 46c73fe51f17b231f7e4c72b41897dbc91360559 Mon Sep 17 00:00:00 2001 From: Akshay Gupta Date: Tue, 13 Aug 2024 21:44:08 +0530 Subject: [PATCH 15/41] formatting --- .../app/main/ui/workspace/tokens/sets.cljs | 79 +++++++++---------- .../app/main/ui/workspace/tokens/sets.scss | 12 ++- 2 files changed, 44 insertions(+), 47 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/tokens/sets.cljs b/frontend/src/app/main/ui/workspace/tokens/sets.cljs index 3a870fcdcb..fbb2b2a888 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sets.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/sets.cljs @@ -1,14 +1,14 @@ (ns app.main.ui.workspace.tokens.sets (:require-macros [app.main.style :as stl]) (:require - [app.main.ui.icons :as i] + [app.common.data.macros :as dm] + [app.main.store :as st] [app.main.ui.components.title-bar :refer [title-bar]] [app.main.ui.context :as ctx] - [app.main.store :as st] - [app.common.data.macros :as dm] + [app.main.ui.icons :as i] [app.util.dom :as dom] - [potok.v2.core :as ptk] [okulary.core :as l] + [potok.v2.core :as ptk] [rumext.v2 :as mf])) @@ -43,11 +43,11 @@ (defn set-current-set [set-id] - (dm/assert! (uuid? set-id)) - (ptk/reify ::set-current-set + (dm/assert! (uuid? set-id)) + (ptk/reify ::set-current-set ptk/UpdateEvent - (update [_ state] - (assoc state :current-set-id set-id)))) + (update [_ state] + (assoc state :current-set-id set-id)))) (mf/defc sets-tree [{:keys [current-set-id set-id toggle-visibility]}] @@ -59,29 +59,28 @@ icon (cond (= type :set) i/document (and (= type :group) @collapsed?) i/group - :else i/folder-open) + :else i/folder-open) selected? (mf/use-state (= set-id current-set-id)) - on-click - (mf/use-fn - (mf/deps type set-id) - #(st/emit! (set-current-set set-id)) - )] + on-click + (mf/use-fn + (mf/deps type set-id) + #(st/emit! (set-current-set set-id)))] [:div {:class (stl/css :set-item-container) :on-click on-click} - [:div {:class (stl/css-case :set-item-group (= type :group) - :set-item-set-selected @selected? - :set-item-set (and (= type :set ) (not @selected?)))} - [:span {:class (stl/css :icon) - :on-click #(when (= type :group) (swap! collapsed? not))} icon] - [:div {:class (stl/css :set-name)} name] - (when (= type :set) - [:span {:class (stl/css :action-btn) - :on-click #(swap! visible? not)} - (if @visible? + [:div {:class (stl/css-case :set-item-group (= type :group) + :set-item-set-selected @selected? + :set-item-set (and (= type :set) (not @selected?)))} + [:span {:class (stl/css :icon) + :on-click #(when (= type :group) (swap! collapsed? not))} icon] + [:div {:class (stl/css :set-name)} name] + (when (= type :set) + [:span {:class (stl/css :action-btn) + :on-click #(swap! visible? not)} + (if @visible? i/shown i/hide)])] - (when (and children (not @collapsed?)) + (when (and children (not @collapsed?)) [:div {:class (stl/css :set-children)} (for [child-id children] (do @@ -93,24 +92,24 @@ (if (contains? active-sets set-id) (swap! active-sets disj set-id) (swap! active-sets conj set-id)))] - [:ul {:class (stl/css :sets-list)} - (for [set-id sets-root-order] - ^{:key (str set-id)} - [:& sets-tree {:key (str set-id) :set-id set-id :current-set-id current-set-id}])])) + [:ul {:class (stl/css :sets-list)} + (for [set-id sets-root-order] + ^{:key (str set-id)} + [:& sets-tree {:key (str set-id) :set-id set-id :current-set-id current-set-id}])])) (mf/defc sets-sidebar [] (let [current-set-id (mf/deref current-set-id) open? (mf/use-state true)] - [:div {:key (str "sidebar-" current-set-id) - :class (stl/css :sets-sidebar)} - [:div {:class (stl/css :sidebar-header)} - [:& title-bar {:collapsable true - :collapsed (not @open?) - :title "SETS" - :on-collapsed #(swap! open? not)}] - [:button {:class (stl/css :add-set) - :on-click #(println "Add Set")} - i/add]] + [:div {:key (str "sidebar-" current-set-id) + :class (stl/css :sets-sidebar)} + [:div {:class (stl/css :sidebar-header)} + [:& title-bar {:collapsable true + :collapsed (not @open?) + :title "SETS" + :on-collapsed #(swap! open? not)}] + [:button {:class (stl/css :add-set) + :on-click #(println "Add Set")} + i/add]] (when @open? - [:& sets-list {:current-set-id current-set-id}])])) + [:& sets-list {:current-set-id current-set-id}])])) diff --git a/frontend/src/app/main/ui/workspace/tokens/sets.scss b/frontend/src/app/main/ui/workspace/tokens/sets.scss index 1dd0472c60..ff30f6ad8f 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sets.scss +++ b/frontend/src/app/main/ui/workspace/tokens/sets.scss @@ -51,17 +51,17 @@ /*&:hover{ box-shadow: 20px 0 0 0 var(--layer-row-background-color-hover); }*/ - } -.set-item-set, .set-item-group { +.set-item-set, +.set-item-group { @include bodySmallTypography; display: flex; align-items: center; min-height: $s-32; width: 100%; cursor: pointer; - color: var(--layer-row-foreground-color); + color: var(--layer-row-foreground-color); .set-name { @include textEllipsis; flex-grow: 1; @@ -85,12 +85,11 @@ } } -.set-item-set{ +.set-item-set { &:hover { background-color: var(--layer-row-background-color-hover); color: var(--layer-row-foreground-color-hover); box-shadow: -100px 0 0 0 var(--layer-row-background-color-hover); - } } @@ -107,7 +106,7 @@ min-height: $s-32; width: 100%; cursor: pointer; - //color: var(--layer-row-foreground-color); + //color: var(--layer-row-foreground-color); background-color: var(--layer-row-background-color-selected); color: var(--layer-row-foreground-color-selected); box-shadow: -20px 0 0 0 var(--layer-row-background-color-selected); @@ -137,7 +136,6 @@ background-color: var(--layer-row-background-color-hover); color: var(--layer-row-foreground-color-hover); box-shadow: -100px 0 0 0 var(--layer-row-background-color-hover); - } } .action-btn { From 007cf0fb8aef9604eaf4a140d3fb057c1431cd7d Mon Sep 17 00:00:00 2001 From: Akshay Gupta Date: Tue, 13 Aug 2024 21:50:55 +0530 Subject: [PATCH 16/41] remove comments and unused import --- frontend/src/app/main/ui/workspace/tokens/sets.cljs | 2 -- frontend/src/app/main/ui/workspace/tokens/sets.scss | 3 --- 2 files changed, 5 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/tokens/sets.cljs b/frontend/src/app/main/ui/workspace/tokens/sets.cljs index fbb2b2a888..e75a43ac35 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sets.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/sets.cljs @@ -4,14 +4,12 @@ [app.common.data.macros :as dm] [app.main.store :as st] [app.main.ui.components.title-bar :refer [title-bar]] - [app.main.ui.context :as ctx] [app.main.ui.icons :as i] [app.util.dom :as dom] [okulary.core :as l] [potok.v2.core :as ptk] [rumext.v2 :as mf])) - (def current-set-id (l/derived :current-set-id st/state)) diff --git a/frontend/src/app/main/ui/workspace/tokens/sets.scss b/frontend/src/app/main/ui/workspace/tokens/sets.scss index ff30f6ad8f..18489e2ef5 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sets.scss +++ b/frontend/src/app/main/ui/workspace/tokens/sets.scss @@ -48,9 +48,6 @@ cursor: pointer; color: var(--layer-row-foreground-color); padding-left: 20px; - /*&:hover{ - box-shadow: 20px 0 0 0 var(--layer-row-background-color-hover); - }*/ } .set-item-set, From 21c42626ae634ea98606a49ea80a7ec206083c35 Mon Sep 17 00:00:00 2001 From: Akshay Gupta Date: Tue, 13 Aug 2024 21:51:31 +0530 Subject: [PATCH 17/41] remove comment --- frontend/src/app/main/ui/workspace/tokens/sidebar.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.scss b/frontend/src/app/main/ui/workspace/tokens/sidebar.scss index 4f2fd9bee2..18ea94eec0 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sidebar.scss +++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.scss @@ -17,7 +17,7 @@ .sets-sidebar { flex-shrink: 0; overflow-y: auto; - max-height: 40%; // Adjust this value as needed + max-height: 40%; } .tokens-section-wrapper { From 74c6228c25459a92c3d4fe8e6508299196aceb59 Mon Sep 17 00:00:00 2001 From: Akshay Gupta Date: Wed, 14 Aug 2024 17:15:30 +0530 Subject: [PATCH 18/41] add dom/stop-propagation --- frontend/src/app/main/ui/workspace/tokens/sets.cljs | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/frontend/src/app/main/ui/workspace/tokens/sets.cljs b/frontend/src/app/main/ui/workspace/tokens/sets.cljs index e75a43ac35..2c369d4f58 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sets.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/sets.cljs @@ -63,7 +63,9 @@ on-click (mf/use-fn (mf/deps type set-id) - #(st/emit! (set-current-set set-id)))] + (fn [event] + (dom/stop-propagation event) + (st/emit! (set-current-set set-id))))] [:div {:class (stl/css :set-item-container) :on-click on-click} [:div {:class (stl/css-case :set-item-group (= type :group) From cf9ef2ae6038734557fe1a3c4ff8d4eb703afae7 Mon Sep 17 00:00:00 2001 From: Florian Schroedl Date: Wed, 14 Aug 2024 15:33:24 +0200 Subject: [PATCH 19/41] Remove unused function --- frontend/src/app/main/ui/workspace/tokens/changes.cljs | 9 --------- 1 file changed, 9 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/tokens/changes.cljs b/frontend/src/app/main/ui/workspace/tokens/changes.cljs index 45ff044df4..fa3efb7188 100644 --- a/frontend/src/app/main/ui/workspace/tokens/changes.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/changes.cljs @@ -148,15 +148,6 @@ (rx/of (dwsl/update-layout layout-shape-ids layout-attributes)))))) -(defn update-layout-spacing-column [value shape-ids] - (ptk/reify ::update-layout-spacing-column - ptk/WatchEvent - (watch [_ _ _] - (rx/concat - (for [shape-id shape-ids] - (let [layout-update {:layout-gap {:column-gap value :row-gap value}}] - (dwsl/update-layout [shape-id] layout-update))))))) - (defn update-shape-position [value shape-ids attributes] (ptk/reify ::update-shape-position ptk/WatchEvent From 1ba2acea7c2e296b95f2bbe7d867c5fc52a5b67d Mon Sep 17 00:00:00 2001 From: Florian Schroedl Date: Wed, 14 Aug 2024 16:39:43 +0200 Subject: [PATCH 20/41] Fix crash for applying spacing layout token --- .../options/menus/layout_container.cljs | 25 +++++++++++++------ .../app/main/ui/workspace/tokens/changes.cljs | 3 +++ .../ui/workspace/tokens/context_menu.cljs | 11 ++++---- 3 files changed, 25 insertions(+), 14 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs index b2f71ae23b..294185fe6f 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs @@ -29,6 +29,8 @@ [app.main.ui.icons :as i] [app.main.ui.workspace.tokens.core :as wtc] [app.main.ui.workspace.tokens.editable-select :refer [editable-select]] + [app.main.ui.workspace.tokens.token :as wtt] + [app.main.ui.workspace.tokens.changes :as wtch] [app.main.ui.workspace.tokens.token-types :as wtty] [app.util.dom :as dom] [app.util.i18n :as i18n :refer [tr]] @@ -985,18 +987,25 @@ (mf/use-fn (mf/deps ids) (fn [type prop value] - (let [token-value (wtc/maybe-resolve-token-value value) - val (or token-value (mth/finite value 0))] + (let [token-identifier (wtt/token-identifier value) + val (or token-identifier (mth/finite value 0)) + on-update-shape wtch/update-layout-padding] (cond (and (= type :simple) (= prop :p1)) - (st/emit! (dwsl/update-layout ids {:layout-padding {:p1 val :p3 val} - :applied-tokens {:padding-p1 (if token-value (:id value) nil) - :padding-p3 (if token-value (:id value) nil)}})) + (if token-identifier + (st/emit! (wtch/apply-token {:shape-ids ids + :attributes #{:p1 :p3} + :token value + :on-update-shape on-update-shape})) + (st/emit! (on-update-shape value ids #{:p1 :p3}))) (and (= type :simple) (= prop :p2)) - (st/emit! (dwsl/update-layout ids {:layout-padding {:p2 val :p4 val} - :applied-tokens {:padding-p2 (if token-value (:id value) nil) - :padding-p4 (if token-value (:id value) nil)}})) + (if token-identifier + (st/emit! (wtch/apply-token {:shape-ids ids + :attributes #{:p2 :p4} + :token value + :on-update-shape on-update-shape})) + (st/emit! (on-update-shape value ids #{:p2 :p4}))) (some? prop) (st/emit! (dwsl/update-layout ids {:layout-padding {prop val}})))))) diff --git a/frontend/src/app/main/ui/workspace/tokens/changes.cljs b/frontend/src/app/main/ui/workspace/tokens/changes.cljs index fa3efb7188..95243ee513 100644 --- a/frontend/src/app/main/ui/workspace/tokens/changes.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/changes.cljs @@ -136,6 +136,9 @@ (zipmap (repeat value)))] {:layout-gap layout-gap})) +(defn update-layout-padding [value shape-ids attrs] + (dwsl/update-layout shape-ids {:layout-padding (zipmap attrs (repeat value))})) + (defn update-layout-spacing [value shape-ids attributes] (ptk/reify ::update-layout-spacing ptk/WatchEvent diff --git a/frontend/src/app/main/ui/workspace/tokens/context_menu.cljs b/frontend/src/app/main/ui/workspace/tokens/context_menu.cljs index 615f758d41..57e6311d10 100644 --- a/frontend/src/app/main/ui/workspace/tokens/context_menu.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/context_menu.cljs @@ -81,8 +81,7 @@ (concat [all-action] single-actions))) (defn spacing-attribute-actions [{:keys [token selected-shapes] :as context-data}] - (let [on-update-shape (fn [resolved-value shape-ids attrs] - (dwsl/update-layout shape-ids {:layout-padding (zipmap attrs (repeat resolved-value))})) + (let [on-update-shape-padding wtch/update-layout-padding padding-attrs {:p1 "Top" :p2 "Right" :p3 "Bottom" @@ -105,7 +104,7 @@ :shape-ids shape-ids}] (if all-selected? (st/emit! (wtch/unapply-token props)) - (st/emit! (wtch/apply-token (assoc props :on-update-shape on-update-shape))))))} + (st/emit! (wtch/apply-token (assoc props :on-update-shape on-update-shape-padding))))))} {:title "Horizontal" :selected? horizontal-padding-selected? :action (fn [] @@ -116,7 +115,7 @@ horizontal-padding-selected? (wtch/apply-token (assoc props :attributes-to-remove horizontal-attributes)) :else (wtch/apply-token (assoc props :attributes horizontal-attributes - :on-update-shape on-update-shape)))] + :on-update-shape on-update-shape-padding)))] (st/emit! event)))} {:title "Vertical" :selected? vertical-padding-selected? @@ -128,7 +127,7 @@ vertical-padding-selected? (wtch/apply-token (assoc props :attributes-to-remove vertical-attributes)) :else (wtch/apply-token (assoc props :attributes vertical-attributes - :on-update-shape on-update-shape)))] + :on-update-shape on-update-shape-padding)))] (st/emit! event)))}] single-padding-items (->> padding-attrs (map (fn [[attr title]] @@ -149,7 +148,7 @@ all-selected? (-> (assoc props :attributes-to-remove all-padding-attrs) (wtch/apply-token)) selected? (wtch/unapply-token props) - :else (-> (assoc props :on-update-shape on-update-shape) + :else (-> (assoc props :on-update-shape on-update-shape-padding) (wtch/apply-token)))] (st/emit! event))})))) gap-items (all-or-sepearate-actions {:attribute-labels {:column-gap "Column Gap" From ecf4fb8bd055fc0be230f85f4ded8da1a53cda96 Mon Sep 17 00:00:00 2001 From: Florian Schroedl Date: Wed, 14 Aug 2024 16:52:46 +0200 Subject: [PATCH 21/41] Fix popover position --- frontend/src/app/main/ui/workspace/tokens/editable_select.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/frontend/src/app/main/ui/workspace/tokens/editable_select.scss b/frontend/src/app/main/ui/workspace/tokens/editable_select.scss index c0905cb8db..c404919ec8 100644 --- a/frontend/src/app/main/ui/workspace/tokens/editable_select.scss +++ b/frontend/src/app/main/ui/workspace/tokens/editable_select.scss @@ -14,6 +14,7 @@ width: 100%; padding: $s-8; border-radius: $br-8; + position: relative; cursor: pointer; background: transparent; From 6be2ca8491a4ea402d543360a2fab89fd8e4e922 Mon Sep 17 00:00:00 2001 From: Florian Schroedl Date: Thu, 15 Aug 2024 09:21:18 +0200 Subject: [PATCH 22/41] Fix resolved value not showing up when editing token --- frontend/src/app/main/ui/workspace/tokens/form.cljs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/app/main/ui/workspace/tokens/form.cljs b/frontend/src/app/main/ui/workspace/tokens/form.cljs index 4521906289..20e1b3dc4a 100644 --- a/frontend/src/app/main/ui/workspace/tokens/form.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/form.cljs @@ -177,7 +177,7 @@ Token names should only contain letters and digits separated by . characters.")} ;; Value value-ref (mf/use-var (:value token)) - token-resolve-result (mf/use-state (get-in tokens [(:id token) :resolved-value])) + token-resolve-result (mf/use-state (get-in resolved-tokens [(wtt/token-identifier token) :resolved-value])) set-resolve-value (mf/use-callback (fn [token-or-err] (let [v (cond From c6d13af071d82ea401c7d73c5ced00f58d1c0e31 Mon Sep 17 00:00:00 2001 From: Florian Schroedl Date: Thu, 15 Aug 2024 09:21:49 +0200 Subject: [PATCH 23/41] Fix validation not working while editing [*] [*] We've passed the resolved tokens to the validation, but the validation needs the original tokens set. --- .../src/app/main/ui/workspace/tokens/form.cljs | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/tokens/form.cljs b/frontend/src/app/main/ui/workspace/tokens/form.cljs index 20e1b3dc4a..5e3351940f 100644 --- a/frontend/src/app/main/ui/workspace/tokens/form.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/form.cljs @@ -8,14 +8,15 @@ (:require-macros [app.main.style :as stl]) (:require ["lodash.debounce" :as debounce] - [app.main.ui.workspace.tokens.update :as wtu] [app.common.data :as d] [app.main.data.modal :as modal] [app.main.data.tokens :as dt] + [app.main.refs :as refs] [app.main.store :as st] [app.main.ui.workspace.tokens.common :as tokens.common] [app.main.ui.workspace.tokens.style-dictionary :as sd] [app.main.ui.workspace.tokens.token :as wtt] + [app.main.ui.workspace.tokens.update :as wtu] [app.util.dom :as dom] [cuerdas.core :as str] [malli.core :as m] @@ -141,14 +142,15 @@ Token names should only contain letters and digits separated by . characters.")} (mf/defc form {::mf/wrap-props false} [{:keys [token token-type] :as _args}] - (let [tokens (sd/use-resolved-workspace-tokens) + (let [tokens (mf/deref refs/workspace-tokens) + resolved-tokens (sd/use-resolved-tokens tokens) token-path (mf/use-memo (mf/deps (:name token)) #(wtt/token-name->path (:name token))) tokens-tree (mf/use-memo - (mf/deps token-path tokens) + (mf/deps token-path resolved-tokens) (fn [] - (-> (wtt/token-names-tree tokens) + (-> (wtt/token-names-tree resolved-tokens) ;; Allow setting editing token to it's own path (d/dissoc-in token-path)))) @@ -219,7 +221,7 @@ Token names should only contain letters and digits separated by . characters.")} (not valid-description-field?)) on-submit (mf/use-callback - (mf/deps validate-name validate-descripion token tokens) + (mf/deps validate-name validate-descripion token resolved-tokens) (fn [e] (dom/prevent-default e) ;; We have to re-validate the current form values before submitting @@ -236,7 +238,7 @@ Token names should only contain letters and digits separated by . characters.")} (validate-token-value+ {:input final-value :name-value final-name :token token - :tokens tokens})]) + :tokens resolved-tokens})]) (p/finally (fn [result err] ;; The result should be a vector of all resolved validations ;; We do not handle the error case as it will be handled by the components validations From e4e488a9eee087befc68aaede1060d381b239af3 Mon Sep 17 00:00:00 2001 From: Florian Schroedl Date: Thu, 15 Aug 2024 10:03:25 +0200 Subject: [PATCH 24/41] Adds style-dictionary test --- .../token_tests/style_dictionary_test.cljs | 37 +++++++++++++++++++ 1 file changed, 37 insertions(+) create mode 100644 frontend/test/token_tests/style_dictionary_test.cljs diff --git a/frontend/test/token_tests/style_dictionary_test.cljs b/frontend/test/token_tests/style_dictionary_test.cljs new file mode 100644 index 0000000000..f15870a604 --- /dev/null +++ b/frontend/test/token_tests/style_dictionary_test.cljs @@ -0,0 +1,37 @@ +(ns token-tests.style-dictionary-test + (:require + [app.main.ui.workspace.tokens.style-dictionary :as sd] + [cljs.test :as t :include-macros true] + [promesa.core :as p])) + +(def border-radius-token + {:id #uuid "8c868278-7c8d-431b-bbc9-7d8f15c8edb9" + :value "12" + :name "borderRadius.sm" + :type :border-radius}) + +(def reference-border-radius-token + {:id #uuid "b9448d78-fd5b-4e3d-aa32-445904063f5b" + :value "{borderRadius.sm} * 2" + :name "borderRadius.md-with-dashes" + :type :border-radius}) + +(def tokens {(:id border-radius-token) border-radius-token + (:id reference-border-radius-token) reference-border-radius-token}) + +(t/deftest resolve-tokens-test + (t/async + done + (t/testing "resolves tokens using style-dictionary" + (-> (sd/resolve-tokens+ tokens) + (p/finally (fn [resolved-tokens] + (let [expected-tokens {"borderRadius.sm" + (assoc border-radius-token + :resolved-value 12 + :resolved-unit nil) + "borderRadius.md-with-dashes" + (assoc reference-border-radius-token + :resolved-value 24 + :resolved-unit nil)}] + (t/is (= expected-tokens resolved-tokens)) + (done)))))))) From 4bd3b14adbe6c1b98cbbd4fa177c9c8887305851 Mon Sep 17 00:00:00 2001 From: Florian Schroedl Date: Thu, 15 Aug 2024 10:07:12 +0200 Subject: [PATCH 25/41] Add unit to tests --- frontend/test/token_tests/style_dictionary_test.cljs | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/frontend/test/token_tests/style_dictionary_test.cljs b/frontend/test/token_tests/style_dictionary_test.cljs index f15870a604..cc96abe1b8 100644 --- a/frontend/test/token_tests/style_dictionary_test.cljs +++ b/frontend/test/token_tests/style_dictionary_test.cljs @@ -6,7 +6,7 @@ (def border-radius-token {:id #uuid "8c868278-7c8d-431b-bbc9-7d8f15c8edb9" - :value "12" + :value "12px" :name "borderRadius.sm" :type :border-radius}) @@ -28,10 +28,10 @@ (let [expected-tokens {"borderRadius.sm" (assoc border-radius-token :resolved-value 12 - :resolved-unit nil) + :resolved-unit "px") "borderRadius.md-with-dashes" (assoc reference-border-radius-token :resolved-value 24 - :resolved-unit nil)}] + :resolved-unit "px")}] (t/is (= expected-tokens resolved-tokens)) (done)))))))) From 43e064a768b3fea692120c13574f3585f08d9e79 Mon Sep 17 00:00:00 2001 From: Florian Schroedl Date: Thu, 15 Aug 2024 10:12:45 +0200 Subject: [PATCH 26/41] Update doc string --- .../src/app/main/ui/workspace/tokens/style_dictionary.cljs | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/tokens/style_dictionary.cljs b/frontend/src/app/main/ui/workspace/tokens/style_dictionary.cljs index 81881d8109..3ce334a025 100644 --- a/frontend/src/app/main/ui/workspace/tokens/style_dictionary.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/style_dictionary.cljs @@ -9,9 +9,8 @@ [rumext.v2 :as mf])) (def StyleDictionary - "The global StyleDictionary instance used as an external library for now, - as the package would need webpack to be bundled, - because shadow-cljs doesn't support some of the more modern bundler features." + "Initiates the global StyleDictionary instance with transforms + from tokens-studio used to parse and resolved token values." (do (sd-transforms/registerTransforms sd) (.registerFormat sd #js {:name "custom/json" From 98b5791e273115cd7edea8287708512033e8df1d Mon Sep 17 00:00:00 2001 From: Akshay Gupta Date: Tue, 20 Aug 2024 15:37:37 +0530 Subject: [PATCH 27/41] remove set-item-set-selected and remove class --- .../app/main/ui/workspace/tokens/sets.cljs | 4 +- .../app/main/ui/workspace/tokens/sets.scss | 41 +------------------ 2 files changed, 3 insertions(+), 42 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/tokens/sets.cljs b/frontend/src/app/main/ui/workspace/tokens/sets.cljs index 2c369d4f58..dae3da5560 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sets.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/sets.cljs @@ -69,8 +69,8 @@ [:div {:class (stl/css :set-item-container) :on-click on-click} [:div {:class (stl/css-case :set-item-group (= type :group) - :set-item-set-selected @selected? - :set-item-set (and (= type :set) (not @selected?)))} + :set-item-set (= type :set) + :selected-set (and (= type :set) @selected?))} [:span {:class (stl/css :icon) :on-click #(when (= type :group) (swap! collapsed? not))} icon] [:div {:class (stl/css :set-name)} name] diff --git a/frontend/src/app/main/ui/workspace/tokens/sets.scss b/frontend/src/app/main/ui/workspace/tokens/sets.scss index 18489e2ef5..66c887109c 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sets.scss +++ b/frontend/src/app/main/ui/workspace/tokens/sets.scss @@ -93,48 +93,9 @@ .selected-set { background-color: var(--layer-row-background-color-selected); color: var(--layer-row-foreground-color-selected); - box-shadow: -20px 0 0 0 var(--layer-row-background-color-selected); + box-shadow: -100px 0 0 0 var(--layer-row-background-color-selected); } -.set-item-set-selected { - @include bodySmallTypography; - display: flex; - align-items: center; - min-height: $s-32; - width: 100%; - cursor: pointer; - //color: var(--layer-row-foreground-color); - background-color: var(--layer-row-background-color-selected); - color: var(--layer-row-foreground-color-selected); - box-shadow: -20px 0 0 0 var(--layer-row-background-color-selected); - - .set-name { - @include textEllipsis; - flex-grow: 1; - padding-left: $s-2; - } - - .icon { - display: flex; - align-items: center; - width: $s-20; - height: $s-20; - padding-right: $s-4; - - svg { - height: $s-20; - width: $s-20; - color: white; - fill: none; - stroke: var(--icon-foreground); - } - } - &:hover { - background-color: var(--layer-row-background-color-hover); - color: var(--layer-row-foreground-color-hover); - box-shadow: -100px 0 0 0 var(--layer-row-background-color-hover); - } -} .action-btn { @extend .button-tertiary; height: $s-20; From e4f5b6005eb1a8ac5b6705beb7ad3e1579dbcc00 Mon Sep 17 00:00:00 2001 From: Akshay Gupta Date: Tue, 20 Aug 2024 16:30:38 +0530 Subject: [PATCH 28/41] move sets-sidebar component to sidebar tokens --- .../app/main/ui/workspace/tokens/sidebar.cljs | 24 ++++++++++++-- .../app/main/ui/workspace/tokens/sidebar.scss | 32 +++++++++++++++++-- 2 files changed, 52 insertions(+), 4 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs index c4bbfc7988..f2efba40c2 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs @@ -20,7 +20,8 @@ [app.main.ui.workspace.tokens.style-dictionary :as sd] [app.main.ui.workspace.tokens.token :as wtt] [app.main.ui.workspace.tokens.token-types :as wtty] - [app.main.ui.workspace.tokens.sets :refer [sets-sidebar]] + [app.main.ui.components.title-bar :refer [title-bar]] + [app.main.ui.workspace.tokens.sets :refer [sets-list]] [app.util.dom :as dom] [cuerdas.core :as str] [okulary.core :as l] @@ -33,6 +34,9 @@ (def ^:private download-icon (i/icon-xref :download (stl/css :download-icon))) +(def current-set-id + (l/derived :current-set-id st/state)) + (mf/defc token-pill {::mf/wrap-props false} [{:keys [on-click token highlighted? on-context-menu]}] @@ -167,13 +171,29 @@ :tokens tokens :token-type-props token-type-props}])]])) +(mf/defc sets-sidebar + [] + (let [current-set-id (mf/deref current-set-id) + open? (mf/use-state true)] + [:div {:key (str "sidebar-" current-set-id) + :class (stl/css :sets-sidebar)} + [:div {:class (stl/css :sidebar-header)} + [:& title-bar {:collapsable true + :collapsed (not @open?) + :title "SETS" + :on-collapsed #(swap! open? not)}] + [:button {:class (stl/css :add-set) + :on-click #(println "Add Set")} + i/add]] + (when @open? + [:& sets-list {:current-set-id current-set-id}])])) + (mf/defc tokens-sidebar-tab {::mf/wrap [mf/memo] ::mf/wrap-props false} [_props] [:div {:class (stl/css :sidebar-tab-wrapper)} [:& sets-sidebar] - ;;[:div {:class (stl/css :divider)}] [:div {:class (stl/css :tokens-section-wrapper)} [:& tokens-explorer]] [:button {:class (stl/css :download-json-button) diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.scss b/frontend/src/app/main/ui/workspace/tokens/sidebar.scss index 18ea94eec0..252d38ea89 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sidebar.scss +++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.scss @@ -15,11 +15,39 @@ } .sets-sidebar { - flex-shrink: 0; + position: relative; + display: flex; + flex-direction: column; + flex: 1; + width: 100%; + height: var(--height, $s-200); overflow-y: auto; - max-height: 40%; } +.sidebar-header { + display: flex; + align-items: center; + justify-content: space-between; + margin-left: $s-2; + padding-top: $s-2; + color: var(--layer-row-foreground-color); +} + +.add-set { + @extend .button-tertiary; + height: $s-32; + width: $s-28; + padding: 0; + margin-right: $s-12; + svg { + @extend .button-icon; + stroke: var(--icon-foreground); + transform: rotate(90deg); + } +} + + + .tokens-section-wrapper { flex: 1; overflow-y: auto; From 4bad9fa6f889965e9044389ec982109eef2b52fd Mon Sep 17 00:00:00 2001 From: Akshay Gupta Date: Tue, 20 Aug 2024 16:30:51 +0530 Subject: [PATCH 29/41] add chevron icon --- .../app/main/ui/workspace/tokens/sets.cljs | 39 ++++--------- .../app/main/ui/workspace/tokens/sets.scss | 56 +++++++++---------- 2 files changed, 37 insertions(+), 58 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/tokens/sets.cljs b/frontend/src/app/main/ui/workspace/tokens/sets.cljs index dae3da5560..d7637410e4 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sets.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/sets.cljs @@ -3,16 +3,12 @@ (:require [app.common.data.macros :as dm] [app.main.store :as st] - [app.main.ui.components.title-bar :refer [title-bar]] [app.main.ui.icons :as i] [app.util.dom :as dom] [okulary.core :as l] [potok.v2.core :as ptk] [rumext.v2 :as mf])) -(def current-set-id - (l/derived :current-set-id st/state)) - (def active-sets #{#uuid "2858b330-828e-4131-86ed-e4d1c0f4b3e3" #uuid "d608877b-842a-473b-83ca-b5f8305caf83"}) @@ -39,6 +35,9 @@ #uuid "0381446e-1f1d-423f-912c-ab577d61b79b" {:type :set :name "Set Root 2"}}) +(def ^:private chevron-icon + (i/icon-xref :arrow (stl/css :chevron-icon))) + (defn set-current-set [set-id] (dm/assert! (uuid? set-id)) @@ -54,10 +53,7 @@ (let [{:keys [type name children]} set visible? (mf/use-state (contains? active-sets set-id)) collapsed? (mf/use-state false) - icon (cond - (= type :set) i/document - (and (= type :group) @collapsed?) i/group - :else i/folder-open) + icon (if (= type :set) i/document i/group) selected? (mf/use-state (= set-id current-set-id)) on-click @@ -71,8 +67,13 @@ [:div {:class (stl/css-case :set-item-group (= type :group) :set-item-set (= type :set) :selected-set (and (= type :set) @selected?))} - [:span {:class (stl/css :icon) - :on-click #(when (= type :group) (swap! collapsed? not))} icon] + (when (= type :group) + [:span {:class (stl/css-case + :collapsabled-icon true + :collapsed @collapsed?) + :on-click #(when (= type :group) (swap! collapsed? not))} + chevron-icon]) + [:span {:class (stl/css :icon)} icon] [:div {:class (stl/css :set-name)} name] (when (= type :set) [:span {:class (stl/css :action-btn) @@ -96,20 +97,4 @@ (for [set-id sets-root-order] ^{:key (str set-id)} [:& sets-tree {:key (str set-id) :set-id set-id :current-set-id current-set-id}])])) - -(mf/defc sets-sidebar - [] - (let [current-set-id (mf/deref current-set-id) - open? (mf/use-state true)] - [:div {:key (str "sidebar-" current-set-id) - :class (stl/css :sets-sidebar)} - [:div {:class (stl/css :sidebar-header)} - [:& title-bar {:collapsable true - :collapsed (not @open?) - :title "SETS" - :on-collapsed #(swap! open? not)}] - [:button {:class (stl/css :add-set) - :on-click #(println "Add Set")} - i/add]] - (when @open? - [:& sets-list {:current-set-id current-set-id}])])) + diff --git a/frontend/src/app/main/ui/workspace/tokens/sets.scss b/frontend/src/app/main/ui/workspace/tokens/sets.scss index 66c887109c..adfbfe0c66 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sets.scss +++ b/frontend/src/app/main/ui/workspace/tokens/sets.scss @@ -6,37 +6,6 @@ @import "refactor/common-refactor.scss"; -.sets-sidebar { - position: relative; - display: flex; - flex-direction: column; - flex: 1; - width: 100%; - height: var(--height, $s-200); - overflow-y: auto; -} - -.sidebar-header { - display: flex; - align-items: center; - justify-content: space-between; - margin-left: $s-2; - color: var(--layer-row-foreground-color); -} - -.add-set { - @extend .button-tertiary; - height: $s-32; - width: $s-28; - padding: 0; - margin-right: $s-12; - svg { - @extend .button-icon; - stroke: var(--icon-foreground); - transform: rotate(90deg); - } -} - .sets-list { width: 100%; margin-bottom: $s-12; @@ -106,3 +75,28 @@ height: 12px; } } + +.collapsabled-icon { + @include buttonStyle; + @include flexCenter; + height: $s-24; + border-radius: $br-8; + + --chevron-icon-rotation: 90deg; + + &.collapsed { + --chevron-icon-rotation: 0deg; + } + + &:hover { + --chevron-icon-color: var(--title-foreground-color-hover); + } +} + +.chevron-icon { + @extend .button-icon-small; + //color: var(--icon-foreground); + margin-right: 5px; + transform: rotate(var(--chevron-icon-rotation)); + stroke: var(--icon-foreground); +} From d4c88d444161421134b5dc47803922d05e972209 Mon Sep 17 00:00:00 2001 From: Akshay Gupta Date: Tue, 20 Aug 2024 16:32:36 +0530 Subject: [PATCH 30/41] remove folder open icon --- frontend/resources/images/icons/folder-open.svg | 7 ------- frontend/src/app/main/ui/icons.cljs | 1 - 2 files changed, 8 deletions(-) delete mode 100644 frontend/resources/images/icons/folder-open.svg diff --git a/frontend/resources/images/icons/folder-open.svg b/frontend/resources/images/icons/folder-open.svg deleted file mode 100644 index ef5d15ab89..0000000000 --- a/frontend/resources/images/icons/folder-open.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - diff --git a/frontend/src/app/main/ui/icons.cljs b/frontend/src/app/main/ui/icons.cljs index 8c298c3506..df8f1bf3ad 100644 --- a/frontend/src/app/main/ui/icons.cljs +++ b/frontend/src/app/main/ui/icons.cljs @@ -120,7 +120,6 @@ (def ^:icon flex (icon-xref :flex)) (def ^:icon flip-horizontal (icon-xref :flip-horizontal)) (def ^:icon flip-vertical (icon-xref :flip-vertical)) -(def ^:icon folder-open (icon-xref :folder-open)) (def ^:icon gap-horizontal (icon-xref :gap-horizontal)) (def ^:icon gap-vertical (icon-xref :gap-vertical)) (def ^:icon graphics (icon-xref :graphics)) From e62323ac0a254483a5a5285c580d8f9c1503982f Mon Sep 17 00:00:00 2001 From: Akshay Gupta Date: Tue, 20 Aug 2024 16:35:33 +0530 Subject: [PATCH 31/41] add variable --- frontend/src/app/main/ui/workspace/tokens/sets.scss | 5 ++--- frontend/src/app/main/ui/workspace/tokens/sidebar.scss | 2 -- 2 files changed, 2 insertions(+), 5 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/tokens/sets.scss b/frontend/src/app/main/ui/workspace/tokens/sets.scss index adfbfe0c66..a4817d819b 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sets.scss +++ b/frontend/src/app/main/ui/workspace/tokens/sets.scss @@ -16,7 +16,7 @@ width: 100%; cursor: pointer; color: var(--layer-row-foreground-color); - padding-left: 20px; + padding-left: $s-20; } .set-item-set, @@ -95,8 +95,7 @@ .chevron-icon { @extend .button-icon-small; - //color: var(--icon-foreground); - margin-right: 5px; + margin-right: $s-6; transform: rotate(var(--chevron-icon-rotation)); stroke: var(--icon-foreground); } diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.scss b/frontend/src/app/main/ui/workspace/tokens/sidebar.scss index 252d38ea89..e65b85a035 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sidebar.scss +++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.scss @@ -46,8 +46,6 @@ } } - - .tokens-section-wrapper { flex: 1; overflow-y: auto; From f052b75dacb0c256642ef2b9ed8d212fedb9183d Mon Sep 17 00:00:00 2001 From: Akshay Gupta Date: Tue, 20 Aug 2024 16:38:18 +0530 Subject: [PATCH 32/41] formatting --- frontend/src/app/main/ui/workspace/tokens/sets.cljs | 12 ++++++------ .../src/app/main/ui/workspace/tokens/sidebar.cljs | 6 +++--- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/tokens/sets.cljs b/frontend/src/app/main/ui/workspace/tokens/sets.cljs index d7637410e4..29dc279233 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sets.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/sets.cljs @@ -68,11 +68,11 @@ :set-item-set (= type :set) :selected-set (and (= type :set) @selected?))} (when (= type :group) - [:span {:class (stl/css-case - :collapsabled-icon true - :collapsed @collapsed?) - :on-click #(when (= type :group) (swap! collapsed? not))} - chevron-icon]) + [:span {:class (stl/css-case + :collapsabled-icon true + :collapsed @collapsed?) + :on-click #(when (= type :group) (swap! collapsed? not))} + chevron-icon]) [:span {:class (stl/css :icon)} icon] [:div {:class (stl/css :set-name)} name] (when (= type :set) @@ -97,4 +97,4 @@ (for [set-id sets-root-order] ^{:key (str set-id)} [:& sets-tree {:key (str set-id) :set-id set-id :current-set-id current-set-id}])])) - + diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs index f2efba40c2..7ea4e49ec9 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs @@ -12,16 +12,16 @@ [app.main.data.tokens :as dt] [app.main.refs :as refs] [app.main.store :as st] + [app.main.ui.components.title-bar :refer [title-bar]] [app.main.ui.icons :as i] [app.main.ui.workspace.sidebar.assets.common :as cmm] [app.main.ui.workspace.tokens.changes :as wtch] [app.main.ui.workspace.tokens.context-menu :refer [token-context-menu]] [app.main.ui.workspace.tokens.core :as wtc] + [app.main.ui.workspace.tokens.sets :refer [sets-list]] [app.main.ui.workspace.tokens.style-dictionary :as sd] [app.main.ui.workspace.tokens.token :as wtt] [app.main.ui.workspace.tokens.token-types :as wtty] - [app.main.ui.components.title-bar :refer [title-bar]] - [app.main.ui.workspace.tokens.sets :refer [sets-list]] [app.util.dom :as dom] [cuerdas.core :as str] [okulary.core :as l] @@ -194,7 +194,7 @@ [_props] [:div {:class (stl/css :sidebar-tab-wrapper)} [:& sets-sidebar] - [:div {:class (stl/css :tokens-section-wrapper)} + [:div {:class (stl/css :tokens-section-wrapper)} [:& tokens-explorer]] [:button {:class (stl/css :download-json-button) :on-click wtc/download-tokens-as-json} From feb5cec84b0710100a41a2e0ca6d2e4a18a20177 Mon Sep 17 00:00:00 2001 From: Akshay Gupta Date: Tue, 20 Aug 2024 16:57:53 +0530 Subject: [PATCH 33/41] ad sets-section wrapper --- .../src/app/main/ui/workspace/tokens/sidebar.cljs | 15 ++++++++------- .../src/app/main/ui/workspace/tokens/sidebar.scss | 12 ++++++------ 2 files changed, 14 insertions(+), 13 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs index 7ea4e49ec9..49d8532741 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs @@ -193,10 +193,11 @@ ::mf/wrap-props false} [_props] [:div {:class (stl/css :sidebar-tab-wrapper)} - [:& sets-sidebar] - [:div {:class (stl/css :tokens-section-wrapper)} - [:& tokens-explorer]] - [:button {:class (stl/css :download-json-button) - :on-click wtc/download-tokens-as-json} - download-icon - "Export JSON"]]) + [:div {:class (stl/css :sets-section-wrapper)} + [:& sets-sidebar]] + [:div {:class (stl/css :tokens-section-wrapper)} + [:& tokens-explorer]] + [:button {:class (stl/css :download-json-button) + :on-click wtc/download-tokens-as-json} + download-icon + "Export JSON"]]) diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.scss b/frontend/src/app/main/ui/workspace/tokens/sidebar.scss index e65b85a035..e82a91ca95 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sidebar.scss +++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.scss @@ -14,14 +14,14 @@ overflow: hidden; } -.sets-sidebar { - position: relative; +.sets-section-wrapper { display: flex; flex-direction: column; - flex: 1; - width: 100%; - height: var(--height, $s-200); - overflow-y: auto; + margin-bottom: $s-8; +} + +.sets-sidebar { + position: relative; } .sidebar-header { From 187ab31667432bda53ff914c18fa96b0050d6581 Mon Sep 17 00:00:00 2001 From: Akshay Gupta Date: Tue, 20 Aug 2024 17:00:19 +0530 Subject: [PATCH 34/41] format --- .../src/app/main/ui/workspace/tokens/sidebar.cljs | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs index 49d8532741..9e3cc412fb 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs @@ -193,11 +193,11 @@ ::mf/wrap-props false} [_props] [:div {:class (stl/css :sidebar-tab-wrapper)} - [:div {:class (stl/css :sets-section-wrapper)} + [:div {:class (stl/css :sets-section-wrapper)} [:& sets-sidebar]] - [:div {:class (stl/css :tokens-section-wrapper)} - [:& tokens-explorer]] - [:button {:class (stl/css :download-json-button) - :on-click wtc/download-tokens-as-json} - download-icon - "Export JSON"]]) + [:div {:class (stl/css :tokens-section-wrapper)} + [:& tokens-explorer]] + [:button {:class (stl/css :download-json-button) + :on-click wtc/download-tokens-as-json} + download-icon + "Export JSON"]]) From 3a2f4df3878b86f899f30bdde95ee5bb0e714efb Mon Sep 17 00:00:00 2001 From: Akshay Gupta Date: Tue, 20 Aug 2024 17:08:31 +0530 Subject: [PATCH 35/41] add source code comment --- frontend/src/app/main/ui/workspace/tokens/sets.cljs | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/frontend/src/app/main/ui/workspace/tokens/sets.cljs b/frontend/src/app/main/ui/workspace/tokens/sets.cljs index 29dc279233..5e7401f896 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sets.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/sets.cljs @@ -1,3 +1,9 @@ +;; 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.main.ui.workspace.tokens.sets (:require-macros [app.main.style :as stl]) (:require @@ -97,4 +103,3 @@ (for [set-id sets-root-order] ^{:key (str set-id)} [:& sets-tree {:key (str set-id) :set-id set-id :current-set-id current-set-id}])])) - From 463ab3c866b16df2e3eeeeb4735bbb347c2aa02d Mon Sep 17 00:00:00 2001 From: Akshay Gupta Date: Tue, 20 Aug 2024 20:41:25 +0530 Subject: [PATCH 36/41] change current-set to selected-set --- .../src/app/main/ui/workspace/tokens/sets.cljs | 18 +++++++++--------- .../app/main/ui/workspace/tokens/sidebar.cljs | 10 +++++----- 2 files changed, 14 insertions(+), 14 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/tokens/sets.cljs b/frontend/src/app/main/ui/workspace/tokens/sets.cljs index 5e7401f896..b5b50694a5 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sets.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/sets.cljs @@ -44,30 +44,30 @@ (def ^:private chevron-icon (i/icon-xref :arrow (stl/css :chevron-icon))) -(defn set-current-set +(defn set-selected-set [set-id] (dm/assert! (uuid? set-id)) - (ptk/reify ::set-current-set + (ptk/reify ::set-selected-set ptk/UpdateEvent (update [_ state] - (assoc state :current-set-id set-id)))) + (assoc state :selected-set-id set-id)))) (mf/defc sets-tree - [{:keys [current-set-id set-id toggle-visibility]}] + [{:keys [selected-set-id set-id toggle-visibility]}] (let [set (get sets set-id)] (when set (let [{:keys [type name children]} set visible? (mf/use-state (contains? active-sets set-id)) collapsed? (mf/use-state false) icon (if (= type :set) i/document i/group) - selected? (mf/use-state (= set-id current-set-id)) + selected? (mf/use-state (= set-id selected-set-id)) on-click (mf/use-fn (mf/deps type set-id) (fn [event] (dom/stop-propagation event) - (st/emit! (set-current-set set-id))))] + (st/emit! (set-selected-set set-id))))] [:div {:class (stl/css :set-item-container) :on-click on-click} [:div {:class (stl/css-case :set-item-group (= type :group) @@ -91,10 +91,10 @@ [:div {:class (stl/css :set-children)} (for [child-id children] (do - ^{:key (str child-id)} [:& sets-tree {:key (str child-id) :set-id child-id :current-set-id current-set-id :toggle-visibility toggle-visibility}]))])])))) + ^{:key (str child-id)} [:& sets-tree {:key (str child-id) :set-id child-id :selected-set-id selected-set-id :toggle-visibility toggle-visibility}]))])])))) (mf/defc sets-list - [{:keys [current-set-id]}] + [{:keys [selected-set-id]}] (let [toggle-visibility (fn [set-id] (if (contains? active-sets set-id) (swap! active-sets disj set-id) @@ -102,4 +102,4 @@ [:ul {:class (stl/css :sets-list)} (for [set-id sets-root-order] ^{:key (str set-id)} - [:& sets-tree {:key (str set-id) :set-id set-id :current-set-id current-set-id}])])) + [:& sets-tree {:key (str set-id) :set-id set-id :selected-set-id selected-set-id}])])) diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs index 9e3cc412fb..7520303093 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs @@ -34,8 +34,8 @@ (def ^:private download-icon (i/icon-xref :download (stl/css :download-icon))) -(def current-set-id - (l/derived :current-set-id st/state)) +(def selected-set-id + (l/derived :selected-set-id st/state)) (mf/defc token-pill {::mf/wrap-props false} @@ -173,9 +173,9 @@ (mf/defc sets-sidebar [] - (let [current-set-id (mf/deref current-set-id) + (let [selected-set-id (mf/deref selected-set-id) open? (mf/use-state true)] - [:div {:key (str "sidebar-" current-set-id) + [:div {:key (str "sidebar-" selected-set-id) :class (stl/css :sets-sidebar)} [:div {:class (stl/css :sidebar-header)} [:& title-bar {:collapsable true @@ -186,7 +186,7 @@ :on-click #(println "Add Set")} i/add]] (when @open? - [:& sets-list {:current-set-id current-set-id}])])) + [:& sets-list {:selected-set-id selected-set-id}])])) (mf/defc tokens-sidebar-tab {::mf/wrap [mf/memo] From 5b1eaf4b8f30ba5f7ff9b6f9c55b7f65bfb692f9 Mon Sep 17 00:00:00 2001 From: Akshay Gupta Date: Tue, 20 Aug 2024 20:55:02 +0530 Subject: [PATCH 37/41] remove unused prop and some optimizations --- .../src/app/main/ui/workspace/tokens/sets.cljs | 14 +++++--------- .../src/app/main/ui/workspace/tokens/sidebar.cljs | 3 +-- 2 files changed, 6 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 b5b50694a5..6a882ea13c 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sets.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/sets.cljs @@ -53,7 +53,7 @@ (assoc state :selected-set-id set-id)))) (mf/defc sets-tree - [{:keys [selected-set-id set-id toggle-visibility]}] + [{:keys [selected-set-id set-id]}] (let [set (get sets set-id)] (when set (let [{:keys [type name children]} set @@ -90,16 +90,12 @@ (when (and children (not @collapsed?)) [:div {:class (stl/css :set-children)} (for [child-id children] - (do - ^{:key (str child-id)} [:& sets-tree {:key (str child-id) :set-id child-id :selected-set-id selected-set-id :toggle-visibility toggle-visibility}]))])])))) + [:& sets-tree {:key child-id :set-id child-id :selected-set-id selected-set-id}])])])))) (mf/defc sets-list [{:keys [selected-set-id]}] - (let [toggle-visibility (fn [set-id] - (if (contains? active-sets set-id) - (swap! active-sets disj set-id) - (swap! active-sets conj set-id)))] [:ul {:class (stl/css :sets-list)} (for [set-id sets-root-order] - ^{:key (str set-id)} - [:& sets-tree {:key (str set-id) :set-id set-id :selected-set-id selected-set-id}])])) + [:& sets-tree {:key set-id + :set-id set-id + :selected-set-id selected-set-id}])]) diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs index 7520303093..d2d6843da5 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs @@ -175,8 +175,7 @@ [] (let [selected-set-id (mf/deref selected-set-id) open? (mf/use-state true)] - [:div {:key (str "sidebar-" selected-set-id) - :class (stl/css :sets-sidebar)} + [:div {:class (stl/css :sets-sidebar)} [:div {:class (stl/css :sidebar-header)} [:& title-bar {:collapsable true :collapsed (not @open?) From 247e3a1559dbc63eae83e37268950820c32ff548 Mon Sep 17 00:00:00 2001 From: Akshay Gupta Date: Tue, 20 Aug 2024 21:25:22 +0530 Subject: [PATCH 38/41] fix some styling issues --- frontend/src/app/main/ui/workspace/tokens/sets.scss | 4 ++-- frontend/src/app/main/ui/workspace/tokens/sidebar.cljs | 1 + frontend/src/app/main/ui/workspace/tokens/sidebar.scss | 10 ++-------- 3 files changed, 5 insertions(+), 10 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/tokens/sets.scss b/frontend/src/app/main/ui/workspace/tokens/sets.scss index a4817d819b..5c32bf199b 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sets.scss +++ b/frontend/src/app/main/ui/workspace/tokens/sets.scss @@ -67,8 +67,8 @@ .action-btn { @extend .button-tertiary; - height: $s-20; - width: $s-20; + height: $s-28; + width: $s-28; svg { @extend .button-icon; width: 12px; diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs index d2d6843da5..570df90776 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs @@ -179,6 +179,7 @@ [:div {:class (stl/css :sidebar-header)} [:& title-bar {:collapsable true :collapsed (not @open?) + :all-clickable true :title "SETS" :on-collapsed #(swap! open? not)}] [:button {:class (stl/css :add-set) diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.scss b/frontend/src/app/main/ui/workspace/tokens/sidebar.scss index e82a91ca95..4ef8ff21c5 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sidebar.scss +++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.scss @@ -28,8 +28,8 @@ display: flex; align-items: center; justify-content: space-between; - margin-left: $s-2; - padding-top: $s-2; + margin-left: $s-8; + padding-top: $s-12; color: var(--layer-row-foreground-color); } @@ -51,12 +51,6 @@ overflow-y: auto; } -.divider { - height: 1px; - background-color: var(--border-color); - margin: $s-8 0; -} - .token-pills-wrapper { display: flex; gap: $s-4; From b3e939d12a42f853ad0a8a002965443c1e9cc1e0 Mon Sep 17 00:00:00 2001 From: Akshay Gupta Date: Tue, 20 Aug 2024 21:30:59 +0530 Subject: [PATCH 39/41] add a hardcoded flag to display/hide token sets section --- frontend/src/app/main/ui/workspace/tokens/sidebar.cljs | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs index 570df90776..380d37c122 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs @@ -192,12 +192,14 @@ {::mf/wrap [mf/memo] ::mf/wrap-props false} [_props] + (let [show-sets-section? false] ;; temporarily added this variable to see/hide the sets section till we have it working end to end [:div {:class (stl/css :sidebar-tab-wrapper)} + (when show-sets-section? [:div {:class (stl/css :sets-section-wrapper)} - [:& sets-sidebar]] + [:& sets-sidebar]]) [:div {:class (stl/css :tokens-section-wrapper)} [:& tokens-explorer]] [:button {:class (stl/css :download-json-button) :on-click wtc/download-tokens-as-json} download-icon - "Export JSON"]]) + "Export JSON"]])) From 2487f34b721a2a269d23ac910a58f35f009f3aef Mon Sep 17 00:00:00 2001 From: Akshay Gupta Date: Tue, 20 Aug 2024 21:34:07 +0530 Subject: [PATCH 40/41] formatting --- .../app/main/ui/workspace/tokens/sets.cljs | 12 +++++------ .../app/main/ui/workspace/tokens/sidebar.cljs | 20 +++++++++---------- 2 files changed, 16 insertions(+), 16 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/tokens/sets.cljs b/frontend/src/app/main/ui/workspace/tokens/sets.cljs index 6a882ea13c..01a2c212e5 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sets.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/sets.cljs @@ -90,12 +90,12 @@ (when (and children (not @collapsed?)) [:div {:class (stl/css :set-children)} (for [child-id children] - [:& sets-tree {:key child-id :set-id child-id :selected-set-id selected-set-id}])])])))) + [:& sets-tree {:key child-id :set-id child-id :selected-set-id selected-set-id}])])])))) (mf/defc sets-list [{:keys [selected-set-id]}] - [:ul {:class (stl/css :sets-list)} - (for [set-id sets-root-order] - [:& sets-tree {:key set-id - :set-id set-id - :selected-set-id selected-set-id}])]) + [:ul {:class (stl/css :sets-list)} + (for [set-id sets-root-order] + [:& sets-tree {:key set-id + :set-id set-id + :selected-set-id selected-set-id}])]) diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs index 380d37c122..7729f41df7 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs @@ -193,13 +193,13 @@ ::mf/wrap-props false} [_props] (let [show-sets-section? false] ;; temporarily added this variable to see/hide the sets section till we have it working end to end - [:div {:class (stl/css :sidebar-tab-wrapper)} - (when show-sets-section? - [:div {:class (stl/css :sets-section-wrapper)} - [:& sets-sidebar]]) - [:div {:class (stl/css :tokens-section-wrapper)} - [:& tokens-explorer]] - [:button {:class (stl/css :download-json-button) - :on-click wtc/download-tokens-as-json} - download-icon - "Export JSON"]])) + [:div {:class (stl/css :sidebar-tab-wrapper)} + (when show-sets-section? + [:div {:class (stl/css :sets-section-wrapper)} + [:& sets-sidebar]]) + [:div {:class (stl/css :tokens-section-wrapper)} + [:& tokens-explorer]] + [:button {:class (stl/css :download-json-button) + :on-click wtc/download-tokens-as-json} + download-icon + "Export JSON"]])) From f9704fe7aaa74f082d0466c65dd7a9247bc45197 Mon Sep 17 00:00:00 2001 From: Florian Schroedl Date: Tue, 20 Aug 2024 18:40:02 +0200 Subject: [PATCH 41/41] Fix padding without sets --- frontend/src/app/main/ui/workspace/tokens/sidebar.scss | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.scss b/frontend/src/app/main/ui/workspace/tokens/sidebar.scss index 4ef8ff21c5..e90b12d3cf 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sidebar.scss +++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.scss @@ -48,9 +48,16 @@ .tokens-section-wrapper { flex: 1; + padding-top: $s-12; + padding-left: $s-12; overflow-y: auto; } +// TODO Remove once sets are available to public +.sets-section-wrapper + .tokens-section-wrapper { + padding-top: 0; +} + .token-pills-wrapper { display: flex; gap: $s-4;