github/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2026-04-27 20:28:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

♻️ Refactor icon namespaces (#7262)

Browse Source 
* ♻️ Rename old icons as deprecated

* ♻️ Take icons from the namespace for the icon component

* ♻️ Take icons from the namespace for the icon-button component
This commit is contained in:
Luis de Dios 2025-09-08 10:02:33 +02:00 committed by GitHub
parent e761bcac85
commit 794eb78aca
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
137 changed files with 805 additions and 774 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/app/main/ui/alert.cljs
View File

@ -11,7 +11,7 @@
[app.main.store :as st]
[app.main.ui.components.link :as lk]
[app.main.ui.ds.notifications.context-notification :refer [context-notification*]]
[app.main.ui.icons :as i]
[app.main.ui.icons :as deprecated-icon]
[app.util.dom :as dom]
[app.util.i18n :as i18n :refer [tr]]
[app.util.keyboard :as k]
@ -57,7 +57,7 @@
[:div {:class (stl/css :modal-header)}
[:h2 {:class (stl/css :modal-title)} title]
[:button {:class (stl/css :modal-close-btn)
:on-click accept-fn} i/close]]
:on-click accept-fn} deprecated-icon/close]]
[:div {:class (stl/css :modal-content)}
(when (and (string? message) (not= message ""))

6
frontend/src/app/main/ui/auth.cljs
View File

@ -14,7 +14,7 @@
[app.main.ui.auth.recovery :refer [recovery-page]]
[app.main.ui.auth.recovery-request :refer [recovery-request-page]]
[app.main.ui.auth.register :refer [register-page register-success-page register-validate-page terms-register]]
[app.main.ui.icons :as i]
[app.main.ui.icons :as deprecated-icon]
[app.util.dom :as dom]
[app.util.i18n :as i18n :refer [tr]]
[rumext.v2 :as mf]))
@ -42,9 +42,9 @@
:auth-section true
:register is-register)}
[:h1 {:class (stl/css :logo-container)}
[:a {:href "#/" :title "Penpot" :class (stl/css :logo-btn)} i/logo]]
[:a {:href "#/" :title "Penpot" :class (stl/css :logo-btn)} deprecated-icon/logo]]
[:div {:class (stl/css :login-illustration)}
i/login-illustration]
deprecated-icon/login-illustration]
[:section {:class (stl/css :auth-content)}

10
frontend/src/app/main/ui/auth/login.cljs
View File

@ -19,7 +19,7 @@
[app.main.ui.components.forms :as fm]
[app.main.ui.components.link :as lk]
[app.main.ui.ds.notifications.context-notification :refer [context-notification*]]
[app.main.ui.icons :as i]
[app.main.ui.icons :as deprecated-icon]
[app.main.ui.notifications.context-notification :refer [context-notification]]
[app.util.dom :as dom]
[app.util.i18n :refer [tr]]
@ -212,25 +212,25 @@
[:div {:class (stl/css :auth-buttons)}
(when (contains? cf/flags :login-with-google)
[:& bl/button-link {:on-click login-with-google
:icon i/brand-google
:icon deprecated-icon/brand-google
:label (tr "auth.login-with-google-submit")
:class (stl/css :login-btn :btn-google-auth)}])
(when (contains? cf/flags :login-with-github)
[:& bl/button-link {:on-click login-with-github
:icon i/brand-github
:icon deprecated-icon/brand-github
:label (tr "auth.login-with-github-submit")
:class (stl/css :login-btn :btn-github-auth)}])
(when (contains? cf/flags :login-with-gitlab)
[:& bl/button-link {:on-click login-with-gitlab
:icon i/brand-gitlab
:icon deprecated-icon/brand-gitlab
:label (tr "auth.login-with-gitlab-submit")
:class (stl/css :login-btn :btn-gitlab-auth)}])
(when (contains? cf/flags :login-with-oidc)
[:& bl/button-link {:on-click login-with-oidc
:icon i/brand-openid
:icon deprecated-icon/brand-openid
:label (tr "auth.login-with-oidc-submit")
:class (stl/css :login-btn :btn-oidc-auth)}])]))

14
frontend/src/app/main/ui/comments.cljs
View File

@ -25,9 +25,9 @@
[app.main.ui.components.dropdown :refer [dropdown]]
[app.main.ui.ds.buttons.button :refer [button*]]
[app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
[app.main.ui.ds.foundations.assets.icon :refer [icon*]]
[app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i]
[app.main.ui.hooks :as h]
[app.main.ui.icons :as i]
[app.main.ui.icons :as deprecated-icon]
[app.util.dom :as dom]
[app.util.i18n :as i18n :refer [tr]]
[app.util.keyboard :as kbd]
@ -583,7 +583,7 @@
:on-key-down handle-key-down
:icon-class (stl/css-case :open-mentions-button true
:is-toggled @display-mentions*)
:icon "at"}]))
:icon i/at}]))
(def ^:private schema:comment-avatar
[:map
@ -917,12 +917,12 @@
:title (tr "labels.comment.mark-as-solved")
:on-click toggle-resolved}
[:span {:class (stl/css-case :checkbox true
:global/checked (:is-resolved thread))} i/tick]])
:global/checked (:is-resolved thread))} deprecated-icon/tick]])
(when (= (:id profile) (:id owner))
[:> icon-button* {:variant "ghost"
:aria-label (tr "labels.options")
:on-click on-toggle-options
:icon "menu"}])]
:icon i/menu}])]
[:& dropdown {:show (= options uuid/zero)
:on-close on-hide-options}
[:ul {:class (stl/css :dropdown-menu)}
@ -987,7 +987,7 @@
[:> icon-button* {:variant "ghost"
:aria-label (tr "labels.options")
:on-click on-toggle-options
:icon "menu"}])]
:icon i/menu}])]
[:div {:class (stl/css :item)}
(if @edition?
@ -1368,7 +1368,7 @@
:on-click on-click*}
[:div {:class (stl/css :location)}
[:div {:class (stl/css :location-icon)}
[:> icon* {:icon-id "comments"}]]
[:> icon* {:icon-id i/comments}]]
[:div {:class (stl/css :location-text)}
(str "#" (:seqn item))
(str " " (:file-name item))

8
frontend/src/app/main/ui/components/context_menu_a11y.cljs
View File

@ -12,7 +12,7 @@
[app.common.schema :as sm]
[app.main.refs :as refs]
[app.main.ui.components.dropdown :refer [dropdown-content*]]
[app.main.ui.icons :as i]
[app.main.ui.icons :as deprecated-icon]
[app.util.dom :as dom]
[app.util.i18n :as i18n :refer [tr]]
[app.util.keyboard :as kbd]
@ -251,7 +251,7 @@
[:button {:class (stl/css :context-menu-action :submenu-back)
:data-no-close true
:on-click on-submenu-exit}
[:span {:class (stl/css :submenu-icon-back)} i/arrow]
[:span {:class (stl/css :submenu-icon-back)} deprecated-icon/arrow]
parent]]
[:li {:class (stl/css :separator)}]])
@ -289,11 +289,11 @@
name)
(when (and selected (= id selected))
[:span {:class (stl/css :selected-icon)} i/tick])]
[:span {:class (stl/css :selected-icon)} deprecated-icon/tick])]
[:a {:class (stl/css :context-menu-action :submenu)
:data-no-close true
:on-click (enter-submenu name sub-options)
:data-testid id}
name
[:span {:class (stl/css :submenu-icon)} i/arrow]])]))))]])])))
[:span {:class (stl/css :submenu-icon)} deprecated-icon/arrow]])]))))]])])))

6
frontend/src/app/main/ui/components/copy_button.cljs
View File

@ -9,7 +9,7 @@
(:require
[app.common.data.macros :as dm]
[app.main.data.event :as-alias ev]
[app.main.ui.icons :as i]
[app.main.ui.icons :as deprecated-icon]
[app.util.dom :as dom]
[app.util.i18n :refer [tr]]
[app.util.timers :as tm]
@ -44,5 +44,5 @@
children
[:span {:class (stl/css :icon-btn)}
(if active?
i/tick
i/clipboard)]]))
deprecated-icon/tick
deprecated-icon/clipboard)]]))

4
frontend/src/app/main/ui/components/editable_label.cljs
View File

@ -9,7 +9,7 @@
(:require
[app.common.data.macros :as dm]
[app.main.constants :refer [max-input-length]]
[app.main.ui.icons :as i]
[app.main.ui.icons :as deprecated-icon]
[app.util.dom :as dom]
[app.util.keyboard :as kbd]
[app.util.timers :as timers]
@ -99,7 +99,7 @@
[:span {:class (stl/css :editable-label-close)
:on-click cancel-edition}
i/delete-text]]
deprecated-icon/delete-text]]
[:span {:class final-class
:title tooltip

6
frontend/src/app/main/ui/components/editable_select.cljs
View File

@ -13,7 +13,7 @@
[app.common.uuid :as uuid]
[app.main.ui.components.dropdown :refer [dropdown]]
[app.main.ui.components.numeric-input :refer [numeric-input*]]
[app.main.ui.icons :as i]
[app.main.ui.icons :as deprecated-icon]
[app.util.dom :as dom]
[app.util.keyboard :as kbd]
[app.util.timers :as timers]
@ -182,7 +182,7 @@
[:span {:class (stl/css :dropdown-button)
:on-click toggle-dropdown}
i/arrow]
deprecated-icon/arrow]
[:& dropdown {:show (or is-open? false)
:on-close close-dropdown}
@ -201,4 +201,4 @@
:on-click select-item}
[:span {:class (stl/css :label)} label]
[:span {:class (stl/css :check-icon)}
i/tick]])))]]]))
deprecated-icon/tick]])))]]]))

14
frontend/src/app/main/ui/components/forms.cljs
View File

@ -11,7 +11,7 @@
[app.common.data.macros :as dm]
[app.main.ui.components.select :as cs]
[app.main.ui.hooks :as hooks]
[app.main.ui.icons :as i]
[app.main.ui.icons :as deprecated-icon]
[app.util.dom :as dom]
[app.util.forms :as fm]
[app.util.i18n :as i18n :refer [tr]]
@ -57,11 +57,11 @@
help-icon' (cond
(and (= input-type "password")
(= @type' "password"))
i/shown
deprecated-icon/shown
(and (= input-type "password")
(= @type' "text"))
i/hide
deprecated-icon/hide
:else
help-icon)
@ -130,7 +130,7 @@
:for (name input-name)} label
(when is-checkbox?
[:span {:class (stl/css-case :global/checked checked?)} (when checked? i/status-tick)])
[:span {:class (stl/css-case :global/checked checked?)} (when checked? deprecated-icon/status-tick)])
(if is-checkbox?
[:> :input props]
@ -145,11 +145,11 @@
(when show-valid?
[:span {:class (stl/css :valid-icon)}
i/tick])
deprecated-icon/tick])
(when show-invalid?
[:span {:class (stl/css :invalid-icon)}
i/close])])]
deprecated-icon/close])])]
(some? children)
[:label {:for (name input-name)}
@ -585,4 +585,4 @@
:caution (:caution item))}
[:span {:class (stl/css :text)} (:text item)]
[:button {:class (stl/css :icon)
:on-click #(remove-item! item)} i/close]]])])]))
:on-click #(remove-item! item)} deprecated-icon/close]]])])]))

6
frontend/src/app/main/ui/components/reorder_handler.cljs
View File

@ -7,15 +7,15 @@
(ns app.main.ui.components.reorder-handler
(:require-macros [app.main.style :as stl])
(:require
[app.main.ui.ds.foundations.assets.icon :as ic]
[app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i]
[rumext.v2 :as mf]))
(mf/defc reorder-handler*
[{:keys [ref]}]
[:*
[:div {:ref ref :class (stl/css :reorder)}
[:> ic/icon*
{:icon-id ic/reorder
[:> icon*
{:icon-id i/reorder
:class (stl/css :reorder-icon)
:aria-hidden true}]]
[:hr {:class (stl/css :reorder-separator-top)}]

4
frontend/src/app/main/ui/components/search_bar.cljs
View File

@ -7,7 +7,7 @@
(ns app.main.ui.components.search-bar
(:require-macros [app.main.style :as stl])
(:require
[app.main.ui.ds.foundations.assets.icon :refer [icon*]]
[app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i]
[app.util.dom :as dom]
[app.util.keyboard :as kbd]
[rumext.v2 :as mf]))
@ -55,5 +55,5 @@
(when (not= "" value)
[:button {:class (stl/css :clear-icon)
:on-click handle-clear}
[:> icon* {:icon-id "delete-text"
[:> icon* {:icon-id i/delete-text
:size "s"}]])]]))

10
frontend/src/app/main/ui/components/select.cljs
View File

@ -11,7 +11,7 @@
[app.common.data.macros :as dm]
[app.common.uuid :as uuid]
[app.main.ui.components.dropdown :refer [dropdown]]
[app.main.ui.icons :as i]
[app.main.ui.icons :as deprecated-icon]
[app.util.dom :as dom]
[rumext.v2 :as mf]))
@ -100,7 +100,7 @@
(let [selected-option (first (filter #(= (:value %) default-value) options))
current-icon (:icon selected-option)
current-icon-ref (i/key->icon current-icon)]
current-icon-ref (deprecated-icon/key->icon current-icon)]
[:div {:on-click open-dropdown
:role "combobox"
:class (dm/str (stl/css-case :custom-select true
@ -110,7 +110,7 @@
(when (and current-icon current-icon-ref)
[:span {:class (stl/css :current-icon)} current-icon-ref])
[:span {:class (stl/css :current-label)} current-label]
[:span {:class (stl/css :dropdown-button)} i/arrow]
[:span {:class (stl/css :dropdown-button)} deprecated-icon/arrow]
[:& dropdown {:show is-open? :on-close close-dropdown}
[:ul {:ref dropdown-element* :data-direction (or data-direction @dropdown-direction*)
:class (dm/str dropdown-class " " (stl/css :custom-select-dropdown))}
@ -120,7 +120,7 @@
:role "option"
:key (dm/str current-id "-" index)}]
(let [[value label icon] (as-key-value item)
icon-ref (i/key->icon icon)]
icon-ref (deprecated-icon/key->icon icon)]
[:li
{:key (dm/str current-id "-" index)
:role "option"
@ -134,4 +134,4 @@
:on-click select-item}
(when (and icon icon-ref) [:span {:class (stl/css :icon)} icon-ref])
[:span {:class (stl/css :label)} label]
[:span {:class (stl/css :check-icon)} i/tick]])))]]])))
[:span {:class (stl/css :check-icon)} deprecated-icon/tick]])))]]])))

4
frontend/src/app/main/ui/components/tab_container.cljs
View File

@ -9,7 +9,7 @@
(:require
[app.common.data :as d]
[app.common.data.macros :as dm]
[app.main.ui.icons :as i]
[app.main.ui.icons :as deprecated-icon]
[app.util.array :as array]
[app.util.dom :as dom]
[app.util.i18n :refer [tr]]
@ -50,7 +50,7 @@
{:on-click handle-collapse
:class (stl/css :collapse-sidebar)
:aria-label (tr "workspace.sidebar.collapse")}
i/arrow])
deprecated-icon/arrow])
[:div {:class (stl/css :tab-container-tab-wrapper)}
(for [tab children]
(let [props (.-props tab)

6
frontend/src/app/main/ui/confirm.cljs
View File

@ -10,7 +10,7 @@
[app.main.data.modal :as modal]
[app.main.store :as st]
[app.main.ui.ds.notifications.context-notification :refer [context-notification*]]
[app.main.ui.icons :as i]
[app.main.ui.icons :as deprecated-icon]
[app.util.dom :as dom]
[app.util.i18n :as i18n :refer [tr]]
[app.util.keyboard :as k]
@ -69,7 +69,7 @@
[:div {:class (stl/css :modal-header)}
[:h2 {:class (stl/css :modal-title)} title]
[:button {:class (stl/css :modal-close-btn)
:on-click cancel-fn} i/close]]
:on-click cancel-fn} deprecated-icon/close]]
[:div {:class (stl/css :modal-content)}
(when (and (string? message) (not= message ""))
@ -88,7 +88,7 @@
(for [item items]
[:li {:class (stl/css :modal-item-element)}
[:span {:class (stl/css :modal-component-icon)}
i/component]
deprecated-icon/component]
[:span {:class (stl/css :modal-component-name)}
(:name item)]])]])]

4
frontend/src/app/main/ui/dashboard/change_owner.cljs
View File

@ -10,7 +10,7 @@
[app.common.schema :as sm]
[app.main.data.modal :as modal]
[app.main.ui.components.forms :as fm]
[app.main.ui.icons :as i]
[app.main.ui.icons :as deprecated-icon]
[app.util.i18n :as i18n :refer [tr]]
[rumext.v2 :as mf]))
@ -43,7 +43,7 @@
[:div {:class (stl/css :modal-header)}
[:h2 {:class (stl/css :modal-title)} (tr "modals.leave-and-reassign.title")]
[:button {:class (stl/css :modal-close-btn)
:on-click modal/hide!} i/close]]
:on-click modal/hide!} deprecated-icon/close]]
[:div {:class (stl/css :modal-content)}
[:p {:class (stl/css :modal-msg)}

11
frontend/src/app/main/ui/dashboard/comments.cljs
View File

@ -15,13 +15,14 @@
[app.main.ui.comments :as cmt]
[app.main.ui.components.dropdown :refer [dropdown]]
[app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
[app.main.ui.icons :as i]
[app.main.ui.ds.foundations.assets.icon :as i]
[app.main.ui.icons :as deprecated-icon]
[app.util.i18n :as i18n :refer [tr]]
[potok.v2.core :as ptk]
[rumext.v2 :as mf]))
(def ^:private comments-icon-svg
(i/icon-xref :comments (stl/css :comments-icon)))
(deprecated-icon/icon-xref :comments (stl/css :comments-icon)))
(mf/defc comments-icon*
{::mf/props :obj}
@ -43,7 +44,7 @@
:data-testid "open-comments"
:aria-label (tr "dashboard.notifications.view")
:on-click on-show-comments
:icon "comments"}
:icon i/comments}
(when (seq tgroups)
[:div {:class (stl/css :unread)}])]]))
@ -94,14 +95,14 @@
:tab-index (if show? "0" "-1")
:aria-label (tr "label.mark-all-as-read")
:on-click on-read-all
:icon "tick"}])
:icon i/tick}])
[:> icon-button* {:class (stl/css :notifications-button)
:variant "action"
:tab-index (if show? "0" "-1")
:aria-label (tr "labels.close")
:on-click on-hide-comments
:icon "close"}]]
:icon i/close}]]
(if (seq tgroups)
[:div {:class (stl/css :thread-groups)}

4
frontend/src/app/main/ui/dashboard/files.cljs
View File

@ -19,7 +19,7 @@
[app.main.ui.dashboard.project-menu :refer [project-menu*]]
[app.main.ui.ds.product.empty-placeholder :refer [empty-placeholder*]]
[app.main.ui.hooks :as hooks]
[app.main.ui.icons :as i]
[app.main.ui.icons :as deprecated-icon]
[app.util.dom :as dom]
[app.util.i18n :as i18n :refer [tr]]
[app.util.keyboard :as kbd]
@ -27,7 +27,7 @@
[rumext.v2 :as mf]))
(def ^:private menu-icon
(i/icon-xref :menu (stl/css :menu-icon)))
(deprecated-icon/icon-xref :menu (stl/css :menu-icon)))
(mf/defc header*
{::mf/props :obj

16
frontend/src/app/main/ui/dashboard/fonts.cljs
View File

@ -19,7 +19,7 @@
[app.main.ui.components.context-menu-a11y :refer [context-menu*]]
[app.main.ui.components.file-uploader :refer [file-uploader]]
[app.main.ui.ds.product.empty-placeholder :refer [empty-placeholder*]]
[app.main.ui.icons :as i]
[app.main.ui.icons :as deprecated-icon]
[app.main.ui.notifications.context-notification :refer [context-notification]]
[app.util.dom :as dom]
[app.util.i18n :as i18n :refer [tr]]
@ -239,7 +239,7 @@
[:div {:class (stl/css :table-field :options)}
(when (:height-warning? item)
[:span {:class (stl/css :icon :failure)}
i/msg-neutral])
deprecated-icon/msg-neutral])
[:button {:on-click on-upload
:data-id (dm/str id)
@ -254,7 +254,7 @@
[:span {:class (stl/css :icon :close)
:data-id (dm/str id)
:on-click on-delete}
i/close]]]))]]))
deprecated-icon/close]]]))]]))
(mf/defc installed-font-context-menu
{::mf/props :obj
@ -381,7 +381,7 @@
{:class (stl/css :icon :close)
:data-id (dm/str id)
:on-click on-delete-variant}
i/add])])]
deprecated-icon/add])])]
(if ^boolean edition?
[:div {:class (stl/css :table-field :options)}
@ -393,13 +393,13 @@
(tr "labels.save")]
[:button {:class (stl/css :icon :close)
:on-click on-cancel}
i/close]]
deprecated-icon/close]]
(when can-edit
[:div {:class (stl/css :table-field :options)}
[:span {:class (stl/css :icon)
:on-click on-menu-open}
i/menu]
deprecated-icon/menu]
[:& installed-font-context-menu
{:on-close on-menu-close
@ -443,13 +443,13 @@
(nil? fonts)
[:div {:class (stl/css :fonts-placeholder)}
[:div {:class (stl/css :icon)} i/loader]
[:div {:class (stl/css :icon)} deprecated-icon/loader]
[:div {:class (stl/css :label)} (tr "dashboard.loading-fonts")]]
:else
(if ^boolean can-edit
[:div {:class (stl/css :fonts-placeholder)}
[:div {:class (stl/css :icon)} i/text]
[:div {:class (stl/css :icon)} deprecated-icon/text]
[:div {:class (stl/css :label)} (tr "dashboard.fonts.empty-placeholder")]]
[:> empty-placeholder*

6
frontend/src/app/main/ui/dashboard/grid.cljs
View File

@ -32,7 +32,7 @@
[app.main.ui.dashboard.placeholder :refer [empty-grid-placeholder* loading-placeholder*]]
[app.main.ui.ds.product.loader :refer [loader*]]
[app.main.ui.hooks :as h]
[app.main.ui.icons :as i]
[app.main.ui.icons :as deprecated-icon]
[app.main.worker :as mw]
[app.util.color :as uc]
[app.util.dom :as dom]
@ -117,7 +117,7 @@
;; --- Grid Item Library
(def ^:private menu-icon
(i/icon-xref :menu (stl/css :menu-icon)))
(deprecated-icon/icon-xref :menu (stl/css :menu-icon)))
(mf/defc grid-item-library*
{::mf/props :obj}
@ -406,7 +406,7 @@
[:> grid-item-thumbnail* {:file file :can-edit can-edit}])
(when (and (:is-shared file) (not is-library-view?))
[:div {:class (stl/css :item-badge)} i/library])
[:div {:class (stl/css :item-badge)} deprecated-icon/library])
[:div {:class (stl/css :info-wrapper)}
[:div {:class (stl/css :item-info)}

20
frontend/src/app/main/ui/dashboard/import.cljs
View File

@ -18,7 +18,7 @@
[app.main.store :as st]
[app.main.ui.components.file-uploader :refer [file-uploader]]
[app.main.ui.ds.product.loader :refer [loader*]]
[app.main.ui.icons :as i]
[app.main.ui.icons :as deprecated-icon]
[app.main.ui.notifications.context-notification :refer [context-notification]]
[app.main.worker :as mw]
[app.util.dom :as dom]
@ -260,10 +260,10 @@
:file-icon true
:icon-fill import-ready?)}
(cond
import-ready? i/logo-icon
import-error? i/close
import-success? i/tick
analyze-error? i/close)])
import-ready? deprecated-icon/logo-icon
import-error? deprecated-icon/close
import-success? deprecated-icon/tick
analyze-error? deprecated-icon/close)])
(if editing?
[:div {:class (stl/css :file-name-edit)}
@ -277,13 +277,13 @@
(:name entry)
(when ^boolean is-shared?
[:span {:class (stl/css :icon)}
i/library])])
deprecated-icon/library])])
[:div {:class (stl/css :edit-entry-buttons)}
(when ^boolean editable?
[:button {:on-click on-edit'} i/curve])
[:button {:on-click on-edit'} deprecated-icon/curve])
(when ^boolean can-be-deleted
[:button {:on-click on-delete'} i/delete])]]
[:button {:on-click on-delete'} deprecated-icon/delete])]]
(cond
analyze-error?
@ -312,7 +312,7 @@
[:span {:class (stl/css-case
:linked-library-tag true
:error error?)}
i/detach]])))]]))
deprecated-icon/detach]])))]]))
(defn initialize-state
[entries]
@ -464,7 +464,7 @@
[:h2 {:class (stl/css :modal-title)} (tr "dashboard.import")]
[:button {:class (stl/css :modal-close-btn)
:on-click on-cancel} i/close]]
:on-click on-cancel} deprecated-icon/close]]
[:div {:class (stl/css :modal-content)}
(when (and (= :analyze status) errors?)

4
frontend/src/app/main/ui/dashboard/inline_edition.cljs
View File

@ -7,7 +7,7 @@
(ns app.main.ui.dashboard.inline-edition
(:require-macros [app.main.style :as stl])
(:require
[app.main.ui.icons :as i]
[app.main.ui.icons :as deprecated-icon]
[app.util.dom :as dom]
[app.util.keyboard :as kbd]
[rumext.v2 :as mf]))
@ -70,5 +70,5 @@
:on-blur on-blur
:max-length max-length}]
[:span {:class (stl/css :close)
:on-click on-cancel} i/close]]))
:on-click on-cancel} deprecated-icon/close]]))

7
frontend/src/app/main/ui/dashboard/pin_button.cljs
View File

@ -7,16 +7,15 @@
(ns app.main.ui.dashboard.pin-button
(:require-macros
[app.common.data.macros :as dm]
[app.main.style :as stl]
[app.main.ui.icons :refer [icon-xref]])
[app.main.style :as stl])
(:require
[app.main.ui.icons :as i]
[app.main.ui.icons :as deprecated-icon]
[app.util.i18n :as i18n :refer [tr]]
[app.util.object :as obj]
[rumext.v2 :as mf]))
(def ^:private pin-icon
(icon-xref :pin (stl/css :icon)))
(deprecated-icon/icon-xref :pin (stl/css :icon)))
(mf/defc pin-button*
{::mf/props :obj}

4
frontend/src/app/main/ui/dashboard/placeholder.cljs
View File

@ -12,7 +12,7 @@
[app.main.ui.dashboard.import :as udi]
[app.main.ui.ds.product.empty-placeholder :refer [empty-placeholder*]]
[app.main.ui.ds.product.loader :refer [loader*]]
[app.main.ui.icons :as i]
[app.main.ui.icons :as deprecated-icon]
[app.util.dom :as dom]
[app.util.i18n :as i18n :refer [tr]]
[okulary.core :as l]
@ -132,7 +132,7 @@
:on-mouse-leave on-mouse-leave}
(if show-text?
(tr "dashboard.empty-project.create")
i/add)]]))))
deprecated-icon/add)]]))))
(mf/defc loading-placeholder*
[]

10
frontend/src/app/main/ui/dashboard/projects.cljs
View File

@ -22,7 +22,7 @@
[app.main.ui.dashboard.project-menu :refer [project-menu*]]
[app.main.ui.ds.product.empty-placeholder :refer [empty-placeholder*]]
[app.main.ui.hooks :as hooks]
[app.main.ui.icons :as i]
[app.main.ui.icons :as deprecated-icon]
[app.util.dom :as dom]
[app.util.i18n :as i18n :refer [tr]]
[app.util.keyboard :as kbd]
@ -33,16 +33,16 @@
[rumext.v2 :as mf]))
(def ^:private show-more-icon
(i/icon-xref :arrow (stl/css :show-more-icon)))
(deprecated-icon/icon-xref :arrow (stl/css :show-more-icon)))
(def ^:private close-icon
(i/icon-xref :close (stl/css :close-icon)))
(deprecated-icon/icon-xref :close (stl/css :close-icon)))
(def ^:private add-icon
(i/icon-xref :add (stl/css :add-icon)))
(deprecated-icon/icon-xref :add (stl/css :add-icon)))
(def ^:private menu-icon
(i/icon-xref :menu (stl/css :menu-icon)))
(deprecated-icon/icon-xref :menu (stl/css :menu-icon)))
(mf/defc header*
{::mf/wrap [mf/memo]

8
frontend/src/app/main/ui/dashboard/search.cljs
View File

@ -13,7 +13,7 @@
[app.main.store :as st]
[app.main.ui.dashboard.grid :refer [grid*]]
[app.main.ui.hooks :as hooks]
[app.main.ui.icons :as i]
[app.main.ui.icons :as deprecated-icon]
[app.util.dom :as dom]
[app.util.i18n :as i18n :refer [tr]]
[okulary.core :as l]
@ -63,17 +63,17 @@
(cond
(empty? search-term)
[:div {:class (stl/css :grid-empty-placeholder :search)}
[:div {:class (stl/css :icon)} i/search]
[:div {:class (stl/css :icon)} deprecated-icon/search]
[:div {:class (stl/css :text)} (tr "dashboard.type-something")]]
(nil? result)
[:div {:class (stl/css :grid-empty-placeholder :search)}
[:div {:class (stl/css :icon)} i/search]
[:div {:class (stl/css :icon)} deprecated-icon/search]
[:div {:class (stl/css :text)} (tr "dashboard.searching-for" search-term)]]
(empty? result)
[:div {:class (stl/css :grid-empty-placeholder :search)}
[:div {:class (stl/css :icon)} i/search]
[:div {:class (stl/css :icon)} deprecated-icon/search]
[:div {:class (stl/css :text)} (tr "dashboard.no-matches-for" search-term)]]
:else

24
frontend/src/app/main/ui/dashboard/sidebar.cljs
View File

@ -33,7 +33,7 @@
show-subscription-dashboard-banner?
get-subscription-type]]
[app.main.ui.dashboard.team-form]
[app.main.ui.icons :as i :refer [icon-xref]]
[app.main.ui.icons :as deprecated-icon]
[app.util.dom :as dom]
[app.util.dom.dnd :as dnd]
[app.util.i18n :as i18n :refer [tr]]
@ -46,31 +46,31 @@
[rumext.v2 :as mf]))
(def ^:private clear-search-icon
(icon-xref :delete-text (stl/css :clear-search-icon)))
(deprecated-icon/icon-xref :delete-text (stl/css :clear-search-icon)))
(def ^:private search-icon
(icon-xref :search (stl/css :search-icon)))
(deprecated-icon/icon-xref :search (stl/css :search-icon)))
(def ^:private tick-icon
(icon-xref :tick (stl/css :tick-icon)))
(deprecated-icon/icon-xref :tick (stl/css :tick-icon)))
(def ^:private logo-icon
(icon-xref :logo (stl/css :logo-icon)))
(deprecated-icon/icon-xref :logo (stl/css :logo-icon)))
(def ^:private add-icon
(icon-xref :add (stl/css :add-icon)))
(deprecated-icon/icon-xref :add (stl/css :add-icon)))
(def ^:private arrow-icon
(icon-xref :arrow (stl/css :arrow-icon)))
(deprecated-icon/icon-xref :arrow (stl/css :arrow-icon)))
(def ^:private menu-icon
(icon-xref :menu (stl/css :menu-icon)))
(deprecated-icon/icon-xref :menu (stl/css :menu-icon)))
(def ^:private pin-icon
(icon-xref :pin (stl/css :pin-icon)))
(deprecated-icon/icon-xref :pin (stl/css :pin-icon)))
(def ^:private exit-icon
(icon-xref :exit (stl/css :exit-icon)))
(deprecated-icon/icon-xref :exit (stl/css :exit-icon)))
(mf/defc sidebar-project*
{::mf/private true}
@ -296,7 +296,7 @@
[:> dropdown-menu-item* {:on-click on-team-click
:data-value (:default-team-id profile)
:class (stl/css :team-dropdown-item)}
[:span {:class (stl/css :penpot-icon)} i/logo-icon]
[:span {:class (stl/css :penpot-icon)} deprecated-icon/logo-icon]
[:span {:class (stl/css :team-text)} (tr "dashboard.your-penpot")]
(when (= (:default-team-id profile) (:id team))
@ -544,7 +544,7 @@
(cond
(:is-default team)
[:div {:class (stl/css :team-name)}
[:span {:class (stl/css :penpot-icon)} i/logo-icon]
[:span {:class (stl/css :penpot-icon)} deprecated-icon/logo-icon]
[:span {:class (stl/css :team-text)} (tr "dashboard.default-team-name")]]
(and (contains? cf/flags :subscriptions)

8
frontend/src/app/main/ui/dashboard/subscription.cljs
View File

@ -10,7 +10,7 @@
[app.main.store :as st]
[app.main.ui.components.dropdown-menu :refer [dropdown-menu-item*]]
[app.main.ui.ds.product.cta :refer [cta*]]
[app.main.ui.icons :as i]
[app.main.ui.icons :as deprecated-icon]
[app.util.dom :as dom]
[app.util.i18n :as i18n :refer [tr]]
[app.util.keyboard :as kbd]
@ -41,7 +41,7 @@
[:div {:class (stl/css :content)}
[:span {:class (stl/css :cta-title)} top-title]
[:span {:class (stl/css :cta-text) :data-testid "subscription-name"} top-description]]
(when has-dropdown [:span {:class (stl/css :icon-dropdown)} i/arrow])]
(when has-dropdown [:span {:class (stl/css :icon-dropdown)} deprecated-icon/arrow])]
(when (and has-dropdown show-data)
[:div {:class (stl/css :cta-bottom-section)}
@ -131,8 +131,8 @@
(tr "subscription.dashboard.power-up.enterprise-plan"))
:data-testid "subscription-icon"}
(case subscription-type
"unlimited" i/character-u
"enterprise" i/character-e)])
"unlimited" deprecated-icon/character-u
"enterprise" deprecated-icon/character-e)])
(mf/defc main-menu-power-up*
[{:keys [close-sub-menu]}]

24
frontend/src/app/main/ui/dashboard/team.cljs
View File

@ -26,8 +26,8 @@
members-cta*
show-subscription-members-banner?]]
[app.main.ui.dashboard.team-form]
[app.main.ui.ds.foundations.assets.icon :refer [icon*]]
[app.main.ui.icons :as i]
[app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i]
[app.main.ui.icons :as deprecated-icon]
[app.main.ui.notifications.badge :refer [badge-notification]]
[app.main.ui.notifications.context-notification :refer [context-notification]]
[app.util.dom :as dom]
@ -37,28 +37,28 @@
[rumext.v2 :as mf]))
(def ^:private arrow-icon
(i/icon-xref :arrow (stl/css :arrow-icon)))
(deprecated-icon/icon-xref :arrow (stl/css :arrow-icon)))
(def ^:private menu-icon
(i/icon-xref :menu (stl/css :menu-icon)))
(deprecated-icon/icon-xref :menu (stl/css :menu-icon)))
(def ^:private warning-icon
(i/icon-xref :msg-warning (stl/css :warning-icon)))
(deprecated-icon/icon-xref :msg-warning (stl/css :warning-icon)))
(def ^:private success-icon
(i/icon-xref :msg-success (stl/css :success-icon)))
(deprecated-icon/icon-xref :msg-success (stl/css :success-icon)))
(def ^:private image-icon
(i/icon-xref :img (stl/css :image-icon)))
(deprecated-icon/icon-xref :img (stl/css :image-icon)))
(def ^:private user-icon
(i/icon-xref :user (stl/css :user-icon)))
(deprecated-icon/icon-xref :user (stl/css :user-icon)))
(def ^:private document-icon
(i/icon-xref :document (stl/css :document-icon)))
(deprecated-icon/icon-xref :document (stl/css :document-icon)))
(def ^:private group-icon
(i/icon-xref :group (stl/css :group-icon)))
(deprecated-icon/icon-xref :group (stl/css :group-icon)))
(mf/defc header
{::mf/wrap [mf/memo]
@ -914,7 +914,7 @@
(tr "modals.create-webhook.title"))]
[:button {:class (stl/css :modal-close-btn)
:on-click modal/hide!} i/close]]
:on-click modal/hide!} deprecated-icon/close]]
[:div {:class (stl/css :modal-content)}
[:div {:class (stl/css :fields-row)}
@ -981,7 +981,7 @@
[:span {:title (tr "dashboard.webhooks.cant-edit")
:class (stl/css :menu-disabled)}
[:> icon* {:icon-id "menu"}]])))
[:> icon* {:icon-id i/menu}]])))
(mf/defc webhook-item*
{::mf/wrap [mf/memo]

4
frontend/src/app/main/ui/dashboard/team_form.cljs
View File

@ -15,7 +15,7 @@
[app.main.data.team :as dtm]
[app.main.store :as st]
[app.main.ui.components.forms :as fm]
[app.main.ui.icons :as i]
[app.main.ui.icons :as deprecated-icon]
[app.util.dom :as dom]
[app.util.i18n :as i18n :refer [tr]]
[app.util.keyboard :as kbd]
@ -100,7 +100,7 @@
(tr "labels.create-team")])
[:button {:class (stl/css :modal-close-btn)
:on-click modal/hide!} i/close]]
:on-click modal/hide!} deprecated-icon/close]]
[:div {:class (stl/css :modal-content)}
[:& fm/input {:type "text"

6
frontend/src/app/main/ui/dashboard/templates.cljs
View File

@ -15,7 +15,7 @@
[app.main.data.modal :as modal]
[app.main.refs :as refs]
[app.main.store :as st]
[app.main.ui.icons :as i]
[app.main.ui.icons :as deprecated-icon]
[app.util.dom :as dom]
[app.util.dom.normalize-wheel :as nw]
[app.util.i18n :refer [tr]]
@ -26,10 +26,10 @@
[rumext.v2 :as mf]))
(def ^:private arrow-icon
(i/icon-xref :arrow (stl/css :arrow-icon)))
(deprecated-icon/icon-xref :arrow (stl/css :arrow-icon)))
(def ^:private download-icon
(i/icon-xref :add (stl/css :download-icon)))
(deprecated-icon/icon-xref :add (stl/css :download-icon)))
(def builtin-templates
(l/derived :builtin-templates st/state))

4
frontend/src/app/main/ui/debug/icons_preview.cljs
View File

@ -2,7 +2,7 @@
(:require-macros [app.main.style :as stl])
(:require
[app.main.ui.cursors :as c]
[app.main.ui.icons :as i]
[app.main.ui.icons :as deprecated-icon]
[app.util.timers :as ts]
[cuerdas.core :as str]
[rumext.v2 :as mf]))
@ -11,7 +11,7 @@
{::mf/wrap-props false
::mf/private true}
[]
(let [entries (->> (seq (js/Object.entries i/default))
(let [entries (->> (seq (js/Object.entries deprecated-icon/default))
(sort-by first))]
[:section {:class (stl/css :gallery)}
(for [[key val] entries]

4
frontend/src/app/main/ui/delete_shared.cljs
View File

@ -12,7 +12,7 @@
[app.main.repo :as rp]
[app.main.store :as st]
[app.main.ui.ds.notifications.context-notification :refer [context-notification*]]
[app.main.ui.icons :as i]
[app.main.ui.icons :as deprecated-icon]
[app.util.dom :as dom]
[app.util.i18n :as i18n :refer [tr]]
[app.util.keyboard :as k]
@ -98,7 +98,7 @@
[:div {:class (stl/css :modal-header)}
[:h2 {:class (stl/css :modal-title)} title]
[:button {:class (stl/css :modal-close-btn)
:on-click cancel-fn} i/close]]
:on-click cancel-fn} deprecated-icon/close]]
[:div {:class (stl/css :modal-content)}
(when (and (string? subtitle) (not= subtitle ""))

18
frontend/src/app/main/ui/ds/controls/combobox.cljs
View File

@ -12,7 +12,7 @@
[app.main.constants :refer [max-input-length]]
[app.main.ui.ds.controls.select :refer [get-option handle-focus-change]]
[app.main.ui.ds.controls.shared.options-dropdown :refer [options-dropdown* schema:option]]
[app.main.ui.ds.foundations.assets.icon :as i]
[app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i]
[app.util.dom :as dom]
[app.util.keyboard :as kbd]
[app.util.object :as obj]
@ -234,9 +234,9 @@
[:span {:class (stl/css-case :header true
:header-icon (some? icon))}
(when icon
[:> i/icon* {:icon-id icon
:size "s"
:aria-hidden true}])
[:> icon* {:icon-id icon
:size "s"
:aria-hidden true}])
[:input {:id id
:ref input-ref
:type "text"
@ -264,11 +264,11 @@
:aria-controls listbox-id
:class (stl/css :button-toggle-list)
:on-click on-click}
[:> i/icon* {:icon-id i/arrow-down
:class (stl/css :arrow)
:size "s"
:aria-hidden true
:data-testid "combobox-open-button"}]])]
[:> icon* {:icon-id i/arrow-down
:class (stl/css :arrow)
:size "s"
:aria-hidden true
:data-testid "combobox-open-button"}]])]
(when (and ^boolean is-open
^boolean dropdown-options)

4
frontend/src/app/main/ui/ds/controls/numeric_input.cljs
View File

@ -17,7 +17,7 @@
[app.main.ui.ds.controls.shared.options-dropdown :refer [options-dropdown*]]
[app.main.ui.ds.controls.utilities.input-field :refer [input-field*]]
[app.main.ui.ds.controls.utilities.token-field :refer [token-field*]]
[app.main.ui.ds.foundations.assets.icon :refer [icon* icon-list]]
[app.main.ui.ds.foundations.assets.icon :refer [icon* icon-list] :as i]
[app.main.ui.ds.tooltip :refer [tooltip*]]
[app.main.ui.formats :as fmt]
[app.util.dom :as dom]
@ -606,7 +606,7 @@
:slot-end (when-not disabled
(when (some? tokens)
(mf/html [:> icon-button* {:variant "action"
:icon "tokens"
:icon i/tokens
:class (stl/css :invisible-button)
:aria-label (tr "ds.inputs.numeric-input.open-token-list-dropdown")
:ref open-dropdown-ref

16
frontend/src/app/main/ui/ds/controls/select.cljs
View File

@ -10,7 +10,7 @@
(:require
[app.common.data :as d]
[app.main.ui.ds.controls.shared.options-dropdown :refer [options-dropdown* schema:option]]
[app.main.ui.ds.foundations.assets.icon :as i]
[app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i]
[app.util.dom :as dom]
[app.util.keyboard :as kbd]
[app.util.object :as obj]
@ -197,17 +197,17 @@
[:span {:class (stl/css-case :select-header true
:header-icon has-icon?)}
(when ^boolean has-icon?
[:> i/icon* {:icon-id icon
:size "s"
:aria-hidden true}])
[:> icon* {:icon-id icon
:size "s"
:aria-hidden true}])
[:span {:class (stl/css-case :header-label true
:header-label-dimmed empty-selected-id?)}
(if ^boolean empty-selected-id? "--" label)]]
[:> i/icon* {:icon-id i/arrow-down
:class (stl/css :arrow)
:size "s"
:aria-hidden true}]]
[:> icon* {:icon-id i/arrow-down
:class (stl/css :arrow)
:size "s"
:aria-hidden true}]]
(when ^boolean is-open
[:> options-dropdown* {:on-click on-option-click

6
frontend/src/app/main/ui/ds/controls/shared/option.cljs
View File

@ -9,7 +9,7 @@
(:require-macros
[app.main.style :as stl])
(:require
[app.main.ui.ds.foundations.assets.icon :as i]
[app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i]
[rumext.v2 :as mf]))
(def ^:private schema:option
@ -50,7 +50,7 @@
:data-testid "dropdown-option"}
(when (some? icon)
[:> i/icon*
[:> icon*
{:icon-id icon
:size "s"
:class (stl/css :option-icon)
@ -62,7 +62,7 @@
label]
(when ^boolean selected
[:> i/icon*
[:> icon*
{:icon-id i/tick
:size "s"
:class (stl/css :option-check)

4
frontend/src/app/main/ui/ds/controls/shared/options_dropdown.cljs
View File

@ -12,7 +12,7 @@
[app.common.weak :refer [weak-key]]
[app.main.ui.ds.controls.shared.option :refer [option*]]
[app.main.ui.ds.controls.shared.token-option :refer [token-option*]]
[app.main.ui.ds.foundations.assets.icon :as i]
[app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i]
[cuerdas.core :as str]
[rumext.v2 :as mf]))
@ -61,7 +61,7 @@
:group
[:li {:class (stl/css :group-option)
:key (weak-key option)}
[:> i/icon*
[:> icon*
{:icon-id i/arrow-down
:size "m"
:class (stl/css :option-check)

3
frontend/src/app/main/ui/ds/controls/utilities/token_field.cljs
View File

@ -10,6 +10,7 @@
[app.common.data :as d]
[app.common.data.macros :as dm]
[app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
[app.main.ui.ds.foundations.assets.icon :as i]
[app.main.ui.ds.tooltip :refer [tooltip*]]
[app.util.dom :as dom]
[app.util.i18n :refer [tr]]
@ -79,7 +80,7 @@
(when-not ^boolean disabled
[:> icon-button* {:variant "action"
:class (stl/css :invisible-button)
:icon "broken-link"
:icon i/broken-link
:ref token-detach-btn-ref
:aria-label (tr "ds.inputs.token-field.detach-token")
:on-click detach-token}])]))

8
frontend/src/app/main/ui/ds/foundations/assets/icon.mdx
View File

@ -47,13 +47,13 @@ Assuming the namespace is required as `i`:
```clj
(ns app.main.ui.foo
(:require
[app.main.ui.ds.foundations.assets.icon :as i]))
[app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i]))
```
You can now use the icon IDs defined in the namespace:
```clj
[:> i/icon* {:icon-id i/pin}]
[:> icon* {:icon-id i/pin}]
```
### Customizing colors
@ -65,7 +65,7 @@ If you need to override this behavior, you can use a `class` in the `<Icon>`
component and set `color` to whatever value you prefer:
```clj
[:> i/icon* {:icon-id i/add :class (stl/css :toolbar-icon)}]
[:> icon* {:icon-id i/add :class (stl/css :toolbar-icon)}]
```
```scss
@ -80,7 +80,7 @@ By default, icons do not have any accessible text attached to them. You should
add an `aria-label` attribute to set a proper text:
```clj
[:> i/icon* {:icon-id i/add :aria-label (tr "foo.bar")}]
[:> icon* {:icon-id i/add :aria-label (tr "foo.bar")}]
```
## Usage guidelines for design

4
frontend/src/app/main/ui/ds/notifications/shared/notification_pill.cljs
View File

@ -10,7 +10,7 @@
(:require
[app.common.data.macros :as dm]
[app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
[app.main.ui.ds.foundations.assets.icon :as i]
[app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i]
[app.util.i18n :as i18n :refer [tr]]
[rumext.v2 :as mf]))
@ -50,7 +50,7 @@
icon-id (icons-by-level level)]
[:div {:class (dm/str class " " (stl/css :notification-pill))}
[:div {:class (stl/css :error-message)}
[:> i/icon* {:icon-id icon-id :class (stl/css :icon)}]
[:> icon* {:icon-id icon-id :class (stl/css :icon)}]
;; The content can arrive in markdown format, in these cases
;; we will use the prop is-html to true to indicate it and
;; that the html injection is performed and the necessary css classes are applied.

4
frontend/src/app/main/ui/ds/notifications/toast.cljs
View File

@ -10,7 +10,7 @@
[app.main.style :as stl])
(:require
[app.common.data :as d]
[app.main.ui.ds.foundations.assets.icon :as i]
[app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i]
[app.main.ui.ds.notifications.shared.notification-pill :refer [notification-pill*]]
[rumext.v2 :as mf]))
@ -62,4 +62,4 @@
:level-error (= level :error)
:level-success (= level :success)
:level-info (= level :info))}
[:> i/icon* {:icon-id i/close}]]]))
[:> icon* {:icon-id i/close}]]]))

6
frontend/src/app/main/ui/ds/product/milestone.cljs
View File

@ -13,7 +13,7 @@
[app.common.types.profile :refer [schema:profile]]
[app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
[app.main.ui.ds.controls.input :refer [input*]]
[app.main.ui.ds.foundations.assets.icon :as i]
[app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i]
[app.main.ui.ds.foundations.typography :as t]
[app.main.ui.ds.foundations.typography.text :refer [text*]]
[app.main.ui.ds.product.avatar :refer [avatar*]]
@ -70,7 +70,7 @@
[:div {:class (stl/css :name-wrapper)}
[:> text* {:as "span" :typography t/body-small :class (stl/css :name)} label]
(when locked
[:> i/icon* {:icon-id i/lock :class (stl/css :lock-icon)}])])
[:> icon* {:icon-id i/lock :class (stl/css :lock-icon)}])])
[:*
[:time {:date-time (ct/format-inst created-at :iso)
@ -80,7 +80,7 @@
[:div {:class (stl/css :milestone-buttons)}
[:> icon-button* {:class (stl/css :menu-button)
:variant "ghost"
:icon "menu"
:icon i/menu
:aria-label (tr "workspace.versions.version-menu")
:on-click on-open-menu}]]]]))

12
frontend/src/app/main/ui/ds/product/milestone_group.cljs
View File

@ -13,7 +13,7 @@
[app.common.schema :as sm]
[app.common.time :as cm]
[app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
[app.main.ui.ds.foundations.assets.icon :as i]
[app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i]
[app.main.ui.ds.foundations.typography :as t]
[app.main.ui.ds.foundations.typography.text :refer [text*]]
[app.main.ui.ds.utilities.date :refer [date*]]
@ -66,14 +66,14 @@
[:button {:class (stl/css :toggle-snapshots)
:aria-label (tr "workspace.versions.expand-snapshot")
:on-click on-toggle-visibility}
[:> i/icon* {:icon-id i/clock :class (stl/css :icon-clock)}]
[:> icon* {:icon-id i/clock :class (stl/css :icon-clock)}]
[:> text* {:as "span"
:typography t/body-medium
:class (stl/css :toggle-message)}
(tr "workspace.versions.autosaved.entry" (count snapshots))]
[:> i/icon* {:icon-id i/arrow
:class (stl/css-case :icon-arrow true
:icon-arrow-toggled open?)}]]
[:> icon* {:icon-id i/arrow
:class (stl/css-case :icon-arrow true
:icon-arrow-toggled open?)}]]
(when ^boolean open?
(for [[idx d] (d/enumerate snapshots)]
@ -82,7 +82,7 @@
[:> date* {:date d :class (stl/css :date) :typography t/body-small}]
[:> icon-button* {:class (stl/css :entry-button)
:variant "ghost"
:icon "menu"
:icon i/menu
:aria-label (tr "workspace.versions.version-menu")
:data-index idx
:on-click on-menu-click}]]))]]))

16
frontend/src/app/main/ui/exports/assets.cljs
View File

@ -16,7 +16,7 @@
[app.main.data.modal :as modal]
[app.main.refs :as refs]
[app.main.store :as st]
[app.main.ui.icons :as i]
[app.main.ui.icons :as deprecated-icon]
[app.main.ui.workspace.shapes :refer [shape-wrapper]]
[app.util.dom :as dom]
[app.util.i18n :as i18n :refer [tr c]]
@ -26,13 +26,13 @@
[rumext.v2 :as mf]))
(def ^:private neutral-icon
(i/icon-xref :msg-neutral (stl/css :icon)))
(deprecated-icon/icon-xref :msg-neutral (stl/css :icon)))
(def ^:private error-icon
(i/icon-xref :delete-text (stl/css :icon)))
(deprecated-icon/icon-xref :delete-text (stl/css :icon)))
(def ^:private close-icon
(i/icon-xref :close (stl/css :close-icon)))
(deprecated-icon/icon-xref :close (stl/css :close-icon)))
(mf/defc export-multiple-dialog
[{:keys [exports title cmd no-selection origin]}]
@ -84,7 +84,7 @@
[:h2 {:class (stl/css :modal-title)} title]
[:button {:class (stl/css :modal-close-btn)
:on-click cancel-fn}
i/close]]
deprecated-icon/close]]
[:*
[:div {:class (stl/css :modal-content)}
@ -97,12 +97,12 @@
(cond
all-checked? [:span {:class (stl/css-case :checkobox-tick true
:global/checked true)}
i/tick]
deprecated-icon/tick]
all-unchecked? [:span {:class (stl/css-case :checkobox-tick true
:global/uncheked true)}]
:else [:span {:class (stl/css-case :checkobox-tick true
:global/intermediate true)}
i/remove-icon])]]
deprecated-icon/remove-icon])]]
[:div {:class (stl/css :selection-title)}
(tr "dashboard.export-multiple.selected"
(c (count enabled-exports))
@ -121,7 +121,7 @@
(if (:enabled export)
[:span {:class (stl/css-case :checkobox-tick true
:global/checked true)}
i/tick]
deprecated-icon/tick]
[:span {:class (stl/css-case :checkobox-tick true
:global/uncheked true)}])]

10
frontend/src/app/main/ui/exports/files.cljs
View File

@ -15,7 +15,7 @@
[app.main.data.modal :as modal]
[app.main.store :as st]
[app.main.ui.ds.product.loader :refer [loader*]]
[app.main.ui.icons :as i]
[app.main.ui.icons :as deprecated-icon]
[app.main.worker :as mw]
[app.util.dom :as dom]
[app.util.i18n :as i18n :refer [tr]]
@ -61,8 +61,8 @@
[:> loader* {:width 16
:title (tr "labels.loading")}]
[:span {:class (stl/css :file-icon)}
(cond (:export-success? file) i/tick
(:export-error? file) i/close)])
(cond (:export-success? file) deprecated-icon/tick
(:export-error? file) deprecated-icon/close)])
[:div {:class (stl/css :file-name-label)}
(:name file)]]])
@ -146,7 +146,7 @@
[:h2 {:class (stl/css :modal-title)}
(tr "dashboard.export.title")]
[:button {:class (stl/css :modal-close-btn)
:on-click on-cancel} i/close]]
:on-click on-cancel} deprecated-icon/close]]
(cond
(= status :prepare)
@ -169,7 +169,7 @@
;; (tr "dashboard.export.options.merge.title")
[:span {:class (stl/css-case :global/checked (= selected type))}
(when (= selected type)
i/status-tick)]
deprecated-icon/status-tick)]
[:div {:class (stl/css :option-content)}
[:h3 {:class (stl/css :modal-subtitle)}
(tr (dm/str "dashboard.export.options." (d/name type) ".title"))]

10
frontend/src/app/main/ui/inspect/code.cljs
View File

@ -21,7 +21,7 @@
[app.main.ui.components.copy-button :refer [copy-button*]]
[app.main.ui.components.radio-buttons :refer [radio-button radio-buttons]]
[app.main.ui.hooks.resize :refer [use-resize-hook]]
[app.main.ui.icons :as i]
[app.main.ui.icons :as deprecated-icon]
[app.main.ui.shapes.text.fontfaces :refer [shapes->fonts]]
[app.util.code-beautify :as cb]
[app.util.code-gen :as cg]
@ -277,7 +277,7 @@
[:span {:class (stl/css-case
:collapsabled-icon true
:rotated collapsed-css?)}
i/arrow]]
deprecated-icon/arrow]]
[:div {:class (stl/css :code-lang-option)}
"CSS"]
@ -290,7 +290,7 @@
[:div {:class (stl/css :action-btns)}
[:button {:class (stl/css :expand-button)
:on-click on-expand}
i/code]
deprecated-icon/code]
[:> copy-button* {:data copy-css-fn
:class (stl/css :css-copy-btn)
@ -316,7 +316,7 @@
[:span {:class (stl/css-case
:collapsabled-icon true
:rotated collapsed-markup?)}
i/arrow]]
deprecated-icon/arrow]]
[:& radio-buttons {:selected markup-type
:on-change set-markup
@ -331,7 +331,7 @@
[:div {:class (stl/css :action-btns)}
[:button {:class (stl/css :expand-button)
:on-click on-expand}
i/code]
deprecated-icon/code]
[:> copy-button* {:data copy-html-fn
:class (stl/css :html-copy-btn)

8
frontend/src/app/main/ui/inspect/exports.cljs
View File

@ -13,7 +13,7 @@
[app.main.store :as st]
[app.main.ui.components.select :refer [select]]
[app.main.ui.components.title-bar :refer [title-bar*]]
[app.main.ui.icons :as i]
[app.main.ui.icons :as deprecated-icon]
[app.util.dom :as dom]
[app.util.i18n :refer [tr c]]
[app.util.keyboard :as kbd]
@ -140,7 +140,7 @@
:title (tr "workspace.options.export")
:class (stl/css :title-spacing-export-viewer)}
[:button {:class (stl/css :add-export)
:on-click add-export} i/add]]]
:on-click add-export} deprecated-icon/add]]]
(cond
(= :multiple exports)
@ -149,7 +149,7 @@
[:div {:class (stl/css :actions)}
[:button {:class (stl/css :action-btn)
:on-click ()}
i/remove-icon]]]
deprecated-icon/remove-icon]]]
(seq @exports)
[:div {:class (stl/css :element-set-content)}
@ -183,7 +183,7 @@
[:button {:class (stl/css :action-btn)
:on-click (partial delete-export index)}
i/remove-icon]])])
deprecated-icon/remove-icon]])])
(when (or (= :multiple exports) (seq @exports))
[:button
{:on-click (when-not in-progress? on-download)

10
frontend/src/app/main/ui/inspect/right_sidebar.cljs
View File

@ -13,9 +13,9 @@
[app.main.refs :as refs]
[app.main.store :as st]
[app.main.ui.ds.controls.select :refer [select*]]
[app.main.ui.ds.foundations.assets.icon :refer [icon*]]
[app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i]
[app.main.ui.ds.layout.tab-switcher :refer [tab-switcher*]]
[app.main.ui.icons :as i]
[app.main.ui.icons :as deprecated-icon]
[app.main.ui.inspect.attributes :refer [attributes]]
[app.main.ui.inspect.code :refer [code]]
[app.main.ui.inspect.selection-feedback :refer [resolve-shapes]]
@ -132,7 +132,7 @@
(if (> (count shapes) 1)
[:*
[:div {:class (stl/css :layers-icon)}
[:> icon* {:icon-id "layers" :size "s"}]]
[:> icon* {:icon-id i/layers :size "s"}]]
[:span {:class (stl/css :layer-title)} (tr "inspect.tabs.code.selected.multiple" (count shapes))]]
[:*
[:div {:class (stl/css :shape-icon)}
@ -220,12 +220,12 @@
[:div {:class (stl/css :empty)}
[:div {:class (stl/css :code-info)}
[:span {:class (stl/css :placeholder-icon)}
i/code]
deprecated-icon/code]
[:span {:class (stl/css :placeholder-label)}
(tr "inspect.empty.select")]]
[:div {:class (stl/css :help-info)}
[:span {:class (stl/css :placeholder-icon)}
i/help]
deprecated-icon/help]
[:span {:class (stl/css :placeholder-label)}
(tr "inspect.empty.help")]]
[:button {:class (stl/css :more-info-btn)

4
frontend/src/app/main/ui/inspect/styles/style_box.cljs
View File

@ -2,7 +2,7 @@
(:require-macros [app.main.style :as stl])
(:require
[app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
[app.main.ui.ds.foundations.assets.icon :refer [icon*]]
[app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i]
[app.util.i18n :refer [tr]]
[rumext.v2 :as mf]))
@ -54,7 +54,7 @@
[:> icon-button* {:variant "ghost"
:aria-label (tr "inspect.tabs.styles.panel.copy-style-shorthand")
:on-click copy-shorthand
:icon "clipboard"}])]
:icon i/clipboard}])]
(when expanded
[:div {:class (stl/css :style-box-content) :inert true}
[:div {:class (stl/css :style-box-description)} children]])]))

10
frontend/src/app/main/ui/notifications/context_notification.cljs
View File

@ -10,20 +10,20 @@
[app.common.data :as d]
[app.common.data.macros :as dm]
[app.main.ui.components.link-button :as lb]
[app.main.ui.icons :as i]
[app.main.ui.icons :as deprecated-icon]
[rumext.v2 :as mf]))
(def ^:private neutral-icon
(i/icon-xref :msg-neutral (stl/css :icon)))
(deprecated-icon/icon-xref :msg-neutral (stl/css :icon)))
(def ^:private error-icon
(i/icon-xref :delete-text (stl/css :icon)))
(deprecated-icon/icon-xref :delete-text (stl/css :icon)))
(def ^:private success-icon
(i/icon-xref :status-tick (stl/css :icon)))
(deprecated-icon/icon-xref :status-tick (stl/css :icon)))
(def ^:private info-icon
(i/icon-xref :help (stl/css :icon)))
(deprecated-icon/icon-xref :help (stl/css :icon)))
(defn get-icon-by-level
[level]

6
frontend/src/app/main/ui/onboarding/newsletter.cljs
View File

@ -12,7 +12,7 @@
[app.main.data.profile :as du]
[app.main.refs :as refs]
[app.main.store :as st]
[app.main.ui.icons :as i]
[app.main.ui.icons :as deprecated-icon]
[app.util.dom :as dom]
[app.util.i18n :as i18n :refer [tr]]
[potok.v2.core :as ptk]
@ -71,7 +71,7 @@
[:div {:class (stl/css :input-wrapper)}
[:label {:for "newsletter-updates"}
[:span {:class (stl/css-case :global/checked (:newsletter-updates state))}
i/status-tick]
deprecated-icon/status-tick]
(tr "onboarding-v2.newsletter.updates")
[:input {:type "checkbox"
@ -83,7 +83,7 @@
[:div {:class (stl/css :input-wrapper)}
[:label {:for "newsletter-news"}
[:span {:class (stl/css-case :global/checked (:newsletter-news state))}
i/status-tick]
deprecated-icon/status-tick]
(tr "onboarding-v2.newsletter.news")
[:input {:type "checkbox"

6
frontend/src/app/main/ui/onboarding/questions.cljs
View File

@ -15,7 +15,7 @@
[app.main.data.profile :as du]
[app.main.store :as st]
[app.main.ui.components.forms :as fm]
[app.main.ui.icons :as i]
[app.main.ui.icons :as deprecated-icon]
[app.util.i18n :as i18n :refer [tr]]
[cuerdas.core :as str]
[potok.v2.core :as ptk]
@ -163,7 +163,7 @@
:value "canva" :image "images/form/canva.png"}
{:label (tr "labels.invision") :img-width "48px" :img-height "60px"
:value "invision" :image "images/form/invision.png"}])
(conj {:label (tr "labels.other-short") :value "other" :icon i/curve})))
(conj {:label (tr "labels.other-short") :value "other" :icon deprecated-icon/curve})))
current-experience
(dm/get-in @form [:data :experience-design-tool])
@ -321,7 +321,7 @@
:value "ds" :image "images/form/components.png"}
{:label (tr "onboarding.questions.start-with.code")
:value "code" :image "images/form/design-and-dev.png"}])
(conj {:label (tr "labels.other-short") :value "other" :icon i/curve})))
(conj {:label (tr "labels.other-short") :value "other" :icon deprecated-icon/curve})))
current-start (dm/get-in @form [:data :start-with])

12
frontend/src/app/main/ui/onboarding/team_choice.cljs
View File

@ -14,7 +14,7 @@
[app.main.data.team :as dtm]
[app.main.store :as st]
[app.main.ui.components.forms :as fm]
[app.main.ui.icons :as i]
[app.main.ui.icons :as deprecated-icon]
[app.main.ui.notifications.context-notification :refer [context-notification]]
[app.util.i18n :as i18n :refer [tr]]
[potok.v2.core :as ptk]
@ -31,23 +31,23 @@
(tr "onboarding.team-modal.create-team-desc")]
[:ul {:class (stl/css :team-features)}
[:li {:class (stl/css :feature)}
[:span {:class (stl/css :icon)} i/document]
[:span {:class (stl/css :icon)} deprecated-icon/document]
[:p {:class (stl/css :modal-desc)}
(tr "onboarding.team-modal.create-team-feature-1")]]
[:li {:class (stl/css :feature)}
[:span {:class (stl/css :icon)} i/move]
[:span {:class (stl/css :icon)} deprecated-icon/move]
[:p {:class (stl/css :modal-desc)}
(tr "onboarding.team-modal.create-team-feature-2")]]
[:li {:class (stl/css :feature)}
[:span {:class (stl/css :icon)} i/tree]
[:span {:class (stl/css :icon)} deprecated-icon/tree]
[:p {:class (stl/css :modal-desc)}
(tr "onboarding.team-modal.create-team-feature-3")]]
[:li {:class (stl/css :feature)}
[:span {:class (stl/css :icon)} i/user]
[:span {:class (stl/css :icon)} deprecated-icon/user]
[:p {:class (stl/css :modal-desc)}
(tr "onboarding.team-modal.create-team-feature-4")]]
[:li {:class (stl/css :feature)}
[:span {:class (stl/css :icon)} i/tick]
[:span {:class (stl/css :icon)} deprecated-icon/tick]
[:p {:class (stl/css :modal-desc)}
(tr "onboarding.team-modal.create-team-feature-5")]]]])

4
frontend/src/app/main/ui/onboarding/templates.cljs
View File

@ -12,7 +12,7 @@
[app.main.data.modal :as modal]
[app.main.refs :as refs]
[app.main.store :as st]
[app.main.ui.icons :as i]
[app.main.ui.icons :as deprecated-icon]
[app.util.http :as http]
[app.util.i18n :as i18n :refer [tr]]
[app.util.webapi :as wapi]
@ -70,7 +70,7 @@
[:div.modal-header
[:div.modal-close-button
{:on-click modal/hide!
:data-testid "close-templates-btn"} i/close]]
:data-testid "close-templates-btn"} deprecated-icon/close]]
[:div.modal-content
[:h3 (tr "onboarding.templates.title")]

8
frontend/src/app/main/ui/settings/access_tokens.cljs
View File

@ -15,7 +15,7 @@
[app.main.store :as st]
[app.main.ui.components.context-menu-a11y :refer [context-menu*]]
[app.main.ui.components.forms :as fm]
[app.main.ui.icons :as i]
[app.main.ui.icons :as deprecated-icon]
[app.util.dom :as dom]
[app.util.i18n :as i18n :refer [tr]]
[app.util.keyboard :as kbd]
@ -24,13 +24,13 @@
[rumext.v2 :as mf]))
(def ^:private clipboard-icon
(i/icon-xref :clipboard (stl/css :clipboard-icon)))
(deprecated-icon/icon-xref :clipboard (stl/css :clipboard-icon)))
(def ^:private close-icon
(i/icon-xref :close (stl/css :close-icon)))
(deprecated-icon/icon-xref :close (stl/css :close-icon)))
(def ^:private menu-icon
(i/icon-xref :menu (stl/css :menu-icon)))
(deprecated-icon/icon-xref :menu (stl/css :menu-icon)))
(def tokens-ref
(l/derived :access-tokens st/state))

4
frontend/src/app/main/ui/settings/change_email.cljs
View File

@ -14,7 +14,7 @@
[app.main.refs :as refs]
[app.main.store :as st]
[app.main.ui.components.forms :as fm]
[app.main.ui.icons :as i]
[app.main.ui.icons :as deprecated-icon]
[app.main.ui.notifications.context-notification :refer [context-notification]]
[app.util.i18n :as i18n :refer [tr]]
[beicon.v2.core :as rx]
@ -89,7 +89,7 @@
:data-testid "change-email-title"}
(tr "modals.change-email.title")]
[:button {:class (stl/css :modal-close-btn)
:on-click modal/hide!} i/close]]
:on-click modal/hide!} deprecated-icon/close]]
[:div {:class (stl/css :modal-content)}
[:& context-notification

4
frontend/src/app/main/ui/settings/delete_account.cljs
View File

@ -11,7 +11,7 @@
[app.main.data.notifications :as ntf]
[app.main.data.profile :as du]
[app.main.store :as st]
[app.main.ui.icons :as i]
[app.main.ui.icons :as deprecated-icon]
[app.main.ui.notifications.context-notification :refer [context-notification]]
[app.util.i18n :as i18n :refer [tr]]
[beicon.v2.core :as rx]
@ -42,7 +42,7 @@
[:h2 {:class (stl/css :modal-title)} (tr "modals.delete-account.title")]
[:button {:class (stl/css :modal-close-btn)
:on-click modal/hide!} i/close]]
:on-click modal/hide!} deprecated-icon/close]]
[:div {:class (stl/css :modal-content)}
[:& context-notification

6
frontend/src/app/main/ui/settings/sidebar.cljs
View File

@ -15,17 +15,17 @@
[app.main.router :as rt]
[app.main.store :as st]
[app.main.ui.dashboard.sidebar :refer [profile-section*]]
[app.main.ui.icons :as i]
[app.main.ui.icons :as deprecated-icon]
[app.util.i18n :as i18n :refer [tr]]
[app.util.keyboard :as kbd]
[potok.v2.core :as ptk]
[rumext.v2 :as mf]))
(def ^:private arrow-icon
(i/icon-xref :arrow (stl/css :arrow-icon)))
(deprecated-icon/icon-xref :arrow (stl/css :arrow-icon)))
(def ^:private feedback-icon
(i/icon-xref :feedback (stl/css :feedback-icon)))
(deprecated-icon/icon-xref :feedback (stl/css :feedback-icon)))
;; FIXME: move to common
(def ^:private go-settings-profile

30
frontend/src/app/main/ui/settings/subscription.cljs
View File

@ -12,7 +12,7 @@
[app.main.store :as st]
[app.main.ui.components.forms :as fm]
[app.main.ui.dashboard.subscription :refer [get-subscription-type]]
[app.main.ui.icons :as i]
[app.main.ui.icons :as deprecated-icon]
[app.util.dom :as dom]
[app.util.i18n :as i18n :refer [tr c]]
[potok.v2.core :as ptk]
@ -46,7 +46,7 @@
(for [benefit benefits]
[:li {:key (dm/str benefit) :class (stl/css :benefit)} "- " benefit])]
(when (and cta-link-with-icon cta-text-with-icon) [:button {:class (stl/css :cta-button :more-info)
:on-click cta-link-with-icon} cta-text-with-icon i/open-link])
:on-click cta-link-with-icon} cta-text-with-icon deprecated-icon/open-link])
(when (and cta-link cta-text) [:button {:class (stl/css-case :cta-button true
:bottom-link (not (and cta-link-trial cta-text-trial)))
:on-click cta-link} cta-text])
@ -121,7 +121,7 @@
[:div {:class (stl/css :modal-overlay)}
[:div {:class (stl/css :modal-dialog)}
[:button {:class (stl/css :close-btn) :on-click handle-close-dialog} i/close]
[:button {:class (stl/css :close-btn) :on-click handle-close-dialog} deprecated-icon/close]
[:div {:class (stl/css :modal-title :subscription-title)}
(tr "subscription.settings.management.dialog.title" subscription-name)]
@ -131,7 +131,7 @@
(tr "subscription.settings.management.dialog.currently-editors-title" (c (count editors)))]
[:button {:class (stl/css :cta-button :show-editors-button) :on-click handle-click}
(tr "subscription.settings.management.dialog.editors")
[:span {:class (stl/css :icon-dropdown)} i/arrow]]
[:span {:class (stl/css :icon-dropdown)} deprecated-icon/arrow]]
(when show-editors-list
[:*
[:p {:class (stl/css :editors-text :editors-list-warning)}
@ -225,12 +225,12 @@
[:div {:class (stl/css :modal-overlay)}
[:div {:class (stl/css :modal-dialog :subscription-success)}
[:button {:class (stl/css :close-btn) :on-click handle-close-dialog} i/close]
[:button {:class (stl/css :close-btn) :on-click handle-close-dialog} deprecated-icon/close]
[:div {:class (stl/css :modal-success-content)}
[:div {:class (stl/css :modal-start)}
(if (= "light" (:theme profile))
i/logo-subscription-light
i/logo-subscription)]
deprecated-icon/logo-subscription-light
deprecated-icon/logo-subscription)]
[:div {:class (stl/css :modal-end)}
[:div {:class (stl/css :modal-title)} (tr "subscription.settings.sucess.dialog.title" subscription-name)]
@ -363,7 +363,7 @@
"unlimited"
(if subscription-is-trial?
[:> plan-card* {:card-title (tr "subscription.settings.unlimited-trial")
:card-title-icon i/character-u
:card-title-icon deprecated-icon/character-u
:benefits-title (tr "subscription.settings.benefits.all-professional-benefits"),
:benefits [(tr "subscription.settings.unlimited.storage-benefit")
(tr "subscription.settings.unlimited.autosave-benefit"),
@ -375,7 +375,7 @@
:editors (-> profile :props :subscription :quantity)}]
[:> plan-card* {:card-title (tr "subscription.settings.unlimited")
:card-title-icon i/character-u
:card-title-icon deprecated-icon/character-u
:benefits-title (tr "subscription.settings.benefits.all-unlimited-benefits")
:benefits [(tr "subscription.settings.unlimited.storage-benefit"),
(tr "subscription.settings.unlimited.autosave-benefit"),
@ -387,7 +387,7 @@
"enterprise"
(if subscription-is-trial?
[:> plan-card* {:card-title (tr "subscription.settings.enterprise-trial")
:card-title-icon i/character-e
:card-title-icon deprecated-icon/character-e
:benefits-title (tr "subscription.settings.benefits.all-unlimited-benefits"),
:benefits [(tr "subscription.settings.enterprise.unlimited-storage-benefit"),
(tr "subscription.settings.enterprise.autosave"),
@ -397,7 +397,7 @@
:cta-text-trial (tr "subscription.settings.add-payment-to-continue")
:cta-link-trial go-to-payments}]
[:> plan-card* {:card-title (tr "subscription.settings.enterprise")
:card-title-icon i/character-e
:card-title-icon deprecated-icon/character-e
:benefits-title (tr "subscription.settings.benefits.all-unlimited-benefits"),
:benefits [(tr "subscription.settings.enterprise.unlimited-storage-benefit"),
(tr "subscription.settings.enterprise.autosave"),
@ -408,12 +408,12 @@
[:div {:class (stl/css :membership-container)}
(when (and subscribed-since (not= subscription-type "professional"))
[:div {:class (stl/css :membership)}
[:span {:class (stl/css :subscription-member)} i/crown]
[:span {:class (stl/css :subscription-member)} deprecated-icon/crown]
[:span {:class (stl/css :membership-date)}
(tr "subscription.settings.support-us-since" subscribed-since)]])
[:div {:class (stl/css :membership)}
[:span {:class (stl/css :penpot-member)} i/user]
[:span {:class (stl/css :penpot-member)} deprecated-icon/user]
[:span {:class (stl/css :membership-date)}
(tr "subscription.settings.member-since" member-since)]]]]
@ -433,7 +433,7 @@
(when (not= subscription-type "unlimited")
[:> plan-card* {:card-title (tr "subscription.settings.unlimited")
:card-title-icon i/character-u
:card-title-icon deprecated-icon/character-u
:price-value "$7"
:price-period (tr "subscription.settings.price-editor-month")
:benefits-title (tr "subscription.settings.benefits.all-professional-benefits")
@ -447,7 +447,7 @@
(when (not= subscription-type "enterprise")
[:> plan-card* {:card-title (tr "subscription.settings.enterprise")
:card-title-icon i/character-e
:card-title-icon deprecated-icon/character-e
:price-value "$950"
:price-period (tr "subscription.settings.price-organization-month")
:benefits-title (tr "subscription.settings.benefits.all-unlimited-benefits")

18
frontend/src/app/main/ui/static.cljs
View File

@ -22,9 +22,9 @@
[app.main.ui.auth.recovery-request :refer [recovery-request-page recovery-sent-page]]
[app.main.ui.auth.register :as register]
[app.main.ui.dashboard.sidebar :refer [sidebar*]]
[app.main.ui.ds.foundations.assets.icon :refer [icon*]]
[app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i]
[app.main.ui.ds.foundations.assets.raw-svg :refer [raw-svg*]]
[app.main.ui.icons :as i]
[app.main.ui.icons :as deprecated-icon]
[app.main.ui.viewer.header :as viewer.header]
[app.util.dom :as dom]
[app.util.i18n :refer [tr]]
@ -49,8 +49,8 @@
[:> raw-svg* {:id "penpot-logo-icon" :class (stl/css :penpot-logo)}]
(when profile-id
[:div {:class (stl/css :go-back-wrapper)}
[:> icon* {:icon-id "arrow" :class (stl/css :back-arrow)}] [:span (tr "not-found.no-permission.go-dashboard")]])]
[:div {:class (stl/css :deco-before)} i/logo-error-screen]
[:> icon* {:icon-id i/arrow :class (stl/css :back-arrow)}] [:span (tr "not-found.no-permission.go-dashboard")]])]
[:div {:class (stl/css :deco-before)} deprecated-icon/logo-error-screen]
(when-not profile-id
[:button {:class (stl/css :login-header)
:on-click on-nav-root}
@ -61,7 +61,7 @@
[:div {:class (stl/css :deco-after2)}
[:span (tr "labels.copyright")]
i/logo-error-screen
deprecated-icon/logo-error-screen
[:span (tr "not-found.made-with-love")]]]))
(mf/defc invalid-token
@ -122,9 +122,9 @@
[:div {:class (stl/css :modal-close)}
[:button {:class (stl/css :modal-close-button)
:on-click on-nav-root}
i/close]]
deprecated-icon/close]]
[:div {:class (stl/css :login)}
[:div {:class (stl/css :logo)} i/logo]
[:div {:class (stl/css :logo)} deprecated-icon/logo]
(case @current-section
:login
@ -189,7 +189,7 @@
[:div {:class (stl/css :dialog)}
[:div {:class (stl/css :modal-close)}
[:button {:class (stl/css :modal-close-button) :on-click on-close}
i/close]]
deprecated-icon/close]]
[:div {:class (stl/css :dialog-title)} title]
(for [[index content] (d/enumerate content)]
[:div {:key index} content])
@ -444,7 +444,7 @@
is-workspace
[:div {:class (stl/css :workspace)}
[:div {:class (stl/css :workspace-left)}
i/logo-icon
deprecated-icon/logo-icon
[:div
[:div {:class (stl/css :project-name)} (tr "not-found.no-permission.project-name")]
[:div {:class (stl/css :file-name)} (tr "not-found.no-permission.penpot-file")]]]

8
frontend/src/app/main/ui/viewer.cljs
View File

@ -24,7 +24,7 @@
[app.main.ui.context :as ctx]
[app.main.ui.ds.product.loader :refer [loader*]]
[app.main.ui.hooks :as hooks]
[app.main.ui.icons :as i]
[app.main.ui.icons :as deprecated-icon]
[app.main.ui.modal :refer [modal-container*]]
[app.main.ui.viewer.comments :refer [comments-layer comments-sidebar*]]
[app.main.ui.viewer.header :as header]
@ -103,19 +103,19 @@
:left-bar left-bar)
:on-click go-prev-frame
:aria-label (tr "labels.previous")}
i/arrow])
deprecated-icon/arrow])
(when (< (+ index 1) num-frames)
[:button {:class (stl/css-case :viewer-go-next true
:comment-sidebar comment-sidebar
:right-bar right-bar)
:on-click go-next-frame
:aria-label (tr "labels.next")}
i/arrow])
deprecated-icon/arrow])
[:div {:class (stl/css-case :viewer-bottom true
:left-bar left-bar)}
[:button {:on-click go-first-frame
:class (stl/css :reset-button)}
i/reload]
deprecated-icon/reload]
[:span {:class (stl/css :counter)}
(str/join " / " [(+ index 1) num-frames])]
[:span]]]))

12
frontend/src/app/main/ui/viewer/comments.cljs
View File

@ -19,7 +19,7 @@
[app.main.store :as st]
[app.main.ui.comments :as cmt]
[app.main.ui.components.dropdown :refer [dropdown]]
[app.main.ui.icons :as i]
[app.main.ui.icons :as deprecated-icon]
[app.main.ui.workspace.comments :as wc]
[app.main.ui.workspace.viewport.utils :as utils]
[app.util.dom :as dom]
@ -69,7 +69,7 @@
:data-testid "viewer-comments-dropdown"
:on-click toggle-dropdown}
[:span {:class (stl/css :dropdown-title)} (tr "labels.comments")]
[:span {:class (stl/css :icon-dropdown)} i/arrow]
[:span {:class (stl/css :icon-dropdown)} deprecated-icon/arrow]
[:& dropdown {:show @show-dropdown?
:on-close hide-dropdown}
@ -82,7 +82,7 @@
:on-click update-mode}
[:span {:class (stl/css :label)} (tr "labels.show-all-comments")]
(when (or (= :all cmode) (nil? cmode))
[:span {:class (stl/css :icon)} i/tick])]
[:span {:class (stl/css :icon)} deprecated-icon/tick])]
[:li {:class (stl/css-case
:dropdown-element true
@ -92,7 +92,7 @@
[:span {:class (stl/css :label)} (tr "labels.show-your-comments")]
(when (= :yours cmode)
[:span {:class (stl/css :icon)}
i/tick])]
deprecated-icon/tick])]
[:li {:class (stl/css :separator)}]
@ -104,7 +104,7 @@
[:span {:class (stl/css :label)} (tr "labels.hide-resolved-comments")]
(when (= :pending cshow)
[:span {:class (stl/css :icon)}
i/tick])]
deprecated-icon/tick])]
[:li {:class (stl/css :separator)}]
@ -115,7 +115,7 @@
:on-click update-options}
[:span {:class (stl/css :label)} (tr "labels.show-comments-list")]
(when show-sidebar?
[:span {:class (stl/css :icon)} i/tick])]]]]))
[:span {:class (stl/css :icon)} deprecated-icon/tick])]]]]))
(defn- update-thread-position

24
frontend/src/app/main/ui/viewer/header.cljs
View File

@ -16,7 +16,7 @@
[app.main.ui.components.dropdown :refer [dropdown]]
[app.main.ui.exports.assets :refer [export-progress-widget]]
[app.main.ui.formats :as fmt]
[app.main.ui.icons :as i]
[app.main.ui.icons :as deprecated-icon]
[app.main.ui.viewer.comments :refer [comments-menu]]
[app.main.ui.viewer.interactions :refer [flows-menu* interactions-menu*]]
[app.util.dom :as dom]
@ -86,13 +86,13 @@
[:button {:class (stl/css :zoom-btn)
:on-click on-decrease}
[:span {:class (stl/css :zoom-icon)}
i/remove-icon]]
deprecated-icon/remove-icon]]
[:p {:class (stl/css :zoom-text)}
(fmt/format-percent zoom)]
[:button {:class (stl/css :zoom-btn)
:on-click on-increase}
[:span {:class (stl/css :zoom-icon)}
i/add]]]
deprecated-icon/add]]]
[:button {:class (stl/css :reset-btn)
:on-click on-zoom-reset}
(tr "workspace.header.reset-zoom")]]
@ -190,13 +190,13 @@
(when (:in-team permissions)
[:span {:on-click go-to-workspace
:class (stl/css :edit-btn)}
i/curve])
deprecated-icon/curve])
[:span {:title (tr "viewer.header.fullscreen")
:class (stl/css-case :fullscreen-btn true
:selected fullscreen?)
:on-click toggle-fullscreen}
i/expand]
deprecated-icon/expand]
(when (:in-team permissions)
[:button {:on-click open-share-dialog
@ -240,7 +240,7 @@
:on-click open-dropdown}
[:span {:class (stl/css :breadcrumb-text)}
(dm/str file-name " / " page-name)]
[:span {:class (stl/css :icon)} i/arrow]
[:span {:class (stl/css :icon)} deprecated-icon/arrow]
[:span "/"]
[:& dropdown {:show @show-dropdown?
:on-close close-dropdown}
@ -254,15 +254,15 @@
[:span {:class (stl/css :label)}
(get-in file [:data :pages-index id :name])]
(when (= page-id id)
[:span {:class (stl/css :icon-check)} i/tick])])]]]
[:span {:class (stl/css :icon-check)} deprecated-icon/tick])])]]]
[:div {:class (stl/css :current-frame)
:id "current-frame"
:on-click toggle-thumbnails}
[:span {:class (stl/css :frame-name)} frame-name]
[:span {:class (stl/css :icon)} i/arrow]]]]))
[:span {:class (stl/css :icon)} deprecated-icon/arrow]]]]))
(def ^:private penpot-logo-icon
(i/icon-xref :penpot-logo-icon (stl/css :logo-icon)))
(deprecated-icon/icon-xref :penpot-logo-icon (stl/css :logo-icon)))
(mf/defc header
@ -330,7 +330,7 @@
:class (stl/css-case :mode-zone-btn true
:selected (= section :interactions))
:title (tr "viewer.header.interactions-section" (sc/get-tooltip :open-interactions))}
i/play]
deprecated-icon/play]
(when (or (:in-team permissions)
(= (:who-comment permissions) "all"))
@ -339,7 +339,7 @@
:class (stl/css-case :mode-zone-btn true
:selected (= section :comments))
:title (tr "viewer.header.comments-section" (sc/get-tooltip :open-comments))}
i/comments])
deprecated-icon/comments])
(when (or (:in-team permissions)
(and (= (:type permissions) :share-link)
@ -348,7 +348,7 @@
:class (stl/css-case :mode-zone-btn true
:selected (= section :inspect))
:title (tr "viewer.header.inspect-section" (sc/get-tooltip :open-inspect))}
i/code])]
deprecated-icon/code])]
[:& header-options {:section section
:permissions permissions

16
frontend/src/app/main/ui/viewer/interactions.cljs
View File

@ -20,7 +20,7 @@
[app.main.store :as st]
[app.main.ui.components.dropdown :refer [dropdown]]
[app.main.ui.hooks :as h]
[app.main.ui.icons :as i]
[app.main.ui.icons :as deprecated-icon]
[app.main.ui.viewer.shapes :as shapes]
[app.util.dom :as dom]
[app.util.i18n :as i18n :refer [tr]]
@ -249,9 +249,9 @@
(when flows
[:div {:on-click toggle-dropdown
:class (stl/css :view-options)}
[:span {:class (stl/css :icon)} i/play]
[:span {:class (stl/css :icon)} deprecated-icon/play]
[:span {:class (stl/css :dropdown-title)} (:name current-flow)]
[:span {:class (stl/css :icon-dropdown)} i/arrow]
[:span {:class (stl/css :icon-dropdown)} deprecated-icon/arrow]
[:& dropdown {:show show-dropdown?
:on-close hide-dropdown}
[:ul {:class (stl/css :dropdown)}
@ -265,7 +265,7 @@
:on-click select-flow}
[:span {:class (stl/css :label)} (:name flow)]
(when (= flow-id (:id current-flow))
[:span {:class (stl/css :icon)} i/tick])])]]])))
[:span {:class (stl/css :icon)} deprecated-icon/tick])])]]])))
(mf/defc interactions-menu*
{::mf/props :obj}
@ -286,7 +286,7 @@
[:div {:on-click toggle-dropdown
:class (stl/css :view-options)}
[:span {:class (stl/css :dropdown-title)} (tr "viewer.header.interactions")]
[:span {:class (stl/css :icon-dropdown)} i/arrow]
[:span {:class (stl/css :icon-dropdown)} deprecated-icon/arrow]
[:& dropdown {:show @show-dropdown?
:on-close hide-dropdown}
[:ul {:class (stl/css :dropdown)}
@ -297,7 +297,7 @@
[:span {:class (stl/css :label)} (tr "viewer.header.dont-show-interactions")]
(when (= interactions-mode :hide)
[:span {:class (stl/css :icon)} i/tick])]
[:span {:class (stl/css :icon)} deprecated-icon/tick])]
[:li {:class (stl/css-case :dropdown-element true
:selected (= interactions-mode :show))
@ -305,7 +305,7 @@
:data-mode "show"}
[:span {:class (stl/css :label)} (tr "viewer.header.show-interactions")]
(when (= interactions-mode :show)
[:span {:class (stl/css :icon)} i/tick])]
[:span {:class (stl/css :icon)} deprecated-icon/tick])]
@ -316,7 +316,7 @@
[:span {:class (stl/css :label)} (tr "viewer.header.show-interactions-on-click")]
(when (= interactions-mode :show-on-click)
[:span {:class (stl/css :icon)} i/tick])]]]]))
[:span {:class (stl/css :icon)} deprecated-icon/tick])]]]]))
(defn animate-go-to-frame
[animation current-viewport orig-viewport current-size orig-size wrapper-size]

4
frontend/src/app/main/ui/viewer/login.cljs
View File

@ -13,7 +13,7 @@
[app.main.ui.auth.login :refer [login-methods]]
[app.main.ui.auth.recovery-request :refer [recovery-request-page]]
[app.main.ui.auth.register :refer [register-methods register-success-page terms-register register-validate-form]]
[app.main.ui.icons :as i]
[app.main.ui.icons :as deprecated-icon]
[app.util.dom :as dom]
[app.util.i18n :as i18n :refer [tr]]
[rumext.v2 :as mf]))
@ -69,7 +69,7 @@
[:h2 {:class (stl/css :modal-title)} (tr "labels.continue-with-penpot")]
[:button {:class (stl/css :modal-close-btn)
:title (tr "labels.close")
:on-click close} i/close]]
:on-click close} deprecated-icon/close]]
[:div {:class (stl/css :modal-content)}
(case current-section

14
frontend/src/app/main/ui/viewer/share_link.cljs
View File

@ -20,7 +20,7 @@
[app.main.router :as rt]
[app.main.store :as st]
[app.main.ui.components.select :refer [select]]
[app.main.ui.icons :as i]
[app.main.ui.icons :as deprecated-icon]
[app.util.dom :as dom]
[app.util.i18n :as i18n :refer [tr]]
[app.util.webapi :as wapi]
@ -174,7 +174,7 @@
[:button {:class (stl/css :modal-close-button)
:on-click on-close
:title (tr "labels.close")}
i/close]]
deprecated-icon/close]]
[:div {:class (stl/css :modal-content)}
[:div {:class (stl/css :share-link-section)}
(when (and (not confirm?) (some? current-link))
@ -188,7 +188,7 @@
[:button {:class (stl/css :copy-button)
:title (tr "viewer.header.share.copy-link")
:on-click copy-link}
i/clipboard]])
deprecated-icon/clipboard]])
[:div {:class (stl/css :hint-wrapper)}
(when (not ^boolean confirm?)
@ -229,7 +229,7 @@
:on-click toggle-perms-visibility}
[:span {:class (stl/css-case :icon true
:rotated perms-visible?)}
i/arrow]
deprecated-icon/arrow]
(tr "common.share-link.manage-ops")]
(when ^boolean perms-visible?
@ -249,7 +249,7 @@
:class (stl/css-case :global/checked true)}
[:span {:class (stl/css :checked)}
i/status-tick]
deprecated-icon/status-tick]
(:name current-page)]
@ -267,7 +267,7 @@
:class (stl/css :select-all-label)}
[:span {:class (stl/css-case :global/checked all-selected?)}
(when all-selected?
i/status-tick)]
deprecated-icon/status-tick)]
(tr "common.share-link.view-all")
[:input {:type "checkbox"
:id "view-all"
@ -285,7 +285,7 @@
[:label {:for (dm/str "page-" id)}
[:span {:class (stl/css-case :global/checked (contains? selected id))}
(when (contains? selected id)
i/status-tick)]
deprecated-icon/status-tick)]
name
(when (= current-page-id id)
[:div {:class (stl/css :current-tag)} (dm/str " " (tr "common.share-link.current-tag"))])

10
frontend/src/app/main/ui/viewer/thumbnails.cljs
View File

@ -14,7 +14,7 @@
[app.main.data.viewer :as dv]
[app.main.render :as render]
[app.main.store :as st]
[app.main.ui.icons :as i]
[app.main.ui.icons :as deprecated-icon]
[app.util.dom :as dom]
[app.util.i18n :as i18n :refer [tr]]
[app.util.object :as obj]
@ -64,9 +64,9 @@
[:div {:class (stl/css :thumbnails-content)}
[:button {:class (stl/css :left-scroll-handler)
:on-click on-left-arrow-click} i/arrow]
:on-click on-left-arrow-click} deprecated-icon/arrow]
[:button {:class (stl/css :right-scroll-handler)
:on-click on-right-arrow-click} i/arrow]
:on-click on-right-arrow-click} deprecated-icon/arrow]
[:div {:class (stl/css :thumbnails-list)
:ref container
@ -82,9 +82,9 @@
(tr "labels.num-of-frames" (i18n/c total))]
[:span {:class (stl/css :actions)}
[:button {:class (stl/css :expand-btn)
:on-click on-toggle-expand} i/arrow]
:on-click on-toggle-expand} deprecated-icon/arrow]
[:button {:class (stl/css :close-btn)
:on-click on-close} i/close]]])
:on-click on-close} deprecated-icon/close]]])
(mf/defc thumbnail-item
{::mf/wrap [mf/memo

6
frontend/src/app/main/ui/workspace/color_palette.cljs
View File

@ -17,7 +17,7 @@
[app.main.ui.components.color-bullet :as cb]
[app.main.ui.context :as ctx]
[app.main.ui.ds.utilities.swatch :refer [swatch*]]
[app.main.ui.icons :as i]
[app.main.ui.icons :as deprecated-icon]
[app.util.color :as uc]
[app.util.dom :as dom]
[app.util.i18n :refer [tr]]
@ -134,7 +134,7 @@
(when show-arrows?
[:button {:class (stl/css :left-arrow)
:disabled (= offset 0)
:on-click on-left-arrow-click} i/arrow])
:on-click on-left-arrow-click} deprecated-icon/arrow])
[:div {:class (stl/css :color-palette-content)
:ref container
:on-wheel on-scroll}
@ -155,7 +155,7 @@
(when show-arrows?
[:button {:class (stl/css :right-arrow)
:disabled (= offset max-offset)
:on-click on-right-arrow-click} i/arrow])]))
:on-click on-right-arrow-click} deprecated-icon/arrow])]))
(mf/defc recent-colors-palette*
{::mf/private true}

8
frontend/src/app/main/ui/workspace/color_palette_ctx_menu.cljs
View File

@ -12,7 +12,7 @@
[app.main.ui.components.color-bullet :as cb]
[app.main.ui.components.dropdown :refer [dropdown]]
[app.main.ui.context :as ctx]
[app.main.ui.icons :as i]
[app.main.ui.icons :as deprecated-icon]
[app.util.i18n :refer [tr]]
[rumext.v2 :as mf]))
@ -66,7 +66,7 @@
(dm/str "(" (count colors) ")")]]
(when (= selected id)
[:span {:class (stl/css :icon-wrapper)}
i/tick])]
deprecated-icon/tick])]
[:div {:class (stl/css :color-sample)
:style {:--bullet-size "20px"}}
(for [color colors]
@ -91,7 +91,7 @@
(when (= selected :file)
[:span {:class (stl/css :icon-wrapper)}
i/tick])]
deprecated-icon/tick])]
[:div {:class (stl/css :color-sample)
:style {:--bullet-size "20px"}}
(for [color local-colors]
@ -114,7 +114,7 @@
(when (= selected :recent)
[:span {:class (stl/css :icon-wrapper)}
i/tick])]
deprecated-icon/tick])]
[:div {:class (stl/css :color-sample)
:style {:--bullet-size "20px"}}

14
frontend/src/app/main/ui/workspace/colorpicker.cljs
View File

@ -27,10 +27,10 @@
[app.main.ui.components.file-uploader :refer [file-uploader]]
[app.main.ui.components.numeric-input :refer [numeric-input*]]
[app.main.ui.components.select :refer [select]]
[app.main.ui.ds.foundations.assets.icon :as ic]
[app.main.ui.ds.foundations.assets.icon :as i]
[app.main.ui.ds.layout.tab-switcher :refer [tab-switcher*]]
[app.main.ui.hooks :as hooks]
[app.main.ui.icons :as i]
[app.main.ui.icons :as deprecated-icon]
[app.main.ui.workspace.colorpicker.color-inputs :refer [color-inputs]]
[app.main.ui.workspace.colorpicker.gradients :refer [gradients*]]
[app.main.ui.workspace.colorpicker.harmony :refer [harmony-selector]]
@ -344,13 +344,13 @@
tabs
(mf/with-memo []
[{:aria-label (tr "workspace.libraries.colors.rgba")
:icon ic/rgba
:icon i/rgba
:id "ramp"}
{:aria-label "Harmony"
:icon ic/rgba-complementary
:icon i/rgba-complementary
:id "harmony"}
{:aria-label "HSVA"
:icon ic/hsva
:icon i/hsva
:id "hsva"}])]
;; Initialize colorpicker state
@ -405,7 +405,7 @@
[:button {:class (stl/css-case :picker-btn true
:selected picking-color?)
:on-click handle-click-picker}
i/picker])]
deprecated-icon/picker])]
(when (= selected-mode :gradient)
[:> gradients*
@ -438,7 +438,7 @@
:class (stl/css-case :global/checked keep-aspect-ratio?)}
[:span {:class (stl/css-case :global/checked keep-aspect-ratio?)}
(when keep-aspect-ratio?
i/status-tick)]
deprecated-icon/status-tick)]
(tr "media.keep-aspect-ratio")
[:input {:type "checkbox"
:id "keep-aspect-ratio"

7
frontend/src/app/main/ui/workspace/colorpicker/gradients.cljs
View File

@ -18,6 +18,7 @@
[app.main.ui.components.reorder-handler :refer [reorder-handler*]]
[app.main.ui.components.select :refer [select]]
[app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
[app.main.ui.ds.foundations.assets.icon :as i]
[app.main.ui.formats :as fmt]
[app.main.ui.hooks :as h]
[app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row*]]
@ -338,16 +339,16 @@
:aria-label "Rotate gradient"
:on-click handle-rotate-gradient
:icon-class (stl/css :rotate-icon)
:icon "reload"}]
:icon i/reload}]
[:> icon-button* {:variant "ghost"
:aria-label "Reverse gradient"
:on-click handle-reverse-gradient
:icon "switch"}]
:icon i/switch}]
[:> icon-button* {:variant "ghost"
:aria-label "Add stop"
:disabled add-stop-disabled?
:on-click handle-add-stop
:icon "add"}]]]
:icon i/add}]]]
[:div {:class (stl/css :gradient-stops-list)}
[:& h/sortable-container {}

6
frontend/src/app/main/ui/workspace/colorpicker/libraries.cljs
View File

@ -21,7 +21,7 @@
[app.main.ui.context :as ctx]
[app.main.ui.hooks :as h]
[app.main.ui.hooks.resize :as r]
[app.main.ui.icons :as i]
[app.main.ui.icons :as deprecated-icon]
[app.util.dom :as dom]
[app.util.i18n :as i18n :refer [tr]]
[potok.v2.core :as ptk]
@ -132,11 +132,11 @@
(when (= selected :file)
[:button {:class (stl/css :add-color-btn)
:on-click on-add-library-color}
i/add])
deprecated-icon/add])
[:button {:class (stl/css :palette-btn)
:on-click toggle-palette}
i/swatches]
deprecated-icon/swatches]
(for [color current-colors]
[:& cb/color-bullet

17
frontend/src/app/main/ui/workspace/comments.cljs
View File

@ -17,7 +17,8 @@
[app.main.ui.components.dropdown :refer [dropdown]]
[app.main.ui.context :as ctx]
[app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
[app.main.ui.icons :as i]
[app.main.ui.ds.foundations.assets.icon :as i]
[app.main.ui.icons :as deprecated-icon]
[app.util.dom :as dom]
[app.util.i18n :as i18n :refer [tr]]
[rumext.v2 :as mf]))
@ -53,25 +54,25 @@
:on-click update-mode}
[:span {:class (stl/css :label)} (tr "labels.show-all-comments")]
[:span {:class (stl/css :icon)} i/tick]]
[:span {:class (stl/css :icon)} deprecated-icon/tick]]
[:li {:class (stl/css-case :dropdown-item true
:selected (= :yours cmode))
:data-value "yours"
:on-click update-mode}
[:span {:class (stl/css :label)} (tr "labels.show-your-comments")]
[:span {:class (stl/css :icon)} i/tick]]
[:span {:class (stl/css :icon)} deprecated-icon/tick]]
[:li {:class (stl/css-case :dropdown-item true
:selected (= :mentions cmode))
:data-value "mentions"
:on-click update-mode}
[:span {:class (stl/css :label)} (tr "labels.show-mentions")]
[:span {:class (stl/css :icon)} i/tick]]
[:span {:class (stl/css :icon)} deprecated-icon/tick]]
[:li {:class (stl/css :separator)}]
[:li {:class (stl/css-case :dropdown-item true
:selected (= :pending cshow))
:on-click update-show}
[:span {:class (stl/css :label)} (tr "labels.hide-resolved-comments")]
[:span {:class (stl/css :icon)} i/tick]]]))
[:span {:class (stl/css :icon)} deprecated-icon/tick]]]))
(mf/defc comments-sidebar*
[{:keys [profiles threads page-id from-viewer]}]
@ -127,7 +128,7 @@
[:> icon-button* {:variant "ghost"
:aria-label (tr "labels.close")
:on-click close-section
:icon "close"}]]
:icon i/close}]]
[:button {:class (stl/css :mode-dropdown-wrapper)
:on-click toggle-mode-selector}
@ -137,7 +138,7 @@
(nil :all) (tr "labels.show-all-comments")
:yours (tr "labels.show-your-comments")
:mentions (tr "labels.show-mentions"))]
[:div {:class (stl/css :arrow-icon)} i/arrow]]
[:div {:class (stl/css :arrow-icon)} deprecated-icon/arrow]]
[:& dropdown {:show options?
:on-close #(reset! state* false)}
@ -159,6 +160,6 @@
:key (:page-id tgroup)}])]
[:div {:class (stl/css :thread-group-placeholder)}
[:span {:class (stl/css :placeholder-icon)} i/comments]
[:span {:class (stl/css :placeholder-icon)} deprecated-icon/comments]
[:span {:class (stl/css :placeholder-label)}
(tr "labels.no-comments-available")]])]]))

6
frontend/src/app/main/ui/workspace/context_menu.cljs
View File

@ -32,7 +32,7 @@
[app.main.store :as st]
[app.main.ui.components.dropdown :refer [dropdown]]
[app.main.ui.context :as ctx]
[app.main.ui.ds.foundations.assets.icon :refer [icon*]]
[app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i]
[app.main.ui.workspace.sidebar.assets.common :as cmm]
[app.util.dom :as dom]
[app.util.i18n :refer [tr] :as i18n]
@ -110,7 +110,7 @@
[:span
{:class (stl/css :icon-wrapper)}
(if is-selected [:span {:class (stl/css :selected-icon)}
[:> icon* {:icon-id "tick" :size "s"}]]
[:> icon* {:icon-id i/tick :size "s"}]]
[:span {:class (stl/css :selected-icon)}])
[:span {:class (stl/css :shape-icon)}
[:> icon* {:icon-id icon :size "s"}]]]
@ -131,7 +131,7 @@
(when (> (count children) 1)
[:span {:class (stl/css :submenu-icon)}
[:> icon* {:icon-id "arrow" :size "s"}]])
[:> icon* {:icon-id i/arrow :size "s"}]])
(when (> (count children) 1)
[:ul {:class (stl/css :workspace-context-submenu)

14
frontend/src/app/main/ui/workspace/left_header.cljs
View File

@ -16,7 +16,7 @@
[app.main.router :as rt]
[app.main.store :as st]
[app.main.ui.context :as ctx]
[app.main.ui.icons :as i]
[app.main.ui.icons :as deprecated-icon]
[app.main.ui.workspace.main-menu :as main-menu]
[app.util.dom :as dom]
[app.util.i18n :as i18n :refer [tr]]
@ -92,7 +92,7 @@
[:header {:class (dm/str class " " (stl/css :workspace-header-left))}
[:a {:on-click go-back
:class (stl/css :main-icon)} i/logo-icon]
:class (stl/css :main-icon)} deprecated-icon/logo-icon]
[:div {:alt (tr "workspace.sitemap")
:class (stl/css :project-tree)}
[:div
@ -126,14 +126,14 @@
:error (tr "workspace.header.save-error")
nil)}
(case persistence-status
:pending i/status-alert
:saving i/status-alert
:saved i/status-tick
:error i/status-wrong
:pending deprecated-icon/status-alert
:saving deprecated-icon/status-alert
:saved deprecated-icon/status-tick
:error deprecated-icon/status-wrong
nil)]
[:div {:class (stl/css :file-name-label)} file-name]])]
(when ^boolean shared?
[:span {:class (stl/css :shared-badge)} i/library])
[:span {:class (stl/css :shared-badge)} deprecated-icon/library])
[:div {:class (stl/css :menu-section)}
[:& main-menu/menu
{:layout layout

21
frontend/src/app/main/ui/workspace/libraries.cljs
View File

@ -29,9 +29,10 @@
[app.main.ui.components.search-bar :refer [search-bar*]]
[app.main.ui.components.title-bar :refer [title-bar*]]
[app.main.ui.context :as ctx]
[app.main.ui.ds.foundations.assets.icon :as i]
[app.main.ui.ds.layout.tab-switcher :refer [tab-switcher*]]
[app.main.ui.hooks :as h]
[app.main.ui.icons :as i]
[app.main.ui.icons :as deprecated-icon]
[app.util.color :as uc]
[app.util.dom :as dom]
[app.util.i18n :as i18n :refer [tr]]
@ -41,16 +42,16 @@
[rumext.v2 :as mf]))
(def ^:private close-icon
(i/icon-xref :close (stl/css :close-icon)))
(deprecated-icon/icon-xref :close (stl/css :close-icon)))
(def ^:private add-icon
(i/icon-xref :add (stl/css :add-icon)))
(deprecated-icon/icon-xref :add (stl/css :add-icon)))
(def ^:private detach-icon
(i/icon-xref :detach (stl/css :detach-icon)))
(deprecated-icon/icon-xref :detach (stl/css :detach-icon)))
(def ^:private library-icon
(i/icon-xref :library (stl/css :library-icon)))
(deprecated-icon/icon-xref :library (stl/css :library-icon)))
(defn- get-library-summary
"Given a library data return a summary representation of this library"
@ -332,7 +333,7 @@
[:> search-bar* {:on-change change-search-term
:value search-term
:placeholder (tr "workspace.libraries.search-shared-libraries")
:icon-id "search"}]
:icon-id i/search}]
(if (seq shared-libraries)
[:div {:class (stl/css :section-list-shared)}
@ -658,7 +659,7 @@
[:div {:class (stl/css :modal-content)}
[:div {:class (stl/css :info-content)}
[:div {:class (stl/css :info-block)}
[:div {:class (stl/css :info-icon)} i/v2-icon-1]
[:div {:class (stl/css :info-icon)} deprecated-icon/v2-icon-1]
[:div {:class (stl/css :info-block-title)}
"One physical source of truth"]
[:div {:class (stl/css :info-block-content)}
@ -667,7 +668,7 @@
"allows better control and synchronization."]]
[:div {:class (stl/css :info-block)}
[:div {:class (stl/css :info-icon)} i/v2-icon-2]
[:div {:class (stl/css :info-icon)} deprecated-icon/v2-icon-2]
[:div {:class (stl/css :info-block-title)}
"Swap components"]
[:div {:class (stl/css :info-block-content)}
@ -676,7 +677,7 @@
"variations, or updating elements without extensive manual adjustments."]]
[:div {:class (stl/css :info-block)}
[:div {:class (stl/css :info-icon)} i/v2-icon-3]
[:div {:class (stl/css :info-icon)} deprecated-icon/v2-icon-3]
[:div {:class (stl/css :info-block-title)}
"Graphic assets no longer exist"]
[:div {:class (stl/css :info-block-content)}
@ -685,7 +686,7 @@
"what should go in each typology."]]
[:div {:class (stl/css :info-block)}
[:div {:class (stl/css :info-icon)} i/v2-icon-4]
[:div {:class (stl/css :info-icon)} deprecated-icon/v2-icon-4]
[:div {:class (stl/css :info-block-title)}
"Main components page"]
[:div {:class (stl/css :info-block-content)}

25
frontend/src/app/main/ui/workspace/main_menu.cljs
View File

@ -28,12 +28,15 @@
[app.main.features :as features]
[app.main.refs :as refs]
[app.main.store :as st]
[app.main.ui.components.dropdown-menu :refer [dropdown-menu* dropdown-menu-item*]]
[app.main.ui.components.dropdown-menu :refer [dropdown-menu*
dropdown-menu-item*]]
[app.main.ui.context :as ctx]
[app.main.ui.dashboard.subscription :refer [main-menu-power-up* get-subscription-type]]
[app.main.ui.dashboard.subscription :refer [get-subscription-type
main-menu-power-up*]]
[app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
[app.main.ui.ds.foundations.assets.icon :as i]
[app.main.ui.hooks.resize :as r]
[app.main.ui.icons :as i]
[app.main.ui.icons :as deprecated-icon]
[app.plugins.register :as preg]
[app.util.dom :as dom]
[app.util.i18n :as i18n :refer [tr]]
@ -752,7 +755,7 @@
[:span {:class (stl/css :item-name)} name]
(when-not can-open?
[:span {:class (stl/css :item-icon)
:title (tr "workspace.plugins.error.need-editor")} i/help])]))])))
:title (tr "workspace.plugins.error.need-editor")} deprecated-icon/help])]))])))
(mf/defc menu
{::mf/props :obj}
@ -844,7 +847,7 @@
[:> icon-button* {:variant "ghost"
:aria-label (tr "shortcut-subsection.main-menu")
:on-click open-menu
:icon "menu"}]
:icon i/menu}]
[:> dropdown-menu* {:show show-menu?
:id "workspace-menu"
@ -859,7 +862,7 @@
:data-testid "file"
:id "file-menu-file"}
[:span {:class (stl/css :item-name)} (tr "workspace.header.menu.option.file")]
[:span {:class (stl/css :open-arrow)} i/arrow]]
[:span {:class (stl/css :open-arrow)} deprecated-icon/arrow]]
[:> dropdown-menu-item* {:class (stl/css :menu-item)
:on-click on-menu-click
@ -870,7 +873,7 @@
:data-testid "edit"
:id "file-menu-edit"}
[:span {:class (stl/css :item-name)} (tr "workspace.header.menu.option.edit")]
[:span {:class (stl/css :open-arrow)} i/arrow]]
[:span {:class (stl/css :open-arrow)} deprecated-icon/arrow]]
[:> dropdown-menu-item* {:class (stl/css :menu-item)
:on-click on-menu-click
@ -881,7 +884,7 @@
:data-testid "view"
:id "file-menu-view"}
[:span {:class (stl/css :item-name)} (tr "workspace.header.menu.option.view")]
[:span {:class (stl/css :open-arrow)} i/arrow]]
[:span {:class (stl/css :open-arrow)} deprecated-icon/arrow]]
[:> dropdown-menu-item* {:class (stl/css :menu-item)
:on-click on-menu-click
@ -892,7 +895,7 @@
:data-testid "preferences"
:id "file-menu-preferences"}
[:span {:class (stl/css :item-name)} (tr "workspace.header.menu.option.preferences")]
[:span {:class (stl/css :open-arrow)} i/arrow]]
[:span {:class (stl/css :open-arrow)} deprecated-icon/arrow]]
(when (features/active-feature? @st/state "plugins/runtime")
[:> dropdown-menu-item* {:class (stl/css :menu-item)
@ -904,7 +907,7 @@
:data-testid "plugins"
:id "file-menu-plugins"}
[:span {:class (stl/css :item-name)} (tr "workspace.plugins.menu.title")]
[:span {:class (stl/css :open-arrow)} i/arrow]])
[:span {:class (stl/css :open-arrow)} deprecated-icon/arrow]])
[:div {:class (stl/css :separator)}]
[:> dropdown-menu-item* {:class (stl/css-case :menu-item true)
@ -916,7 +919,7 @@
:data-testid "help-info"
:id "file-menu-help-info"}
[:span {:class (stl/css :item-name)} (tr "workspace.header.menu.option.help-info")]
[:span {:class (stl/css :open-arrow)} i/arrow]]
[:span {:class (stl/css :open-arrow)} deprecated-icon/arrow]]
(when (and (contains? cf/flags :subscriptions) (not= "enterprise" subscription-type))
[:> main-menu-power-up* {:close-sub-menu close-sub-menu}])

4
frontend/src/app/main/ui/workspace/nudge.cljs
View File

@ -12,7 +12,7 @@
[app.main.refs :as refs]
[app.main.store :as st]
[app.main.ui.components.numeric-input :refer [numeric-input*]]
[app.main.ui.icons :as i]
[app.main.ui.icons :as deprecated-icon]
[app.util.dom :as dom]
[app.util.i18n :as i18n :refer [tr]]
[app.util.keyboard :as k]
@ -45,7 +45,7 @@
[:div {:class (stl/css :modal-header)}
[:h2 {:class (stl/css :modal-title)} (tr "modals.nudge-title")]
[:button {:class (stl/css :modal-close-btn)
:on-click modal/hide!} i/close]]
:on-click modal/hide!} deprecated-icon/close]]
[:div {:class (stl/css :modal-content)}
[:div {:class (stl/css :input-wrapper)}
[:label {:class (stl/css :modal-msg)

8
frontend/src/app/main/ui/workspace/palette.cljs
View File

@ -19,7 +19,7 @@
[app.main.ui.context :as ctx]
[app.main.ui.hooks :as h]
[app.main.ui.hooks.resize :as r]
[app.main.ui.icons :as i]
[app.main.ui.icons :as deprecated-icon]
[app.main.ui.workspace.color-palette :refer [color-palette*]]
[app.main.ui.workspace.color-palette-ctx-menu :refer [color-palette-ctx-menu*]]
[app.main.ui.workspace.text-palette :refer [text-palette]]
@ -169,7 +169,7 @@
:class (stl/css-case :palette-btn true
:selected color-palette?)
:on-click on-select-color-palette}
i/drop-icon]]
deprecated-icon/drop-icon]]
[:li {:class (stl/css :palette-item)}
[:button {:title (tr "workspace.toolbar.text-palette" (sc/get-tooltip :toggle-textpalette))
@ -177,14 +177,14 @@
:class (stl/css-case :palette-btn true
:selected text-palette?)
:on-click on-select-text-palette}
i/text-palette]]]
deprecated-icon/text-palette]]]
(if any-palette?
[:*
[:button {:class (stl/css :palette-actions)
:on-click #(swap! state* update :show-menu not)}
i/menu]
deprecated-icon/menu]
[:div {:class (stl/css :palette)
:ref container}
(when text-palette?

29
frontend/src/app/main/ui/workspace/plugins.cljs
View File

@ -19,7 +19,8 @@
[app.main.ui.components.title-bar :refer [title-bar*]]
[app.main.ui.ds.buttons.button :refer [button*]]
[app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
[app.main.ui.icons :as i]
[app.main.ui.ds.foundations.assets.icon :as i]
[app.main.ui.icons :as deprecated-icon]
[app.plugins.register :as preg]
[app.util.avatars :as avatars]
[app.util.dom :as dom]
@ -30,7 +31,7 @@
[rumext.v2 :as mf]))
(def ^:private close-icon
(i/icon-xref :close (stl/css :close-icon)))
(deprecated-icon/icon-xref :close (stl/css :close-icon)))
(defn icon-url
"Creates an sanitizes de icon URL to display"
@ -85,7 +86,7 @@
[:> icon-button* {:variant "ghost"
:aria-label (tr "workspace.plugins.remove-plugin")
:on-click handle-delete-click
:icon "delete"}]]))
:icon i/delete}]]))
(mf/defc plugin-management-dialog
{::mf/register modal/components
@ -200,13 +201,13 @@
(if (empty? plugins-state)
[:div {:class (stl/css :plugins-empty)}
[:div {:class (stl/css :plugins-empty-logo)} i/puzzle]
[:div {:class (stl/css :plugins-empty-logo)} deprecated-icon/puzzle]
[:div {:class (stl/css :plugins-empty-text)} (tr "workspace.plugins.empty-plugins")]
[:a {:class (stl/css :plugins-link)
:href cfg/plugins-list-uri
:target "_blank"
:on-click #(st/emit! (ptk/event ::ev/event {::ev/name "open-plugins-list"}))}
(tr "workspace.plugins.plugin-list-link") i/external-link]]
(tr "workspace.plugins.plugin-list-link") deprecated-icon/external-link]]
[:*
[:> title-bar* {:collapsable false
@ -227,60 +228,60 @@
(cond
(contains? permissions "content:write")
[:div {:class (stl/css :permissions-list-entry)}
i/oauth-1
deprecated-icon/oauth-1
[:p {:class (stl/css :permissions-list-text)}
(tr "workspace.plugins.permissions.content-write")]]
(contains? permissions "content:read")
[:div {:class (stl/css :permissions-list-entry)}
i/oauth-1
deprecated-icon/oauth-1
[:p {:class (stl/css :permissions-list-text)}
(tr "workspace.plugins.permissions.content-read")]])
(cond
(contains? permissions "user:read")
[:div {:class (stl/css :permissions-list-entry)}
i/oauth-2
deprecated-icon/oauth-2
[:p {:class (stl/css :permissions-list-text)}
(tr "workspace.plugins.permissions.user-read")]])
(cond
(contains? permissions "library:write")
[:div {:class (stl/css :permissions-list-entry)}
i/oauth-3
deprecated-icon/oauth-3
[:p {:class (stl/css :permissions-list-text)}
(tr "workspace.plugins.permissions.library-write")]]
(contains? permissions "library:read")
[:div {:class (stl/css :permissions-list-entry)}
i/oauth-3
deprecated-icon/oauth-3
[:p {:class (stl/css :permissions-list-text)}
(tr "workspace.plugins.permissions.library-read")]])
(cond
(contains? permissions "comment:write")
[:div {:class (stl/css :permissions-list-entry)}
i/oauth-1
deprecated-icon/oauth-1
[:p {:class (stl/css :permissions-list-text)}
(tr "workspace.plugins.permissions.comment-write")]]
(contains? permissions "comment:read")
[:div {:class (stl/css :permissions-list-entry)}
i/oauth-1
deprecated-icon/oauth-1
[:p {:class (stl/css :permissions-list-text)}
(tr "workspace.plugins.permissions.comment-read")]])
(cond
(contains? permissions "allow:downloads")
[:div {:class (stl/css :permissions-list-entry)}
i/oauth-1
deprecated-icon/oauth-1
[:p {:class (stl/css :permissions-list-text)}
(tr "workspace.plugins.permissions.allow-download")]])
(cond
(contains? permissions "allow:localstorage")
[:div {:class (stl/css :permissions-list-entry)}
i/oauth-1
deprecated-icon/oauth-1
[:p {:class (stl/css :permissions-list-text)}
(tr "workspace.plugins.permissions.allow-localstorage")]])])

15
frontend/src/app/main/ui/workspace/right_header.cljs
View File

@ -21,9 +21,10 @@
[app.main.ui.context :as ctx]
[app.main.ui.dashboard.team]
[app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
[app.main.ui.ds.foundations.assets.icon :as i]
[app.main.ui.exports.assets :refer [export-progress-widget]]
[app.main.ui.formats :as fmt]
[app.main.ui.icons :as i]
[app.main.ui.icons :as deprecated-icon]
[app.main.ui.workspace.presence :refer [active-sessions]]
[app.util.dom :as dom]
[app.util.i18n :as i18n :refer [tr]]
@ -83,12 +84,12 @@
[:> icon-button* {:variant "ghost"
:aria-label (tr "shortcuts.decrease-zoom")
:on-click on-decrease
:icon "remove"}]
:icon i/remove}]
[:p {:class (stl/css :zoom-text)} zoom]
[:> icon-button* {:variant "ghost"
:aria-label (tr "shortcuts.increase-zoom")
:on-click on-increase
:icon "add"}]]
:icon i/add}]]
[:button {:class (stl/css :reset-btn)
:on-click on-zoom-reset}
(tr "workspace.header.reset-zoom")]]
@ -220,7 +221,7 @@
:on-click toggle-comments
:data-tool "comments"
:style {:position "relative"}}
i/comments
deprecated-icon/comments
(when ^boolean has-unread-comments?
[:div {:class (stl/css :unread)}])]]
@ -232,16 +233,16 @@
:class (stl/css-case :selected (contains? layout :document-history)
:history-button true)
:on-click toggle-history}
i/history]])
deprecated-icon/history]])
(when display-share-button?
[:a {:class (stl/css :viewer-btn)
:title (tr "workspace.header.share")
:on-click open-share-dialog}
i/share])
deprecated-icon/share])
[:a {:class (stl/css :viewer-btn)
:title (tr "workspace.header.viewer" (sc/get-tooltip :open-viewer))
:on-click nav-to-viewer}
i/play]]))
deprecated-icon/play]]))

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

@ -19,7 +19,7 @@
[app.main.store :as st]
[app.main.ui.context :as muc]
[app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
[app.main.ui.ds.foundations.assets.icon :refer [icon*]]
[app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i]
[app.main.ui.ds.layout.tab-switcher :refer [tab-switcher*]]
[app.main.ui.hooks :as hooks]
[app.main.ui.hooks.resize :refer [use-resize-hook]]
@ -53,7 +53,7 @@
;; NOTE: This custom button may be replace by an action button when this variant is designed
[:button {:class (stl/css :collapse-sidebar-button)
:on-click on-collapse-left-sidebar}
[:> icon* {:icon-id "arrow"
[:> icon* {:icon-id i/arrow
:size "s"
:aria-label (tr "workspace.sidebar.collapse")}]])
@ -243,7 +243,7 @@
[:> icon-button* {:variant "ghost"
:aria-label (tr "labels.close")
:on-click on-close-document-history
:icon "close"}]))]
:icon i/close}]))]
[:> tab-switcher* {:tabs tabs
:selected selected

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

@ -18,7 +18,7 @@
[app.main.ui.components.search-bar :refer [search-bar*]]
[app.main.ui.context :as ctx]
[app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
[app.main.ui.icons :as i]
[app.main.ui.icons :as deprecated-icon]
[app.main.ui.workspace.sidebar.assets.common :as cmm]
[app.main.ui.workspace.sidebar.assets.file-library :refer [file-library*]]
[app.util.dom :as dom]
@ -177,7 +177,7 @@
:title (tr "workspace.assets.filter")
:class (stl/css-case :section-button true
:opened menu-open?)}
i/filter-icon]]
deprecated-icon/filter-icon]]
(when menu-open?
[:> context-menu*
{:on-close on-menu-close

3
frontend/src/app/main/ui/workspace/sidebar/assets/colors.cljs
View File

@ -22,6 +22,7 @@
[app.main.ui.components.color-bullet :as cb]
[app.main.ui.context :as ctx]
[app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
[app.main.ui.ds.foundations.assets.icon :as i]
[app.main.ui.workspace.sidebar.assets.common :as cmm]
[app.main.ui.workspace.sidebar.assets.groups :as grp]
[app.util.color :as uc]
@ -492,7 +493,7 @@
[:> icon-button* {:variant "ghost"
:aria-label (tr "workspace.assets.colors.add-color")
:on-click add-color-clicked
:icon "add"}])])
:icon i/add}])])
[:& cmm/asset-section-block {:role :content}

12
frontend/src/app/main/ui/workspace/sidebar/assets/components.cljs
View File

@ -26,9 +26,9 @@
[app.main.ui.components.radio-buttons :refer [radio-button radio-buttons]]
[app.main.ui.context :as ctx]
[app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
[app.main.ui.ds.foundations.assets.icon :refer [icon*]]
[app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i]
[app.main.ui.hooks :as h]
[app.main.ui.icons :as i]
[app.main.ui.icons :as deprecated-icon]
[app.main.ui.workspace.sidebar.assets.common :as cmm]
[app.main.ui.workspace.sidebar.assets.groups :as grp]
[app.util.dom :as dom]
@ -174,7 +174,7 @@
:variant-mark true
:component-icon true)
:title (tr "workspace.assets.components.num-variants" num-variants)}
[:> icon* {:icon-id "variant" :size "s"}]])])]))
[:> icon* {:icon-id i/variant :size "s"}]])])]))
(defn- count-leaves
@ -567,11 +567,11 @@
[:& radio-buttons {:selected (if listing-thumbs? "grid" "list")
:on-change toggle-list-style
:name "listing-style"}
[:& radio-button {:icon i/view-as-list
[:& radio-button {:icon deprecated-icon/view-as-list
:value "list"
:title (tr "workspace.assets.list-view")
:id "opt-list"}]
[:& radio-button {:icon i/flex-grid
[:& radio-button {:icon deprecated-icon/flex-grid
:value "grid"
:title (tr "workspace.assets.grid-view")
:id "opt-grid"}]]])
@ -580,7 +580,7 @@
[:> icon-button* {:variant "ghost"
:aria-label (tr "workspace.assets.components.add-component")
:on-click add-component
:icon "add"}
:icon i/add}
[:& file-uploader {:accept dwm/accept-image-types
:multi true
:ref input-ref

6
frontend/src/app/main/ui/workspace/sidebar/assets/file_library.cljs
View File

@ -22,7 +22,7 @@
[app.main.store :as st]
[app.main.ui.components.title-bar :refer [title-bar*]]
[app.main.ui.context :as ctx]
[app.main.ui.icons :as i]
[app.main.ui.icons :as deprecated-icon]
[app.main.ui.workspace.sidebar.assets.colors :refer [colors-section]]
[app.main.ui.workspace.sidebar.assets.common :as cmm]
[app.main.ui.workspace.sidebar.assets.components :refer [components-section]]
@ -115,7 +115,7 @@
:href (str "#" url)
:target "_blank"
:on-click on-click}
i/open-link]])]]))
deprecated-icon/open-link]])]]))
(defn- extend-selected
[selected type asset-groups asset-id file-id]
@ -302,7 +302,7 @@
(not ^boolean show-typography?))
[:div {:class (stl/css :asset-title)}
[:span {:class (stl/css :no-found-icon)}
i/search]
deprecated-icon/search]
[:span {:class (stl/css :no-found-text)}
(tr "workspace.assets.not-found")]])])]))

7
frontend/src/app/main/ui/workspace/sidebar/assets/groups.cljs
View File

@ -15,7 +15,8 @@
[app.main.ui.components.forms :as fm]
[app.main.ui.components.title-bar :refer [title-bar*]]
[app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
[app.main.ui.icons :as i]
[app.main.ui.ds.foundations.assets.icon :as i]
[app.main.ui.icons :as deprecated-icon]
[app.main.ui.workspace.sidebar.assets.common :as cmm]
[app.util.dom :as dom]
[app.util.i18n :as i18n :refer [tr]]
@ -79,7 +80,7 @@
[:> icon-button* {:variant "ghost"
:aria-label (tr "workspace.assets.component-group-options")
:on-click on-context-menu
:icon "menu"}]]])))
:icon i/menu}]]])))
(defn group-assets
"Convert a list of assets in a nested structure like this:
@ -140,7 +141,7 @@
(tr "workspace.assets.create-group")
(tr "workspace.assets.rename-group"))]
[:button {:class (stl/css :modal-close-btn)
:on-click modal/hide!} i/close]]
:on-click modal/hide!} deprecated-icon/close]]
[:div {:class (stl/css :modal-content)}
[:& fm/form {:form form :on-submit on-accept}

3
frontend/src/app/main/ui/workspace/sidebar/assets/typographies.cljs
View File

@ -20,6 +20,7 @@
[app.main.store :as st]
[app.main.ui.context :as ctx]
[app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
[app.main.ui.ds.foundations.assets.icon :as i]
[app.main.ui.workspace.sidebar.assets.common :as cmm]
[app.main.ui.workspace.sidebar.assets.groups :as grp]
[app.main.ui.workspace.sidebar.options.menus.typography :refer [typography-entry]]
@ -403,7 +404,7 @@
[:> icon-button* {:variant "ghost"
:aria-label (tr "workspace.assets.typography.add-typography")
:on-click add-typography
:icon "add"}])])
:icon i/add}])])
[:& cmm/asset-section-block {:role :content}
[:& typographies-group {:file-id file-id

4
frontend/src/app/main/ui/workspace/sidebar/collapsable_button.cljs
View File

@ -9,7 +9,7 @@
(:require
[app.main.data.workspace :as dw]
[app.main.store :as st]
[app.main.ui.ds.foundations.assets.icon :refer [icon*]]
[app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i]
[app.util.i18n :refer [tr]]
[rumext.v2 :as mf]))
@ -24,6 +24,6 @@
[:button {:class (stl/css :collapsed-button)
:title (tr "workspace.sidebar.expand")
:on-click on-click}
[:> icon* {:icon-id "arrow"
[:> icon* {:icon-id i/arrow
:size "s"
:aria-label (tr "workspace.sidebar.expand")}]]]]))

7
frontend/src/app/main/ui/workspace/sidebar/debug.cljs
View File

@ -12,7 +12,8 @@
[app.main.data.workspace :as dw]
[app.main.store :as st]
[app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
[app.main.ui.icons :as i]
[app.main.ui.ds.foundations.assets.icon :as i]
[app.main.ui.icons :as deprecated-icon]
[app.util.debug :as dbg]
[app.util.dom :as dom]
[app.util.i18n :as i18n :refer [tr]]
@ -39,14 +40,14 @@
[:> icon-button* {:variant "ghost"
:aria-label (tr "labels.close")
:on-click handle-close
:icon "close"}]]
:icon i/close}]]
[:div {:class (stl/css :debug-panel-inner)}
(for [option (sort-by d/name dbg/options)]
[:div {:key (d/name option) :class (stl/css :checkbox-wrapper)}
[:span {:class (stl/css-case :checkbox-icon true :global/checked (dbg/enabled? option))
:on-click #(on-toggle-enabled % option)}
(when (dbg/enabled? option) i/status-tick)]
(when (dbg/enabled? option) deprecated-icon/status-tick)]
[:input {:type "checkbox"
:id (d/name option)

4
frontend/src/app/main/ui/workspace/sidebar/debug_shape_info.cljs
View File

@ -13,7 +13,7 @@
[app.main.data.workspace :as dw]
[app.main.refs :as refs]
[app.main.store :as st]
[app.main.ui.icons :as i]
[app.main.ui.icons :as deprecated-icon]
[debug :as dbg]
[rumext.v2 :as mf]))
@ -129,7 +129,7 @@
[:span "Debug"]
[:div {:class (stl/css :close-button)
:on-click #(dbg/disable! :shape-panel)}
i/close]]
deprecated-icon/close]]
(if (empty? selected)
[:div {:class (stl/css :attrs-container)} "No shapes selected"]

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

@ -12,7 +12,7 @@
[app.main.data.workspace.undo :as dwu]
[app.main.refs :as refs]
[app.main.store :as st]
[app.main.ui.icons :as i]
[app.main.ui.icons :as deprecated-icon]
[app.util.dom :as dom]
[app.util.i18n :refer [tr] :as i18n]
[cuerdas.core :as str]
@ -148,20 +148,20 @@
(defn entry->icon [{:keys [type]}]
(case type
:page i/document
:shape i/svg
:rect i/rectangle
:circle i/elipse
:text i/text
:path i/path
:frame i/board
:group i/group
:color i/drop-icon
:typography i/text-palette
:component i/component
:media i/img
:image i/img
i/svg))
:page deprecated-icon/document
:shape deprecated-icon/svg
:rect deprecated-icon/rectangle
:circle deprecated-icon/elipse
:text deprecated-icon/text
:path deprecated-icon/path
:frame deprecated-icon/board
:group deprecated-icon/group
:color deprecated-icon/drop-icon
:typography deprecated-icon/text-palette
:component deprecated-icon/component
:media deprecated-icon/img
:image deprecated-icon/img
deprecated-icon/svg))
(defn is-shape? [type]
(contains? #{:shape :rect :circle :text :path :frame :group} type))
@ -314,7 +314,7 @@
:button-opened @show-detail?)
:on-click toggle-show-detail
:data-has-entry (dm/str (not (nil? (:detail entry))))}
i/arrow])]
deprecated-icon/arrow])]
(when @show-detail?
[:& history-entry-details {:entry entry}])]))
@ -327,7 +327,7 @@
[:div {:class (stl/css :history-toolbox)}
(if (empty? entries)
[:div {:class (stl/css :history-entry-empty)}
[:div {:class (stl/css :history-entry-empty-icon)} i/history]
[:div {:class (stl/css :history-entry-empty-icon)} deprecated-icon/history]
[:div {:class (stl/css :history-entry-empty-msg)} (tr "workspace.undo.empty")]]
[:ul {:class (stl/css :history-entries)}
(for [[idx-entry entry] (->> entries (map-indexed vector) reverse)] #_[i (range 0 10)]

8
frontend/src/app/main/ui/workspace/sidebar/layer_item.cljs
View File

@ -22,7 +22,7 @@
[app.main.ui.context :as ctx]
[app.main.ui.ds.foundations.assets.icon :refer [icon*]]
[app.main.ui.hooks :as hooks]
[app.main.ui.icons :as i]
[app.main.ui.icons :as deprecated-icon]
[app.main.ui.workspace.sidebar.layer-name :refer [layer-name*]]
[app.util.dom :as dom]
[app.util.i18n :refer [tr]]
@ -104,7 +104,7 @@
:toggle-content true
:inverse expanded?)
:on-click on-toggle-collapse}
i/arrow])
deprecated-icon/arrow])
[:div {:class (stl/css :icon-shape)
:on-double-click on-zoom-to-selected}
@ -154,7 +154,7 @@
(tr "workspace.shape.menu.show")
(tr "workspace.shape.menu.hide"))
:on-click on-toggle-visibility}
(if ^boolean hidden? i/hide i/shown)]
(if ^boolean hidden? deprecated-icon/hide deprecated-icon/shown)]
[:button {:class (stl/css-case
:block-element true
:selected blocked?)
@ -162,7 +162,7 @@
(tr "workspace.shape.menu.unlock")
(tr "workspace.shape.menu.lock"))
:on-click on-toggle-blocking}
(if ^boolean blocked? i/lock i/unlock)]])]]
(if ^boolean blocked? deprecated-icon/lock deprecated-icon/unlock)]])]]
children]))

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

@ -18,7 +18,7 @@
[app.main.ui.components.search-bar :refer [search-bar*]]
[app.main.ui.components.title-bar :refer [title-bar*]]
[app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
[app.main.ui.ds.foundations.assets.icon :refer [icon*]]
[app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i]
[app.main.ui.hooks :as hooks]
[app.main.ui.notifications.badge :refer [badge-notification]]
[app.main.ui.workspace.sidebar.layer-item :refer [layer-item]]
@ -296,12 +296,12 @@
:filter-button true
:opened show-menu?
:active active?)}
[:> icon* {:icon-id "filter"}]]]
[:> icon* {:icon-id i/filter}]]]
[:> icon-button* {:variant "ghost"
:aria-label (tr "labels.close")
:on-click toggle-search
:icon "close"}]]
:icon i/close}]]
[:div {:class (stl/css :active-filters)}
(for [fkey current-filters]
@ -325,7 +325,7 @@
[:> icon* {:icon-id filter-icon :size "s" :class (stl/css :layer-filter-icon)}]
[:span {:class (stl/css :layer-filter-name)}
name]
[:> icon* {:icon-id "close-small" :class (stl/css :layer-filter-close)}]]))]
[:> icon* {:icon-id i/close-small :class (stl/css :layer-filter-close)}]]))]
(when ^boolean show-menu?
[:ul {:class (stl/css :filters-container)}
@ -334,84 +334,84 @@
:data-filter "frame"
:on-click add-filter}
[:div {:class (stl/css :filter-menu-item-name-wrapper)}
[:> icon* {:icon-id "board" :size "s" :class (stl/css :filter-menu-item-icon)}]
[:> icon* {:icon-id i/board :size "s" :class (stl/css :filter-menu-item-icon)}]
[:span {:class (stl/css :filter-menu-item-name)}
(tr "workspace.sidebar.layers.frames")]]
(when (contains? current-filters :frame)
[:> icon* {:icon-id "tick" :size "s" :class (stl/css :filter-menu-item-tick)}])]
[:> icon* {:icon-id i/tick :size "s" :class (stl/css :filter-menu-item-tick)}])]
[:li {:class (stl/css-case :filter-menu-item true
:selected (contains? current-filters :group))
:data-filter "group"
:on-click add-filter}
[:div {:class (stl/css :filter-menu-item-name-wrapper)}
[:> icon* {:icon-id "group" :size "s" :class (stl/css :filter-menu-item-icon)}]
[:> icon* {:icon-id i/group :size "s" :class (stl/css :filter-menu-item-icon)}]
[:span {:class (stl/css :filter-menu-item-name)}
(tr "workspace.sidebar.layers.groups")]]
(when (contains? current-filters :group)
[:> icon* {:icon-id "tick" :size "s" :class (stl/css :filter-menu-item-tick)}])]
[:> icon* {:icon-id i/tick :size "s" :class (stl/css :filter-menu-item-tick)}])]
[:li {:class (stl/css-case :filter-menu-item true
:selected (contains? current-filters :mask))
:data-filter "mask"
:on-click add-filter}
[:div {:class (stl/css :filter-menu-item-name-wrapper)}
[:> icon* {:icon-id "mask" :size "s" :class (stl/css :filter-menu-item-icon)}]
[:> icon* {:icon-id i/mask :size "s" :class (stl/css :filter-menu-item-icon)}]
[:span {:class (stl/css :filter-menu-item-name)}
(tr "workspace.sidebar.layers.masks")]]
(when (contains? current-filters :mask)
[:> icon* {:icon-id "tick" :size "s" :class (stl/css :filter-menu-item-tick)}])]
[:> icon* {:icon-id i/tick :size "s" :class (stl/css :filter-menu-item-tick)}])]
[:li {:class (stl/css-case :filter-menu-item true
:selected (contains? current-filters :component))
:data-filter "component"
:on-click add-filter}
[:div {:class (stl/css :filter-menu-item-name-wrapper)}
[:> icon* {:icon-id "component" :size "s" :class (stl/css :filter-menu-item-icon)}]
[:> icon* {:icon-id i/component :size "s" :class (stl/css :filter-menu-item-icon)}]
[:span {:class (stl/css :filter-menu-item-name)}
(tr "workspace.sidebar.layers.components")]]
(when (contains? current-filters :component)
[:> icon* {:icon-id "tick" :size "s" :class (stl/css :filter-menu-item-tick)}])]
[:> icon* {:icon-id i/tick :size "s" :class (stl/css :filter-menu-item-tick)}])]
[:li {:class (stl/css-case :filter-menu-item true
:selected (contains? current-filters :text))
:data-filter "text"
:on-click add-filter}
[:div {:class (stl/css :filter-menu-item-name-wrapper)}
[:> icon* {:icon-id "text" :size "s" :class (stl/css :filter-menu-item-icon)}]
[:> icon* {:icon-id i/text :size "s" :class (stl/css :filter-menu-item-icon)}]
[:span {:class (stl/css :filter-menu-item-name)}
(tr "workspace.sidebar.layers.texts")]]
(when (contains? current-filters :text)
[:> icon* {:icon-id "tick" :size "s" :class (stl/css :filter-menu-item-tick)}])]
[:> icon* {:icon-id i/tick :size "s" :class (stl/css :filter-menu-item-tick)}])]
[:li {:class (stl/css-case :filter-menu-item true
:selected (contains? current-filters :image))
:data-filter "image"
:on-click add-filter}
[:div {:class (stl/css :filter-menu-item-name-wrapper)}
[:> icon* {:icon-id "img" :size "s" :class (stl/css :filter-menu-item-icon)}]
[:> icon* {:icon-id i/img :size "s" :class (stl/css :filter-menu-item-icon)}]
[:span {:class (stl/css :filter-menu-item-name)}
(tr "workspace.sidebar.layers.images")]]
(when (contains? current-filters :image)
[:> icon* {:icon-id "tick" :size "s" :class (stl/css :filter-menu-item-tick)}])]
[:> icon* {:icon-id i/tick :size "s" :class (stl/css :filter-menu-item-tick)}])]
[:li {:class (stl/css-case :filter-menu-item true
:selected (contains? current-filters :shape))
:data-filter "shape"
:on-click add-filter}
[:div {:class (stl/css :filter-menu-item-name-wrapper)}
[:> icon* {:icon-id "path" :size "s" :class (stl/css :filter-menu-item-icon)}]
[:> icon* {:icon-id i/path :size "s" :class (stl/css :filter-menu-item-icon)}]
[:span {:class (stl/css :filter-menu-item-name)}
(tr "workspace.sidebar.layers.shapes")]]
(when (contains? current-filters :shape)
[:> icon* {:icon-id "tick" :size "s" :class (stl/css :filter-menu-item-tick)}])]])]
[:> icon* {:icon-id i/tick :size "s" :class (stl/css :filter-menu-item-tick)}])]])]
[:div {:class (stl/css :tool-window-bar)}
[:> title-bar* {:collapsable false
@ -504,7 +504,7 @@
[:button {:class (stl/css :focus-title)
:on-click toogle-focus-mode}
[:span {:class (stl/css :back-button)}
[:> icon* {:icon-id "arrow"}]]
[:> icon* {:icon-id i/arrow}]]
[:div {:class (stl/css :focus-name)}
(or title (tr "workspace.sidebar.layers"))]

10
frontend/src/app/main/ui/workspace/sidebar/options/drawing/frame.cljs
View File

@ -13,7 +13,7 @@
[app.main.store :as st]
[app.main.ui.components.dropdown :refer [dropdown]]
[app.main.ui.components.radio-buttons :refer [radio-button radio-buttons]]
[app.main.ui.icons :as i]
[app.main.ui.icons :as deprecated-icon]
[app.util.dom :as dom]
[app.util.i18n :as i18n :refer [tr]]
[rumext.v2 :as mf]))
@ -68,7 +68,7 @@
[:span {:class (stl/css :select-name)}
(or selected-preset-name
(tr "workspace.options.size-presets"))]
[:span {:class (stl/css :collapsed-icon)} i/arrow]
[:span {:class (stl/css :collapsed-icon)} deprecated-icon/arrow]
[:& dropdown {:show show?
:on-close on-close}
[:ul {:class (stl/css :custom-select-dropdown)}
@ -92,17 +92,17 @@
[:span {:class (stl/css :preset-name)} (:name preset)]
[:span {:class (stl/css :preset-size)} (:width preset) " x " (:height preset)]]
(when preset-match
[:span {:class (stl/css :check-icon)} i/tick])])))]]]
[:span {:class (stl/css :check-icon)} deprecated-icon/tick])])))]]]
[:& radio-buttons {:selected (or (d/name orientation) "")
:on-change on-orientation-change
:name "frame-orientation"
:wide true
:class (stl/css :radio-buttons)}
[:& radio-button {:icon i/size-vertical
[:& radio-button {:icon deprecated-icon/size-vertical
:value "vertical"
:id "size-vertical"}]
[:& radio-button {:icon i/size-horizontal
[:& radio-button {:icon deprecated-icon/size-horizontal
:value "horizontal"
:id "size-horizontal"}]]]))

18
frontend/src/app/main/ui/workspace/sidebar/options/menus/align.cljs
View File

@ -10,7 +10,7 @@
[app.main.data.workspace :as dw]
[app.main.data.workspace.shortcuts :as sc]
[app.main.store :as st]
[app.main.ui.icons :as i]
[app.main.ui.icons :as deprecated-icon]
[app.util.dom :as dom]
[app.util.i18n :as i18n :refer [tr]]
[rumext.v2 :as mf]))
@ -48,7 +48,7 @@
:title (tr "workspace.align.hleft" (sc/get-tooltip :align-left))
:data-value "hleft"
:on-click align-objects}
i/align-left]
deprecated-icon/align-left]
[:button {:class (stl/css-case :align-button true
:disabled disabled-align)
@ -56,7 +56,7 @@
:title (tr "workspace.align.hcenter" (sc/get-tooltip :align-hcenter))
:data-value "hcenter"
:on-click align-objects}
i/align-horizontal-center]
deprecated-icon/align-horizontal-center]
[:button {:class (stl/css-case :align-button true
:disabled disabled-align)
@ -64,7 +64,7 @@
:title (tr "workspace.align.hright" (sc/get-tooltip :align-right))
:data-value "hright"
:on-click align-objects}
i/align-right]
deprecated-icon/align-right]
[:button {:class (stl/css-case :align-button true
:disabled disabled-distribute)
@ -72,7 +72,7 @@
:title (tr "workspace.align.hdistribute" (sc/get-tooltip :h-distribute))
:data-value "horizontal"
:on-click distribute-objects}
i/distribute-horizontally]]
deprecated-icon/distribute-horizontally]]
[:div {:class (stl/css :align-group-vertical)}
[:button {:class (stl/css-case :align-button true
@ -81,7 +81,7 @@
:title (tr "workspace.align.vtop" (sc/get-tooltip :align-top))
:data-value "vtop"
:on-click align-objects}
i/align-top]
deprecated-icon/align-top]
[:button {:class (stl/css-case :align-button true
:disabled disabled-align)
@ -89,7 +89,7 @@
:title (tr "workspace.align.vcenter" (sc/get-tooltip :align-vcenter))
:data-value "vcenter"
:on-click align-objects}
i/align-vertical-center]
deprecated-icon/align-vertical-center]
[:button {:class (stl/css-case :align-button true
:disabled disabled-align)
@ -97,7 +97,7 @@
:title (tr "workspace.align.vbottom" (sc/get-tooltip :align-bottom))
:data-value "vbottom"
:on-click align-objects}
i/align-bottom]
deprecated-icon/align-bottom]
[:button {:title (tr "workspace.align.vdistribute" (sc/get-tooltip :v-distribute))
:class (stl/css-case :align-button true
@ -105,5 +105,5 @@
:disabled disabled-distribute
:data-value "vertical"
:on-click distribute-objects}
i/distribute-vertical-spacing]]])))
deprecated-icon/distribute-vertical-spacing]]])))

11
frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.cljs
View File

@ -14,7 +14,8 @@
[app.main.ui.components.numeric-input :refer [numeric-input*]]
[app.main.ui.components.title-bar :refer [title-bar*]]
[app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
[app.main.ui.icons :as i]
[app.main.ui.ds.foundations.assets.icon :as i]
[app.main.ui.icons :as deprecated-icon]
[app.util.i18n :as i18n :refer [tr]]
[rumext.v2 :as mf]))
@ -95,7 +96,7 @@
[:> icon-button* {:variant "ghost"
:aria-label (tr "workspace.options.blur-options.add-blur")
:on-click handle-add
:icon "add"
:icon i/add
:data-testid "add-blur"}])]]
(when (and open? has-value?)
[:div {:class (stl/css :element-set-content)}
@ -105,18 +106,18 @@
[:button {:class (stl/css-case :show-more true
:selected more-options?)
:on-click toggle-more-options}
i/menu]
deprecated-icon/menu]
[:span {:class (stl/css :label)}
(tr "workspace.options.blur-options.title")]]
[:div {:class (stl/css :actions)}
[:> icon-button* {:variant "ghost"
:aria-label (tr "workspace.options.blur-options.toggle-blur")
:on-click handle-toggle-visibility
:icon (if hidden? "hide" "shown")}]
:icon (if hidden? i/hide i/shown)}]
[:> icon-button* {:variant "ghost"
:aria-label (tr "workspace.options.blur-options.remove-blur")
:on-click handle-delete
:icon "remove"}]]]
:icon i/remove}]]]
(when more-options?
[:div {:class (stl/css :second-row)}
[:label {:class (stl/css :label)

12
frontend/src/app/main/ui/workspace/sidebar/options/menus/bool.cljs
View File

@ -16,12 +16,12 @@
[app.main.features :as features]
[app.main.store :as st]
[app.main.ui.components.radio-buttons :refer [radio-button radio-buttons]]
[app.main.ui.icons :as i]
[app.main.ui.icons :as deprecated-icon]
[app.util.i18n :as i18n :refer [tr]]
[rumext.v2 :as mf]))
(def ^:private flatten-icon
(i/icon-xref :boolean-flatten (stl/css :flatten-icon)))
(deprecated-icon/icon-xref :boolean-flatten (stl/css :flatten-icon)))
(mf/defc bool-options*
[{:keys [total-selected shapes shapes-with-children]}]
@ -90,22 +90,22 @@
:class (stl/css :boolean-radio-btn)
:on-change on-change
:name "bool-options"}
[:& radio-button {:icon i/boolean-union
[:& radio-button {:icon deprecated-icon/boolean-union
:value "union"
:disabled disabled-bool-btns
:title (str (tr "workspace.shape.menu.union") " (" (sc/get-tooltip :bool-union) ")")
:id "bool-opt-union"}]
[:& radio-button {:icon i/boolean-difference
[:& radio-button {:icon deprecated-icon/boolean-difference
:value "difference"
:disabled disabled-bool-btns
:title (str (tr "workspace.shape.menu.difference") " (" (sc/get-tooltip :bool-difference) ")")
:id "bool-opt-differente"}]
[:& radio-button {:icon i/boolean-intersection
[:& radio-button {:icon deprecated-icon/boolean-intersection
:value "intersection"
:disabled disabled-bool-btns
:title (str (tr "workspace.shape.menu.intersection") " (" (sc/get-tooltip :bool-intersection) ")")
:id "bool-opt-intersection"}]
[:& radio-button {:icon i/boolean-exclude
[:& radio-button {:icon deprecated-icon/boolean-exclude
:value "exclude"
:disabled disabled-bool-btns
:title (str (tr "workspace.shape.menu.exclude") " (" (sc/get-tooltip :bool-exclude) ")")

6
frontend/src/app/main/ui/workspace/sidebar/options/menus/border_radius.cljs
View File

@ -7,7 +7,7 @@
[app.main.store :as st]
[app.main.ui.components.numeric-input :refer [numeric-input*]]
[app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
[app.main.ui.ds.foundations.assets.icon :refer [icon*]]
[app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i]
[app.main.ui.hooks :as hooks]
[app.util.i18n :as i18n :refer [tr]]
[beicon.v2.core :as rx]
@ -95,7 +95,7 @@
(if (not radius-expanded)
[:div {:class (stl/css :radius-1)
:title (tr "workspace.options.radius")}
[:> icon* {:icon-id "corner-radius"
[:> icon* {:icon-id i/corner-radius
:size "s"
:class (stl/css :icon)}]
[:> numeric-input*
@ -150,4 +150,4 @@
:aria-label (if radius-expanded
(tr "workspace.options.radius.hide-all-corners")
(tr "workspace.options.radius.show-single-corners"))
:icon "corner-radius"}]]))
:icon i/corner-radius}]]))

4
frontend/src/app/main/ui/workspace/sidebar/options/menus/constraints.cljs
View File

@ -16,7 +16,7 @@
[app.main.store :as st]
[app.main.ui.components.select :refer [select]]
[app.main.ui.components.title-bar :refer [title-bar*]]
[app.main.ui.icons :as i]
[app.main.ui.icons :as deprecated-icon]
[app.util.dom :as dom]
[app.util.i18n :as i18n :refer [tr]]
[cuerdas.core :as str]
@ -225,7 +225,7 @@
[:span {:class (stl/css-case :check-mark true
:checked (:fixed-scroll values))}
(when (:fixed-scroll values)
i/status-tick)]
deprecated-icon/status-tick)]
(tr "workspace.options.constraints.fix-when-scrolling")
[:input {:type "checkbox"
:id "fixed-on-scroll"

Some files were not shown because too many files have changed in this diff Show More