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

formatting

Browse source
This commit is contained in:
Akshay Gupta 2024-08-13 21:44:08 +05:30
parent 66170eb889
commit 46c73fe51f
No known key found for this signature in database
2 changed files with 44 additions and 47 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,14 +1,14 @@
(ns app.main.ui.workspace.tokens.sets (ns app.main.ui.workspace.tokens.sets
(:require-macros [app.main.style :as stl]) (:require-macros [app.main.style :as stl])
(:require (:require
[app.main.ui.icons :as i] [app.common.data.macros :as dm]
[app.main.store :as st]
[app.main.ui.components.title-bar :refer [title-bar]] [app.main.ui.components.title-bar :refer [title-bar]]
[app.main.ui.context :as ctx] [app.main.ui.context :as ctx]
[app.main.store :as st] [app.main.ui.icons :as i]
[app.common.data.macros :as dm]
[app.util.dom :as dom] [app.util.dom :as dom]
[potok.v2.core :as ptk]
[okulary.core :as l] [okulary.core :as l]
[potok.v2.core :as ptk]
[rumext.v2 :as mf])) [rumext.v2 :as mf]))
@ -43,11 +43,11 @@
(defn set-current-set (defn set-current-set
[set-id] [set-id]
(dm/assert! (uuid? set-id)) (dm/assert! (uuid? set-id))
(ptk/reify ::set-current-set (ptk/reify ::set-current-set
ptk/UpdateEvent ptk/UpdateEvent
(update [_ state] (update [_ state]
(assoc state :current-set-id set-id)))) (assoc state :current-set-id set-id))))
(mf/defc sets-tree (mf/defc sets-tree
[{:keys [current-set-id set-id toggle-visibility]}] [{:keys [current-set-id set-id toggle-visibility]}]
@ -59,29 +59,28 @@
icon (cond icon (cond
(= type :set) i/document (= type :set) i/document
(and (= type :group) @collapsed?) i/group (and (= type :group) @collapsed?) i/group
:else i/folder-open) :else i/folder-open)
selected? (mf/use-state (= set-id current-set-id)) selected? (mf/use-state (= set-id current-set-id))
on-click on-click
(mf/use-fn (mf/use-fn
(mf/deps type set-id) (mf/deps type set-id)
#(st/emit! (set-current-set set-id)) #(st/emit! (set-current-set set-id)))]
)]
[:div {:class (stl/css :set-item-container) [:div {:class (stl/css :set-item-container)
:on-click on-click} :on-click on-click}
[:div {:class (stl/css-case :set-item-group (= type :group) [:div {:class (stl/css-case :set-item-group (= type :group)
:set-item-set-selected @selected? :set-item-set-selected @selected?
:set-item-set (and (= type :set ) (not @selected?)))} :set-item-set (and (= type :set) (not @selected?)))}
[:span {:class (stl/css :icon) [:span {:class (stl/css :icon)
:on-click #(when (= type :group) (swap! collapsed? not))} icon] :on-click #(when (= type :group) (swap! collapsed? not))} icon]
[:div {:class (stl/css :set-name)} name] [:div {:class (stl/css :set-name)} name]
(when (= type :set) (when (= type :set)
[:span {:class (stl/css :action-btn) [:span {:class (stl/css :action-btn)
:on-click #(swap! visible? not)} :on-click #(swap! visible? not)}
(if @visible? (if @visible?
i/shown i/shown
i/hide)])] i/hide)])]
(when (and children (not @collapsed?)) (when (and children (not @collapsed?))
[:div {:class (stl/css :set-children)} [:div {:class (stl/css :set-children)}
(for [child-id children] (for [child-id children]
(do (do
@ -93,24 +92,24 @@
(if (contains? active-sets set-id) (if (contains? active-sets set-id)
(swap! active-sets disj set-id) (swap! active-sets disj set-id)
(swap! active-sets conj set-id)))] (swap! active-sets conj set-id)))]
[:ul {:class (stl/css :sets-list)} [:ul {: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 :current-set-id current-set-id}])])) [:& sets-tree {:key (str set-id) :set-id set-id :current-set-id current-set-id}])]))
(mf/defc sets-sidebar (mf/defc sets-sidebar
[] []
(let [current-set-id (mf/deref current-set-id) (let [current-set-id (mf/deref current-set-id)
open? (mf/use-state true)] open? (mf/use-state true)]
[:div {:key (str "sidebar-" current-set-id) [:div {:key (str "sidebar-" current-set-id)
:class (stl/css :sets-sidebar)} :class (stl/css :sets-sidebar)}
[:div {:class (stl/css :sidebar-header)} [:div {:class (stl/css :sidebar-header)}
[:& title-bar {:collapsable true [:& title-bar {:collapsable true
:collapsed (not @open?) :collapsed (not @open?)
:title "SETS" :title "SETS"
:on-collapsed #(swap! open? not)}] :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]]
(when @open? (when @open?
[:& sets-list {:current-set-id current-set-id}])])) [:& sets-list {:current-set-id current-set-id}])]))

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

@ -51,17 +51,17 @@
/*&:hover{ /*&:hover{
box-shadow: 20px 0 0 0 var(--layer-row-background-color-hover); box-shadow: 20px 0 0 0 var(--layer-row-background-color-hover);
}*/ }*/
} }
.set-item-set, .set-item-group { .set-item-set,
.set-item-group {
@include bodySmallTypography; @include bodySmallTypography;
display: flex; display: flex;
align-items: center; 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);
.set-name { .set-name {
@include textEllipsis; @include textEllipsis;
flex-grow: 1; flex-grow: 1;
@ -85,12 +85,11 @@
} }
} }
.set-item-set{ .set-item-set {
&:hover { &:hover {
background-color: var(--layer-row-background-color-hover); background-color: var(--layer-row-background-color-hover);
color: var(--layer-row-foreground-color-hover); color: var(--layer-row-foreground-color-hover);
box-shadow: -100px 0 0 0 var(--layer-row-background-color-hover); box-shadow: -100px 0 0 0 var(--layer-row-background-color-hover);
} }
} }
@ -107,7 +106,7 @@
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);
background-color: var(--layer-row-background-color-selected); background-color: var(--layer-row-background-color-selected);
color: var(--layer-row-foreground-color-selected); color: var(--layer-row-foreground-color-selected);
box-shadow: -20px 0 0 0 var(--layer-row-background-color-selected); box-shadow: -20px 0 0 0 var(--layer-row-background-color-selected);
@ -137,7 +136,6 @@
background-color: var(--layer-row-background-color-hover); background-color: var(--layer-row-background-color-hover);
color: var(--layer-row-foreground-color-hover); color: var(--layer-row-foreground-color-hover);
box-shadow: -100px 0 0 0 var(--layer-row-background-color-hover); box-shadow: -100px 0 0 0 var(--layer-row-background-color-hover);
} }
} }
.action-btn { .action-btn {