Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-06 14:50:20 -05:00
Code Issues Activity

Add hover styles and collapse capabilities

Browse source
This commit is contained in:
Akshay Gupta 2024-08-08 21:40:35 +05:30
parent bb3a22a219
commit b93b0b209a
No known key found for this signature in database
2 changed files with 17 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -39,10 +39,13 @@
(when set
(let [{:keys [type name children]} set
icon i/document
visible? (mf/use-state (contains? active-sets set-id))]
visible? (mf/use-state (contains? active-sets set-id))
collapsed? (mf/use-state false)]
[:div {:class (stl/css :set-item-container)}
[:div {:class (stl/css :set-item)}
[:span {:class (stl/css :icon)} icon]
[:div {:class (stl/css-case :set-item-group (= type :group)
:set-item-set (= type :set))}
[:span {:class (stl/css :icon)
:on-click #(when (= type :group) (swap! collapsed? not))} icon]
[:div {:class (stl/css :set-name)} name]
(when (= type :set)
[:span {:class (stl/css :action-btn)
@ -50,7 +53,7 @@
(if @visible?
i/shown
i/hide)])]
(when children
(when (and children (not @collapsed?))
[:div {:class (stl/css :set-children)}
(for [child-id children]
(do

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

@ -50,18 +50,14 @@
padding-left: 20px;
}
.set-item {
.set-item-set, .set-item-group {
@include bodySmallTypography;
display: flex;
align-items: center;
min-height: $s-32;
width: 100%;
cursor: pointer;
color: var(--layer-row-foreground-color);
&.group {
padding-left: $s-12;
}
.set-name {
@include textEllipsis;
flex-grow: 1;
@ -85,10 +81,16 @@
}
}
.set-item-set{
&:hover {
background-color: var(--layer-row-background-color-hover);
color: var(--layer-row-foreground-color-hover);
}
}
.action-btn {
@extend .button-tertiary;
height: $s-32;
width: $s-28;
height: $s-20;
width: $s-20;
svg {
@extend .button-icon;
}