johanels/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-12-12 06:24:17 +01:00
Code Issues Actions 9 Packages Projects Releases Wiki 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
2 changed files with 17 additions and 12 deletions
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 (when set
(let [{:keys [type name children]} set (let [{:keys [type name children]} set
icon i/document 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-container)}
[:div {:class (stl/css :set-item)} [:div {:class (stl/css-case :set-item-group (= type :group)
[:span {:class (stl/css :icon)} icon] :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] [: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)
@@ -50,7 +53,7 @@
(if @visible? (if @visible?
i/shown i/shown
i/hide)])] i/hide)])]
(when children (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

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

@@ -50,18 +50,14 @@
padding-left: 20px; padding-left: 20px;
} }
.set-item { .set-item-set, .set-item-group {
@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);
&.group {
padding-left: $s-12;
}
.set-name { .set-name {
@include textEllipsis; @include textEllipsis;
flex-grow: 1; 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 { .action-btn {
@extend .button-tertiary; @extend .button-tertiary;
height: $s-32; height: $s-20;
width: $s-28; width: $s-20;
svg { svg {
@extend .button-icon; @extend .button-icon;
} }