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 more changes

Browse source
This commit is contained in:
Akshay Gupta 2024-08-07 22:39:41 +05:30
parent 1434ddb5d5
commit fcea989586
No known key found for this signature in database
4 changed files with 41 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -20,7 +20,7 @@
:name "Set A / 1"} :name "Set A / 1"}
#uuid "d1754e56-3510-493f-8287-5ef3417d4141" {:type :group #uuid "d1754e56-3510-493f-8287-5ef3417d4141" {:type :group
:name "Group A / B" :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 "7cc05389-9391-426e-bc0e-ba5cb8f425eb"]}
#uuid "f608877b-842a-473b-83ca-b5f8305caf83" {:type :set #uuid "f608877b-842a-473b-83ca-b5f8305caf83" {:type :set
:name "Set A / B / 1"} :name "Set A / B / 1"}
@ -38,7 +38,7 @@
(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)] ;; 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-case :set-item true :group (= type :group))}
[:div {:class (stl/css :set-icon)} [:div {:class (stl/css :set-icon)}
[:svg {:class (stl/css :set-icon-svg)} icon]] [:svg {:class (stl/css :set-icon-svg)} icon]]
@ -54,7 +54,7 @@
{::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.assets-bar [: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}])])
@ -66,7 +66,7 @@
[: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" "SETS"
[:button {:class (stl/css :add-button) [:button {:class (stl/css :add-set)
:on-click #(println "Add Set")} :on-click #(println "Add Set")}
"Add"]] i/add]]
[:& sets-list]]) [:& sets-list]])

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

@ -13,6 +13,7 @@
flex: 1; flex: 1;
width: 100%; width: 100%;
height: var(--height, $s-200); height: var(--height, $s-200);
overflow-y: auto;
} }
.sidebar-header { .sidebar-header {
@ -23,7 +24,7 @@
color: var(--layer-row-foreground-color); color: var(--layer-row-foreground-color);
} }
.add-button { .add-set {
@extend .button-tertiary; @extend .button-tertiary;
height: $s-32; height: $s-32;
width: $s-28; width: $s-28;
@ -32,13 +33,14 @@
svg { svg {
@extend .button-icon; @extend .button-icon;
stroke: var(--icon-foreground); stroke: var(--icon-foreground);
transform: rotate(90deg);
} }
} }
.sets-list { .sets-list {
width: 100%; width: 100%;
max-height: $s-152;
margin-bottom: $s-12; margin-bottom: $s-12;
overflow-y: auto;
} }
.set-item { .set-item {
@ -57,14 +59,13 @@
} }
.set-icon { .set-icon {
@include flexCenter; @include flexCenter;
height: $s-32; height: $s-20;
width: $s-24; width: $s-20;
padding: 0 $s-4 0 $s-8; padding: 0 $s-4 0 $s-8;
svg { svg {
@extend .button-icon-small; height: $s-20;
height: $s-12; width: $s-20;
width: $s-12; color: white;
color: transparent;
fill: none; fill: none;
stroke: var(--icon-foreground); stroke: var(--icon-foreground);
} }

6
frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
View file

@ -172,8 +172,10 @@
::mf/wrap-props false} ::mf/wrap-props false}
[_props] [_props]
[:div {:class (stl/css :sidebar-tab-wrapper)} [:div {:class (stl/css :sidebar-tab-wrapper)}
[:& sets-sidebar] ;; Add sets sidebar here [:& sets-sidebar]
[:& tokens-explorer] ;;[:div {:class (stl/css :divider)}]
[:div {:class (stl/css :tokens-section-wrapper)}
[:& tokens-explorer]]
[:button {:class (stl/css :download-json-button) [:button {:class (stl/css :download-json-button)
:on-click wtc/download-tokens-as-json} :on-click wtc/download-tokens-as-json}
download-icon download-icon

24
frontend/src/app/main/ui/workspace/tokens/sidebar.scss
View file

@ -5,11 +5,33 @@
// Copyright (c) KALEIDOS INC // Copyright (c) KALEIDOS INC
@import "refactor/common-refactor.scss"; @import "refactor/common-refactor.scss";
@import "./common.scss"; @import "./common.scss";
.sidebar-tab-wrapper { .sidebar-tab-wrapper {
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
padding: $s-12; 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 { .token-pills-wrapper {