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

Add themes modal dialog

Browse source
This commit is contained in:
Florian Schroedl 2024-08-23 14:11:13 +02:00
parent 1ed6d92d87
commit b62722bdbb
4 changed files with 90 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -8,6 +8,7 @@
(:require-macros [app.main.style :as stl])
(:require
[app.main.data.modal :as modal]
[app.main.ui.workspace.tokens.modals.themes :as wtmt]
[app.main.refs :as refs]
[app.main.ui.workspace.tokens.form :refer [form]]
[okulary.core :as l]
@ -37,7 +38,7 @@
(-> (calculate-position vport position x y)
(clj->js))))
(mf/defc modal
(mf/defc token-update-create-modal
{::mf/wrap-props false}
[{:keys [x y position token token-type] :as _args}]
(let [wrapper-style (use-viewport-position-style x y position)]
@ -47,82 +48,88 @@
[:& form {:token token
:token-type token-type}]]))
(mf/defc token-themes-modal
{::mf/register modal/components
::mf/register-as :tokens/themes}
[args]
[:& wtmt/modal args])
;; Modals ----------------------------------------------------------------------
(mf/defc boolean-modal
{::mf/register modal/components
::mf/register-as :tokens/boolean}
[properties]
[:& modal properties])
[:& token-update-create-modal properties])
(mf/defc border-radius-modal
{::mf/register modal/components
::mf/register-as :tokens/border-radius}
[properties]
[:& modal properties])
[:& token-update-create-modal properties])
(mf/defc stroke-width-modal
{::mf/register modal/components
::mf/register-as :tokens/stroke-width}
[properties]
[:& modal properties])
[:& token-update-create-modal properties])
(mf/defc box-shadow-modal
{::mf/register modal/components
::mf/register-as :tokens/box-shadow}
[properties]
[:& modal properties])
[:& token-update-create-modal properties])
(mf/defc sizing-modal
{::mf/register modal/components
::mf/register-as :tokens/sizing}
[properties]
[:& modal properties])
[:& token-update-create-modal properties])
(mf/defc dimensions-modal
{::mf/register modal/components
::mf/register-as :tokens/dimensions}
[properties]
[:& modal properties])
[:& token-update-create-modal properties])
(mf/defc numeric-modal
{::mf/register modal/components
::mf/register-as :tokens/numeric}
[properties]
[:& modal properties])
[:& token-update-create-modal properties])
(mf/defc opacity-modal
{::mf/register modal/components
::mf/register-as :tokens/opacity}
[properties]
[:& modal properties])
[:& token-update-create-modal properties])
(mf/defc other-modal
{::mf/register modal/components
::mf/register-as :tokens/other}
[properties]
[:& modal properties])
[:& token-update-create-modal properties])
(mf/defc rotation-modal
{::mf/register modal/components
::mf/register-as :tokens/rotation}
[properties]
[:& modal properties])
[:& token-update-create-modal properties])
(mf/defc spacing-modal
{::mf/register modal/components
::mf/register-as :tokens/spacing}
[properties]
[:& modal properties])
[:& token-update-create-modal properties])
(mf/defc string-modal
{::mf/register modal/components
::mf/register-as :tokens/string}
[properties]
[:& modal properties])
[:& token-update-create-modal properties])
(mf/defc typography-modal
{::mf/register modal/components
::mf/register-as :tokens/typography}
[properties]
[:& modal properties])
[:& token-update-create-modal properties])

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

@ -0,0 +1,28 @@
;; This Source Code Form is subject to the terms of the Mozilla Public
;; License, v. 2.0. If a copy of the MPL was not distributed with this
;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
;;
;; Copyright (c) KALEIDOS INC
(ns app.main.ui.workspace.tokens.modals.themes
(:require-macros [app.main.style :as stl])
(:require
[rumext.v2 :as mf]
[app.main.data.modal :as modal]
[app.main.store :as st]
[app.main.ui.icons :as i]))
(def ^:private close-icon
(i/icon-xref :close (stl/css :close-icon)))
(mf/defc modal
{::mf/wrap-props false}
[{:keys [] :as _args}]
(let [handle-close-dialog (mf/use-callback #(st/emit! (modal/hide)))]
[:div {:class (stl/css :modal-overlay)}
[:div {:class (stl/css :modal-dialog)}
[:button {:class (stl/css :close-btn) :on-click handle-close-dialog} close-icon]
[:div {:class (stl/css :modal-title)} "Themes"]
[:div {:class (stl/css :modal-content)}
"Themes"]]]))

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

@ -0,0 +1,34 @@
// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
//
// Copyright (c) KALEIDOS INC
@import "refactor/common-refactor.scss";
.modal-overlay {
@extend .modal-overlay-base;
}
.modal-dialog {
@extend .modal-container-base;
display: grid;
grid-template-rows: auto 1fr auto;
width: 100%;
max-width: $s-640;
}
.modal-title {
@include headlineMediumTypography;
margin-block-end: $s-32;
color: var(--modal-title-foreground-color);
}
.modal-content {
display: flex;
flex-direction: column;
}
.close-btn {
@extend .modal-close-btn-base;
}

8
frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
View file

@ -107,6 +107,7 @@
(let [{:keys [key fields]} modal]
(dom/stop-propagation event)
(st/emit! (dt/set-token-type-section-open type true))
(js/console.log "key" key)
(modal/show! key {:x (.-clientX ^js event)
:y (.-clientY ^js event)
:position :right
@ -190,7 +191,12 @@
:collapsed (not @open?)
:all-clickable true
:title "THEMES"
:on-collapsed #(swap! open? not)}]]
:on-collapsed #(swap! open? not)}]
[:button {:class (stl/css :add-set)
:on-click (fn [event]
(modal/show! :tokens/themes {:x (.-clientX ^js event)
:y (.-clientY ^js event)}))}
i/add]]
(when @open?
[:div
[:style