3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-07-28 01:27:23 +02:00
Code Issues Projects Releases Packages Wiki Activity

add more changes working tree display

Browse source
This commit is contained in:
Akshay Gupta 2024-08-08 00:14:36 +05:30
parent fcea989586
commit b28a45c2d8
No known key found for this signature in database
2 changed files with 45 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -2,6 +2,7 @@
(:require-macros [app.main.style :as stl]) (:require-macros [app.main.style :as stl])
(:require (:require
[app.main.ui.icons :as i] [app.main.ui.icons :as i]
[app.main.ui.components.title-bar :refer [title-bar]]
[rumext.v2 :as mf])) [rumext.v2 :as mf]))
;; Sample data ;; Sample data
@ -32,28 +33,34 @@
: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]}]
(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 (if (= type :group) i/document i/document)] icon i/document]
[:div {:class (stl/css-case :set-item true :group (= type :group))} [:div {:class (stl/css :set-item-container)}
[:div {:class (stl/css :set-icon)} [:div {:class (stl/css :set-item)}
[:svg {:class (stl/css :set-icon-svg)} icon]] [:span {:class (stl/css :icon)} icon]
[:span {:class (stl/css :set-name)} name] [:div {:class (stl/css :set-name)} name]]
(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}]))])]))))
(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)
[: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)}
@ -62,11 +69,17 @@
(mf/defc sets-sidebar (mf/defc sets-sidebar
{::mf/wrap-props false} {::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 :sets-sidebar)}
[:div {:class (stl/css :sidebar-header)} [: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) [:button {:class (stl/css :add-set)
:on-click #(println "Add Set")} :on-click #(println "Add Set")}
i/add]] i/add]]
[:& sets-list]]) (when @open?
[:& sets-list])]))

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

@ -43,34 +43,44 @@
overflow-y: auto; overflow-y: auto;
} }
.set-item-container {
width: 100%;
cursor: pointer;
color: var(--layer-row-foreground-color);
padding-left: 20px;
}
.set-item { .set-item {
@include bodySmallTypography; display: flex;
align-items: center;
min-height: $s-32; min-height: $s-32;
width: 100%; width: 100%;
cursor: pointer; cursor: pointer;
color: var(--layer-row-foreground-color); color: var(--layer-row-foreground-color);
&.group { &.group {
padding-left: $s-12; padding-left: $s-12;
} }
.set-name { .set-name {
@include textEllipsis; @include textEllipsis;
flex-grow: 1; flex-grow: 1;
padding-left: $s-2; padding-left: $s-2;
} }
.set-icon {
@include flexCenter; .icon {
height: $s-20; display: flex;
width: $s-20; align-items: center;
padding: 0 $s-4 0 $s-8; width: $s-20;
height: $s-20;
padding-right: $s-4;
svg { svg {
height: $s-20; height: $s-20;
width: $s-20; width: $s-20;
color: white; color: white;
fill: none; fill: none;
stroke: var(--icon-foreground); stroke: var(--icon-foreground);
} }
} }
.set-children {
padding-left: $s-12;
}
} }