diff --git a/frontend/src/app/main/ui/workspace.cljs b/frontend/src/app/main/ui/workspace.cljs index d291a8e8aa..3c32733314 100644 --- a/frontend/src/app/main/ui/workspace.cljs +++ b/frontend/src/app/main/ui/workspace.cljs @@ -32,9 +32,11 @@ [app.main.ui.workspace.sidebar :refer [left-sidebar* right-sidebar*]] [app.main.ui.workspace.sidebar.collapsable-button :refer [collapsed-button]] [app.main.ui.workspace.sidebar.history :refer [history-toolbox*]] + [app.main.ui.workspace.tokens.export] + [app.main.ui.workspace.tokens.export.modal] + [app.main.ui.workspace.tokens.import] + [app.main.ui.workspace.tokens.import.modal] [app.main.ui.workspace.tokens.modals] - [app.main.ui.workspace.tokens.modals.export] - [app.main.ui.workspace.tokens.modals.import] [app.main.ui.workspace.tokens.settings] [app.main.ui.workspace.tokens.themes.create-modal] [app.main.ui.workspace.viewport :refer [viewport*]] diff --git a/frontend/src/app/main/ui/workspace/tokens/context_menu.cljs b/frontend/src/app/main/ui/workspace/tokens/common/context_menu.cljs similarity index 99% rename from frontend/src/app/main/ui/workspace/tokens/context_menu.cljs rename to frontend/src/app/main/ui/workspace/tokens/common/context_menu.cljs index a6ce607284..4bab592e47 100644 --- a/frontend/src/app/main/ui/workspace/tokens/context_menu.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/common/context_menu.cljs @@ -4,7 +4,7 @@ ;; ;; Copyright (c) KALEIDOS INC -(ns app.main.ui.workspace.tokens.context-menu +(ns app.main.ui.workspace.tokens.common.context-menu (:require-macros [app.main.style :as stl]) (:require [app.common.data :as d] diff --git a/frontend/src/app/main/ui/workspace/tokens/context_menu.scss b/frontend/src/app/main/ui/workspace/tokens/common/context_menu.scss similarity index 98% rename from frontend/src/app/main/ui/workspace/tokens/context_menu.scss rename to frontend/src/app/main/ui/workspace/tokens/common/context_menu.scss index b59130b3c4..edffbae1c9 100644 --- a/frontend/src/app/main/ui/workspace/tokens/context_menu.scss +++ b/frontend/src/app/main/ui/workspace/tokens/common/context_menu.scss @@ -4,7 +4,7 @@ // // Copyright (c) KALEIDOS INC -@use "../../ds/typography.scss" as *; +@use "../../../ds/typography.scss" as *; @import "refactor/common-refactor.scss"; .token-context-menu { diff --git a/frontend/src/app/main/ui/workspace/tokens/export.cljs b/frontend/src/app/main/ui/workspace/tokens/export.cljs new file mode 100644 index 0000000000..e3b2bbff13 --- /dev/null +++ b/frontend/src/app/main/ui/workspace/tokens/export.cljs @@ -0,0 +1,27 @@ +;; 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.export + (:require-macros [app.main.style :as stl]) + (:require + [app.main.data.modal :as modal] + [app.main.ui.ds.buttons.icon-button :refer [icon-button*]] + [app.main.ui.workspace.tokens.export.modal :refer [export-modal-body*]] + [app.util.i18n :refer [tr]] + [rumext.v2 :as mf])) + +(mf/defc export-modal* + {::mf/register modal/components + ::mf/register-as :tokens/export} + [] + [:div {:class (stl/css :modal-overlay)} + [:div {:class (stl/css :modal-dialog)} + [:> icon-button* {:class (stl/css :close-btn) + :on-click modal/hide! + :aria-label (tr "labels.close") + :variant "ghost" + :icon "close"}] + [:> export-modal-body*]]]) diff --git a/frontend/src/app/main/ui/workspace/tokens/export.scss b/frontend/src/app/main/ui/workspace/tokens/export.scss new file mode 100644 index 0000000000..0f0e21f66d --- /dev/null +++ b/frontend/src/app/main/ui/workspace/tokens/export.scss @@ -0,0 +1,30 @@ +// 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 + +@use "../../ds/typography.scss" as t; +@use "../../ds/_sizes.scss" as *; +@use "../../ds/_borders.scss" as *; +@import "refactor/common-refactor.scss"; + +.modal-overlay { + @extend .modal-overlay-base; +} + +.modal-dialog { + --modal-width: 32rem; + --modal-padding: var(--sp-xxxl); + --container-max-height: 16rem; + @extend .modal-container-base; + user-select: none; + width: var(--modal-width); + max-width: 100%; +} + +.close-btn { + position: absolute; + inset-block-start: var(--sp-s); + inset-inline-end: var(--sp-s); +} diff --git a/frontend/src/app/main/ui/workspace/tokens/modals/export.cljs b/frontend/src/app/main/ui/workspace/tokens/export/modal.cljs similarity index 90% rename from frontend/src/app/main/ui/workspace/tokens/modals/export.cljs rename to frontend/src/app/main/ui/workspace/tokens/export/modal.cljs index 8c2377689d..40dd59ae68 100644 --- a/frontend/src/app/main/ui/workspace/tokens/modals/export.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/export/modal.cljs @@ -4,7 +4,7 @@ ;; ;; Copyright (c) KALEIDOS INC -(ns app.main.ui.workspace.tokens.modals.export +(ns app.main.ui.workspace.tokens.export.modal (:require-macros [app.main.style :as stl]) (:require [app.common.json :as json] @@ -15,7 +15,6 @@ [app.main.store :as st] [app.main.ui.components.code-block :refer [code-block]] [app.main.ui.ds.buttons.button :refer [button*]] - [app.main.ui.ds.buttons.icon-button :refer [icon-button*]] [app.main.ui.ds.foundations.assets.icon :refer [icon*]] [app.main.ui.ds.foundations.typography.heading :refer [heading*]] [app.main.ui.ds.foundations.typography.text :refer [text*]] @@ -134,16 +133,3 @@ {:tabs tabs :selected @selected-tab :on-change-tab on-change-tab}]])) - -(mf/defc export-modal* - {::mf/register modal/components - ::mf/register-as :tokens/export} - [] - [:div {:class (stl/css :modal-overlay)} - [:div {:class (stl/css :modal-dialog)} - [:> icon-button* {:class (stl/css :close-btn) - :on-click modal/hide! - :aria-label (tr "labels.close") - :variant "ghost" - :icon "close"}] - [:> export-modal-body*]]]) diff --git a/frontend/src/app/main/ui/workspace/tokens/modals/export.scss b/frontend/src/app/main/ui/workspace/tokens/export/modal.scss similarity index 86% rename from frontend/src/app/main/ui/workspace/tokens/modals/export.scss rename to frontend/src/app/main/ui/workspace/tokens/export/modal.scss index 922e8c403d..9242470261 100644 --- a/frontend/src/app/main/ui/workspace/tokens/modals/export.scss +++ b/frontend/src/app/main/ui/workspace/tokens/export/modal.scss @@ -9,20 +9,6 @@ @use "../../../ds/_borders.scss" as *; @import "refactor/common-refactor.scss"; -.modal-overlay { - @extend .modal-overlay-base; -} - -.modal-dialog { - --modal-width: 32rem; - --modal-padding: var(--sp-xxxl); - --container-max-height: 16rem; - @extend .modal-container-base; - user-select: none; - width: var(--modal-width); - max-width: 100%; -} - .export-modal-wrapper { display: flex; flex-direction: column; @@ -92,12 +78,6 @@ gap: var(--sp-s); } -.close-btn { - position: absolute; - inset-block-start: var(--sp-s); - inset-inline-end: var(--sp-s); -} - .json-preview { width: 100%; } diff --git a/frontend/src/app/main/ui/workspace/tokens/import.cljs b/frontend/src/app/main/ui/workspace/tokens/import.cljs new file mode 100644 index 0000000000..26b324b24c --- /dev/null +++ b/frontend/src/app/main/ui/workspace/tokens/import.cljs @@ -0,0 +1,21 @@ +(ns app.main.ui.workspace.tokens.import + (:require-macros [app.main.style :as stl]) + (:require + [app.main.data.modal :as modal] + [app.main.ui.ds.buttons.icon-button :refer [icon-button*]] + [app.main.ui.workspace.tokens.import.modal :refer [import-modal-body*]] + [app.util.i18n :refer [tr]] + [rumext.v2 :as mf])) + +(mf/defc import-modal* + {::mf/register modal/components + ::mf/register-as :tokens/import} + [] + [:div {:class (stl/css :modal-overlay)} + [:div {:class (stl/css :modal-dialog)} + [:> icon-button* {:class (stl/css :close-btn) + :on-click modal/hide! + :aria-label (tr "labels.close") + :variant "ghost" + :icon "close"}] + [:> import-modal-body*]]]) diff --git a/frontend/src/app/main/ui/workspace/tokens/import.scss b/frontend/src/app/main/ui/workspace/tokens/import.scss new file mode 100644 index 0000000000..75cfbe34ae --- /dev/null +++ b/frontend/src/app/main/ui/workspace/tokens/import.scss @@ -0,0 +1,25 @@ +// 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 + +@use "../../ds/typography.scss" as t; +@use "../../ds/_borders.scss" as *; +@use "../../ds/_sizes.scss" as *; +@import "refactor/common-refactor.scss"; + +.modal-overlay { + @extend .modal-overlay-base; +} + +.modal-dialog { + @extend .modal-container-base; + user-select: none; +} + +.close-btn { + position: absolute; + inset-block-start: var(--sp-s); + inset-inline-end: var(--sp-s); +} diff --git a/frontend/src/app/main/ui/workspace/tokens/modals/import.cljs b/frontend/src/app/main/ui/workspace/tokens/import/modal.cljs similarity index 95% rename from frontend/src/app/main/ui/workspace/tokens/modals/import.cljs rename to frontend/src/app/main/ui/workspace/tokens/import/modal.cljs index 44fdfc2bdd..1246e3a877 100644 --- a/frontend/src/app/main/ui/workspace/tokens/modals/import.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/import/modal.cljs @@ -4,7 +4,7 @@ ;; ;; Copyright (c) KALEIDOS INC -(ns app.main.ui.workspace.tokens.modals.import +(ns app.main.ui.workspace.tokens.import.modal (:require-macros [app.main.style :as stl]) (:require [app.main.data.event :as ev] @@ -16,7 +16,6 @@ [app.main.store :as st] [app.main.ui.components.dropdown :refer [dropdown]] [app.main.ui.ds.buttons.button :refer [button*]] - [app.main.ui.ds.buttons.icon-button :refer [icon-button*]] [app.main.ui.ds.controls.shared.options-dropdown :refer [options-dropdown*]] [app.main.ui.ds.foundations.typography.heading :refer [heading*]] [app.main.ui.ds.foundations.typography.text :refer [text*]] @@ -274,16 +273,3 @@ :on-click handle-import-action :text-render render-button-text :default :zip}]]])) - -(mf/defc import-modal* - {::mf/register modal/components - ::mf/register-as :tokens/import} - [] - [:div {:class (stl/css :modal-overlay)} - [:div {:class (stl/css :modal-dialog)} - [:> icon-button* {:class (stl/css :close-btn) - :on-click modal/hide! - :aria-label (tr "labels.close") - :variant "ghost" - :icon "close"}] - [:> import-modal-body*]]]) diff --git a/frontend/src/app/main/ui/workspace/tokens/modals/import.scss b/frontend/src/app/main/ui/workspace/tokens/import/modal.scss similarity index 84% rename from frontend/src/app/main/ui/workspace/tokens/modals/import.scss rename to frontend/src/app/main/ui/workspace/tokens/import/modal.scss index 5f1d9d55d7..e1864ba7aa 100644 --- a/frontend/src/app/main/ui/workspace/tokens/modals/import.scss +++ b/frontend/src/app/main/ui/workspace/tokens/import/modal.scss @@ -9,15 +9,6 @@ @use "../../../ds/_sizes.scss" as *; @import "refactor/common-refactor.scss"; -.modal-overlay { - @extend .modal-overlay-base; -} - -.modal-dialog { - @extend .modal-container-base; - user-select: none; -} - .import-modal-wrapper { display: flex; flex-direction: column; @@ -45,12 +36,6 @@ gap: var(--sp-s); } -.close-btn { - position: absolute; - inset-block-start: var(--sp-s); - inset-inline-end: var(--sp-s); -} - .dropdown-trigger-btn { border-start-start-radius: 0; border-end-start-radius: 0; diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs index b628033d6c..26b06241c2 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs @@ -27,7 +27,7 @@ [app.main.ui.hooks :as h] [app.main.ui.hooks.resize :refer [use-resize-hook]] [app.main.ui.workspace.sidebar.assets.common :as cmm] - [app.main.ui.workspace.tokens.context-menu :refer [token-context-menu]] + [app.main.ui.workspace.tokens.common.context-menu :refer [token-context-menu]] [app.main.ui.workspace.tokens.sets :as tsets] [app.main.ui.workspace.tokens.sets-context-menu :refer [token-set-context-menu*]] [app.main.ui.workspace.tokens.themes :refer [themes-header*]]