3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-07-09 14:27:16 +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.common.data.macros :as dm]
[app.main.ui.icons :as i] [app.main.ui.icons :as i]
[rumext.v2 :as mf])) [rumext.v2 :as mf]))
(def ^:private chevron-icon (def ^:private chevron-icon
(i/icon-xref :arrow (stl/css :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] [app.util.dom :as dom]
[rumext.v2 :as mf])) [rumext.v2 :as mf]))
(def ^:private chevron-icon
(i/icon-xref :arrow (stl/css :chevron-icon)))
(def ^:private close-icon (def ^:private close-icon
(i/icon-xref :close (stl/css :close-icon))) (i/icon-xref :close (stl/css :close-icon)))
@ -45,28 +47,42 @@
[{: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 {:class (stl/css :theme-group-wrapper)} [:div
(for [[group themes] themes] [:ul {:class (stl/css :theme-group-wrapper)}
[:li {:key (str "token-theme-group" group)} (for [[group themes] themes]
[:span {:class (stl/css :theme-group-label)} group] [:li {:key (str "token-theme-group" group)}
[:ul {:class (stl/css :theme-group-rows-wrapper)} (when (seq group)
(for [{:keys [id name] :as _theme} themes] [:span {:class (stl/css :theme-group-label)} group])
[:li {:key (str "token-theme-" id) [:ul {:class (stl/css :theme-group-rows-wrapper)}
:class (stl/css :theme-row)} (for [{:keys [id name] :as theme} themes]
[:div {:class (stl/css :theme-row-left)} [:li {:key (str "token-theme-" id)
[:div {:on-click (fn [e] :class (stl/css :theme-row)}
(dom/stop-propagation e) [:div {:class (stl/css :theme-row-left)}
(st/emit! (wdt/toggle-token-theme id)))} [:div {:on-click (fn [e]
[:& switch {:name (str "Theme" name) (dom/stop-propagation e)
:on-change (constantly nil) (st/emit! (wdt/toggle-token-theme id)))}
:selected? (get active-theme-ids id)}]] [:& switch {:name (str "Theme" name)
[:span {:class (stl/css :theme-row-label)} name]] :on-change (constantly nil)
[:div {:class (stl/css :delete-theme-button)} :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 :theme-row-right)}
(dom/stop-propagation e) (if-let [sets-count (some-> theme :sets seq count)]
(st/emit! (wdt/delete-token-theme id)))} [:button {:class (stl/css :sets-count-button)}
i/delete]]])]])])) (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 (mf/defc edit-theme
[{:keys []}] [{:keys []}]

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

@ -10,6 +10,10 @@
@extend .modal-overlay-base; @extend .modal-overlay-base;
} }
hr {
border-color: var(--color-background-tertiary);
}
.modal-dialog { .modal-dialog {
@extend .modal-container-base; @extend .modal-container-base;
display: grid; display: grid;
@ -30,6 +34,22 @@
flex-direction: column; 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 { .close-btn {
@extend .modal-close-btn-base; @extend .modal-close-btn-base;
} }
@ -63,11 +83,41 @@
.theme-row-left { .theme-row-left {
display: flex; display: flex;
align-items: center; 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 { .theme-row-label {
@include bodyMediumTypography; @include bodyMediumTypography;
font-weight: 500;
color: var(--color-foreground-primary);
} }
.delete-theme-button { .delete-theme-button {