3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-13 22:56:37 +02:00
Code Issues Projects Releases Packages Wiki 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
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) (if (:token query-params)
[:> static/error-container {} [:> static/error-container {}
[:div.image i/detach-refactor] [:div.image i/detach]
[:div.main-message (tr "viewer.breaking-change.message")] [:div.main-message (tr "viewer.breaking-change.message")]
[:div.desc-message (tr "viewer.breaking-change.description")]] [: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)} [:div {:class (stl/css :modal-header)}
[:h2 {:class (stl/css :modal-title)} title] [:h2 {:class (stl/css :modal-title)} title]
[:button {:class (stl/css :modal-close-btn) [: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)} [:div {:class (stl/css :modal-content)}
(when (and (string? message) (not= message "")) (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) [:div {:class (stl/css :options-resolve-wrapper)
:on-click toggle-resolved} :on-click toggle-resolved}
[:span {:class (stl/css-case :options-resolve true [: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)) (when (= (:id profile) (:id owner))
[:div {:class (stl/css :options) [:div {:class (stl/css :options)
:on-click on-toggle-options} :on-click on-toggle-options}
i/menu-refactor])] i/menu])]
[:div {:class (stl/css :content)} [:div {:class (stl/css :content)}
(if @edition? (if @edition?
@ -585,7 +585,7 @@
[:span {:class (stl/css :page-name)} (:page-name group)]] [:span {:class (stl/css :page-name)} (:page-name group)]]
[:div {:class (stl/css :section-title)} [: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)]]) [:span {:class (stl/css :page-name)} (:page-name group)]])
[:div {:class (stl/css :threads)} [: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) [:button {:class (stl/css :context-menu-action :submenu-back)
:data-no-close true :data-no-close true
:on-click exit-submenu} :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]] parent-option]]
[:li {:class (stl/css :separator)}]]) [:li {:class (stl/css :separator)}]])
@ -257,14 +257,14 @@
option-name) option-name)
(when (and selected (= data-test selected)) (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) [:a {:class (stl/css :context-menu-action :submenu)
:data-no-close true :data-no-close true
:on-click (enter-submenu option-name sub-options) :on-click (enter-submenu option-name sub-options)
:data-test data-test} :data-test data-test}
option-name 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/defc context-menu-a11y
{::mf/wrap-props false} {::mf/wrap-props false}

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

@ -43,5 +43,5 @@
children children
[:span {:class (stl/css :icon-btn)} [:span {:class (stl/css :icon-btn)}
(if active? (if active?
i/tick-refactor i/tick
i/clipboard-refactor)]])) 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) [:span {:class (stl/css :editable-label-close)
:on-click cancel-edition} :on-click cancel-edition}
i/delete-text-refactor]] i/delete-text]]
[:span {:class final-class [:span {:class final-class
:title tooltip :title tooltip

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

@ -180,7 +180,7 @@
[:span {:class (stl/css :dropdown-button) [:span {:class (stl/css :dropdown-button)
:on-click toggle-dropdown} :on-click toggle-dropdown}
i/arrow-refactor] i/arrow]
[:& dropdown {:show (or is-open? false) [:& dropdown {:show (or is-open? false)
:on-close close-dropdown} :on-close close-dropdown}
@ -199,4 +199,4 @@
:on-click select-item} :on-click select-item}
[:span {:class (stl/css :label)} label] [:span {:class (stl/css :label)} label]
[:span {:class (stl/css :check-icon)} [: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 help-icon' (cond
(and (= input-type "password") (and (= input-type "password")
(= @type' "password")) (= @type' "password"))
i/shown-refactor i/shown
(and (= input-type "password") (and (= input-type "password")
(= @type' "text")) (= @type' "text"))
i/hide-refactor i/hide
:else :else
help-icon) help-icon)
@ -125,7 +125,7 @@
:for (name input-name)} label :for (name input-name)} label
(when is-checkbox? (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? (if is-checkbox?
[:> :input props] [:> :input props]
@ -140,11 +140,11 @@
(when show-valid? (when show-valid?
[:span {:class (stl/css :valid-icon)} [:span {:class (stl/css :valid-icon)}
i/tick-refactor]) i/tick])
(when show-invalid? (when show-invalid?
[:span {:class (stl/css :invalid-icon)} [:span {:class (stl/css :invalid-icon)}
i/close-refactor])])] i/close])])]
(some? children) (some? children)
[:label {:for (name input-name)} [:label {:for (name input-name)}
@ -479,7 +479,7 @@
:caution (:caution item))} :caution (:caution item))}
[:span {:class (stl/css :text)} (:text item)] [:span {:class (stl/css :text)} (:text item)]
[:button {:class (stl/css :icon) [:button {:class (stl/css :icon)
:on-click #(remove-item! item)} i/close-refactor]]])])])) :on-click #(remove-item! item)} i/close]]])])]))
;; --- Validators ;; --- Validators

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

@ -62,4 +62,4 @@
(when (not= "" value) (when (not= "" value)
[:button {:class (stl/css :clear) [:button {:class (stl/css :clear)
:on-click handle-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) (when (and current-icon current-icon-ref)
[:span {:class (stl/css :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 :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} [:& dropdown {:show is-open? :on-close close-dropdown}
[:ul {:ref dropdown-element* :data-direction @dropdown-direction* [:ul {:ref dropdown-element* :data-direction @dropdown-direction*
:class (dm/str dropdown-class " " (stl/css :custom-select-dropdown))} :class (dm/str dropdown-class " " (stl/css :custom-select-dropdown))}
@ -126,4 +126,4 @@
:on-click select-item} :on-click select-item}
(when (and icon icon-ref) [:span {:class (stl/css :icon)} icon-ref]) (when (and icon icon-ref) [:span {:class (stl/css :icon)} icon-ref])
[:span {:class (stl/css :label)} label] [: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?]}] [{:keys [shape main-instance?]}]
(if (ctk/instance-head? shape) (if (ctk/instance-head? shape)
(if main-instance? (if main-instance?
i/component-refactor i/component
i/copy-refactor) i/component-copy)
(case (:type shape) (case (:type shape)
:frame (cond :frame (cond
(and (ctl/flex-layout? shape) (ctl/col? shape)) (and (ctl/flex-layout? shape) (ctl/col? shape))
i/flex-horizontal-refactor i/flex-horizontal
(and (ctl/flex-layout? shape) (ctl/row? shape)) (and (ctl/flex-layout? shape) (ctl/row? shape))
i/flex-vertical-refactor i/flex-vertical
(ctl/grid-layout? shape) (ctl/grid-layout? shape)
i/flex-grid-refactor i/flex-grid
:else :else
i/board-refactor) i/board)
;; TODO -> THUMBNAIL ICON ;; TODO -> THUMBNAIL ICON
:image i/img-refactor :image i/img
:line (if (cts/has-images? shape) i/img-refactor i/path-refactor) :line (if (cts/has-images? shape) i/img i/path)
:circle (if (cts/has-images? shape) i/img-refactor i/elipse-refactor) :circle (if (cts/has-images? shape) i/img i/elipse)
:path (if (cts/has-images? shape) i/img-refactor i/path-refactor) :path (if (cts/has-images? shape) i/img i/path)
:rect (if (cts/has-images? shape) i/img-refactor i/rectangle-refactor) :rect (if (cts/has-images? shape) i/img i/rectangle)
:text i/text-refactor :text i/text
:group (if (:masked-group shape) :group (if (:masked-group shape)
i/mask-refactor i/mask
i/group-refactor) i/group)
:bool (case (:bool-type shape) :bool (case (:bool-type shape)
:difference i/boolean-difference-refactor :difference i/boolean-difference
:exclude i/boolean-exclude-refactor :exclude i/boolean-exclude
:intersection i/boolean-intersection-refactor :intersection i/boolean-intersection
#_:default i/boolean-union-refactor) #_:default i/boolean-union)
:svg-raw i/img-refactor :svg-raw i/img
nil))) nil)))
(mf/defc element-icon-refactor-by-type (mf/defc element-icon-refactor-by-type
[{:keys [type main-instance?] :as props}] [{:keys [type main-instance?] :as props}]
(if main-instance? (if main-instance?
i/component-refactor i/component
(case type (case type
:frame i/board-refactor :frame i/board
:image i/img-refactor :image i/img
:shape i/path-refactor :shape i/path
:text i/text-refactor :text i/text
:mask i/mask-refactor :mask i/mask
:group i/group-refactor :group i/group
nil))) nil)))

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

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

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

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

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

@ -45,7 +45,7 @@
[:div {:class (stl/css :modal-header)} [:div {:class (stl/css :modal-header)}
[:h2 {:class (stl/css :modal-title)} (tr "modals.leave-and-reassign.title")] [:h2 {:class (stl/css :modal-title)} (tr "modals.leave-and-reassign.title")]
[:button {:class (stl/css :modal-close-btn) [: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)} [:div {:class (stl/css :modal-content)}
[:p {:class (stl/css :modal-msg)} [: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)} [:div {:class (stl/css :table-field :options)}
(when (:height-warning? item) (when (:height-warning? item)
[:span {:class (stl/css :icon :failure)} [:span {:class (stl/css :icon :failure)}
i/msg-neutral-refactor]) i/msg-neutral])
[:button {:on-click on-upload [:button {:on-click on-upload
:data-id (dm/str id) :data-id (dm/str id)
@ -242,7 +242,7 @@
[:span {:class (stl/css :icon :close) [:span {:class (stl/css :icon :close)
:data-id (dm/str id) :data-id (dm/str id)
:on-click on-delete} :on-click on-delete}
i/close-refactor]]]))]])) i/close]]]))]]))
(mf/defc installed-font-context-menu (mf/defc installed-font-context-menu
{::mf/props :obj {::mf/props :obj
@ -368,7 +368,7 @@
{:class (stl/css :icon :close) {:class (stl/css :icon :close)
:data-id (dm/str id) :data-id (dm/str id)
:on-click on-delete-variant} :on-click on-delete-variant}
i/add-refactor]])] i/add]])]
(if ^boolean edition? (if ^boolean edition?
[:div {:class (stl/css :table-field :options)} [:div {:class (stl/css :table-field :options)}
@ -380,12 +380,12 @@
(tr "labels.save")] (tr "labels.save")]
[:button {:class (stl/css :icon :close) [:button {:class (stl/css :icon :close)
:on-click on-cancel} :on-click on-cancel}
i/close-refactor]] i/close]]
[:div {:class (stl/css :table-field :options)} [:div {:class (stl/css :table-field :options)}
[:span {:class (stl/css :icon) [:span {:class (stl/css :icon)
:on-click on-menu-open} :on-click on-menu-open}
i/menu-refactor] i/menu]
[:& installed-font-context-menu [:& installed-font-context-menu
{:on-close on-menu-close {:on-close on-menu-close
@ -432,7 +432,7 @@
:else :else
[:div {:class (stl/css :fonts-placeholder)} [: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")]])])) [:div {:class (stl/css :label)} (tr "dashboard.fonts.empty-placeholder")]])]))
(mf/defc fonts-page (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])}]) :background-color (dm/get-in file [:data :options :background])}])
(when (and (:is-shared file) (not library-view?)) (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 :info-wrapper)}
[:div {:class (stl/css :item-info)} [:div {:class (stl/css :item-info)}

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

@ -270,10 +270,10 @@
:icon-fill ready?)} :icon-fill ready?)}
(cond loading? i/loader-pencil (cond loading? i/loader-pencil
ready? i/logo-icon ready? i/logo-icon
import-warn? i/msg-warning-refactor import-warn? i/msg-warning
import-error? i/close-refactor import-error? i/close
import-finish? i/tick-refactor import-finish? i/tick
analyze-error? i/close-refactor)] analyze-error? i/close)]
(if editing? (if editing?
[:div {:class (stl/css :file-name-edit)} [:div {:class (stl/css :file-name-edit)}
@ -287,14 +287,14 @@
(:name entry) (:name entry)
(when ^boolean is-shared? (when ^boolean is-shared?
[:span {:class (stl/css :icon)} [:span {:class (stl/css :icon)}
i/library-refactor])]) i/library])])
[:div {:class (stl/css :edit-entry-buttons)} [:div {:class (stl/css :edit-entry-buttons)}
(when (and (= "application/zip" (:type entry)) (when (and (= "application/zip" (:type entry))
(= status :ready)) (= status :ready))
[:button {:on-click on-edit'} i/curve-refactor]) [:button {:on-click on-edit'} i/curve])
(when can-be-deleted (when can-be-deleted
[:button {:on-click on-delete'} i/delete-refactor])]] [:button {:on-click on-delete'} i/delete])]]
(cond (cond
analyze-error? analyze-error?
@ -322,7 +322,7 @@
[:span {:class (stl/css-case [:span {:class (stl/css-case
:linked-library-tag true :linked-library-tag true
:error error?)} :error error?)}
i/detach-refactor]])))]])) i/detach]])))]]))
(mf/defc import-dialog (mf/defc import-dialog
{::mf/register modal/components {::mf/register modal/components
@ -455,7 +455,7 @@
[:h2 {:class (stl/css :modal-title)} (tr "dashboard.import")] [:h2 {:class (stl/css :modal-title)} (tr "dashboard.import")]
[:button {:class (stl/css :modal-close-btn) [: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)} [:div {:class (stl/css :modal-content)}
(when (and (= :analyzing status) errors?) (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-key-down on-keyup
:on-blur on-blur}] :on-blur on-blur}]
[:span {:class (stl/css :close) [: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)} {:class (stl/css :grid-empty-placeholder)}
[:button {:class (stl/css :create-new) [:button {:class (stl/css :create-new)
:on-click on-click} :on-click on-click}
i/add-refactor]]))) i/add]])))
(mf/defc loading-placeholder (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") :aria-label (tr "dashboard.new-file")
:data-test "project-new-file" :data-test "project-new-file"
:on-key-down handle-create-click} :on-key-down handle-create-click}
i/add-refactor] i/add]
[:button [:button
{:class (stl/css :btn-secondary :btn-small :tooltip :tooltip-bottom) {:class (stl/css :btn-secondary :btn-small :tooltip :tooltip-bottom)
@ -324,7 +324,7 @@
:aria-label (tr "dashboard.options") :aria-label (tr "dashboard.options")
:data-test "project-options" :data-test "project-options"
:on-key-down handle-menu-click} :on-key-down handle-menu-click}
i/menu-refactor]]]] i/menu]]]]
[:div {:class (stl/css :grid-container) :ref rowref} [:div {:class (stl/css :grid-container) :ref rowref}
[:& line-grid [:& line-grid

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

@ -46,17 +46,17 @@
(cond (cond
(empty? search-term) (empty? search-term)
[:div {:class (stl/css :grid-empty-placeholder :search)} [: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")]] [:div {:class (stl/css :text)} (tr "dashboard.type-something")]]
(nil? result) (nil? result)
[:div {:class (stl/css :grid-empty-placeholder :search)} [: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)]] [:div {:class (stl/css :text)} (tr "dashboard.searching-for" search-term)]]
(empty? result) (empty? result)
[:div {:class (stl/css :grid-empty-placeholder :search)} [: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)]] [:div {:class (stl/css :text)} (tr "dashboard.no-matches-for" search-term)]]
:else :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")]) [:h2 {:class (stl/css :modal-title)} (tr "modals.create-webhook.title")])
[:button {:class (stl/css :modal-close-btn) [: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 :modal-content)}
[:div {:class (stl/css :fields-row)} [: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")]) (tr "labels.create-team")])
[:button {:class (stl/css :modal-close-btn) [: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 :modal-content)}
[:& fm/input {:type "text" [:& 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-bar {:collapsable false
:title "Title" :title "Title"
:on-btn-click on-btn-click :on-btn-click on-btn-click
:btn-children i/add-refactor}]] :btn-children i/add}]]
[:& component-wrapper [:& component-wrapper
{:title "Collapsed title and action button"} {:title "Collapsed title and action button"}
[:& title-bar {:collapsable true [:& title-bar {:collapsable true
@ -117,7 +117,7 @@
:on-collapsed toggle-collapsed :on-collapsed toggle-collapsed
:title "Title" :title "Title"
:on-btn-click on-btn-click :on-btn-click on-btn-click
:btn-children i/add-refactor}]] :btn-children i/add}]]
[:& component-wrapper [:& component-wrapper
{:title "Collapsed title and children"} {:title "Collapsed title and children"}
[:& title-bar {:collapsable true [:& title-bar {:collapsable true
@ -179,10 +179,10 @@
[:& radio-buttons {:selected radio-selected [:& radio-buttons {:selected radio-selected
:on-change set-radio-selected :on-change set-radio-selected
:name "listing-style"} :name "listing-style"}
[:& radio-button {:icon i/view-as-list-refactor [:& radio-button {:icon i/view-as-list
:value "first" :value "first"
:id :list}] :id :list}]
[:& radio-button {:icon i/flex-grid-refactor [:& radio-button {:icon i/flex-grid
:value "second" :value "second"
:id :grid}]]] :id :grid}]]]
[:& component-wrapper [:& component-wrapper
@ -190,14 +190,14 @@
[:& radio-buttons {:selected radio-selected [:& radio-buttons {:selected radio-selected
:on-change set-radio-selected :on-change set-radio-selected
:name "listing-style"} :name "listing-style"}
[:& radio-button {:icon i/view-as-list-refactor [:& radio-button {:icon i/view-as-list
:value "first" :value "first"
:id :first}] :id :first}]
[:& radio-button {:icon i/flex-grid-refactor [:& radio-button {:icon i/flex-grid
:value "second" :value "second"
:id :second}] :id :second}]
[:& radio-button {:icon i/add-refactor [:& radio-button {:icon i/add
:value "third" :value "third"
:id :third}]]] :id :third}]]]
@ -206,18 +206,18 @@
[:& radio-buttons {:selected radio-selected [:& radio-buttons {:selected radio-selected
:on-change set-radio-selected :on-change set-radio-selected
:name "listing-style"} :name "listing-style"}
[:& radio-button {:icon i/view-as-list-refactor [:& radio-button {:icon i/view-as-list
:value "first" :value "first"
:id :first}] :id :first}]
[:& radio-button {:icon i/flex-grid-refactor [:& radio-button {:icon i/flex-grid
:value "second" :value "second"
:id :second}] :id :second}]
[:& radio-button {:icon i/add-refactor [:& radio-button {:icon i/add
:value "third" :value "third"
:id :third}] :id :third}]
[:& radio-button {:icon i/board-refactor [:& radio-button {:icon i/board
:value "forth" :value "forth"
:id :forth}]]]] :id :forth}]]]]
[:div {:class (stl/css :components-group)} [:div {:class (stl/css :components-group)}
@ -229,7 +229,7 @@
[:& component-wrapper [:& component-wrapper
{:title "Button primary with icon"} {:title "Button primary with icon"}
[:button {:class (stl/css :button-primary)} [:button {:class (stl/css :button-primary)}
i/add-refactor]] i/add]]
[:& component-wrapper [:& component-wrapper
{:title "Button secondary"} {:title "Button secondary"}
@ -238,7 +238,7 @@
[:& component-wrapper [:& component-wrapper
{:title "Button secondary with icon"} {:title "Button secondary with icon"}
[:button {:class (stl/css :button-secondary)} [:button {:class (stl/css :button-secondary)}
i/add-refactor]] i/add]]
[:& component-wrapper [:& component-wrapper
{:title "Button tertiary"} {:title "Button tertiary"}
@ -247,7 +247,7 @@
[:& component-wrapper [:& component-wrapper
{:title "Button tertiary with icon"} {:title "Button tertiary with icon"}
[:button {:class (stl/css :button-tertiary)} [:button {:class (stl/css :button-tertiary)}
i/add-refactor]]] i/add]]]
[:div {:class (stl/css :components-group)} [:div {:class (stl/css :components-group)}
[:h3 "Inputs"] [:h3 "Inputs"]
[:& component-wrapper [:& component-wrapper
@ -265,6 +265,6 @@
{:title "Input with icon"} {:title "Input with icon"}
[:div {:class (stl/css :input-wrapper)} [:div {:class (stl/css :input-wrapper)}
[:span {:class (stl/css :input-label)} [:span {:class (stl/css :input-label)}
i/add-refactor] i/add]
[:input {:class (stl/css :basic-input) [:input {:class (stl/css :basic-input)
:placeholder "----"}]]]]]]])) :placeholder "----"}]]]]]]]))

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

@ -97,7 +97,7 @@
[:div {:class (stl/css :modal-header)} [:div {:class (stl/css :modal-header)}
[:h2 {:class (stl/css :modal-title)} title] [:h2 {:class (stl/css :modal-title)} title]
[:button {:class (stl/css :modal-close-btn) [: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)} [:div {:class (stl/css :modal-content)}
(when (and (string? subtitle) (not= subtitle "")) (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] [:h2 {:class (stl/css :modal-title)} title]
[:button {:class (stl/css :modal-close-btn) [:button {:class (stl/css :modal-close-btn)
:on-click cancel-fn} :on-click cancel-fn}
i/close-refactor]] i/close]]
[:* [:*
[:div {:class (stl/css :modal-content)} [:div {:class (stl/css :modal-content)}
@ -99,12 +99,12 @@
(cond (cond
all-checked? [:span {:class (stl/css-case :checkobox-tick true all-checked? [:span {:class (stl/css-case :checkobox-tick true
:global/checked true)} :global/checked true)}
i/tick-refactor] i/tick]
all-unchecked? [:span {:class (stl/css-case :checkobox-tick true all-unchecked? [:span {:class (stl/css-case :checkobox-tick true
:global/uncheked true)}] :global/uncheked true)}]
:else [:span {:class (stl/css-case :checkobox-tick true :else [:span {:class (stl/css-case :checkobox-tick true
:global/intermediate true)} :global/intermediate true)}
i/remove-refactor])]] i/remove-icon])]]
[:div {:class (stl/css :selection-title)} [:div {:class (stl/css :selection-title)}
(tr "dashboard.export-multiple.selected" (tr "dashboard.export-multiple.selected"
(c (count enabled-exports)) (c (count enabled-exports))
@ -123,7 +123,7 @@
(if (:enabled export) (if (:enabled export)
[:span {:class (stl/css-case :checkobox-tick true [:span {:class (stl/css-case :checkobox-tick true
:global/checked true)} :global/checked true)}
i/tick-refactor] i/tick]
[:span {:class (stl/css-case :checkobox-tick true [:span {:class (stl/css-case :checkobox-tick true
:global/uncheked true)}])] :global/uncheked true)}])]
@ -318,8 +318,8 @@
[:div {:class (stl/css :file-name)} [:div {:class (stl/css :file-name)}
[:span {:class (stl/css :file-icon)} [:span {:class (stl/css :file-icon)}
(cond (:export-success? file) i/tick-refactor (cond (:export-success? file) i/tick
(:export-error? file) i/close-refactor (:export-error? file) i/close
(:loading? file) i/loader-pencil)] (:loading? file) i/loader-pencil)]
[:div {:class (stl/css :file-name-label)} [:div {:class (stl/css :file-name-label)}
@ -417,7 +417,7 @@
[:h2 {:class (stl/css :modal-title)} [:h2 {:class (stl/css :modal-title)}
(tr "dashboard.export.title")] (tr "dashboard.export.title")]
[:button {:class (stl/css :modal-close-btn) [:button {:class (stl/css :modal-close-btn)
:on-click on-cancel} i/close-refactor]] :on-click on-cancel} i/close]]
(cond (cond
(= status :prepare) (= status :prepare)
@ -440,7 +440,7 @@
;; dashboard.export.options.merge.title ;; dashboard.export.options.merge.title
[:span {:class (stl/css-case :global/checked (= selected type))} [:span {:class (stl/css-case :global/checked (= selected type))}
(when (= selected type) (when (= selected type)
i/status-tick-refactor)] i/status-tick)]
[:div {:class (stl/css :option-content)} [:div {:class (stl/css :option-content)}
[:h3 {:class (stl/css :modal-subtitle)} (tr (dm/str "dashboard.export.options." (d/name type) ".title"))] [: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"))]] [: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 (defmacro icon-xref
[id & [class]] [id & [class]]
(let [href (str "#icon-" (name id)) (let [href (str "#icon-" (name id))
class (or class (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"))]
`(rumext.v2/html `(rumext.v2/html
[:svg {:width 500 :height 500 :class ~class} [:svg {:width 500 :height 500 :class ~class}
[:use {:href ~href}]]))) [: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-gitlab (icon-xref :brand-gitlab))
(def ^:icon brand-google (icon-xref :brand-google)) (def ^:icon brand-google (icon-xref :brand-google))
(def ^:icon absolute-refactor (icon-xref :absolute)) (def ^:icon absolute (icon-xref :absolute))
(def ^:icon add-refactor (icon-xref :add)) (def ^:icon add (icon-xref :add))
(def ^:icon align-bottom-refactor (icon-xref :align-bottom)) (def ^:icon align-bottom (icon-xref :align-bottom))
(def ^:icon align-content-column-around-refactor (icon-xref :align-content-column-around)) (def ^:icon align-content-column-around (icon-xref :align-content-column-around))
(def ^:icon align-content-column-between-refactor (icon-xref :align-content-column-between)) (def ^:icon align-content-column-between (icon-xref :align-content-column-between))
(def ^:icon align-content-column-center-refactor (icon-xref :align-content-column-center)) (def ^:icon align-content-column-center (icon-xref :align-content-column-center))
(def ^:icon align-content-column-end-refactor (icon-xref :align-content-column-end)) (def ^:icon align-content-column-end (icon-xref :align-content-column-end))
(def ^:icon align-content-column-evenly-refactor (icon-xref :align-content-column-evenly)) (def ^:icon align-content-column-evenly (icon-xref :align-content-column-evenly))
(def ^:icon align-content-column-start-refactor (icon-xref :align-content-column-start)) (def ^:icon align-content-column-start (icon-xref :align-content-column-start))
(def ^:icon align-content-column-stretch-refactor (icon-xref :align-content-column-stretch)) (def ^:icon align-content-column-stretch (icon-xref :align-content-column-stretch))
(def ^:icon align-content-row-around-refactor (icon-xref :align-content-row-around)) (def ^:icon align-content-row-around (icon-xref :align-content-row-around))
(def ^:icon align-content-row-between-refactor (icon-xref :align-content-row-between)) (def ^:icon align-content-row-between (icon-xref :align-content-row-between))
(def ^:icon align-content-row-center-refactor (icon-xref :align-content-row-center)) (def ^:icon align-content-row-center (icon-xref :align-content-row-center))
(def ^:icon align-content-row-end-refactor (icon-xref :align-content-row-end)) (def ^:icon align-content-row-end (icon-xref :align-content-row-end))
(def ^:icon align-content-row-evenly-refactor (icon-xref :align-content-row-evenly)) (def ^:icon align-content-row-evenly (icon-xref :align-content-row-evenly))
(def ^:icon align-content-row-start-refactor (icon-xref :align-content-row-start)) (def ^:icon align-content-row-start (icon-xref :align-content-row-start))
(def ^:icon align-content-row-stretch-refactor (icon-xref :align-content-row-stretch)) (def ^:icon align-content-row-stretch (icon-xref :align-content-row-stretch))
(def ^:icon align-horizontal-center-refactor (icon-xref :align-horizontal-center)) (def ^:icon align-horizontal-center (icon-xref :align-horizontal-center))
(def ^:icon align-items-column-center-refactor (icon-xref :align-items-column-center)) (def ^:icon align-items-column-center (icon-xref :align-items-column-center))
(def ^:icon align-items-column-end-refactor (icon-xref :align-items-column-end)) (def ^:icon align-items-column-end (icon-xref :align-items-column-end))
(def ^:icon align-items-column-start-refactor (icon-xref :align-items-column-start)) (def ^:icon align-items-column-start (icon-xref :align-items-column-start))
(def ^:icon align-items-row-center-refactor (icon-xref :align-items-row-center)) (def ^:icon align-items-row-center (icon-xref :align-items-row-center))
(def ^:icon align-items-row-end-refactor (icon-xref :align-items-row-end)) (def ^:icon align-items-row-end (icon-xref :align-items-row-end))
(def ^:icon align-items-row-start-refactor (icon-xref :align-items-row-start)) (def ^:icon align-items-row-start (icon-xref :align-items-row-start))
(def ^:icon align-left-refactor (icon-xref :align-left)) (def ^:icon align-left (icon-xref :align-left))
(def ^:icon align-right-refactor (icon-xref :align-right)) (def ^:icon align-right (icon-xref :align-right))
(def ^:icon align-self-column-bottom-refactor (icon-xref :align-self-column-bottom)) (def ^:icon align-self-column-bottom (icon-xref :align-self-column-bottom))
(def ^:icon align-self-column-center-refactor (icon-xref :align-self-column-center)) (def ^:icon align-self-column-center (icon-xref :align-self-column-center))
(def ^:icon align-self-column-stretch-refactor (icon-xref :align-self-column-stretch)) (def ^:icon align-self-column-stretch (icon-xref :align-self-column-stretch))
(def ^:icon align-self-column-top-refactor (icon-xref :align-self-column-top)) (def ^:icon align-self-column-top (icon-xref :align-self-column-top))
(def ^:icon align-self-row-center-refactor (icon-xref :align-self-row-center)) (def ^:icon align-self-row-center (icon-xref :align-self-row-center))
(def ^:icon align-self-row-left-refactor (icon-xref :align-self-row-left)) (def ^:icon align-self-row-left (icon-xref :align-self-row-left))
(def ^:icon align-self-row-right-refactor (icon-xref :align-self-row-right)) (def ^:icon align-self-row-right (icon-xref :align-self-row-right))
(def ^:icon align-self-row-stretch-refactor (icon-xref :align-self-row-stretch)) (def ^:icon align-self-row-stretch (icon-xref :align-self-row-stretch))
(def ^:icon align-top-refactor (icon-xref :align-top)) (def ^:icon align-top (icon-xref :align-top))
(def ^:icon align-vertical-center-refactor (icon-xref :align-vertical-center)) (def ^:icon align-vertical-center (icon-xref :align-vertical-center))
(def ^:icon arrow-refactor (icon-xref :arrow)) (def ^:icon arrow (icon-xref :arrow))
(def ^:icon asc-sort-refactor (icon-xref :asc-sort)) (def ^:icon asc-sort (icon-xref :asc-sort))
(def ^:icon board-refactor (icon-xref :board)) (def ^:icon board (icon-xref :board))
(def ^:icon boards-thumbnail-refactor (icon-xref :boards-thumbnail)) (def ^:icon boards-thumbnail (icon-xref :boards-thumbnail))
(def ^:icon boolean-difference-refactor (icon-xref :boolean-difference)) (def ^:icon boolean-difference (icon-xref :boolean-difference))
(def ^:icon boolean-exclude-refactor (icon-xref :boolean-exclude)) (def ^:icon boolean-exclude (icon-xref :boolean-exclude))
(def ^:icon boolean-flatten-refactor (icon-xref :boolean-flatten)) (def ^:icon boolean-flatten (icon-xref :boolean-flatten))
(def ^:icon boolean-intersection-refactor (icon-xref :boolean-intersection)) (def ^:icon boolean-intersection (icon-xref :boolean-intersection))
(def ^:icon boolean-union-refactor (icon-xref :boolean-union)) (def ^:icon boolean-union (icon-xref :boolean-union))
(def ^:icon bug-refactor (icon-xref :bug)) (def ^:icon bug (icon-xref :bug))
(def ^:icon clip-content-refactor (icon-xref :clip-content)) (def ^:icon clip-content (icon-xref :clip-content))
(def ^:icon clipboard-refactor (icon-xref :clipboard)) (def ^:icon clipboard (icon-xref :clipboard))
(def ^:icon close-small-refactor (icon-xref :close-small)) (def ^:icon close-small (icon-xref :close-small))
(def ^:icon close-refactor (icon-xref :close)) (def ^:icon close (icon-xref :close))
(def ^:icon code-refactor (icon-xref :code)) (def ^:icon code (icon-xref :code))
(def ^:icon column-reverse-refactor (icon-xref :column-reverse)) (def ^:icon column-reverse (icon-xref :column-reverse))
(def ^:icon column-refactor (icon-xref :column)) (def ^:icon column (icon-xref :column))
(def ^:icon comments-refactor (icon-xref :comments)) (def ^:icon comments (icon-xref :comments))
(def ^:icon copy-refactor (icon-xref :component-copy)) (def ^:icon component-copy (icon-xref :component-copy))
(def ^:icon component-refactor (icon-xref :component)) (def ^:icon component (icon-xref :component))
(def ^:icon constraint-horizontal-refactor (icon-xref :constraint-horizontal)) (def ^:icon constraint-horizontal (icon-xref :constraint-horizontal))
(def ^:icon constraint-vertical-refactor (icon-xref :constraint-vertical)) (def ^:icon constraint-vertical (icon-xref :constraint-vertical))
(def ^:icon corner-bottomleft-refactor (icon-xref :corner-bottom-left)) (def ^:icon corner-bottom-left (icon-xref :corner-bottom-left))
(def ^:icon corner-bottomright-refactor (icon-xref :corner-bottom-right)) (def ^:icon corner-bottom-right (icon-xref :corner-bottom-right))
(def ^:icon corner-bottom-refactor (icon-xref :corner-bottom)) (def ^:icon corner-bottom (icon-xref :corner-bottom))
(def ^:icon corner-center-refactor (icon-xref :corner-center)) (def ^:icon corner-center (icon-xref :corner-center))
(def ^:icon corner-radius-refactor (icon-xref :corner-radius)) (def ^:icon corner-radius (icon-xref :corner-radius))
(def ^:icon corner-top-refactor (icon-xref :corner-top)) (def ^:icon corner-top (icon-xref :corner-top))
(def ^:icon corner-topleft-refactor (icon-xref :corner-top-left)) (def ^:icon corner-top-left (icon-xref :corner-top-left))
(def ^:icon corner-topright-refactor (icon-xref :corner-top-right)) (def ^:icon corner-top-right (icon-xref :corner-top-right))
(def ^:icon curve-refactor (icon-xref :curve)) (def ^:icon curve (icon-xref :curve))
(def ^:icon delete-text-refactor (icon-xref :delete-text)) (def ^:icon delete-text (icon-xref :delete-text))
(def ^:icon delete-refactor (icon-xref :delete)) (def ^:icon delete (icon-xref :delete))
(def ^:icon desc-sort-refactor (icon-xref :desc-sort)) (def ^:icon desc-sort (icon-xref :desc-sort))
(def ^:icon detach-refactor (icon-xref :detach)) (def ^:icon detach (icon-xref :detach))
(def ^:icon detached-refactor (icon-xref :detached)) (def ^:icon detached (icon-xref :detached))
(def ^:icon distribute-horizontally-refactor (icon-xref :distribute-horizontally)) (def ^:icon distribute-horizontally (icon-xref :distribute-horizontally))
(def ^:icon distribute-vertical-spacing-refactor (icon-xref :distribute-vertical-spacing)) (def ^:icon distribute-vertical-spacing (icon-xref :distribute-vertical-spacing))
(def ^:icon document-refactor (icon-xref :document)) (def ^:icon document (icon-xref :document))
(def ^:icon download-refactor (icon-xref :download)) (def ^:icon download (icon-xref :download))
(def ^:icon drop-refactor (icon-xref :drop)) (def ^:icon drop-icon (icon-xref :drop))
(def ^:icon easing-ease-in-out-refactor (icon-xref :easing-ease-in-out)) (def ^:icon easing-ease-in-out (icon-xref :easing-ease-in-out))
(def ^:icon easing-ease-in-refactor (icon-xref :easing-ease-in)) (def ^:icon easing-ease-in (icon-xref :easing-ease-in))
(def ^:icon easing-ease-out-refactor (icon-xref :easing-ease-out)) (def ^:icon easing-ease-out (icon-xref :easing-ease-out))
(def ^:icon easing-ease-refactor (icon-xref :easing-ease)) (def ^:icon easing-ease (icon-xref :easing-ease))
(def ^:icon easing-linear-refactor (icon-xref :easing-linear)) (def ^:icon easing-linear (icon-xref :easing-linear))
(def ^:icon effects-refactor (icon-xref :effects)) (def ^:icon effects (icon-xref :effects))
(def ^:icon elipse-refactor (icon-xref :elipse)) (def ^:icon elipse (icon-xref :elipse))
(def ^:icon exit-refactor (icon-xref :exit)) (def ^:icon exit (icon-xref :exit))
(def ^:icon expand-refactor (icon-xref :expand)) (def ^:icon expand (icon-xref :expand))
(def ^:icon feedback-refactor (icon-xref :feedback)) (def ^:icon feedback (icon-xref :feedback))
(def ^:icon fill-content-refactor (icon-xref :fill-content)) (def ^:icon fill-content (icon-xref :fill-content))
(def ^:icon filter-refactor (icon-xref :filter)) (def ^:icon filter-icon (icon-xref :filter))
(def ^:icon fixed-width-refactor (icon-xref :fixed-width)) (def ^:icon fixed-width (icon-xref :fixed-width))
(def ^:icon flex-grid-refactor (icon-xref :flex-grid)) (def ^:icon flex-grid (icon-xref :flex-grid))
(def ^:icon flex-horizontal-refactor (icon-xref :flex-horizontal)) (def ^:icon flex-horizontal (icon-xref :flex-horizontal))
(def ^:icon flex-vertical-refactor (icon-xref :flex-vertical)) (def ^:icon flex-vertical (icon-xref :flex-vertical))
(def ^:icon flex-refactor (icon-xref :flex)) (def ^:icon flex (icon-xref :flex))
(def ^:icon flip-horizontal-refactor (icon-xref :flip-horizontal)) (def ^:icon flip-horizontal (icon-xref :flip-horizontal))
(def ^:icon flip-vertical-refactor (icon-xref :flip-vertical)) (def ^:icon flip-vertical (icon-xref :flip-vertical))
(def ^:icon gap-horizontal-refactor (icon-xref :gap-horizontal)) (def ^:icon gap-horizontal (icon-xref :gap-horizontal))
(def ^:icon gap-vertical-refactor (icon-xref :gap-vertical)) (def ^:icon gap-vertical (icon-xref :gap-vertical))
(def ^:icon graphics-refactor (icon-xref :graphics)) (def ^:icon graphics (icon-xref :graphics))
(def ^:icon grid-column-refactor (icon-xref :grid-column)) (def ^:icon grid-column (icon-xref :grid-column))
(def ^:icon grid-columns-refactor (icon-xref :grid-columns)) (def ^:icon grid-columns (icon-xref :grid-columns))
(def ^:icon grid-gutter-refactor (icon-xref :grid-gutter)) (def ^:icon grid-gutter (icon-xref :grid-gutter))
(def ^:icon grid-margin-refactor (icon-xref :grid-margin)) (def ^:icon grid-margin (icon-xref :grid-margin))
(def ^:icon grid-refactor (icon-xref :grid)) (def ^:icon grid (icon-xref :grid))
(def ^:icon grid-row-refactor (icon-xref :grid-row)) (def ^:icon grid-row (icon-xref :grid-row))
(def ^:icon grid-rows-refactor (icon-xref :grid-rows)) (def ^:icon grid-rows (icon-xref :grid-rows))
(def ^:icon grid-square-refactor (icon-xref :grid-square)) (def ^:icon grid-square (icon-xref :grid-square))
(def ^:icon group-refactor (icon-xref :group)) (def ^:icon group (icon-xref :group))
(def ^:icon gutter-horizontal-refactor (icon-xref :gutter-horizontal)) (def ^:icon gutter-horizontal (icon-xref :gutter-horizontal))
(def ^:icon gutter-vertical-refactor (icon-xref :gutter-vertical)) (def ^:icon gutter-vertical (icon-xref :gutter-vertical))
(def ^:icon help-refactor (icon-xref :help)) (def ^:icon help (icon-xref :help))
(def ^:icon hide-refactor (icon-xref :hide)) (def ^:icon hide (icon-xref :hide))
(def ^:icon history-refactor (icon-xref :history)) (def ^:icon history (icon-xref :history))
(def ^:icon hsva-refactor (icon-xref :hsva)) (def ^:icon hsva (icon-xref :hsva))
(def ^:icon hug-content-refactor (icon-xref :hug-content)) (def ^:icon hug-content (icon-xref :hug-content))
(def ^:icon icon-refactor (icon-xref :icon)) (def ^:icon icon (icon-xref :icon))
(def ^:icon img-refactor (icon-xref :img)) (def ^:icon img (icon-xref :img))
(def ^:icon interaction-refactor (icon-xref :interaction)) (def ^:icon interaction (icon-xref :interaction))
(def ^:icon join-nodes-refactor (icon-xref :join-nodes)) (def ^:icon join-nodes (icon-xref :join-nodes))
(def ^:icon justify-content-column-around-refactor (icon-xref :justify-content-column-around)) (def ^:icon justify-content-column-around (icon-xref :justify-content-column-around))
(def ^:icon justify-content-column-between-refactor (icon-xref :justify-content-column-between)) (def ^:icon justify-content-column-between (icon-xref :justify-content-column-between))
(def ^:icon justify-content-column-center-refactor (icon-xref :justify-content-column-center)) (def ^:icon justify-content-column-center (icon-xref :justify-content-column-center))
(def ^:icon justify-content-column-end-refactor (icon-xref :justify-content-column-end)) (def ^:icon justify-content-column-end (icon-xref :justify-content-column-end))
(def ^:icon justify-content-column-evenly-refactor (icon-xref :justify-content-column-evenly)) (def ^:icon justify-content-column-evenly (icon-xref :justify-content-column-evenly))
(def ^:icon justify-content-column-start-refactor (icon-xref :justify-content-column-start)) (def ^:icon justify-content-column-start (icon-xref :justify-content-column-start))
(def ^:icon justify-content-row-around-refactor (icon-xref :justify-content-row-around)) (def ^:icon justify-content-row-around (icon-xref :justify-content-row-around))
(def ^:icon justify-content-row-between-refactor (icon-xref :justify-content-row-between)) (def ^:icon justify-content-row-between (icon-xref :justify-content-row-between))
(def ^:icon justify-content-row-center-refactor (icon-xref :justify-content-row-center)) (def ^:icon justify-content-row-center (icon-xref :justify-content-row-center))
(def ^:icon justify-content-row-end-refactor (icon-xref :justify-content-row-end)) (def ^:icon justify-content-row-end (icon-xref :justify-content-row-end))
(def ^:icon justify-content-row-evenly-refactor (icon-xref :justify-content-row-evenly)) (def ^:icon justify-content-row-evenly (icon-xref :justify-content-row-evenly))
(def ^:icon justify-content-row-start-refactor (icon-xref :justify-content-row-start)) (def ^:icon justify-content-row-start (icon-xref :justify-content-row-start))
(def ^:icon layers-refactor (icon-xref :layers)) (def ^:icon layers (icon-xref :layers))
(def ^:icon library-refactor (icon-xref :library)) (def ^:icon library (icon-xref :library))
(def ^:icon locate-refactor (icon-xref :locate)) (def ^:icon locate (icon-xref :locate))
(def ^:icon lock-refactor (icon-xref :lock)) ;; This icon will not change (def ^:icon lock (icon-xref :lock))
(def ^:icon logo-refactor (icon-xref :penpot-logo-icon)) (def ^:icon margin-bottom (icon-xref :margin-bottom))
(def ^:icon margin-bottom-refactor (icon-xref :margin-bottom)) (def ^:icon margin-left (icon-xref :margin-left))
(def ^:icon margin-left-refactor (icon-xref :margin-left)) (def ^:icon margin-left-right (icon-xref :margin-left-right))
(def ^:icon margin-left-right-refactor (icon-xref :margin-left-right)) (def ^:icon margin-right (icon-xref :margin-right))
(def ^:icon margin-right-refactor (icon-xref :margin-right)) (def ^:icon margin-top-bottom (icon-xref :margin-top-bottom))
(def ^:icon margin-top-bottom-refactor (icon-xref :margin-top-bottom)) (def ^:icon margin-top (icon-xref :margin-top))
(def ^:icon margin-top-refactor (icon-xref :margin-top)) (def ^:icon margin (icon-xref :margin))
(def ^:icon margin-refactor (icon-xref :margin)) (def ^:icon mask (icon-xref :mask))
(def ^:icon mask-refactor (icon-xref :mask)) (def ^:icon masked (icon-xref :masked))
(def ^:icon masked-refactor (icon-xref :masked)) (def ^:icon menu (icon-xref :menu))
(def ^:icon menu-refactor (icon-xref :menu)) (def ^:icon merge-nodes (icon-xref :merge-nodes))
(def ^:icon merge-nodes-refactor (icon-xref :merge-nodes)) (def ^:icon move (icon-xref :move))
(def ^:icon move-refactor (icon-xref :move)) (def ^:icon msg-error (icon-xref :msg-error))
(def ^:icon msg-error-refactor (icon-xref :msg-error)) (def ^:icon msg-neutral (icon-xref :msg-neutral))
(def ^:icon msg-neutral-refactor (icon-xref :msg-neutral)) (def ^:icon msg-success (icon-xref :msg-success))
(def ^:icon msg-success-refactor (icon-xref :msg-success)) (def ^:icon msg-warning (icon-xref :msg-warning))
(def ^:icon msg-warning-refactor (icon-xref :msg-warning)) (def ^:icon open-link (icon-xref :open-link))
(def ^:icon open-link-refactor (icon-xref :open-link)) (def ^:icon padding-bottom (icon-xref :padding-bottom))
(def ^:icon padding-bottom-refactor (icon-xref :padding-bottom)) (def ^:icon padding-extended (icon-xref :padding-extended))
(def ^:icon padding-extended-refactor (icon-xref :padding-extended)) (def ^:icon padding-left-right (icon-xref :padding-left-right))
(def ^:icon padding-left-right-refactor (icon-xref :padding-left-right)) (def ^:icon padding-left (icon-xref :padding-left))
(def ^:icon padding-left-refactor (icon-xref :padding-left)) (def ^:icon padding-right (icon-xref :padding-right))
(def ^:icon padding-right-refactor (icon-xref :padding-right)) (def ^:icon padding-top-bottom (icon-xref :padding-top-bottom))
(def ^:icon padding-top-bottom-refactor (icon-xref :padding-top-bottom)) (def ^:icon padding-top (icon-xref :padding-top))
(def ^:icon padding-top-refactor (icon-xref :padding-top)) (def ^:icon path (icon-xref :path))
(def ^:icon path-refactor (icon-xref :path)) (def ^:icon pentool (icon-xref :pentool))
(def ^:icon pentool-refactor (icon-xref :pentool)) (def ^:icon picker (icon-xref :picker))
(def ^:icon picker-refactor (icon-xref :picker)) (def ^:icon pin (icon-xref :pin))
(def ^:icon pin-refactor (icon-xref :pin)) (def ^:icon play (icon-xref :play))
(def ^:icon play-refactor (icon-xref :play)) (def ^:icon rectangle (icon-xref :rectangle))
(def ^:icon rectangle-refactor (icon-xref :rectangle)) (def ^:icon reload (icon-xref :reload))
(def ^:icon reload-refactor (icon-xref :reload)) (def ^:icon remove-icon (icon-xref :remove))
(def ^:icon remove-refactor (icon-xref :remove)) (def ^:icon rgba-complementary (icon-xref :rgba-complementary))
(def ^:icon rgba-complementary-refactor (icon-xref :rgba-complementary)) (def ^:icon rgba (icon-xref :rgba))
(def ^:icon rgba-refactor (icon-xref :rgba)) (def ^:icon rotation (icon-xref :rotation))
(def ^:icon rotation-refactor (icon-xref :rotation)) (def ^:icon row-reverse (icon-xref :row-reverse))
(def ^:icon row-reverse-refactor (icon-xref :row-reverse)) (def ^:icon row (icon-xref :row))
(def ^:icon row-refactor (icon-xref :row)) (def ^:icon search (icon-xref :search))
(def ^:icon search-refactor (icon-xref :search)) (def ^:icon separate-nodes (icon-xref :separate-nodes))
(def ^:icon separate-nodes-refactor (icon-xref :separate-nodes)) (def ^:icon shown (icon-xref :shown))
(def ^:icon shown-refactor (icon-xref :shown)) (def ^:icon size-horizontal (icon-xref :size-horizontal))
(def ^:icon size-horizontal-refactor (icon-xref :size-horizontal)) (def ^:icon size-vertical (icon-xref :size-vertical))
(def ^:icon size-vertical-refactor (icon-xref :size-vertical)) (def ^:icon snap-nodes (icon-xref :snap-nodes))
(def ^:icon snap-nodes-refactor (icon-xref :snap-nodes)) (def ^:icon status-alert (icon-xref :status-alert))
(def ^:icon status-alert-refactor (icon-xref :status-alert)) (def ^:icon status-tick (icon-xref :status-tick))
(def ^:icon status-tick-refactor (icon-xref :status-tick)) (def ^:icon status-update (icon-xref :status-update))
(def ^:icon status-update-refactor (icon-xref :status-update)) (def ^:icon status-wrong (icon-xref :status-wrong))
(def ^:icon status-wrong-refactor (icon-xref :status-wrong)) (def ^:icon stroke-arrow (icon-xref :stroke-arrow))
(def ^:icon stroke-arrow-refactor (icon-xref :stroke-arrow)) (def ^:icon stroke-circle (icon-xref :stroke-circle))
(def ^:icon stroke-circle-refactor (icon-xref :stroke-circle)) (def ^:icon stroke-diamond (icon-xref :stroke-diamond))
(def ^:icon stroke-diamond-refactor (icon-xref :stroke-diamond)) (def ^:icon stroke-rectangle (icon-xref :stroke-rectangle))
(def ^:icon stroke-rectangle-refactor (icon-xref :stroke-rectangle)) (def ^:icon stroke-rounded (icon-xref :stroke-rounded))
(def ^:icon stroke-rounded-refactor (icon-xref :stroke-rounded)) (def ^:icon stroke-size (icon-xref :stroke-size))
(def ^:icon stroke-size-refactor (icon-xref :stroke-size)) (def ^:icon stroke-squared (icon-xref :stroke-squared))
(def ^:icon stroke-squared-refactor (icon-xref :stroke-squared)) (def ^:icon stroke-triangle (icon-xref :stroke-triangle))
(def ^:icon stroke-triangle-refactor (icon-xref :stroke-triangle)) (def ^:icon svg (icon-xref :svg))
(def ^:icon svg-refactor (icon-xref :svg)) (def ^:icon swatches (icon-xref :swatches))
(def ^:icon swatches-refactor (icon-xref :swatches)) (def ^:icon switch (icon-xref :switch))
(def ^:icon switch-refactor (icon-xref :switch)) (def ^:icon text-align-center (icon-xref :text-align-center))
(def ^:icon text-align-center-refactor (icon-xref :text-align-center)) (def ^:icon text-align-left (icon-xref :text-align-left))
(def ^:icon text-align-left-refactor (icon-xref :text-align-left)) (def ^:icon text-align-right (icon-xref :text-align-right))
(def ^:icon text-align-right-refactor (icon-xref :text-align-right)) (def ^:icon text-auto-height (icon-xref :text-auto-height))
(def ^:icon text-auto-height-refactor (icon-xref :text-auto-height)) (def ^:icon text-auto-width (icon-xref :text-auto-width))
(def ^:icon text-auto-width-refactor (icon-xref :text-auto-width)) (def ^:icon text-bottom (icon-xref :text-bottom))
(def ^:icon text-bottom-refactor (icon-xref :text-bottom)) (def ^:icon text-fixed (icon-xref :text-fixed))
(def ^:icon text-fixed-refactor (icon-xref :text-fixed)) (def ^:icon text-justify (icon-xref :text-justify))
(def ^:icon text-justify-refactor (icon-xref :text-justify)) (def ^:icon text-letterspacing (icon-xref :text-letterspacing))
(def ^:icon text-letterspacing-refactor (icon-xref :text-letterspacing)) (def ^:icon text-lineheight (icon-xref :text-lineheight))
(def ^:icon text-lineheight-refactor (icon-xref :text-lineheight)) (def ^:icon text-lowercase (icon-xref :text-lowercase))
(def ^:icon text-lowercase-refactor (icon-xref :text-lowercase)) (def ^:icon text-ltr (icon-xref :text-ltr))
(def ^:icon text-ltr-refactor (icon-xref :text-ltr)) (def ^:icon text-middle (icon-xref :text-middle))
(def ^:icon text-middle-refactor (icon-xref :text-middle)) (def ^:icon text-mixed (icon-xref :text-mixed))
(def ^:icon text-mixed-refactor (icon-xref :text-mixed)) (def ^:icon text-palette (icon-xref :text-palette))
(def ^:icon text-palette-refactor (icon-xref :text-palette)) (def ^:icon text-paragraph (icon-xref :text-paragraph))
(def ^:icon text-paragraph-refactor (icon-xref :text-paragraph)) (def ^:icon text-rtl (icon-xref :text-rtl))
(def ^:icon text-rtl-refactor (icon-xref :text-rtl)) (def ^:icon text-stroked (icon-xref :text-stroked))
(def ^:icon text-stroked-refactor (icon-xref :text-stroked)) (def ^:icon text-top (icon-xref :text-top))
(def ^:icon text-top-refactor (icon-xref :text-top)) (def ^:icon text-underlined (icon-xref :text-underlined))
(def ^:icon text-underlined-refactor (icon-xref :text-underlined)) (def ^:icon text-uppercase (icon-xref :text-uppercase))
(def ^:icon text-uppercase-refactor (icon-xref :text-uppercase)) (def ^:icon text (icon-xref :text))
(def ^:icon text-refactor (icon-xref :text)) (def ^:icon thumbnail (icon-xref :thumbnail))
(def ^:icon thumbnail-refactor (icon-xref :thumbnail)) (def ^:icon tick (icon-xref :tick))
(def ^:icon tick-refactor (icon-xref :tick)) (def ^:icon to-corner (icon-xref :to-corner))
(def ^:icon to-corner-refactor (icon-xref :to-corner)) (def ^:icon to-curve (icon-xref :to-curve))
(def ^:icon to-curve-refactor (icon-xref :to-curve)) (def ^:icon tree (icon-xref :tree))
(def ^:icon tree-refactor (icon-xref :tree)) (def ^:icon unlock (icon-xref :unlock))
(def ^:icon unlock-refactor (icon-xref :unlock)) (def ^:icon user (icon-xref :user))
(def ^:icon user-refactor (icon-xref :user))
(def ^:icon v2-icon-1 (icon-xref :v2-icon-1)) (def ^:icon v2-icon-1 (icon-xref :v2-icon-1))
(def ^:icon v2-icon-2 (icon-xref :v2-icon-2)) (def ^:icon v2-icon-2 (icon-xref :v2-icon-2))
(def ^:icon v2-icon-3 (icon-xref :v2-icon-3)) (def ^:icon v2-icon-3 (icon-xref :v2-icon-3))
(def ^:icon v2-icon-4 (icon-xref :v2-icon-4)) (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-center (icon-xref :vertical-align-items-center))
(def ^:icon vertical-align-items-end-refactor (icon-xref :vertical-align-items-end)) (def ^:icon vertical-align-items-end (icon-xref :vertical-align-items-end))
(def ^:icon vertical-align-items-start-refactor (icon-xref :vertical-align-items-start)) (def ^:icon vertical-align-items-start (icon-xref :vertical-align-items-start))
(def ^:icon view-as-icons-refactor (icon-xref :view-as-icons)) (def ^:icon view-as-icons (icon-xref :view-as-icons))
(def ^:icon view-as-list-refactor (icon-xref :view-as-list)) (def ^:icon view-as-list (icon-xref :view-as-list))
(def ^:icon wrap-refactor (icon-xref :wrap)) (def ^:icon wrap (icon-xref :wrap))
(def ^:icon loader-pencil (def ^:icon loader-pencil

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

@ -56,7 +56,7 @@
[:label {:for "newsletter-updates"} [:label {:for "newsletter-updates"}
[:span {:class (stl/css-case :global/checked @newsletter-updates)} [:span {:class (stl/css-case :global/checked @newsletter-updates)}
(when @newsletter-updates (when @newsletter-updates
i/status-tick-refactor)] i/status-tick)]
(tr "onboarding-v2.newsletter.updates") (tr "onboarding-v2.newsletter.updates")
[:input {:type "checkbox" [:input {:type "checkbox"
:id "newsletter-updates" :id "newsletter-updates"
@ -66,7 +66,7 @@
[:label {:for "newsletter-news"} [:label {:for "newsletter-news"}
[:span {:class (stl/css-case :global/checked @newsletter-news)} [:span {:class (stl/css-case :global/checked @newsletter-news)}
(when @newsletter-news (when @newsletter-news
i/status-tick-refactor)] i/status-tick)]
(tr "onboarding-v2.newsletter.news") (tr "onboarding-v2.newsletter.news")
[:input {:type "checkbox" [:input {:type "checkbox"
:id "newsletter-news" :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.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.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.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"}] {:label (tr "questions.other") :value "other" :area "other"}]
:name :experience-design-tool :name :experience-design-tool
:class (stl/css :image-radio) :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")] (tr "onboarding.team-modal.create-team-desc")]
[:ul {:class (stl/css :team-features)} [:ul {:class (stl/css :team-features)}
[:li {:class (stl/css :feature)} [: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)} [:p {:class (stl/css :modal-desc)}
(tr "onboarding.team-modal.create-team-feature-1")]] (tr "onboarding.team-modal.create-team-feature-1")]]
[:li {:class (stl/css :feature)} [: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)} [:p {:class (stl/css :modal-desc)}
(tr "onboarding.team-modal.create-team-feature-2")]] (tr "onboarding.team-modal.create-team-feature-2")]]
[:li {:class (stl/css :feature)} [: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)} [:p {:class (stl/css :modal-desc)}
(tr "onboarding.team-modal.create-team-feature-3")]] (tr "onboarding.team-modal.create-team-feature-3")]]
[:li {:class (stl/css :feature)} [: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)} [:p {:class (stl/css :modal-desc)}
(tr "onboarding.team-modal.create-team-feature-4")]] (tr "onboarding.team-modal.create-team-feature-4")]]
[:li {:class (stl/css :feature)} [: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)} [:p {:class (stl/css :modal-desc)}
(tr "onboarding.team-modal.create-team-feature-5")]]]]) (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-header
[:div.modal-close-button [:div.modal-close-button
{:on-click close-fn {:on-click close-fn
:data-test "close-templates-btn"} i/close-refactor]] :data-test "close-templates-btn"} i/close]]
[:div.modal-content [:div.modal-content
[:h3 (tr "onboarding.templates.title")] [: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} :on-click copy-token}
[:span {:class (stl/css :token-value)} (:token created "")] [:span {:class (stl/css :token-value)} (:token created "")]
[:span {:class (stl/css :icon)} [:span {:class (stl/css :icon)}
i/clipboard-refactor]])]] i/clipboard]])]]
[:div {:class (stl/css :modal-footer)} [:div {:class (stl/css :modal-footer)}
[:div {:class (stl/css :action-buttons)} [: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"} :data-test "change-email-title"}
(tr "modals.change-email.title")] (tr "modals.change-email.title")]
[:button {:class (stl/css :modal-close-btn) [: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 :modal-content)}
[:& context-notification [:& 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")] [:h2 {:class (stl/css :modal-title)} (tr "modals.delete-account.title")]
[:button {:class (stl/css :modal-close-btn) [: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 :modal-content)}
[:& context-notification [:& 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 [:button {:class (stl/css-case :viewer-go-prev true
:left-bar left-bar) :left-bar left-bar)
:on-click go-prev-frame} :on-click go-prev-frame}
i/arrow-refactor]) i/arrow])
(when (< (+ index 1) num-frames) (when (< (+ index 1) num-frames)
[:button {:class (stl/css-case :viewer-go-next true [:button {:class (stl/css-case :viewer-go-next true
:comment-sidebar comment-sidebar :comment-sidebar comment-sidebar
:right-bar right-bar) :right-bar right-bar)
:on-click go-next-frame} :on-click go-next-frame}
i/arrow-refactor]) i/arrow])
[:div {:class (stl/css-case :viewer-bottom true [:div {:class (stl/css-case :viewer-bottom true
:left-bar left-bar)} :left-bar left-bar)}
[:button {:on-click go-first-frame [:button {:on-click go-first-frame
:class (stl/css :reset-button)} :class (stl/css :reset-button)}
i/reload-refactor] i/reload]
[:span {:class (stl/css :counter)} [:span {:class (stl/css :counter)}
(str/join " / " [(+ index 1) num-frames])] (str/join " / " [(+ index 1) num-frames])]
[:span]]])) [:span]]]))

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

@ -67,7 +67,7 @@
[:div {:class (stl/css :view-options) [:div {:class (stl/css :view-options)
:on-click toggle-dropdown} :on-click toggle-dropdown}
[:span {:class (stl/css :dropdown-title)} (tr "labels.comments")] [: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? [:& dropdown {:show @show-dropdown?
:on-close hide-dropdown} :on-close hide-dropdown}
@ -80,7 +80,7 @@
:on-click update-mode} :on-click update-mode}
[:span {:class (stl/css :label)} (tr "labels.show-all-comments")] [:span {:class (stl/css :label)} (tr "labels.show-all-comments")]
(when (or (= :all cmode) (nil? cmode)) (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 [:li {:class (stl/css-case
:dropdown-element true :dropdown-element true
@ -90,7 +90,7 @@
[:span {:class (stl/css :label)} (tr "labels.show-your-comments")] [:span {:class (stl/css :label)} (tr "labels.show-your-comments")]
(when (= :yours cmode) (when (= :yours cmode)
[:span {:class (stl/css :icon)} [:span {:class (stl/css :icon)}
i/tick-refactor])] i/tick])]
[:li {:class (stl/css :separator)}] [:li {:class (stl/css :separator)}]
@ -102,7 +102,7 @@
[:span {:class (stl/css :label)} (tr "labels.hide-resolved-comments")] [:span {:class (stl/css :label)} (tr "labels.hide-resolved-comments")]
(when (= :pending cshow) (when (= :pending cshow)
[:span {:class (stl/css :icon)} [:span {:class (stl/css :icon)}
i/tick-refactor])] i/tick])]
[:li {:class (stl/css :separator)}] [:li {:class (stl/css :separator)}]
@ -113,7 +113,7 @@
:on-click update-options} :on-click update-options}
[:span {:class (stl/css :label)} (tr "labels.show-comments-list")] [:span {:class (stl/css :label)} (tr "labels.show-comments-list")]
(when show-sidebar? (when show-sidebar?
[:span {:class (stl/css :icon)} i/tick-refactor])]]]])) [:span {:class (stl/css :icon)} i/tick])]]]]))
(defn- update-thread-position (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) [:button {:class (stl/css :zoom-btn)
:on-click on-decrease} :on-click on-decrease}
[:span {:class (stl/css :zoom-icon)} [:span {:class (stl/css :zoom-icon)}
i/remove-refactor]] i/remove-icon]]
[:p {:class (stl/css :zoom-text)} [:p {:class (stl/css :zoom-text)}
(fmt/format-percent zoom)] (fmt/format-percent zoom)]
[:button {:class (stl/css :zoom-btn) [:button {:class (stl/css :zoom-btn)
:on-click on-increase} :on-click on-increase}
[:span {:class (stl/css :zoom-icon)} [:span {:class (stl/css :zoom-icon)}
i/add-refactor]]] i/add]]]
[:button {:class (stl/css :reset-btn) [:button {:class (stl/css :reset-btn)
:on-click on-zoom-reset} :on-click on-zoom-reset}
(tr "workspace.header.reset-zoom")]] (tr "workspace.header.reset-zoom")]]
@ -183,13 +183,13 @@
(when (:can-edit permissions) (when (:can-edit permissions)
[:span {:on-click go-to-workspace [:span {:on-click go-to-workspace
:class (stl/css :edit-btn)} :class (stl/css :edit-btn)}
i/curve-refactor]) i/curve])
[:span {:title (tr "viewer.header.fullscreen") [:span {:title (tr "viewer.header.fullscreen")
:class (stl/css-case :fullscreen-btn true :class (stl/css-case :fullscreen-btn true
:selected fullscreen?) :selected fullscreen?)
:on-click toggle-fullscreen} :on-click toggle-fullscreen}
i/expand-refactor] i/expand]
(when (:is-admin permissions) (when (:is-admin permissions)
[:button {:on-click open-share-dialog [:button {:on-click open-share-dialog
@ -238,7 +238,7 @@
:on-click open-dropdown} :on-click open-dropdown}
[:span {:class (stl/css :breadcrumb-text)} [:span {:class (stl/css :breadcrumb-text)}
(dm/str file-name " / " page-name)] (dm/str file-name " / " page-name)]
[:span {:class (stl/css :icon)} i/arrow-refactor] [:span {:class (stl/css :icon)} i/arrow]
[:span "/"] [:span "/"]
[:& dropdown {:show @show-dropdown? [:& dropdown {:show @show-dropdown?
:on-close close-dropdown} :on-close close-dropdown}
@ -252,11 +252,11 @@
[:span {:class (stl/css :label)} [:span {:class (stl/css :label)}
(get-in file [:data :pages-index id :name])] (get-in file [:data :pages-index id :name])]
(when (= page-id id) (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) [:div {:class (stl/css :current-frame)
:on-click toggle-thumbnails} :on-click toggle-thumbnails}
[:span {:class (stl/css :frame-name)} frame-name] [: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 (mf/defc header
[{:keys [project file page frame zoom section permissions index interactions-mode]}] [{:keys [project file page frame zoom section permissions index interactions-mode]}]
@ -308,7 +308,7 @@
:class (stl/css-case :mode-zone-btn true :class (stl/css-case :mode-zone-btn true
:selected (= section :interactions)) :selected (= section :interactions))
:title (tr "viewer.header.interactions-section" (sc/get-tooltip :open-interactions))} :title (tr "viewer.header.interactions-section" (sc/get-tooltip :open-interactions))}
i/play-refactor] i/play]
(when (or (:can-edit permissions) (when (or (:can-edit permissions)
(= (:who-comment permissions) "all")) (= (:who-comment permissions) "all"))
@ -317,7 +317,7 @@
:class (stl/css-case :mode-zone-btn true :class (stl/css-case :mode-zone-btn true
:selected (= section :comments)) :selected (= section :comments))
:title (tr "viewer.header.comments-section" (sc/get-tooltip :open-comments))} :title (tr "viewer.header.comments-section" (sc/get-tooltip :open-comments))}
i/comments-refactor]) i/comments])
(when (or (= (:type permissions) :membership) (when (or (= (:type permissions) :membership)
(and (= (:type permissions) :share-link) (and (= (:type permissions) :share-link)
@ -326,7 +326,7 @@
:class (stl/css-case :mode-zone-btn true :class (stl/css-case :mode-zone-btn true
:selected (= section :inspect)) :selected (= section :inspect))
:title (tr "viewer.header.inspect-section" (sc/get-tooltip :open-inspect))} :title (tr "viewer.header.inspect-section" (sc/get-tooltip :open-inspect))}
i/code-refactor])] i/code])]
[:& header-options {:section section [:& header-options {:section section
:permissions permissions :permissions permissions

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

@ -256,7 +256,7 @@
[:span {:class (stl/css-case [:span {:class (stl/css-case
:collapsabled-icon true :collapsabled-icon true
:rotated collapsed-css?)} :rotated collapsed-css?)}
i/arrow-refactor]] i/arrow]]
[:div {:class (stl/css :code-lang-option)} [:div {:class (stl/css :code-lang-option)}
"CSS"] "CSS"]
@ -269,7 +269,7 @@
[:div {:class (stl/css :action-btns)} [:div {:class (stl/css :action-btns)}
[:button {:class (stl/css :expand-button) [:button {:class (stl/css :expand-button)
:on-click on-expand} :on-click on-expand}
i/code-refactor] i/code]
[:& copy-button {:data copy-css-fn [:& copy-button {:data copy-css-fn
:class (stl/css :css-copy-btn) :class (stl/css :css-copy-btn)
@ -295,7 +295,7 @@
[:span {:class (stl/css-case [:span {:class (stl/css-case
:collapsabled-icon true :collapsabled-icon true
:rotated collapsed-markup?)} :rotated collapsed-markup?)}
i/arrow-refactor]] i/arrow]]
[:& radio-buttons {:selected markup-type [:& radio-buttons {:selected markup-type
:on-change set-markup :on-change set-markup
@ -310,7 +310,7 @@
[:div {:class (stl/css :action-btns)} [:div {:class (stl/css :action-btns)}
[:button {:class (stl/css :expand-button) [:button {:class (stl/css :expand-button)
:on-click on-expand} :on-click on-expand}
i/code-refactor] i/code]
[:& copy-button {:data copy-html-fn [:& copy-button {:data copy-html-fn
:class (stl/css :html-copy-btn) :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") :title (tr "workspace.options.export")
:class (stl/css :title-spacing-export-viewer)} :class (stl/css :title-spacing-export-viewer)}
[:button {:class (stl/css :add-export) [:button {:class (stl/css :add-export)
:on-click add-export} i/add-refactor]]] :on-click add-export} i/add]]]
(cond (cond
(= :multiple exports) (= :multiple exports)
@ -148,7 +148,7 @@
[:div {:class (stl/css :actions)} [:div {:class (stl/css :actions)}
[:button {:class (stl/css :action-btn) [:button {:class (stl/css :action-btn)
:on-click ()} :on-click ()}
i/remove-refactor]]] i/remove-icon]]]
(seq @exports) (seq @exports)
[:div {:class (stl/css :element-set-content)} [:div {:class (stl/css :element-set-content)}
@ -182,7 +182,7 @@
[:button {:class (stl/css :action-btn) [:button {:class (stl/css :action-btn)
:on-click (partial delete-export index)} :on-click (partial delete-export index)}
i/remove-refactor]])]) i/remove-icon]])])
(when (or (= :multiple exports) (seq @exports)) (when (or (= :multiple exports) (seq @exports))
[:button [:button
{:on-click (when-not in-progress? on-download) {: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)} [:div {:class (stl/css :shape-row)}
(if (> (count shapes) 1) (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 :layer-title)} (tr "inspect.tabs.code.selected.multiple" (count shapes))]]
[:* [:*
[:span {:class (stl/css :shape-icon)} [:span {:class (stl/css :shape-icon)}
@ -130,12 +130,12 @@
[:div {:class (stl/css :empty)} [:div {:class (stl/css :empty)}
[:div {:class (stl/css :code-info)} [:div {:class (stl/css :code-info)}
[:span {:class (stl/css :placeholder-icon)} [:span {:class (stl/css :placeholder-icon)}
i/code-refactor] i/code]
[:span {:class (stl/css :placeholder-label)} [:span {:class (stl/css :placeholder-label)}
(tr "inspect.empty.select")]] (tr "inspect.empty.select")]]
[:div {:class (stl/css :help-info)} [:div {:class (stl/css :help-info)}
[:span {:class (stl/css :placeholder-icon)} [:span {:class (stl/css :placeholder-icon)}
i/help-refactor] i/help]
[:span {:class (stl/css :placeholder-label)} [:span {:class (stl/css :placeholder-label)}
(tr "inspect.empty.help")]] (tr "inspect.empty.help")]]
[:button {:class (stl/css :more-info-btn) [: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) (when (seq flows)
[:div {:on-click toggle-dropdown [:div {:on-click toggle-dropdown
:class (stl/css :view-options)} :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 :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? [:& dropdown {:show show-dropdown?
:on-close hide-dropdown} :on-close hide-dropdown}
[:ul {:class (stl/css :dropdown)} [:ul {:class (stl/css :dropdown)}
@ -261,7 +261,7 @@
:on-click select-flow} :on-click select-flow}
[:span {:class (stl/css :label)} (:name flow)] [:span {:class (stl/css :label)} (:name flow)]
(when (= (:id flow) (:id current-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 (mf/defc interactions-menu
[{:keys [interactions-mode]}] [{:keys [interactions-mode]}]
@ -280,7 +280,7 @@
[:div {:on-click toggle-dropdown [:div {:on-click toggle-dropdown
:class (stl/css :view-options)} :class (stl/css :view-options)}
[:span {:class (stl/css :dropdown-title)} (tr "viewer.header.interactions")] [: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? [:& dropdown {:show @show-dropdown?
:on-close hide-dropdown} :on-close hide-dropdown}
[:ul {:class (stl/css :dropdown)} [:ul {:class (stl/css :dropdown)}
@ -291,7 +291,7 @@
[:span {:class (stl/css :label)} (tr "viewer.header.dont-show-interactions")] [:span {:class (stl/css :label)} (tr "viewer.header.dont-show-interactions")]
(when (= interactions-mode :hide) (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 [:li {:class (stl/css-case :dropdown-element true
:selected (= interactions-mode :show)) :selected (= interactions-mode :show))
@ -299,7 +299,7 @@
:data-mode "show"} :data-mode "show"}
[:span {:class (stl/css :label)} (tr "viewer.header.show-interactions")] [:span {:class (stl/css :label)} (tr "viewer.header.show-interactions")]
(when (= interactions-mode :show) (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")] [:span {:class (stl/css :label)} (tr "viewer.header.show-interactions-on-click")]
(when (= interactions-mode :show-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 (defn animate-go-to-frame
[animation current-viewport orig-viewport current-size orig-size wrapper-size] [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")] [:h2 {:class (stl/css :modal-title)} (tr "labels.continue-with-penpot")]
[:button {:class (stl/css :modal-close-btn) [:button {:class (stl/css :modal-close-btn)
:title (tr "labels.close") :title (tr "labels.close")
:on-click close} i/close-refactor]] :on-click close} i/close]]
[:div {:class (stl/css :modal-content)} [: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) [:button {:class (stl/css :modal-close-button)
:on-click on-close :on-click on-close
:title (tr "labels.close")} :title (tr "labels.close")}
i/close-refactor]] i/close]]
[:div {:class (stl/css :modal-content)} [:div {:class (stl/css :modal-content)}
[:div {:class (stl/css :share-link-section)} [:div {:class (stl/css :share-link-section)}
(when (and (not confirm?) (some? current-link)) (when (and (not confirm?) (some? current-link))
@ -186,7 +186,7 @@
[:button {:class (stl/css :copy-button) [:button {:class (stl/css :copy-button)
:title (tr "viewer.header.share.copy-link") :title (tr "viewer.header.share.copy-link")
:on-click copy-link} :on-click copy-link}
i/clipboard-refactor]]) i/clipboard]])
[:div {:class (stl/css :hint-wrapper)} [:div {:class (stl/css :hint-wrapper)}
(when (not ^boolean confirm?) (when (not ^boolean confirm?)
@ -227,7 +227,7 @@
:on-click toggle-perms-visibility} :on-click toggle-perms-visibility}
[:span {:class (stl/css-case :icon true [:span {:class (stl/css-case :icon true
:rotated perms-visible?)} :rotated perms-visible?)}
i/arrow-refactor] i/arrow]
(tr "common.share-link.manage-ops")] (tr "common.share-link.manage-ops")]
(when ^boolean perms-visible? (when ^boolean perms-visible?
@ -247,7 +247,7 @@
:class (stl/css-case :global/checked true)} :class (stl/css-case :global/checked true)}
[:span {:class (stl/css :checked)} [:span {:class (stl/css :checked)}
i/status-tick-refactor] i/status-tick]
(:name current-page)] (:name current-page)]
@ -265,7 +265,7 @@
:class (stl/css :select-all-label)} :class (stl/css :select-all-label)}
[:span {:class (stl/css-case :global/checked all-selected?)} [:span {:class (stl/css-case :global/checked all-selected?)}
(when all-selected? (when all-selected?
i/status-tick-refactor)] i/status-tick)]
(tr "common.share-link.view-all") (tr "common.share-link.view-all")
[:input {:type "checkbox" [:input {:type "checkbox"
:id "view-all" :id "view-all"
@ -283,7 +283,7 @@
[:label {:for (dm/str "page-" id)} [:label {:for (dm/str "page-" id)}
[:span {:class (stl/css-case :global/checked (contains? selected id))} [:span {:class (stl/css-case :global/checked (contains? selected id))}
(when (contains? selected id) (when (contains? selected id)
i/status-tick-refactor)] i/status-tick)]
name name
(when (= current-page-id id) (when (= current-page-id id)
[:div {:class (stl/css :current-tag)} (dm/str " " (tr "common.share-link.current-tag"))]) [: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)} [:div {:class (stl/css :thumbnails-content)}
[:button {:class (stl/css :left-scroll-handler) [: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) [: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) [:div {:class (stl/css :thumbnails-list)
:ref container :ref container
@ -80,9 +80,9 @@
(tr "labels.num-of-frames" (i18n/c total))] (tr "labels.num-of-frames" (i18n/c total))]
[:span {:class (stl/css :actions)} [:span {:class (stl/css :actions)}
[:button {:class (stl/css :expand-btn) [: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) [:button {:class (stl/css :close-btn)
:on-click on-close} i/close-refactor]]]) :on-click on-close} i/close]]])
(mf/defc thumbnail-item (mf/defc thumbnail-item
{::mf/wrap [mf/memo {::mf/wrap [mf/memo

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

@ -108,7 +108,7 @@
(when show-arrows? (when show-arrows?
[:button {:class (stl/css :left-arrow) [:button {:class (stl/css :left-arrow)
:disabled (= offset 0) :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) [:div {:class (stl/css :color-palette-content)
:ref container :ref container
:on-wheel on-scroll} :on-wheel on-scroll}
@ -128,7 +128,7 @@
(when show-arrows? (when show-arrows?
[:button {:class (stl/css :right-arrow) [:button {:class (stl/css :right-arrow)
:disabled (= offset max-offset) :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] (defn library->colors [shared-libs selected]
(map #(merge % {:file-id 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) ")")]] (dm/str "(" (count colors) ")")]]
(when (= selected id) (when (= selected id)
[:span {:class (stl/css :icon-wrapper)} [:span {:class (stl/css :icon-wrapper)}
i/tick-refactor])] i/tick])]
[:div {:class (stl/css :color-sample) [:div {:class (stl/css :color-sample)
:style #js {"--bullet-size" "20px"}} :style #js {"--bullet-size" "20px"}}
(for [[i {:keys [color id gradient]}] (map-indexed vector (take 7 colors))] (for [[i {:keys [color id gradient]}] (map-indexed vector (take 7 colors))]
@ -63,7 +63,7 @@
(when (= selected :file) (when (= selected :file)
[:span {:class (stl/css :icon-wrapper)} [:span {:class (stl/css :icon-wrapper)}
i/tick-refactor])] i/tick])]
[:div {:class (stl/css :color-sample) [:div {:class (stl/css :color-sample)
:style #js {"--bullet-size" "20px"}} :style #js {"--bullet-size" "20px"}}
(for [[i color] (map-indexed vector (take 7 (vals file-colors)))] (for [[i color] (map-indexed vector (take 7 (vals file-colors)))]
@ -85,7 +85,7 @@
(when (= selected :recent) (when (= selected :recent)
[:span {:class (stl/css :icon-wrapper)} [:span {:class (stl/css :icon-wrapper)}
i/tick-refactor])] i/tick])]
[:div {:class (stl/css :color-sample) [:div {:class (stl/css :color-sample)
:style #js {"--bullet-size" "20px"}} :style #js {"--bullet-size" "20px"}}
(for [[idx color] (map-indexed vector (take 7 (reverse recent-colors)))] (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 [:button {:class (stl/css-case :picker-btn true
:selected picking-color?) :selected picking-color?)
:on-click handle-click-picker} :on-click handle-click-picker}
i/picker-refactor])] i/picker])]
(when (or (= selected-mode :linear-gradient) (when (or (= selected-mode :linear-gradient)
(= selected-mode :radial-gradient)) (= selected-mode :radial-gradient))
@ -287,7 +287,7 @@
:class (stl/css-case :global/checked keep-aspect-ratio?)} :class (stl/css-case :global/checked keep-aspect-ratio?)}
[:span {:class (stl/css-case :global/checked keep-aspect-ratio?)} [:span {:class (stl/css-case :global/checked keep-aspect-ratio?)}
(when keep-aspect-ratio? (when keep-aspect-ratio?
i/status-tick-refactor)] i/status-tick)]
(tr "media.keep-aspect-ratio") (tr "media.keep-aspect-ratio")
[:input {:type "checkbox" [:input {:type "checkbox"
:id "keep-aspect-ratio" :id "keep-aspect-ratio"
@ -312,7 +312,7 @@
:selected @active-color-tab :selected @active-color-tab
:collapsable false} :collapsable false}
[:& tab-element {:id :ramp :title i/rgba-refactor} [:& tab-element {:id :ramp :title i/rgba}
(if picking-color? (if picking-color?
[:div {:class (stl/css :picker-detail-wrapper)} [:div {:class (stl/css :picker-detail-wrapper)}
[:div {:class (stl/css :center-circle)}] [:div {:class (stl/css :center-circle)}]
@ -324,7 +324,7 @@
:on-start-drag on-start-drag :on-start-drag on-start-drag
:on-finish-drag on-finish-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? (if picking-color?
[:div {:class (stl/css :picker-detail-wrapper)} [:div {:class (stl/css :picker-detail-wrapper)}
[:div {:class (stl/css :center-circle)}] [:div {:class (stl/css :center-circle)}]
@ -336,7 +336,7 @@
:on-start-drag on-start-drag :on-start-drag on-start-drag
:on-finish-drag on-finish-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? (if picking-color?
[:div {:class (stl/css :picker-detail-wrapper)} [:div {:class (stl/css :picker-detail-wrapper)}
[:div {:class (stl/css :center-circle)}] [: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) (when (= @selected :file)
[:button {:class (stl/css :add-color-btn) [:button {:class (stl/css :add-color-btn)
:on-click on-add-library-color} :on-click on-add-library-color}
i/add-refactor]) i/add])
[:button {:class (stl/css :palette-btn) [:button {:class (stl/css :palette-btn)
:on-click toggle-palette} :on-click toggle-palette}
i/swatches-refactor] i/swatches]
(for [[idx color] (map-indexed vector @current-colors)] (for [[idx color] (map-indexed vector @current-colors)]
[:& cb/color-bullet [:& cb/color-bullet

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

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

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

@ -96,7 +96,7 @@
[:span [:span
{:class (stl/css :icon-wrapper)} {:class (stl/css :icon-wrapper)}
(if selected? [:span {:class (stl/css :selected-icon)} (if selected? [:span {:class (stl/css :selected-icon)}
i/tick-refactor] i/tick]
[:span {:class (stl/css :selected-icon)}]) [:span {:class (stl/css :selected-icon)}])
[:span {:class (stl/css :shape-icon)} icon]] [:span {:class (stl/css :shape-icon)} icon]]
[:span {:class (stl/css :title)} title]] [:span {:class (stl/css :title)} title]]
@ -115,7 +115,7 @@
:class (stl/css :shortcut-key)} sc])]) :class (stl/css :shortcut-key)} sc])])
(when (> (count children) 1) (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) (when (> (count children) 1)
[:ul {:class (stl/css :workspace-context-submenu) [: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} :on-double-click start-editing-name}
file-name])] file-name])]
(when ^boolean shared? (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)} [:div {:class (stl/css :menu-section)}
[:& main-menu/menu [:& main-menu/menu
{:layout layout {:layout layout

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

@ -230,7 +230,7 @@
:type "button" :type "button"
:data-library-id (dm/str id) :data-library-id (dm/str id)
:on-click unlink-library} :on-click unlink-library}
i/detach-refactor]])]] i/detach]])]]
[:div {:class (stl/css :section)} [:div {:class (stl/css :section)}
[:& title-bar {:collapsable false [:& title-bar {:collapsable false
@ -240,7 +240,7 @@
[:& search-bar {:on-change change-search-term [:& search-bar {:on-change change-search-term
:value search-term :value search-term
:placeholder (tr "workspace.libraries.search-shared-libraries") :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) (if (seq shared-libraries)
[:div {:class (stl/css :section-list-shared)} [:div {:class (stl/css :section-list-shared)}
@ -261,7 +261,7 @@
[:button {:class (stl/css :item-button-shared) [:button {:class (stl/css :item-button-shared)
:data-library-id (dm/str id) :data-library-id (dm/str id)
:on-click link-library} :on-click link-library}
i/add-refactor]])] i/add]])]
(when (empty? shared-libraries) (when (empty? shared-libraries)
[:div {:class (stl/css :section-list-empty)} [:div {:class (stl/css :section-list-empty)}
@ -493,7 +493,7 @@
[:div {:class (stl/css :modal-dialog)} [:div {:class (stl/css :modal-dialog)}
[:button {:class (stl/css :close) [:button {:class (stl/css :close)
:on-click close-dialog} :on-click close-dialog}
i/close-refactor] i/close]
[:div {:class (stl/css :modal-title)} [:div {:class (stl/css :modal-title)}
"Libraries"] "Libraries"]
[:div {:class (stl/css :modal-content)} [: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 [: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? [:& dropdown-menu {:show show-menu?
:on-close close-menu :on-close close-menu
@ -669,7 +669,7 @@
:data-test "file" :data-test "file"
:id "file-menu-file"} :id "file-menu-file"}
[:span {:class (stl/css :item-name)} (tr "workspace.header.menu.option.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) [:> dropdown-menu-item* {:class (stl/css :menu-item)
:on-click on-menu-click :on-click on-menu-click
@ -680,7 +680,7 @@
:data-test "edit" :data-test "edit"
:id "file-menu-edit"} :id "file-menu-edit"}
[:span {:class (stl/css :item-name)} (tr "workspace.header.menu.option.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) [:> dropdown-menu-item* {:class (stl/css :menu-item)
:on-click on-menu-click :on-click on-menu-click
@ -691,7 +691,7 @@
:data-test "view" :data-test "view"
:id "file-menu-view"} :id "file-menu-view"}
[:span {:class (stl/css :item-name)} (tr "workspace.header.menu.option.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) [:> dropdown-menu-item* {:class (stl/css :menu-item)
:on-click on-menu-click :on-click on-menu-click
@ -702,7 +702,7 @@
:data-test "preferences" :data-test "preferences"
:id "file-menu-preferences"} :id "file-menu-preferences"}
[:span {:class (stl/css :item-name)} (tr "workspace.header.menu.option.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)}] [:div {:class (stl/css :separator)}]
[:> dropdown-menu-item* {:class (stl/css-case :menu-item true) [:> dropdown-menu-item* {:class (stl/css-case :menu-item true)
:on-click on-menu-click :on-click on-menu-click
@ -713,7 +713,7 @@
:data-test "help-info" :data-test "help-info"
:id "file-menu-help-info"} :id "file-menu-help-info"}
[:span {:class (stl/css :item-name)} (tr "workspace.header.menu.option.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 (case sub-menu
:file :file

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

@ -46,7 +46,7 @@
[:div {:class (stl/css :modal-header)} [:div {:class (stl/css :modal-header)}
[:h2 {:class (stl/css :modal-title)} (tr "modals.nudge-title")] [:h2 {:class (stl/css :modal-title)} (tr "modals.nudge-title")]
[:button {:class (stl/css :modal-close-btn) [: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 :modal-content)}
[:div {:class (stl/css :input-wrapper)} [:div {:class (stl/css :input-wrapper)}
[:label {:class (stl/css :modal-msg) [: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 :class (stl/css-case :palette-btn true
:selected color-palette?) :selected color-palette?)
:on-click on-select-color-palette} :on-click on-select-color-palette}
i/drop-refactor]] i/drop-icon]]
[:li {:class (stl/css :palette-item)} [:li {:class (stl/css :palette-item)}
[:button {:title (tr "workspace.toolbar.text-palette" (sc/get-tooltip :toggle-textpalette)) [:button {:title (tr "workspace.toolbar.text-palette" (sc/get-tooltip :toggle-textpalette))
@ -170,14 +170,14 @@
:class (stl/css-case :palette-btn true :class (stl/css-case :palette-btn true
:selected text-palette?) :selected text-palette?)
:on-click on-select-text-palette} :on-click on-select-text-palette}
i/text-palette-refactor]]] i/text-palette]]]
(if any-palette? (if any-palette?
[:* [:*
[:button {:class (stl/css :palette-actions) [:button {:class (stl/css :palette-actions)
:on-click #(swap! state* update :show-menu not)} :on-click #(swap! state* update :show-menu not)}
i/menu-refactor] i/menu]
[:div {:class (stl/css :palette) [:div {:class (stl/css :palette)
:ref container} :ref container}
(when text-palette? (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 [:div {:class (stl/css-case :status-icon true
:pending-status true) :pending-status true)
:title (tr "workspace.header.unsaved")} :title (tr "workspace.header.unsaved")}
i/status-alert-refactor] i/status-alert]
:saving :saving
[:div {:class (stl/css-case :status-icon true [:div {:class (stl/css-case :status-icon true
:saving-status true) :saving-status true)
:title (tr "workspace.header.saving")} :title (tr "workspace.header.saving")}
i/status-update-refactor] i/status-update]
:saved :saved
[:div {:class (stl/css-case :status-icon true [:div {:class (stl/css-case :status-icon true
:saved-status true) :saved-status true)
:title (tr "workspace.header.saved")} :title (tr "workspace.header.saved")}
i/status-tick-refactor] i/status-tick]
:error :error
[:div {:class (stl/css-case :status-icon true [:div {:class (stl/css-case :status-icon true
:error-status true) :error-status true)
:title "There was an error saving the data. Please refresh if this persists."} :title "There was an error saving the data. Please refresh if this persists."}
i/status-wrong-refactor] i/status-wrong]
nil)])) nil)]))
@ -112,12 +112,12 @@
[:button {:class (stl/css :zoom-btn) [:button {:class (stl/css :zoom-btn)
:on-click on-decrease} :on-click on-decrease}
[:span {:class (stl/css :zoom-icon)} [:span {:class (stl/css :zoom-icon)}
i/remove-refactor]] i/remove-icon]]
[:p {:class (stl/css :zoom-text)} zoom] [:p {:class (stl/css :zoom-text)} zoom]
[:button {:class (stl/css :zoom-btn) [:button {:class (stl/css :zoom-btn)
:on-click on-increase} :on-click on-increase}
[:span {:class (stl/css :zoom-icon)} [:span {:class (stl/css :zoom-icon)}
i/add-refactor]]] i/add]]]
[:button {:class (stl/css :reset-btn) [:button {:class (stl/css :reset-btn)
:on-click on-zoom-reset} :on-click on-zoom-reset}
(tr "workspace.header.reset-zoom")]] (tr "workspace.header.reset-zoom")]]
@ -223,7 +223,7 @@
:selected (= selected-drawtool :comments)) :selected (= selected-drawtool :comments))
:on-click toggle-comments :on-click toggle-comments
:data-tool "comments"} :data-tool "comments"}
i/comments-refactor]] i/comments]]
(when-not ^boolean read-only? (when-not ^boolean read-only?
[:div {:class (stl/css :history-section)} [:div {:class (stl/css :history-section)}
@ -233,10 +233,10 @@
:class (stl/css-case :selected (contains? layout :document-history) :class (stl/css-case :selected (contains? layout :document-history)
:history-button true) :history-button true)
:on-click toggle-history} :on-click toggle-history}
i/history-refactor]]) i/history]])
[:a {:class (stl/css :viewer-btn) [:a {:class (stl/css :viewer-btn)
:title (tr "workspace.header.viewer" (sc/get-tooltip :open-viewer)) :title (tr "workspace.header.viewer" (sc/get-tooltip :open-viewer))
:on-click nav-to-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) [:button {:class (stl/css :libraries-button)
:on-click show-libraries-dialog} :on-click show-libraries-dialog}
[:span {:class (stl/css :libraries-icon)} [:span {:class (stl/css :libraries-icon)}
i/library-refactor] i/library]
(tr "workspace.assets.libraries")]) (tr "workspace.assets.libraries")])
[:div {:class (stl/css :search-wrapper)} [:div {:class (stl/css :search-wrapper)}
@ -170,7 +170,7 @@
{:on-click on-open-menu {:on-click on-open-menu
:class (stl/css-case :section-button true :class (stl/css-case :section-button true
:opened menu-open?)} :opened menu-open?)}
i/filter-refactor]] i/filter-icon]]
[:& context-menu-a11y [:& context-menu-a11y
{:on-close on-menu-close {:on-close on-menu-close
:selectable true :selectable true
@ -186,8 +186,8 @@
[:button {:class (stl/css :sort-button) [:button {:class (stl/css :sort-button)
:on-click toggle-ordering} :on-click toggle-ordering}
(if reverse-sort? (if reverse-sort?
i/asc-sort-refactor i/asc-sort
i/desc-sort-refactor)]]] i/desc-sort)]]]
[:& (mf/provider cmm/assets-filters) {:value filters} [:& (mf/provider cmm/assets-filters) {:value filters}
[:& (mf/provider cmm/assets-toggle-ordering) {:value toggle-ordering} [:& (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? (when-not read-only?
[:button {:class (stl/css :assets-btn) [:button {:class (stl/css :assets-btn)
:on-click add-color-clicked} :on-click add-color-clicked}
i/add-refactor])]) i/add])])
[:& cmm/asset-section-block {:role :content} [:& 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} {::mf/wrap-props false}
[{:keys [section]}] [{:keys [section]}]
(case section (case section
:colors i/drop-refactor :colors i/drop-icon
:components i/component-refactor :components i/component
:typographies i/text-palette-refactor :typographies i/text-palette
i/add-refactor)) i/add))
(mf/defc asset-section (mf/defc asset-section
{::mf/wrap-props false} {::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") [:& radio-buttons {:selected (if listing-thumbs? "grid" "list")
:on-change toggle-list-style :on-change toggle-list-style
:name "listing-style"} :name "listing-style"}
[:& radio-button {:icon i/view-as-list-refactor [:& radio-button {:icon i/view-as-list
:value "list" :value "list"
:id "opt-list"}] :id "opt-list"}]
[:& radio-button {:icon i/flex-grid-refactor [:& radio-button {:icon i/flex-grid
:value "grid" :value "grid"
:id "opt-grid"}]]]) :id "opt-grid"}]]])
(when (and components-v2 (not read-only?) local?) (when (and components-v2 (not read-only?) local?)
[:div {:on-click add-component [:div {:on-click add-component
:class (stl/css :add-component)} :class (stl/css :add-component)}
i/add-refactor i/add
[:& file-uploader {:accept cm/str-image-types [:& file-uploader {:accept cm/str-image-types
:multi true :multi true
:ref input-ref :ref input-ref

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

@ -70,7 +70,7 @@
:href (str "#" url) :href (str "#" url)
:target "_blank" :target "_blank"
:on-click dom/stop-propagation} :on-click dom/stop-propagation}
i/open-link-refactor]])]])) i/open-link]])]]))
(mf/defc file-library-content (mf/defc file-library-content
{::mf/wrap-props false} {::mf/wrap-props false}
@ -290,7 +290,7 @@
(not ^boolean show-typography?)) (not ^boolean show-typography?))
[:div {:class (stl/css :asset-title)} [:div {:class (stl/css :asset-title)}
[:span {:class (stl/css :no-found-icon)} [:span {:class (stl/css :no-found-icon)}
i/search-refactor] i/search]
[:span {:class (stl/css :no-found-text)} [:span {:class (stl/css :no-found-text)}
(tr "workspace.assets.not-found")]])])) (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?)) (when (and (not components-v2) (not read-only?))
[:button {:class (stl/css :assets-btn) [:button {:class (stl/css :assets-btn)
:on-click add-graphic} :on-click add-graphic}
i/add-refactor i/add
[:& file-uploader {:accept cm/str-image-types [:& file-uploader {:accept cm/str-image-types
:multi true :multi true
:ref input-ref :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.create-group")
(tr "workspace.assets.rename-group"))] (tr "workspace.assets.rename-group"))]
[:button {:class (stl/css :modal-close-btn) [: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 :modal-content)}
[:& fm/form {:form form :on-submit on-accept} [:& 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? (when-not read-only?
[:button {:class (stl/css :assets-btn) [:button {:class (stl/css :assets-btn)
:on-click add-typography} :on-click add-typography}
i/add-refactor])]) i/add])])
[:& cmm/asset-section-block {:role :content} [:& cmm/asset-section-block {:role :content}
[:& typographies-group {:file-id file-id [:& 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) [:button {:class (stl/css :collapsed-button)
:on-click on-click :on-click on-click
:aria-label (tr "workspace.sidebar.expand")} :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)} [:div {:class (stl/css :panel-title)}
[:span "Debugging tools"] [:span "Debugging tools"]
[:div {:class (stl/css :close-button) :on-click handle-close} [:div {:class (stl/css :close-button) :on-click handle-close}
i/close-refactor]] i/close]]
[:div {:class (stl/css :debug-panel-inner)} [:div {:class (stl/css :debug-panel-inner)}
(for [option (sort-by d/name dbg/options)] (for [option (sort-by d/name dbg/options)]
[:div {:class (stl/css :checkbox-wrapper)} [:div {:class (stl/css :checkbox-wrapper)}
[:span {:class (stl/css-case :checkbox-icon true :global/checked (dbg/enabled? option)) [:span {:class (stl/css-case :checkbox-icon true :global/checked (dbg/enabled? option))
:on-click #(on-toggle-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" [:input {:type "checkbox"
:id (d/name option) :id (d/name option)

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

@ -129,7 +129,7 @@
[:span "Debug"] [:span "Debug"]
[:div {:class (stl/css :close-button) [:div {:class (stl/css :close-button)
:on-click #(dbg/disable! :shape-panel)} :on-click #(dbg/disable! :shape-panel)}
i/close-refactor]] i/close]]
(if (empty? selected) (if (empty? selected)
[:div {:class (stl/css :attrs-container)} "No shapes 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]}] (defn entry->icon [{:keys [type]}]
(case type (case type
:page i/document-refactor :page i/document
:shape i/svg-refactor :shape i/svg
:rect i/rectangle-refactor :rect i/rectangle
:circle i/elipse-refactor :circle i/elipse
:text i/text-refactor :text i/text
:path i/path-refactor :path i/path
:frame i/board-refactor :frame i/board
:group i/group-refactor :group i/group
:color i/drop-refactor :color i/drop-icon
:typography i/text-palette-refactor :typography i/text-palette
:component i/component-refactor :component i/component
:media i/img-refactor :media i/img
:image i/img-refactor :image i/img
i/svg-refactor)) i/svg))
(defn is-shape? [type] (defn is-shape? [type]
(contains? #{:shape :rect :circle :text :path :frame :group} type)) (contains? #{:shape :rect :circle :text :path :frame :group} type))
@ -315,7 +315,7 @@
:button-opened @show-detail?) :button-opened @show-detail?)
:on-click toggle-show-detail :on-click toggle-show-detail
:data-has-entry (dm/str (not (nil? (:detail entry))))} :data-has-entry (dm/str (not (nil? (:detail entry))))}
i/arrow-refactor])] i/arrow])]
(when @show-detail? (when @show-detail?
[:& history-entry-details {:entry entry}])])) [:& history-entry-details {:entry entry}])]))
@ -334,10 +334,10 @@
[:span (t locale "workspace.undo.title")] [:span (t locale "workspace.undo.title")]
[:div {:class (stl/css :close-button) [:div {:class (stl/css :close-button)
:on-click toggle-history} :on-click toggle-history}
i/close-refactor]] i/close]]
(if (empty? entries) (if (empty? entries)
[:div {:class (stl/css :history-entry-empty)} [: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")]] [:div {:class (stl/css :history-entry-empty-msg)} (t locale "workspace.undo.empty")]]
[:ul {:class (stl/css :history-entries)} [:ul {:class (stl/css :history-entries)}
(for [[idx-entry entry] (->> entries (map-indexed vector) reverse)] #_[i (range 0 10)] (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 :toggle-content true
:inverse expanded?) :inverse expanded?)
:on-click on-toggle-collapse} :on-click on-toggle-collapse}
i/arrow-refactor]) i/arrow])
[:div {:class (stl/css :icon-shape) [:div {:class (stl/css :icon-shape)
:on-double-click on-zoom-to-selected} :on-double-click on-zoom-to-selected}
@ -142,7 +142,7 @@
(tr "workspace.shape.menu.show") (tr "workspace.shape.menu.show")
(tr "workspace.shape.menu.hide")) (tr "workspace.shape.menu.hide"))
:on-click on-toggle-visibility} :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 [:button {:class (stl/css-case
:block-element true :block-element true
:selected blocked?) :selected blocked?)
@ -150,7 +150,7 @@
(tr "workspace.shape.menu.unlock") (tr "workspace.shape.menu.unlock")
(tr "workspace.shape.menu.lock")) (tr "workspace.shape.menu.lock"))
:on-click on-toggle-blocking} :on-click on-toggle-blocking}
(if ^boolean blocked? i/lock-refactor i/unlock-refactor)]])]] (if ^boolean blocked? i/lock i/unlock)]])]]
children])) children]))

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

@ -283,11 +283,11 @@
:filter-button true :filter-button true
:opened show-menu? :opened show-menu?
:active active?)} :active active?)}
i/filter-refactor]] i/filter-icon]]
[:button {:class (stl/css :close-search) [:button {:class (stl/css :close-search)
:on-click toggle-search} :on-click toggle-search}
i/close-refactor]] i/close]]
[:div {:class (stl/css :active-filters)} [:div {:class (stl/css :active-filters)}
(for [fkey current-filters] (for [fkey current-filters]
@ -314,7 +314,7 @@
[:span {:class (stl/css :layer-filter-name)} [:span {:class (stl/css :layer-filter-name)}
name] name]
[:span {:class (stl/css :layer-filter-close)} [:span {:class (stl/css :layer-filter-close)}
i/close-small-refactor]]))] i/close-small]]))]
(when ^boolean show-menu? (when ^boolean show-menu?
[:ul {:class (stl/css :filters-container)} [:ul {:class (stl/css :filters-container)}
@ -324,13 +324,13 @@
:on-click add-filter} :on-click add-filter}
[:div {:class (stl/css :filter-menu-item-name-wrapper)} [:div {:class (stl/css :filter-menu-item-name-wrapper)}
[:span {:class (stl/css :filter-menu-item-icon)} [:span {:class (stl/css :filter-menu-item-icon)}
i/board-refactor] i/board]
[:span {:class (stl/css :filter-menu-item-name)} [:span {:class (stl/css :filter-menu-item-name)}
(tr "workspace.sidebar.layers.frames")]] (tr "workspace.sidebar.layers.frames")]]
(when (contains? current-filters :frame) (when (contains? current-filters :frame)
[:span {:class (stl/css :filter-menu-item-tick)} [:span {:class (stl/css :filter-menu-item-tick)}
i/tick-refactor])] i/tick])]
[:li {:class (stl/css-case :filter-menu-item true [:li {:class (stl/css-case :filter-menu-item true
:selected (contains? current-filters :group)) :selected (contains? current-filters :group))
@ -338,13 +338,13 @@
:on-click add-filter} :on-click add-filter}
[:div {:class (stl/css :filter-menu-item-name-wrapper)} [:div {:class (stl/css :filter-menu-item-name-wrapper)}
[:span {:class (stl/css :filter-menu-item-icon)} [:span {:class (stl/css :filter-menu-item-icon)}
i/group-refactor] i/group]
[:span {:class (stl/css :filter-menu-item-name)} [:span {:class (stl/css :filter-menu-item-name)}
(tr "workspace.sidebar.layers.groups")]] (tr "workspace.sidebar.layers.groups")]]
(when (contains? current-filters :group) (when (contains? current-filters :group)
[:span {:class (stl/css :filter-menu-item-tick)} [:span {:class (stl/css :filter-menu-item-tick)}
i/tick-refactor])] i/tick])]
[:li {:class (stl/css-case :filter-menu-item true [:li {:class (stl/css-case :filter-menu-item true
:selected (contains? current-filters :mask)) :selected (contains? current-filters :mask))
@ -352,13 +352,13 @@
:on-click add-filter} :on-click add-filter}
[:div {:class (stl/css :filter-menu-item-name-wrapper)} [:div {:class (stl/css :filter-menu-item-name-wrapper)}
[:span {:class (stl/css :filter-menu-item-icon)} [:span {:class (stl/css :filter-menu-item-icon)}
i/mask-refactor] i/mask]
[:span {:class (stl/css :filter-menu-item-name)} [:span {:class (stl/css :filter-menu-item-name)}
(tr "workspace.sidebar.layers.masks")]] (tr "workspace.sidebar.layers.masks")]]
(when (contains? current-filters :mask) (when (contains? current-filters :mask)
[:span {:class (stl/css :filter-menu-item-tick)} [:span {:class (stl/css :filter-menu-item-tick)}
i/tick-refactor])] i/tick])]
[:li {:class (stl/css-case :filter-menu-item true [:li {:class (stl/css-case :filter-menu-item true
:selected (contains? current-filters :component)) :selected (contains? current-filters :component))
@ -366,13 +366,13 @@
:on-click add-filter} :on-click add-filter}
[:div {:class (stl/css :filter-menu-item-name-wrapper)} [:div {:class (stl/css :filter-menu-item-name-wrapper)}
[:span {:class (stl/css :filter-menu-item-icon)} [:span {:class (stl/css :filter-menu-item-icon)}
i/component-refactor] i/component]
[:span {:class (stl/css :filter-menu-item-name)} [:span {:class (stl/css :filter-menu-item-name)}
(tr "workspace.sidebar.layers.components")]] (tr "workspace.sidebar.layers.components")]]
(when (contains? current-filters :component) (when (contains? current-filters :component)
[:span {:class (stl/css :filter-menu-item-tick)} [:span {:class (stl/css :filter-menu-item-tick)}
i/tick-refactor])] i/tick])]
[:li {:class (stl/css-case :filter-menu-item true [:li {:class (stl/css-case :filter-menu-item true
:selected (contains? current-filters :text)) :selected (contains? current-filters :text))
@ -380,13 +380,13 @@
:on-click add-filter} :on-click add-filter}
[:div {:class (stl/css :filter-menu-item-name-wrapper)} [:div {:class (stl/css :filter-menu-item-name-wrapper)}
[:span {:class (stl/css :filter-menu-item-icon)} [:span {:class (stl/css :filter-menu-item-icon)}
i/text-refactor] i/text]
[:span {:class (stl/css :filter-menu-item-name)} [:span {:class (stl/css :filter-menu-item-name)}
(tr "workspace.sidebar.layers.texts")]] (tr "workspace.sidebar.layers.texts")]]
(when (contains? current-filters :text) (when (contains? current-filters :text)
[:span {:class (stl/css :filter-menu-item-tick)} [:span {:class (stl/css :filter-menu-item-tick)}
i/tick-refactor])] i/tick])]
[:li {:class (stl/css-case :filter-menu-item true [:li {:class (stl/css-case :filter-menu-item true
:selected (contains? current-filters :image)) :selected (contains? current-filters :image))
@ -394,13 +394,13 @@
:on-click add-filter} :on-click add-filter}
[:div {:class (stl/css :filter-menu-item-name-wrapper)} [:div {:class (stl/css :filter-menu-item-name-wrapper)}
[:span {:class (stl/css :filter-menu-item-icon)} [:span {:class (stl/css :filter-menu-item-icon)}
i/img-refactor] i/img]
[:span {:class (stl/css :filter-menu-item-name)} [:span {:class (stl/css :filter-menu-item-name)}
(tr "workspace.sidebar.layers.images")]] (tr "workspace.sidebar.layers.images")]]
(when (contains? current-filters :image) (when (contains? current-filters :image)
[:span {:class (stl/css :filter-menu-item-tick)} [:span {:class (stl/css :filter-menu-item-tick)}
i/tick-refactor])] i/tick])]
[:li {:class (stl/css-case :filter-menu-item true [:li {:class (stl/css-case :filter-menu-item true
:selected (contains? current-filters :shape)) :selected (contains? current-filters :shape))
@ -408,19 +408,19 @@
:on-click add-filter} :on-click add-filter}
[:div {:class (stl/css :filter-menu-item-name-wrapper)} [:div {:class (stl/css :filter-menu-item-name-wrapper)}
[:span {:class (stl/css :filter-menu-item-icon)} [:span {:class (stl/css :filter-menu-item-icon)}
i/path-refactor] i/path]
[:span {:class (stl/css :filter-menu-item-name)} [:span {:class (stl/css :filter-menu-item-name)}
(tr "workspace.sidebar.layers.shapes")]] (tr "workspace.sidebar.layers.shapes")]]
(when (contains? current-filters :shape) (when (contains? current-filters :shape)
[:span {:class (stl/css :filter-menu-item-tick)} [:span {:class (stl/css :filter-menu-item-tick)}
i/tick-refactor])]])] i/tick])]])]
[:div {:class (stl/css :tool-window-bar)} [:div {:class (stl/css :tool-window-bar)}
[:& title-bar {:collapsable false [:& title-bar {:collapsable false
:title (:name page) :title (:name page)
:on-btn-click toggle-search :on-btn-click toggle-search
:btn-children i/search-refactor}]]))])) :btn-children i/search}]]))]))
(defn- on-scroll (defn- on-scroll
@ -507,7 +507,7 @@
[:button {:class (stl/css :focus-title) [:button {:class (stl/css :focus-title)
:on-click toogle-focus-mode} :on-click toogle-focus-mode}
[:span {:class (stl/css :back-button)} [:span {:class (stl/css :back-button)}
i/arrow-refactor] i/arrow]
[:div {:class (stl/css :focus-name)} [:div {:class (stl/css :focus-name)}
(or title (tr "workspace.sidebar.layers"))] (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)) :title (tr "workspace.align.hleft" (sc/get-tooltip :align-left))
:data-value "hleft" :data-value "hleft"
:on-click align-objects} :on-click align-objects}
i/align-left-refactor] i/align-left]
[:button {:class (stl/css-case :align-button true [:button {:class (stl/css-case :align-button true
:disabled disabled-align) :disabled disabled-align)
@ -58,7 +58,7 @@
:title (tr "workspace.align.hcenter" (sc/get-tooltip :align-hcenter)) :title (tr "workspace.align.hcenter" (sc/get-tooltip :align-hcenter))
:data-value "hcenter" :data-value "hcenter"
:on-click align-objects} :on-click align-objects}
i/align-horizontal-center-refactor] i/align-horizontal-center]
[:button {:class (stl/css-case :align-button true [:button {:class (stl/css-case :align-button true
:disabled disabled-align) :disabled disabled-align)
@ -66,7 +66,7 @@
:title (tr "workspace.align.hright" (sc/get-tooltip :align-right)) :title (tr "workspace.align.hright" (sc/get-tooltip :align-right))
:data-value "hright" :data-value "hright"
:on-click align-objects} :on-click align-objects}
i/align-right-refactor] i/align-right]
[:button {:class (stl/css-case :align-button true [:button {:class (stl/css-case :align-button true
:disabled disabled-distribute) :disabled disabled-distribute)
@ -74,7 +74,7 @@
:title (tr "workspace.align.hdistribute" (sc/get-tooltip :h-distribute)) :title (tr "workspace.align.hdistribute" (sc/get-tooltip :h-distribute))
:data-value "horizontal" :data-value "horizontal"
:on-click distribute-objects} :on-click distribute-objects}
i/distribute-horizontally-refactor]] i/distribute-horizontally]]
[:div {:class (stl/css :align-group)} [:div {:class (stl/css :align-group)}
[:button {:class (stl/css-case :align-button true [:button {:class (stl/css-case :align-button true
@ -83,7 +83,7 @@
:title (tr "workspace.align.vtop" (sc/get-tooltip :align-top)) :title (tr "workspace.align.vtop" (sc/get-tooltip :align-top))
:data-value "vtop" :data-value "vtop"
:on-click align-objects} :on-click align-objects}
i/align-top-refactor] i/align-top]
[:button {:class (stl/css-case :align-button true [:button {:class (stl/css-case :align-button true
:disabled disabled-align) :disabled disabled-align)
@ -91,7 +91,7 @@
:title (tr "workspace.align.vcenter" (sc/get-tooltip :align-vcenter)) :title (tr "workspace.align.vcenter" (sc/get-tooltip :align-vcenter))
:data-value "vcenter" :data-value "vcenter"
:on-click align-objects} :on-click align-objects}
i/align-vertical-center-refactor] i/align-vertical-center]
[:button {:class (stl/css-case :align-button true [:button {:class (stl/css-case :align-button true
:disabled disabled-align) :disabled disabled-align)
@ -99,7 +99,7 @@
:title (tr "workspace.align.vbottom" (sc/get-tooltip :align-bottom)) :title (tr "workspace.align.vbottom" (sc/get-tooltip :align-bottom))
:data-value "vbottom" :data-value "vbottom"
:on-click align-objects} :on-click align-objects}
i/align-bottom-refactor] i/align-bottom]
[:button {:title (tr "workspace.align.vdistribute" (sc/get-tooltip :v-distribute)) [:button {:title (tr "workspace.align.vdistribute" (sc/get-tooltip :v-distribute))
:class (stl/css-case :align-button true :class (stl/css-case :align-button true
@ -107,5 +107,5 @@
:disabled disabled-distribute :disabled disabled-distribute
:data-value "vertical" :data-value "vertical"
:on-click distribute-objects} :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?))} :class (stl/css-case :title-spacing-blur (not has-value?))}
(when-not has-value? (when-not has-value?
[:button {:class (stl/css :add-blur) [:button {:class (stl/css :add-blur)
:on-click handle-add} i/add-refactor])]] :on-click handle-add} i/add])]]
(when (and open? has-value?) (when (and open? has-value?)
[:div {:class (stl/css :element-set-content)} [:div {:class (stl/css :element-set-content)}
[:div {:class (stl/css-case :first-row true [:div {:class (stl/css-case :first-row true
@ -96,17 +96,17 @@
[:button {:class (stl/css-case :show-more true [:button {:class (stl/css-case :show-more true
:selected more-options?) :selected more-options?)
:on-click toggle-more-options} :on-click toggle-more-options}
i/menu-refactor] i/menu]
[:span {:class (stl/css :label)} [:span {:class (stl/css :label)}
(tr "workspace.options.blur-options.title")]] (tr "workspace.options.blur-options.title")]]
[:div {:class (stl/css :actions)} [:div {:class (stl/css :actions)}
[:button {:class (stl/css :action-btn) [:button {:class (stl/css :action-btn)
:on-click handle-toggle-visibility} :on-click handle-toggle-visibility}
(if hidden? (if hidden?
i/hide-refactor i/hide
i/shown-refactor)] i/shown)]
[:button {:class (stl/css :action-btn) [:button {:class (stl/css :action-btn)
:on-click handle-delete} i/remove-refactor]]] :on-click handle-delete} i/remove-icon]]]
(when more-options? (when more-options?
[:div {:class (stl/css :second-row)} [:div {:class (stl/css :second-row)}
[:label {:class (stl/css :label) [: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) :class (stl/css :boolean-radio-btn)
:on-change set-bool :on-change set-bool
:name "bool-options"} :name "bool-options"}
[:& radio-button {:icon i/boolean-union-refactor [:& radio-button {:icon i/boolean-union
:value "union" :value "union"
:disabled disabled-bool-btns :disabled disabled-bool-btns
:title (str (tr "workspace.shape.menu.union") " (" (sc/get-tooltip :bool-union) ")") :title (str (tr "workspace.shape.menu.union") " (" (sc/get-tooltip :bool-union) ")")
:id "bool-opt-union"}] :id "bool-opt-union"}]
[:& radio-button {:icon i/boolean-difference-refactor [:& radio-button {:icon i/boolean-difference
:value "difference" :value "difference"
:disabled disabled-bool-btns :disabled disabled-bool-btns
:title (str (tr "workspace.shape.menu.difference") " (" (sc/get-tooltip :bool-difference) ")") :title (str (tr "workspace.shape.menu.difference") " (" (sc/get-tooltip :bool-difference) ")")
:id "bool-opt-differente"}] :id "bool-opt-differente"}]
[:& radio-button {:icon i/boolean-intersection-refactor [:& radio-button {:icon i/boolean-intersection
:value "intersection" :value "intersection"
:disabled disabled-bool-btns :disabled disabled-bool-btns
:title (str (tr "intersection") " (" (sc/get-tooltip :bool-intersection) ")") :title (str (tr "intersection") " (" (sc/get-tooltip :bool-intersection) ")")
:id "bool-opt-intersection"}] :id "bool-opt-intersection"}]
[:& radio-button {:icon i/boolean-exclude-refactor [:& radio-button {:icon i/boolean-exclude
:value "exclude" :value "exclude"
:disabled disabled-bool-btns :disabled disabled-bool-btns
:title (str (tr "exclude") " (" (sc/get-tooltip :bool-exclude) ")") :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 [:span {:class (stl/css-case
:icon-arrow true :icon-arrow true
:expanded expanded?)} :expanded expanded?)}
i/arrow-refactor] i/arrow]
[:span {:class (stl/css :annotation-text)} [:span {:class (stl/css :annotation-text)}
(tr "workspace.options.component.annotation")]]) (tr "workspace.options.component.annotation")]])
@ -186,21 +186,21 @@
:icon true :icon true
:icon-tick true :icon-tick true
:hidden invalid-text?)} :hidden invalid-text?)}
i/tick-refactor] i/tick]
[:div {:class (stl/css :icon :icon-cross) [:div {:class (stl/css :icon :icon-cross)
:title (tr "labels.discard") :title (tr "labels.discard")
:on-click on-discard} :on-click on-discard}
i/close-refactor]] i/close]]
[:* [:*
[:div {:class (stl/css :icon :icon-edit) [:div {:class (stl/css :icon :icon-edit)
:title (tr "labels.edit") :title (tr "labels.edit")
:on-click on-edit} :on-click on-edit}
i/curve-refactor] i/curve]
[:div {:class (stl/css :icon :icon-trash) [:div {:class (stl/css :icon :icon-trash)
:title (tr "labels.delete") :title (tr "labels.delete")
:on-click on-delete-annotation} :on-click on-delete-annotation}
i/delete-refactor]]))]] i/delete]]))]]
[:div {:class (stl/css-case :hidden (not expanded?))} [:div {:class (stl/css-case :hidden (not expanded?))}
[:div {:class (stl/css :grow-wrap)} [:div {:class (stl/css :grow-wrap)}
@ -263,7 +263,7 @@
(cfh/last-path group-name)]] (cfh/last-path group-name)]]
[:span {:class (stl/css :arrow-icon)} [:span {:class (stl/css :arrow-icon)}
i/arrow-refactor]])) i/arrow]]))
(def ^:private ref:swap-libraries (def ^:private ref:swap-libraries
(letfn [(get-libraries [state] (letfn [(get-libraries [state]
@ -440,7 +440,8 @@
:id "swap-component-search-filter" :id "swap-component-search-filter"
:value (:term filters) :value (:term filters)
:placeholder (str (tr "labels.search") " " (get-in libraries [current-library-id :name])) :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) [:& select {:class (stl/css :select-library)
:default-value current-library-id :default-value current-library-id
@ -456,10 +457,10 @@
:selected (if (:listing-thumbs? filters) "grid" "list") :selected (if (:listing-thumbs? filters) "grid" "list")
:on-change toggle-list-style :on-change toggle-list-style
:name "swap-listing-style"} :name "swap-listing-style"}
[:& radio-button {:icon i/view-as-list-refactor [:& radio-button {:icon i/view-as-list
:value "list" :value "list"
:id "swap-opt-list"}] :id "swap-opt-list"}]
[:& radio-button {:icon i/flex-grid-refactor [:& radio-button {:icon i/flex-grid
:value "grid" :value "grid"
:id "swap-opt-grid"}]]]] :id "swap-opt-grid"}]]]]
@ -467,7 +468,7 @@
[:button {:class (stl/css :component-path) [:button {:class (stl/css :component-path)
:on-click on-go-back :on-click on-go-back
:title filter-path-with-dots} :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) (when-not (= "" filter-path-with-dots)
[:span {:class (stl/css :path-name)} [:span {:class (stl/css :path-name)}
(dm/str "\u00A0\u2022\u00A0" filter-path-with-dots)]) (dm/str "\u00A0\u2022\u00A0" filter-path-with-dots)])
@ -590,7 +591,7 @@
(if swap-opened? (if swap-opened?
[:button {:class (stl/css :title-back) [:button {:class (stl/css :title-back)
:on-click on-component-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")]] [:span (tr "workspace.options.component")]]
[:& title-bar {:collapsable true [:& title-bar {:collapsable true
@ -615,8 +616,8 @@
[:span {:class (stl/css :component-icon)} [:span {:class (stl/css :component-icon)}
(if main-instance? (if main-instance?
i/component-refactor i/component
i/copy-refactor)] i/component-copy)]
[:div {:class (stl/css :name-wrapper)} [:div {:class (stl/css :name-wrapper)}
[:div {:class (stl/css :component-name)} [:div {:class (stl/css :component-name)}
@ -633,7 +634,7 @@
[:button {:class (stl/css-case :menu-btn true [:button {:class (stl/css-case :menu-btn true
:selected menu-open?) :selected menu-open?)
:on-click on-menu-click} :on-click on-menu-click}
i/menu-refactor] i/menu]
[:& component-ctx-menu {:show menu-open? [:& component-ctx-menu {:show menu-open?
:on-close on-menu-close :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 [:span {:class (stl/css-case :check-mark true
:checked (:fixed-scroll values))} :checked (:fixed-scroll values))}
(when (:fixed-scroll values) (when (:fixed-scroll values)
i/status-tick-refactor)] i/status-tick)]
(tr "workspace.options.constraints.fix-when-scrolling") (tr "workspace.options.constraints.fix-when-scrolling")
[:input {:type "checkbox" [:input {:type "checkbox"
:id "fixed-on-scroll" :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")) :title (tr (if (> (count ids) 1) "workspace.options.export-multiple" "workspace.options.export"))
:class (stl/css-case :title-spacing-export (not has-exports?))} :class (stl/css-case :title-spacing-export (not has-exports?))}
[:button {:class (stl/css :add-export) [:button {:class (stl/css :add-export)
:on-click add-export} i/add-refactor]]] :on-click add-export}
i/add]]]
(when open? (when open?
[:div {:class (stl/css :element-set-content)} [:div {:class (stl/css :element-set-content)}
@ -188,7 +189,7 @@
[:div {:class (stl/css :actions)} [:div {:class (stl/css :actions)}
[:button {:class (stl/css :action-btn) [:button {:class (stl/css :action-btn)
:on-click on-remove-all} :on-click on-remove-all}
i/remove-refactor]]] i/remove-icon]]]
(seq exports) (seq exports)
[:* [:*
@ -222,7 +223,7 @@
[:button {:class (stl/css :action-btn) [:button {:class (stl/css :action-btn)
:on-click (partial delete-export index)} :on-click (partial delete-export index)}
i/remove-refactor]])]) i/remove-icon]])])
(when (or (= :multiple exports) (seq exports)) (when (or (= :multiple exports) (seq exports))
[:button [: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))) (when (and (not disable-remove?) (not (= :multiple fills)))
[:button {:class (stl/css :add-fill) [:button {:class (stl/css :add-fill)
:on-click on-add} i/add-refactor])]] :on-click on-add} i/add])]]
(when open? (when open?
[:div {:class (stl/css :element-content)} [:div {:class (stl/css :element-content)}
@ -156,7 +156,7 @@
(tr "settings.multiple")] (tr "settings.multiple")]
[:button {:on-click on-remove-all [:button {:on-click on-remove-all
:class (stl/css :remove-btn)} :class (stl/css :remove-btn)}
i/remove-refactor]] i/remove-icon]]
(seq fills) (seq fills)
[:& h/sortable-container {} [:& h/sortable-container {}
@ -187,7 +187,7 @@
[:span {:class (stl/css-case :check-mark true [:span {:class (stl/css-case :check-mark true
:checked (not hide-fill-on-export?))} :checked (not hide-fill-on-export?))}
(when (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") (tr "workspace.options.show-fill-on-export")
[:input {:type "checkbox" [:input {:type "checkbox"
:id "show-fill-on-export" :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 [:button {:class (stl/css-case :show-options true
:selected open?) :selected open?)
:on-click toggle-advanced-options} :on-click toggle-advanced-options}
i/menu-refactor] i/menu]
[:div {:class (stl/css :type-select-wrapper)} [:div {:class (stl/css :type-select-wrapper)}
[:& select [:& select
{:class (stl/css :grid-type-select) {:class (stl/css :grid-type-select)
@ -179,10 +179,10 @@
[:div {:class (stl/css :actions)} [:div {:class (stl/css :actions)}
[:button {:class (stl/css :action-btn) [:button {:class (stl/css :action-btn)
:on-click handle-toggle-visibility} :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) [:button {:class (stl/css :action-btn)
:on-click on-remove} :on-click on-remove}
i/remove-refactor]]] i/remove-icon]]]
(when (:display grid) (when (:display grid)
[:& advanced-options {:class (stl/css :grid-advanced-options) [:& advanced-options {:class (stl/css :grid-advanced-options)
@ -201,7 +201,7 @@
[:button {:class (stl/css-case :show-more-options true [:button {:class (stl/css-case :show-more-options true
:selected show-more-options?) :selected show-more-options?)
:on-click toggle-more-options} :on-click toggle-more-options}
i/menu-refactor]] i/menu]]
(when show-more-options? (when show-more-options?
[:div {:class (stl/css :second-row)} [:div {:class (stl/css :second-row)}
[:button {:class (stl/css-case :btn-options true [:button {:class (stl/css-case :btn-options true
@ -258,7 +258,8 @@
[:div {:class (stl/css :gutter) [:div {:class (stl/css :gutter)
:title (tr "workspace.options.grid.params.gutter")} :title (tr "workspace.options.grid.params.gutter")}
[:span {:class (stl/css-case :icon true [:span {:class (stl/css-case :icon true
:rotated (= type :row))} i/gap-horizontal-refactor] :rotated (= type :row))}
i/gap-horizontal]
[:> numeric-input* {:placeholder "0" [:> numeric-input* {:placeholder "0"
:on-change (handle-change :params :gutter) :on-change (handle-change :params :gutter)
:nillable true :nillable true
@ -268,7 +269,8 @@
[:div {:class (stl/css :margin) [:div {:class (stl/css :margin)
:title (tr "workspace.options.grid.params.margin")} :title (tr "workspace.options.grid.params.margin")}
[:span {:class (stl/css-case :icon true [:span {:class (stl/css-case :icon true
:rotated (= type :column))} i/grid-margin-refactor] :rotated (= type :column))}
i/grid-margin]
[:> numeric-input* {:placeholder "0" [:> numeric-input* {:placeholder "0"
:on-change (handle-change :params :margin) :on-change (handle-change :params :margin)
:nillable true :nillable true
@ -279,7 +281,7 @@
:selected show-more-options?) :selected show-more-options?)
:on-click toggle-more-options :on-click toggle-more-options
:disabled is-default} :disabled is-default}
i/menu-refactor] i/menu]
(when show-more-options? (when show-more-options?
[:div {:class (stl/css :more-options)} [:div {:class (stl/css :more-options)}
[:button {:class (stl/css :option-btn) [:button {:class (stl/css :option-btn)
@ -309,7 +311,7 @@
[:button {:on-click handle-create-grid [:button {:on-click handle-create-grid
:class (stl/css :add-grid)} :class (stl/css :add-grid)}
i/add-refactor]] i/add]]
(when (and open? (seq frame-grids)) (when (and open? (seq frame-grids))
[:div {:class (stl/css :element-set-content)} [: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 :allow-empty true
:name (dm/str "flex-align-items-" type)} :name (dm/str "flex-align-items-" type)}
[:& radio-button {:value "start" [:& 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" :title "Align self start"
:id (dm/str "align-self-start-" type)}] :id (dm/str "align-self-start-" type)}]
[:& radio-button {:value "center" [:& 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" :title "Align self center"
:id (dm/str "align-self-center-" type)}] :id (dm/str "align-self-center-" type)}]
[:& radio-button {:value "end" [:& 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" :title "Align self end"
:id (dm/str "align-self-end-" type)}] :id (dm/str "align-self-end-" type)}]
[:& radio-button {:value "stretch" [:& 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" :title "Align self stretch"
:id (dm/str "align-self-stretch-" type)}]]])) :id (dm/str "align-self-stretch-" type)}]]]))
@ -200,7 +208,7 @@
(when (and (not multiple?) (= :auto cell-mode)) (when (and (not multiple?) (= :auto cell-mode))
[:div {:class (stl/css :row)} [:div {:class (stl/css :row)}
[:div {:class (stl/css :grid-coord-group)} [: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)} [:div {:class (stl/css :coord-input)}
[:> numeric-input* [:> numeric-input*
{:placeholder "--" {:placeholder "--"
@ -210,7 +218,7 @@
:value column}]]] :value column}]]]
[:div {:class (stl/css :grid-coord-group)} [: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)} [:div {:class (stl/css :coord-input)}
[:> numeric-input* [:> numeric-input*
{:placeholder "--" {:placeholder "--"
@ -222,7 +230,7 @@
(when (and (not multiple?) (or (= :manual cell-mode) (= :area cell-mode))) (when (and (not multiple?) (or (= :manual cell-mode) (= :area cell-mode)))
[:div {:class (stl/css :row)} [:div {:class (stl/css :row)}
[:div {:class (stl/css :grid-coord-group)} [: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)} [:div {:class (stl/css :coord-input)}
[:> numeric-input* [:> numeric-input*
{:placeholder "--" {:placeholder "--"
@ -237,7 +245,7 @@
:value column-end}]]] :value column-end}]]]
[:div {:class (stl/css :grid-coord-group)} [: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)} [:div {:class (stl/css :coord-input :double)}
[:> numeric-input* [:> numeric-input*
{:placeholder "--" {: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) [:button {:class (stl/css :start-flow-btn)
:on-click start-flow} :on-click start-flow}
[:span {:class (stl/css :button-icon)} [:span {:class (stl/css :button-icon)}
i/play-refactor]] i/play]]
[:span {:class (stl/css :flow-input-wrapper)} [:span {:class (stl/css :flow-input-wrapper)}
[:input [:input
{:class (stl/css :flow-input) {:class (stl/css :flow-input)
@ -151,7 +151,7 @@
[:button {:class (stl/css :remove-flow-btn) [:button {:class (stl/css :remove-flow-btn)
:on-click remove-flow} :on-click remove-flow}
i/remove-refactor]])) i/remove-icon]]))
(mf/defc page-flows (mf/defc page-flows
[{:keys [flows]}] [{:keys [flows]}]
@ -177,7 +177,7 @@
[:button {:class (stl/css :add-flow-btn) [:button {:class (stl/css :add-flow-btn)
:title (tr "workspace.options.flows.add-flow-start") :title (tr "workspace.options.flows.add-flow-start")
:on-click add-flow} :on-click add-flow}
i/add-refactor])] i/add])]
(when flow (when flow
[:& flow-item {:flow flow :key (str (:id 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")}]) (d/concat-vec basic-animation-opts [{:value :push :label (tr "workspace.options.interaction-animation-push")}])
basic-animation-opts)) basic-animation-opts))
easing-options [{:icon :easing-linear-refactor :value :linear :label (tr "workspace.options.interaction-easing-linear")} easing-options [{:icon :easing-linear :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 :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-in :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-out :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")}]] {: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 [:div {:class (stl/css-case :element-set-options-group true
@ -426,7 +426,7 @@
[:button {:class (stl/css-case :extend-btn true [:button {:class (stl/css-case :extend-btn true
:extended extended-open?) :extended extended-open?)
:on-click toggle-extended} :on-click toggle-extended}
i/menu-refactor] i/menu]
[:div {:class (stl/css :interactions-info) [:div {:class (stl/css :interactions-info)
:on-click toggle-extended} :on-click toggle-extended}
@ -435,7 +435,7 @@
[:button {:class (stl/css :remove-btn) [:button {:class (stl/css :remove-btn)
:data-value index :data-value index
:on-click #(remove-interaction index)} :on-click #(remove-interaction index)}
i/remove-refactor]] i/remove-icon]]
(when extended-open? (when extended-open?
[:div {:class (stl/css :extended-options)} [:div {:class (stl/css :extended-options)}
@ -490,7 +490,7 @@
:class (stl/css-case :global/checked preserve-scroll?)} :class (stl/css-case :global/checked preserve-scroll?)}
[:span {:class (stl/css-case :global/checked preserve-scroll?)} [:span {:class (stl/css-case :global/checked preserve-scroll?)}
(when preserve-scroll? (when preserve-scroll?
i/status-tick-refactor)] i/status-tick)]
(tr "workspace.options.interaction-preserve-scroll") (tr "workspace.options.interaction-preserve-scroll")
[:input {:type "checkbox" [:input {:type "checkbox"
:id (str "preserve-" index) :id (str "preserve-" index)
@ -586,7 +586,7 @@
:class (stl/css-case :global/checked close-click-outside?)} :class (stl/css-case :global/checked close-click-outside?)}
[:span {:class (stl/css-case :global/checked close-click-outside?)} [:span {:class (stl/css-case :global/checked close-click-outside?)}
(when close-click-outside? (when close-click-outside?
i/status-tick-refactor)] i/status-tick)]
(tr "workspace.options.interaction-close-outside") (tr "workspace.options.interaction-close-outside")
[:input {:type "checkbox" [:input {:type "checkbox"
:id (str "close-" index) :id (str "close-" index)
@ -600,7 +600,7 @@
:class (stl/css-case :global/checked background-overlay?)} :class (stl/css-case :global/checked background-overlay?)}
[:span {:class (stl/css-case :global/checked background-overlay?)} [:span {:class (stl/css-case :global/checked background-overlay?)}
(when background-overlay? (when background-overlay?
i/status-tick-refactor)] i/status-tick)]
(tr "workspace.options.interaction-background") (tr "workspace.options.interaction-background")
[:input {:type "checkbox" [:input {:type "checkbox"
:id (str "background-" index) :id (str "background-" index)
@ -638,19 +638,19 @@
[:& radio-buttons {:selected (d/name direction) [:& radio-buttons {:selected (d/name direction)
:on-change change-direction :on-change change-direction
:name "animation-direction"} :name "animation-direction"}
[:& radio-button {:icon i/column-refactor [:& radio-button {:icon i/column
:icon-class (stl/css :right) :icon-class (stl/css :right)
:value "right" :value "right"
:id "animation-right"}] :id "animation-right"}]
[:& radio-button {:icon i/column-refactor [:& radio-button {:icon i/column
:icon-class (stl/css :left) :icon-class (stl/css :left)
:id "animation-left" :id "animation-left"
:value "left"}] :value "left"}]
[:& radio-button {:icon i/column-refactor [:& radio-button {:icon i/column
:icon-class (stl/css :down) :icon-class (stl/css :down)
:id "animation-down" :id "animation-down"
:value "down"}] :value "down"}]
[:& radio-button {:icon i/column-refactor [:& radio-button {:icon i/column
:icon-class (stl/css :up) :icon-class (stl/css :up)
:id "animation-up" :id "animation-up"
:value "up"}]]]]) :value "up"}]]]])
@ -687,7 +687,7 @@
:class (stl/css-case :global/checked (-> interaction :animation :offset-effect))} :class (stl/css-case :global/checked (-> interaction :animation :offset-effect))}
[:span {: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) (when (-> interaction :animation :offset-effect)
i/status-tick-refactor)] i/status-tick)]
(tr "workspace.options.interaction-offset-effect") (tr "workspace.options.interaction-offset-effect")
[:input {:type "checkbox" [:input {:type "checkbox"
:id (str "offset-effect-" index) :id (str "offset-effect-" index)
@ -726,21 +726,21 @@
[:button {:class (stl/css :add-interaction-btn) [:button {:class (stl/css :add-interaction-btn)
:on-click add-interaction} :on-click add-interaction}
i/add-refactor]]]) i/add]]])
(when (= (count interactions) 0) (when (= (count interactions) 0)
[:div {:class (stl/css :help-content)} [:div {:class (stl/css :help-content)}
(when (and shape (not (cfh/unframed-shape? shape))) (when (and shape (not (cfh/unframed-shape? shape)))
[:div {:class (stl/css :help-group)} [: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)} [:div {:class (stl/css :interactions-help)}
(tr "workspace.options.add-interaction")]]) (tr "workspace.options.add-interaction")]])
[:div {:class (stl/css :help-group)} [: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)} [:div {:class (stl/css :interactions-help)}
(tr "workspace.options.select-a-shape")]] (tr "workspace.options.select-a-shape")]]
[:div {:class (stl/css :help-group)} [: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)} [:div {:class (stl/css :interactions-help)}
(tr "workspace.options.use-play-button")]]]) (tr "workspace.options.use-play-button")]]])
[:div {:class (stl/css :groups)} [:div {:class (stl/css :groups)}

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

@ -173,18 +173,18 @@
(cond (cond
(or (= :multiple hidden?) (not hidden?)) (or (= :multiple hidden?) (not hidden?))
[:button {:on-click handle-set-hidden [:button {:on-click handle-set-hidden
:class (stl/css :hidden-btn)} i/shown-refactor] :class (stl/css :hidden-btn)} i/shown]
:else :else
[:button {:on-click handle-set-visible [:button {:on-click handle-set-visible
:class (stl/css :hidden-btn)} i/hide-refactor]) :class (stl/css :hidden-btn)} i/hide])
(cond (cond
(or (= :multiple blocked?) (not blocked?)) (or (= :multiple blocked?) (not blocked?))
[:button {:on-click handle-set-blocked [:button {:on-click handle-set-blocked
:class (stl/css :lock-btn)} i/unlock-refactor] :class (stl/css :lock-btn)} i/unlock]
:else :else
[:button {:on-click handle-set-unblocked [:button {:on-click handle-set-unblocked
:class (stl/css-case :lock-btn true :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 (defn- dir-icons-refactor
[val] [val]
(case val (case val
:row i/grid-row-refactor :row i/grid-row
:row-reverse i/row-reverse-refactor :row-reverse i/row-reverse
:column i/column-refactor :column i/column
:column-reverse i/column-reverse-refactor)) :column-reverse i/column-reverse))
;; FLEX COMPONENTS ;; FLEX COMPONENTS
@ -67,63 +67,63 @@
:align-items :align-items
(if column? (if column?
(case val (case val
:start i/align-items-column-start-refactor :start i/align-items-column-start
:end i/align-items-column-end-refactor :end i/align-items-column-end
:center i/align-items-column-center-refactor) :center i/align-items-column-center)
(case val (case val
:start i/align-items-row-start-refactor :start i/align-items-row-start
:end i/align-items-row-end-refactor :end i/align-items-row-end
:center i/align-items-row-center-refactor)) :center i/align-items-row-center))
:justify-content :justify-content
(if column? (if column?
(case val (case val
:start i/justify-content-column-start-refactor :start i/justify-content-column-start
:end i/justify-content-column-end-refactor :end i/justify-content-column-end
:center i/justify-content-column-center-refactor :center i/justify-content-column-center
:space-around i/justify-content-column-around-refactor :space-around i/justify-content-column-around
:space-evenly i/justify-content-column-evenly-refactor :space-evenly i/justify-content-column-evenly
:space-between i/justify-content-column-between-refactor) :space-between i/justify-content-column-between)
(case val (case val
:start i/justify-content-row-start-refactor :start i/justify-content-row-start
:end i/justify-content-row-end-refactor :end i/justify-content-row-end
:center i/justify-content-row-center-refactor :center i/justify-content-row-center
:space-around i/justify-content-row-around-refactor :space-around i/justify-content-row-around
:space-evenly i/justify-content-row-evenly-refactor :space-evenly i/justify-content-row-evenly
:space-between i/justify-content-row-between-refactor)) :space-between i/justify-content-row-between))
:align-content :align-content
(if column? (if column?
(case val (case val
:start i/align-content-column-start-refactor :start i/align-content-column-start
:end i/align-content-column-end-refactor :end i/align-content-column-end
:center i/align-content-column-center-refactor :center i/align-content-column-center
:space-around i/align-content-column-around-refactor :space-around i/align-content-column-around
:space-evenly i/align-content-column-evenly-refactor :space-evenly i/align-content-column-evenly
:space-between i/align-content-column-between-refactor :space-between i/align-content-column-between
:stretch nil) :stretch nil)
(case val (case val
:start i/align-content-row-start-refactor :start i/align-content-row-start
:end i/align-content-row-end-refactor :end i/align-content-row-end
:center i/align-content-row-center-refactor :center i/align-content-row-center
:space-around i/align-content-row-around-refactor :space-around i/align-content-row-around
:space-evenly i/align-content-row-evenly-refactor :space-evenly i/align-content-row-evenly
:space-between i/align-content-row-between-refactor :space-between i/align-content-row-between
:stretch nil)) :stretch nil))
:align-self :align-self
(if column? (if column?
(case val (case val
:auto i/remove-refactor :auto i/remove-icon
:start i/align-self-row-left-refactor :start i/align-self-row-left
:end i/align-self-row-right-refactor :end i/align-self-row-right
:center i/align-self-row-center-refactor) :center i/align-self-row-center)
(case val (case val
:auto i/remove-refactor :auto i/remove-icon
:start i/align-self-column-top-refactor :start i/align-self-column-top
:end i/align-self-column-bottom-refactor :end i/align-self-column-bottom
:center i/align-self-column-center-refactor)))) :center i/align-self-column-center))))
(defn get-layout-grid-icon (defn get-layout-grid-icon
[type val ^boolean column?] [type val ^boolean column?]
@ -131,32 +131,32 @@
:align-items :align-items
(if column? (if column?
(case val (case val
:auto i/remove-refactor :auto i/remove-icon
:start i/align-self-row-left-refactor :start i/align-self-row-left
:end i/align-self-row-right-refactor :end i/align-self-row-right
:center i/align-self-row-center-refactor) :center i/align-self-row-center)
(case val (case val
:auto i/remove-refactor :auto i/remove-icon
:start i/align-self-column-top-refactor :start i/align-self-column-top
:end i/align-self-column-bottom-refactor :end i/align-self-column-bottom
:center i/align-self-column-center-refactor)) :center i/align-self-column-center))
:justify-items :justify-items
(if (not column?) (if (not column?)
(case val (case val
:start i/align-content-column-start-refactor :start i/align-content-column-start
:center i/align-content-column-center-refactor :center i/align-content-column-center
:end i/align-content-column-end-refactor :end i/align-content-column-end
:space-around i/align-content-column-around-refactor :space-around i/align-content-column-around
:space-between i/align-content-column-between-refactor :space-between i/align-content-column-between
:stretch i/align-content-column-stretch-refactor) :stretch i/align-content-column-stretch)
(case val (case val
:start i/align-content-row-start-refactor :start i/align-content-row-start
:center i/align-content-row-center-refactor :center i/align-content-row-center
:end i/align-content-row-end-refactor :end i/align-content-row-end
:space-around i/align-content-row-around-refactor :space-around i/align-content-row-around
:space-between i/align-content-row-between-refactor :space-between i/align-content-row-between
:stretch i/align-content-row-stretch-refactor)))) :stretch i/align-content-row-stretch))))
(mf/defc direction-row-flex (mf/defc direction-row-flex
{::mf/props :obj {::mf/props :obj
@ -192,7 +192,7 @@
"No wrap" "No wrap"
"Wrap") "Wrap")
:on-click on-click} :on-click on-click}
i/wrap-refactor]) i/wrap])
(mf/defc align-row (mf/defc align-row
{::mf/props :obj} {::mf/props :obj}
@ -335,7 +335,7 @@
[:div {:class (stl/css :padding-simple) [:div {:class (stl/css :padding-simple)
:title "Vertical padding"} :title "Vertical padding"}
[:span {:class (stl/css :icon)} [:span {:class (stl/css :icon)}
i/padding-top-bottom-refactor] i/padding-top-bottom]
[:> numeric-input* [:> numeric-input*
{:class (stl/css :numeric-input) {:class (stl/css :numeric-input)
:placeholder "--" :placeholder "--"
@ -349,7 +349,7 @@
:title "Horizontal padding"} :title "Horizontal padding"}
[:span {:class (stl/css :icon)} [:span {:class (stl/css :icon)}
i/padding-left-right-refactor] i/padding-left-right]
[:> numeric-input* [:> numeric-input*
{:className (stl/css :numeric-input) {:className (stl/css :numeric-input)
:placeholder "--" :placeholder "--"
@ -392,7 +392,7 @@
[:div {:class (stl/css :padding-multiple) [:div {:class (stl/css :padding-multiple)
:title "Top padding"} :title "Top padding"}
[:span {:class (stl/css :icon)} [:span {:class (stl/css :icon)}
i/padding-top-refactor] i/padding-top]
[:> numeric-input* [:> numeric-input*
{:class (stl/css :numeric-input) {:class (stl/css :numeric-input)
:placeholder "--" :placeholder "--"
@ -407,7 +407,7 @@
[:div {:class (stl/css :padding-multiple) [:div {:class (stl/css :padding-multiple)
:title "Right padding"} :title "Right padding"}
[:span {:class (stl/css :icon)} [:span {:class (stl/css :icon)}
i/padding-right-refactor] i/padding-right]
[:> numeric-input* [:> numeric-input*
{:class (stl/css :numeric-input) {:class (stl/css :numeric-input)
:placeholder "--" :placeholder "--"
@ -422,7 +422,7 @@
[:div {:class (stl/css :padding-multiple) [:div {:class (stl/css :padding-multiple)
:title "Bottom padding"} :title "Bottom padding"}
[:span {:class (stl/css :icon)} [:span {:class (stl/css :icon)}
i/padding-bottom-refactor] i/padding-bottom]
[:> numeric-input* [:> numeric-input*
{:class (stl/css :numeric-input) {:class (stl/css :numeric-input)
:placeholder "--" :placeholder "--"
@ -437,7 +437,7 @@
[:div {:class (stl/css :padding-multiple) [:div {:class (stl/css :padding-multiple)
:title "Left padding"} :title "Left padding"}
[:span {:class (stl/css :icon)} [:span {:class (stl/css :icon)}
i/padding-left-refactor] i/padding-left]
[:> numeric-input* [:> numeric-input*
{:class (stl/css :numeric-input) {:class (stl/css :numeric-input)
:placeholder "--" :placeholder "--"
@ -482,7 +482,7 @@
:selected (= type :multiple)) :selected (= type :multiple))
:data-type (d/name type) :data-type (d/name type)
:on-click on-type-change'} :on-click on-type-change'}
i/padding-extended-refactor]])) i/padding-extended]]))
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; GAP ;; GAP
@ -539,7 +539,7 @@
:row-gap true :row-gap true
:disabled row-gap-disabled?) :disabled row-gap-disabled?)
:title "Row gap"} :title "Row gap"}
[:span {:class (stl/css :icon)} i/gap-vertical-refactor] [:span {:class (stl/css :icon)} i/gap-vertical]
[:> numeric-input* [:> numeric-input*
{:class (stl/css :numeric-input true) {:class (stl/css :numeric-input true)
:no-validate true :no-validate true
@ -558,7 +558,7 @@
:column-gap true :column-gap true
:disabled col-gap-disabled?) :disabled col-gap-disabled?)
:title "Column gap"} :title "Column gap"}
[:span {:class (stl/css :icon)} i/gap-horizontal-refactor] [:span {:class (stl/css :icon)} i/gap-horizontal]
[:> numeric-input* [:> numeric-input*
{:class (stl/css :numeric-input true) {:class (stl/css :numeric-input true)
:no-validate true :no-validate true
@ -745,7 +745,7 @@
[:div {:class (stl/css :track-info-container)} [:div {:class (stl/css :track-info-container)}
[:div {:class (stl/css :track-info-dir-icon) [:div {:class (stl/css :track-info-dir-icon)
:on-click handle-select-track} :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)} [:div {:class (stl/css :track-info-value)}
[:> numeric-input* {:no-validate true [:> numeric-input* {:no-validate true
@ -766,7 +766,7 @@
[:button {:class (stl/css :remove-track-btn) [:button {:class (stl/css :remove-track-btn)
:on-click #(remove-element type index)} :on-click #(remove-element type index)}
i/remove-refactor]])) i/remove-icon]]))
(mf/defc grid-columns-row (mf/defc grid-columns-row
{::mf/props :obj} {::mf/props :obj}
@ -789,11 +789,11 @@
[:div {:class (stl/css :grid-tracks)} [:div {:class (stl/css :grid-tracks)}
[:div {:class (stl/css :grid-track-header)} [: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-title) :on-click toggle}
[:div {:class (stl/css :track-name) :title track-name} track-name] [:div {:class (stl/css :track-name) :title track-name} track-name]
[:div {:class (stl/css :track-detail) :title track-detail} track-detail]] [: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? (when expanded?
[:& h/sortable-container {} [:& h/sortable-container {}
@ -1002,7 +1002,7 @@
[:* [:*
[:button {:class (stl/css :add-layout) [:button {:class (stl/css :add-layout)
:on-click on-toggle-dropdown-visibility} :on-click on-toggle-dropdown-visibility}
i/menu-refactor] i/menu]
[:& dropdown {:show show-dropdown? [:& dropdown {:show show-dropdown?
:on-close on-hide-dropdown} :on-close on-hide-dropdown}
@ -1019,14 +1019,14 @@
(when has-layout? (when has-layout?
[:button {:class (stl/css :remove-layout) [:button {:class (stl/css :remove-layout)
:on-click on-remove-layout} :on-click on-remove-layout}
i/remove-refactor])] i/remove-icon])]
[:div {:class (stl/css :title-actions)} [:div {:class (stl/css :title-actions)}
(if ^boolean grid-enabled? (if ^boolean grid-enabled?
[:* [:*
[:button {:class (stl/css :add-layout) [:button {:class (stl/css :add-layout)
:on-click on-toggle-dropdown-visibility} :on-click on-toggle-dropdown-visibility}
i/add-refactor] i/add]
[:& dropdown {:show show-dropdown? [:& dropdown {:show show-dropdown?
:on-close on-hide-dropdown} :on-close on-hide-dropdown}
@ -1043,11 +1043,11 @@
[:button {:class (stl/css :add-layout) [:button {:class (stl/css :add-layout)
:data-type "flex" :data-type "flex"
:on-click on-add-layout} :on-click on-add-layout}
i/add-refactor]) i/add])
(when has-layout? (when has-layout?
[:button {:class (stl/css :remove-layout) [:button {:class (stl/css :remove-layout)
:on-click on-remove-layout} :on-click on-remove-layout}
i/remove-refactor])])]] i/remove-icon])])]]
(when (and ^boolean open? (when (and ^boolean open?
^boolean has-layout? ^boolean has-layout?
@ -1073,7 +1073,7 @@
[:button {:on-click open-flex-help [:button {:on-click open-flex-help
:class (stl/css :help-button)} :class (stl/css :help-button)}
i/help-refactor]] i/help]]
(when (= :wrap wrap-type) (when (= :wrap wrap-type)
[:div {:class (stl/css :third-row)} [:div {:class (stl/css :third-row)}
[:& align-content-row {:is-column is-column [:& align-content-row {:is-column is-column
@ -1096,7 +1096,7 @@
[:div {:class (stl/css :edit-grid-wrapper)} [:div {:class (stl/css :edit-grid-wrapper)}
[:& grid-edit-mode {:id (first ids)}] [:& grid-edit-mode {:id (first ids)}]
[:button {:on-click open-grid-help [: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 :row :first-row)}
[:div {:class (stl/css :direction-edit)} [:div {:class (stl/css :direction-edit)}
@ -1273,7 +1273,7 @@
[:div {:class (stl/css :row)} [:div {:class (stl/css :row)}
[:div {:class (stl/css :grid-layout-menu-title)} "GRID LAYOUT"] [:div {:class (stl/css :grid-layout-menu-title)} "GRID LAYOUT"]
[:button {:on-click open-grid-help [: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) [:button {:class (stl/css :exit-btn)
:on-click #(st/emit! (udw/clear-edition-mode))} :on-click #(st/emit! (udw/clear-edition-mode))}
(tr "workspace.layout_grid.editor.options.exit")]] (tr "workspace.layout_grid.editor.options.exit")]]
@ -1303,7 +1303,7 @@
[:button {:on-click handle-locate-grid [:button {:on-click handle-locate-grid
:class (stl/css :locate-button) :class (stl/css :locate-button)
:title (tr "workspace.layout_grid.editor.top-bar.locate.tooltip")} :title (tr "workspace.layout_grid.editor.top-bar.locate.tooltip")}
i/locate-refactor]] i/locate]]
[:div {:class (stl/css :row)} [:div {:class (stl/css :row)}
[:& gap-section {:on-change on-gap-change [:& 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) [:div {:class (stl/css :vertical-margin)
:title "Vertical margin"} :title "Vertical margin"}
[:span {:class (stl/css :icon)} [:span {:class (stl/css :icon)}
i/margin-top-bottom-refactor] i/margin-top-bottom]
[:> numeric-input* {:class (stl/css :numeric-input) [:> numeric-input* {:class (stl/css :numeric-input)
:placeholder "--" :placeholder "--"
:data-name "m1" :data-name "m1"
@ -93,7 +93,7 @@
[:div {:class (stl/css :horizontal-margin) [:div {:class (stl/css :horizontal-margin)
:title "Horizontal margin"} :title "Horizontal margin"}
[:span {:class (stl/css :icon)} [:span {:class (stl/css :icon)}
i/margin-left-right-refactor] i/margin-left-right]
[:> numeric-input* {:class (stl/css :numeric-input) [:> numeric-input* {:class (stl/css :numeric-input)
:placeholder "--" :placeholder "--"
:data-name "m2" :data-name "m2"
@ -133,7 +133,7 @@
[:div {:class (stl/css :top-margin) [:div {:class (stl/css :top-margin)
:title "Top margin"} :title "Top margin"}
[:span {:class (stl/css :icon)} [:span {:class (stl/css :icon)}
i/margin-top-refactor] i/margin-top]
[:> numeric-input* {:class (stl/css :numeric-input) [:> numeric-input* {:class (stl/css :numeric-input)
:placeholder "--" :placeholder "--"
:data-name "m1" :data-name "m1"
@ -145,7 +145,7 @@
[:div {:class (stl/css :right-margin) [:div {:class (stl/css :right-margin)
:title "Right margin"} :title "Right margin"}
[:span {:class (stl/css :icon)} [:span {:class (stl/css :icon)}
i/margin-right-refactor] i/margin-right]
[:> numeric-input* {:class (stl/css :numeric-input) [:> numeric-input* {:class (stl/css :numeric-input)
:placeholder "--" :placeholder "--"
:data-name "m2" :data-name "m2"
@ -158,7 +158,7 @@
[:div {:class (stl/css :bottom-margin) [:div {:class (stl/css :bottom-margin)
:title "Bottom margin"} :title "Bottom margin"}
[:span {:class (stl/css :icon)} [:span {:class (stl/css :icon)}
i/margin-bottom-refactor] i/margin-bottom]
[:> numeric-input* {:class (stl/css :numeric-input) [:> numeric-input* {:class (stl/css :numeric-input)
:placeholder "--" :placeholder "--"
:data-name "m3" :data-name "m3"
@ -171,7 +171,7 @@
[:div {:class (stl/css :left-margin) [:div {:class (stl/css :left-margin)
:title "Left margin"} :title "Left margin"}
[:span {:class (stl/css :icon)} [:span {:class (stl/css :icon)}
i/margin-left-refactor] i/margin-left]
[:> numeric-input* {:class (stl/css :numeric-input) [:> numeric-input* {:class (stl/css :numeric-input)
:placeholder "--" :placeholder "--"
:data-name "m4" :data-name "m4"
@ -216,7 +216,7 @@
:selected (= type :multiple)) :selected (= type :multiple))
:title "Margin - multiple" :title "Margin - multiple"
:on-click on-type-change'} :on-click on-type-change'}
i/margin-refactor]])) i/margin]]))
(mf/defc element-behaviour-horizontal (mf/defc element-behaviour-horizontal
{::mf/props :obj {::mf/props :obj
@ -236,20 +236,20 @@
[:& radio-button [:& radio-button
{:value "fix" {:value "fix"
:icon i/fixed-width-refactor :icon i/fixed-width
:title "Fix width" :title "Fix width"
:id "behaviour-h-fix"}] :id "behaviour-h-fix"}]
(when has-fill (when has-fill
[:& radio-button [:& radio-button
{:value "fill" {:value "fill"
:icon i/fill-content-refactor :icon i/fill-content
:title "Width 100%" :title "Width 100%"
:id "behaviour-h-fill"}]) :id "behaviour-h-fill"}])
(when is-auto (when is-auto
[:& radio-button [:& radio-button
{:value "auto" {:value "auto"
:icon i/hug-content-refactor :icon i/hug-content
:title "Fit content" :title "Fit content"
:id "behaviour-h-auto"}])]]) :id "behaviour-h-auto"}])]])
@ -271,7 +271,7 @@
[:& radio-button [:& radio-button
{:value "fix" {:value "fix"
:icon i/fixed-width-refactor :icon i/fixed-width
:icon-class (stl/css :rotated) :icon-class (stl/css :rotated)
:title "Fix height" :title "Fix height"
:id "behaviour-v-fix"}] :id "behaviour-v-fix"}]
@ -279,14 +279,14 @@
(when has-fill (when has-fill
[:& radio-button [:& radio-button
{:value "fill" {:value "fill"
:icon i/fill-content-refactor :icon i/fill-content
:icon-class (stl/css :rotated) :icon-class (stl/css :rotated)
:title "Height 100%" :title "Height 100%"
:id "behaviour-v-fill"}]) :id "behaviour-v-fill"}])
(when is-auto (when is-auto
[:& radio-button [:& radio-button
{:value "auto" {:value "auto"
:icon i/hug-content-refactor :icon i/hug-content
:icon-class (stl/css :rotated) :icon-class (stl/css :rotated)
:title "Fit content" :title "Fit content"
:id "behaviour-v-auto"}])]]) :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?) :opened show-presets-dropdown?)
:on-click open-presets} :on-click open-presets}
[:span {:class (stl/css :select-name)} (tr "workspace.options.size-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? [:& dropdown {:show show-presets-dropdown?
:on-close close-presets} :on-close close-presets}
@ -377,15 +377,15 @@
[:span {:class (stl/css :preset-name)} (:name size-preset)] [:span {:class (stl/css :preset-name)} (:name size-preset)]
[:span {:class (stl/css :preset-size)} (:width size-preset) " x " (:height size-preset)]] [:span {:class (stl/css :preset-size)} (:width size-preset) " x " (:height size-preset)]]
(when preset-match (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) "") [:& radio-buttons {:selected (or (d/name orientation) "")
:on-change on-orientation-change :on-change on-orientation-change
:name "frame-otientation"} :name "frame-otientation"}
[:& radio-button {:icon i/size-vertical-refactor [:& radio-button {:icon i/size-vertical
:value "vert" :value "vert"
:id "size-vertical"}] :id "size-vertical"}]
[:& radio-button {:icon i/size-horizontal-refactor [:& radio-button {:icon i/size-horizontal
:value "horiz" :value "horiz"
:id "size-horizontal"}]]]) :id "size-horizontal"}]]])
(when (options :size) (when (options :size)
@ -449,7 +449,7 @@
(when (options :rotation) (when (options :rotation)
[:div {:class (stl/css :rotation) [:div {:class (stl/css :rotation)
:title (tr "workspace.options.rotation")} :title (tr "workspace.options.rotation")}
[:span {:class (stl/css :icon)} i/rotation-refactor] [:span {:class (stl/css :icon)} i/rotation]
[:> numeric-input* [:> numeric-input*
{:no-validate true {:no-validate true
:min -359 :min -359
@ -467,7 +467,7 @@
(= radius-mode :radius-1) (= radius-mode :radius-1)
[:div {:class (stl/css :radius-1) [:div {:class (stl/css :radius-1)
:title (tr "workspace.options.radius")} :title (tr "workspace.options.radius")}
[:span {:class (stl/css :icon)} i/corner-radius-refactor] [:span {:class (stl/css :icon)} i/corner-radius]
[:> numeric-input* [:> numeric-input*
{:placeholder (if (= :multiple (:rx values)) (tr "settings.multiple") "--") {:placeholder (if (= :multiple (:rx values)) (tr "settings.multiple") "--")
:ref radius-input-ref :ref radius-input-ref
@ -479,7 +479,7 @@
@radius-multi? @radius-multi?
[:div {:class (stl/css :radius-1) [:div {:class (stl/css :radius-1)
:title (tr "workspace.options.radius")} :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 [:input.input-text
{:type "number" {:type "number"
:placeholder "Mixed" :placeholder "Mixed"
@ -532,7 +532,7 @@
(tr "workspace.options.radius.all-corners") (tr "workspace.options.radius.all-corners")
(tr "workspace.options.radius.single-corners")) (tr "workspace.options.radius.single-corners"))
:on-click toggle-radius-mode} :on-click toggle-radius-mode}
i/corner-radius-refactor]])]) i/corner-radius]])])
(when (or (options :clip-content) (options :show-in-viewer)) (when (or (options :clip-content) (options :show-in-viewer))
[:div {:class (stl/css :clip-show)} [:div {:class (stl/css :clip-show)}
(when (options :clip-content) (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 [:button {:class (stl/css-case :more-options true
:selected open-shadow) :selected open-shadow)
:on-click on-toggle-open-shadow} :on-click on-toggle-open-shadow}
i/menu-refactor] i/menu]
[:div {:class (stl/css :type-select)} [:div {:class (stl/css :type-select)}
[:& select [:& select
{:class (stl/css :shadow-type-select) {:class (stl/css :shadow-type-select)
@ -171,11 +171,11 @@
[:button {:class (stl/css :action-btn) [:button {:class (stl/css :action-btn)
:on-click toggle-visibility} :on-click toggle-visibility}
(if hidden? (if hidden?
i/hide-refactor i/hide
i/shown-refactor)] i/shown)]
[:button {:class (stl/css :action-btn) [:button {:class (stl/css :action-btn)
:on-click on-remove-shadow} :on-click on-remove-shadow}
i/remove-refactor]]] i/remove-icon]]]
(when open-shadow (when open-shadow
[:& advanced-options {:class (stl/css :shadow-advanced-options) [:& advanced-options {:class (stl/css :shadow-advanced-options)
:visible? open-shadow :visible? open-shadow
@ -298,7 +298,7 @@
(when-not (= :multiple shadows) (when-not (= :multiple shadows)
[:button {:class (stl/css :add-shadow) [:button {:class (stl/css :add-shadow)
:on-click on-add-shadow} i/add-refactor])]] :on-click on-add-shadow} i/add])]]
(when open? (when open?
(cond (cond
@ -309,7 +309,7 @@
[:div {:class (stl/css :actions)} [:div {:class (stl/css :actions)}
[:button {:class (stl/css :action-btn) [:button {:class (stl/css :action-btn)
:on-click on-remove-all} :on-click on-remove-all}
i/remove-refactor]]]] i/remove-icon]]]]
(seq shadows) (seq shadows)
[:& h/sortable-container {} [:& 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?))} :class (stl/css-case :title-spacing-stroke (not has-strokes?))}
[:button {:class (stl/css :add-stroke) [:button {:class (stl/css :add-stroke)
:on-click on-add-stroke} i/add-refactor]]] :on-click on-add-stroke} i/add]]]
(when open? (when open?
[:div {:class (stl/css-case :element-content true [:div {:class (stl/css-case :element-content true
:empty-content (not has-strokes?))} :empty-content (not has-strokes?))}
@ -182,7 +182,7 @@
(tr "settings.multiple")] (tr "settings.multiple")]
[:button {:on-click handle-remove-all [:button {:on-click handle-remove-all
:class (stl/css :remove-btn)} :class (stl/css :remove-btn)}
i/remove-refactor]] i/remove-icon]]
(seq strokes) (seq strokes)
[:& h/sortable-container {} [:& h/sortable-container {}
(for [[index value] (d/enumerate (:strokes values []))] (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)} [:div {:class (stl/css :attr-actions)}
[:button {:class (stl/css :attr-action-btn) [:button {:class (stl/css :attr-action-btn)
:on-click handle-delete} :on-click handle-delete}
i/remove-refactor]]] i/remove-icon]]]
[:div {:class (stl/css :attr-nested-content)} [:div {:class (stl/css :attr-nested-content)}
[:div {:class (stl/css :attr-title)} [:div {:class (stl/css :attr-title)}
(str (d/name (last attr)))] (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" [:& radio-button {:value "left"
:id "text-align-left" :id "text-align-left"
:title (tr "workspace.options.text-options.text-align-left" (sc/get-tooltip :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" [:& radio-button {:value "center"
:id "text-align-center" :id "text-align-center"
:title (tr "workspace.options.text-options.text-align-center" (sc/get-tooltip :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" [:& radio-button {:value "right"
:id "text-align-right" :id "text-align-right"
:title (tr "workspace.options.text-options.text-align-right" (sc/get-tooltip :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" [:& radio-button {:value "justify"
:id "text-align-justify" :id "text-align-justify"
:title (tr "workspace.options.text-options.text-align-justify" (sc/get-tooltip :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 (mf/defc text-direction-options
[{:keys [values on-change on-blur] :as props}] [{:keys [values on-change on-blur] :as props}]
@ -80,12 +80,12 @@
:type "checkbox" :type "checkbox"
:id "ltr-text-direction" :id "ltr-text-direction"
:title (tr "workspace.options.text-options.direction-ltr") :title (tr "workspace.options.text-options.direction-ltr")
:icon i/text-ltr-refactor}] :icon i/text-ltr}]
[:& radio-button {:value "rtl" [:& radio-button {:value "rtl"
:type "checkbox" :type "checkbox"
:id "rtl-text-direction" :id "rtl-text-direction"
:title (tr "workspace.options.text-options.direction-rtl") :title (tr "workspace.options.text-options.direction-rtl")
:icon i/text-rtl-refactor}]]])) :icon i/text-rtl}]]]))
(mf/defc vertical-align (mf/defc vertical-align
[{:keys [values on-change on-blur] :as props}] [{:keys [values on-change on-blur] :as props}]
@ -105,15 +105,15 @@
[:& radio-button {:value "top" [:& radio-button {:value "top"
:id "vertical-text-align-top" :id "vertical-text-align-top"
:title (tr "workspace.options.text-options.align-top") :title (tr "workspace.options.text-options.align-top")
:icon i/text-top-refactor}] :icon i/text-top}]
[:& radio-button {:value "center" [:& radio-button {:value "center"
:id "vertical-text-align-center" :id "vertical-text-align-center"
:title (tr "workspace.options.text-options.align-middle") :title (tr "workspace.options.text-options.align-middle")
:icon i/text-middle-refactor}] :icon i/text-middle}]
[:& radio-button {:value "bottom" [:& radio-button {:value "bottom"
:id "vertical-text-align-bottom" :id "vertical-text-align-bottom"
:title (tr "workspace.options.text-options.align-bottom") :title (tr "workspace.options.text-options.align-bottom")
:icon i/text-bottom-refactor}]]])) :icon i/text-bottom}]]]))
(mf/defc grow-options (mf/defc grow-options
[{:keys [ids values on-blur] :as props}] [{:keys [ids values on-blur] :as props}]
@ -139,15 +139,15 @@
[:& radio-button {:value "fixed" [:& radio-button {:value "fixed"
:id "text-fixed-grow" :id "text-fixed-grow"
:title (tr "workspace.options.text-options.grow-fixed") :title (tr "workspace.options.text-options.grow-fixed")
:icon i/text-fixed-refactor}] :icon i/text-fixed}]
[:& radio-button {:value "auto-width" [:& radio-button {:value "auto-width"
:id "text-auto-width-grow" :id "text-auto-width-grow"
:title (tr "workspace.options.text-options.grow-auto-width") :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" [:& radio-button {:value "auto-height"
:id "text-auto-height-grow" :id "text-auto-height-grow"
:title (tr "workspace.options.text-options.grow-auto-height") :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 (mf/defc text-decoration-options
[{:keys [values on-change on-blur] :as props}] [{:keys [values on-change on-blur] :as props}]
@ -169,12 +169,12 @@
:type "checkbox" :type "checkbox"
:id "underline-text-decoration" :id "underline-text-decoration"
:title (tr "workspace.options.text-options.underline" (sc/get-tooltip :underline)) :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" [:& radio-button {:value "line-through"
:type "checkbox" :type "checkbox"
:id "line-through-text-decoration" :id "line-through-text-decoration"
:title (tr "workspace.options.text-options.strikethrough" (sc/get-tooltip :line-through)) :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/defc text-menu
{::mf/wrap [mf/memo]} {::mf/wrap [mf/memo]}
@ -291,7 +291,7 @@
(when (and (not typography) (not multiple?)) (when (and (not typography) (not multiple?))
[:button {:class (stl/css :add-typography) [:button {:class (stl/css :add-typography)
:on-click on-convert-to-typography} :on-click on-convert-to-typography}
i/add-refactor])]] i/add])]]
(when main-menu-open? (when main-menu-open?
[:div {:class (stl/css :element-content)} [:div {:class (stl/css :element-content)}
@ -309,7 +309,7 @@
[:div {:class (stl/css :multiple-typography-button) [:div {:class (stl/css :multiple-typography-button)
:on-click handle-detach-typography :on-click handle-detach-typography
:title (tr "workspace.libraries.text.multiple-typography-tooltip")} :title (tr "workspace.libraries.text.multiple-typography-tooltip")}
i/detach-refactor]] i/detach]]
:else :else
[:> text-options opts]) [:> text-options opts])
@ -319,7 +319,7 @@
[:> grow-options opts] [:> grow-options opts]
[:button {:class (stl/css :more-options) [:button {:class (stl/css :more-options)
:on-click toggle-more-options} :on-click toggle-more-options}
i/menu-refactor]] i/menu]]
(when more-options-open? (when more-options-open?
[:div {:class (stl/css :text-decoration-options)} [: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 [:div {:class (stl/css-case :font-item true
:selected current?)} :selected current?)}
[:span {:class (stl/css :label)} (:name font)] [: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) (declare row-renderer)
@ -303,7 +303,7 @@
[:span {:class (stl/css :name)} [:span {:class (stl/css :name)}
(:name font)] (:name font)]
[:span {:class (stl/css :icon)} [:span {:class (stl/css :icon)}
i/arrow-refactor]] i/arrow]]
:else :else
(tr "dashboard.fonts.deleted-placeholder"))] (tr "dashboard.fonts.deleted-placeholder"))]
@ -362,7 +362,7 @@
[:div {:class (stl/css :line-height)} [:div {:class (stl/css :line-height)}
[:span {:class (stl/css :icon) [:span {:class (stl/css :icon)
:alt (tr "workspace.options.text-options.line-height")} :alt (tr "workspace.options.text-options.line-height")}
i/text-lineheight-refactor] i/text-lineheight]
[:> numeric-input* [:> numeric-input*
{:min -200 {:min -200
:max 200 :max 200
@ -379,7 +379,7 @@
[:span [:span
{:class (stl/css :icon) {:class (stl/css :icon)
:alt (tr "workspace.options.text-options.letter-spacing")} :alt (tr "workspace.options.text-options.letter-spacing")}
i/text-letterspacing-refactor] i/text-letterspacing]
[:> numeric-input* [:> numeric-input*
{:min -200 {:min -200
:max 200 :max 200
@ -405,15 +405,15 @@
[:& radio-buttons {:selected text-transform [:& radio-buttons {:selected text-transform
:on-change handle-change :on-change handle-change
:name "text-transform"} :name "text-transform"}
[:& radio-button {:icon i/text-uppercase-refactor [:& radio-button {:icon i/text-uppercase
:type "checkbox" :type "checkbox"
:value "uppercase" :value "uppercase"
:id "text-transform-uppercase"}] :id "text-transform-uppercase"}]
[:& radio-button {:icon i/text-mixed-refactor [:& radio-button {:icon i/text-mixed
:type "checkbox" :type "checkbox"
:value "capitalize" :value "capitalize"
:id "text-transform-capitalize"}] :id "text-transform-capitalize"}]
[:& radio-button {:icon i/text-lowercase-refactor [:& radio-button {:icon i/text-lowercase
:type "checkbox" :type "checkbox"
:value "lowercase" :value "lowercase"
:id "text-transform-lowercase"}]]])) :id "text-transform-lowercase"}]]]))
@ -472,7 +472,7 @@
[:div {:class (stl/css :action-btn) [:div {:class (stl/css :action-btn)
:on-click on-close} :on-click on-close}
i/tick-refactor]] i/tick]]
[:& text-options {:values typography [:& text-options {:values typography
:on-change on-change :on-change on-change
@ -494,7 +494,7 @@
(:name font-data)] (:name font-data)]
[:div {:class (stl/css :action-btn) [:div {:class (stl/css :action-btn)
:on-click on-close} :on-click on-close}
i/menu-refactor]] i/menu]]
[:div {:class (stl/css :info-row)} [:div {:class (stl/css :info-row)}
[:span {:class (stl/css :info-label)} (tr "workspace.assets.typography.font-variant-id")] [:span {:class (stl/css :info-label)} (tr "workspace.assets.typography.font-variant-id")]
@ -624,10 +624,10 @@
(when ^boolean on-detach (when ^boolean on-detach
[:button {:class (stl/css :element-set-actions-button) [:button {:class (stl/css :element-set-actions-button)
:on-click on-detach} :on-click on-detach}
i/detach-refactor]) i/detach])
[:button {:class (stl/css :menu-btn) [:button {:class (stl/css :menu-btn)
:on-click on-open} :on-click on-open}
i/menu-refactor]]] i/menu]]]
[:& typography-advanced-options [:& typography-advanced-options
{:visible? open? {: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) (when (some? on-remove)
[:button {:class (stl/css :remove-btn) [:button {:class (stl/css :remove-btn)
:on-click on-remove} i/remove-refactor]) :on-click on-remove} i/remove-icon])
(when select-only (when select-only
[:button {:class (stl/css :select-btn) [:button {:class (stl/css :select-btn)
:on-click handle-select} :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] (fn [color]
(on-color-change index color))) (on-color-change index color)))
on-color-detach-refactor on-color-detach
(mf/use-callback (mf/use-callback
(mf/deps index on-color-detach) (mf/deps index on-color-detach)
(fn [color] (fn [color]
(on-color-detach index color))) (on-color-detach index color)))
on-remove-refactor on-remove
(mf/use-callback (mf/use-callback
(mf/deps index on-remove) (mf/deps index on-remove)
#(on-remove index)) #(on-remove index))
@ -123,14 +123,14 @@
stroke-caps-options stroke-caps-options
[{:value nil :label (tr "workspace.options.stroke-cap.none")} [{:value nil :label (tr "workspace.options.stroke-cap.none")}
:separator :separator
{:value :line-arrow :label (tr "workspace.options.stroke-cap.line-arrow-short") :icon :stroke-arrow-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-refactor} {: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-refactor} {: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-refactor} {: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-refactor} {:value :diamond-marker :label (tr "workspace.options.stroke-cap.diamond-marker-short") :icon :stroke-diamond}
:separator :separator
{:value :round :label (tr "workspace.options.stroke-cap.round") :icon :stroke-rounded-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-refactor}] {:value :square :label (tr "workspace.options.stroke-cap.square") :icon :stroke-squared}]
on-cap-switch on-cap-switch
(mf/use-callback (mf/use-callback
@ -152,8 +152,8 @@
:index index :index index
:title title :title title
:on-change on-color-change-refactor :on-change on-color-change-refactor
:on-detach on-color-detach-refactor :on-detach on-color-detach
:on-remove on-remove-refactor :on-remove on-remove
:disable-drag disable-drag :disable-drag disable-drag
:on-focus on-focus :on-focus on-focus
:select-on-focus select-on-focus :select-on-focus select-on-focus
@ -164,7 +164,7 @@
[:div {:class (stl/css :stroke-width-input-element) [:div {:class (stl/css :stroke-width-input-element)
:title (tr "workspace.options.stroke-width")} :title (tr "workspace.options.stroke-width")}
[:span {:class (stl/css :icon)} [:span {:class (stl/css :icon)}
i/stroke-size-refactor] i/stroke-size]
[:> numeric-input* [:> numeric-input*
{:min 0 {:min 0
:className (stl/css :stroke-width-input) :className (stl/css :stroke-width-input)
@ -201,7 +201,7 @@
[:button {:class (stl/css :swap-caps-btn) [:button {:class (stl/css :swap-caps-btn)
:on-click on-cap-switch} :on-click on-cap-switch}
i/switch-refactor] i/switch]
[:div {:class (stl/css :cap-select)} [:div {:class (stl/css :cap-select)}
[:& select [:& select

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

@ -268,7 +268,7 @@
(stl/css :subsection-title) (stl/css :subsection-title)
(stl/css :section-title))} (stl/css :section-title))}
[:span {:class (stl/css-case :open is-visible? [:span {:class (stl/css-case :open is-visible?
:collapsed-shortcuts true)} i/arrow-refactor] :collapsed-shortcuts true)} i/arrow]
[:span {:class (if is-sub? [:span {:class (if is-sub?
(stl/css :subsection-name) (stl/css :subsection-name)
(stl/css :section-name))} name]]) (stl/css :section-name))} name]])
@ -473,14 +473,14 @@
[:div {:class (stl/css :shortcuts-title)} (tr "shortcuts.title")] [:div {:class (stl/css :shortcuts-title)} (tr "shortcuts.title")]
[:div {:class (stl/css :shortcuts-close-button) [:div {:class (stl/css :shortcuts-close-button)
:on-click close-fn} :on-click close-fn}
i/close-refactor]] i/close]]
[:div {:class (stl/css :search-field)} [:div {:class (stl/css :search-field)}
[:& search-bar {:on-change on-search-term-change-2 [:& search-bar {:on-change on-search-term-change-2
:clear-action on-search-clear-click :clear-action on-search-clear-click
:value @filter-term :value @filter-term
:placeholder (tr "shortcuts.title") :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? (if match-any?
[:div {:class (stl/css :shortcuts-list)} [: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-double-click on-double-click
:on-context-menu on-context-menu} :on-context-menu on-context-menu}
[:div {:class (stl/css :page-icon)} [:div {:class (stl/css :page-icon)}
i/document-refactor] i/document]
(if editing? (if editing?
[:* [:*
@ -148,7 +148,7 @@
[:div {:class (stl/css :page-actions)} [:div {:class (stl/css :page-actions)}
(when (and deletable? (not workspace-read-only?)) (when (and deletable? (not workspace-read-only?))
[:button {:on-click on-delete} [:button {:on-click on-delete}
i/delete-refactor])]])]])) i/delete])]])]]))
;; --- Page Item Wrapper ;; --- Page Item Wrapper
@ -222,7 +222,7 @@
(tr "labels.view-only")] (tr "labels.view-only")]
[:button {:class (stl/css :add-page) [:button {:class (stl/css :add-page)
:on-click on-create} :on-click on-create}
i/add-refactor])] i/add])]
[:div {:class (stl/css :tool-window-content)} [:div {:class (stl/css :tool-window-content)}
[:& pages-list {:file file :key (:id file)}]]])) [:& 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? (when show-arrows?
[:button {:class (stl/css :left-arrow) [:button {:class (stl/css :left-arrow)
:disabled (= offset 0) :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) [:div {:class (stl/css :text-palette-content)
:ref container :ref container
@ -164,7 +164,7 @@
(when show-arrows? (when show-arrows?
[:button {:class (stl/css :right-arrow) [:button {:class (stl/css :right-arrow)
:disabled (= offset max-offset) :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/defc text-palette
{::mf/wrap [mf/memo]} {::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)) (when (= selected (:id cur-library))
[:span {:class (stl/css :icon-wrapper)} [:span {:class (stl/css :icon-wrapper)}
i/tick-refactor])])) i/tick])]))
[:li [:li
{:class (stl/css-case :file-library true {:class (stl/css-case :file-library true
@ -52,4 +52,4 @@
(dm/str "(" (count file-typographies) ")")]] (dm/str "(" (count file-typographies) ")")]]
(when (= selected :file) (when (= selected :file)
[:span {:class (stl/css :icon-wrapper)} [: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)) :aria-label (tr "workspace.toolbar.image" (sc/get-tooltip :insert-image))
:on-click on-click :on-click on-click
:class (stl/css :main-toolbar-options-button)} :class (stl/css :main-toolbar-options-button)}
i/img-refactor i/img
[:& file-uploader [:& file-uploader
{:input-id "image-upload" {:input-id "image-upload"
:accept cm/str-image-types :accept cm/str-image-types
@ -130,7 +130,7 @@
:selected (and (nil? selected-drawtool) :selected (and (nil? selected-drawtool)
(not edition))) (not edition)))
:on-click interrupt} :on-click interrupt}
i/move-refactor]] i/move]]
[:* [:*
[:li [:li
[:button [:button
@ -140,7 +140,7 @@
:on-click select-drawtool :on-click select-drawtool
:data-tool "frame" :data-tool "frame"
:data-test "artboard-btn"} :data-test "artboard-btn"}
i/board-refactor]] i/board]]
[:li [:li
[:button [:button
{:title (tr "workspace.toolbar.rect" (sc/get-tooltip :draw-rect)) {:title (tr "workspace.toolbar.rect" (sc/get-tooltip :draw-rect))
@ -149,7 +149,7 @@
:on-click select-drawtool :on-click select-drawtool
:data-tool "rect" :data-tool "rect"
:data-test "rect-btn"} :data-test "rect-btn"}
i/rectangle-refactor]] i/rectangle]]
[:li [:li
[:button [:button
{:title (tr "workspace.toolbar.ellipse" (sc/get-tooltip :draw-ellipse)) {:title (tr "workspace.toolbar.ellipse" (sc/get-tooltip :draw-ellipse))
@ -158,7 +158,7 @@
:on-click select-drawtool :on-click select-drawtool
:data-tool "circle" :data-tool "circle"
:data-test "ellipse-btn"} :data-test "ellipse-btn"}
i/elipse-refactor]] i/elipse]]
[:li [:li
[:button [:button
{:title (tr "workspace.toolbar.text" (sc/get-tooltip :draw-text)) {: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)) :class (stl/css-case :main-toolbar-options-button true :selected (= selected-drawtool :text))
:on-click select-drawtool :on-click select-drawtool
:data-tool "text"} :data-tool "text"}
i/text-refactor]] i/text]]
[:& image-upload] [:& image-upload]
@ -178,7 +178,7 @@
:on-click select-drawtool :on-click select-drawtool
:data-tool "curve" :data-tool "curve"
:data-test "curve-btn"} :data-test "curve-btn"}
i/curve-refactor]] i/curve]]
[:li [:li
[:button [:button
{:title (tr "workspace.toolbar.path" (sc/get-tooltip :draw-path)) {:title (tr "workspace.toolbar.path" (sc/get-tooltip :draw-path))
@ -187,7 +187,7 @@
:on-click select-drawtool :on-click select-drawtool
:data-tool "path" :data-tool "path"
:data-test "path-btn"} :data-test "path-btn"}
i/path-refactor]] i/path]]
(when *assert* (when *assert*
[:li [:li
@ -195,7 +195,7 @@
{:title "Debugging tool" {:title "Debugging tool"
:class (stl/css-case :main-toolbar-options-button true :selected (contains? layout :debug-panel)) :class (stl/css-case :main-toolbar-options-button true :selected (contains? layout :debug-panel))
:on-click toggle-debug-panel} :on-click toggle-debug-panel}
i/bug-refactor]])]] i/bug]])]]
[:button {:class (stl/css :toolbar-handler) [:button {:class (stl/css :toolbar-handler)
:on-click toggle-toolbar} :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 :y icon-y
:width (/ 22 zoom) :width (/ 22 zoom)
:height (/ 22 zoom) :height (/ 22 zoom)
:href "#icon-add-refactor"}]])) :href "#icon-add"}]]))
(defn use-drag (defn use-drag
[{:keys [on-drag-start on-drag-end on-drag-delta on-drag-position]}] [{:keys [on-drag-start on-drag-end on-drag-delta on-drag-position]}]
@ -864,7 +864,7 @@
:on-blur handle-blur-track-input}] :on-blur handle-blur-track-input}]
(when (and hovering? (not medium?) (not small?)) (when (and hovering? (not medium?) (not small?))
[:button {:class (stl/css :grid-editor-button) [: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)))} [:g {:transform (when (= type :row) (dm/fmt "rotate(-90 % %)" (:x marker-p) (:y marker-p)))}
[:& track-marker [:& 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)) {:class (stl/css-case :is-toggled (= edit-mode :draw))
:title (tr "workspace.path.actions.draw-nodes" (sc/get-tooltip :draw-nodes)) :title (tr "workspace.path.actions.draw-nodes" (sc/get-tooltip :draw-nodes))
:on-click on-select-draw-mode} :on-click on-select-draw-mode}
i/pentool-refactor] i/pentool]
;; Edit mode ;; Edit mode
[:button [:button
{:class (stl/css-case :is-toggled (= edit-mode :move)) {:class (stl/css-case :is-toggled (= edit-mode :move))
:title (tr "workspace.path.actions.move-nodes" (sc/get-tooltip :move-nodes)) :title (tr "workspace.path.actions.move-nodes" (sc/get-tooltip :move-nodes))
:on-click on-select-edit-mode} :on-click on-select-edit-mode}
i/move-refactor]] i/move]]
[:div {:class (stl/css :sub-actions-group)} [:div {:class (stl/css :sub-actions-group)}
;; Add Node ;; Add Node
@ -132,14 +132,14 @@
{:disabled (not (:add-node enabled-buttons)) {:disabled (not (:add-node enabled-buttons))
:title (tr "workspace.path.actions.add-node" (sc/get-tooltip :add-node)) :title (tr "workspace.path.actions.add-node" (sc/get-tooltip :add-node))
:on-click on-add-node} :on-click on-add-node}
i/add-refactor] i/add]
;; Remove node ;; Remove node
[:button [:button
{:disabled (not (:remove-node enabled-buttons)) {:disabled (not (:remove-node enabled-buttons))
:title (tr "workspace.path.actions.delete-node" (sc/get-tooltip :delete-node)) :title (tr "workspace.path.actions.delete-node" (sc/get-tooltip :delete-node))
:on-click on-remove-node} :on-click on-remove-node}
i/remove-refactor]] i/remove-icon]]
[:div {:class (stl/css :sub-actions-group)} [:div {:class (stl/css :sub-actions-group)}
;; Merge Nodes ;; Merge Nodes
@ -147,21 +147,21 @@
{:disabled (not (:merge-nodes enabled-buttons)) {:disabled (not (:merge-nodes enabled-buttons))
:title (tr "workspace.path.actions.merge-nodes" (sc/get-tooltip :merge-nodes)) :title (tr "workspace.path.actions.merge-nodes" (sc/get-tooltip :merge-nodes))
:on-click on-merge-nodes} :on-click on-merge-nodes}
i/merge-nodes-refactor] i/merge-nodes]
;; Join Nodes ;; Join Nodes
[:button [:button
{:disabled (not (:join-nodes enabled-buttons)) {:disabled (not (:join-nodes enabled-buttons))
:title (tr "workspace.path.actions.join-nodes" (sc/get-tooltip :join-nodes)) :title (tr "workspace.path.actions.join-nodes" (sc/get-tooltip :join-nodes))
:on-click on-join-nodes} :on-click on-join-nodes}
i/join-nodes-refactor] i/join-nodes]
;; Separate Nodes ;; Separate Nodes
[:button [:button
{:disabled (not (:separate-nodes enabled-buttons)) {:disabled (not (:separate-nodes enabled-buttons))
:title (tr "workspace.path.actions.separate-nodes" (sc/get-tooltip :separate-nodes)) :title (tr "workspace.path.actions.separate-nodes" (sc/get-tooltip :separate-nodes))
:on-click on-separate-nodes} :on-click on-separate-nodes}
i/separate-nodes-refactor]] i/separate-nodes]]
;; Make Corner ;; Make Corner
[:div {:class (stl/css :sub-actions-group)} [:div {:class (stl/css :sub-actions-group)}
@ -169,14 +169,14 @@
{:disabled (not (:make-corner enabled-buttons)) {:disabled (not (:make-corner enabled-buttons))
:title (tr "workspace.path.actions.make-corner" (sc/get-tooltip :make-corner)) :title (tr "workspace.path.actions.make-corner" (sc/get-tooltip :make-corner))
:on-click on-make-corner} :on-click on-make-corner}
i/to-corner-refactor] i/to-corner]
;; Make Curve ;; Make Curve
[:button [:button
{:disabled (not (:make-curve enabled-buttons)) {:disabled (not (:make-curve enabled-buttons))
:title (tr "workspace.path.actions.make-curve" (sc/get-tooltip :make-curve)) :title (tr "workspace.path.actions.make-curve" (sc/get-tooltip :make-curve))
:on-click on-make-curve} :on-click on-make-curve}
i/to-curve-refactor]] i/to-curve]]
;; Toggle snap ;; Toggle snap
[:div {:class (stl/css :sub-actions-group)} [:div {:class (stl/css :sub-actions-group)}
@ -184,5 +184,5 @@
{:class (stl/css-case :is-toggled snap-toggled) {:class (stl/css-case :is-toggled snap-toggled)
:title (tr "workspace.path.actions.snap-nodes" (sc/get-tooltip :snap-nodes)) :title (tr "workspace.path.actions.snap-nodes" (sc/get-tooltip :snap-nodes))
:on-click on-toggle-snap} :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")} :visibility (if show-artboard-names? "visible" "hidden")}
(cond (cond
(:use-for-thumbnail frame) (:use-for-thumbnail frame)
[:use {:href "#icon-boards-thumbnail-refactor"}] [:use {:href "#icon-boards-thumbnail"}]
grid-edition? grid-edition?
[:use {:href "#icon-grid-refactor"}] [:use {:href "#icon-grid"}]
main-instance? main-instance?
[:use {:href "#icon-component-refactor"}])]) [:use {:href "#icon-component"}])])
[:foreignObject {:x text-pos-x [:foreignObject {:x text-pos-x
@ -266,7 +266,7 @@
:on-double-click on-double-click :on-double-click on-double-click
:on-pointer-enter on-pointer-enter :on-pointer-enter on-pointer-enter
:on-pointer-leave on-pointer-leave} :on-pointer-leave on-pointer-leave}
i/play-refactor i/play
[:span (:name flow)]]]])) [:span (:name flow)]]]]))
(mf/defc frame-flows (mf/defc frame-flows