From e45fa1380d82e775f83d9205110941df60c609f3 Mon Sep 17 00:00:00 2001 From: luisddm Date: Tue, 15 Oct 2024 21:06:37 +0200 Subject: [PATCH] :recycle: Replace buttons on workspace :recycle: Replace buttons on workspace :recycle: Format files :bug: Fix pull request issues --- frontend/src/app/main/ui/comments.cljs | 8 +- frontend/src/app/main/ui/comments.scss | 8 -- .../app/main/ui/ds/buttons/icon_button.cljs | 6 +- .../src/app/main/ui/workspace/comments.cljs | 8 +- .../src/app/main/ui/workspace/comments.scss | 14 --- .../src/app/main/ui/workspace/main_menu.cljs | 7 +- .../src/app/main/ui/workspace/main_menu.scss | 12 -- .../src/app/main/ui/workspace/plugins.cljs | 7 +- .../src/app/main/ui/workspace/plugins.scss | 11 -- .../app/main/ui/workspace/right_header.cljs | 17 +-- .../app/main/ui/workspace/right_header.scss | 19 --- .../app/main/ui/workspace/sidebar/assets.cljs | 11 +- .../app/main/ui/workspace/sidebar/assets.scss | 10 -- .../ui/workspace/sidebar/assets/colors.cljs | 9 +- .../ui/workspace/sidebar/assets/colors.scss | 12 -- .../workspace/sidebar/assets/components.cljs | 8 +- .../workspace/sidebar/assets/components.scss | 13 -- .../sidebar/assets/typographies.cljs | 9 +- .../sidebar/assets/typographies.scss | 12 -- .../app/main/ui/workspace/sidebar/debug.cljs | 8 +- .../app/main/ui/workspace/sidebar/debug.scss | 14 --- .../main/ui/workspace/sidebar/history.cljs | 8 +- .../main/ui/workspace/sidebar/history.scss | 14 --- .../app/main/ui/workspace/sidebar/layers.cljs | 8 +- .../app/main/ui/workspace/sidebar/layers.scss | 12 -- .../main/ui/workspace/sidebar/options.scss | 4 + .../workspace/sidebar/options/menus/blur.cljs | 24 ++-- .../workspace/sidebar/options/menus/blur.scss | 18 --- .../sidebar/options/menus/exports.cljs | 33 +++-- .../sidebar/options/menus/exports.scss | 26 ---- .../workspace/sidebar/options/menus/fill.cljs | 16 ++- .../workspace/sidebar/options/menus/fill.scss | 18 --- .../sidebar/options/menus/frame_grid.cljs | 22 ++-- .../sidebar/options/menus/frame_grid.scss | 18 --- .../sidebar/options/menus/interactions.cljs | 23 ++-- .../sidebar/options/menus/interactions.scss | 29 ----- .../sidebar/options/menus/layer.cljs | 27 ++-- .../sidebar/options/menus/layer.scss | 11 -- .../options/menus/layout_container.cljs | 78 +++++++----- .../options/menus/layout_container.scss | 47 +------ .../sidebar/options/menus/shadow.cljs | 32 ++--- .../sidebar/options/menus/shadow.scss | 17 --- .../sidebar/options/menus/stroke.cljs | 17 +-- .../sidebar/options/menus/stroke.scss | 17 --- .../workspace/sidebar/options/menus/text.cljs | 15 ++- .../workspace/sidebar/options/menus/text.scss | 18 --- .../sidebar/options/rows/color_row.cljs | 15 ++- .../sidebar/options/rows/color_row.scss | 10 -- .../main/ui/workspace/sidebar/sitemap.cljs | 9 +- .../main/ui/workspace/sidebar/sitemap.scss | 13 -- .../ui/workspace/viewport/path_actions.cljs | 1 - frontend/translations/en.po | 116 ++++++++++++++++++ frontend/translations/es.po | 116 ++++++++++++++++++ 53 files changed, 495 insertions(+), 560 deletions(-) diff --git a/frontend/src/app/main/ui/comments.cljs b/frontend/src/app/main/ui/comments.cljs index 6fa55cc07..db9e37018 100644 --- a/frontend/src/app/main/ui/comments.cljs +++ b/frontend/src/app/main/ui/comments.cljs @@ -17,6 +17,7 @@ [app.main.refs :as refs] [app.main.store :as st] [app.main.ui.components.dropdown :refer [dropdown]] + [app.main.ui.ds.buttons.icon-button :refer [icon-button*]] [app.main.ui.icons :as i] [app.util.dom :as dom] [app.util.i18n :as i18n :refer [tr]] @@ -335,9 +336,10 @@ :global/checked (:is-resolved thread))} i/tick]]) (when (= (:id profile) (:id owner)) - [:div {:class (stl/css :options) - :on-click on-toggle-options} - i/menu])] + [:> icon-button* {:variant "ghost" + :aria-label (tr "labels.options") + :on-click on-toggle-options + :icon "menu"}])] [:div {:class (stl/css :content)} (if @edition? diff --git a/frontend/src/app/main/ui/comments.scss b/frontend/src/app/main/ui/comments.scss index a2d1fdc52..d90a158dd 100644 --- a/frontend/src/app/main/ui/comments.scss +++ b/frontend/src/app/main/ui/comments.scss @@ -206,14 +206,6 @@ cursor: pointer; } } - .options { - @extend .button-tertiary; - height: $s-32; - width: $s-28; - svg { - @extend .button-icon; - } - } } } .comment-options-dropdown { diff --git a/frontend/src/app/main/ui/ds/buttons/icon_button.cljs b/frontend/src/app/main/ui/ds/buttons/icon_button.cljs index dadb285af..0987937b9 100644 --- a/frontend/src/app/main/ui/ds/buttons/icon_button.cljs +++ b/frontend/src/app/main/ui/ds/buttons/icon_button.cljs @@ -18,7 +18,7 @@ (def ^:private schema:icon-button [:map [:class {:optional true} :string] - [:icon {:optional true} + [:icon [:and :string [:fn #(contains? icon-list %)]]] [:aria-label :string] [:variant {:optional true} @@ -27,7 +27,7 @@ (mf/defc icon-button* {::mf/props :obj ::mf/schema schema:icon-button} - [{:keys [class icon variant aria-label] :rest props}] + [{:keys [class icon variant aria-label children] :rest props}] (let [variant (or variant "primary") class (dm/str class " " (stl/css-case :icon-button true :icon-button-primary (= variant "primary") @@ -35,4 +35,4 @@ :icon-button-ghost (= variant "ghost") :icon-button-destructive (= variant "destructive"))) props (mf/spread-props props {:class class :title aria-label})] - [:> "button" props [:> icon* {:id icon :aria-label aria-label}]])) \ No newline at end of file + [:> "button" props [:> icon* {:id icon :aria-label aria-label}] children])) diff --git a/frontend/src/app/main/ui/workspace/comments.cljs b/frontend/src/app/main/ui/workspace/comments.cljs index 17be9321c..66ccc1e3d 100644 --- a/frontend/src/app/main/ui/workspace/comments.cljs +++ b/frontend/src/app/main/ui/workspace/comments.cljs @@ -16,6 +16,7 @@ [app.main.ui.comments :as cmt] [app.main.ui.components.dropdown :refer [dropdown]] [app.main.ui.context :as ctx] + [app.main.ui.ds.buttons.icon-button :refer [icon-button*]] [app.main.ui.icons :as i] [app.util.dom :as dom] [app.util.i18n :as i18n :refer [tr]] @@ -124,9 +125,10 @@ [:div {:class (stl/css-case :comments-section-title true :viewer-title from-viewer)} [:span (tr "labels.comments")] - [:button {:class (stl/css :close-button) - :on-click close-section} - i/close]] + [:> icon-button* {:variant "ghost" + :aria-label (tr "labels.close") + :on-click close-section + :icon "close"}]] [:button {:class (stl/css :mode-dropdown-wrapper) :on-click toggle-mode-selector} diff --git a/frontend/src/app/main/ui/workspace/comments.scss b/frontend/src/app/main/ui/workspace/comments.scss index c1b7124f5..0d9026a78 100644 --- a/frontend/src/app/main/ui/workspace/comments.scss +++ b/frontend/src/app/main/ui/workspace/comments.scss @@ -38,20 +38,6 @@ margin-block-start: $s-8; } -.close-button { - @extend .button-tertiary; - position: absolute; - right: $s-2; - top: $s-2; - height: $s-28; - width: $s-28; - border-radius: $br-6; - svg { - @extend .button-icon; - stroke: var(--icon-foreground); - } -} - .mode-dropdown-wrapper { @include buttonStyle; @extend .asset-element; diff --git a/frontend/src/app/main/ui/workspace/main_menu.cljs b/frontend/src/app/main/ui/workspace/main_menu.cljs index 2739ede14..763c9c883 100644 --- a/frontend/src/app/main/ui/workspace/main_menu.cljs +++ b/frontend/src/app/main/ui/workspace/main_menu.cljs @@ -29,6 +29,7 @@ [app.main.store :as st] [app.main.ui.components.dropdown-menu :refer [dropdown-menu dropdown-menu-item*]] [app.main.ui.context :as ctx] + [app.main.ui.ds.buttons.icon-button :refer [icon-button*]] [app.main.ui.hooks.resize :as r] [app.main.ui.icons :as i] [app.plugins.register :as preg] @@ -745,8 +746,10 @@ [:* - [:div {:on-click open-menu - :class (stl/css :menu-btn)} i/menu] + [:> icon-button* {:variant "ghost" + :aria-label (tr "shortcut-subsection.main-menu") + :on-click open-menu + :icon "menu"}] [:& dropdown-menu {:show show-menu? :on-close close-menu diff --git a/frontend/src/app/main/ui/workspace/main_menu.scss b/frontend/src/app/main/ui/workspace/main_menu.scss index 704195050..e74ddcba6 100644 --- a/frontend/src/app/main/ui/workspace/main_menu.scss +++ b/frontend/src/app/main/ui/workspace/main_menu.scss @@ -6,18 +6,6 @@ @import "refactor/common-refactor.scss"; -.menu-btn { - @extend .button-tertiary; - height: $s-32; - width: calc($s-24 + $s-4); - padding: 0; - border-radius: $br-8; - svg { - @extend .button-icon; - stroke: var(--icon-foreground); - } -} - .menu { @extend .menu-dropdown; top: $s-48; diff --git a/frontend/src/app/main/ui/workspace/plugins.cljs b/frontend/src/app/main/ui/workspace/plugins.cljs index bafa2c362..b6aee18d6 100644 --- a/frontend/src/app/main/ui/workspace/plugins.cljs +++ b/frontend/src/app/main/ui/workspace/plugins.cljs @@ -16,6 +16,7 @@ [app.main.store :as st] [app.main.ui.components.search-bar :refer [search-bar]] [app.main.ui.components.title-bar :refer [title-bar]] + [app.main.ui.ds.buttons.icon-button :refer [icon-button*]] [app.main.ui.icons :as i] [app.plugins.register :as preg] [app.util.avatars :as avatars] @@ -65,8 +66,10 @@ [:div {:class (stl/css :plugin-summary)} (d/nilv description "")]] [:button {:class (stl/css :open-button) :on-click handle-open-click} (tr "workspace.plugins.button-open")] - [:button {:class (stl/css :trash-button) - :on-click handle-delete-click} i/delete]])) + [:> icon-button* {:variant "ghost" + :aria-label (tr "workspace.plugins.remove-plugin") + :on-click handle-delete-click + :icon "delete"}]])) (mf/defc plugin-management-dialog {::mf/register modal/components diff --git a/frontend/src/app/main/ui/workspace/plugins.scss b/frontend/src/app/main/ui/workspace/plugins.scss index 643b4957a..96ad29243 100644 --- a/frontend/src/app/main/ui/workspace/plugins.scss +++ b/frontend/src/app/main/ui/workspace/plugins.scss @@ -121,17 +121,6 @@ text-transform: uppercase; } -.trash-button { - @extend .button-tertiary; - width: $s-32; - height: $s-32; - - svg { - @extend .button-icon; - stroke: var(--icon-foreground); - } -} - .plugins-list { padding-top: $s-20; overflow-x: hidden; diff --git a/frontend/src/app/main/ui/workspace/right_header.cljs b/frontend/src/app/main/ui/workspace/right_header.cljs index 2c4466bd8..c73a738a6 100644 --- a/frontend/src/app/main/ui/workspace/right_header.cljs +++ b/frontend/src/app/main/ui/workspace/right_header.cljs @@ -16,6 +16,7 @@ [app.main.store :as st] [app.main.ui.components.dropdown :refer [dropdown]] [app.main.ui.context :as ctx] + [app.main.ui.ds.buttons.icon-button :refer [icon-button*]] [app.main.ui.exports.assets :refer [export-progress-widget]] [app.main.ui.formats :as fmt] [app.main.ui.icons :as i] @@ -108,15 +109,15 @@ [:ul {:class (stl/css :dropdown)} [:li {:class (stl/css :basic-zoom-bar)} [:span {:class (stl/css :zoom-btns)} - [:button {:class (stl/css :zoom-btn) - :on-click on-decrease} - [:span {:class (stl/css :zoom-icon)} - i/remove-icon]] + [:> icon-button* {:variant "ghost" + :aria-label (tr "shortcuts.decrease-zoom") + :on-click on-decrease + :icon "remove"}] [:p {:class (stl/css :zoom-text)} zoom] - [:button {:class (stl/css :zoom-btn) - :on-click on-increase} - [:span {:class (stl/css :zoom-icon)} - i/add]]] + [:> icon-button* {:variant "ghost" + :aria-label (tr "shortcuts.increase-zoom") + :on-click on-increase + :icon "add"}]] [:button {:class (stl/css :reset-btn) :on-click on-zoom-reset} (tr "workspace.header.reset-zoom")]] diff --git a/frontend/src/app/main/ui/workspace/right_header.scss b/frontend/src/app/main/ui/workspace/right_header.scss index dd459675b..db97015a1 100644 --- a/frontend/src/app/main/ui/workspace/right_header.scss +++ b/frontend/src/app/main/ui/workspace/right_header.scss @@ -72,25 +72,6 @@ display: flex; } -.zoom-btn { - @extend .button-tertiary; - height: $s-28; - width: $s-28; - border-radius: $br-8; - .zoom-icon { - @include flexCenter; - svg { - @extend .button-icon; - stroke: var(--icon-foreground); - } - } - &:hover { - .zoom-icon svg { - stroke: var(--button-tertiary-foreground-color-hover); - } - } -} - .zoom-text { @include flexCenter; height: 100%; diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets.cljs index 7c4a6632c..460a395de 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/assets.cljs @@ -16,6 +16,7 @@ [app.main.ui.components.context-menu-a11y :refer [context-menu*]] [app.main.ui.components.search-bar :refer [search-bar]] [app.main.ui.context :as ctx] + [app.main.ui.ds.buttons.icon-button :refer [icon-button*]] [app.main.ui.icons :as i] [app.main.ui.workspace.sidebar.assets.common :as cmm] [app.main.ui.workspace.sidebar.assets.file-library :refer [file-library]] @@ -182,12 +183,10 @@ :top 158 :left 18 :options options}] - [:button {:class (stl/css :sort-button) - :title (tr "workspace.assets.sort") - :on-click toggle-ordering} - (if reverse-sort? - i/asc-sort - i/desc-sort)]]] + [:> icon-button* {:variant "ghost" + :aria-label (tr "workspace.assets.sort") + :on-click toggle-ordering + :icon (if reverse-sort? "asc-sort" "desc-sort")}]]] [:& (mf/provider cmm/assets-filters) {:value filters} [:& (mf/provider cmm/assets-toggle-ordering) {:value toggle-ordering} diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets.scss b/frontend/src/app/main/ui/workspace/sidebar/assets.scss index 830ec17be..acb9f3431 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/assets.scss @@ -134,13 +134,3 @@ display: flex; gap: $s-4; } - -.sort-button { - @extend .button-tertiary; - width: $s-32; - border-radius: $br-8; - svg { - @extend .button-icon-small; - stroke: var(--icon-foreground); - } -} diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/colors.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets/colors.cljs index dd8e0156f..7f91cf495 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/colors.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/colors.cljs @@ -20,7 +20,7 @@ [app.main.store :as st] [app.main.ui.components.color-bullet :as cb] [app.main.ui.context :as ctx] - [app.main.ui.icons :as i] + [app.main.ui.ds.buttons.icon-button :refer [icon-button*]] [app.main.ui.workspace.sidebar.assets.common :as cmm] [app.main.ui.workspace.sidebar.assets.groups :as grp] [app.util.color :as uc] @@ -491,9 +491,10 @@ (when local? [:& cmm/asset-section-block {:role :title-button} (when-not read-only? - [:button {:class (stl/css :assets-btn) - :on-click add-color-clicked} - i/add])]) + [:> icon-button* {:variant "ghost" + :aria-label (tr "workspace.assets.colors.add-color") + :on-click add-color-clicked + :icon "add"}])]) [:& cmm/asset-section-block {:role :content} diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/colors.scss b/frontend/src/app/main/ui/workspace/sidebar/assets/colors.scss index ae7193502..64b3fee3a 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/colors.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/colors.scss @@ -11,18 +11,6 @@ // the elements are not part of the same cascade). $assets-button-width: $s-28; -.assets-btn { - @extend .button-tertiary; - height: $s-32; - width: $assets-button-width; - padding: 0; - border-radius: $br-8; - svg { - @extend .button-icon; - stroke: var(--icon-foreground); - } -} - .colors-group { margin-top: $s-4; } diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/components.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets/components.cljs index a343d9ef7..72a472841 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/components.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/components.cljs @@ -24,6 +24,7 @@ [app.main.ui.components.file-uploader :refer [file-uploader]] [app.main.ui.components.radio-buttons :refer [radio-button radio-buttons]] [app.main.ui.context :as ctx] + [app.main.ui.ds.buttons.icon-button :refer [icon-button*]] [app.main.ui.hooks :as h] [app.main.ui.icons :as i] [app.main.ui.workspace.sidebar.assets.common :as cmm] @@ -527,9 +528,10 @@ :id "opt-grid"}]]]) (when (and components-v2 (not read-only?) local?) - [:div {:on-click add-component - :class (stl/css :add-component)} - i/add + [:> icon-button* {:variant "ghost" + :aria-label (tr "workspace.assets.components.add-component") + :on-click add-component + :icon "add"} [:& file-uploader {:accept cm/str-image-types :multi true :ref input-ref diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/components.scss b/frontend/src/app/main/ui/workspace/sidebar/assets/components.scss index 2c351e8df..934013902 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/components.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/components.scss @@ -209,19 +209,6 @@ align-items: center; } -.add-component { - @extend .button-tertiary; - height: $s-32; - width: $s-28; - margin-left: $s-2; - border-radius: $br-8; - - svg { - @extend .button-icon; - stroke: var(--icon-foreground); - } -} - .dragging { position: absolute; top: 0; diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/typographies.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets/typographies.cljs index 33b12a9c9..fe5d46a99 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/typographies.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/typographies.cljs @@ -18,7 +18,7 @@ [app.main.refs :as refs] [app.main.store :as st] [app.main.ui.context :as ctx] - [app.main.ui.icons :as i] + [app.main.ui.ds.buttons.icon-button :refer [icon-button*]] [app.main.ui.workspace.sidebar.assets.common :as cmm] [app.main.ui.workspace.sidebar.assets.groups :as grp] [app.main.ui.workspace.sidebar.options.menus.typography :refer [typography-entry]] @@ -404,9 +404,10 @@ (when local? [:& cmm/asset-section-block {:role :title-button} (when-not read-only? - [:button {:class (stl/css :assets-btn) - :on-click add-typography} - i/add])]) + [:> icon-button* {:variant "ghost" + :aria-label (tr "workspace.assets.typography.add-typography") + :on-click add-typography + :icon "add"}])]) [:& cmm/asset-section-block {:role :content} [:& typographies-group {:file-id file-id diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/typographies.scss b/frontend/src/app/main/ui/workspace/sidebar/assets/typographies.scss index e0ad31a23..8393c1bb4 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/typographies.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/typographies.scss @@ -6,18 +6,6 @@ @import "refactor/common-refactor.scss"; -.assets-btn { - @extend .button-tertiary; - height: $s-32; - width: calc($s-24 + $s-4); - padding: 0; - border-radius: $br-8; - svg { - @extend .button-icon; - stroke: var(--icon-foreground); - } -} - .assets-list { padding: 0 0 0 $s-4; } diff --git a/frontend/src/app/main/ui/workspace/sidebar/debug.cljs b/frontend/src/app/main/ui/workspace/sidebar/debug.cljs index 56f4f6119..f5c73aab2 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/debug.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/debug.cljs @@ -11,9 +11,11 @@ [app.common.data.macros :as dm] [app.main.data.workspace :as dw] [app.main.store :as st] + [app.main.ui.ds.buttons.icon-button :refer [icon-button*]] [app.main.ui.icons :as i] [app.util.debug :as dbg] [app.util.dom :as dom] + [app.util.i18n :as i18n :refer [tr]] [rumext.v2 :as mf])) (mf/defc debug-panel @@ -34,8 +36,10 @@ [:div {:class (dm/str class " " (stl/css :debug-panel))} [:div {:class (stl/css :panel-title)} [:span "Debugging tools"] - [:div {:class (stl/css :close-button) :on-click handle-close} - i/close]] + [:> icon-button* {:variant "ghost" + :aria-label (tr "labels.close") + :on-click handle-close + :icon "close"}]] [:div {:class (stl/css :debug-panel-inner)} (for [option (sort-by d/name dbg/options)] diff --git a/frontend/src/app/main/ui/workspace/sidebar/debug.scss b/frontend/src/app/main/ui/workspace/sidebar/debug.scss index 6cb0c1405..ecbb8c0d5 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/debug.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/debug.scss @@ -29,20 +29,6 @@ } } -.close-button { - @extend .button-tertiary; - position: absolute; - right: $s-2; - top: $s-2; - height: $s-28; - width: $s-28; - border-radius: $br-6; - svg { - @extend .button-icon; - stroke: var(--icon-foreground); - } -} - .checkbox-wrapper { @extend .input-checkbox; height: $s-32; diff --git a/frontend/src/app/main/ui/workspace/sidebar/history.cljs b/frontend/src/app/main/ui/workspace/sidebar/history.cljs index 7ea8e22fd..463ae4c13 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/history.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/history.cljs @@ -14,6 +14,7 @@ [app.main.data.workspace.undo :as dwu] [app.main.refs :as refs] [app.main.store :as st] + [app.main.ui.ds.buttons.icon-button :refer [icon-button*]] [app.main.ui.icons :as i] [app.util.dom :as dom] [app.util.i18n :refer [tr] :as i18n] @@ -333,9 +334,10 @@ [:div {:class (stl/css :history-toolbox)} [:div {:class (stl/css :history-toolbox-title)} [:span (tr "workspace.undo.title")] - [:div {:class (stl/css :close-button) - :on-click toggle-history} - i/close]] + [:> icon-button* {:variant "ghost" + :aria-label (tr "labels.close") + :on-click toggle-history + :icon "close"}]] (if (empty? entries) [:div {:class (stl/css :history-entry-empty)} [:div {:class (stl/css :history-entry-empty-icon)} i/history] diff --git a/frontend/src/app/main/ui/workspace/sidebar/history.scss b/frontend/src/app/main/ui/workspace/sidebar/history.scss index 865bf6ffd..e6d775a35 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/history.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/history.scss @@ -29,20 +29,6 @@ } } -.close-button { - @extend .button-tertiary; - position: absolute; - right: $s-2; - top: $s-2; - height: $s-28; - width: $s-28; - border-radius: $br-6; - svg { - @extend .button-icon; - stroke: var(--icon-foreground); - } -} - .history-entry-empty { @include flexCenter; flex-direction: column; diff --git a/frontend/src/app/main/ui/workspace/sidebar/layers.cljs b/frontend/src/app/main/ui/workspace/sidebar/layers.cljs index ec072f367..88f3c4601 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/layers.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/layers.cljs @@ -18,6 +18,7 @@ [app.main.ui.components.search-bar :refer [search-bar]] [app.main.ui.components.shape-icon :as sic] [app.main.ui.components.title-bar :refer [title-bar]] + [app.main.ui.ds.buttons.icon-button :refer [icon-button*]] [app.main.ui.hooks :as hooks] [app.main.ui.icons :as i] [app.main.ui.notifications.badge :refer [badge-notification]] @@ -294,9 +295,10 @@ :active active?)} i/filter-icon]] - [:button {:class (stl/css :close-search) - :on-click toggle-search} - i/close]] + [:> icon-button* {:variant "ghost" + :aria-label (tr "labels.close") + :on-click toggle-search + :icon "close"}]] [:div {:class (stl/css :active-filters)} (for [fkey current-filters] diff --git a/frontend/src/app/main/ui/workspace/sidebar/layers.scss b/frontend/src/app/main/ui/workspace/sidebar/layers.scss index 5db6c61b7..bdcdf9168 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/layers.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/layers.scss @@ -53,18 +53,6 @@ @extend .button-icon-selected; } } - .close-search { - @extend .button-tertiary; - height: $s-32; - width: $s-28; - min-width: $s-28; - padding: 0; - border-radius: $br-8; - svg { - @extend .button-icon-small; - stroke: var(--icon-foreground); - } - } } } diff --git a/frontend/src/app/main/ui/workspace/sidebar/options.scss b/frontend/src/app/main/ui/workspace/sidebar/options.scss index 940a92908..a7bbe6710 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options.scss @@ -40,6 +40,10 @@ scrollbar-gutter: stable; } +.design-options { + padding-inline-end: $s-12; +} + .inspect { scrollbar-gutter: unset; } diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.cljs index b943680e8..99a024cc8 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.cljs @@ -12,6 +12,7 @@ [app.main.store :as st] [app.main.ui.components.numeric-input :refer [numeric-input*]] [app.main.ui.components.title-bar :refer [title-bar]] + [app.main.ui.ds.buttons.icon-button :refer [icon-button*]] [app.main.ui.icons :as i] [app.util.i18n :as i18n :refer [tr]] [rumext.v2 :as mf])) @@ -86,9 +87,11 @@ (tr "workspace.options.blur-options.title")) :class (stl/css-case :title-spacing-blur (not has-value?))} (when-not has-value? - [:button {:class (stl/css :add-blur) - :data-testid "add-blur" - :on-click handle-add} i/add])]] + [:> icon-button* {:variant "ghost" + :aria-label (tr "workspace.options.blur-options.add-blur") + :on-click handle-add + :icon "add" + :data-testid "add-blur"}])]] (when (and open? has-value?) [:div {:class (stl/css :element-set-content)} [:div {:class (stl/css-case :first-row true @@ -101,13 +104,14 @@ [:span {:class (stl/css :label)} (tr "workspace.options.blur-options.title")]] [:div {:class (stl/css :actions)} - [:button {:class (stl/css :action-btn) - :on-click handle-toggle-visibility} - (if hidden? - i/hide - i/shown)] - [:button {:class (stl/css :action-btn) - :on-click handle-delete} i/remove-icon]]] + [:> icon-button* {:variant "ghost" + :aria-label (tr "workspace.options.blur-options.toggle-blur") + :on-click handle-toggle-visibility + :icon (if hidden? "hide" "shown")}] + [:> icon-button* {:variant "ghost" + :aria-label (tr "workspace.options.blur-options.remove-blur") + :on-click handle-delete + :icon "remove"}]]] (when more-options? [:div {:class (stl/css :second-row)} [:label {:class (stl/css :label) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.scss index 4d359a930..44598cdf2 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.scss @@ -15,15 +15,6 @@ margin: 0; } -.add-blur { - @extend .button-tertiary; - height: $s-32; - width: $s-28; - svg { - @extend .button-icon; - } -} - .element-set-content { @include flexColumn; margin-bottom: $s-8; @@ -72,15 +63,6 @@ } .actions { @include flexRow; - .action-btn { - @extend .button-tertiary; - box-sizing: border-box; - height: $s-32; - width: $s-28; - svg { - @extend .button-icon; - } - } } &.hidden { diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.cljs index bcec78142..8fd7088e2 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.cljs @@ -16,8 +16,8 @@ [app.main.store :as st] [app.main.ui.components.select :refer [select]] [app.main.ui.components.title-bar :refer [title-bar]] + [app.main.ui.ds.buttons.icon-button :refer [icon-button*]] [app.main.ui.exports.assets] - [app.main.ui.icons :as i] [app.util.dom :as dom] [app.util.i18n :refer [tr c]] [app.util.keyboard :as kbd] @@ -116,12 +116,15 @@ delete-export (mf/use-fn (mf/deps ids) - (fn [position] - (let [remove-fill-by-index (fn [values index] (->> (d/enumerate values) + (fn [event] + (let [value (-> (dom/get-current-target event) + (dom/get-data "value") + (d/parse-integer)) + remove-fill-by-index (fn [values index] (->> (d/enumerate values) (filterv (fn [[idx _]] (not= idx index))) (mapv second))) - remove (fn [shape] (update shape :exports remove-fill-by-index position))] + remove (fn [shape] (update shape :exports remove-fill-by-index value))] (st/emit! (dwsh/update-shapes ids remove))))) on-scale-change @@ -188,9 +191,10 @@ :on-collapsed toggle-content :title (tr (if (> (count ids) 1) "workspace.options.export-multiple" "workspace.options.export")) :class (stl/css-case :title-spacing-export (not has-exports?))} - [:button {:class (stl/css :add-export) - :on-click add-export} - i/add]]] + [:> icon-button* {:variant "ghost" + :aria-label (tr "workspace.options.export.add-export") + :on-click add-export + :icon "add"}]]] (when open? [:div {:class (stl/css :element-set-content)} @@ -199,9 +203,10 @@ [:div {:class (stl/css :multiple-exports)} [:div {:class (stl/css :label)} (tr "settings.multiple")] [:div {:class (stl/css :actions)} - [:button {:class (stl/css :action-btn) - :on-click on-remove-all} - i/remove-icon]]] + [:> icon-button* {:variant "ghost" + :aria-label (tr "workspace.options.export.remove-export") + :on-click on-remove-all + :icon "remove"}]]] (seq exports) [:* @@ -233,9 +238,11 @@ :on-change on-suffix-change :on-key-down manage-key-down}]]] - [:button {:class (stl/css :action-btn) - :on-click (partial delete-export index)} - i/remove-icon]])]) + [:> icon-button* {:variant "ghost" + :aria-label (tr "workspace.options.export.remove-export") + :on-click delete-export + :data-value index + :icon "remove"}]])]) (when (or (= :multiple exports) (seq exports)) [:button diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.scss index 1f486690e..6bf3152dd 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.scss @@ -15,15 +15,6 @@ margin: 0; } -.add-export { - @extend .button-tertiary; - height: $s-32; - width: $s-28; - svg { - @extend .button-icon; - } -} - .element-set-content { @include flexColumn; margin: $s-4 0 $s-8 0; @@ -36,14 +27,6 @@ } .actions { @include flexRow; - .action-btn { - @extend .button-tertiary; - height: $s-32; - width: $s-28; - svg { - @extend .button-icon; - } - } } } @@ -51,15 +34,6 @@ display: grid; grid-template-columns: repeat(8, 1fr); column-gap: $s-4; - - .action-btn { - @extend .button-tertiary; - height: $s-32; - width: $s-28; - svg { - @extend .button-icon; - } - } } .input-wrapper { diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.cljs index 04a73f936..b8d832f8b 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.cljs @@ -13,6 +13,7 @@ [app.main.data.workspace.colors :as dc] [app.main.store :as st] [app.main.ui.components.title-bar :refer [title-bar]] + [app.main.ui.ds.buttons.icon-button :refer [icon-button*]] [app.main.ui.hooks :as h] [app.main.ui.icons :as i] [app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row]] @@ -145,9 +146,11 @@ :class (stl/css-case :title-spacing-fill (not has-fills?))} (when (and (not disable-remove?) (not (= :multiple fills))) - [:button {:class (stl/css :add-fill) - :data-testid "add-fill" - :on-click on-add} i/add])]] + [:> icon-button* {:variant "ghost" + :aria-label (tr "workspace.options.fill.add-fill") + :on-click on-add + :data-testid "add-fill" + :icon "add"}])]] (when open? [:div {:class (stl/css :element-content)} @@ -156,9 +159,10 @@ [:div {:class (stl/css :element-set-options-group)} [:div {:class (stl/css :group-label)} (tr "settings.multiple")] - [:button {:on-click on-remove-all - :class (stl/css :remove-btn)} - i/remove-icon]] + [:> icon-button* {:variant "ghost" + :aria-label (tr "workspace.options.fill.remove-fill") + :on-click on-remove-all + :icon "remove"}]] (seq fills) [:& h/sortable-container {} diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.scss index 08b5581db..5646c32f1 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.scss @@ -19,15 +19,6 @@ margin: 0; } -.add-fill { - @extend .button-tertiary; - height: $s-32; - width: $s-28; - svg { - @extend .button-icon; - } -} - .element-content { display: flex; flex-direction: column; @@ -43,15 +34,6 @@ @extend .mixed-bar; } -.remove-btn { - @extend .button-tertiary; - height: $s-32; - width: $s-28; - svg { - @extend .button-icon; - } -} - .checkbox { @extend .input-checkbox; padding-left: $s-8; diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs index 732c67b3c..a0d63505c 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs @@ -16,6 +16,7 @@ [app.main.ui.components.numeric-input :refer [numeric-input*]] [app.main.ui.components.select :refer [select]] [app.main.ui.components.title-bar :refer [title-bar]] + [app.main.ui.ds.buttons.icon-button :refer [icon-button*]] [app.main.ui.icons :as i] [app.main.ui.workspace.sidebar.options.common :refer [advanced-options]] [app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row]] @@ -178,12 +179,14 @@ :on-change handle-change-size}]])] [:div {:class (stl/css :actions)} - [:button {:class (stl/css :action-btn) - :on-click handle-toggle-visibility} - (if display i/shown i/hide)] - [:button {:class (stl/css :action-btn) - :on-click on-remove} - i/remove-icon]]] + [:> icon-button* {:variant "ghost" + :aria-label (tr "workspace.options.guides.toggle-guide") + :on-click handle-toggle-visibility + :icon (if display "shown" "hide")}] + [:> icon-button* {:variant "ghost" + :aria-label (tr "workspace.options.guides.remove-guide") + :on-click on-remove + :icon "remove"}]]] (when (:display grid) [:& advanced-options {:class (stl/css :grid-advanced-options) @@ -316,9 +319,10 @@ :class (stl/css-case :title-spacing-board-grid (not has-frame-grids?)) :title (tr "workspace.options.guides.title")} - [:button {:on-click handle-create-grid - :class (stl/css :add-grid)} - i/add]] + [:> icon-button* {:variant "ghost" + :aria-label (tr "workspace.options.guides.add-guide") + :on-click handle-create-grid + :icon "add"}]] (when (and open? (seq frame-grids)) [:div {:class (stl/css :element-set-content)} diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.scss index bb4bf2366..827c22c60 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.scss @@ -15,15 +15,6 @@ margin: 0; } -.add-grid { - @extend .button-tertiary; - height: $s-32; - width: $s-28; - svg { - @extend .button-icon; - } -} - .element-set-content { @include flexColumn; margin: $s-4 0 $s-8 0; @@ -154,15 +145,6 @@ @include flexRow; } -.action-btn { - @extend .button-tertiary; - height: $s-32; - width: $s-28; - svg { - @extend .button-icon; - } -} - .grid-advanced-options { @include flexColumn; margin-top: $s-4; diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs index 4949433e2..95bfde9be 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs @@ -22,6 +22,7 @@ [app.main.ui.components.radio-buttons :refer [radio-buttons radio-button]] [app.main.ui.components.select :refer [select]] [app.main.ui.components.title-bar :refer [title-bar]] + [app.main.ui.ds.buttons.icon-button :refer [icon-button*]] [app.main.ui.icons :as i] [app.util.dom :as dom] [app.util.i18n :as i18n :refer [tr]] @@ -149,9 +150,10 @@ :on-key-down on-key-down :default-value (:name flow "")}]]]] - [:button {:class (stl/css :remove-flow-btn) - :on-click remove-flow} - i/remove-icon]])) + [:> icon-button* {:variant "ghost" + :aria-label (tr "workspace.options.flows.remove-flow") + :on-click remove-flow + :icon "remove"}]])) (mf/defc page-flows {::mf/props :obj} @@ -176,10 +178,10 @@ :title (tr "workspace.options.flows.flow") :class (stl/css :title-spacing-layout-flow)} (when (nil? flow) - [:button {:class (stl/css :add-flow-btn) - :title (tr "workspace.options.flows.add-flow-start") - :on-click add-flow} - i/add])] + [:> icon-button* {:variant "ghost" + :aria-label (tr "workspace.options.flows.add-flow-start") + :on-click add-flow + :icon "add"}])] (when (some? flow) [:& flow-item {:flow flow :key (dm/str (:id flow))}])]))) @@ -727,9 +729,10 @@ :title (tr "workspace.options.interactions") :class (stl/css :title-spacing-layout-interactions)} - [:button {:class (stl/css :add-interaction-btn) - :on-click add-interaction} - i/add]]]) + [:> icon-button* {:variant "ghost" + :aria-label (tr "workspace.options.interactions.add-interaction") + :on-click add-interaction + :icon "add"}]]]) (when (= (count interactions) 0) [:div {:class (stl/css :help-content)} diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.scss index 3242154ae..3835b53cf 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.scss @@ -16,16 +16,6 @@ @include flexColumn; } -.add-interaction-btn { - @extend .button-tertiary; - height: $s-32; - width: $s-28; - svg { - @extend .button-icon; - stroke: var(--icon-foreground); - } -} - .help-content { padding: $s-32 0; width: $s-200; @@ -69,15 +59,6 @@ @include flexColumn; } -.add-flow-btn { - @extend .button-tertiary; - height: $s-32; - width: $s-28; - svg { - @extend .button-icon; - } -} - .interactions-info { flex-grow: 1; display: grid; @@ -364,13 +345,3 @@ border: $s-1 solid var(--input-border-color-active); } } - -.remove-flow-btn { - @extend .button-tertiary; - height: $s-32; - width: $s-28; - min-width: $s-28; - svg { - @extend .button-icon; - } -} diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.cljs index 2ec3b31c7..0f84f7dd8 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.cljs @@ -14,7 +14,7 @@ [app.main.store :as st] [app.main.ui.components.numeric-input :refer [numeric-input*]] [app.main.ui.components.select :refer [select]] - [app.main.ui.icons :as i] + [app.main.ui.ds.buttons.icon-button :refer [icon-button*]] [app.util.i18n :as i18n :refer [tr]] [rumext.v2 :as mf])) @@ -172,19 +172,26 @@ [:div {:class (stl/css :actions)} (cond (or (= :multiple hidden?) (not hidden?)) - [:button {:on-click handle-set-hidden - :class (stl/css :hidden-btn)} i/shown] + [:> icon-button* {:variant "ghost" + :aria-label (tr "workspace.options.layer-options.toggle-layer") + :on-click handle-set-hidden + :icon "shown"}] :else - [:button {:on-click handle-set-visible - :class (stl/css :hidden-btn)} i/hide]) + [:> icon-button* {:variant "ghost" + :aria-label (tr "workspace.options.layer-options.toggle-layer") + :on-click handle-set-visible + :icon "hide"}]) (cond (or (= :multiple blocked?) (not blocked?)) - [:button {:on-click handle-set-blocked - :class (stl/css :lock-btn)} i/unlock] + [:> icon-button* {:variant "ghost" + :aria-label (tr "workspace.shape.menu.lock") + :on-click handle-set-blocked + :icon "unlock"}] :else - [:button {:on-click handle-set-unblocked - :class (stl/css-case :lock-btn true - :locked blocked?)} i/lock])]]])) + [:> icon-button* {:variant "ghost" + :aria-label (tr "workspace.shape.menu.unlock") + :on-click handle-set-unblocked + :icon "lock"}])]]])) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.scss index 164e1589d..e72531e0e 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.scss @@ -25,17 +25,6 @@ .actions { display: flex; gap: $s-4; - .hidden-btn, - .lock-btn { - @extend .button-tertiary; - border-radius: $br-8; - height: $s-32; - width: $s-28; - svg { - @extend .button-icon; - stroke: var(--icon-foreground); - } - } } &.hidden { diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs index 4d29786cc..937771564 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs @@ -24,6 +24,7 @@ [app.main.ui.components.radio-buttons :refer [radio-button radio-buttons]] [app.main.ui.components.select :refer [select]] [app.main.ui.components.title-bar :refer [title-bar]] + [app.main.ui.ds.buttons.icon-button :refer [icon-button*]] [app.main.ui.formats :as fmt] [app.main.ui.hooks :as h] [app.main.ui.icons :as i] @@ -759,9 +760,12 @@ {:value :percent :label "%"}] :on-change #(set-column-type type index %)}]]] - [:button {:class (stl/css :remove-track-btn) - :on-click #(remove-element type index)} - i/remove-icon]])) + [:> icon-button* {:variant "ghost" + :aria-label (tr "workspace.shape.menu.delete") + :on-click remove-element + :data-type type + :data-index index + :icon "remove"}]])) (mf/defc grid-columns-row {::mf/props :obj} @@ -996,10 +1000,10 @@ [:div {:class (stl/css :title-actions)} (when ^boolean grid-enabled? [:* - [:button {:class (stl/css :add-layout) - :aria-label "Add" - :on-click on-toggle-dropdown-visibility} - i/menu] + [:> icon-button* {:variant "ghost" + :aria-label (tr "workspace.shape.menu.add-layout") + :on-click on-toggle-dropdown-visibility + :icon "menu"}] [:& dropdown {:show show-dropdown? :on-close on-hide-dropdown} @@ -1014,16 +1018,18 @@ "Grid layout"]]]]) (when has-layout? - [:button {:class (stl/css :remove-layout) - :on-click on-remove-layout} - i/remove-icon])] + [:> icon-button* {:variant "ghost" + :aria-label (tr "workspace.shape.menu.remove-layout") + :on-click on-remove-layout + :icon "remove"}])] [:div {:class (stl/css :title-actions)} (if ^boolean grid-enabled? [:* - [:button {:class (stl/css :add-layout) - :on-click on-toggle-dropdown-visibility} - i/add] + [:> icon-button* {:variant "ghost" + :aria-label (tr "workspace.shape.menu.add-layout") + :on-click on-toggle-dropdown-visibility + :icon "add"}] [:& dropdown {:show show-dropdown? :on-close on-hide-dropdown} @@ -1042,9 +1048,10 @@ :on-click on-add-layout} i/add]) (when has-layout? - [:button {:class (stl/css :remove-layout) - :on-click on-remove-layout} - i/remove-icon])])]] + [:> icon-button* {:variant "ghost" + :aria-label (tr "workspace.shape.menu.delete") + :on-click on-remove-layout + :icon "remove"}])])]] (when (and ^boolean open? ^boolean has-layout? @@ -1068,9 +1075,10 @@ :justify-content justify-content :on-change set-justify-content}] - [:button {:on-click open-flex-help - :class (stl/css :help-button)} - i/help]] + [:> icon-button* {:variant "ghost" + :aria-label (tr "labels.help-center") + :on-click open-flex-help + :icon "help"}]] (when (= :wrap wrap-type) [:div {:class (stl/css :third-row)} [:& align-content-row {:is-column is-column @@ -1092,8 +1100,10 @@ (when (= 1 (count ids)) [:div {:class (stl/css :edit-grid-wrapper)} [:& grid-edit-mode {:id (first ids)}] - [:button {:on-click open-grid-help - :class (stl/css :help-button)} i/help]]) + [:> icon-button* {:variant "ghost" + :aria-label (tr "labels.help-center") + :on-click open-grid-help + :icon "help"}]]) [:div {:class (stl/css :row :first-row)} [:div {:class (stl/css :direction-edit)} @@ -1222,8 +1232,14 @@ remove-element (mf/use-fn (mf/deps ids) - (fn [type index] - (st/emit! (dwsl/remove-layout-track ids type index)))) + (fn [event] + (let [type (-> (dom/get-current-target event) + (dom/get-data "type") + (d/read-string)) + index (-> (dom/get-current-target event) + (dom/get-data "index") + (d/parse-integer))] + (st/emit! (dwsl/remove-layout-track ids type index))))) reorder-track (mf/use-fn @@ -1269,8 +1285,11 @@ [:div {:class (stl/css :grid-layout-menu)} [:div {:class (stl/css :row)} [:div {:class (stl/css :grid-layout-menu-title)} "GRID LAYOUT"] - [:button {:on-click open-grid-help - :class (stl/css :help-button)} i/help] + [:> icon-button* {:variant "ghost" + :class (stl/css :help-button) + :aria-label (tr "labels.help-center") + :on-click open-grid-help + :icon "help"}] [:button {:class (stl/css :exit-btn) :on-click #(st/emit! (udw/clear-edition-mode))} (tr "workspace.layout_grid.editor.options.exit")]] @@ -1297,10 +1316,11 @@ :value grid-justify-content-row :on-change on-row-justify-change}] - [:button {:on-click handle-locate-grid - :class (stl/css :locate-button) - :title (tr "workspace.layout_grid.editor.top-bar.locate.tooltip")} - i/locate]] + [:> icon-button* {:variant "ghost" + :class (stl/css :locate-button) + :aria-label (tr "workspace.layout_grid.editor.top-bar.locate.tooltip") + :on-click handle-locate-grid + :icon "locate"}]] [:div {:class (stl/css :row)} [:& gap-section {:on-change on-gap-change diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.scss index 465489f91..7873a877b 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.scss @@ -27,17 +27,6 @@ .layout-option { white-space: nowrap; } - .remove-layout, - .add-layout { - @extend .button-tertiary; - border-radius: $br-8; - height: $s-32; - width: $s-28; - svg { - @extend .button-icon; - stroke: var(--icon-foreground); - } - } } } .flex-layout-menu { @@ -69,12 +58,9 @@ @include flexColumn; } .help-button-wrapper { - position: relative; - .help-button { - position: absolute; - top: 0; - right: 0; - } + display: flex; + flex-direction: row; + justify-content: space-between; } } } @@ -252,19 +238,6 @@ border-radius: 0 $br-8 $br-8 0; width: $s-96; } - - .remove-track-btn { - @extend .button-tertiary; - padding: $s-8; - - svg { - @extend .button-icon; - width: $s-12; - height: $s-12; - stroke: var(--icon-foreground); - fill: var(--icon-foreground); - } - } } .grid-tracks { @@ -320,9 +293,6 @@ } } - .columns-info { - } - .add-column { @extend .button-tertiary; height: $s-52; @@ -337,17 +307,6 @@ } } -.locate-button, -.help-button { - @extend .button-tertiary; - padding: $s-8; - svg { - fill: none; - width: $s-16; - height: $s-16; - } -} - .layout-options { @extend .dropdown-wrapper; @include flexColumn; diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs index db3b28f85..ac3fb8441 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs @@ -19,6 +19,7 @@ [app.main.ui.components.numeric-input :refer [numeric-input*]] [app.main.ui.components.select :refer [select]] [app.main.ui.components.title-bar :refer [title-bar]] + [app.main.ui.ds.buttons.icon-button :refer [icon-button*]] [app.main.ui.hooks :as h] [app.main.ui.icons :as i] [app.main.ui.workspace.sidebar.options.common :refer [advanced-options]] @@ -168,14 +169,14 @@ :options type-options :on-change on-type-change}]]] [:div {:class (stl/css :actions)} - [:button {:class (stl/css :action-btn) - :on-click toggle-visibility} - (if hidden? - i/hide - i/shown)] - [:button {:class (stl/css :action-btn) - :on-click on-remove-shadow} - i/remove-icon]]] + [:> icon-button* {:variant "ghost" + :aria-label (tr "workspace.options.shadow-options.toggle-shadow") + :on-click toggle-visibility + :icon (if hidden? "hide" "shown")}] + [:> icon-button* {:variant "ghost" + :aria-label (tr "workspace.options.shadow-options.remove-shadow") + :on-click on-remove-shadow + :icon "remove"}]]] (when open-shadow [:& advanced-options {:class (stl/css :shadow-advanced-options) :visible? open-shadow @@ -297,9 +298,11 @@ :class (stl/css-case :title-spacing-shadow (not has-shadows?))} (when-not (= :multiple shadows) - [:button {:class (stl/css :add-shadow) - :data-testid "add-shadow" - :on-click on-add-shadow} i/add])]] + [:> icon-button* {:variant "ghost" + :aria-label (tr "workspace.options.shadow-options.add-shadow") + :on-click on-add-shadow + :icon "add" + :data-testid "add-shadow"}])]] (when open? (cond @@ -308,9 +311,10 @@ [:div {:class (stl/css :multiple-shadows)} [:div {:class (stl/css :label)} (tr "settings.multiple")] [:div {:class (stl/css :actions)} - [:button {:class (stl/css :action-btn) - :on-click on-remove-all} - i/remove-icon]]]] + [:> icon-button* {:variant "ghost" + :aria-label (tr "workspace.options.shadow-options.remove-shadow") + :on-click on-remove-all + :icon "remove"}]]]] (seq shadows) [:& h/sortable-container {} diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.scss index 27d5e4b8c..24bfd97ff 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.scss @@ -14,14 +14,6 @@ margin: 0; padding-left: $s-2; } -.add-shadow { - @extend .button-tertiary; - height: $s-32; - width: $s-28; - svg { - @extend .button-icon; - } -} .element-set-content { margin-top: $s-4; @@ -40,15 +32,6 @@ @include flexRow; } -.action-btn { - @extend .button-tertiary; - height: $s-32; - width: $s-28; - svg { - @extend .button-icon; - } -} - .shadow-element { @include flexColumn; } diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs index a9fbb4f4b..1e5d5fb1e 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs @@ -13,8 +13,8 @@ [app.main.data.workspace.colors :as dc] [app.main.store :as st] [app.main.ui.components.title-bar :refer [title-bar]] + [app.main.ui.ds.buttons.icon-button :refer [icon-button*]] [app.main.ui.hooks :as h] - [app.main.ui.icons :as i] [app.main.ui.workspace.sidebar.options.rows.stroke-row :refer [stroke-row]] [app.util.dom :as dom] [app.util.i18n :as i18n :refer [tr]] @@ -167,9 +167,11 @@ :title label :class (stl/css-case :title-spacing-stroke (not has-strokes?))} (when (not (= :multiple strokes)) - [:button {:class (stl/css :add-stroke) - :data-testid "add-stroke" - :on-click on-add-stroke} i/add])]] + [:> icon-button* {:variant "ghost" + :aria-label (tr "workspace.options.stroke.add-stroke") + :on-click on-add-stroke + :icon "add" + :data-testid "add-stroke"}])]] (when open? [:div {:class (stl/css-case :element-content true :empty-content (not has-strokes?))} @@ -178,9 +180,10 @@ [:div {:class (stl/css :element-set-options-group)} [:div {:class (stl/css :group-label)} (tr "settings.multiple")] - [:button {:on-click handle-remove-all - :class (stl/css :remove-btn)} - i/remove-icon]] + [:> icon-button* {:variant "ghost" + :aria-label (tr "workspace.options.stroke.remove-stroke") + :on-click handle-remove-all + :icon "remove"}]] (seq strokes) [:& h/sortable-container {} (for [[index value] (d/enumerate (:strokes values []))] diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.scss index 53f6af64e..9e5bd41e1 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.scss @@ -18,14 +18,6 @@ padding-left: $s-2; margin: 0; } -.add-stroke { - @extend .button-tertiary; - height: $s-32; - width: $s-28; - svg { - @extend .button-icon; - } -} .element-content { display: flex; @@ -44,12 +36,3 @@ .group-label { @extend .mixed-bar; } - -.remove-btn { - @extend .button-tertiary; - height: $s-32; - width: $s-28; - svg { - @extend .button-icon; - } -} diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.cljs index 9309b1a76..813657d71 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.cljs @@ -20,6 +20,7 @@ [app.main.ui.components.radio-buttons :refer [radio-button radio-buttons]] [app.main.ui.components.title-bar :refer [title-bar]] [app.main.ui.context :as ctx] + [app.main.ui.ds.buttons.icon-button :refer [icon-button*]] [app.main.ui.icons :as i] [app.main.ui.workspace.sidebar.options.menus.typography :refer [typography-entry text-options]] [app.util.dom :as dom] @@ -290,9 +291,10 @@ :title label :class (stl/css :title-spacing-text)} (when (and (not typography) (not multiple?)) - [:button {:class (stl/css :add-typography) - :on-click on-convert-to-typography} - i/add])]] + [:> icon-button* {:variant "ghost" + :aria-label (tr "labels.options") + :on-click on-convert-to-typography + :icon "add"}])]] (when main-menu-open? [:div {:class (stl/css :element-content)} @@ -318,9 +320,10 @@ [:div {:class (stl/css :text-align-options)} [:> text-align-options opts] [:> grow-options opts] - [:button {:class (stl/css :more-options) - :on-click toggle-more-options} - i/menu]] + [:> icon-button* {:variant "ghost" + :aria-label (tr "labels.options") + :on-click toggle-more-options + :icon "menu"}]] (when more-options-open? [:div {:class (stl/css :text-decoration-options)} diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.scss index 3d3a4ddef..873287c59 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.scss @@ -14,15 +14,6 @@ margin: 0; } -.add-typography { - @extend .button-tertiary; - height: $s-32; - width: $s-28; - svg { - @extend .button-icon; - } -} - .element-content { @include flexColumn; margin-top: $s-4; @@ -60,15 +51,6 @@ height: $s-32; } -.more-options { - @extend .button-tertiary; - height: $s-32; - width: $s-28; - svg { - @extend .button-icon; - } -} - .text-decoration-options { display: flex; gap: $s-4; diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs index d6ad61822..59de7fea0 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs @@ -19,6 +19,7 @@ [app.main.ui.components.color-input :refer [color-input*]] [app.main.ui.components.numeric-input :refer [numeric-input*]] [app.main.ui.context :as ctx] + [app.main.ui.ds.buttons.icon-button :refer [icon-button*]] [app.main.ui.formats :as fmt] [app.main.ui.hooks :as h] [app.main.ui.icons :as i] @@ -266,11 +267,13 @@ :max 100}]])] (when (some? on-remove) - [:button {:class (stl/css :remove-btn) - :on-click on-remove} i/remove-icon]) + [:> icon-button* {:variant "ghost" + :aria-label (tr "settings.remove-color") + :on-click on-remove + :icon "remove"}]) (when select-only - [:button {:class (stl/css :select-btn) - :title (tr "settings.select-this-color") - :on-click handle-select} - i/move])])) + [:> icon-button* {:variant "ghost" + :aria-label (tr "settings.select-this-color") + :on-click handle-select + :icon "move"}])])) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.scss b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.scss index 79762a6d9..868d2e569 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.scss @@ -182,13 +182,3 @@ margin-block-start: $s-2; } } - -.remove-btn, -.select-btn { - @extend .button-tertiary; - height: $s-32; - width: $s-28; - svg { - @extend .button-icon; - } -} diff --git a/frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs b/frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs index 286cc5883..4d3ba4692 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs @@ -15,6 +15,7 @@ [app.main.store :as st] [app.main.ui.components.title-bar :refer [title-bar]] [app.main.ui.context :as ctx] + [app.main.ui.ds.buttons.icon-button :refer [icon-button*]] [app.main.ui.hooks :as hooks] [app.main.ui.icons :as i] [app.main.ui.notifications.badge :refer [badge-notification]] @@ -223,9 +224,11 @@ [:& badge-notification {:is-focus true :size :small :content (tr "labels.view-only")}]) - [:button {:class (stl/css :add-page) - :on-click on-create} - i/add])] + [:> icon-button* {:variant "ghost" + :class (stl/css :add-page) + :aria-label (tr "workspace.sidebar.sitemap.add-page") + :on-click on-create + :icon "add"}])] [:div {:class (stl/css :tool-window-content)} [:& pages-list {:file file :key (:id file)}]]])) diff --git a/frontend/src/app/main/ui/workspace/sidebar/sitemap.scss b/frontend/src/app/main/ui/workspace/sidebar/sitemap.scss index c24801d0f..3a9a64636 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/sitemap.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/sitemap.scss @@ -20,19 +20,6 @@ color: var(--title-foreground-color-hover); } -.add-page { - @extend .button-tertiary; - height: $s-32; - width: $s-28; - padding: 0; - margin-right: $s-12; - svg { - @extend .button-icon; - stroke: var(--icon-foreground); - transform: rotate(90deg); - } -} - .resize-area { position: absolute; bottom: calc(-1 * $s-8); diff --git a/frontend/src/app/main/ui/workspace/viewport/path_actions.cljs b/frontend/src/app/main/ui/workspace/viewport/path_actions.cljs index 353befcd4..f866a364e 100644 --- a/frontend/src/app/main/ui/workspace/viewport/path_actions.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/path_actions.cljs @@ -218,4 +218,3 @@ :title (tr "workspace.path.actions.snap-nodes" (sc/get-tooltip :snap-nodes)) :on-click on-toggle-snap} snap-nodes-icon]]])) - diff --git a/frontend/translations/en.po b/frontend/translations/en.po index 07a6ba7d3..d2ccf16eb 100644 --- a/frontend/translations/en.po +++ b/frontend/translations/en.po @@ -1903,6 +1903,10 @@ msgstr "Ok" msgid "labels.old-password" msgstr "Old password" +#: src/app/main/ui/comments.cljs:331 +msgid "labels.options" +msgstr "Options" + #: src/app/main/ui/workspace/comments.cljs #, unused msgid "labels.only-yours" @@ -2130,6 +2134,10 @@ msgstr "Your account" msgid "labels.youtube" msgstr "YouTube" +#: src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs:1051 +msgid "labels.add" +msgstr "Add" + #: src/app/main/ui/workspace/colorpicker.cljs:341, src/app/main/ui/workspace/colorpicker.cljs:342, src/app/main/ui/workspace/colorpicker.cljs:344 msgid "media.choose-image" msgstr "Choose image" @@ -3127,6 +3135,10 @@ msgstr "Mixed" msgid "settings.select-this-color" msgstr "Select items using this style" +#: src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs:271 +msgid "settings.remove-color" +msgstr "Remove color" + # SECTIONS #: src/app/main/ui/workspace/sidebar/shortcuts.cljs:414 msgid "shortcut-section.basics" @@ -3969,10 +3981,18 @@ msgstr "All assets" msgid "workspace.assets.colors" msgstr "Colors" +#: src/app/main/ui/workspace/sidebar/assets/colors.cljs:495 +msgid "workspace.assets.colors.add-color" +msgstr "Add color" + #: src/app/main/ui/dashboard/grid.cljs:132, src/app/main/ui/dashboard/grid.cljs:147, src/app/main/ui/workspace/sidebar/assets/components.cljs:509, src/app/main/ui/workspace/sidebar/assets.cljs:139 msgid "workspace.assets.components" msgstr "Components" +#: src/app/main/ui/workspace/sidebar/assets/components.cljs:531 +msgid "workspace.assets.components.add-component" +msgstr "Add component" + #: src/app/main/ui/workspace/sidebar/assets/groups.cljs:127 msgid "workspace.assets.create-group" msgstr "Create a group" @@ -4075,6 +4095,10 @@ msgstr "Sort" msgid "workspace.assets.typography" msgstr "Typographies" +#: src/app/main/ui/workspace/sidebar/assets/typographies.cljs:407 +msgid "workspace.assets.typography.add-typography" +msgstr "Add typography" + #: src/app/main/ui/workspace/sidebar/options/menus/typography.cljs #, unused msgid "workspace.assets.typography.font-id" @@ -4552,6 +4576,18 @@ msgstr "Group blur" msgid "workspace.options.blur-options.title.multiple" msgstr "Selection blur" +#: src/app/main/ui/workspace/sidebar/options/menus/blur.cljs:91 +msgid "workspace.options.blur-options.add-blur" +msgstr "Add blur" + +#: src/app/main/ui/workspace/sidebar/options/menus/blur.cljs:112 +msgid "workspace.options.blur-options.remove-blur" +msgstr "Remove blur" + +#: src/app/main/ui/workspace/sidebar/options/menus/blur.cljs:108 +msgid "workspace.options.blur-options.toggle-blur" +msgstr "Toggle blur" + #: src/app/main/ui/workspace/sidebar/options/page.cljs:32, src/app/main/ui/workspace/sidebar/options/page.cljs:39 msgid "workspace.options.canvas-background" msgstr "Canvas background" @@ -4671,10 +4707,26 @@ msgstr "Export failed" msgid "workspace.options.exporting-object-slow" msgstr "Export unexpectedly slow" +#: src/app/main/ui/export.cljs:194 +msgid "workspace.options.export.add-export" +msgstr "Add export" + +#: src/app/main/ui/export.cljs:240 +msgid "workspace.options.export.remove-export" +msgstr "Remove export" + #: src/app/main/ui/workspace/sidebar/options/menus/fill.cljs:49, src/app/main/ui/workspace/sidebar/options/menus/fill.cljs:174 msgid "workspace.options.fill" msgstr "Fill" +#: src/app/main/ui/workspace/sidebar/options/menus/fill.cljs:150 +msgid "workspace.options.fill.add-fill" +msgstr "Add fill color" + +#: src/app/main/ui/workspace/sidebar/options/menus/fill.cljs:150 +msgid "workspace.options.fill.remove-fill" +msgstr "Remove fill" + #: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs:178 msgid "workspace.options.flows.add-flow-start" msgstr "Add flow start" @@ -4683,6 +4735,10 @@ msgstr "Add flow start" msgid "workspace.options.flows.flow" msgstr "Flow" +#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs +msgid "workspace.options.flows.remove-flow" +msgstr "Remove flow" + #: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs #, unused msgid "workspace.options.flows.flow-start" @@ -4797,6 +4853,18 @@ msgstr "Group stroke" msgid "workspace.options.guides.title" msgstr "Guides" +#: src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs:323 +msgid "workspace.options.guides.add-guide" +msgstr "Add guide" + +#: src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs:187 +msgid "workspace.options.guides.remove-guide" +msgstr "Remove guide" + +#: src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs:183 +msgid "workspace.options.guides.toggle-guide" +msgstr "Toggle guide" + #: src/app/main/ui/workspace/sidebar/options/menus/measures.cljs:406 msgid "workspace.options.height" msgstr "Height" @@ -5019,6 +5087,14 @@ msgstr "While Hovering" msgid "workspace.options.interaction-while-pressing" msgstr "While Pressing" +#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs +msgid "workspace.options.interactions.add-interaction" +msgstr "Add interaction" + +#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs +msgid "workspace.options.interactions.remove-interaction" +msgstr "Remove interaction" + #: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs:724 msgid "workspace.options.interactions" msgstr "Interactions" @@ -5102,6 +5178,10 @@ msgstr "Group layers" msgid "workspace.options.layer-options.title.multiple" msgstr "Selected layers" +#: src/app/main/ui/workspace/sidebar/options/menus/layer.cljs +msgid "workspace.options.layer-options.toggle-layer" +msgstr "Toggle layer visibility" + #: src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs #, unused msgid "workspace.options.layout-item.advanced-ops" @@ -5354,6 +5434,18 @@ msgstr "Group shadow" msgid "workspace.options.shadow-options.title.multiple" msgstr "Selection shadows" +#: src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs:302 +msgid "workspace.options.shadow-options.add-shadow" +msgstr "Add shadow" + +#: src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs:178 +msgid "workspace.options.shadow-options.remove-shadow" +msgstr "Remove shadow" + +#: src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs:173 +msgid "workspace.options.shadow-options.toggle-shadow" +msgstr "Toggle shadow" + #: src/app/main/ui/workspace/sidebar/options/menus/fill.cljs:193 msgid "workspace.options.show-fill-on-export" msgstr "Show in exports" @@ -5374,6 +5466,14 @@ msgstr "Size presets" msgid "workspace.options.stroke" msgstr "Stroke" +#: src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs:172 +msgid "workspace.options.stroke.add-stroke" +msgstr "Add stroke color" + +#: src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs:172 +msgid "workspace.options.stroke.remove-stroke" +msgstr "Remove stroke" + #: src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs #, unused msgid "workspace.options.stroke-cap.circle-marker" @@ -5725,6 +5825,18 @@ msgstr "Plugin correctly loaded." msgid "workspace.plugins.title" msgstr "Plugins" +#: src/app/main/ui/workspace/plugins.cljs:64 +msgid "workspace.plugins.remove-plugin" +msgstr "Remove plugin" + +#: /src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs:1005 +msgid "workspace.shape.menu.add-layout" +msgstr "Add layout" + +#: /src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs:1024 +msgid "workspace.shape.menu.remove-layout" +msgstr "Remove layout" + #: src/app/main/ui/workspace/context_menu.cljs:441 msgid "workspace.shape.menu.add-flex" msgstr "Add flex layout" @@ -5983,6 +6095,10 @@ msgstr "Imported SVG Attributes" msgid "workspace.sidebar.sitemap" msgstr "Pages" +#: src/app/main/ui/workspace/sidebar/sitemap.cljs:217 +msgid "workspace.sidebar.sitemap.add-page" +msgstr "Add page" + #: src/app/main/ui/workspace/left_header.cljs:91 msgid "workspace.sitemap" msgstr "Sitemap" diff --git a/frontend/translations/es.po b/frontend/translations/es.po index ef9a8e754..ee1217c3f 100644 --- a/frontend/translations/es.po +++ b/frontend/translations/es.po @@ -1243,6 +1243,10 @@ msgstr "El email o la contraseña son incorrectos." msgid "errors.wrong-old-password" msgstr "La contraseña anterior no es correcta" +#: src/app/main/ui/comments.cljs:331 +msgid "labels.options" +msgstr "Opciones" + #: src/app/main/ui/settings/feedback.cljs:74 msgid "feedback.description" msgstr "Descripción" @@ -2118,6 +2122,10 @@ msgstr "(tú)" msgid "labels.your-account" msgstr "Tu cuenta" +#: src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs:1051 +msgid "labels.add" +msgstr "Añadir" + #: src/app/main/ui/workspace/colorpicker.cljs:341, src/app/main/ui/workspace/colorpicker.cljs:342, src/app/main/ui/workspace/colorpicker.cljs:344 msgid "media.choose-image" msgstr "Elegir imagen" @@ -3106,6 +3114,10 @@ msgstr "Varios" msgid "settings.select-this-color" msgstr "Seleccionar elementos que usan este estilo" +#: src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs:271 +msgid "settings.remove-color" +msgstr "Eliminar color" + # SECTIONS #: src/app/main/ui/workspace/sidebar/shortcuts.cljs:414 msgid "shortcut-section.basics" @@ -3943,10 +3955,18 @@ msgstr "Todos" msgid "workspace.assets.colors" msgstr "Colores" +#: src/app/main/ui/workspace/sidebar/assets/colors.cljs:495 +msgid "workspace.assets.colors.add-color" +msgstr "Añadir color" + #: src/app/main/ui/dashboard/grid.cljs:132, src/app/main/ui/dashboard/grid.cljs:147, src/app/main/ui/workspace/sidebar/assets/components.cljs:509, src/app/main/ui/workspace/sidebar/assets.cljs:139 msgid "workspace.assets.components" msgstr "Componentes" +#: src/app/main/ui/workspace/sidebar/assets/components.cljs:531 +msgid "workspace.assets.components.add-component" +msgstr "Añadir componente" + #: src/app/main/ui/workspace/sidebar/assets/groups.cljs:127 msgid "workspace.assets.create-group" msgstr "Crear un grupo" @@ -4051,6 +4071,10 @@ msgstr "Ordenar" msgid "workspace.assets.typography" msgstr "Tipografías" +#: src/app/main/ui/workspace/sidebar/assets/typographies.cljs:407 +msgid "workspace.assets.typography.add-typography" +msgstr "Añadir tipografía" + #: src/app/main/ui/workspace/sidebar/options/menus/typography.cljs #, unused msgid "workspace.assets.typography.font-id" @@ -4528,6 +4552,18 @@ msgstr "Desenfoque del grupo" msgid "workspace.options.blur-options.title.multiple" msgstr "Desenfoque de la selección" +#: src/app/main/ui/workspace/sidebar/options/menus/blur.cljs:91 +msgid "workspace.options.blur-options.add-blur" +msgstr "Añadir desenfoque" + +#: src/app/main/ui/workspace/sidebar/options/menus/blur.cljs:112 +msgid "workspace.options.blur-options.remove-blur" +msgstr "Eliminar desenfoque" + +#: src/app/main/ui/workspace/sidebar/options/menus/blur.cljs:108 +msgid "workspace.options.blur-options.toggle-blur" +msgstr "Mostrar/ocultar desenfoque" + #: src/app/main/ui/workspace/sidebar/options/page.cljs:32, src/app/main/ui/workspace/sidebar/options/page.cljs:39 msgid "workspace.options.canvas-background" msgstr "Color de fondo" @@ -4647,10 +4683,26 @@ msgstr "Exportación fallida" msgid "workspace.options.exporting-object-slow" msgstr "Exportación lenta" +#: src/app/main/ui/export.cljs:194 +msgid "workspace.options.export.add-export" +msgstr "Añadir exportación" + +#: src/app/main/ui/export.cljs:240 +msgid "workspace.options.export.remove-export" +msgstr "Eliminar exportación" + #: src/app/main/ui/workspace/sidebar/options/menus/fill.cljs:49, src/app/main/ui/workspace/sidebar/options/menus/fill.cljs:174 msgid "workspace.options.fill" msgstr "Relleno" +#: src/app/main/ui/workspace/sidebar/options/menus/fill.cljs:150 +msgid "workspace.options.fill.add-fill" +msgstr "Añadir color de relleno" + +#: src/app/main/ui/workspace/sidebar/options/menus/fill.cljs:150 +msgid "workspace.options.fill.remove-fill" +msgstr "Eliminar relleno" + #: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs:178 msgid "workspace.options.flows.add-flow-start" msgstr "Añadir inicio de flujo" @@ -4659,6 +4711,10 @@ msgstr "Añadir inicio de flujo" msgid "workspace.options.flows.flow" msgstr "Flujo" +#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs +msgid "workspace.options.flows.remove-flow" +msgstr "Eliminar flujo" + #: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs #, unused msgid "workspace.options.flows.flow-start" @@ -4773,6 +4829,18 @@ msgstr "Borde de grupo" msgid "workspace.options.guides.title" msgstr "Guías" +#: src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs:323 +msgid "workspace.options.guides.add-guide" +msgstr "Añadir guía" + +#: src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs:187 +msgid "workspace.options.guides.remove-guide" +msgstr "Eliminar guía" + +#: src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs:183 +msgid "workspace.options.guides.toggle-guide" +msgstr "Mostrar/ocultar guía" + #: src/app/main/ui/workspace/sidebar/options/menus/measures.cljs:406 msgid "workspace.options.height" msgstr "Altura" @@ -4999,6 +5067,14 @@ msgstr "Mientras pulsa" msgid "workspace.options.interactions" msgstr "Interacciones" +#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs +msgid "workspace.options.interactions.add-interaction" +msgstr "Añadir interacción" + +#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs +msgid "workspace.options.interactions.remove-interaction" +msgstr "Eliminar interacción" + #: src/app/main/ui/workspace/sidebar/options/menus/layer.cljs:137 msgid "workspace.options.layer-options.blend-mode.color" msgstr "Color" @@ -5078,6 +5154,10 @@ msgstr "Capas de grupo" msgid "workspace.options.layer-options.title.multiple" msgstr "Capas seleccionadas" +#: src/app/main/ui/workspace/sidebar/options/menus/layer.cljs +msgid "workspace.options.layer-options.toggle-layer" +msgstr "Mostrar/ocultar capa" + #: src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs #, unused msgid "workspace.options.layout-item.advanced-ops" @@ -5332,6 +5412,18 @@ msgstr "Sombra del grupo" msgid "workspace.options.shadow-options.title.multiple" msgstr "Sombras de la seleccíón" +#: src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs:302 +msgid "workspace.options.shadow-options.add-shadow" +msgstr "Añadir sombra" + +#: src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs:178 +msgid "workspace.options.shadow-options.remove-shadow" +msgstr "Eliminar sombra" + +#: src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs:173 +msgid "workspace.options.shadow-options.toggle-shadow" +msgstr "Mostrar/ocultar sombra" + #: src/app/main/ui/workspace/sidebar/options/menus/fill.cljs:193 msgid "workspace.options.show-fill-on-export" msgstr "Mostrar al exportar" @@ -5352,6 +5444,14 @@ msgstr "Tamaños predefinidos" msgid "workspace.options.stroke" msgstr "Borde" +#: src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs:172 +msgid "workspace.options.stroke.add-stroke" +msgstr "Añadir color de borde" + +#: src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs:172 +msgid "workspace.options.stroke.remove-stroke" +msgstr "Eliminar borde" + #: src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs #, unused msgid "workspace.options.stroke-cap.circle-marker" @@ -5703,6 +5803,18 @@ msgstr "Extensión cargada correctamente." msgid "workspace.plugins.title" msgstr "Extensiones" +#: src/app/main/ui/workspace/plugins.cljs:64 +msgid "workspace.plugins.remove-plugin" +msgstr "Eliminar extensión" + +#: /src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs:1005 +msgid "workspace.shape.menu.add-layout" +msgstr "Añadir layout" + +#: /src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs:1024 +msgid "workspace.shape.menu.remove-layout" +msgstr "Eliminar layout" + #: src/app/main/ui/workspace/context_menu.cljs:441 msgid "workspace.shape.menu.add-flex" msgstr "Añadir flex layout" @@ -5961,6 +6073,10 @@ msgstr "Atributos del SVG Importado" msgid "workspace.sidebar.sitemap" msgstr "Páginas" +#: src/app/main/ui/workspace/sidebar/sitemap.cljs:217 +msgid "workspace.sidebar.sitemap.add-page" +msgstr "Añadir página" + #: src/app/main/ui/workspace/left_header.cljs:91 msgid "workspace.sitemap" msgstr "Mapa del sitio"