Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-20 19:51:23 -05:00
Code Issues Activity

Merge pull request #5181 from penpot/luis-replace-icon-buttons-workspace

Browse source 
♻️ Replace buttons on workspace
This commit is contained in:
Eva Marco 2024-10-23 16:13:51 +02:00 • committed by GitHub
commit c7308ce634
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
53 changed files with 495 additions and 560 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
frontend/src/app/main/ui/comments.cljs
View file

@ -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?

8
frontend/src/app/main/ui/comments.scss
View file

@ -206,14 +206,6 @@
cursor: pointer;
}
}
.options {
@extend .button-tertiary;
height: $s-32;
width: $s-28;
svg {
@extend .button-icon;
}
}
}
}
.comment-options-dropdown {

6
frontend/src/app/main/ui/ds/buttons/icon_button.cljs
View file

@ -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}]]))
[:> "button" props [:> icon* {:id icon :aria-label aria-label}] children]))

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

@ -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}

14
frontend/src/app/main/ui/workspace/comments.scss
View file

@ -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;

7
frontend/src/app/main/ui/workspace/main_menu.cljs
View file

@ -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

12
frontend/src/app/main/ui/workspace/main_menu.scss
View file

@ -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;

7
frontend/src/app/main/ui/workspace/plugins.cljs
View file

@ -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

11
frontend/src/app/main/ui/workspace/plugins.scss
View file

@ -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;

17
frontend/src/app/main/ui/workspace/right_header.cljs
View file

@ -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")]]

19
frontend/src/app/main/ui/workspace/right_header.scss
View file

@ -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%;

11
frontend/src/app/main/ui/workspace/sidebar/assets.cljs
View file

@ -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}

10
frontend/src/app/main/ui/workspace/sidebar/assets.scss
View file

@ -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);
}
}

9
frontend/src/app/main/ui/workspace/sidebar/assets/colors.cljs
View file

@ -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}

12
frontend/src/app/main/ui/workspace/sidebar/assets/colors.scss
View file

@ -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;
}

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

@ -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

13
frontend/src/app/main/ui/workspace/sidebar/assets/components.scss
View file

@ -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;

9
frontend/src/app/main/ui/workspace/sidebar/assets/typographies.cljs
View file

@ -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

12
frontend/src/app/main/ui/workspace/sidebar/assets/typographies.scss
View file

@ -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;
}

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

@ -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)]

14
frontend/src/app/main/ui/workspace/sidebar/debug.scss
View file

@ -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;

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

@ -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]

14
frontend/src/app/main/ui/workspace/sidebar/history.scss
View file

@ -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;

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

@ -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]

12
frontend/src/app/main/ui/workspace/sidebar/layers.scss
View file

@ -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);
}
}
}
}

4
frontend/src/app/main/ui/workspace/sidebar/options.scss
View file

@ -40,6 +40,10 @@
scrollbar-gutter: stable;
}
.design-options {
padding-inline-end: $s-12;
}
.inspect {
scrollbar-gutter: unset;
}

24
frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.cljs
View file

@ -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)

18
frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.scss
View file

@ -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 {

33
frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.cljs
View file

@ -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

26
frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.scss
View file

@ -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 {

16
frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.cljs
View file

@ -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 {}

18
frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.scss
View file

@ -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;

22
frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs
View file

@ -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)}

18
frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.scss
View file

@ -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;

23
frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
View file

@ -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)}

29
frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.scss
View file

@ -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;
}
}

27
frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.cljs
View file

@ -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"}])]]]))

11
frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.scss
View file

@ -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 {

78
frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs
View file

@ -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

47
frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.scss
View file

@ -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;

32
frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs
View file

@ -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 {}

17
frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.scss
View file

@ -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;
}

17
frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs
View file

@ -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 []))]

17
frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.scss
View file

@ -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;
}
}

15
frontend/src/app/main/ui/workspace/sidebar/options/menus/text.cljs
View file

@ -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)}

18
frontend/src/app/main/ui/workspace/sidebar/options/menus/text.scss
View file

@ -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;

15
frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs
View file

@ -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"}])]))

10
frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.scss
View file

@ -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;
}
}

9
frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs
View file

@ -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)}]]]))

13
frontend/src/app/main/ui/workspace/sidebar/sitemap.scss
View file

@ -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);

1
frontend/src/app/main/ui/workspace/viewport/path_actions.cljs
View file

@ -218,4 +218,3 @@
:title (tr "workspace.path.actions.snap-nodes" (sc/get-tooltip :snap-nodes))
:on-click on-toggle-snap}
snap-nodes-icon]]]))

116
frontend/translations/en.po
View file

@ -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"

116
frontend/translations/es.po
View file

@ -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"