Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-01 11:59:17 -05:00
Code Issues Activity

add hide/show icon

Browse source
This commit is contained in:
Akshay Gupta 2024-08-08 18:46:58 +05:30
parent b28a45c2d8
commit bb3a22a219
No known key found for this signature in database
2 changed files with 25 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
frontend/src/app/main/ui/workspace/tokens/sets.cljs
View file

@ -31,40 +31,44 @@
:name "Set Root 1"} :name "Set Root 1"}
#uuid "0381446e-1f1d-423f-912c-ab577d61b79b" {:type :set #uuid "0381446e-1f1d-423f-912c-ab577d61b79b" {:type :set
:name "Set Root 2"}}) :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 (mf/defc sets-tree
[{:keys [set-id]}] [{:keys [set-id toggle-visibility]}]
;;(println "Rendering set with ID:" set-id) ;;(println "Rendering set with ID:" set-id)
(let [set (get sets set-id)] (let [set (get sets set-id)]
(when set (when set
(let [{:keys [type name children]} 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-container)}
[:div {:class (stl/css :set-item)} [:div {:class (stl/css :set-item)}
[:span {:class (stl/css :icon)} icon] [: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 (when children
[:div {:class (stl/css :set-children)} [:div {:class (stl/css :set-children)}
(for [child-id children] (for [child-id children]
(do (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}]))])])))) ^{:key (str child-id)} [:& sets-tree {:key (str child-id) :set-id child-id :toggle-visibility toggle-visibility }]))])]))))
(mf/defc sets-list (mf/defc sets-list
{::mf/wrap-props false} {::mf/wrap-props false}
[] []
;;(println "Rendering Sets List with root order:" sets-root-order) ;;(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)} [:div {:class (stl/css :sets-list)}
(for [set-id sets-root-order] (for [set-id sets-root-order]
^{:key (str set-id)} ^{: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/defc sets-sidebar
{::mf/wrap-props false} {::mf/wrap-props false}

9
frontend/src/app/main/ui/workspace/tokens/sets.scss
View file

@ -84,3 +84,12 @@
} }
} }
} }
.action-btn {
@extend .button-tertiary;
height: $s-32;
width: $s-28;
svg {
@extend .button-icon;
}
}