3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-07-18 03:17:12 +02:00
Code Issues Projects Releases Packages Wiki 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
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 []}] [{:keys []}]
(let [active-theme-ids (mf/deref refs/workspace-active-theme-ids) (let [active-theme-ids (mf/deref refs/workspace-active-theme-ids)
themes (mf/deref refs/workspace-ordered-token-themes)] themes (mf/deref refs/workspace-ordered-token-themes)]
[:ul [:ul {:class (stl/css :theme-group-wrapper)}
(for [[group themes] themes] (for [[group themes] themes]
[:li [:li {:key (str "token-theme-group" group)}
{:key (str "token-theme-group" group)} [:span {:class (stl/css :theme-group-label)} group]
group [:ul {:class (stl/css :theme-group-rows-wrapper)}
[:ul
(for [{:keys [id name] :as _theme} themes] (for [{:keys [id name] :as _theme} themes]
[:li {:key (str "tokene-theme-" id)} [:li {:key (str "token-theme-" id)
[:div.spaced :class (stl/css :theme-row)}
name [:div {:class (stl/css :theme-row-left)}
[:div.spaced [:div {:on-click (fn [e]
(dom/stop-propagation e)
(st/emit! (wdt/toggle-token-theme id)))}
[:& switch {:name (str "Theme" name) [:& switch {:name (str "Theme" name)
:on-change #(st/emit! (wdt/toggle-token-theme id)) :on-change (constantly nil)
:selected? (get active-theme-ids id)}] :selected? (get active-theme-ids id)}]]
[:button {:on-click (fn [e] [:span {:class (stl/css :theme-row-label)} name]]
(dom/prevent-default e) [:div {:class (stl/css :delete-theme-button)}
(dom/stop-propagation e) [:button {:on-click (fn [e]
(st/emit! (wdt/delete-token-theme id)))} (dom/prevent-default e)
"🗑️"]]]])]])])) (dom/stop-propagation e)
(st/emit! (wdt/delete-token-theme id)))}
i/delete]]])]])]))
(mf/defc edit-theme (mf/defc edit-theme
[{:keys []}] [{:keys []}]

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

@ -15,13 +15,14 @@
display: grid; display: grid;
grid-template-rows: auto 1fr auto; grid-template-rows: auto 1fr auto;
width: 100%; width: 100%;
max-width: $s-640; max-width: $s-468;
} }
.modal-title { .modal-title {
@include headlineMediumTypography; @include headlineMediumTypography;
margin-block-end: $s-32; font-weight: 500;
color: var(--modal-title-foreground-color); margin-block-end: $s-16;
color: var(--color-foreground-secondary);
} }
.modal-content { .modal-content {
@ -32,3 +33,59 @@
.close-btn { .close-btn {
@extend .modal-close-btn-base; @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);
}
}
}