Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-21 06:02:32 -05:00
Code Issues Activity

add current set and selected set

Browse source
This commit is contained in:
Akshay Gupta 2024-08-13 14:11:30 +05:30
parent ad9a4e7244
commit bcf61f34fe
No known key found for this signature in database
2 changed files with 84 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -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}])]))

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

@ -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;