Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-13 16:21:57 -05:00
Code Issues Activity

♻️ Rename all icon functions

Browse source
This commit is contained in:
Eva Marco 2024-03-08 13:56:32 +01:00 • committed by Alonso Torres
parent 5739c0797c
commit ca7438aab5
100 changed files with 777 additions and 772 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/app/main/ui.cljs
View file

@ -117,7 +117,7 @@
[:? {}
(if (:token query-params)
[:> static/error-container {}
[:div.image i/detach-refactor]
[:div.image i/detach]
[:div.main-message (tr "viewer.breaking-change.message")]
[:div.desc-message (tr "viewer.breaking-change.description")]]

2
frontend/src/app/main/ui/alert.cljs
View file

@ -54,7 +54,7 @@
[:div {:class (stl/css :modal-header)}
[:h2 {:class (stl/css :modal-title)} title]
[:button {:class (stl/css :modal-close-btn)
:on-click accept-fn} i/close-refactor]]
:on-click accept-fn} i/close]]
[:div {:class (stl/css :modal-content)}
(when (and (string? message) (not= message ""))

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

@ -323,12 +323,12 @@
[:div {:class (stl/css :options-resolve-wrapper)
:on-click toggle-resolved}
[:span {:class (stl/css-case :options-resolve true
:global/checked (:is-resolved thread))} i/tick-refactor]])
:global/checked (:is-resolved thread))} i/tick]])
(when (= (:id profile) (:id owner))
[:div {:class (stl/css :options)
:on-click on-toggle-options}
i/menu-refactor])]
i/menu])]
[:div {:class (stl/css :content)}
(if @edition?
@ -585,7 +585,7 @@
[:span {:class (stl/css :page-name)} (:page-name group)]]
[:div {:class (stl/css :section-title)}
[:span {:class (stl/css :icon)} i/document-refactor]
[:span {:class (stl/css :icon)} i/document]
[:span {:class (stl/css :page-name)} (:page-name group)]])
[:div {:class (stl/css :threads)}

6
frontend/src/app/main/ui/components/context_menu_a11y.cljs
View file

@ -220,7 +220,7 @@
[:button {:class (stl/css :context-menu-action :submenu-back)
:data-no-close true
:on-click exit-submenu}
[:span {:class (stl/css :submenu-icon-back)} i/arrow-refactor]
[:span {:class (stl/css :submenu-icon-back)} i/arrow]
parent-option]]
[:li {:class (stl/css :separator)}]])
@ -257,14 +257,14 @@
option-name)
(when (and selected (= data-test selected))
[:span {:class (stl/css :selected-icon)} i/tick-refactor])]
[:span {:class (stl/css :selected-icon)} i/tick])]
[:a {:class (stl/css :context-menu-action :submenu)
:data-no-close true
:on-click (enter-submenu option-name sub-options)
:data-test data-test}
option-name
[:span {:class (stl/css :submenu-icon)} i/arrow-refactor]])]))))])])])))
[:span {:class (stl/css :submenu-icon)} i/arrow]])]))))])])])))
(mf/defc context-menu-a11y
{::mf/wrap-props false}

4
frontend/src/app/main/ui/components/copy_button.cljs
View file

@ -43,5 +43,5 @@
children
[:span {:class (stl/css :icon-btn)}
(if active?
i/tick-refactor
i/clipboard-refactor)]]))
i/tick
i/clipboard)]]))

2
frontend/src/app/main/ui/components/editable_label.cljs
View file

@ -97,7 +97,7 @@
[:span {:class (stl/css :editable-label-close)
:on-click cancel-edition}
i/delete-text-refactor]]
i/delete-text]]
[:span {:class final-class
:title tooltip

4
frontend/src/app/main/ui/components/editable_select.cljs
View file

@ -180,7 +180,7 @@
[:span {:class (stl/css :dropdown-button)
:on-click toggle-dropdown}
i/arrow-refactor]
i/arrow]
[:& dropdown {:show (or is-open? false)
:on-close close-dropdown}
@ -199,4 +199,4 @@
:on-click select-item}
[:span {:class (stl/css :label)} label]
[:span {:class (stl/css :check-icon)}
i/tick-refactor]])))]]]))
i/tick]])))]]]))

12
frontend/src/app/main/ui/components/forms.cljs
View file

@ -52,11 +52,11 @@
help-icon' (cond
(and (= input-type "password")
(= @type' "password"))
i/shown-refactor
i/shown
(and (= input-type "password")
(= @type' "text"))
i/hide-refactor
i/hide
:else
help-icon)
@ -125,7 +125,7 @@
:for (name input-name)} label
(when is-checkbox?
[:span {:class (stl/css-case :global/checked checked?)} (when checked? i/status-tick-refactor)])
[:span {:class (stl/css-case :global/checked checked?)} (when checked? i/status-tick)])
(if is-checkbox?
[:> :input props]
@ -140,11 +140,11 @@
(when show-valid?
[:span {:class (stl/css :valid-icon)}
i/tick-refactor])
i/tick])
(when show-invalid?
[:span {:class (stl/css :invalid-icon)}
i/close-refactor])])]
i/close])])]
(some? children)
[:label {:for (name input-name)}
@ -479,7 +479,7 @@
:caution (:caution item))}
[:span {:class (stl/css :text)} (:text item)]
[:button {:class (stl/css :icon)
:on-click #(remove-item! item)} i/close-refactor]]])])]))
:on-click #(remove-item! item)} i/close]]])])]))
;; --- Validators

2
frontend/src/app/main/ui/components/search_bar.cljs
View file

@ -62,4 +62,4 @@
(when (not= "" value)
[:button {:class (stl/css :clear)
:on-click handle-clear}
i/delete-text-refactor])]]))
i/delete-text])]]))

4
frontend/src/app/main/ui/components/select.cljs
View file

@ -104,7 +104,7 @@
(when (and current-icon current-icon-ref)
[:span {:class (stl/css :current-icon)} current-icon-ref])
[:span {:class (stl/css :current-label)} current-label]
[:span {:class (stl/css :dropdown-button)} i/arrow-refactor]
[:span {:class (stl/css :dropdown-button)} i/arrow]
[:& dropdown {:show is-open? :on-close close-dropdown}
[:ul {:ref dropdown-element* :data-direction @dropdown-direction*
:class (dm/str dropdown-class " " (stl/css :custom-select-dropdown))}
@ -126,4 +126,4 @@
:on-click select-item}
(when (and icon icon-ref) [:span {:class (stl/css :icon)} icon-ref])
[:span {:class (stl/css :label)} label]
[:span {:class (stl/css :check-icon)} i/tick-refactor]])))]]])))
[:span {:class (stl/css :check-icon)} i/tick]])))]]])))

52
frontend/src/app/main/ui/components/shape_icon_refactor.cljs
View file

@ -17,49 +17,49 @@
[{:keys [shape main-instance?]}]
(if (ctk/instance-head? shape)
(if main-instance?
i/component-refactor
i/copy-refactor)
i/component
i/component-copy)
(case (:type shape)
:frame (cond
(and (ctl/flex-layout? shape) (ctl/col? shape))
i/flex-horizontal-refactor
i/flex-horizontal
(and (ctl/flex-layout? shape) (ctl/row? shape))
i/flex-vertical-refactor
i/flex-vertical
(ctl/grid-layout? shape)
i/flex-grid-refactor
i/flex-grid
:else
i/board-refactor)
i/board)
;; TODO -> THUMBNAIL ICON
:image i/img-refactor
:line (if (cts/has-images? shape) i/img-refactor i/path-refactor)
:circle (if (cts/has-images? shape) i/img-refactor i/elipse-refactor)
:path (if (cts/has-images? shape) i/img-refactor i/path-refactor)
:rect (if (cts/has-images? shape) i/img-refactor i/rectangle-refactor)
:text i/text-refactor
:image i/img
:line (if (cts/has-images? shape) i/img i/path)
:circle (if (cts/has-images? shape) i/img i/elipse)
:path (if (cts/has-images? shape) i/img i/path)
:rect (if (cts/has-images? shape) i/img i/rectangle)
:text i/text
:group (if (:masked-group shape)
i/mask-refactor
i/group-refactor)
i/mask
i/group)
:bool (case (:bool-type shape)
:difference i/boolean-difference-refactor
:exclude i/boolean-exclude-refactor
:intersection i/boolean-intersection-refactor
#_:default i/boolean-union-refactor)
:svg-raw i/img-refactor
:difference i/boolean-difference
:exclude i/boolean-exclude
:intersection i/boolean-intersection
#_:default i/boolean-union)
:svg-raw i/img
nil)))
(mf/defc element-icon-refactor-by-type
[{:keys [type main-instance?] :as props}]
(if main-instance?
i/component-refactor
i/component
(case type
:frame i/board-refactor
:image i/img-refactor
:shape i/path-refactor
:text i/text-refactor
:mask i/mask-refactor
:group i/group-refactor
:frame i/board
:image i/img
:shape i/path
:text i/text
:mask i/mask
:group i/group
nil)))

2
frontend/src/app/main/ui/components/tab_container.cljs
View file

@ -48,7 +48,7 @@
{:on-click handle-collapse
:class (stl/css :collapse-sidebar)
:aria-label (tr "workspace.sidebar.collapse")}
i/arrow-refactor])
i/arrow])
[:div {:class (stl/css :tab-container-tab-wrapper)}
(for [tab children]
(let [props (.-props tab)

4
frontend/src/app/main/ui/confirm.cljs
View file

@ -70,7 +70,7 @@
[:div {:class (stl/css :modal-header)}
[:h2 {:class (stl/css :modal-title)} title]
[:button {:class (stl/css :modal-close-btn)
:on-click cancel-fn} i/close-refactor]]
:on-click cancel-fn} i/close]]
[:div {:class (stl/css :modal-content)}
(when (and (string? message) (not= message ""))
@ -87,7 +87,7 @@
(for [item items]
[:li {:class (stl/css :modal-item-element)}
[:span {:class (stl/css :modal-component-icon)}
i/component-refactor]
i/component]
[:span {:class (stl/css :modal-component-name)}
(:name item)]])]])]

2
frontend/src/app/main/ui/dashboard/change_owner.cljs
View file

@ -45,7 +45,7 @@
[:div {:class (stl/css :modal-header)}
[:h2 {:class (stl/css :modal-title)} (tr "modals.leave-and-reassign.title")]
[:button {:class (stl/css :modal-close-btn)
:on-click on-cancel} i/close-refactor]]
:on-click on-cancel} i/close]]
[:div {:class (stl/css :modal-content)}
[:p {:class (stl/css :modal-msg)}

12
frontend/src/app/main/ui/dashboard/fonts.cljs
View file

@ -227,7 +227,7 @@
[:div {:class (stl/css :table-field :options)}
(when (:height-warning? item)
[:span {:class (stl/css :icon :failure)}
i/msg-neutral-refactor])
i/msg-neutral])
[:button {:on-click on-upload
:data-id (dm/str id)
@ -242,7 +242,7 @@
[:span {:class (stl/css :icon :close)
:data-id (dm/str id)
:on-click on-delete}
i/close-refactor]]]))]]))
i/close]]]))]]))
(mf/defc installed-font-context-menu
{::mf/props :obj
@ -368,7 +368,7 @@
{:class (stl/css :icon :close)
:data-id (dm/str id)
:on-click on-delete-variant}
i/add-refactor]])]
i/add]])]
(if ^boolean edition?
[:div {:class (stl/css :table-field :options)}
@ -380,12 +380,12 @@
(tr "labels.save")]
[:button {:class (stl/css :icon :close)
:on-click on-cancel}
i/close-refactor]]
i/close]]
[:div {:class (stl/css :table-field :options)}
[:span {:class (stl/css :icon)
:on-click on-menu-open}
i/menu-refactor]
i/menu]
[:& installed-font-context-menu
{:on-close on-menu-close
@ -432,7 +432,7 @@
:else
[:div {:class (stl/css :fonts-placeholder)}
[:div {:class (stl/css :icon)} i/text-refactor]
[:div {:class (stl/css :icon)} i/text]
[:div {:class (stl/css :label)} (tr "dashboard.fonts.empty-placeholder")]])]))
(mf/defc fonts-page

2
frontend/src/app/main/ui/dashboard/grid.cljs
View file

@ -365,7 +365,7 @@
:background-color (dm/get-in file [:data :options :background])}])
(when (and (:is-shared file) (not library-view?))
[:div {:class (stl/css :item-badge)} i/library-refactor])
[:div {:class (stl/css :item-badge)} i/library])
[:div {:class (stl/css :info-wrapper)}
[:div {:class (stl/css :item-info)}

18
frontend/src/app/main/ui/dashboard/import.cljs
View file

@ -270,10 +270,10 @@
:icon-fill ready?)}
(cond loading? i/loader-pencil
ready? i/logo-icon
import-warn? i/msg-warning-refactor
import-error? i/close-refactor
import-finish? i/tick-refactor
analyze-error? i/close-refactor)]
import-warn? i/msg-warning
import-error? i/close
import-finish? i/tick
analyze-error? i/close)]
(if editing?
[:div {:class (stl/css :file-name-edit)}
@ -287,14 +287,14 @@
(:name entry)
(when ^boolean is-shared?
[:span {:class (stl/css :icon)}
i/library-refactor])])
i/library])])
[:div {:class (stl/css :edit-entry-buttons)}
(when (and (= "application/zip" (:type entry))
(= status :ready))
[:button {:on-click on-edit'} i/curve-refactor])
[:button {:on-click on-edit'} i/curve])
(when can-be-deleted
[:button {:on-click on-delete'} i/delete-refactor])]]
[:button {:on-click on-delete'} i/delete])]]
(cond
analyze-error?
@ -322,7 +322,7 @@
[:span {:class (stl/css-case
:linked-library-tag true
:error error?)}
i/detach-refactor]])))]]))
i/detach]])))]]))
(mf/defc import-dialog
{::mf/register modal/components
@ -455,7 +455,7 @@
[:h2 {:class (stl/css :modal-title)} (tr "dashboard.import")]
[:button {:class (stl/css :modal-close-btn)
:on-click on-cancel} i/close-refactor]]
:on-click on-cancel} i/close]]
[:div {:class (stl/css :modal-content)}
(when (and (= :analyzing status) errors?)

2
frontend/src/app/main/ui/dashboard/inline_edition.cljs
View file

@ -69,5 +69,5 @@
:on-key-down on-keyup
:on-blur on-blur}]
[:span {:class (stl/css :close)
:on-click on-cancel} i/close-refactor]]))
:on-click on-cancel} i/close]]))

2
frontend/src/app/main/ui/dashboard/placeholder.cljs
View file

@ -36,7 +36,7 @@
{:class (stl/css :grid-empty-placeholder)}
[:button {:class (stl/css :create-new)
:on-click on-click}
i/add-refactor]])))
i/add]])))
(mf/defc loading-placeholder
[]

4
frontend/src/app/main/ui/dashboard/projects.cljs
View file

@ -315,7 +315,7 @@
:aria-label (tr "dashboard.new-file")
:data-test "project-new-file"
:on-key-down handle-create-click}
i/add-refactor]
i/add]
[:button
{:class (stl/css :btn-secondary :btn-small :tooltip :tooltip-bottom)
@ -324,7 +324,7 @@
:aria-label (tr "dashboard.options")
:data-test "project-options"
:on-key-down handle-menu-click}
i/menu-refactor]]]]
i/menu]]]]
[:div {:class (stl/css :grid-container) :ref rowref}
[:& line-grid

6
frontend/src/app/main/ui/dashboard/search.cljs
View file

@ -46,17 +46,17 @@
(cond
(empty? search-term)
[:div {:class (stl/css :grid-empty-placeholder :search)}
[:div {:class (stl/css :icon)} i/search-refactor]
[:div {:class (stl/css :icon)} i/search]
[:div {:class (stl/css :text)} (tr "dashboard.type-something")]]
(nil? result)
[:div {:class (stl/css :grid-empty-placeholder :search)}
[:div {:class (stl/css :icon)} i/search-refactor]
[:div {:class (stl/css :icon)} i/search]
[:div {:class (stl/css :text)} (tr "dashboard.searching-for" search-term)]]
(empty? result)
[:div {:class (stl/css :grid-empty-placeholder :search)}
[:div {:class (stl/css :icon)} i/search-refactor]
[:div {:class (stl/css :icon)} i/search]
[:div {:class (stl/css :text)} (tr "dashboard.no-matches-for" search-term)]]
:else

2
frontend/src/app/main/ui/dashboard/team.cljs
View file

@ -846,7 +846,7 @@
[:h2 {:class (stl/css :modal-title)} (tr "modals.create-webhook.title")])
[:button {:class (stl/css :modal-close-btn)
:on-click on-modal-close} i/close-refactor]]
:on-click on-modal-close} i/close]]
[:div {:class (stl/css :modal-content)}
[:div {:class (stl/css :fields-row)}

2
frontend/src/app/main/ui/dashboard/team_form.cljs
View file

@ -101,7 +101,7 @@
(tr "labels.create-team")])
[:button {:class (stl/css :modal-close-btn)
:on-click on-close} i/close-refactor]]
:on-click on-close} i/close]]
[:div {:class (stl/css :modal-content)}
[:& fm/input {:type "text"

30
frontend/src/app/main/ui/debug/components_preview.cljs
View file

@ -109,7 +109,7 @@
[:& title-bar {:collapsable false
:title "Title"
:on-btn-click on-btn-click
:btn-children i/add-refactor}]]
:btn-children i/add}]]
[:& component-wrapper
{:title "Collapsed title and action button"}
[:& title-bar {:collapsable true
@ -117,7 +117,7 @@
:on-collapsed toggle-collapsed
:title "Title"
:on-btn-click on-btn-click
:btn-children i/add-refactor}]]
:btn-children i/add}]]
[:& component-wrapper
{:title "Collapsed title and children"}
[:& title-bar {:collapsable true
@ -179,10 +179,10 @@
[:& radio-buttons {:selected radio-selected
:on-change set-radio-selected
:name "listing-style"}
[:& radio-button {:icon i/view-as-list-refactor
[:& radio-button {:icon i/view-as-list
:value "first"
:id :list}]
[:& radio-button {:icon i/flex-grid-refactor
[:& radio-button {:icon i/flex-grid
:value "second"
:id :grid}]]]
[:& component-wrapper
@ -190,14 +190,14 @@
[:& radio-buttons {:selected radio-selected
:on-change set-radio-selected
:name "listing-style"}
[:& radio-button {:icon i/view-as-list-refactor
[:& radio-button {:icon i/view-as-list
:value "first"
:id :first}]
[:& radio-button {:icon i/flex-grid-refactor
[:& radio-button {:icon i/flex-grid
:value "second"
:id :second}]
[:& radio-button {:icon i/add-refactor
[:& radio-button {:icon i/add
:value "third"
:id :third}]]]
@ -206,18 +206,18 @@
[:& radio-buttons {:selected radio-selected
:on-change set-radio-selected
:name "listing-style"}
[:& radio-button {:icon i/view-as-list-refactor
[:& radio-button {:icon i/view-as-list
:value "first"
:id :first}]
[:& radio-button {:icon i/flex-grid-refactor
[:& radio-button {:icon i/flex-grid
:value "second"
:id :second}]
[:& radio-button {:icon i/add-refactor
[:& radio-button {:icon i/add
:value "third"
:id :third}]
[:& radio-button {:icon i/board-refactor
[:& radio-button {:icon i/board
:value "forth"
:id :forth}]]]]
[:div {:class (stl/css :components-group)}
@ -229,7 +229,7 @@
[:& component-wrapper
{:title "Button primary with icon"}
[:button {:class (stl/css :button-primary)}
i/add-refactor]]
i/add]]
[:& component-wrapper
{:title "Button secondary"}
@ -238,7 +238,7 @@
[:& component-wrapper
{:title "Button secondary with icon"}
[:button {:class (stl/css :button-secondary)}
i/add-refactor]]
i/add]]
[:& component-wrapper
{:title "Button tertiary"}
@ -247,7 +247,7 @@
[:& component-wrapper
{:title "Button tertiary with icon"}
[:button {:class (stl/css :button-tertiary)}
i/add-refactor]]]
i/add]]]
[:div {:class (stl/css :components-group)}
[:h3 "Inputs"]
[:& component-wrapper
@ -265,6 +265,6 @@
{:title "Input with icon"}
[:div {:class (stl/css :input-wrapper)}
[:span {:class (stl/css :input-label)}
i/add-refactor]
i/add]
[:input {:class (stl/css :basic-input)
:placeholder "----"}]]]]]]]))

2
frontend/src/app/main/ui/delete_shared.cljs
View file

@ -97,7 +97,7 @@
[:div {:class (stl/css :modal-header)}
[:h2 {:class (stl/css :modal-title)} title]
[:button {:class (stl/css :modal-close-btn)
:on-click cancel-fn} i/close-refactor]]
:on-click cancel-fn} i/close]]
[:div {:class (stl/css :modal-content)}
(when (and (string? subtitle) (not= subtitle ""))

16
frontend/src/app/main/ui/export.cljs
View file

@ -86,7 +86,7 @@
[:h2 {:class (stl/css :modal-title)} title]
[:button {:class (stl/css :modal-close-btn)
:on-click cancel-fn}
i/close-refactor]]
i/close]]
[:*
[:div {:class (stl/css :modal-content)}
@ -99,12 +99,12 @@
(cond
all-checked? [:span {:class (stl/css-case :checkobox-tick true
:global/checked true)}
i/tick-refactor]
i/tick]
all-unchecked? [:span {:class (stl/css-case :checkobox-tick true
:global/uncheked true)}]
:else [:span {:class (stl/css-case :checkobox-tick true
:global/intermediate true)}
i/remove-refactor])]]
i/remove-icon])]]
[:div {:class (stl/css :selection-title)}
(tr "dashboard.export-multiple.selected"
(c (count enabled-exports))
@ -123,7 +123,7 @@
(if (:enabled export)
[:span {:class (stl/css-case :checkobox-tick true
:global/checked true)}
i/tick-refactor]
i/tick]
[:span {:class (stl/css-case :checkobox-tick true
:global/uncheked true)}])]
@ -318,8 +318,8 @@
[:div {:class (stl/css :file-name)}
[:span {:class (stl/css :file-icon)}
(cond (:export-success? file) i/tick-refactor
(:export-error? file) i/close-refactor
(cond (:export-success? file) i/tick
(:export-error? file) i/close
(:loading? file) i/loader-pencil)]
[:div {:class (stl/css :file-name-label)}
@ -417,7 +417,7 @@
[:h2 {:class (stl/css :modal-title)}
(tr "dashboard.export.title")]
[:button {:class (stl/css :modal-close-btn)
:on-click on-cancel} i/close-refactor]]
:on-click on-cancel} i/close]]
(cond
(= status :prepare)
@ -440,7 +440,7 @@
;; dashboard.export.options.merge.title
[:span {:class (stl/css-case :global/checked (= selected type))}
(when (= selected type)
i/status-tick-refactor)]
i/status-tick)]
[:div {:class (stl/css :option-content)}
[:h3 {:class (stl/css :modal-subtitle)} (tr (dm/str "dashboard.export.options." (d/name type) ".title"))]
[:p {:class (stl/css :modal-msg)} (tr (dm/str "dashboard.export.options." (d/name type) ".message"))]]

8
frontend/src/app/main/ui/icons.clj
View file

@ -15,13 +15,7 @@
(defmacro icon-xref
[id & [class]]
(let [href (str "#icon-" (name id))
class (or class (str "icon-" (name id)))
;; FIXME: Debug tool. Remove when we remove the old icons
class (cond-> class
(and (not (str/ends-with? (name id) "-refactor"))
(not (contains? exceptions id)))
(str " deprecated-icon"))]
class (or class (str "icon-" (name id)))]
`(rumext.v2/html
[:svg {:width 500 :height 500 :class ~class}
[:use {:href ~href}]])))

457
frontend/src/app/main/ui/icons.cljs
View file

@ -25,239 +25,238 @@
(def ^:icon brand-gitlab (icon-xref :brand-gitlab))
(def ^:icon brand-google (icon-xref :brand-google))
(def ^:icon absolute-refactor (icon-xref :absolute))
(def ^:icon add-refactor (icon-xref :add))
(def ^:icon align-bottom-refactor (icon-xref :align-bottom))
(def ^:icon align-content-column-around-refactor (icon-xref :align-content-column-around))
(def ^:icon align-content-column-between-refactor (icon-xref :align-content-column-between))
(def ^:icon align-content-column-center-refactor (icon-xref :align-content-column-center))
(def ^:icon align-content-column-end-refactor (icon-xref :align-content-column-end))
(def ^:icon align-content-column-evenly-refactor (icon-xref :align-content-column-evenly))
(def ^:icon align-content-column-start-refactor (icon-xref :align-content-column-start))
(def ^:icon align-content-column-stretch-refactor (icon-xref :align-content-column-stretch))
(def ^:icon align-content-row-around-refactor (icon-xref :align-content-row-around))
(def ^:icon align-content-row-between-refactor (icon-xref :align-content-row-between))
(def ^:icon align-content-row-center-refactor (icon-xref :align-content-row-center))
(def ^:icon align-content-row-end-refactor (icon-xref :align-content-row-end))
(def ^:icon align-content-row-evenly-refactor (icon-xref :align-content-row-evenly))
(def ^:icon align-content-row-start-refactor (icon-xref :align-content-row-start))
(def ^:icon align-content-row-stretch-refactor (icon-xref :align-content-row-stretch))
(def ^:icon align-horizontal-center-refactor (icon-xref :align-horizontal-center))
(def ^:icon align-items-column-center-refactor (icon-xref :align-items-column-center))
(def ^:icon align-items-column-end-refactor (icon-xref :align-items-column-end))
(def ^:icon align-items-column-start-refactor (icon-xref :align-items-column-start))
(def ^:icon align-items-row-center-refactor (icon-xref :align-items-row-center))
(def ^:icon align-items-row-end-refactor (icon-xref :align-items-row-end))
(def ^:icon align-items-row-start-refactor (icon-xref :align-items-row-start))
(def ^:icon align-left-refactor (icon-xref :align-left))
(def ^:icon align-right-refactor (icon-xref :align-right))
(def ^:icon align-self-column-bottom-refactor (icon-xref :align-self-column-bottom))
(def ^:icon align-self-column-center-refactor (icon-xref :align-self-column-center))
(def ^:icon align-self-column-stretch-refactor (icon-xref :align-self-column-stretch))
(def ^:icon align-self-column-top-refactor (icon-xref :align-self-column-top))
(def ^:icon align-self-row-center-refactor (icon-xref :align-self-row-center))
(def ^:icon align-self-row-left-refactor (icon-xref :align-self-row-left))
(def ^:icon align-self-row-right-refactor (icon-xref :align-self-row-right))
(def ^:icon align-self-row-stretch-refactor (icon-xref :align-self-row-stretch))
(def ^:icon align-top-refactor (icon-xref :align-top))
(def ^:icon align-vertical-center-refactor (icon-xref :align-vertical-center))
(def ^:icon arrow-refactor (icon-xref :arrow))
(def ^:icon asc-sort-refactor (icon-xref :asc-sort))
(def ^:icon board-refactor (icon-xref :board))
(def ^:icon boards-thumbnail-refactor (icon-xref :boards-thumbnail))
(def ^:icon boolean-difference-refactor (icon-xref :boolean-difference))
(def ^:icon boolean-exclude-refactor (icon-xref :boolean-exclude))
(def ^:icon boolean-flatten-refactor (icon-xref :boolean-flatten))
(def ^:icon boolean-intersection-refactor (icon-xref :boolean-intersection))
(def ^:icon boolean-union-refactor (icon-xref :boolean-union))
(def ^:icon bug-refactor (icon-xref :bug))
(def ^:icon clip-content-refactor (icon-xref :clip-content))
(def ^:icon clipboard-refactor (icon-xref :clipboard))
(def ^:icon close-small-refactor (icon-xref :close-small))
(def ^:icon close-refactor (icon-xref :close))
(def ^:icon code-refactor (icon-xref :code))
(def ^:icon column-reverse-refactor (icon-xref :column-reverse))
(def ^:icon column-refactor (icon-xref :column))
(def ^:icon comments-refactor (icon-xref :comments))
(def ^:icon copy-refactor (icon-xref :component-copy))
(def ^:icon component-refactor (icon-xref :component))
(def ^:icon constraint-horizontal-refactor (icon-xref :constraint-horizontal))
(def ^:icon constraint-vertical-refactor (icon-xref :constraint-vertical))
(def ^:icon corner-bottomleft-refactor (icon-xref :corner-bottom-left))
(def ^:icon corner-bottomright-refactor (icon-xref :corner-bottom-right))
(def ^:icon corner-bottom-refactor (icon-xref :corner-bottom))
(def ^:icon corner-center-refactor (icon-xref :corner-center))
(def ^:icon corner-radius-refactor (icon-xref :corner-radius))
(def ^:icon corner-top-refactor (icon-xref :corner-top))
(def ^:icon corner-topleft-refactor (icon-xref :corner-top-left))
(def ^:icon corner-topright-refactor (icon-xref :corner-top-right))
(def ^:icon curve-refactor (icon-xref :curve))
(def ^:icon delete-text-refactor (icon-xref :delete-text))
(def ^:icon delete-refactor (icon-xref :delete))
(def ^:icon desc-sort-refactor (icon-xref :desc-sort))
(def ^:icon detach-refactor (icon-xref :detach))
(def ^:icon detached-refactor (icon-xref :detached))
(def ^:icon distribute-horizontally-refactor (icon-xref :distribute-horizontally))
(def ^:icon distribute-vertical-spacing-refactor (icon-xref :distribute-vertical-spacing))
(def ^:icon document-refactor (icon-xref :document))
(def ^:icon download-refactor (icon-xref :download))
(def ^:icon drop-refactor (icon-xref :drop))
(def ^:icon easing-ease-in-out-refactor (icon-xref :easing-ease-in-out))
(def ^:icon easing-ease-in-refactor (icon-xref :easing-ease-in))
(def ^:icon easing-ease-out-refactor (icon-xref :easing-ease-out))
(def ^:icon easing-ease-refactor (icon-xref :easing-ease))
(def ^:icon easing-linear-refactor (icon-xref :easing-linear))
(def ^:icon effects-refactor (icon-xref :effects))
(def ^:icon elipse-refactor (icon-xref :elipse))
(def ^:icon exit-refactor (icon-xref :exit))
(def ^:icon expand-refactor (icon-xref :expand))
(def ^:icon feedback-refactor (icon-xref :feedback))
(def ^:icon fill-content-refactor (icon-xref :fill-content))
(def ^:icon filter-refactor (icon-xref :filter))
(def ^:icon fixed-width-refactor (icon-xref :fixed-width))
(def ^:icon flex-grid-refactor (icon-xref :flex-grid))
(def ^:icon flex-horizontal-refactor (icon-xref :flex-horizontal))
(def ^:icon flex-vertical-refactor (icon-xref :flex-vertical))
(def ^:icon flex-refactor (icon-xref :flex))
(def ^:icon flip-horizontal-refactor (icon-xref :flip-horizontal))
(def ^:icon flip-vertical-refactor (icon-xref :flip-vertical))
(def ^:icon gap-horizontal-refactor (icon-xref :gap-horizontal))
(def ^:icon gap-vertical-refactor (icon-xref :gap-vertical))
(def ^:icon graphics-refactor (icon-xref :graphics))
(def ^:icon grid-column-refactor (icon-xref :grid-column))
(def ^:icon grid-columns-refactor (icon-xref :grid-columns))
(def ^:icon grid-gutter-refactor (icon-xref :grid-gutter))
(def ^:icon grid-margin-refactor (icon-xref :grid-margin))
(def ^:icon grid-refactor (icon-xref :grid))
(def ^:icon grid-row-refactor (icon-xref :grid-row))
(def ^:icon grid-rows-refactor (icon-xref :grid-rows))
(def ^:icon grid-square-refactor (icon-xref :grid-square))
(def ^:icon group-refactor (icon-xref :group))
(def ^:icon gutter-horizontal-refactor (icon-xref :gutter-horizontal))
(def ^:icon gutter-vertical-refactor (icon-xref :gutter-vertical))
(def ^:icon help-refactor (icon-xref :help))
(def ^:icon hide-refactor (icon-xref :hide))
(def ^:icon history-refactor (icon-xref :history))
(def ^:icon hsva-refactor (icon-xref :hsva))
(def ^:icon hug-content-refactor (icon-xref :hug-content))
(def ^:icon icon-refactor (icon-xref :icon))
(def ^:icon img-refactor (icon-xref :img))
(def ^:icon interaction-refactor (icon-xref :interaction))
(def ^:icon join-nodes-refactor (icon-xref :join-nodes))
(def ^:icon justify-content-column-around-refactor (icon-xref :justify-content-column-around))
(def ^:icon justify-content-column-between-refactor (icon-xref :justify-content-column-between))
(def ^:icon justify-content-column-center-refactor (icon-xref :justify-content-column-center))
(def ^:icon justify-content-column-end-refactor (icon-xref :justify-content-column-end))
(def ^:icon justify-content-column-evenly-refactor (icon-xref :justify-content-column-evenly))
(def ^:icon justify-content-column-start-refactor (icon-xref :justify-content-column-start))
(def ^:icon justify-content-row-around-refactor (icon-xref :justify-content-row-around))
(def ^:icon justify-content-row-between-refactor (icon-xref :justify-content-row-between))
(def ^:icon justify-content-row-center-refactor (icon-xref :justify-content-row-center))
(def ^:icon justify-content-row-end-refactor (icon-xref :justify-content-row-end))
(def ^:icon justify-content-row-evenly-refactor (icon-xref :justify-content-row-evenly))
(def ^:icon justify-content-row-start-refactor (icon-xref :justify-content-row-start))
(def ^:icon layers-refactor (icon-xref :layers))
(def ^:icon library-refactor (icon-xref :library))
(def ^:icon locate-refactor (icon-xref :locate))
(def ^:icon lock-refactor (icon-xref :lock)) ;; This icon will not change
(def ^:icon logo-refactor (icon-xref :penpot-logo-icon))
(def ^:icon margin-bottom-refactor (icon-xref :margin-bottom))
(def ^:icon margin-left-refactor (icon-xref :margin-left))
(def ^:icon margin-left-right-refactor (icon-xref :margin-left-right))
(def ^:icon margin-right-refactor (icon-xref :margin-right))
(def ^:icon margin-top-bottom-refactor (icon-xref :margin-top-bottom))
(def ^:icon margin-top-refactor (icon-xref :margin-top))
(def ^:icon margin-refactor (icon-xref :margin))
(def ^:icon mask-refactor (icon-xref :mask))
(def ^:icon masked-refactor (icon-xref :masked))
(def ^:icon menu-refactor (icon-xref :menu))
(def ^:icon merge-nodes-refactor (icon-xref :merge-nodes))
(def ^:icon move-refactor (icon-xref :move))
(def ^:icon msg-error-refactor (icon-xref :msg-error))
(def ^:icon msg-neutral-refactor (icon-xref :msg-neutral))
(def ^:icon msg-success-refactor (icon-xref :msg-success))
(def ^:icon msg-warning-refactor (icon-xref :msg-warning))
(def ^:icon open-link-refactor (icon-xref :open-link))
(def ^:icon padding-bottom-refactor (icon-xref :padding-bottom))
(def ^:icon padding-extended-refactor (icon-xref :padding-extended))
(def ^:icon padding-left-right-refactor (icon-xref :padding-left-right))
(def ^:icon padding-left-refactor (icon-xref :padding-left))
(def ^:icon padding-right-refactor (icon-xref :padding-right))
(def ^:icon padding-top-bottom-refactor (icon-xref :padding-top-bottom))
(def ^:icon padding-top-refactor (icon-xref :padding-top))
(def ^:icon path-refactor (icon-xref :path))
(def ^:icon pentool-refactor (icon-xref :pentool))
(def ^:icon picker-refactor (icon-xref :picker))
(def ^:icon pin-refactor (icon-xref :pin))
(def ^:icon play-refactor (icon-xref :play))
(def ^:icon rectangle-refactor (icon-xref :rectangle))
(def ^:icon reload-refactor (icon-xref :reload))
(def ^:icon remove-refactor (icon-xref :remove))
(def ^:icon rgba-complementary-refactor (icon-xref :rgba-complementary))
(def ^:icon rgba-refactor (icon-xref :rgba))
(def ^:icon rotation-refactor (icon-xref :rotation))
(def ^:icon row-reverse-refactor (icon-xref :row-reverse))
(def ^:icon row-refactor (icon-xref :row))
(def ^:icon search-refactor (icon-xref :search))
(def ^:icon separate-nodes-refactor (icon-xref :separate-nodes))
(def ^:icon shown-refactor (icon-xref :shown))
(def ^:icon size-horizontal-refactor (icon-xref :size-horizontal))
(def ^:icon size-vertical-refactor (icon-xref :size-vertical))
(def ^:icon snap-nodes-refactor (icon-xref :snap-nodes))
(def ^:icon status-alert-refactor (icon-xref :status-alert))
(def ^:icon status-tick-refactor (icon-xref :status-tick))
(def ^:icon status-update-refactor (icon-xref :status-update))
(def ^:icon status-wrong-refactor (icon-xref :status-wrong))
(def ^:icon stroke-arrow-refactor (icon-xref :stroke-arrow))
(def ^:icon stroke-circle-refactor (icon-xref :stroke-circle))
(def ^:icon stroke-diamond-refactor (icon-xref :stroke-diamond))
(def ^:icon stroke-rectangle-refactor (icon-xref :stroke-rectangle))
(def ^:icon stroke-rounded-refactor (icon-xref :stroke-rounded))
(def ^:icon stroke-size-refactor (icon-xref :stroke-size))
(def ^:icon stroke-squared-refactor (icon-xref :stroke-squared))
(def ^:icon stroke-triangle-refactor (icon-xref :stroke-triangle))
(def ^:icon svg-refactor (icon-xref :svg))
(def ^:icon swatches-refactor (icon-xref :swatches))
(def ^:icon switch-refactor (icon-xref :switch))
(def ^:icon text-align-center-refactor (icon-xref :text-align-center))
(def ^:icon text-align-left-refactor (icon-xref :text-align-left))
(def ^:icon text-align-right-refactor (icon-xref :text-align-right))
(def ^:icon text-auto-height-refactor (icon-xref :text-auto-height))
(def ^:icon text-auto-width-refactor (icon-xref :text-auto-width))
(def ^:icon text-bottom-refactor (icon-xref :text-bottom))
(def ^:icon text-fixed-refactor (icon-xref :text-fixed))
(def ^:icon text-justify-refactor (icon-xref :text-justify))
(def ^:icon text-letterspacing-refactor (icon-xref :text-letterspacing))
(def ^:icon text-lineheight-refactor (icon-xref :text-lineheight))
(def ^:icon text-lowercase-refactor (icon-xref :text-lowercase))
(def ^:icon text-ltr-refactor (icon-xref :text-ltr))
(def ^:icon text-middle-refactor (icon-xref :text-middle))
(def ^:icon text-mixed-refactor (icon-xref :text-mixed))
(def ^:icon text-palette-refactor (icon-xref :text-palette))
(def ^:icon text-paragraph-refactor (icon-xref :text-paragraph))
(def ^:icon text-rtl-refactor (icon-xref :text-rtl))
(def ^:icon text-stroked-refactor (icon-xref :text-stroked))
(def ^:icon text-top-refactor (icon-xref :text-top))
(def ^:icon text-underlined-refactor (icon-xref :text-underlined))
(def ^:icon text-uppercase-refactor (icon-xref :text-uppercase))
(def ^:icon text-refactor (icon-xref :text))
(def ^:icon thumbnail-refactor (icon-xref :thumbnail))
(def ^:icon tick-refactor (icon-xref :tick))
(def ^:icon to-corner-refactor (icon-xref :to-corner))
(def ^:icon to-curve-refactor (icon-xref :to-curve))
(def ^:icon tree-refactor (icon-xref :tree))
(def ^:icon unlock-refactor (icon-xref :unlock))
(def ^:icon user-refactor (icon-xref :user))
(def ^:icon absolute (icon-xref :absolute))
(def ^:icon add (icon-xref :add))
(def ^:icon align-bottom (icon-xref :align-bottom))
(def ^:icon align-content-column-around (icon-xref :align-content-column-around))
(def ^:icon align-content-column-between (icon-xref :align-content-column-between))
(def ^:icon align-content-column-center (icon-xref :align-content-column-center))
(def ^:icon align-content-column-end (icon-xref :align-content-column-end))
(def ^:icon align-content-column-evenly (icon-xref :align-content-column-evenly))
(def ^:icon align-content-column-start (icon-xref :align-content-column-start))
(def ^:icon align-content-column-stretch (icon-xref :align-content-column-stretch))
(def ^:icon align-content-row-around (icon-xref :align-content-row-around))
(def ^:icon align-content-row-between (icon-xref :align-content-row-between))
(def ^:icon align-content-row-center (icon-xref :align-content-row-center))
(def ^:icon align-content-row-end (icon-xref :align-content-row-end))
(def ^:icon align-content-row-evenly (icon-xref :align-content-row-evenly))
(def ^:icon align-content-row-start (icon-xref :align-content-row-start))
(def ^:icon align-content-row-stretch (icon-xref :align-content-row-stretch))
(def ^:icon align-horizontal-center (icon-xref :align-horizontal-center))
(def ^:icon align-items-column-center (icon-xref :align-items-column-center))
(def ^:icon align-items-column-end (icon-xref :align-items-column-end))
(def ^:icon align-items-column-start (icon-xref :align-items-column-start))
(def ^:icon align-items-row-center (icon-xref :align-items-row-center))
(def ^:icon align-items-row-end (icon-xref :align-items-row-end))
(def ^:icon align-items-row-start (icon-xref :align-items-row-start))
(def ^:icon align-left (icon-xref :align-left))
(def ^:icon align-right (icon-xref :align-right))
(def ^:icon align-self-column-bottom (icon-xref :align-self-column-bottom))
(def ^:icon align-self-column-center (icon-xref :align-self-column-center))
(def ^:icon align-self-column-stretch (icon-xref :align-self-column-stretch))
(def ^:icon align-self-column-top (icon-xref :align-self-column-top))
(def ^:icon align-self-row-center (icon-xref :align-self-row-center))
(def ^:icon align-self-row-left (icon-xref :align-self-row-left))
(def ^:icon align-self-row-right (icon-xref :align-self-row-right))
(def ^:icon align-self-row-stretch (icon-xref :align-self-row-stretch))
(def ^:icon align-top (icon-xref :align-top))
(def ^:icon align-vertical-center (icon-xref :align-vertical-center))
(def ^:icon arrow (icon-xref :arrow))
(def ^:icon asc-sort (icon-xref :asc-sort))
(def ^:icon board (icon-xref :board))
(def ^:icon boards-thumbnail (icon-xref :boards-thumbnail))
(def ^:icon boolean-difference (icon-xref :boolean-difference))
(def ^:icon boolean-exclude (icon-xref :boolean-exclude))
(def ^:icon boolean-flatten (icon-xref :boolean-flatten))
(def ^:icon boolean-intersection (icon-xref :boolean-intersection))
(def ^:icon boolean-union (icon-xref :boolean-union))
(def ^:icon bug (icon-xref :bug))
(def ^:icon clip-content (icon-xref :clip-content))
(def ^:icon clipboard (icon-xref :clipboard))
(def ^:icon close-small (icon-xref :close-small))
(def ^:icon close (icon-xref :close))
(def ^:icon code (icon-xref :code))
(def ^:icon column-reverse (icon-xref :column-reverse))
(def ^:icon column (icon-xref :column))
(def ^:icon comments (icon-xref :comments))
(def ^:icon component-copy (icon-xref :component-copy))
(def ^:icon component (icon-xref :component))
(def ^:icon constraint-horizontal (icon-xref :constraint-horizontal))
(def ^:icon constraint-vertical (icon-xref :constraint-vertical))
(def ^:icon corner-bottom-left (icon-xref :corner-bottom-left))
(def ^:icon corner-bottom-right (icon-xref :corner-bottom-right))
(def ^:icon corner-bottom (icon-xref :corner-bottom))
(def ^:icon corner-center (icon-xref :corner-center))
(def ^:icon corner-radius (icon-xref :corner-radius))
(def ^:icon corner-top (icon-xref :corner-top))
(def ^:icon corner-top-left (icon-xref :corner-top-left))
(def ^:icon corner-top-right (icon-xref :corner-top-right))
(def ^:icon curve (icon-xref :curve))
(def ^:icon delete-text (icon-xref :delete-text))
(def ^:icon delete (icon-xref :delete))
(def ^:icon desc-sort (icon-xref :desc-sort))
(def ^:icon detach (icon-xref :detach))
(def ^:icon detached (icon-xref :detached))
(def ^:icon distribute-horizontally (icon-xref :distribute-horizontally))
(def ^:icon distribute-vertical-spacing (icon-xref :distribute-vertical-spacing))
(def ^:icon document (icon-xref :document))
(def ^:icon download (icon-xref :download))
(def ^:icon drop-icon (icon-xref :drop))
(def ^:icon easing-ease-in-out (icon-xref :easing-ease-in-out))
(def ^:icon easing-ease-in (icon-xref :easing-ease-in))
(def ^:icon easing-ease-out (icon-xref :easing-ease-out))
(def ^:icon easing-ease (icon-xref :easing-ease))
(def ^:icon easing-linear (icon-xref :easing-linear))
(def ^:icon effects (icon-xref :effects))
(def ^:icon elipse (icon-xref :elipse))
(def ^:icon exit (icon-xref :exit))
(def ^:icon expand (icon-xref :expand))
(def ^:icon feedback (icon-xref :feedback))
(def ^:icon fill-content (icon-xref :fill-content))
(def ^:icon filter-icon (icon-xref :filter))
(def ^:icon fixed-width (icon-xref :fixed-width))
(def ^:icon flex-grid (icon-xref :flex-grid))
(def ^:icon flex-horizontal (icon-xref :flex-horizontal))
(def ^:icon flex-vertical (icon-xref :flex-vertical))
(def ^:icon flex (icon-xref :flex))
(def ^:icon flip-horizontal (icon-xref :flip-horizontal))
(def ^:icon flip-vertical (icon-xref :flip-vertical))
(def ^:icon gap-horizontal (icon-xref :gap-horizontal))
(def ^:icon gap-vertical (icon-xref :gap-vertical))
(def ^:icon graphics (icon-xref :graphics))
(def ^:icon grid-column (icon-xref :grid-column))
(def ^:icon grid-columns (icon-xref :grid-columns))
(def ^:icon grid-gutter (icon-xref :grid-gutter))
(def ^:icon grid-margin (icon-xref :grid-margin))
(def ^:icon grid (icon-xref :grid))
(def ^:icon grid-row (icon-xref :grid-row))
(def ^:icon grid-rows (icon-xref :grid-rows))
(def ^:icon grid-square (icon-xref :grid-square))
(def ^:icon group (icon-xref :group))
(def ^:icon gutter-horizontal (icon-xref :gutter-horizontal))
(def ^:icon gutter-vertical (icon-xref :gutter-vertical))
(def ^:icon help (icon-xref :help))
(def ^:icon hide (icon-xref :hide))
(def ^:icon history (icon-xref :history))
(def ^:icon hsva (icon-xref :hsva))
(def ^:icon hug-content (icon-xref :hug-content))
(def ^:icon icon (icon-xref :icon))
(def ^:icon img (icon-xref :img))
(def ^:icon interaction (icon-xref :interaction))
(def ^:icon join-nodes (icon-xref :join-nodes))
(def ^:icon justify-content-column-around (icon-xref :justify-content-column-around))
(def ^:icon justify-content-column-between (icon-xref :justify-content-column-between))
(def ^:icon justify-content-column-center (icon-xref :justify-content-column-center))
(def ^:icon justify-content-column-end (icon-xref :justify-content-column-end))
(def ^:icon justify-content-column-evenly (icon-xref :justify-content-column-evenly))
(def ^:icon justify-content-column-start (icon-xref :justify-content-column-start))
(def ^:icon justify-content-row-around (icon-xref :justify-content-row-around))
(def ^:icon justify-content-row-between (icon-xref :justify-content-row-between))
(def ^:icon justify-content-row-center (icon-xref :justify-content-row-center))
(def ^:icon justify-content-row-end (icon-xref :justify-content-row-end))
(def ^:icon justify-content-row-evenly (icon-xref :justify-content-row-evenly))
(def ^:icon justify-content-row-start (icon-xref :justify-content-row-start))
(def ^:icon layers (icon-xref :layers))
(def ^:icon library (icon-xref :library))
(def ^:icon locate (icon-xref :locate))
(def ^:icon lock (icon-xref :lock))
(def ^:icon margin-bottom (icon-xref :margin-bottom))
(def ^:icon margin-left (icon-xref :margin-left))
(def ^:icon margin-left-right (icon-xref :margin-left-right))
(def ^:icon margin-right (icon-xref :margin-right))
(def ^:icon margin-top-bottom (icon-xref :margin-top-bottom))
(def ^:icon margin-top (icon-xref :margin-top))
(def ^:icon margin (icon-xref :margin))
(def ^:icon mask (icon-xref :mask))
(def ^:icon masked (icon-xref :masked))
(def ^:icon menu (icon-xref :menu))
(def ^:icon merge-nodes (icon-xref :merge-nodes))
(def ^:icon move (icon-xref :move))
(def ^:icon msg-error (icon-xref :msg-error))
(def ^:icon msg-neutral (icon-xref :msg-neutral))
(def ^:icon msg-success (icon-xref :msg-success))
(def ^:icon msg-warning (icon-xref :msg-warning))
(def ^:icon open-link (icon-xref :open-link))
(def ^:icon padding-bottom (icon-xref :padding-bottom))
(def ^:icon padding-extended (icon-xref :padding-extended))
(def ^:icon padding-left-right (icon-xref :padding-left-right))
(def ^:icon padding-left (icon-xref :padding-left))
(def ^:icon padding-right (icon-xref :padding-right))
(def ^:icon padding-top-bottom (icon-xref :padding-top-bottom))
(def ^:icon padding-top (icon-xref :padding-top))
(def ^:icon path (icon-xref :path))
(def ^:icon pentool (icon-xref :pentool))
(def ^:icon picker (icon-xref :picker))
(def ^:icon pin (icon-xref :pin))
(def ^:icon play (icon-xref :play))
(def ^:icon rectangle (icon-xref :rectangle))
(def ^:icon reload (icon-xref :reload))
(def ^:icon remove-icon (icon-xref :remove))
(def ^:icon rgba-complementary (icon-xref :rgba-complementary))
(def ^:icon rgba (icon-xref :rgba))
(def ^:icon rotation (icon-xref :rotation))
(def ^:icon row-reverse (icon-xref :row-reverse))
(def ^:icon row (icon-xref :row))
(def ^:icon search (icon-xref :search))
(def ^:icon separate-nodes (icon-xref :separate-nodes))
(def ^:icon shown (icon-xref :shown))
(def ^:icon size-horizontal (icon-xref :size-horizontal))
(def ^:icon size-vertical (icon-xref :size-vertical))
(def ^:icon snap-nodes (icon-xref :snap-nodes))
(def ^:icon status-alert (icon-xref :status-alert))
(def ^:icon status-tick (icon-xref :status-tick))
(def ^:icon status-update (icon-xref :status-update))
(def ^:icon status-wrong (icon-xref :status-wrong))
(def ^:icon stroke-arrow (icon-xref :stroke-arrow))
(def ^:icon stroke-circle (icon-xref :stroke-circle))
(def ^:icon stroke-diamond (icon-xref :stroke-diamond))
(def ^:icon stroke-rectangle (icon-xref :stroke-rectangle))
(def ^:icon stroke-rounded (icon-xref :stroke-rounded))
(def ^:icon stroke-size (icon-xref :stroke-size))
(def ^:icon stroke-squared (icon-xref :stroke-squared))
(def ^:icon stroke-triangle (icon-xref :stroke-triangle))
(def ^:icon svg (icon-xref :svg))
(def ^:icon swatches (icon-xref :swatches))
(def ^:icon switch (icon-xref :switch))
(def ^:icon text-align-center (icon-xref :text-align-center))
(def ^:icon text-align-left (icon-xref :text-align-left))
(def ^:icon text-align-right (icon-xref :text-align-right))
(def ^:icon text-auto-height (icon-xref :text-auto-height))
(def ^:icon text-auto-width (icon-xref :text-auto-width))
(def ^:icon text-bottom (icon-xref :text-bottom))
(def ^:icon text-fixed (icon-xref :text-fixed))
(def ^:icon text-justify (icon-xref :text-justify))
(def ^:icon text-letterspacing (icon-xref :text-letterspacing))
(def ^:icon text-lineheight (icon-xref :text-lineheight))
(def ^:icon text-lowercase (icon-xref :text-lowercase))
(def ^:icon text-ltr (icon-xref :text-ltr))
(def ^:icon text-middle (icon-xref :text-middle))
(def ^:icon text-mixed (icon-xref :text-mixed))
(def ^:icon text-palette (icon-xref :text-palette))
(def ^:icon text-paragraph (icon-xref :text-paragraph))
(def ^:icon text-rtl (icon-xref :text-rtl))
(def ^:icon text-stroked (icon-xref :text-stroked))
(def ^:icon text-top (icon-xref :text-top))
(def ^:icon text-underlined (icon-xref :text-underlined))
(def ^:icon text-uppercase (icon-xref :text-uppercase))
(def ^:icon text (icon-xref :text))
(def ^:icon thumbnail (icon-xref :thumbnail))
(def ^:icon tick (icon-xref :tick))
(def ^:icon to-corner (icon-xref :to-corner))
(def ^:icon to-curve (icon-xref :to-curve))
(def ^:icon tree (icon-xref :tree))
(def ^:icon unlock (icon-xref :unlock))
(def ^:icon user (icon-xref :user))
(def ^:icon v2-icon-1 (icon-xref :v2-icon-1))
(def ^:icon v2-icon-2 (icon-xref :v2-icon-2))
(def ^:icon v2-icon-3 (icon-xref :v2-icon-3))
(def ^:icon v2-icon-4 (icon-xref :v2-icon-4))
(def ^:icon vertical-align-items-center-refactor (icon-xref :vertical-align-items-center))
(def ^:icon vertical-align-items-end-refactor (icon-xref :vertical-align-items-end))
(def ^:icon vertical-align-items-start-refactor (icon-xref :vertical-align-items-start))
(def ^:icon view-as-icons-refactor (icon-xref :view-as-icons))
(def ^:icon view-as-list-refactor (icon-xref :view-as-list))
(def ^:icon wrap-refactor (icon-xref :wrap))
(def ^:icon vertical-align-items-center (icon-xref :vertical-align-items-center))
(def ^:icon vertical-align-items-end (icon-xref :vertical-align-items-end))
(def ^:icon vertical-align-items-start (icon-xref :vertical-align-items-start))
(def ^:icon view-as-icons (icon-xref :view-as-icons))
(def ^:icon view-as-list (icon-xref :view-as-list))
(def ^:icon wrap (icon-xref :wrap))
(def ^:icon loader-pencil

4
frontend/src/app/main/ui/onboarding/newsletter.cljs
View file

@ -56,7 +56,7 @@
[:label {:for "newsletter-updates"}
[:span {:class (stl/css-case :global/checked @newsletter-updates)}
(when @newsletter-updates
i/status-tick-refactor)]
i/status-tick)]
(tr "onboarding-v2.newsletter.updates")
[:input {:type "checkbox"
:id "newsletter-updates"
@ -66,7 +66,7 @@
[:label {:for "newsletter-news"}
[:span {:class (stl/css-case :global/checked @newsletter-news)}
(when @newsletter-news
i/status-tick-refactor)]
i/status-tick)]
(tr "onboarding-v2.newsletter.news")
[:input {:type "checkbox"
:id "newsletter-news"

2
frontend/src/app/main/ui/onboarding/questions.cljs
View file

@ -164,7 +164,7 @@
{:label (tr "questions.adobe-xd") :value "adobe-xd" :image "images/form/adobe-xd.png" :area "image3"}
{:label (tr "questions.canva") :value "canva" :image "images/form/canva.png" :area "image4"}
{:label (tr "questions.invision") :value "invision" :image "images/form/invision.png" :area "image5"}
{:label (tr "questions.never-used-one") :area "image6" :value "never-used-a-tool" :icon i/curve-refactor}
{:label (tr "questions.never-used-one") :area "image6" :value "never-used-a-tool" :icon i/curve}
{:label (tr "questions.other") :value "other" :area "other"}]
:name :experience-design-tool
:class (stl/css :image-radio)

10
frontend/src/app/main/ui/onboarding/team_choice.cljs
View file

@ -40,23 +40,23 @@
(tr "onboarding.team-modal.create-team-desc")]
[:ul {:class (stl/css :team-features)}
[:li {:class (stl/css :feature)}
[:span {:class (stl/css :icon)} i/document-refactor]
[:span {:class (stl/css :icon)} i/document]
[:p {:class (stl/css :modal-desc)}
(tr "onboarding.team-modal.create-team-feature-1")]]
[:li {:class (stl/css :feature)}
[:span {:class (stl/css :icon)} i/move-refactor]
[:span {:class (stl/css :icon)} i/move]
[:p {:class (stl/css :modal-desc)}
(tr "onboarding.team-modal.create-team-feature-2")]]
[:li {:class (stl/css :feature)}
[:span {:class (stl/css :icon)} i/tree-refactor]
[:span {:class (stl/css :icon)} i/tree]
[:p {:class (stl/css :modal-desc)}
(tr "onboarding.team-modal.create-team-feature-3")]]
[:li {:class (stl/css :feature)}
[:span {:class (stl/css :icon)} i/user-refactor]
[:span {:class (stl/css :icon)} i/user]
[:p {:class (stl/css :modal-desc)}
(tr "onboarding.team-modal.create-team-feature-4")]]
[:li {:class (stl/css :feature)}
[:span {:class (stl/css :icon)} i/tick-refactor]
[:span {:class (stl/css :icon)} i/tick]
[:p {:class (stl/css :modal-desc)}
(tr "onboarding.team-modal.create-team-feature-5")]]]])

2
frontend/src/app/main/ui/onboarding/templates.cljs
View file

@ -71,7 +71,7 @@
[:div.modal-header
[:div.modal-close-button
{:on-click close-fn
:data-test "close-templates-btn"} i/close-refactor]]
:data-test "close-templates-btn"} i/close]]
[:div.modal-content
[:h3 (tr "onboarding.templates.title")]

2
frontend/src/app/main/ui/settings/access_tokens.cljs
View file

@ -172,7 +172,7 @@
:on-click copy-token}
[:span {:class (stl/css :token-value)} (:token created "")]
[:span {:class (stl/css :icon)}
i/clipboard-refactor]])]]
i/clipboard]])]]
[:div {:class (stl/css :modal-footer)}
[:div {:class (stl/css :action-buttons)}

2
frontend/src/app/main/ui/settings/change_email.cljs
View file

@ -107,7 +107,7 @@
:data-test "change-email-title"}
(tr "modals.change-email.title")]
[:button {:class (stl/css :modal-close-btn)
:on-click on-close} i/close-refactor]]
:on-click on-close} i/close]]
[:div {:class (stl/css :modal-content)}
[:& context-notification

2
frontend/src/app/main/ui/settings/delete_account.cljs
View file

@ -44,7 +44,7 @@
[:h2 {:class (stl/css :modal-title)} (tr "modals.delete-account.title")]
[:button {:class (stl/css :modal-close-btn)
:on-click on-close} i/close-refactor]]
:on-click on-close} i/close]]
[:div {:class (stl/css :modal-content)}
[:& context-notification

6
frontend/src/app/main/ui/viewer.cljs
View file

@ -100,18 +100,18 @@
[:button {:class (stl/css-case :viewer-go-prev true
:left-bar left-bar)
:on-click go-prev-frame}
i/arrow-refactor])
i/arrow])
(when (< (+ index 1) num-frames)
[:button {:class (stl/css-case :viewer-go-next true
:comment-sidebar comment-sidebar
:right-bar right-bar)
:on-click go-next-frame}
i/arrow-refactor])
i/arrow])
[:div {:class (stl/css-case :viewer-bottom true
:left-bar left-bar)}
[:button {:on-click go-first-frame
:class (stl/css :reset-button)}
i/reload-refactor]
i/reload]
[:span {:class (stl/css :counter)}
(str/join " / " [(+ index 1) num-frames])]
[:span]]]))

10
frontend/src/app/main/ui/viewer/comments.cljs
View file

@ -67,7 +67,7 @@
[:div {:class (stl/css :view-options)
:on-click toggle-dropdown}
[:span {:class (stl/css :dropdown-title)} (tr "labels.comments")]
[:span {:class (stl/css :icon-dropdown)} i/arrow-refactor]
[:span {:class (stl/css :icon-dropdown)} i/arrow]
[:& dropdown {:show @show-dropdown?
:on-close hide-dropdown}
@ -80,7 +80,7 @@
:on-click update-mode}
[:span {:class (stl/css :label)} (tr "labels.show-all-comments")]
(when (or (= :all cmode) (nil? cmode))
[:span {:class (stl/css :icon)} i/tick-refactor])]
[:span {:class (stl/css :icon)} i/tick])]
[:li {:class (stl/css-case
:dropdown-element true
@ -90,7 +90,7 @@
[:span {:class (stl/css :label)} (tr "labels.show-your-comments")]
(when (= :yours cmode)
[:span {:class (stl/css :icon)}
i/tick-refactor])]
i/tick])]
[:li {:class (stl/css :separator)}]
@ -102,7 +102,7 @@
[:span {:class (stl/css :label)} (tr "labels.hide-resolved-comments")]
(when (= :pending cshow)
[:span {:class (stl/css :icon)}
i/tick-refactor])]
i/tick])]
[:li {:class (stl/css :separator)}]
@ -113,7 +113,7 @@
:on-click update-options}
[:span {:class (stl/css :label)} (tr "labels.show-comments-list")]
(when show-sidebar?
[:span {:class (stl/css :icon)} i/tick-refactor])]]]]))
[:span {:class (stl/css :icon)} i/tick])]]]]))
(defn- update-thread-position

20
frontend/src/app/main/ui/viewer/header.cljs
View file

@ -86,13 +86,13 @@
[:button {:class (stl/css :zoom-btn)
:on-click on-decrease}
[:span {:class (stl/css :zoom-icon)}
i/remove-refactor]]
i/remove-icon]]
[:p {:class (stl/css :zoom-text)}
(fmt/format-percent zoom)]
[:button {:class (stl/css :zoom-btn)
:on-click on-increase}
[:span {:class (stl/css :zoom-icon)}
i/add-refactor]]]
i/add]]]
[:button {:class (stl/css :reset-btn)
:on-click on-zoom-reset}
(tr "workspace.header.reset-zoom")]]
@ -183,13 +183,13 @@
(when (:can-edit permissions)
[:span {:on-click go-to-workspace
:class (stl/css :edit-btn)}
i/curve-refactor])
i/curve])
[:span {:title (tr "viewer.header.fullscreen")
:class (stl/css-case :fullscreen-btn true
:selected fullscreen?)
:on-click toggle-fullscreen}
i/expand-refactor]
i/expand]
(when (:is-admin permissions)
[:button {:on-click open-share-dialog
@ -238,7 +238,7 @@
:on-click open-dropdown}
[:span {:class (stl/css :breadcrumb-text)}
(dm/str file-name " / " page-name)]
[:span {:class (stl/css :icon)} i/arrow-refactor]
[:span {:class (stl/css :icon)} i/arrow]
[:span "/"]
[:& dropdown {:show @show-dropdown?
:on-close close-dropdown}
@ -252,11 +252,11 @@
[:span {:class (stl/css :label)}
(get-in file [:data :pages-index id :name])]
(when (= page-id id)
[:span {:class (stl/css :icon-check)} i/tick-refactor])])]]]
[:span {:class (stl/css :icon-check)} i/tick])])]]]
[:div {:class (stl/css :current-frame)
:on-click toggle-thumbnails}
[:span {:class (stl/css :frame-name)} frame-name]
[:span {:class (stl/css :icon)} i/arrow-refactor]]]]))
[:span {:class (stl/css :icon)} i/arrow]]]]))
(mf/defc header
[{:keys [project file page frame zoom section permissions index interactions-mode]}]
@ -308,7 +308,7 @@
:class (stl/css-case :mode-zone-btn true
:selected (= section :interactions))
:title (tr "viewer.header.interactions-section" (sc/get-tooltip :open-interactions))}
i/play-refactor]
i/play]
(when (or (:can-edit permissions)
(= (:who-comment permissions) "all"))
@ -317,7 +317,7 @@
:class (stl/css-case :mode-zone-btn true
:selected (= section :comments))
:title (tr "viewer.header.comments-section" (sc/get-tooltip :open-comments))}
i/comments-refactor])
i/comments])
(when (or (= (:type permissions) :membership)
(and (= (:type permissions) :share-link)
@ -326,7 +326,7 @@
:class (stl/css-case :mode-zone-btn true
:selected (= section :inspect))
:title (tr "viewer.header.inspect-section" (sc/get-tooltip :open-inspect))}
i/code-refactor])]
i/code])]
[:& header-options {:section section
:permissions permissions

8
frontend/src/app/main/ui/viewer/inspect/code.cljs
View file

@ -256,7 +256,7 @@
[:span {:class (stl/css-case
:collapsabled-icon true
:rotated collapsed-css?)}
i/arrow-refactor]]
i/arrow]]
[:div {:class (stl/css :code-lang-option)}
"CSS"]
@ -269,7 +269,7 @@
[:div {:class (stl/css :action-btns)}
[:button {:class (stl/css :expand-button)
:on-click on-expand}
i/code-refactor]
i/code]
[:& copy-button {:data copy-css-fn
:class (stl/css :css-copy-btn)
@ -295,7 +295,7 @@
[:span {:class (stl/css-case
:collapsabled-icon true
:rotated collapsed-markup?)}
i/arrow-refactor]]
i/arrow]]
[:& radio-buttons {:selected markup-type
:on-change set-markup
@ -310,7 +310,7 @@
[:div {:class (stl/css :action-btns)}
[:button {:class (stl/css :expand-button)
:on-click on-expand}
i/code-refactor]
i/code]
[:& copy-button {:data copy-html-fn
:class (stl/css :html-copy-btn)

6
frontend/src/app/main/ui/viewer/inspect/exports.cljs
View file

@ -139,7 +139,7 @@
:title (tr "workspace.options.export")
:class (stl/css :title-spacing-export-viewer)}
[:button {:class (stl/css :add-export)
:on-click add-export} i/add-refactor]]]
:on-click add-export} i/add]]]
(cond
(= :multiple exports)
@ -148,7 +148,7 @@
[:div {:class (stl/css :actions)}
[:button {:class (stl/css :action-btn)
:on-click ()}
i/remove-refactor]]]
i/remove-icon]]]
(seq @exports)
[:div {:class (stl/css :element-set-content)}
@ -182,7 +182,7 @@
[:button {:class (stl/css :action-btn)
:on-click (partial delete-export index)}
i/remove-refactor]])])
i/remove-icon]])])
(when (or (= :multiple exports) (seq @exports))
[:button
{:on-click (when-not in-progress? on-download)

6
frontend/src/app/main/ui/viewer/inspect/right_sidebar.cljs
View file

@ -89,7 +89,7 @@
[:div {:class (stl/css :shape-row)}
(if (> (count shapes) 1)
[:*
[:span {:class (stl/css :layers-icon)} i/layers-refactor]
[:span {:class (stl/css :layers-icon)} i/layers]
[:span {:class (stl/css :layer-title)} (tr "inspect.tabs.code.selected.multiple" (count shapes))]]
[:*
[:span {:class (stl/css :shape-icon)}
@ -130,12 +130,12 @@
[:div {:class (stl/css :empty)}
[:div {:class (stl/css :code-info)}
[:span {:class (stl/css :placeholder-icon)}
i/code-refactor]
i/code]
[:span {:class (stl/css :placeholder-label)}
(tr "inspect.empty.select")]]
[:div {:class (stl/css :help-info)}
[:span {:class (stl/css :placeholder-icon)}
i/help-refactor]
i/help]
[:span {:class (stl/css :placeholder-label)}
(tr "inspect.empty.help")]]
[:button {:class (stl/css :more-info-btn)

14
frontend/src/app/main/ui/viewer/interactions.cljs
View file

@ -246,9 +246,9 @@
(when (seq flows)
[:div {:on-click toggle-dropdown
:class (stl/css :view-options)}
[:span {:class (stl/css :icon)} i/play-refactor]
[:span {:class (stl/css :icon)} i/play]
[:span {:class (stl/css :dropdown-title)} (:name current-flow)]
[:span {:class (stl/css :icon-dropdown)} i/arrow-refactor]
[:span {:class (stl/css :icon-dropdown)} i/arrow]
[:& dropdown {:show show-dropdown?
:on-close hide-dropdown}
[:ul {:class (stl/css :dropdown)}
@ -261,7 +261,7 @@
:on-click select-flow}
[:span {:class (stl/css :label)} (:name flow)]
(when (= (:id flow) (:id current-flow))
[:span {:class (stl/css :icon)} i/tick-refactor])])]]])))
[:span {:class (stl/css :icon)} i/tick])])]]])))
(mf/defc interactions-menu
[{:keys [interactions-mode]}]
@ -280,7 +280,7 @@
[:div {:on-click toggle-dropdown
:class (stl/css :view-options)}
[:span {:class (stl/css :dropdown-title)} (tr "viewer.header.interactions")]
[:span {:class (stl/css :icon-dropdown)} i/arrow-refactor]
[:span {:class (stl/css :icon-dropdown)} i/arrow]
[:& dropdown {:show @show-dropdown?
:on-close hide-dropdown}
[:ul {:class (stl/css :dropdown)}
@ -291,7 +291,7 @@
[:span {:class (stl/css :label)} (tr "viewer.header.dont-show-interactions")]
(when (= interactions-mode :hide)
[:span {:class (stl/css :icon)} i/tick-refactor])]
[:span {:class (stl/css :icon)} i/tick])]
[:li {:class (stl/css-case :dropdown-element true
:selected (= interactions-mode :show))
@ -299,7 +299,7 @@
:data-mode "show"}
[:span {:class (stl/css :label)} (tr "viewer.header.show-interactions")]
(when (= interactions-mode :show)
[:span {:class (stl/css :icon)} i/tick-refactor])]
[:span {:class (stl/css :icon)} i/tick])]
@ -310,7 +310,7 @@
[:span {:class (stl/css :label)} (tr "viewer.header.show-interactions-on-click")]
(when (= interactions-mode :show-on-click)
[:span {:class (stl/css :icon)} i/tick-refactor])]]]]))
[:span {:class (stl/css :icon)} i/tick])]]]]))
(defn animate-go-to-frame
[animation current-viewport orig-viewport current-size orig-size wrapper-size]

2
frontend/src/app/main/ui/viewer/login.cljs
View file

@ -75,7 +75,7 @@
[:h2 {:class (stl/css :modal-title)} (tr "labels.continue-with-penpot")]
[:button {:class (stl/css :modal-close-btn)
:title (tr "labels.close")
:on-click close} i/close-refactor]]
:on-click close} i/close]]
[:div {:class (stl/css :modal-content)}

12
frontend/src/app/main/ui/viewer/share_link.cljs
View file

@ -172,7 +172,7 @@
[:button {:class (stl/css :modal-close-button)
:on-click on-close
:title (tr "labels.close")}
i/close-refactor]]
i/close]]
[:div {:class (stl/css :modal-content)}
[:div {:class (stl/css :share-link-section)}
(when (and (not confirm?) (some? current-link))
@ -186,7 +186,7 @@
[:button {:class (stl/css :copy-button)
:title (tr "viewer.header.share.copy-link")
:on-click copy-link}
i/clipboard-refactor]])
i/clipboard]])
[:div {:class (stl/css :hint-wrapper)}
(when (not ^boolean confirm?)
@ -227,7 +227,7 @@
:on-click toggle-perms-visibility}
[:span {:class (stl/css-case :icon true
:rotated perms-visible?)}
i/arrow-refactor]
i/arrow]
(tr "common.share-link.manage-ops")]
(when ^boolean perms-visible?
@ -247,7 +247,7 @@
:class (stl/css-case :global/checked true)}
[:span {:class (stl/css :checked)}
i/status-tick-refactor]
i/status-tick]
(:name current-page)]
@ -265,7 +265,7 @@
:class (stl/css :select-all-label)}
[:span {:class (stl/css-case :global/checked all-selected?)}
(when all-selected?
i/status-tick-refactor)]
i/status-tick)]
(tr "common.share-link.view-all")
[:input {:type "checkbox"
:id "view-all"
@ -283,7 +283,7 @@
[:label {:for (dm/str "page-" id)}
[:span {:class (stl/css-case :global/checked (contains? selected id))}
(when (contains? selected id)
i/status-tick-refactor)]
i/status-tick)]
name
(when (= current-page-id id)
[:div {:class (stl/css :current-tag)} (dm/str " " (tr "common.share-link.current-tag"))])

8
frontend/src/app/main/ui/viewer/thumbnails.cljs
View file

@ -62,9 +62,9 @@
[:div {:class (stl/css :thumbnails-content)}
[:button {:class (stl/css :left-scroll-handler)
:on-click on-left-arrow-click} i/arrow-refactor]
:on-click on-left-arrow-click} i/arrow]
[:button {:class (stl/css :right-scroll-handler)
:on-click on-right-arrow-click} i/arrow-refactor]
:on-click on-right-arrow-click} i/arrow]
[:div {:class (stl/css :thumbnails-list)
:ref container
@ -80,9 +80,9 @@
(tr "labels.num-of-frames" (i18n/c total))]
[:span {:class (stl/css :actions)}
[:button {:class (stl/css :expand-btn)
:on-click on-toggle-expand} i/arrow-refactor]
:on-click on-toggle-expand} i/arrow]
[:button {:class (stl/css :close-btn)
:on-click on-close} i/close-refactor]]])
:on-click on-close} i/close]]])
(mf/defc thumbnail-item
{::mf/wrap [mf/memo

4
frontend/src/app/main/ui/workspace/color_palette.cljs
View file

@ -108,7 +108,7 @@
(when show-arrows?
[:button {:class (stl/css :left-arrow)
:disabled (= offset 0)
:on-click on-left-arrow-click} i/arrow-refactor])
:on-click on-left-arrow-click} i/arrow])
[:div {:class (stl/css :color-palette-content)
:ref container
:on-wheel on-scroll}
@ -128,7 +128,7 @@
(when show-arrows?
[:button {:class (stl/css :right-arrow)
:disabled (= offset max-offset)
:on-click on-right-arrow-click} i/arrow-refactor])]))
:on-click on-right-arrow-click} i/arrow])]))
(defn library->colors [shared-libs selected]
(map #(merge % {:file-id selected})

6
frontend/src/app/main/ui/workspace/color_palette_ctx_menu.cljs
View file

@ -39,7 +39,7 @@
(dm/str "(" (count colors) ")")]]
(when (= selected id)
[:span {:class (stl/css :icon-wrapper)}
i/tick-refactor])]
i/tick])]
[:div {:class (stl/css :color-sample)
:style #js {"--bullet-size" "20px"}}
(for [[i {:keys [color id gradient]}] (map-indexed vector (take 7 colors))]
@ -63,7 +63,7 @@
(when (= selected :file)
[:span {:class (stl/css :icon-wrapper)}
i/tick-refactor])]
i/tick])]
[:div {:class (stl/css :color-sample)
:style #js {"--bullet-size" "20px"}}
(for [[i color] (map-indexed vector (take 7 (vals file-colors)))]
@ -85,7 +85,7 @@
(when (= selected :recent)
[:span {:class (stl/css :icon-wrapper)}
i/tick-refactor])]
i/tick])]
[:div {:class (stl/css :color-sample)
:style #js {"--bullet-size" "20px"}}
(for [[idx color] (map-indexed vector (take 7 (reverse recent-colors)))]

10
frontend/src/app/main/ui/workspace/colorpicker.cljs
View file

@ -264,7 +264,7 @@
[:button {:class (stl/css-case :picker-btn true
:selected picking-color?)
:on-click handle-click-picker}
i/picker-refactor])]
i/picker])]
(when (or (= selected-mode :linear-gradient)
(= selected-mode :radial-gradient))
@ -287,7 +287,7 @@
:class (stl/css-case :global/checked keep-aspect-ratio?)}
[:span {:class (stl/css-case :global/checked keep-aspect-ratio?)}
(when keep-aspect-ratio?
i/status-tick-refactor)]
i/status-tick)]
(tr "media.keep-aspect-ratio")
[:input {:type "checkbox"
:id "keep-aspect-ratio"
@ -312,7 +312,7 @@
:selected @active-color-tab
:collapsable false}
[:& tab-element {:id :ramp :title i/rgba-refactor}
[:& tab-element {:id :ramp :title i/rgba}
(if picking-color?
[:div {:class (stl/css :picker-detail-wrapper)}
[:div {:class (stl/css :center-circle)}]
@ -324,7 +324,7 @@
:on-start-drag on-start-drag
:on-finish-drag on-finish-drag}])]
[:& tab-element {:id :harmony :title i/rgba-complementary-refactor}
[:& tab-element {:id :harmony :title i/rgba-complementary}
(if picking-color?
[:div {:class (stl/css :picker-detail-wrapper)}
[:div {:class (stl/css :center-circle)}]
@ -336,7 +336,7 @@
:on-start-drag on-start-drag
:on-finish-drag on-finish-drag}])]
[:& tab-element {:id :hsva :title i/hsva-refactor}
[:& tab-element {:id :hsva :title i/hsva}
(if picking-color?
[:div {:class (stl/css :picker-detail-wrapper)}
[:div {:class (stl/css :center-circle)}]

4
frontend/src/app/main/ui/workspace/colorpicker/libraries.cljs
View file

@ -109,11 +109,11 @@
(when (= @selected :file)
[:button {:class (stl/css :add-color-btn)
:on-click on-add-library-color}
i/add-refactor])
i/add])
[:button {:class (stl/css :palette-btn)
:on-click toggle-palette}
i/swatches-refactor]
i/swatches]
(for [[idx color] (map-indexed vector @current-colors)]
[:& cb/color-bullet

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

@ -53,19 +53,19 @@
:on-click update-mode}
[:span {:class (stl/css :label)} (tr "labels.show-all-comments")]
[:span {:class (stl/css :icon)} i/tick-refactor]]
[:span {:class (stl/css :icon)} i/tick]]
[:li {:class (stl/css-case :dropdown-item true
:selected (= :yours cmode))
:data-value "yours"
:on-click update-mode}
[:span {:class (stl/css :label)} (tr "labels.show-your-comments")]
[:span {:class (stl/css :icon)} i/tick-refactor]]
[:span {:class (stl/css :icon)} i/tick]]
[:li {:class (stl/css :separator)}]
[:li {:class (stl/css-case :dropdown-item true
:selected (= :pending cshow))
:on-click update-show}
[:span {:class (stl/css :label)} (tr "labels.hide-resolved-comments")]
[:span {:class (stl/css :icon)} i/tick-refactor]]]))
[:span {:class (stl/css :icon)} i/tick]]]))
(mf/defc comments-sidebar
{::mf/props :obj}
@ -125,7 +125,7 @@
[:span (tr "labels.comments")]
[:button {:class (stl/css :close-button)
:on-click close-section}
i/close-refactor]]
i/close]]
[:button {:class (stl/css :mode-dropdown-wrapper)
:on-click toggle-mode-selector}
@ -133,7 +133,7 @@
[:span {:class (stl/css :mode-label)} (case (:mode local)
(nil :all) (tr "labels.show-all-comments")
:yours (tr "labels.show-your-comments"))]
[:div {:class (stl/css :arrow-icon)} i/arrow-refactor]]
[:div {:class (stl/css :arrow-icon)} i/arrow]]
[:& dropdown {:show options?
:on-close #(reset! state* false)}
@ -155,6 +155,6 @@
:key (:page-id tgroup)}])]
[:div {:class (stl/css :thread-group-placeholder)}
[:span {:class (stl/css :placeholder-icon)} i/comments-refactor]
[:span {:class (stl/css :placeholder-icon)} i/comments]
[:span {:class (stl/css :placeholder-label)}
(tr "labels.no-comments-available")]])]]))

4
frontend/src/app/main/ui/workspace/context_menu.cljs
View file

@ -96,7 +96,7 @@
[:span
{:class (stl/css :icon-wrapper)}
(if selected? [:span {:class (stl/css :selected-icon)}
i/tick-refactor]
i/tick]
[:span {:class (stl/css :selected-icon)}])
[:span {:class (stl/css :shape-icon)} icon]]
[:span {:class (stl/css :title)} title]]
@ -115,7 +115,7 @@
:class (stl/css :shortcut-key)} sc])])
(when (> (count children) 1)
[:span {:class (stl/css :submenu-icon)} i/arrow-refactor])
[:span {:class (stl/css :submenu-icon)} i/arrow])
(when (> (count children) 1)
[:ul {:class (stl/css :workspace-context-submenu)

2
frontend/src/app/main/ui/workspace/left_header.cljs
View file

@ -108,7 +108,7 @@
:on-double-click start-editing-name}
file-name])]
(when ^boolean shared?
[:span {:class (stl/css :shared-badge)} i/library-refactor])
[:span {:class (stl/css :shared-badge)} i/library])
[:div {:class (stl/css :menu-section)}
[:& main-menu/menu
{:layout layout

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

@ -230,7 +230,7 @@
:type "button"
:data-library-id (dm/str id)
:on-click unlink-library}
i/detach-refactor]])]]
i/detach]])]]
[:div {:class (stl/css :section)}
[:& title-bar {:collapsable false
@ -240,7 +240,7 @@
[:& search-bar {:on-change change-search-term
:value search-term
:placeholder (tr "workspace.libraries.search-shared-libraries")
:icon (mf/html [:span {:class (stl/css :search-icon)} i/search-refactor])}]]
:icon (mf/html [:span {:class (stl/css :search-icon)} i/search])}]]
(if (seq shared-libraries)
[:div {:class (stl/css :section-list-shared)}
@ -261,7 +261,7 @@
[:button {:class (stl/css :item-button-shared)
:data-library-id (dm/str id)
:on-click link-library}
i/add-refactor]])]
i/add]])]
(when (empty? shared-libraries)
[:div {:class (stl/css :section-list-empty)}
@ -493,7 +493,7 @@
[:div {:class (stl/css :modal-dialog)}
[:button {:class (stl/css :close)
:on-click close-dialog}
i/close-refactor]
i/close]
[:div {:class (stl/css :modal-title)}
"Libraries"]
[:div {:class (stl/css :modal-content)}

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

@ -654,7 +654,7 @@
[:*
[:div {:on-click open-menu
:class (stl/css :menu-btn)} i/menu-refactor]
:class (stl/css :menu-btn)} i/menu]
[:& dropdown-menu {:show show-menu?
:on-close close-menu
@ -669,7 +669,7 @@
:data-test "file"
:id "file-menu-file"}
[:span {:class (stl/css :item-name)} (tr "workspace.header.menu.option.file")]
[:span {:class (stl/css :open-arrow)} i/arrow-refactor]]
[:span {:class (stl/css :open-arrow)} i/arrow]]
[:> dropdown-menu-item* {:class (stl/css :menu-item)
:on-click on-menu-click
@ -680,7 +680,7 @@
:data-test "edit"
:id "file-menu-edit"}
[:span {:class (stl/css :item-name)} (tr "workspace.header.menu.option.edit")]
[:span {:class (stl/css :open-arrow)} i/arrow-refactor]]
[:span {:class (stl/css :open-arrow)} i/arrow]]
[:> dropdown-menu-item* {:class (stl/css :menu-item)
:on-click on-menu-click
@ -691,7 +691,7 @@
:data-test "view"
:id "file-menu-view"}
[:span {:class (stl/css :item-name)} (tr "workspace.header.menu.option.view")]
[:span {:class (stl/css :open-arrow)} i/arrow-refactor]]
[:span {:class (stl/css :open-arrow)} i/arrow]]
[:> dropdown-menu-item* {:class (stl/css :menu-item)
:on-click on-menu-click
@ -702,7 +702,7 @@
:data-test "preferences"
:id "file-menu-preferences"}
[:span {:class (stl/css :item-name)} (tr "workspace.header.menu.option.preferences")]
[:span {:class (stl/css :open-arrow)} i/arrow-refactor]]
[:span {:class (stl/css :open-arrow)} i/arrow]]
[:div {:class (stl/css :separator)}]
[:> dropdown-menu-item* {:class (stl/css-case :menu-item true)
:on-click on-menu-click
@ -713,7 +713,7 @@
:data-test "help-info"
:id "file-menu-help-info"}
[:span {:class (stl/css :item-name)} (tr "workspace.header.menu.option.help-info")]
[:span {:class (stl/css :open-arrow)} i/arrow-refactor]]]
[:span {:class (stl/css :open-arrow)} i/arrow]]]
(case sub-menu
:file

2
frontend/src/app/main/ui/workspace/nudge.cljs
View file

@ -46,7 +46,7 @@
[:div {:class (stl/css :modal-header)}
[:h2 {:class (stl/css :modal-title)} (tr "modals.nudge-title")]
[:button {:class (stl/css :modal-close-btn)
:on-click on-close} i/close-refactor]]
:on-click on-close} i/close]]
[:div {:class (stl/css :modal-content)}
[:div {:class (stl/css :input-wrapper)}
[:label {:class (stl/css :modal-msg)

6
frontend/src/app/main/ui/workspace/palette.cljs
View file

@ -162,7 +162,7 @@
:class (stl/css-case :palette-btn true
:selected color-palette?)
:on-click on-select-color-palette}
i/drop-refactor]]
i/drop-icon]]
[:li {:class (stl/css :palette-item)}
[:button {:title (tr "workspace.toolbar.text-palette" (sc/get-tooltip :toggle-textpalette))
@ -170,14 +170,14 @@
:class (stl/css-case :palette-btn true
:selected text-palette?)
:on-click on-select-text-palette}
i/text-palette-refactor]]]
i/text-palette]]]
(if any-palette?
[:*
[:button {:class (stl/css :palette-actions)
:on-click #(swap! state* update :show-menu not)}
i/menu-refactor]
i/menu]
[:div {:class (stl/css :palette)
:ref container}
(when text-palette?

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

@ -40,25 +40,25 @@
[:div {:class (stl/css-case :status-icon true
:pending-status true)
:title (tr "workspace.header.unsaved")}
i/status-alert-refactor]
i/status-alert]
:saving
[:div {:class (stl/css-case :status-icon true
:saving-status true)
:title (tr "workspace.header.saving")}
i/status-update-refactor]
i/status-update]
:saved
[:div {:class (stl/css-case :status-icon true
:saved-status true)
:title (tr "workspace.header.saved")}
i/status-tick-refactor]
i/status-tick]
:error
[:div {:class (stl/css-case :status-icon true
:error-status true)
:title "There was an error saving the data. Please refresh if this persists."}
i/status-wrong-refactor]
i/status-wrong]
nil)]))
@ -112,12 +112,12 @@
[:button {:class (stl/css :zoom-btn)
:on-click on-decrease}
[:span {:class (stl/css :zoom-icon)}
i/remove-refactor]]
i/remove-icon]]
[: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-refactor]]]
i/add]]]
[:button {:class (stl/css :reset-btn)
:on-click on-zoom-reset}
(tr "workspace.header.reset-zoom")]]
@ -223,7 +223,7 @@
:selected (= selected-drawtool :comments))
:on-click toggle-comments
:data-tool "comments"}
i/comments-refactor]]
i/comments]]
(when-not ^boolean read-only?
[:div {:class (stl/css :history-section)}
@ -233,10 +233,10 @@
:class (stl/css-case :selected (contains? layout :document-history)
:history-button true)
:on-click toggle-history}
i/history-refactor]])
i/history]])
[:a {:class (stl/css :viewer-btn)
:title (tr "workspace.header.viewer" (sc/get-tooltip :open-viewer))
:on-click nav-to-viewer}
i/play-refactor]]))
i/play]]))

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

@ -159,7 +159,7 @@
[:button {:class (stl/css :libraries-button)
:on-click show-libraries-dialog}
[:span {:class (stl/css :libraries-icon)}
i/library-refactor]
i/library]
(tr "workspace.assets.libraries")])
[:div {:class (stl/css :search-wrapper)}
@ -170,7 +170,7 @@
{:on-click on-open-menu
:class (stl/css-case :section-button true
:opened menu-open?)}
i/filter-refactor]]
i/filter-icon]]
[:& context-menu-a11y
{:on-close on-menu-close
:selectable true
@ -186,8 +186,8 @@
[:button {:class (stl/css :sort-button)
:on-click toggle-ordering}
(if reverse-sort?
i/asc-sort-refactor
i/desc-sort-refactor)]]]
i/asc-sort
i/desc-sort)]]]
[:& (mf/provider cmm/assets-filters) {:value filters}
[:& (mf/provider cmm/assets-toggle-ordering) {:value toggle-ordering}

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

@ -485,7 +485,7 @@
(when-not read-only?
[:button {:class (stl/css :assets-btn)
:on-click add-color-clicked}
i/add-refactor])])
i/add])])
[:& cmm/asset-section-block {:role :content}

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

@ -123,10 +123,10 @@
{::mf/wrap-props false}
[{:keys [section]}]
(case section
:colors i/drop-refactor
:components i/component-refactor
:typographies i/text-palette-refactor
i/add-refactor))
:colors i/drop-icon
:components i/component
:typographies i/text-palette
i/add))
(mf/defc asset-section
{::mf/wrap-props false}

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

@ -517,17 +517,17 @@
[:& radio-buttons {:selected (if listing-thumbs? "grid" "list")
:on-change toggle-list-style
:name "listing-style"}
[:& radio-button {:icon i/view-as-list-refactor
[:& radio-button {:icon i/view-as-list
:value "list"
:id "opt-list"}]
[:& radio-button {:icon i/flex-grid-refactor
[:& radio-button {:icon i/flex-grid
:value "grid"
:id "opt-grid"}]]])
(when (and components-v2 (not read-only?) local?)
[:div {:on-click add-component
:class (stl/css :add-component)}
i/add-refactor
i/add
[:& file-uploader {:accept cm/str-image-types
:multi true
:ref input-ref

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

@ -70,7 +70,7 @@
:href (str "#" url)
:target "_blank"
:on-click dom/stop-propagation}
i/open-link-refactor]])]]))
i/open-link]])]]))
(mf/defc file-library-content
{::mf/wrap-props false}
@ -290,7 +290,7 @@
(not ^boolean show-typography?))
[:div {:class (stl/css :asset-title)}
[:span {:class (stl/css :no-found-icon)}
i/search-refactor]
i/search]
[:span {:class (stl/css :no-found-text)}
(tr "workspace.assets.not-found")]])]))

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

@ -390,7 +390,7 @@
(when (and (not components-v2) (not read-only?))
[:button {:class (stl/css :assets-btn)
:on-click add-graphic}
i/add-refactor
i/add
[:& file-uploader {:accept cm/str-image-types
:multi true
:ref input-ref

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

@ -131,7 +131,7 @@
(tr "workspace.assets.create-group")
(tr "workspace.assets.rename-group"))]
[:button {:class (stl/css :modal-close-btn)
:on-click on-close} i/close-refactor]]
:on-click on-close} i/close]]
[:div {:class (stl/css :modal-content)}
[:& fm/form {:form form :on-submit on-accept}

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

@ -403,7 +403,7 @@
(when-not read-only?
[:button {:class (stl/css :assets-btn)
:on-click add-typography}
i/add-refactor])])
i/add])])
[:& cmm/asset-section-block {:role :content}
[:& typographies-group {:file-id file-id

2
frontend/src/app/main/ui/workspace/sidebar/collapsable_button.cljs
View file

@ -24,4 +24,4 @@
[:button {:class (stl/css :collapsed-button)
:on-click on-click
:aria-label (tr "workspace.sidebar.expand")}
i/arrow-refactor]]]))
i/arrow]]]))

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

@ -35,14 +35,14 @@
[:div {:class (stl/css :panel-title)}
[:span "Debugging tools"]
[:div {:class (stl/css :close-button) :on-click handle-close}
i/close-refactor]]
i/close]]
[:div {:class (stl/css :debug-panel-inner)}
(for [option (sort-by d/name dbg/options)]
[:div {:class (stl/css :checkbox-wrapper)}
[:span {:class (stl/css-case :checkbox-icon true :global/checked (dbg/enabled? option))
:on-click #(on-toggle-enabled % option)}
(when (dbg/enabled? option) i/status-tick-refactor)]
(when (dbg/enabled? option) i/status-tick)]
[:input {:type "checkbox"
:id (d/name option)

2
frontend/src/app/main/ui/workspace/sidebar/debug_shape_info.cljs
View file

@ -129,7 +129,7 @@
[:span "Debug"]
[:div {:class (stl/css :close-button)
:on-click #(dbg/disable! :shape-panel)}
i/close-refactor]]
i/close]]
(if (empty? selected)
[:div {:class (stl/css :attrs-container)} "No shapes selected"]

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

@ -150,20 +150,20 @@
(defn entry->icon [{:keys [type]}]
(case type
:page i/document-refactor
:shape i/svg-refactor
:rect i/rectangle-refactor
:circle i/elipse-refactor
:text i/text-refactor
:path i/path-refactor
:frame i/board-refactor
:group i/group-refactor
:color i/drop-refactor
:typography i/text-palette-refactor
:component i/component-refactor
:media i/img-refactor
:image i/img-refactor
i/svg-refactor))
:page i/document
:shape i/svg
:rect i/rectangle
:circle i/elipse
:text i/text
:path i/path
:frame i/board
:group i/group
:color i/drop-icon
:typography i/text-palette
:component i/component
:media i/img
:image i/img
i/svg))
(defn is-shape? [type]
(contains? #{:shape :rect :circle :text :path :frame :group} type))
@ -315,7 +315,7 @@
:button-opened @show-detail?)
:on-click toggle-show-detail
:data-has-entry (dm/str (not (nil? (:detail entry))))}
i/arrow-refactor])]
i/arrow])]
(when @show-detail?
[:& history-entry-details {:entry entry}])]))
@ -334,10 +334,10 @@
[:span (t locale "workspace.undo.title")]
[:div {:class (stl/css :close-button)
:on-click toggle-history}
i/close-refactor]]
i/close]]
(if (empty? entries)
[:div {:class (stl/css :history-entry-empty)}
[:div {:class (stl/css :history-entry-empty-icon)} i/history-refactor]
[:div {:class (stl/css :history-entry-empty-icon)} i/history]
[:div {:class (stl/css :history-entry-empty-msg)} (t locale "workspace.undo.empty")]]
[:ul {:class (stl/css :history-entries)}
(for [[idx-entry entry] (->> entries (map-indexed vector) reverse)] #_[i (range 0 10)]

6
frontend/src/app/main/ui/workspace/sidebar/layer_item.cljs
View file

@ -93,7 +93,7 @@
:toggle-content true
:inverse expanded?)
:on-click on-toggle-collapse}
i/arrow-refactor])
i/arrow])
[:div {:class (stl/css :icon-shape)
:on-double-click on-zoom-to-selected}
@ -142,7 +142,7 @@
(tr "workspace.shape.menu.show")
(tr "workspace.shape.menu.hide"))
:on-click on-toggle-visibility}
(if ^boolean hidden? i/hide-refactor i/shown-refactor)]
(if ^boolean hidden? i/hide i/shown)]
[:button {:class (stl/css-case
:block-element true
:selected blocked?)
@ -150,7 +150,7 @@
(tr "workspace.shape.menu.unlock")
(tr "workspace.shape.menu.lock"))
:on-click on-toggle-blocking}
(if ^boolean blocked? i/lock-refactor i/unlock-refactor)]])]]
(if ^boolean blocked? i/lock i/unlock)]])]]
children]))

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

@ -283,11 +283,11 @@
:filter-button true
:opened show-menu?
:active active?)}
i/filter-refactor]]
i/filter-icon]]
[:button {:class (stl/css :close-search)
:on-click toggle-search}
i/close-refactor]]
i/close]]
[:div {:class (stl/css :active-filters)}
(for [fkey current-filters]
@ -314,7 +314,7 @@
[:span {:class (stl/css :layer-filter-name)}
name]
[:span {:class (stl/css :layer-filter-close)}
i/close-small-refactor]]))]
i/close-small]]))]
(when ^boolean show-menu?
[:ul {:class (stl/css :filters-container)}
@ -324,13 +324,13 @@
:on-click add-filter}
[:div {:class (stl/css :filter-menu-item-name-wrapper)}
[:span {:class (stl/css :filter-menu-item-icon)}
i/board-refactor]
i/board]
[:span {:class (stl/css :filter-menu-item-name)}
(tr "workspace.sidebar.layers.frames")]]
(when (contains? current-filters :frame)
[:span {:class (stl/css :filter-menu-item-tick)}
i/tick-refactor])]
i/tick])]
[:li {:class (stl/css-case :filter-menu-item true
:selected (contains? current-filters :group))
@ -338,13 +338,13 @@
:on-click add-filter}
[:div {:class (stl/css :filter-menu-item-name-wrapper)}
[:span {:class (stl/css :filter-menu-item-icon)}
i/group-refactor]
i/group]
[:span {:class (stl/css :filter-menu-item-name)}
(tr "workspace.sidebar.layers.groups")]]
(when (contains? current-filters :group)
[:span {:class (stl/css :filter-menu-item-tick)}
i/tick-refactor])]
i/tick])]
[:li {:class (stl/css-case :filter-menu-item true
:selected (contains? current-filters :mask))
@ -352,13 +352,13 @@
:on-click add-filter}
[:div {:class (stl/css :filter-menu-item-name-wrapper)}
[:span {:class (stl/css :filter-menu-item-icon)}
i/mask-refactor]
i/mask]
[:span {:class (stl/css :filter-menu-item-name)}
(tr "workspace.sidebar.layers.masks")]]
(when (contains? current-filters :mask)
[:span {:class (stl/css :filter-menu-item-tick)}
i/tick-refactor])]
i/tick])]
[:li {:class (stl/css-case :filter-menu-item true
:selected (contains? current-filters :component))
@ -366,13 +366,13 @@
:on-click add-filter}
[:div {:class (stl/css :filter-menu-item-name-wrapper)}
[:span {:class (stl/css :filter-menu-item-icon)}
i/component-refactor]
i/component]
[:span {:class (stl/css :filter-menu-item-name)}
(tr "workspace.sidebar.layers.components")]]
(when (contains? current-filters :component)
[:span {:class (stl/css :filter-menu-item-tick)}
i/tick-refactor])]
i/tick])]
[:li {:class (stl/css-case :filter-menu-item true
:selected (contains? current-filters :text))
@ -380,13 +380,13 @@
:on-click add-filter}
[:div {:class (stl/css :filter-menu-item-name-wrapper)}
[:span {:class (stl/css :filter-menu-item-icon)}
i/text-refactor]
i/text]
[:span {:class (stl/css :filter-menu-item-name)}
(tr "workspace.sidebar.layers.texts")]]
(when (contains? current-filters :text)
[:span {:class (stl/css :filter-menu-item-tick)}
i/tick-refactor])]
i/tick])]
[:li {:class (stl/css-case :filter-menu-item true
:selected (contains? current-filters :image))
@ -394,13 +394,13 @@
:on-click add-filter}
[:div {:class (stl/css :filter-menu-item-name-wrapper)}
[:span {:class (stl/css :filter-menu-item-icon)}
i/img-refactor]
i/img]
[:span {:class (stl/css :filter-menu-item-name)}
(tr "workspace.sidebar.layers.images")]]
(when (contains? current-filters :image)
[:span {:class (stl/css :filter-menu-item-tick)}
i/tick-refactor])]
i/tick])]
[:li {:class (stl/css-case :filter-menu-item true
:selected (contains? current-filters :shape))
@ -408,19 +408,19 @@
:on-click add-filter}
[:div {:class (stl/css :filter-menu-item-name-wrapper)}
[:span {:class (stl/css :filter-menu-item-icon)}
i/path-refactor]
i/path]
[:span {:class (stl/css :filter-menu-item-name)}
(tr "workspace.sidebar.layers.shapes")]]
(when (contains? current-filters :shape)
[:span {:class (stl/css :filter-menu-item-tick)}
i/tick-refactor])]])]
i/tick])]])]
[:div {:class (stl/css :tool-window-bar)}
[:& title-bar {:collapsable false
:title (:name page)
:on-btn-click toggle-search
:btn-children i/search-refactor}]]))]))
:btn-children i/search}]]))]))
(defn- on-scroll
@ -507,7 +507,7 @@
[:button {:class (stl/css :focus-title)
:on-click toogle-focus-mode}
[:span {:class (stl/css :back-button)}
i/arrow-refactor]
i/arrow]
[:div {:class (stl/css :focus-name)}
(or title (tr "workspace.sidebar.layers"))]

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

@ -50,7 +50,7 @@
:title (tr "workspace.align.hleft" (sc/get-tooltip :align-left))
:data-value "hleft"
:on-click align-objects}
i/align-left-refactor]
i/align-left]
[:button {:class (stl/css-case :align-button true
:disabled disabled-align)
@ -58,7 +58,7 @@
:title (tr "workspace.align.hcenter" (sc/get-tooltip :align-hcenter))
:data-value "hcenter"
:on-click align-objects}
i/align-horizontal-center-refactor]
i/align-horizontal-center]
[:button {:class (stl/css-case :align-button true
:disabled disabled-align)
@ -66,7 +66,7 @@
:title (tr "workspace.align.hright" (sc/get-tooltip :align-right))
:data-value "hright"
:on-click align-objects}
i/align-right-refactor]
i/align-right]
[:button {:class (stl/css-case :align-button true
:disabled disabled-distribute)
@ -74,7 +74,7 @@
:title (tr "workspace.align.hdistribute" (sc/get-tooltip :h-distribute))
:data-value "horizontal"
:on-click distribute-objects}
i/distribute-horizontally-refactor]]
i/distribute-horizontally]]
[:div {:class (stl/css :align-group)}
[:button {:class (stl/css-case :align-button true
@ -83,7 +83,7 @@
:title (tr "workspace.align.vtop" (sc/get-tooltip :align-top))
:data-value "vtop"
:on-click align-objects}
i/align-top-refactor]
i/align-top]
[:button {:class (stl/css-case :align-button true
:disabled disabled-align)
@ -91,7 +91,7 @@
:title (tr "workspace.align.vcenter" (sc/get-tooltip :align-vcenter))
:data-value "vcenter"
:on-click align-objects}
i/align-vertical-center-refactor]
i/align-vertical-center]
[:button {:class (stl/css-case :align-button true
:disabled disabled-align)
@ -99,7 +99,7 @@
:title (tr "workspace.align.vbottom" (sc/get-tooltip :align-bottom))
:data-value "vbottom"
:on-click align-objects}
i/align-bottom-refactor]
i/align-bottom]
[:button {:title (tr "workspace.align.vdistribute" (sc/get-tooltip :v-distribute))
:class (stl/css-case :align-button true
@ -107,5 +107,5 @@
:disabled disabled-distribute
:data-value "vertical"
:on-click distribute-objects}
i/distribute-vertical-spacing-refactor]]])))
i/distribute-vertical-spacing]]])))

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

@ -87,7 +87,7 @@
:class (stl/css-case :title-spacing-blur (not has-value?))}
(when-not has-value?
[:button {:class (stl/css :add-blur)
:on-click handle-add} i/add-refactor])]]
:on-click handle-add} i/add])]]
(when (and open? has-value?)
[:div {:class (stl/css :element-set-content)}
[:div {:class (stl/css-case :first-row true
@ -96,17 +96,17 @@
[:button {:class (stl/css-case :show-more true
:selected more-options?)
:on-click toggle-more-options}
i/menu-refactor]
i/menu]
[: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-refactor
i/shown-refactor)]
i/hide
i/shown)]
[:button {:class (stl/css :action-btn)
:on-click handle-delete} i/remove-refactor]]]
:on-click handle-delete} i/remove-icon]]]
(when more-options?
[:div {:class (stl/css :second-row)}
[:label {:class (stl/css :label)

8
frontend/src/app/main/ui/workspace/sidebar/options/menus/bool.cljs
View file

@ -64,22 +64,22 @@
:class (stl/css :boolean-radio-btn)
:on-change set-bool
:name "bool-options"}
[:& radio-button {:icon i/boolean-union-refactor
[:& radio-button {:icon i/boolean-union
:value "union"
:disabled disabled-bool-btns
:title (str (tr "workspace.shape.menu.union") " (" (sc/get-tooltip :bool-union) ")")
:id "bool-opt-union"}]
[:& radio-button {:icon i/boolean-difference-refactor
[:& radio-button {:icon i/boolean-difference
:value "difference"
:disabled disabled-bool-btns
:title (str (tr "workspace.shape.menu.difference") " (" (sc/get-tooltip :bool-difference) ")")
:id "bool-opt-differente"}]
[:& radio-button {:icon i/boolean-intersection-refactor
[:& radio-button {:icon i/boolean-intersection
:value "intersection"
:disabled disabled-bool-btns
:title (str (tr "intersection") " (" (sc/get-tooltip :bool-intersection) ")")
:id "bool-opt-intersection"}]
[:& radio-button {:icon i/boolean-exclude-refactor
[:& radio-button {:icon i/boolean-exclude
:value "exclude"
:disabled disabled-bool-btns
:title (str (tr "exclude") " (" (sc/get-tooltip :bool-exclude) ")")

29
frontend/src/app/main/ui/workspace/sidebar/options/menus/component.cljs
View file

@ -168,7 +168,7 @@
[:span {:class (stl/css-case
:icon-arrow true
:expanded expanded?)}
i/arrow-refactor]
i/arrow]
[:span {:class (stl/css :annotation-text)}
(tr "workspace.options.component.annotation")]])
@ -186,21 +186,21 @@
:icon true
:icon-tick true
:hidden invalid-text?)}
i/tick-refactor]
i/tick]
[:div {:class (stl/css :icon :icon-cross)
:title (tr "labels.discard")
:on-click on-discard}
i/close-refactor]]
i/close]]
[:*
[:div {:class (stl/css :icon :icon-edit)
:title (tr "labels.edit")
:on-click on-edit}
i/curve-refactor]
i/curve]
[:div {:class (stl/css :icon :icon-trash)
:title (tr "labels.delete")
:on-click on-delete-annotation}
i/delete-refactor]]))]]
i/delete]]))]]
[:div {:class (stl/css-case :hidden (not expanded?))}
[:div {:class (stl/css :grow-wrap)}
@ -263,7 +263,7 @@
(cfh/last-path group-name)]]
[:span {:class (stl/css :arrow-icon)}
i/arrow-refactor]]))
i/arrow]]))
(def ^:private ref:swap-libraries
(letfn [(get-libraries [state]
@ -440,7 +440,8 @@
:id "swap-component-search-filter"
:value (:term filters)
:placeholder (str (tr "labels.search") " " (get-in libraries [current-library-id :name]))
:icon (mf/html [:span {:class (stl/css :search-icon)} i/search-refactor])}]]
:icon (mf/html [:span {:class (stl/css :search-icon)}
i/search])}]]
[:& select {:class (stl/css :select-library)
:default-value current-library-id
@ -456,10 +457,10 @@
:selected (if (:listing-thumbs? filters) "grid" "list")
:on-change toggle-list-style
:name "swap-listing-style"}
[:& radio-button {:icon i/view-as-list-refactor
[:& radio-button {:icon i/view-as-list
:value "list"
:id "swap-opt-list"}]
[:& radio-button {:icon i/flex-grid-refactor
[:& radio-button {:icon i/flex-grid
:value "grid"
:id "swap-opt-grid"}]]]]
@ -467,7 +468,7 @@
[:button {:class (stl/css :component-path)
:on-click on-go-back
:title filter-path-with-dots}
[:span {:class (stl/css :back-arrow)} i/arrow-refactor]
[:span {:class (stl/css :back-arrow)} i/arrow]
(when-not (= "" filter-path-with-dots)
[:span {:class (stl/css :path-name)}
(dm/str "\u00A0\u2022\u00A0" filter-path-with-dots)])
@ -590,7 +591,7 @@
(if swap-opened?
[:button {:class (stl/css :title-back)
:on-click on-component-back}
[:span {:class (stl/css :icon-back)} i/arrow-refactor]
[:span {:class (stl/css :icon-back)} i/arrow]
[:span (tr "workspace.options.component")]]
[:& title-bar {:collapsable true
@ -615,8 +616,8 @@
[:span {:class (stl/css :component-icon)}
(if main-instance?
i/component-refactor
i/copy-refactor)]
i/component
i/component-copy)]
[:div {:class (stl/css :name-wrapper)}
[:div {:class (stl/css :component-name)}
@ -633,7 +634,7 @@
[:button {:class (stl/css-case :menu-btn true
:selected menu-open?)
:on-click on-menu-click}
i/menu-refactor]
i/menu]
[:& component-ctx-menu {:show menu-open?
:on-close on-menu-close

2
frontend/src/app/main/ui/workspace/sidebar/options/menus/constraints.cljs
View file

@ -225,7 +225,7 @@
[:span {:class (stl/css-case :check-mark true
:checked (:fixed-scroll values))}
(when (:fixed-scroll values)
i/status-tick-refactor)]
i/status-tick)]
(tr "workspace.options.constraints.fix-when-scrolling")
[:input {:type "checkbox"
:id "fixed-on-scroll"

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

@ -177,7 +177,8 @@
: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-refactor]]]
:on-click add-export}
i/add]]]
(when open?
[:div {:class (stl/css :element-set-content)}
@ -188,7 +189,7 @@
[:div {:class (stl/css :actions)}
[:button {:class (stl/css :action-btn)
:on-click on-remove-all}
i/remove-refactor]]]
i/remove-icon]]]
(seq exports)
[:*
@ -222,7 +223,7 @@
[:button {:class (stl/css :action-btn)
:on-click (partial delete-export index)}
i/remove-refactor]])])
i/remove-icon]])])
(when (or (= :multiple exports) (seq exports))
[:button

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

@ -145,7 +145,7 @@
(when (and (not disable-remove?) (not (= :multiple fills)))
[:button {:class (stl/css :add-fill)
:on-click on-add} i/add-refactor])]]
:on-click on-add} i/add])]]
(when open?
[:div {:class (stl/css :element-content)}
@ -156,7 +156,7 @@
(tr "settings.multiple")]
[:button {:on-click on-remove-all
:class (stl/css :remove-btn)}
i/remove-refactor]]
i/remove-icon]]
(seq fills)
[:& h/sortable-container {}
@ -187,7 +187,7 @@
[:span {:class (stl/css-case :check-mark true
:checked (not hide-fill-on-export?))}
(when (not hide-fill-on-export?)
i/status-tick-refactor)]
i/status-tick)]
(tr "workspace.options.show-fill-on-export")
[:input {:type "checkbox"
:id "show-fill-on-export"

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

@ -148,7 +148,7 @@
[:button {:class (stl/css-case :show-options true
:selected open?)
:on-click toggle-advanced-options}
i/menu-refactor]
i/menu]
[:div {:class (stl/css :type-select-wrapper)}
[:& select
{:class (stl/css :grid-type-select)
@ -179,10 +179,10 @@
[:div {:class (stl/css :actions)}
[:button {:class (stl/css :action-btn)
:on-click handle-toggle-visibility}
(if display i/shown-refactor i/hide-refactor)]
(if display i/shown i/hide)]
[:button {:class (stl/css :action-btn)
:on-click on-remove}
i/remove-refactor]]]
i/remove-icon]]]
(when (:display grid)
[:& advanced-options {:class (stl/css :grid-advanced-options)
@ -201,7 +201,7 @@
[:button {:class (stl/css-case :show-more-options true
:selected show-more-options?)
:on-click toggle-more-options}
i/menu-refactor]]
i/menu]]
(when show-more-options?
[:div {:class (stl/css :second-row)}
[:button {:class (stl/css-case :btn-options true
@ -258,7 +258,8 @@
[:div {:class (stl/css :gutter)
:title (tr "workspace.options.grid.params.gutter")}
[:span {:class (stl/css-case :icon true
:rotated (= type :row))} i/gap-horizontal-refactor]
:rotated (= type :row))}
i/gap-horizontal]
[:> numeric-input* {:placeholder "0"
:on-change (handle-change :params :gutter)
:nillable true
@ -268,7 +269,8 @@
[:div {:class (stl/css :margin)
:title (tr "workspace.options.grid.params.margin")}
[:span {:class (stl/css-case :icon true
:rotated (= type :column))} i/grid-margin-refactor]
:rotated (= type :column))}
i/grid-margin]
[:> numeric-input* {:placeholder "0"
:on-change (handle-change :params :margin)
:nillable true
@ -279,7 +281,7 @@
:selected show-more-options?)
:on-click toggle-more-options
:disabled is-default}
i/menu-refactor]
i/menu]
(when show-more-options?
[:div {:class (stl/css :more-options)}
[:button {:class (stl/css :option-btn)
@ -309,7 +311,7 @@
[:button {:on-click handle-create-grid
:class (stl/css :add-grid)}
i/add-refactor]]
i/add]]
(when (and open? (seq frame-grids))
[:div {:class (stl/css :element-set-content)}

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

@ -51,22 +51,30 @@
:allow-empty true
:name (dm/str "flex-align-items-" type)}
[:& radio-button {:value "start"
:icon (if is-col? i/align-self-row-left-refactor i/align-self-column-top-refactor)
:icon (if is-col?
i/align-self-row-left
i/align-self-column-top)
:title "Align self start"
:id (dm/str "align-self-start-" type)}]
[:& radio-button {:value "center"
:icon (if is-col? i/align-self-row-center-refactor i/align-self-column-center-refactor)
:icon (if is-col?
i/align-self-row-center
i/align-self-column-center)
:title "Align self center"
:id (dm/str "align-self-center-" type)}]
[:& radio-button {:value "end"
:icon (if is-col? i/align-self-row-right-refactor i/align-self-column-bottom-refactor)
:icon (if is-col?
i/align-self-row-right
i/align-self-column-bottom)
:title "Align self end"
:id (dm/str "align-self-end-" type)}]
[:& radio-button {:value "stretch"
:icon (if is-col? i/align-self-row-stretch-refactor i/align-self-column-stretch-refactor)
:icon (if is-col?
i/align-self-row-stretch
i/align-self-column-stretch)
:title "Align self stretch"
:id (dm/str "align-self-stretch-" type)}]]]))
@ -200,7 +208,7 @@
(when (and (not multiple?) (= :auto cell-mode))
[:div {:class (stl/css :row)}
[:div {:class (stl/css :grid-coord-group)}
[:span {:class (stl/css :icon)} i/flex-vertical-refactor]
[:span {:class (stl/css :icon)} i/flex-vertical]
[:div {:class (stl/css :coord-input)}
[:> numeric-input*
{:placeholder "--"
@ -210,7 +218,7 @@
:value column}]]]
[:div {:class (stl/css :grid-coord-group)}
[:span {:class (stl/css :icon)} i/flex-horizontal-refactor]
[:span {:class (stl/css :icon)} i/flex-horizontal]
[:div {:class (stl/css :coord-input)}
[:> numeric-input*
{:placeholder "--"
@ -222,7 +230,7 @@
(when (and (not multiple?) (or (= :manual cell-mode) (= :area cell-mode)))
[:div {:class (stl/css :row)}
[:div {:class (stl/css :grid-coord-group)}
[:span {:class (stl/css :icon)} i/flex-vertical-refactor]
[:span {:class (stl/css :icon)} i/flex-vertical]
[:div {:class (stl/css :coord-input)}
[:> numeric-input*
{:placeholder "--"
@ -237,7 +245,7 @@
:value column-end}]]]
[:div {:class (stl/css :grid-coord-group)}
[:span {:class (stl/css :icon)} i/flex-horizontal-refactor]
[:span {:class (stl/css :icon)} i/flex-horizontal]
[:div {:class (stl/css :coord-input :double)}
[:> numeric-input*
{:placeholder "--"

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

@ -139,7 +139,7 @@
[:button {:class (stl/css :start-flow-btn)
:on-click start-flow}
[:span {:class (stl/css :button-icon)}
i/play-refactor]]
i/play]]
[:span {:class (stl/css :flow-input-wrapper)}
[:input
{:class (stl/css :flow-input)
@ -151,7 +151,7 @@
[:button {:class (stl/css :remove-flow-btn)
:on-click remove-flow}
i/remove-refactor]]))
i/remove-icon]]))
(mf/defc page-flows
[{:keys [flows]}]
@ -177,7 +177,7 @@
[:button {:class (stl/css :add-flow-btn)
:title (tr "workspace.options.flows.add-flow-start")
:on-click add-flow}
i/add-refactor])]
i/add])]
(when flow
[:& flow-item {:flow flow :key (str (:id flow))}])])))
@ -412,11 +412,11 @@
(d/concat-vec basic-animation-opts [{:value :push :label (tr "workspace.options.interaction-animation-push")}])
basic-animation-opts))
easing-options [{:icon :easing-linear-refactor :value :linear :label (tr "workspace.options.interaction-easing-linear")}
{:icon :easing-ease-refactor :value :ease :label (tr "workspace.options.interaction-easing-ease")}
{:icon :easing-ease-in-refactor :value :ease-in :label (tr "workspace.options.interaction-easing-ease-in")}
{:icon :easing-ease-out-refactor :value :ease-out :label (tr "workspace.options.interaction-easing-ease-out")}
{:icon :easing-ease-in-out-refactor :value :ease-in-out :label (tr "workspace.options.interaction-easing-ease-in-out")}]]
easing-options [{:icon :easing-linear :value :linear :label (tr "workspace.options.interaction-easing-linear")}
{:icon :easing-ease :value :ease :label (tr "workspace.options.interaction-easing-ease")}
{:icon :easing-ease-in :value :ease-in :label (tr "workspace.options.interaction-easing-ease-in")}
{:icon :easing-ease-out :value :ease-out :label (tr "workspace.options.interaction-easing-ease-out")}
{:icon :easing-ease-in-out :value :ease-in-out :label (tr "workspace.options.interaction-easing-ease-in-out")}]]
[:div {:class (stl/css-case :element-set-options-group true
@ -426,7 +426,7 @@
[:button {:class (stl/css-case :extend-btn true
:extended extended-open?)
:on-click toggle-extended}
i/menu-refactor]
i/menu]
[:div {:class (stl/css :interactions-info)
:on-click toggle-extended}
@ -435,7 +435,7 @@
[:button {:class (stl/css :remove-btn)
:data-value index
:on-click #(remove-interaction index)}
i/remove-refactor]]
i/remove-icon]]
(when extended-open?
[:div {:class (stl/css :extended-options)}
@ -490,7 +490,7 @@
:class (stl/css-case :global/checked preserve-scroll?)}
[:span {:class (stl/css-case :global/checked preserve-scroll?)}
(when preserve-scroll?
i/status-tick-refactor)]
i/status-tick)]
(tr "workspace.options.interaction-preserve-scroll")
[:input {:type "checkbox"
:id (str "preserve-" index)
@ -586,7 +586,7 @@
:class (stl/css-case :global/checked close-click-outside?)}
[:span {:class (stl/css-case :global/checked close-click-outside?)}
(when close-click-outside?
i/status-tick-refactor)]
i/status-tick)]
(tr "workspace.options.interaction-close-outside")
[:input {:type "checkbox"
:id (str "close-" index)
@ -600,7 +600,7 @@
:class (stl/css-case :global/checked background-overlay?)}
[:span {:class (stl/css-case :global/checked background-overlay?)}
(when background-overlay?
i/status-tick-refactor)]
i/status-tick)]
(tr "workspace.options.interaction-background")
[:input {:type "checkbox"
:id (str "background-" index)
@ -638,19 +638,19 @@
[:& radio-buttons {:selected (d/name direction)
:on-change change-direction
:name "animation-direction"}
[:& radio-button {:icon i/column-refactor
[:& radio-button {:icon i/column
:icon-class (stl/css :right)
:value "right"
:id "animation-right"}]
[:& radio-button {:icon i/column-refactor
[:& radio-button {:icon i/column
:icon-class (stl/css :left)
:id "animation-left"
:value "left"}]
[:& radio-button {:icon i/column-refactor
[:& radio-button {:icon i/column
:icon-class (stl/css :down)
:id "animation-down"
:value "down"}]
[:& radio-button {:icon i/column-refactor
[:& radio-button {:icon i/column
:icon-class (stl/css :up)
:id "animation-up"
:value "up"}]]]])
@ -687,7 +687,7 @@
:class (stl/css-case :global/checked (-> interaction :animation :offset-effect))}
[:span {:class (stl/css-case :global/checked (-> interaction :animation :offset-effect))}
(when (-> interaction :animation :offset-effect)
i/status-tick-refactor)]
i/status-tick)]
(tr "workspace.options.interaction-offset-effect")
[:input {:type "checkbox"
:id (str "offset-effect-" index)
@ -726,21 +726,21 @@
[:button {:class (stl/css :add-interaction-btn)
:on-click add-interaction}
i/add-refactor]]])
i/add]]])
(when (= (count interactions) 0)
[:div {:class (stl/css :help-content)}
(when (and shape (not (cfh/unframed-shape? shape)))
[:div {:class (stl/css :help-group)}
[:div {:class (stl/css :interactions-help-icon)} i/add-refactor]
[:div {:class (stl/css :interactions-help-icon)} i/add]
[:div {:class (stl/css :interactions-help)}
(tr "workspace.options.add-interaction")]])
[:div {:class (stl/css :help-group)}
[:div {:class (stl/css :interactions-help-icon)} i/interaction-refactor]
[:div {:class (stl/css :interactions-help-icon)} i/interaction]
[:div {:class (stl/css :interactions-help)}
(tr "workspace.options.select-a-shape")]]
[:div {:class (stl/css :help-group)}
[:div {:class (stl/css :interactions-help-icon)} i/play-refactor]
[:div {:class (stl/css :interactions-help-icon)} i/play]
[:div {:class (stl/css :interactions-help)}
(tr "workspace.options.use-play-button")]]])
[:div {:class (stl/css :groups)}

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

@ -173,18 +173,18 @@
(cond
(or (= :multiple hidden?) (not hidden?))
[:button {:on-click handle-set-hidden
:class (stl/css :hidden-btn)} i/shown-refactor]
:class (stl/css :hidden-btn)} i/shown]
:else
[:button {:on-click handle-set-visible
:class (stl/css :hidden-btn)} i/hide-refactor])
:class (stl/css :hidden-btn)} i/hide])
(cond
(or (= :multiple blocked?) (not blocked?))
[:button {:on-click handle-set-blocked
:class (stl/css :lock-btn)} i/unlock-refactor]
:class (stl/css :lock-btn)} i/unlock]
:else
[:button {:on-click handle-set-unblocked
:class (stl/css-case :lock-btn true
:locked blocked?)} i/lock-refactor])]]]))
:locked blocked?)} i/lock])]]]))

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

@ -36,10 +36,10 @@
(defn- dir-icons-refactor
[val]
(case val
:row i/grid-row-refactor
:row-reverse i/row-reverse-refactor
:column i/column-refactor
:column-reverse i/column-reverse-refactor))
:row i/grid-row
:row-reverse i/row-reverse
:column i/column
:column-reverse i/column-reverse))
;; FLEX COMPONENTS
@ -67,63 +67,63 @@
:align-items
(if column?
(case val
:start i/align-items-column-start-refactor
:end i/align-items-column-end-refactor
:center i/align-items-column-center-refactor)
:start i/align-items-column-start
:end i/align-items-column-end
:center i/align-items-column-center)
(case val
:start i/align-items-row-start-refactor
:end i/align-items-row-end-refactor
:center i/align-items-row-center-refactor))
:start i/align-items-row-start
:end i/align-items-row-end
:center i/align-items-row-center))
:justify-content
(if column?
(case val
:start i/justify-content-column-start-refactor
:end i/justify-content-column-end-refactor
:center i/justify-content-column-center-refactor
:space-around i/justify-content-column-around-refactor
:space-evenly i/justify-content-column-evenly-refactor
:space-between i/justify-content-column-between-refactor)
:start i/justify-content-column-start
:end i/justify-content-column-end
:center i/justify-content-column-center
:space-around i/justify-content-column-around
:space-evenly i/justify-content-column-evenly
:space-between i/justify-content-column-between)
(case val
:start i/justify-content-row-start-refactor
:end i/justify-content-row-end-refactor
:center i/justify-content-row-center-refactor
:space-around i/justify-content-row-around-refactor
:space-evenly i/justify-content-row-evenly-refactor
:space-between i/justify-content-row-between-refactor))
:start i/justify-content-row-start
:end i/justify-content-row-end
:center i/justify-content-row-center
:space-around i/justify-content-row-around
:space-evenly i/justify-content-row-evenly
:space-between i/justify-content-row-between))
:align-content
(if column?
(case val
:start i/align-content-column-start-refactor
:end i/align-content-column-end-refactor
:center i/align-content-column-center-refactor
:space-around i/align-content-column-around-refactor
:space-evenly i/align-content-column-evenly-refactor
:space-between i/align-content-column-between-refactor
:start i/align-content-column-start
:end i/align-content-column-end
:center i/align-content-column-center
:space-around i/align-content-column-around
:space-evenly i/align-content-column-evenly
:space-between i/align-content-column-between
:stretch nil)
(case val
:start i/align-content-row-start-refactor
:end i/align-content-row-end-refactor
:center i/align-content-row-center-refactor
:space-around i/align-content-row-around-refactor
:space-evenly i/align-content-row-evenly-refactor
:space-between i/align-content-row-between-refactor
:start i/align-content-row-start
:end i/align-content-row-end
:center i/align-content-row-center
:space-around i/align-content-row-around
:space-evenly i/align-content-row-evenly
:space-between i/align-content-row-between
:stretch nil))
:align-self
(if column?
(case val
:auto i/remove-refactor
:start i/align-self-row-left-refactor
:end i/align-self-row-right-refactor
:center i/align-self-row-center-refactor)
:auto i/remove-icon
:start i/align-self-row-left
:end i/align-self-row-right
:center i/align-self-row-center)
(case val
:auto i/remove-refactor
:start i/align-self-column-top-refactor
:end i/align-self-column-bottom-refactor
:center i/align-self-column-center-refactor))))
:auto i/remove-icon
:start i/align-self-column-top
:end i/align-self-column-bottom
:center i/align-self-column-center))))
(defn get-layout-grid-icon
[type val ^boolean column?]
@ -131,32 +131,32 @@
:align-items
(if column?
(case val
:auto i/remove-refactor
:start i/align-self-row-left-refactor
:end i/align-self-row-right-refactor
:center i/align-self-row-center-refactor)
:auto i/remove-icon
:start i/align-self-row-left
:end i/align-self-row-right
:center i/align-self-row-center)
(case val
:auto i/remove-refactor
:start i/align-self-column-top-refactor
:end i/align-self-column-bottom-refactor
:center i/align-self-column-center-refactor))
:auto i/remove-icon
:start i/align-self-column-top
:end i/align-self-column-bottom
:center i/align-self-column-center))
:justify-items
(if (not column?)
(case val
:start i/align-content-column-start-refactor
:center i/align-content-column-center-refactor
:end i/align-content-column-end-refactor
:space-around i/align-content-column-around-refactor
:space-between i/align-content-column-between-refactor
:stretch i/align-content-column-stretch-refactor)
:start i/align-content-column-start
:center i/align-content-column-center
:end i/align-content-column-end
:space-around i/align-content-column-around
:space-between i/align-content-column-between
:stretch i/align-content-column-stretch)
(case val
:start i/align-content-row-start-refactor
:center i/align-content-row-center-refactor
:end i/align-content-row-end-refactor
:space-around i/align-content-row-around-refactor
:space-between i/align-content-row-between-refactor
:stretch i/align-content-row-stretch-refactor))))
:start i/align-content-row-start
:center i/align-content-row-center
:end i/align-content-row-end
:space-around i/align-content-row-around
:space-between i/align-content-row-between
:stretch i/align-content-row-stretch))))
(mf/defc direction-row-flex
{::mf/props :obj
@ -192,7 +192,7 @@
"No wrap"
"Wrap")
:on-click on-click}
i/wrap-refactor])
i/wrap])
(mf/defc align-row
{::mf/props :obj}
@ -335,7 +335,7 @@
[:div {:class (stl/css :padding-simple)
:title "Vertical padding"}
[:span {:class (stl/css :icon)}
i/padding-top-bottom-refactor]
i/padding-top-bottom]
[:> numeric-input*
{:class (stl/css :numeric-input)
:placeholder "--"
@ -349,7 +349,7 @@
:title "Horizontal padding"}
[:span {:class (stl/css :icon)}
i/padding-left-right-refactor]
i/padding-left-right]
[:> numeric-input*
{:className (stl/css :numeric-input)
:placeholder "--"
@ -392,7 +392,7 @@
[:div {:class (stl/css :padding-multiple)
:title "Top padding"}
[:span {:class (stl/css :icon)}
i/padding-top-refactor]
i/padding-top]
[:> numeric-input*
{:class (stl/css :numeric-input)
:placeholder "--"
@ -407,7 +407,7 @@
[:div {:class (stl/css :padding-multiple)
:title "Right padding"}
[:span {:class (stl/css :icon)}
i/padding-right-refactor]
i/padding-right]
[:> numeric-input*
{:class (stl/css :numeric-input)
:placeholder "--"
@ -422,7 +422,7 @@
[:div {:class (stl/css :padding-multiple)
:title "Bottom padding"}
[:span {:class (stl/css :icon)}
i/padding-bottom-refactor]
i/padding-bottom]
[:> numeric-input*
{:class (stl/css :numeric-input)
:placeholder "--"
@ -437,7 +437,7 @@
[:div {:class (stl/css :padding-multiple)
:title "Left padding"}
[:span {:class (stl/css :icon)}
i/padding-left-refactor]
i/padding-left]
[:> numeric-input*
{:class (stl/css :numeric-input)
:placeholder "--"
@ -482,7 +482,7 @@
:selected (= type :multiple))
:data-type (d/name type)
:on-click on-type-change'}
i/padding-extended-refactor]]))
i/padding-extended]]))
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; GAP
@ -539,7 +539,7 @@
:row-gap true
:disabled row-gap-disabled?)
:title "Row gap"}
[:span {:class (stl/css :icon)} i/gap-vertical-refactor]
[:span {:class (stl/css :icon)} i/gap-vertical]
[:> numeric-input*
{:class (stl/css :numeric-input true)
:no-validate true
@ -558,7 +558,7 @@
:column-gap true
:disabled col-gap-disabled?)
:title "Column gap"}
[:span {:class (stl/css :icon)} i/gap-horizontal-refactor]
[:span {:class (stl/css :icon)} i/gap-horizontal]
[:> numeric-input*
{:class (stl/css :numeric-input true)
:no-validate true
@ -745,7 +745,7 @@
[:div {:class (stl/css :track-info-container)}
[:div {:class (stl/css :track-info-dir-icon)
:on-click handle-select-track}
(if is-column i/flex-vertical-refactor i/flex-horizontal-refactor)]
(if is-column i/flex-vertical i/flex-horizontal)]
[:div {:class (stl/css :track-info-value)}
[:> numeric-input* {:no-validate true
@ -766,7 +766,7 @@
[:button {:class (stl/css :remove-track-btn)
:on-click #(remove-element type index)}
i/remove-refactor]]))
i/remove-icon]]))
(mf/defc grid-columns-row
{::mf/props :obj}
@ -789,11 +789,11 @@
[:div {:class (stl/css :grid-tracks)}
[:div {:class (stl/css :grid-track-header)}
[:button {:class (stl/css :expand-icon) :on-click toggle} i/menu-refactor]
[:button {:class (stl/css :expand-icon) :on-click toggle} i/menu]
[:div {:class (stl/css :track-title) :on-click toggle}
[:div {:class (stl/css :track-name) :title track-name} track-name]
[:div {:class (stl/css :track-detail) :title track-detail} track-detail]]
[:button {:class (stl/css :add-column) :on-click add-track} i/add-refactor]]
[:button {:class (stl/css :add-column) :on-click add-track} i/add]]
(when expanded?
[:& h/sortable-container {}
@ -1002,7 +1002,7 @@
[:*
[:button {:class (stl/css :add-layout)
:on-click on-toggle-dropdown-visibility}
i/menu-refactor]
i/menu]
[:& dropdown {:show show-dropdown?
:on-close on-hide-dropdown}
@ -1019,14 +1019,14 @@
(when has-layout?
[:button {:class (stl/css :remove-layout)
:on-click on-remove-layout}
i/remove-refactor])]
i/remove-icon])]
[:div {:class (stl/css :title-actions)}
(if ^boolean grid-enabled?
[:*
[:button {:class (stl/css :add-layout)
:on-click on-toggle-dropdown-visibility}
i/add-refactor]
i/add]
[:& dropdown {:show show-dropdown?
:on-close on-hide-dropdown}
@ -1043,11 +1043,11 @@
[:button {:class (stl/css :add-layout)
:data-type "flex"
:on-click on-add-layout}
i/add-refactor])
i/add])
(when has-layout?
[:button {:class (stl/css :remove-layout)
:on-click on-remove-layout}
i/remove-refactor])])]]
i/remove-icon])])]]
(when (and ^boolean open?
^boolean has-layout?
@ -1073,7 +1073,7 @@
[:button {:on-click open-flex-help
:class (stl/css :help-button)}
i/help-refactor]]
i/help]]
(when (= :wrap wrap-type)
[:div {:class (stl/css :third-row)}
[:& align-content-row {:is-column is-column
@ -1096,7 +1096,7 @@
[: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-refactor]])
:class (stl/css :help-button)} i/help]])
[:div {:class (stl/css :row :first-row)}
[:div {:class (stl/css :direction-edit)}
@ -1273,7 +1273,7 @@
[: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-refactor]
:class (stl/css :help-button)} i/help]
[:button {:class (stl/css :exit-btn)
:on-click #(st/emit! (udw/clear-edition-mode))}
(tr "workspace.layout_grid.editor.options.exit")]]
@ -1303,7 +1303,7 @@
[:button {:on-click handle-locate-grid
:class (stl/css :locate-button)
:title (tr "workspace.layout_grid.editor.top-bar.locate.tooltip")}
i/locate-refactor]]
i/locate]]
[:div {:class (stl/css :row)}
[:& gap-section {:on-change on-gap-change

26
frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs
View file

@ -80,7 +80,7 @@
[:div {:class (stl/css :vertical-margin)
:title "Vertical margin"}
[:span {:class (stl/css :icon)}
i/margin-top-bottom-refactor]
i/margin-top-bottom]
[:> numeric-input* {:class (stl/css :numeric-input)
:placeholder "--"
:data-name "m1"
@ -93,7 +93,7 @@
[:div {:class (stl/css :horizontal-margin)
:title "Horizontal margin"}
[:span {:class (stl/css :icon)}
i/margin-left-right-refactor]
i/margin-left-right]
[:> numeric-input* {:class (stl/css :numeric-input)
:placeholder "--"
:data-name "m2"
@ -133,7 +133,7 @@
[:div {:class (stl/css :top-margin)
:title "Top margin"}
[:span {:class (stl/css :icon)}
i/margin-top-refactor]
i/margin-top]
[:> numeric-input* {:class (stl/css :numeric-input)
:placeholder "--"
:data-name "m1"
@ -145,7 +145,7 @@
[:div {:class (stl/css :right-margin)
:title "Right margin"}
[:span {:class (stl/css :icon)}
i/margin-right-refactor]
i/margin-right]
[:> numeric-input* {:class (stl/css :numeric-input)
:placeholder "--"
:data-name "m2"
@ -158,7 +158,7 @@
[:div {:class (stl/css :bottom-margin)
:title "Bottom margin"}
[:span {:class (stl/css :icon)}
i/margin-bottom-refactor]
i/margin-bottom]
[:> numeric-input* {:class (stl/css :numeric-input)
:placeholder "--"
:data-name "m3"
@ -171,7 +171,7 @@
[:div {:class (stl/css :left-margin)
:title "Left margin"}
[:span {:class (stl/css :icon)}
i/margin-left-refactor]
i/margin-left]
[:> numeric-input* {:class (stl/css :numeric-input)
:placeholder "--"
:data-name "m4"
@ -216,7 +216,7 @@
:selected (= type :multiple))
:title "Margin - multiple"
:on-click on-type-change'}
i/margin-refactor]]))
i/margin]]))
(mf/defc element-behaviour-horizontal
{::mf/props :obj
@ -236,20 +236,20 @@
[:& radio-button
{:value "fix"
:icon i/fixed-width-refactor
:icon i/fixed-width
:title "Fix width"
:id "behaviour-h-fix"}]
(when has-fill
[:& radio-button
{:value "fill"
:icon i/fill-content-refactor
:icon i/fill-content
:title "Width 100%"
:id "behaviour-h-fill"}])
(when is-auto
[:& radio-button
{:value "auto"
:icon i/hug-content-refactor
:icon i/hug-content
:title "Fit content"
:id "behaviour-h-auto"}])]])
@ -271,7 +271,7 @@
[:& radio-button
{:value "fix"
:icon i/fixed-width-refactor
:icon i/fixed-width
:icon-class (stl/css :rotated)
:title "Fix height"
:id "behaviour-v-fix"}]
@ -279,14 +279,14 @@
(when has-fill
[:& radio-button
{:value "fill"
:icon i/fill-content-refactor
:icon i/fill-content
:icon-class (stl/css :rotated)
:title "Height 100%"
:id "behaviour-v-fill"}])
(when is-auto
[:& radio-button
{:value "auto"
:icon i/hug-content-refactor
:icon i/hug-content
:icon-class (stl/css :rotated)
:title "Fit content"
:id "behaviour-v-auto"}])]])

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

@ -353,7 +353,7 @@
:opened show-presets-dropdown?)
:on-click open-presets}
[:span {:class (stl/css :select-name)} (tr "workspace.options.size-presets")]
[:span {:class (stl/css :collapsed-icon)} i/arrow-refactor]
[:span {:class (stl/css :collapsed-icon)} i/arrow]
[:& dropdown {:show show-presets-dropdown?
:on-close close-presets}
@ -377,15 +377,15 @@
[:span {:class (stl/css :preset-name)} (:name size-preset)]
[:span {:class (stl/css :preset-size)} (:width size-preset) " x " (:height size-preset)]]
(when preset-match
[:span {:class (stl/css :check-icon)} i/tick-refactor])])))]]]
[:span {:class (stl/css :check-icon)} i/tick])])))]]]
[:& radio-buttons {:selected (or (d/name orientation) "")
:on-change on-orientation-change
:name "frame-otientation"}
[:& radio-button {:icon i/size-vertical-refactor
[:& radio-button {:icon i/size-vertical
:value "vert"
:id "size-vertical"}]
[:& radio-button {:icon i/size-horizontal-refactor
[:& radio-button {:icon i/size-horizontal
:value "horiz"
:id "size-horizontal"}]]])
(when (options :size)
@ -449,7 +449,7 @@
(when (options :rotation)
[:div {:class (stl/css :rotation)
:title (tr "workspace.options.rotation")}
[:span {:class (stl/css :icon)} i/rotation-refactor]
[:span {:class (stl/css :icon)} i/rotation]
[:> numeric-input*
{:no-validate true
:min -359
@ -467,7 +467,7 @@
(= radius-mode :radius-1)
[:div {:class (stl/css :radius-1)
:title (tr "workspace.options.radius")}
[:span {:class (stl/css :icon)} i/corner-radius-refactor]
[:span {:class (stl/css :icon)} i/corner-radius]
[:> numeric-input*
{:placeholder (if (= :multiple (:rx values)) (tr "settings.multiple") "--")
:ref radius-input-ref
@ -479,7 +479,7 @@
@radius-multi?
[:div {:class (stl/css :radius-1)
:title (tr "workspace.options.radius")}
[:span {:class (stl/css :icon)} i/corner-radius-refactor]
[:span {:class (stl/css :icon)} i/corner-radius]
[:input.input-text
{:type "number"
:placeholder "Mixed"
@ -532,7 +532,7 @@
(tr "workspace.options.radius.all-corners")
(tr "workspace.options.radius.single-corners"))
:on-click toggle-radius-mode}
i/corner-radius-refactor]])])
i/corner-radius]])])
(when (or (options :clip-content) (options :show-in-viewer))
[:div {:class (stl/css :clip-show)}
(when (options :clip-content)

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

@ -160,7 +160,7 @@
[:button {:class (stl/css-case :more-options true
:selected open-shadow)
:on-click on-toggle-open-shadow}
i/menu-refactor]
i/menu]
[:div {:class (stl/css :type-select)}
[:& select
{:class (stl/css :shadow-type-select)
@ -171,11 +171,11 @@
[:button {:class (stl/css :action-btn)
:on-click toggle-visibility}
(if hidden?
i/hide-refactor
i/shown-refactor)]
i/hide
i/shown)]
[:button {:class (stl/css :action-btn)
:on-click on-remove-shadow}
i/remove-refactor]]]
i/remove-icon]]]
(when open-shadow
[:& advanced-options {:class (stl/css :shadow-advanced-options)
:visible? open-shadow
@ -298,7 +298,7 @@
(when-not (= :multiple shadows)
[:button {:class (stl/css :add-shadow)
:on-click on-add-shadow} i/add-refactor])]]
:on-click on-add-shadow} i/add])]]
(when open?
(cond
@ -309,7 +309,7 @@
[:div {:class (stl/css :actions)}
[:button {:class (stl/css :action-btn)
:on-click on-remove-all}
i/remove-refactor]]]]
i/remove-icon]]]]
(seq shadows)
[:& h/sortable-container {}

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

@ -171,7 +171,7 @@
:class (stl/css-case :title-spacing-stroke (not has-strokes?))}
[:button {:class (stl/css :add-stroke)
:on-click on-add-stroke} i/add-refactor]]]
:on-click on-add-stroke} i/add]]]
(when open?
[:div {:class (stl/css-case :element-content true
:empty-content (not has-strokes?))}
@ -182,7 +182,7 @@
(tr "settings.multiple")]
[:button {:on-click handle-remove-all
:class (stl/css :remove-btn)}
i/remove-refactor]]
i/remove-icon]]
(seq strokes)
[:& h/sortable-container {}
(for [[index value] (d/enumerate (:strokes values []))]

2
frontend/src/app/main/ui/workspace/sidebar/options/menus/svg_attrs.cljs
View file

@ -41,7 +41,7 @@
[:div {:class (stl/css :attr-actions)}
[:button {:class (stl/css :attr-action-btn)
:on-click handle-delete}
i/remove-refactor]]]
i/remove-icon]]]
[:div {:class (stl/css :attr-nested-content)}
[:div {:class (stl/css :attr-title)}
(str (d/name (last attr)))]

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

@ -45,19 +45,19 @@
[:& radio-button {:value "left"
:id "text-align-left"
:title (tr "workspace.options.text-options.text-align-left" (sc/get-tooltip :text-align-left))
:icon i/text-align-left-refactor}]
:icon i/text-align-left}]
[:& radio-button {:value "center"
:id "text-align-center"
:title (tr "workspace.options.text-options.text-align-center" (sc/get-tooltip :text-align-center))
:icon i/text-align-center-refactor}]
:icon i/text-align-center}]
[:& radio-button {:value "right"
:id "text-align-right"
:title (tr "workspace.options.text-options.text-align-right" (sc/get-tooltip :text-align-right))
:icon i/text-align-right-refactor}]
:icon i/text-align-right}]
[:& radio-button {:value "justify"
:id "text-align-justify"
:title (tr "workspace.options.text-options.text-align-justify" (sc/get-tooltip :text-align-justify))
:icon i/text-justify-refactor}]]]))
:icon i/text-justify}]]]))
(mf/defc text-direction-options
[{:keys [values on-change on-blur] :as props}]
@ -80,12 +80,12 @@
:type "checkbox"
:id "ltr-text-direction"
:title (tr "workspace.options.text-options.direction-ltr")
:icon i/text-ltr-refactor}]
:icon i/text-ltr}]
[:& radio-button {:value "rtl"
:type "checkbox"
:id "rtl-text-direction"
:title (tr "workspace.options.text-options.direction-rtl")
:icon i/text-rtl-refactor}]]]))
:icon i/text-rtl}]]]))
(mf/defc vertical-align
[{:keys [values on-change on-blur] :as props}]
@ -105,15 +105,15 @@
[:& radio-button {:value "top"
:id "vertical-text-align-top"
:title (tr "workspace.options.text-options.align-top")
:icon i/text-top-refactor}]
:icon i/text-top}]
[:& radio-button {:value "center"
:id "vertical-text-align-center"
:title (tr "workspace.options.text-options.align-middle")
:icon i/text-middle-refactor}]
:icon i/text-middle}]
[:& radio-button {:value "bottom"
:id "vertical-text-align-bottom"
:title (tr "workspace.options.text-options.align-bottom")
:icon i/text-bottom-refactor}]]]))
:icon i/text-bottom}]]]))
(mf/defc grow-options
[{:keys [ids values on-blur] :as props}]
@ -139,15 +139,15 @@
[:& radio-button {:value "fixed"
:id "text-fixed-grow"
:title (tr "workspace.options.text-options.grow-fixed")
:icon i/text-fixed-refactor}]
:icon i/text-fixed}]
[:& radio-button {:value "auto-width"
:id "text-auto-width-grow"
:title (tr "workspace.options.text-options.grow-auto-width")
:icon i/text-auto-width-refactor}]
:icon i/text-auto-width}]
[:& radio-button {:value "auto-height"
:id "text-auto-height-grow"
:title (tr "workspace.options.text-options.grow-auto-height")
:icon i/text-auto-height-refactor}]]]))
:icon i/text-auto-height}]]]))
(mf/defc text-decoration-options
[{:keys [values on-change on-blur] :as props}]
@ -169,12 +169,12 @@
:type "checkbox"
:id "underline-text-decoration"
:title (tr "workspace.options.text-options.underline" (sc/get-tooltip :underline))
:icon i/text-underlined-refactor}]
:icon i/text-underlined}]
[:& radio-button {:value "line-through"
:type "checkbox"
:id "line-through-text-decoration"
:title (tr "workspace.options.text-options.strikethrough" (sc/get-tooltip :line-through))
:icon i/text-stroked-refactor}]]]))
:icon i/text-stroked}]]]))
(mf/defc text-menu
{::mf/wrap [mf/memo]}
@ -291,7 +291,7 @@
(when (and (not typography) (not multiple?))
[:button {:class (stl/css :add-typography)
:on-click on-convert-to-typography}
i/add-refactor])]]
i/add])]]
(when main-menu-open?
[:div {:class (stl/css :element-content)}
@ -309,7 +309,7 @@
[:div {:class (stl/css :multiple-typography-button)
:on-click handle-detach-typography
:title (tr "workspace.libraries.text.multiple-typography-tooltip")}
i/detach-refactor]]
i/detach]]
:else
[:> text-options opts])
@ -319,7 +319,7 @@
[:> grow-options opts]
[:button {:class (stl/css :more-options)
:on-click toggle-more-options}
i/menu-refactor]]
i/menu]]
(when more-options-open?
[:div {:class (stl/css :text-decoration-options)}

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

@ -77,7 +77,7 @@
[:div {:class (stl/css-case :font-item true
:selected current?)}
[:span {:class (stl/css :label)} (:name font)]
[:span {:class (stl/css :icon)} (when current? i/tick-refactor)]]]))
[:span {:class (stl/css :icon)} (when current? i/tick)]]]))
(declare row-renderer)
@ -303,7 +303,7 @@
[:span {:class (stl/css :name)}
(:name font)]
[:span {:class (stl/css :icon)}
i/arrow-refactor]]
i/arrow]]
:else
(tr "dashboard.fonts.deleted-placeholder"))]
@ -362,7 +362,7 @@
[:div {:class (stl/css :line-height)}
[:span {:class (stl/css :icon)
:alt (tr "workspace.options.text-options.line-height")}
i/text-lineheight-refactor]
i/text-lineheight]
[:> numeric-input*
{:min -200
:max 200
@ -379,7 +379,7 @@
[:span
{:class (stl/css :icon)
:alt (tr "workspace.options.text-options.letter-spacing")}
i/text-letterspacing-refactor]
i/text-letterspacing]
[:> numeric-input*
{:min -200
:max 200
@ -405,15 +405,15 @@
[:& radio-buttons {:selected text-transform
:on-change handle-change
:name "text-transform"}
[:& radio-button {:icon i/text-uppercase-refactor
[:& radio-button {:icon i/text-uppercase
:type "checkbox"
:value "uppercase"
:id "text-transform-uppercase"}]
[:& radio-button {:icon i/text-mixed-refactor
[:& radio-button {:icon i/text-mixed
:type "checkbox"
:value "capitalize"
:id "text-transform-capitalize"}]
[:& radio-button {:icon i/text-lowercase-refactor
[:& radio-button {:icon i/text-lowercase
:type "checkbox"
:value "lowercase"
:id "text-transform-lowercase"}]]]))
@ -472,7 +472,7 @@
[:div {:class (stl/css :action-btn)
:on-click on-close}
i/tick-refactor]]
i/tick]]
[:& text-options {:values typography
:on-change on-change
@ -494,7 +494,7 @@
(:name font-data)]
[:div {:class (stl/css :action-btn)
:on-click on-close}
i/menu-refactor]]
i/menu]]
[:div {:class (stl/css :info-row)}
[:span {:class (stl/css :info-label)} (tr "workspace.assets.typography.font-variant-id")]
@ -624,10 +624,10 @@
(when ^boolean on-detach
[:button {:class (stl/css :element-set-actions-button)
:on-click on-detach}
i/detach-refactor])
i/detach])
[:button {:class (stl/css :menu-btn)
:on-click on-open}
i/menu-refactor]]]
i/menu]]]
[:& typography-advanced-options
{:visible? open?

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

@ -265,9 +265,9 @@
(when (some? on-remove)
[:button {:class (stl/css :remove-btn)
:on-click on-remove} i/remove-refactor])
:on-click on-remove} i/remove-icon])
(when select-only
[:button {:class (stl/css :select-btn)
:on-click handle-select}
i/move-refactor])]))
i/move])]))

26
frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.cljs
View file

@ -59,13 +59,13 @@
(fn [color]
(on-color-change index color)))
on-color-detach-refactor
on-color-detach
(mf/use-callback
(mf/deps index on-color-detach)
(fn [color]
(on-color-detach index color)))
on-remove-refactor
on-remove
(mf/use-callback
(mf/deps index on-remove)
#(on-remove index))
@ -123,14 +123,14 @@
stroke-caps-options
[{:value nil :label (tr "workspace.options.stroke-cap.none")}
:separator
{:value :line-arrow :label (tr "workspace.options.stroke-cap.line-arrow-short") :icon :stroke-arrow-refactor}
{:value :triangle-arrow :label (tr "workspace.options.stroke-cap.triangle-arrow-short") :icon :stroke-triangle-refactor}
{:value :square-marker :label (tr "workspace.options.stroke-cap.square-marker-short") :icon :stroke-rectangle-refactor}
{:value :circle-marker :label (tr "workspace.options.stroke-cap.circle-marker-short") :icon :stroke-circle-refactor}
{:value :diamond-marker :label (tr "workspace.options.stroke-cap.diamond-marker-short") :icon :stroke-diamond-refactor}
{:value :line-arrow :label (tr "workspace.options.stroke-cap.line-arrow-short") :icon :stroke-arrow}
{:value :triangle-arrow :label (tr "workspace.options.stroke-cap.triangle-arrow-short") :icon :stroke-triangle}
{:value :square-marker :label (tr "workspace.options.stroke-cap.square-marker-short") :icon :stroke-rectangle}
{:value :circle-marker :label (tr "workspace.options.stroke-cap.circle-marker-short") :icon :stroke-circle}
{:value :diamond-marker :label (tr "workspace.options.stroke-cap.diamond-marker-short") :icon :stroke-diamond}
:separator
{:value :round :label (tr "workspace.options.stroke-cap.round") :icon :stroke-rounded-refactor}
{:value :square :label (tr "workspace.options.stroke-cap.square") :icon :stroke-squared-refactor}]
{:value :round :label (tr "workspace.options.stroke-cap.round") :icon :stroke-rounded}
{:value :square :label (tr "workspace.options.stroke-cap.square") :icon :stroke-squared}]
on-cap-switch
(mf/use-callback
@ -152,8 +152,8 @@
:index index
:title title
:on-change on-color-change-refactor
:on-detach on-color-detach-refactor
:on-remove on-remove-refactor
:on-detach on-color-detach
:on-remove on-remove
:disable-drag disable-drag
:on-focus on-focus
:select-on-focus select-on-focus
@ -164,7 +164,7 @@
[:div {:class (stl/css :stroke-width-input-element)
:title (tr "workspace.options.stroke-width")}
[:span {:class (stl/css :icon)}
i/stroke-size-refactor]
i/stroke-size]
[:> numeric-input*
{:min 0
:className (stl/css :stroke-width-input)
@ -201,7 +201,7 @@
[:button {:class (stl/css :swap-caps-btn)
:on-click on-cap-switch}
i/switch-refactor]
i/switch]
[:div {:class (stl/css :cap-select)}
[:& select

6
frontend/src/app/main/ui/workspace/sidebar/shortcuts.cljs
View file

@ -268,7 +268,7 @@
(stl/css :subsection-title)
(stl/css :section-title))}
[:span {:class (stl/css-case :open is-visible?
:collapsed-shortcuts true)} i/arrow-refactor]
:collapsed-shortcuts true)} i/arrow]
[:span {:class (if is-sub?
(stl/css :subsection-name)
(stl/css :section-name))} name]])
@ -473,14 +473,14 @@
[:div {:class (stl/css :shortcuts-title)} (tr "shortcuts.title")]
[:div {:class (stl/css :shortcuts-close-button)
:on-click close-fn}
i/close-refactor]]
i/close]]
[:div {:class (stl/css :search-field)}
[:& search-bar {:on-change on-search-term-change-2
:clear-action on-search-clear-click
:value @filter-term
:placeholder (tr "shortcuts.title")
:icon (mf/html [:span {:class (stl/css :search-icon)} i/search-refactor])}]]
:icon (mf/html [:span {:class (stl/css :search-icon)} i/search])}]]
(if match-any?
[:div {:class (stl/css :shortcuts-list)}

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

@ -131,7 +131,7 @@
:on-double-click on-double-click
:on-context-menu on-context-menu}
[:div {:class (stl/css :page-icon)}
i/document-refactor]
i/document]
(if editing?
[:*
@ -148,7 +148,7 @@
[:div {:class (stl/css :page-actions)}
(when (and deletable? (not workspace-read-only?))
[:button {:on-click on-delete}
i/delete-refactor])]])]]))
i/delete])]])]]))
;; --- Page Item Wrapper
@ -222,7 +222,7 @@
(tr "labels.view-only")]
[:button {:class (stl/css :add-page)
:on-click on-create}
i/add-refactor])]
i/add])]
[:div {:class (stl/css :tool-window-content)}
[:& pages-list {:file file :key (:id file)}]]]))

4
frontend/src/app/main/ui/workspace/text_palette.cljs
View file

@ -136,7 +136,7 @@
(when show-arrows?
[:button {:class (stl/css :left-arrow)
:disabled (= offset 0)
:on-click on-left-arrow-click} i/arrow-refactor])
:on-click on-left-arrow-click} i/arrow])
[:div {:class (stl/css :text-palette-content)
:ref container
@ -164,7 +164,7 @@
(when show-arrows?
[:button {:class (stl/css :right-arrow)
:disabled (= offset max-offset)
:on-click on-right-arrow-click} i/arrow-refactor])]))
:on-click on-right-arrow-click} i/arrow])]))
(mf/defc text-palette
{::mf/wrap [mf/memo]}

4
frontend/src/app/main/ui/workspace/text_palette_ctx_menu.cljs
View file

@ -38,7 +38,7 @@
(when (= selected (:id cur-library))
[:span {:class (stl/css :icon-wrapper)}
i/tick-refactor])]))
i/tick])]))
[:li
{:class (stl/css-case :file-library true
@ -52,4 +52,4 @@
(dm/str "(" (count file-typographies) ")")]]
(when (= selected :file)
[:span {:class (stl/css :icon-wrapper)}
i/tick-refactor])]]]))
i/tick])]]]))

18
frontend/src/app/main/ui/workspace/top_toolbar.cljs
View file

@ -58,7 +58,7 @@
:aria-label (tr "workspace.toolbar.image" (sc/get-tooltip :insert-image))
:on-click on-click
:class (stl/css :main-toolbar-options-button)}
i/img-refactor
i/img
[:& file-uploader
{:input-id "image-upload"
:accept cm/str-image-types
@ -130,7 +130,7 @@
:selected (and (nil? selected-drawtool)
(not edition)))
:on-click interrupt}
i/move-refactor]]
i/move]]
[:*
[:li
[:button
@ -140,7 +140,7 @@
:on-click select-drawtool
:data-tool "frame"
:data-test "artboard-btn"}
i/board-refactor]]
i/board]]
[:li
[:button
{:title (tr "workspace.toolbar.rect" (sc/get-tooltip :draw-rect))
@ -149,7 +149,7 @@
:on-click select-drawtool
:data-tool "rect"
:data-test "rect-btn"}
i/rectangle-refactor]]
i/rectangle]]
[:li
[:button
{:title (tr "workspace.toolbar.ellipse" (sc/get-tooltip :draw-ellipse))
@ -158,7 +158,7 @@
:on-click select-drawtool
:data-tool "circle"
:data-test "ellipse-btn"}
i/elipse-refactor]]
i/elipse]]
[:li
[:button
{:title (tr "workspace.toolbar.text" (sc/get-tooltip :draw-text))
@ -166,7 +166,7 @@
:class (stl/css-case :main-toolbar-options-button true :selected (= selected-drawtool :text))
:on-click select-drawtool
:data-tool "text"}
i/text-refactor]]
i/text]]
[:& image-upload]
@ -178,7 +178,7 @@
:on-click select-drawtool
:data-tool "curve"
:data-test "curve-btn"}
i/curve-refactor]]
i/curve]]
[:li
[:button
{:title (tr "workspace.toolbar.path" (sc/get-tooltip :draw-path))
@ -187,7 +187,7 @@
:on-click select-drawtool
:data-tool "path"
:data-test "path-btn"}
i/path-refactor]]
i/path]]
(when *assert*
[:li
@ -195,7 +195,7 @@
{:title "Debugging tool"
:class (stl/css-case :main-toolbar-options-button true :selected (contains? layout :debug-panel))
:on-click toggle-debug-panel}
i/bug-refactor]])]]
i/bug]])]]
[:button {:class (stl/css :toolbar-handler)
:on-click toggle-toolbar}

4
frontend/src/app/main/ui/workspace/viewport/grid_layout_editor.cljs
View file

@ -133,7 +133,7 @@
:y icon-y
:width (/ 22 zoom)
:height (/ 22 zoom)
:href "#icon-add-refactor"}]]))
:href "#icon-add"}]]))
(defn use-drag
[{:keys [on-drag-start on-drag-end on-drag-delta on-drag-position]}]
@ -864,7 +864,7 @@
:on-blur handle-blur-track-input}]
(when (and hovering? (not medium?) (not small?))
[:button {:class (stl/css :grid-editor-button)
:on-click handle-show-track-menu} i/menu-refactor])]])]
:on-click handle-show-track-menu} i/menu])]])]
[:g {:transform (when (= type :row) (dm/fmt "rotate(-90 % %)" (:x marker-p) (:y marker-p)))}
[:& track-marker

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

@ -117,14 +117,14 @@
{:class (stl/css-case :is-toggled (= edit-mode :draw))
:title (tr "workspace.path.actions.draw-nodes" (sc/get-tooltip :draw-nodes))
:on-click on-select-draw-mode}
i/pentool-refactor]
i/pentool]
;; Edit mode
[:button
{:class (stl/css-case :is-toggled (= edit-mode :move))
:title (tr "workspace.path.actions.move-nodes" (sc/get-tooltip :move-nodes))
:on-click on-select-edit-mode}
i/move-refactor]]
i/move]]
[:div {:class (stl/css :sub-actions-group)}
;; Add Node
@ -132,14 +132,14 @@
{:disabled (not (:add-node enabled-buttons))
:title (tr "workspace.path.actions.add-node" (sc/get-tooltip :add-node))
:on-click on-add-node}
i/add-refactor]
i/add]
;; Remove node
[:button
{:disabled (not (:remove-node enabled-buttons))
:title (tr "workspace.path.actions.delete-node" (sc/get-tooltip :delete-node))
:on-click on-remove-node}
i/remove-refactor]]
i/remove-icon]]
[:div {:class (stl/css :sub-actions-group)}
;; Merge Nodes
@ -147,21 +147,21 @@
{:disabled (not (:merge-nodes enabled-buttons))
:title (tr "workspace.path.actions.merge-nodes" (sc/get-tooltip :merge-nodes))
:on-click on-merge-nodes}
i/merge-nodes-refactor]
i/merge-nodes]
;; Join Nodes
[:button
{:disabled (not (:join-nodes enabled-buttons))
:title (tr "workspace.path.actions.join-nodes" (sc/get-tooltip :join-nodes))
:on-click on-join-nodes}
i/join-nodes-refactor]
i/join-nodes]
;; Separate Nodes
[:button
{:disabled (not (:separate-nodes enabled-buttons))
:title (tr "workspace.path.actions.separate-nodes" (sc/get-tooltip :separate-nodes))
:on-click on-separate-nodes}
i/separate-nodes-refactor]]
i/separate-nodes]]
;; Make Corner
[:div {:class (stl/css :sub-actions-group)}
@ -169,14 +169,14 @@
{:disabled (not (:make-corner enabled-buttons))
:title (tr "workspace.path.actions.make-corner" (sc/get-tooltip :make-corner))
:on-click on-make-corner}
i/to-corner-refactor]
i/to-corner]
;; Make Curve
[:button
{:disabled (not (:make-curve enabled-buttons))
:title (tr "workspace.path.actions.make-curve" (sc/get-tooltip :make-curve))
:on-click on-make-curve}
i/to-curve-refactor]]
i/to-curve]]
;; Toggle snap
[:div {:class (stl/css :sub-actions-group)}
@ -184,5 +184,5 @@
{:class (stl/css-case :is-toggled snap-toggled)
:title (tr "workspace.path.actions.snap-nodes" (sc/get-tooltip :snap-nodes))
:on-click on-toggle-snap}
i/snap-nodes-refactor]]]))
i/snap-nodes]]]))

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

@ -153,13 +153,13 @@
:visibility (if show-artboard-names? "visible" "hidden")}
(cond
(:use-for-thumbnail frame)
[:use {:href "#icon-boards-thumbnail-refactor"}]
[:use {:href "#icon-boards-thumbnail"}]
grid-edition?
[:use {:href "#icon-grid-refactor"}]
[:use {:href "#icon-grid"}]
main-instance?
[:use {:href "#icon-component-refactor"}])])
[:use {:href "#icon-component"}])])
[:foreignObject {:x text-pos-x
@ -266,7 +266,7 @@
:on-double-click on-double-click
:on-pointer-enter on-pointer-enter
:on-pointer-leave on-pointer-leave}
i/play-refactor
i/play
[:span (:name flow)]]]]))
(mf/defc frame-flows