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

move sets-sidebar component to sidebar tokens

Browse source
This commit is contained in:
Akshay Gupta 2024-08-20 16:30:38 +05:30
parent 98b5791e27
commit e4f5b6005e
No known key found for this signature in database
2 changed files with 52 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -20,7 +20,8 @@
[app.main.ui.workspace.tokens.style-dictionary :as sd] [app.main.ui.workspace.tokens.style-dictionary :as sd]
[app.main.ui.workspace.tokens.token :as wtt] [app.main.ui.workspace.tokens.token :as wtt]
[app.main.ui.workspace.tokens.token-types :as wtty] [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] [app.util.dom :as dom]
[cuerdas.core :as str] [cuerdas.core :as str]
[okulary.core :as l] [okulary.core :as l]
@ -33,6 +34,9 @@
(def ^:private download-icon (def ^:private download-icon
(i/icon-xref :download (stl/css :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/defc token-pill
{::mf/wrap-props false} {::mf/wrap-props false}
[{:keys [on-click token highlighted? on-context-menu]}] [{:keys [on-click token highlighted? on-context-menu]}]
@ -167,13 +171,29 @@
:tokens tokens :tokens tokens
:token-type-props token-type-props}])]])) :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/defc tokens-sidebar-tab
{::mf/wrap [mf/memo] {::mf/wrap [mf/memo]
::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] [:& sets-sidebar]
;;[:div {:class (stl/css :divider)}]
[:div {:class (stl/css :tokens-section-wrapper)} [:div {:class (stl/css :tokens-section-wrapper)}
[:& tokens-explorer]] [:& tokens-explorer]]
[:button {:class (stl/css :download-json-button) [:button {:class (stl/css :download-json-button)

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

@ -15,11 +15,39 @@
} }
.sets-sidebar { .sets-sidebar {
flex-shrink: 0; position: relative;
display: flex;
flex-direction: column;
flex: 1;
width: 100%;
height: var(--height, $s-200);
overflow-y: auto; 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 { .tokens-section-wrapper {
flex: 1; flex: 1;
overflow-y: auto; overflow-y: auto;