mirror of
https://github.com/penpot/penpot.git
synced 2025-07-09 18:17:15 +02:00
Design
This commit is contained in:
parent
7970440ffc
commit
cac421f862
3 changed files with 89 additions and 24 deletions
|
@ -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)))
|
||||||
|
|
||||||
|
|
|
@ -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,12 +47,14 @@
|
||||||
[{: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)]
|
||||||
|
[:div
|
||||||
[:ul {:class (stl/css :theme-group-wrapper)}
|
[:ul {:class (stl/css :theme-group-wrapper)}
|
||||||
(for [[group themes] themes]
|
(for [[group themes] themes]
|
||||||
[:li {:key (str "token-theme-group" group)}
|
[:li {:key (str "token-theme-group" group)}
|
||||||
[:span {:class (stl/css :theme-group-label)} group]
|
(when (seq group)
|
||||||
|
[:span {:class (stl/css :theme-group-label)} group])
|
||||||
[:ul {:class (stl/css :theme-group-rows-wrapper)}
|
[:ul {:class (stl/css :theme-group-rows-wrapper)}
|
||||||
(for [{:keys [id name] :as _theme} themes]
|
(for [{:keys [id name] :as theme} themes]
|
||||||
[:li {:key (str "token-theme-" id)
|
[:li {:key (str "token-theme-" id)
|
||||||
:class (stl/css :theme-row)}
|
:class (stl/css :theme-row)}
|
||||||
[:div {:class (stl/css :theme-row-left)}
|
[:div {:class (stl/css :theme-row-left)}
|
||||||
|
@ -61,12 +65,24 @@
|
||||||
:on-change (constantly nil)
|
:on-change (constantly nil)
|
||||||
:selected? (get active-theme-ids id)}]]
|
:selected? (get active-theme-ids id)}]]
|
||||||
[:span {:class (stl/css :theme-row-label)} name]]
|
[: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)}
|
[:div {:class (stl/css :delete-theme-button)}
|
||||||
[:button {:on-click (fn [e]
|
[:button {:on-click (fn [e]
|
||||||
(dom/prevent-default e)
|
(dom/prevent-default e)
|
||||||
(dom/stop-propagation e)
|
(dom/stop-propagation e)
|
||||||
(st/emit! (wdt/delete-token-theme id)))}
|
(st/emit! (wdt/delete-token-theme id)))}
|
||||||
i/delete]]])]])]))
|
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 []}]
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue