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

Toggle theme via ui

Browse source
This commit is contained in:
Florian Schroedl 2024-08-23 15:30:17 +02:00
parent cc7de14539
commit 7970440ffc
2 changed files with 79 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
frontend/src/app/main/ui/workspace/tokens/modals/themes.cljs
View file

@ -45,25 +45,28 @@
[{:keys []}]
(let [active-theme-ids (mf/deref refs/workspace-active-theme-ids)
themes (mf/deref refs/workspace-ordered-token-themes)]
[:ul
[:ul {:class (stl/css :theme-group-wrapper)}
(for [[group themes] themes]
[:li
{:key (str "token-theme-group" group)}
group
[:ul
[:li {:key (str "token-theme-group" group)}
[:span {:class (stl/css :theme-group-label)} group]
[:ul {:class (stl/css :theme-group-rows-wrapper)}
(for [{:keys [id name] :as _theme} themes]
[:li {:key (str "tokene-theme-" id)}
[:div.spaced
name
[:div.spaced
[:li {:key (str "token-theme-" id)
:class (stl/css :theme-row)}
[:div {:class (stl/css :theme-row-left)}
[:div {:on-click (fn [e]
(dom/stop-propagation e)
(st/emit! (wdt/toggle-token-theme id)))}
[:& switch {:name (str "Theme" name)
:on-change #(st/emit! (wdt/toggle-token-theme id))
:selected? (get active-theme-ids id)}]
[:button {:on-click (fn [e]
(dom/prevent-default e)
(dom/stop-propagation e)
(st/emit! (wdt/delete-token-theme id)))}
"🗑️"]]]])]])]))
:on-change (constantly nil)
:selected? (get active-theme-ids id)}]]
[:span {:class (stl/css :theme-row-label)} name]]
[:div {:class (stl/css :delete-theme-button)}
[:button {:on-click (fn [e]
(dom/prevent-default e)
(dom/stop-propagation e)
(st/emit! (wdt/delete-token-theme id)))}
i/delete]]])]])]))
(mf/defc edit-theme
[{:keys []}]

63
frontend/src/app/main/ui/workspace/tokens/modals/themes.scss
View file

@ -15,13 +15,14 @@
display: grid;
grid-template-rows: auto 1fr auto;
width: 100%;
max-width: $s-640;
max-width: $s-468;
}
.modal-title {
@include headlineMediumTypography;
margin-block-end: $s-32;
color: var(--modal-title-foreground-color);
font-weight: 500;
margin-block-end: $s-16;
color: var(--color-foreground-secondary);
}
.modal-content {
@ -32,3 +33,59 @@
.close-btn {
@extend .modal-close-btn-base;
}
.theme-group-label {
display: block;
@include headlineMediumTypography;
color: var(--color-foreground-secondary);
margin-bottom: $s-8;
}
.theme-group-rows-wrapper {
display: flex;
flex-direction: column;
gap: $s-6;
}
.theme-group-wrapper {
display: flex;
flex-direction: column;
gap: $s-8;
}
.theme-row {
display: flex;
align-items: center;
gap: $s-12;
justify-content: space-between;
}
.theme-row-left {
display: flex;
align-items: center;
gap: $s-12;
}
.theme-row-label {
@include bodyMediumTypography;
}
.delete-theme-button {
@extend .button-tertiary;
height: $s-28;
width: $s-28;
button {
@include buttonStyle;
@include flexCenter;
width: $s-24;
height: 100%;
svg {
@extend .button-icon-small;
height: $s-12;
width: $s-12;
color: transparent;
fill: none;
stroke: var(--icon-foreground);
}
}
}