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

Design

Browse source
This commit is contained in:
Florian Schroedl 2024-08-23 15:41:32 +02:00
parent 7970440ffc
commit cac421f862
3 changed files with 89 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

1
frontend/src/app/main/ui/components/title_bar.cljs
View file

@ -10,7 +10,6 @@
[app.common.data.macros :as dm]
[app.main.ui.icons :as i]
[rumext.v2 :as mf]))
(def ^:private chevron-icon
(i/icon-xref :arrow (stl/css :chevron-icon)))

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

@ -17,6 +17,8 @@
[app.util.dom :as dom]
[rumext.v2 :as mf]))
(def ^:private chevron-icon
(i/icon-xref :arrow (stl/css :chevron-icon)))
(def ^:private close-icon
(i/icon-xref :close (stl/css :close-icon)))
@ -45,28 +47,42 @@
[{:keys []}]
(let [active-theme-ids (mf/deref refs/workspace-active-theme-ids)
themes (mf/deref refs/workspace-ordered-token-themes)]
[:ul {:class (stl/css :theme-group-wrapper)}
(for [[group themes] themes]
[: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 "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 (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]]])]])]))
[:div
[:ul {:class (stl/css :theme-group-wrapper)}
(for [[group themes] themes]
[:li {:key (str "token-theme-group" group)}
(when (seq 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 "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 (constantly nil)
:selected? (get active-theme-ids id)}]]
[:span {:class (stl/css :theme-row-label)} name]]
[:div {:class (stl/css :theme-row-right)}
(if-let [sets-count (some-> theme :sets seq count)]
[:button {:class (stl/css :sets-count-button)}
(str sets-count " sets")
chevron-icon]
[:button {:class (stl/css :sets-count-empty-button)}
"No sets defined"
chevron-icon])
[: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]]]])]])]
[:div {:class (stl/css :button-footer)}
[:button {:class (stl/css :create-theme-button)}
i/add
"Create theme"]]]))
(mf/defc edit-theme
[{:keys []}]

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

@ -10,6 +10,10 @@
@extend .modal-overlay-base;
}
hr {
border-color: var(--color-background-tertiary);
}
.modal-dialog {
@extend .modal-container-base;
display: grid;
@ -30,6 +34,22 @@
flex-direction: column;
}
.button-footer {
display: flex;
justify-content: flex-end;
}
.create-theme-button {
@extend .button-secondary;
padding: $s-6;
padding-right: $s-8;
svg {
margin-right: $s-6;
@extend .button-icon;
stroke: var(--icon-foreground);
}
}
.close-btn {
@extend .modal-close-btn-base;
}
@ -63,11 +83,41 @@
.theme-row-left {
display: flex;
align-items: center;
gap: $s-12;
gap: $s-16;
}
.theme-row-right {
display: flex;
align-items: center;
gap: $s-6;
}
.sets-count-button {
@extend .button-secondary;
padding: $s-6;
padding-left: $s-12;
svg {
margin-left: $s-6;
@extend .button-icon;
stroke: var(--icon-foreground);
}
}
.sets-count-empty-button {
@extend .button-secondary;
padding: $s-6;
padding-left: $s-12;
svg {
margin-left: $s-6;
@extend .button-icon;
stroke: var(--icon-foreground);
}
}
.theme-row-label {
@include bodyMediumTypography;
font-weight: 500;
color: var(--color-foreground-primary);
}
.delete-theme-button {