0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-21 06:02:32 -05:00

Add footer buttons

This commit is contained in:
Florian Schroedl 2024-08-23 17:07:47 +02:00
parent 6f7b69c7ee
commit db1250a315
3 changed files with 46 additions and 8 deletions

View file

@ -192,7 +192,6 @@
[:& (mf/provider ctx/current-route) {:value route}
[:& (mf/provider ctx/current-profile) {:value profile}
[:& wtmt/modal]
(if edata
[:& static/exception-page {:data edata :route route}]
[:*

View file

@ -10,6 +10,7 @@
[app.main.data.modal :as modal]
[app.main.ui.components.radio-buttons :refer [radio-button radio-buttons]]
[cuerdas.core :as str]
[app.main.ui.workspace.tokens.common :refer [labeled-input]]
[app.main.ui.workspace.tokens.sets :as wts]
[app.main.data.tokens :as wdt]
[app.main.refs :as refs]
@ -108,13 +109,24 @@
(fn [token-set-id]
(st/emit! (wdt/toggle-token-set {:token-set-id token-set-id
:token-theme-id (:id theme)}))))]
[:div {:class (stl/css :sets-list-wrapper)}
[:& wts/controlled-sets-list
{:token-sets token-sets
:token-set-selected? (constantly false)
:token-set-active? token-set-active?
:on-select on-toggle-token-set
:on-toggle on-toggle-token-set}]]))
[:div {:class (stl/css :edit-theme-wrapper)}
[:div {:class (stl/css :edit-theme-inputs-wrapper)}
[:& labeled-input {:label "Group"
:input-props {:value (:group theme)}}]
[:& labeled-input {:label "Theme"
:input-props {:value (:name theme)}}]]
[:div {:class (stl/css :sets-list-wrapper)}
[:& wts/controlled-sets-list
{:token-sets token-sets
:token-set-selected? (constantly false)
:token-set-active? token-set-active?
:on-select on-toggle-token-set
:on-toggle on-toggle-token-set}]]
[:div {:class (stl/css :edit-theme-footer)}
[:button {:class (stl/css :button-secondary)} "Delete"]
[:div {:class (stl/css :button-footer)}
[:button {:class (stl/css :button-secondary)} "Cancel"]
[:button {:class (stl/css :button-primary)} "Save theme"]]]]))
(mf/defc themes
[{:keys [] :as _args}]

View file

@ -37,6 +37,22 @@ hr {
.button-footer {
display: flex;
justify-content: flex-end;
gap: $s-6;
}
.edit-theme-footer {
display: flex;
justify-content: space-between;
}
.button-primary {
@extend .button-primary;
padding: $s-6;
}
.button-secondary {
@extend .button-secondary;
padding: $s-6;
}
.create-theme-button {
@ -103,6 +119,17 @@ hr {
}
}
.edit-theme-wrapper {
display: flex;
flex-direction: column;
gap: $s-12;
}
.edit-theme-inputs-wrapper {
display: flex;
gap: $s-12;
}
.sets-list-wrapper {
border: 1px solid color-mix(in hsl, var(--color-foreground-secondary) 30%, transparent);
border-radius: $s-8;