diff --git a/CHANGES.md b/CHANGES.md index fda77dc6d3..6278c887ae 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -50,6 +50,14 @@ - Fix misleading affordance in saved versions [Taiga #11887](https://tree.taiga.io/project/penpot/issue/11887) - Fix pasting RTF text crashes penpot [Taiga #11717](https://tree.taiga.io/project/penpot/issue/11717) - Fix navigation arrows in Libraries & Templates carousel [Taiga #10609](https://tree.taiga.io/project/penpot/issue/10609) +- Fix applying tokens with zero value to size [Taiga #11618](https://tree.taiga.io/project/penpot/issue/11618) +- Fix typo [Taiga #11969](https://tree.taiga.io/project/penpot/issue/11969) +- Fix typo [Taiga #11970](https://tree.taiga.io/project/penpot/issue/11970) +- Fix typos [Taiga #11971](https://tree.taiga.io/project/penpot/issue/11971) +- Fix inconsistent naming for "Flatten" [Taiga #8371](https://tree.taiga.io/project/penpot/issue/8371) +- Layout item tokens should be unapplied when moving out of a layout [Taiga #11012](https://tree.taiga.io/project/penpot/issue/11012) +- Fix incorrect date displayed for support plan [Taiga #11986](https://tree.taiga.io/project/penpot/issue/11986) +- Fix can't import 'borderWidth' type token [#132](https://github.com/tokens-studio/penpot/issues/132) ## 2.9.0 diff --git a/backend/src/app/migrations.clj b/backend/src/app/migrations.clj index 0c04c1aa95..e6e1c6b5ea 100644 --- a/backend/src/app/migrations.clj +++ b/backend/src/app/migrations.clj @@ -444,7 +444,10 @@ :fn (mg/resource "app/migrations/sql/0140-mod-file-change-table.sql")} {:name "0140-add-locked-by-column-to-file-change-table" - :fn (mg/resource "app/migrations/sql/0140-add-locked-by-column-to-file-change-table.sql")}]) + :fn (mg/resource "app/migrations/sql/0140-add-locked-by-column-to-file-change-table.sql")} + + {:name "0141-add-idx-to-file_library_rel" + :fn (mg/resource "app/migrations/sql/0141-add-idx-to-file_library_rel.sql")}]) (defn apply-migrations! [pool name migrations] diff --git a/backend/src/app/migrations/sql/0141-add-idx-to-file_library_rel.sql b/backend/src/app/migrations/sql/0141-add-idx-to-file_library_rel.sql new file mode 100644 index 0000000000..c749f1772e --- /dev/null +++ b/backend/src/app/migrations/sql/0141-add-idx-to-file_library_rel.sql @@ -0,0 +1,2 @@ +CREATE INDEX file_library_rel__library_file_id__idx + ON file_library_rel (library_file_id); diff --git a/backend/src/app/rpc/commands/files.clj b/backend/src/app/rpc/commands/files.clj index 38a518856e..4b4149603f 100644 --- a/backend/src/app/rpc/commands/files.clj +++ b/backend/src/app/rpc/commands/files.clj @@ -78,6 +78,7 @@ ;; --- FILE PERMISSIONS + (def ^:private sql:file-permissions "select fpr.is_owner, fpr.is_admin, @@ -460,8 +461,42 @@ (:has-libraries row))) +;; --- COMMAND QUERY: get-library-usage + + +(declare get-library-usage) + +(def schema:get-library-usage + [:map {:title "get-library-usage"} + [:file-id ::sm/uuid]]) +:sample +(sv/defmethod ::get-library-usage + "Gets the number of files that use the specified library." + {::doc/added "2.10.0" + ::sm/params schema:get-library-usage + ::sm/result ::sm/int} + [{:keys [::db/pool] :as cfg} {:keys [::rpc/profile-id file-id]}] + (dm/with-open [conn (db/open pool)] + (check-read-permissions! pool profile-id file-id) + (get-library-usage conn file-id))) + +(def ^:private sql:get-library-usage + "SELECT COUNT(*) AS used + FROM file_library_rel AS flr + JOIN file AS fl ON (flr.library_file_id = fl.id) + WHERE flr.library_file_id = ?::uuid + AND (fl.deleted_at IS NULL OR + fl.deleted_at > now())") + +(defn- get-library-usage + [conn file-id] + (let [row (db/exec-one! conn [sql:get-library-usage file-id])] + {:used-in (:used row)})) + + ;; --- QUERY COMMAND: get-page + (defn- prune-objects "Given the page data and the object-id returns the page data with all other not needed objects removed from the `:objects` data @@ -551,6 +586,24 @@ ;; --- COMMAND QUERY: get-team-shared-files +(defn- components-and-variants + "Return a set with all the variant-ids, and a list of components, but with + only one component by variant" + [components] + (let [{:keys [variant-ids components]} + (reduce (fn [{:keys [variant-ids components] :as acc} {:keys [variant-id] :as component}] + (cond + (nil? variant-id) + {:variant-ids variant-ids :components (conj components component)} + (contains? variant-ids variant-id) + acc + :else + {:variant-ids (conj variant-ids variant-id) :components (conj components component)})) + {:variant-ids #{} :components []} + components)] + {:components components + :variant-ids variant-ids})) + (def ^:private sql:team-shared-files "select f.id, f.revn, @@ -584,10 +637,13 @@ :sample (into [] (take limit sorted-assets))}))] (binding [pmap/*load-fn* (partial feat.fdata/load-pointer cfg id)] - (let [load-objects (fn [component] - (ctf/load-component-objects data component)) - components-sample (-> (assets-sample (ctkl/components data) 4) - (update :sample #(mapv load-objects %)))] + (let [load-objects (fn [component] + (ctf/load-component-objects data component)) + comps-and-variants (components-and-variants (ctkl/components-seq data)) + components (into {} (map (juxt :id identity) (:components comps-and-variants))) + components-sample (-> (assets-sample components 4) + (update :sample #(mapv load-objects %)) + (assoc :variants-count (-> comps-and-variants :variant-ids count)))] {:components components-sample :media (assets-sample (:media data) 3) :colors (assets-sample (:colors data) 3) @@ -641,6 +697,7 @@ ;; --- COMMAND QUERY: Files that use this File library + (def ^:private sql:library-using-files "SELECT f.id, f.name @@ -713,6 +770,7 @@ ;; --- COMMAND QUERY: get-file-summary + (defn- get-file-summary [{:keys [::db/conn] :as cfg} {:keys [profile-id id project-id] :as params}] (check-read-permissions! conn profile-id id) @@ -730,11 +788,13 @@ (cfeat/check-file-features! (:features file))) (binding [pmap/*load-fn* (partial feat.fdata/load-pointer cfg id)] - {:name (:name file) - :components-count (count (ctkl/components-seq (:data file))) - :graphics-count (count (get-in file [:data :media] [])) - :colors-count (count (get-in file [:data :colors] [])) - :typography-count (count (get-in file [:data :typographies] []))}))) + (let [components-and-variants (components-and-variants (ctkl/components-seq (:data file)))] + {:name (:name file) + :components-count (-> components-and-variants :components count) + :variants-count (-> components-and-variants :variant-ids count) + :graphics-count (count (get-in file [:data :media] [])) + :colors-count (count (get-in file [:data :colors] [])) + :typography-count (count (get-in file [:data :typographies] []))})))) (sv/defmethod ::get-file-summary "Retrieve a file summary by its ID. Only authenticated users." @@ -746,6 +806,7 @@ ;; --- COMMAND QUERY: get-file-info + (defn- get-file-info [{:keys [::db/conn] :as cfg} {:keys [id] :as params}] (db/get* conn :file diff --git a/common/src/app/common/files/helpers.cljc b/common/src/app/common/files/helpers.cljc index afb0c4f4af..fe16c9daa4 100644 --- a/common/src/app/common/files/helpers.cljc +++ b/common/src/app/common/files/helpers.cljc @@ -426,38 +426,15 @@ (defn components-nesting-loop? "Check if a nesting loop would be created if the given shape is moved below the given parent" - [objects shape-id parent-id] - (let [xf-get-component-id (keep :component-id) - - children (get-children-with-self objects shape-id) - child-components (into #{} xf-get-component-id children) - - parents (get-parents-with-self objects parent-id) - parent-components (into #{} xf-get-component-id parents)] - (seq (set/intersection child-components parent-components)))) - -(defn variants-nesting-loop? - "Check if a variants nesting loop would be created if the given shape is moved below the given parent" - [objects libraries shape parent pasting-cutted-mains?] - ;; If we are cut-pasting mains into its own variant, it is ok - (if (and pasting-cutted-mains? - (:is-variant-container parent) - (= (:variant-id shape) (:id parent))) - nil - (let [get-variant-id #(or (:variant-id %) - (when (:is-variant-container %) (:id %)) - (when (:component-id %) - (dm/get-in libraries [(:component-file %) - :data - :components - (:component-id %) - :variant-id]))) - child-variant-ids (into #{} (keep get-variant-id) - (get-children-with-self objects (:id shape))) - parent-variant-ids (into #{} (keep get-variant-id) - (get-parents-with-self objects (:id parent)))] - (seq (set/intersection child-variant-ids parent-variant-ids))))) - + ([objects shape-id parent-id] + (let [children (get-children-with-self objects shape-id) + parents (get-parents-with-self objects parent-id)] + (components-nesting-loop? children parents))) + ([children parents] + (let [xf-get-component-id (keep :component-id) + child-components (into #{} xf-get-component-id children) + parent-components (into #{} xf-get-component-id parents)] + (seq (set/intersection child-components parent-components))))) ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;; ALGORITHMS & TRANSFORMATIONS FOR SHAPES diff --git a/common/src/app/common/files/repair.cljc b/common/src/app/common/files/repair.cljc index 1d638586ee..945b0c1f57 100644 --- a/common/src/app/common/files/repair.cljc +++ b/common/src/app/common/files/repair.cljc @@ -491,6 +491,19 @@ (pcb/with-library-data file-data) (pcb/update-component (:id shape) repair-component)))) +(defmethod repair-error :invalid-text-touched + [_ {:keys [shape page-id] :as error} file-data _] + (let [repair-shape + (fn [shape] + ;; Add content group + (log/debug :hint " -> add :content-group to :touched-groups") + (update shape :touched ctk/set-touched-group :content-group))] + + (log/dbg :hint "repairing shape :invalid-text-touched" :id (:id shape) :name (:name shape) :page-id page-id) + (-> (pcb/empty-changes nil page-id) + (pcb/with-file-data file-data) + (pcb/update-shapes [(:id shape)] repair-shape)))) + (defmethod repair-error :misplaced-slot [_ {:keys [shape page-id] :as error} file-data _] (let [repair-shape diff --git a/common/src/app/common/files/validate.cljc b/common/src/app/common/files/validate.cljc index 75650ca97d..02887b5f5e 100644 --- a/common/src/app/common/files/validate.cljc +++ b/common/src/app/common/files/validate.cljc @@ -57,6 +57,7 @@ :not-component-not-allowed :component-nil-objects-not-allowed :instance-head-not-frame + :invalid-text-touched :misplaced-slot :missing-slot :shape-ref-cycle @@ -328,6 +329,20 @@ "This shape has children with the same swap slot" shape file page))) +(defn- check-valid-touched + "Validate that the text touched flags are coherent." + [shape file page] + (let [touched-groups (ctk/normal-touched-groups shape) + content-touched? (touched-groups :content-group) + text-touched? (or (touched-groups :text-content-text) + (touched-groups :text-content-attribute) + (touched-groups :text-content-structure))] + ;; For now we only check this combination, that has been reported in some bugs + (when (and text-touched? (not content-touched?)) + (report-error :invalid-text-touched + "This thape has text type touched but not content touched" + shape file page)))) + (defn- check-shape-main-root-top "Root shape of a top main instance: @@ -369,6 +384,7 @@ (check-component-ref shape file page libraries) (check-empty-swap-slot shape file page) (check-duplicate-swap-slot shape file page) + (check-valid-touched shape file page) (run! #(check-shape % file page libraries :context :copy-top :library-exists library-exists) (:shapes shape)))) (defn- check-shape-copy-root-nested @@ -379,6 +395,7 @@ [shape file page libraries library-exists] (check-component-not-main-head shape file page libraries) (check-component-not-root shape file page) + (check-valid-touched shape file page) ;; We can have situations where the nested copy and the ancestor copy come from different libraries and some of them have been dettached ;; so we only validate the shape-ref if the ancestor is from a valid library (when library-exists @@ -401,6 +418,7 @@ (check-component-not-root shape file page) (check-component-ref shape file page libraries) (check-empty-swap-slot shape file page) + (check-valid-touched shape file page) (run! #(check-shape % file page libraries :context :copy-any) (:shapes shape))) (defn- check-shape-not-component diff --git a/common/src/app/common/flags.cljc b/common/src/app/common/flags.cljc index e570a3e67d..ff272afffc 100644 --- a/common/src/app/common/flags.cljc +++ b/common/src/app/common/flags.cljc @@ -119,6 +119,7 @@ ;; Only for developtment. :tiered-file-data-storage :token-units + :token-base-font-size :token-typography-types :token-typography-composite :transit-readable-response diff --git a/common/src/app/common/logic/shapes.cljc b/common/src/app/common/logic/shapes.cljc index 60913d56f5..bad3065ef4 100644 --- a/common/src/app/common/logic/shapes.cljc +++ b/common/src/app/common/logic/shapes.cljc @@ -405,9 +405,10 @@ (remove #(= % parent-id) all-parents))] (-> changes - ;; Remove layout-item properties when moving a shape outside a layout + ;; Remove layout-item properties and tokens when moving a shape outside a layout (cond-> (not (ctl/any-layout? parent)) - (pcb/update-shapes ids ctl/remove-layout-item-data)) + (-> (pcb/update-shapes ids ctl/remove-layout-item-data) + (pcb/update-shapes ids cto/unapply-layout-item-tokens))) ;; Remove the hide in viewer flag (cond-> (and (not= uuid/zero parent-id) (cfh/frame-shape? parent)) diff --git a/common/src/app/common/test_helpers/tokens.cljc b/common/src/app/common/test_helpers/tokens.cljc index cf23a805ff..e2c6cee4d1 100644 --- a/common/src/app/common/test_helpers/tokens.cljc +++ b/common/src/app/common/test_helpers/tokens.cljc @@ -77,22 +77,25 @@ [file shape-label token-name token-attrs shape-attrs resolved-value] (let [page (thf/current-page file) shape (ths/get-shape file shape-label) - shape' (as-> shape $ - (cto/apply-token-to-shape {:shape $ - :token {:name token-name} - :attributes token-attrs}) - (reduce (fn [shape attr] - (case attr - :stroke-width (set-stroke-width shape resolved-value) - :stroke-color (set-stroke-color shape resolved-value) - :fill (set-fill-color shape resolved-value) - (ctn/set-shape-attr shape attr resolved-value {:ignore-touched true}))) - $ - shape-attrs))] + shape' (when shape + (as-> shape $ + (cto/apply-token-to-shape {:shape $ + :token {:name token-name} + :attributes token-attrs}) + (reduce (fn [shape attr] + (case attr + :stroke-width (set-stroke-width shape resolved-value) + :stroke-color (set-stroke-color shape resolved-value) + :fill (set-fill-color shape resolved-value) + (ctn/set-shape-attr shape attr resolved-value {:ignore-touched true}))) + $ + shape-attrs)))] - (ctf/update-file-data - file - (fn [file-data] - (ctpl/update-page file-data - (:id page) - #(ctst/set-shape % shape')))))) + (if shape' + (ctf/update-file-data + file + (fn [file-data] + (ctpl/update-page file-data + (:id page) + #(ctst/set-shape % shape')))) + file))) diff --git a/common/src/app/common/types/container.cljc b/common/src/app/common/types/container.cljc index 80200143f3..5e030ffb56 100644 --- a/common/src/app/common/types/container.cljc +++ b/common/src/app/common/types/container.cljc @@ -426,7 +426,6 @@ (not (has-any-main? objects shape)) (not (has-any-copy-parent? objects shape)))) - (defn collect-main-shapes [shape objects] (if (ctk/main-instance? shape) [shape] @@ -434,9 +433,13 @@ (mapcat collect-main-shapes children objects) []))) -(defn- invalid-structure-for-component? +(defn get-component-from-shape + [shape libraries] + (get-in libraries [(:component-file shape) :data :components (:component-id shape)])) + +(defn invalid-structure-for-component? "Check if the structure generated nesting children in parent is invalid in terms of nested components" - [objects parent children pasting? all-comp-cut? libraries] + [objects parent children pasting? libraries] (let [; If the original shapes had been cutted, and we are pasting them now, they aren't ; in objects. We can add them to locate later objects (merge objects @@ -446,7 +449,7 @@ ; original component doesn't exist or is deleted. So for this function purposes, they ; are removed from the list remove? (fn [shape] - (let [component (get-in libraries [(:component-file shape) :data :components (:component-id shape)])] + (let [component (get-component-from-shape shape libraries)] (and component (not (:deleted component))))) selected-components (cond->> (mapcat collect-main-shapes children objects) @@ -457,11 +460,7 @@ parent-in-component? (in-any-component? objects parent) comps-nesting-loop? (not (->> children (map #(cfh/components-nesting-loop? objects (:id %) (:id parent))) - (every? nil?))) - - variants-nesting-loop? (not (->> children - (map #(cfh/variants-nesting-loop? objects libraries % parent (and pasting? all-comp-cut?))) - (every? nil?)))] + (every? nil?)))] (or ;;We don't want to change the structure of component copies (ctk/in-component-copy? parent) @@ -470,8 +469,7 @@ (and selected-main-instance? parent-in-component?) ;; Avoid placing a shape as a direct or indirect child of itself, ;; or inside its main component if it's in a copy. - comps-nesting-loop? - variants-nesting-loop?))) + comps-nesting-loop?))) (defn find-valid-parent-and-frame-ids "Navigate trough the ancestors until find one that is valid. Returns [ parent-id frame-id ]" @@ -511,7 +509,7 @@ true)) (every? :deleted)))] (if (or no-changes? - (and (not (invalid-structure-for-component? objects parent children pasting? all-comp-cut? libraries)) + (and (not (invalid-structure-for-component? objects parent children pasting? libraries)) ;; If we are moving into a main component, no descendant can be main (or (nil? any-main-descendant) (not (ctk/main-instance? parent))) ;; If we are moving into a variant-container, all the items should be main diff --git a/common/src/app/common/types/modifiers.cljc b/common/src/app/common/types/modifiers.cljc index 17aa9853a5..6e1d8c7ef9 100644 --- a/common/src/app/common/types/modifiers.cljc +++ b/common/src/app/common/types/modifiers.cljc @@ -466,7 +466,12 @@ (dm/assert! (#{:width :height} attr)) (dm/assert! (number? value)) - (let [{:keys [proportion proportion-lock]} shape + (let [;; Avoid havig shapes with zero size + value (if (< (mth/abs value) 0.01) + 0.01 + value) + + {:keys [proportion proportion-lock]} shape size (select-keys (:selrect shape) [:width :height]) new-size (if-not (and (not ignore-lock?) proportion-lock) (assoc size attr value) diff --git a/common/src/app/common/types/shape/layout.cljc b/common/src/app/common/types/shape/layout.cljc index cd53eea6ce..384029a688 100644 --- a/common/src/app/common/types/shape/layout.cljc +++ b/common/src/app/common/types/shape/layout.cljc @@ -14,22 +14,22 @@ [app.common.schema :as sm] [app.common.uuid :as uuid])) -;; :layout ;; :flex, :grid in the future -;; :layout-flex-dir ;; :row, :row-reverse, :column, :column-reverse -;; :layout-gap-type ;; :simple, :multiple -;; :layout-gap ;; {:row-gap number , :column-gap number} +;; :layout ;; :flex, :grid in the future +;; :layout-flex-dir ;; :row, :row-reverse, :column, :column-reverse +;; :layout-gap-type ;; :simple, :multiple +;; :layout-gap ;; {:row-gap number , :column-gap number} -;; :layout-align-items ;; :start :end :center :stretch -;; :layout-align-content ;; :start :center :end :space-between :space-around :space-evenly :stretch (by default) +;; :layout-align-items ;; :start :end :center :stretch +;; :layout-align-content ;; :start :center :end :space-between :space-around :space-evenly :stretch (by default) ;; :layout-justify-items ;; :start :center :end :space-between :space-around :space-evenly -;; :layout-justify-content ;; :start :center :end :space-between :space-around :space-evenly -;; :layout-wrap-type ;; :wrap, :nowrap -;; :layout-padding-type ;; :simple, :multiple -;; :layout-padding ;; {:p1 num :p2 num :p3 num :p4 num} number could be negative +;; :layout-justify-content ;; :start :center :end :space-between :space-around :space-evenly +;; :layout-wrap-type ;; :wrap, :nowrap +;; :layout-padding-type ;; :simple, :multiple +;; :layout-padding ;; {:p1 num :p2 num :p3 num :p4 num} number could be negative -;; layout-grid-rows ;; vector of grid-track -;; layout-grid-columns ;; vector of grid-track -;; layout-grid-cells ;; map of id->grid-cell +;; layout-grid-rows ;; vector of grid-track +;; layout-grid-columns ;; vector of grid-track +;; layout-grid-cells ;; map of id->grid-cell ;; ITEMS ;; :layout-item-margin ;; {:m1 0 :m2 0 :m3 0 :m4 0} diff --git a/common/src/app/common/types/token.cljc b/common/src/app/common/types/token.cljc index 320fdf8167..f23e9c5a70 100644 --- a/common/src/app/common/types/token.cljc +++ b/common/src/app/common/types/token.cljc @@ -83,15 +83,25 @@ (def stroke-width-keys (schema-keys schema:stroke-width)) -(def ^:private schema:sizing - [:map {:title "SizingTokenAttrs"} +(def ^:private schema:sizing-base + [:map {:title "SizingBaseTokenAttrs"} [:width {:optional true} token-name-ref] - [:height {:optional true} token-name-ref] + [:height {:optional true} token-name-ref]]) + +(def ^:private schema:sizing-layout-item + [:map {:title "SizingLayoutItemTokenAttrs"} [:layout-item-min-w {:optional true} token-name-ref] [:layout-item-max-w {:optional true} token-name-ref] [:layout-item-min-h {:optional true} token-name-ref] [:layout-item-max-h {:optional true} token-name-ref]]) +(def ^:private schema:sizing + (-> (reduce mu/union [schema:sizing-base + schema:sizing-layout-item]) + (mu/update-properties assoc :title "SizingTokenAttrs"))) + +(def sizing-layout-item-keys (schema-keys schema:sizing-layout-item)) + (def sizing-keys (schema-keys schema:sizing)) (def ^:private schema:opacity @@ -272,7 +282,7 @@ (font-size-keys shape-attr) #{shape-attr :typography} (letter-spacing-keys shape-attr) #{shape-attr :typography} (font-family-keys shape-attr) #{shape-attr :typography} - (text-case-keys shape-attr) #{shape-attr :typography} + (= :text-transform shape-attr) #{:text-case :typography} (text-decoration-keys shape-attr) #{shape-attr :typography} (font-weight-keys shape-attr) #{shape-attr :typography} @@ -378,6 +388,13 @@ (defn unapply-token-id [shape attributes] (update shape :applied-tokens d/without-keys attributes)) +(defn unapply-layout-item-tokens + "Unapplies all layout item related tokens from shape." + [shape] + (let [layout-item-attrs (set/union sizing-layout-item-keys + spacing-margin-keys)] + (unapply-token-id shape layout-item-attrs))) + ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;; TYPOGRAPHY ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; diff --git a/common/test/common_tests/logic/move_shapes_test.cljc b/common/test/common_tests/logic/move_shapes_test.cljc index 74f04d5394..657b624623 100644 --- a/common/test/common_tests/logic/move_shapes_test.cljc +++ b/common/test/common_tests/logic/move_shapes_test.cljc @@ -12,6 +12,8 @@ [app.common.test-helpers.files :as thf] [app.common.test-helpers.ids-map :as thi] [app.common.test-helpers.shapes :as ths] + [app.common.test-helpers.tokens :as tht] + [app.common.types.tokens-lib :as ctob] [app.common.uuid :as uuid] [clojure.test :as t])) @@ -47,7 +49,6 @@ (t/is (= (:parent-id frame-to-move) uuid/zero)) (t/is (= (:parent-id frame-to-move') (:id frame-parent'))))) - (t/deftest test-relocate-shape-out-of-group (let [;; ==== Setup file (-> (thf/sample-file :file1) @@ -68,7 +69,6 @@ 0 ;; to-index #{(:id circle)}) ;; ids - file' (thf/apply-changes file changes) ;; ==== Get @@ -81,4 +81,134 @@ (t/is (= (:parent-id circle) (:id group))) (t/is (= (:parent-id circle') uuid/zero)) (t/is group) - (t/is (nil? group')))) \ No newline at end of file + (t/is (nil? group')))) + +(t/deftest test-relocate-shape-out-of-layout-manual + (let [;; ==== Setup + file (-> (thf/sample-file :file1) + (tho/add-frame :frame-1 + :layout :flex ;; TODO: those values come from main.data.workspace.shape_layout/default-layout-params + :layout-flex-dir :row ;; it should be good to use it directly, but first it should be moved to common.logic + :layout-gap-type :multiple + :layout-gap {:row-gap 0 :column-gap 0} + :layout-align-items :start + :layout-justify-content :start + :layout-align-content :stretch + :layout-wrap-type :nowrap + :layout-padding-type :simple + :layout-padding {:p1 0 :p2 0 :p3 0 :p4 0}) + (ths/add-sample-shape :circle-1 :parent-label :frame-1 + :layout-item-margin {:m1 10 :m2 10 :m3 10 :m4 10} + :layout-item-margin-type :multiple + :layout-item-h-sizing :auto + :layout-item-v-sizing :auto + :layout-item-max-h 1000 + :layout-item-min-h 100 + :layout-item-max-w 2000 + :layout-item-min-w 200 + :layout-item-absolute false + :layout-item-z-index 10)) + + page (thf/current-page file) + circle (ths/get-shape file :circle-1) + + ;; ==== Action + + changes (cls/generate-relocate (-> (pcb/empty-changes nil) + (pcb/with-page-id (:id page)) + (pcb/with-objects (:objects page))) + uuid/zero ;; parent-id + 0 ;; to-index + #{(:id circle)}) ;; ids + + ;; ==== Get + file' (thf/apply-changes file changes) + circle' (ths/get-shape file' :circle-1)] + + ;; ==== Check + + ;; the layout item attributes are removed + (t/is (nil? (:layout-item-margin circle'))) + (t/is (nil? (:layout-item-margin-type circle'))) + (t/is (nil? (:layout-item-h-sizing circle'))) + (t/is (nil? (:layout-item-v-sizing circle'))) + (t/is (nil? (:layout-item-max-h circle'))) + (t/is (nil? (:layout-item-min-h circle'))) + (t/is (nil? (:layout-item-max-w circle'))) + (t/is (nil? (:layout-item-min-w circle'))) + (t/is (nil? (:layout-item-absolute circle'))) + (t/is (nil? (:layout-item-z-index circle'))))) + +(t/deftest test-relocate-shape-out-of-layout-with-tokens + (let [;; ==== Setup + file (-> (thf/sample-file :file1) + (tht/add-tokens-lib) + (tht/update-tokens-lib #(-> % + (ctob/add-set (ctob/make-token-set :name "test-token-set")) + (ctob/add-theme (ctob/make-token-theme :name "test-theme" + :sets #{"test-token-set"})) + (ctob/set-active-themes #{"/test-theme"}) + (ctob/add-token-in-set "test-token-set" + (ctob/make-token :id (thi/new-id! :token-sizing) + :name "token-sizing" + :type :sizing + :value 10)) + (ctob/add-token-in-set "test-token-set" + (ctob/make-token :id (thi/new-id! :token-spacing) + :name "token-spacing" + :type :spacing + :value 30)))) + (tho/add-frame :frame-1 + :layout :flex ;; TODO: those values come from main.data.workspace.shape_layout/default-layout-params + :layout-flex-dir :row ;; it should be good to use it directly, but first it should be moved to common.logic + :layout-gap-type :multiple + :layout-gap {:row-gap 0 :column-gap 0} + :layout-align-items :start + :layout-justify-content :start + :layout-align-content :stretch + :layout-wrap-type :nowrap + :layout-padding-type :simple + :layout-padding {:p1 0 :p2 0 :p3 0 :p4 0}) + (ths/add-sample-shape :circle-1 :parent-label :frame-1) + (tht/apply-token-to-shape :circle-1 + "token-sizing" + [:layout-item-max-h :layout-item-max-w :layout-item-min-h :layout-item-min-w] + [:layout-item-max-h :layout-item-max-w :layout-item-min-h :layout-item-min-w] + 10) + (tht/apply-token-to-shape :circle-1 + "token-spacing" + [:m1 :m2 :m3 :m4] + [:layout-item-margin] + {:m1 30 :m2 30 :m3 30 :m4 30})) + + page (thf/current-page file) + circle (ths/get-shape file :circle-1) + + ;; ==== Action + + changes (cls/generate-relocate (-> (pcb/empty-changes nil) + (pcb/with-page-id (:id page)) + (pcb/with-objects (:objects page))) + uuid/zero ;; parent-id + 0 ;; to-index + #{(:id circle)}) ;; ids + + + ;; ==== Get + file' (thf/apply-changes file changes) + circle' (ths/get-shape file' :circle-1)] + + ;; ==== Check + + ;; the layout item attributes and tokens are removed + (t/is (empty? (:applied-tokens circle'))) + (t/is (nil? (:layout-item-margin circle'))) + (t/is (nil? (:layout-item-margin-type circle'))) + (t/is (nil? (:layout-item-h-sizing circle'))) + (t/is (nil? (:layout-item-v-sizing circle'))) + (t/is (nil? (:layout-item-max-h circle'))) + (t/is (nil? (:layout-item-min-h circle'))) + (t/is (nil? (:layout-item-max-w circle'))) + (t/is (nil? (:layout-item-min-w circle'))) + (t/is (nil? (:layout-item-absolute circle'))) + (t/is (nil? (:layout-item-z-index circle'))))) \ No newline at end of file diff --git a/common/test/common_tests/logic/token_apply_test.cljc b/common/test/common_tests/logic/token_apply_test.cljc index 02b6fd9d12..fd6f6d7f86 100644 --- a/common/test/common_tests/logic/token_apply_test.cljc +++ b/common/test/common_tests/logic/token_apply_test.cljc @@ -75,8 +75,29 @@ (ctob/make-token :id (thi/new-id! :token-font-family) :name "token-font-family" :type :font-family - :value ["Helvetica" "Arial" "sans-serif"])))) - (tho/add-frame :frame1) + :value ["Helvetica" "Arial" "sans-serif"])) + (ctob/add-token-in-set "test-token-set" + (ctob/make-token :id (thi/new-id! :token-sizing) + :name "token-sizing" + :type :sizing + :value 10)) + (ctob/add-token-in-set "test-token-set" + (ctob/make-token :id (thi/new-id! :token-spacing) + :name "token-spacing" + :type :spacing + :value 30)))) + (tho/add-frame :frame1 + :layout :flex ;; TODO: those values come from main.data.workspace.shape_layout/default-layout-params + :layout-flex-dir :row ;; it should be good to use it directly, but first it should be moved to common.logic + :layout-gap-type :multiple + :layout-gap {:row-gap 0 :column-gap 0} + :layout-align-items :start + :layout-justify-content :start + :layout-align-content :stretch + :layout-wrap-type :nowrap + :layout-padding-type :simple + :layout-padding {:p1 0 :p2 0 :p3 0 :p4 0}) + (ths/add-sample-shape :circle1 :parent-label :frame-1) (tho/add-text :text1 "Hello World!"))) (defn- apply-all-tokens @@ -91,7 +112,17 @@ (tht/apply-token-to-shape :frame1 "token-dimensions" [:width :height] [:width :height] 100) (tht/apply-token-to-shape :text1 "token-font-size" [:font-size] [:font-size] 24) (tht/apply-token-to-shape :text1 "token-letter-spacing" [:letter-spacing] [:letter-spacing] 2) - (tht/apply-token-to-shape :text1 "token-font-family" [:font-family] [:font-family] ["Helvetica" "Arial" "sans-serif"]))) + (tht/apply-token-to-shape :text1 "token-font-family" [:font-family] [:font-family] ["Helvetica" "Arial" "sans-serif"]) + (tht/apply-token-to-shape :circle1 + "token-sizing" + [:layout-item-max-h :layout-item-max-w :layout-item-min-h :layout-item-min-w] + [:layout-item-max-h :layout-item-max-w :layout-item-min-h :layout-item-min-w] + 10) + (tht/apply-token-to-shape :circle1 + "token-spacing" + [:m1 :m2 :m3 :m4] + [:layout-item-margin] + {:m1 30 :m2 30 :m3 30 :m4 30}))) (t/deftest apply-tokens-to-shape (let [;; ==== Setup @@ -99,6 +130,7 @@ page (thf/current-page file) frame1 (ths/get-shape file :frame1) text1 (ths/get-shape file :text1) + circle1 (ths/get-shape file :circle1) token-radius (tht/get-token file "test-token-set" (thi/id :token-radius)) token-rotation (tht/get-token file "test-token-set" (thi/id :token-rotation)) token-opacity (tht/get-token file "test-token-set" (thi/id :token-opacity)) @@ -108,6 +140,8 @@ token-font-size (tht/get-token file "test-token-set" (thi/id :token-font-size)) token-letter-spacing (tht/get-token file "test-token-set" (thi/id :token-letter-spacing)) token-font-family (tht/get-token file "test-token-set" (thi/id :token-font-family)) + token-sizing (tht/get-token file "test-token-set" (thi/id :token-sizing)) + token-spacing (tht/get-token file "test-token-set" (thi/id :token-spacing)) ;; ==== Action changes (-> (-> (pcb/empty-changes nil) @@ -152,33 +186,57 @@ :shape $ :attributes [:font-family]}))) (:objects page) + {}) + (cls/generate-update-shapes [(:id circle1)] + (fn [shape] + (as-> shape $ + (cto/apply-token-to-shape {:token token-sizing + :shape $ + :attributes [:layout-item-max-h :layout-item-max-w :layout-item-min-h :layout-item-min-w]}) + (cto/apply-token-to-shape {:token token-spacing + :shape $ + :attributes [:m1 :m2 :m3 :m4]}))) + (:objects page) {})) file' (thf/apply-changes file changes) ;; ==== Get - frame1' (ths/get-shape file' :frame1) - applied-tokens' (:applied-tokens frame1') - text1' (ths/get-shape file' :text1) - text1-applied-tokens (:applied-tokens text1')] + frame1' (ths/get-shape file' :frame1) + frame1'-applied-tokens (:applied-tokens frame1') + text1' (ths/get-shape file' :text1) + text1'-applied-tokens (:applied-tokens text1') + circle1' (ths/get-shape file' :circle1) + circle1'-applied-tokens (:applied-tokens circle1')] ;; ==== Check - (t/is (= (count applied-tokens') 11)) - (t/is (= (:r1 applied-tokens') "token-radius")) - (t/is (= (:r2 applied-tokens') "token-radius")) - (t/is (= (:r3 applied-tokens') "token-radius")) - (t/is (= (:r4 applied-tokens') "token-radius")) - (t/is (= (:rotation applied-tokens') "token-rotation")) - (t/is (= (:opacity applied-tokens') "token-opacity")) - (t/is (= (:stroke-width applied-tokens') "token-stroke-width")) - (t/is (= (:stroke-color applied-tokens') "token-color")) - (t/is (= (:fill applied-tokens') "token-color")) - (t/is (= (:width applied-tokens') "token-dimensions")) - (t/is (= (:height applied-tokens') "token-dimensions")) - (t/is (= (count text1-applied-tokens) 3)) - (t/is (= (:font-size text1-applied-tokens) "token-font-size")) - (t/is (= (:letter-spacing text1-applied-tokens) "token-letter-spacing")) - (t/is (= (:font-family text1-applied-tokens) "token-font-family")))) + (t/is (= (count frame1'-applied-tokens) 11)) + (t/is (= (:r1 frame1'-applied-tokens) "token-radius")) + (t/is (= (:r2 frame1'-applied-tokens) "token-radius")) + (t/is (= (:r3 frame1'-applied-tokens) "token-radius")) + (t/is (= (:r4 frame1'-applied-tokens) "token-radius")) + (t/is (= (:rotation frame1'-applied-tokens) "token-rotation")) + (t/is (= (:opacity frame1'-applied-tokens) "token-opacity")) + (t/is (= (:stroke-width frame1'-applied-tokens) "token-stroke-width")) + (t/is (= (:stroke-color frame1'-applied-tokens) "token-color")) + (t/is (= (:fill frame1'-applied-tokens) "token-color")) + (t/is (= (:width frame1'-applied-tokens) "token-dimensions")) + (t/is (= (:height frame1'-applied-tokens) "token-dimensions")) + + (t/is (= (count text1'-applied-tokens) 3)) + (t/is (= (:font-size text1'-applied-tokens) "token-font-size")) + (t/is (= (:letter-spacing text1'-applied-tokens) "token-letter-spacing")) + (t/is (= (:font-family text1'-applied-tokens) "token-font-family")) + + (t/is (= (count circle1'-applied-tokens) 8)) + (t/is (= (:layout-item-max-h circle1'-applied-tokens) "token-sizing")) + (t/is (= (:layout-item-min-h circle1'-applied-tokens) "token-sizing")) + (t/is (= (:layout-item-max-w circle1'-applied-tokens) "token-sizing")) + (t/is (= (:layout-item-min-w circle1'-applied-tokens) "token-sizing")) + (t/is (= (:m1 circle1'-applied-tokens) "token-spacing")) + (t/is (= (:m2 circle1'-applied-tokens) "token-spacing")) + (t/is (= (:m3 circle1'-applied-tokens) "token-spacing")) + (t/is (= (:m4 circle1'-applied-tokens) "token-spacing")))) (t/deftest unapply-tokens-from-shape (let [;; ==== Setup @@ -187,6 +245,7 @@ page (thf/current-page file) frame1 (ths/get-shape file :frame1) text1 (ths/get-shape file :text1) + circle1 (ths/get-shape file :circle1) ;; ==== Action changes (-> (-> (pcb/empty-changes nil) @@ -211,19 +270,29 @@ (cto/unapply-token-id [:letter-spacing]) (cto/unapply-token-id [:font-family]))) (:objects page) + {}) + (cls/generate-update-shapes [(:id circle1)] + (fn [shape] + (-> shape + (cto/unapply-token-id [:layout-item-max-h :layout-item-min-h :layout-item-max-w :layout-item-min-w]) + (cto/unapply-token-id [:m1 :m2 :m3 :m4]))) + (:objects page) {})) file' (thf/apply-changes file changes) ;; ==== Get - frame1' (ths/get-shape file' :frame1) - applied-tokens' (:applied-tokens frame1') - text1' (ths/get-shape file' :text1) - text1-applied-tokens (:applied-tokens text1')] + frame1' (ths/get-shape file' :frame1) + frame1'-applied-tokens (:applied-tokens frame1') + text1' (ths/get-shape file' :text1) + text1'-applied-tokens (:applied-tokens text1') + circle1' (ths/get-shape file' :circle1) + circle1'-applied-tokens (:applied-tokens circle1')] ;; ==== Check - (t/is (= (count applied-tokens') 0)) - (t/is (= (count text1-applied-tokens) 0)))) + (t/is (= (count frame1'-applied-tokens) 0)) + (t/is (= (count text1'-applied-tokens) 0)) + (t/is (= (count circle1'-applied-tokens) 0)))) (t/deftest unapply-tokens-automatic (let [;; ==== Setup @@ -232,6 +301,7 @@ page (thf/current-page file) frame1 (ths/get-shape file :frame1) text1 (ths/get-shape file :text1) + circle1 (ths/get-shape file :circle1) ;; ==== Action changes (-> (-> (pcb/empty-changes nil) @@ -263,16 +333,29 @@ :letter-spacing "0" :font-family "Arial"})) (:objects page) + {}) + (cls/generate-update-shapes [(:id circle1)] + (fn [shape] + (-> shape + (ctn/set-shape-attr :layout-item-max-h 0) + (ctn/set-shape-attr :layout-item-min-h 0) + (ctn/set-shape-attr :layout-item-max-w 0) + (ctn/set-shape-attr :layout-item-min-w 0) + (ctn/set-shape-attr :layout-item-margin {}))) + (:objects page) {})) file' (thf/apply-changes file changes) ;; ==== Get - frame1' (ths/get-shape file' :frame1) - text1' (ths/get-shape file' :text1) - applied-tokens-frame' (:applied-tokens frame1') - applied-tokens-text' (:applied-tokens text1')] + frame1' (ths/get-shape file' :frame1) + text1' (ths/get-shape file' :text1) + circle1' (ths/get-shape file' :circle1) + applied-tokens-frame' (:applied-tokens frame1') + applied-tokens-text' (:applied-tokens text1') + applied-tokens-circle' (:applied-tokens circle1')] ;; ==== Check (t/is (= (count applied-tokens-frame') 0)) - (t/is (= (count applied-tokens-text') 0)))) + (t/is (= (count applied-tokens-text') 0)) + (t/is (= (count applied-tokens-circle') 0)))) diff --git a/frontend/playwright/data/workspace/get-file-8371.json b/frontend/playwright/data/workspace/get-file-8371.json new file mode 100644 index 0000000000..f55a886d76 --- /dev/null +++ b/frontend/playwright/data/workspace/get-file-8371.json @@ -0,0 +1,483 @@ +{ + "~:features": { + "~#set": [ + "fdata/path-data", + "plugins/runtime", + "design-tokens/v1", + "variants/v1", + "layout/grid", + "styles/v2", + "fdata/pointer-map", + "fdata/objects-map", + "render-wasm/v1", + "components/v2", + "fdata/shape-data-type" + ] + }, + "~:team-id": "~u9e6e22b2-db76-81d6-8006-75d7cdbb8bad", + "~:permissions": { + "~:type": "~:membership", + "~:is-owner": true, + "~:is-admin": true, + "~:can-edit": true, + "~:can-read": true, + "~:is-logged": true + }, + "~:has-media-trimmed": false, + "~:comment-thread-seqn": 0, + "~:name": "New File 5", + "~:revn": 2, + "~:modified-at": "~m1756907172261", + "~:vern": 0, + "~:id": "~u7ce7750c-3efe-8009-8006-bf390a415df2", + "~:is-shared": false, + "~:migrations": { + "~#ordered-set": [ + "legacy-2", + "legacy-3", + "legacy-5", + "legacy-6", + "legacy-7", + "legacy-8", + "legacy-9", + "legacy-10", + "legacy-11", + "legacy-12", + "legacy-13", + "legacy-14", + "legacy-16", + "legacy-17", + "legacy-18", + "legacy-19", + "legacy-25", + "legacy-26", + "legacy-27", + "legacy-28", + "legacy-29", + "legacy-31", + "legacy-32", + "legacy-33", + "legacy-34", + "legacy-36", + "legacy-37", + "legacy-38", + "legacy-39", + "legacy-40", + "legacy-41", + "legacy-42", + "legacy-43", + "legacy-44", + "legacy-45", + "legacy-46", + "legacy-47", + "legacy-48", + "legacy-49", + "legacy-50", + "legacy-51", + "legacy-52", + "legacy-53", + "legacy-54", + "legacy-55", + "legacy-56", + "legacy-57", + "legacy-59", + "legacy-62", + "legacy-65", + "legacy-66", + "legacy-67", + "0001-remove-tokens-from-groups", + "0002-normalize-bool-content-v2", + "0002-clean-shape-interactions", + "0003-fix-root-shape", + "0003-convert-path-content-v2", + "0004-clean-shadow-color", + "0005-deprecate-image-type", + "0006-fix-old-texts-fills", + "0007-clear-invalid-strokes-and-fills-v2", + "0008-fix-library-colors-v4", + "0009-clean-library-colors", + "0009-add-partial-text-touched-flags" + ] + }, + "~:version": 67, + "~:project-id": "~u9e6e22b2-db76-81d6-8006-75d7cdc30669", + "~:created-at": "~m1756907160854", + "~:data": { + "~:pages": [ + "~u7ce7750c-3efe-8009-8006-bf390a415df3" + ], + "~:pages-index": { + "~u7ce7750c-3efe-8009-8006-bf390a415df3": { + "~:objects": { + "~u00000000-0000-0000-0000-000000000000": { + "~#shape": { + "~:y": 0, + "~:hide-fill-on-export": false, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:name": "Root Frame", + "~:width": 0.01, + "~:type": "~:frame", + "~:points": [ + { + "~#point": { + "~:x": 0.0, + "~:y": 0.0 + } + }, + { + "~#point": { + "~:x": 0.01, + "~:y": 0.0 + } + }, + { + "~#point": { + "~:x": 0.01, + "~:y": 0.01 + } + }, + { + "~#point": { + "~:x": 0.0, + "~:y": 0.01 + } + } + ], + "~:r2": 0, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:id": "~u00000000-0000-0000-0000-000000000000", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [], + "~:x": 0, + "~:proportion": 1.0, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 0, + "~:y": 0, + "~:width": 0.01, + "~:height": 0.01, + "~:x1": 0, + "~:y1": 0, + "~:x2": 0.01, + "~:y2": 0.01 + } + }, + "~:fills": [ + { + "~:fill-color": "#FFFFFF", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": 0.01, + "~:flip-y": null, + "~:shapes": [ + "~u40c555bd-1810-809a-8006-bf3912728203" + ] + } + }, + "~u40c555bd-1810-809a-8006-bf390bd6383b": { + "~#shape": { + "~:y": 236, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:name": "Rectangle", + "~:width": 87, + "~:type": "~:rect", + "~:points": [ + { + "~#point": { + "~:x": 439, + "~:y": 236 + } + }, + { + "~#point": { + "~:x": 526, + "~:y": 236 + } + }, + { + "~#point": { + "~:x": 526, + "~:y": 299 + } + }, + { + "~#point": { + "~:x": 439, + "~:y": 299 + } + } + ], + "~:r2": 0, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:id": "~u40c555bd-1810-809a-8006-bf390bd6383b", + "~:parent-id": "~u40c555bd-1810-809a-8006-bf3912728203", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [], + "~:x": 439, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 439, + "~:y": 236, + "~:width": 87, + "~:height": 63, + "~:x1": 439, + "~:y1": 236, + "~:x2": 526, + "~:y2": 299 + } + }, + "~:fills": [ + { + "~:fill-color": "#B1B2B5", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": 63, + "~:flip-y": null + } + }, + "~u40c555bd-1810-809a-8006-bf390cffa1cc": { + "~#shape": { + "~:y": 268, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:name": "Rectangle", + "~:width": 87, + "~:type": "~:rect", + "~:points": [ + { + "~#point": { + "~:x": 483, + "~:y": 268 + } + }, + { + "~#point": { + "~:x": 570, + "~:y": 268 + } + }, + { + "~#point": { + "~:x": 570, + "~:y": 331 + } + }, + { + "~#point": { + "~:x": 483, + "~:y": 331 + } + } + ], + "~:r2": 0, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:id": "~u40c555bd-1810-809a-8006-bf390cffa1cc", + "~:parent-id": "~u40c555bd-1810-809a-8006-bf3912728203", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [], + "~:x": 483, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 483, + "~:y": 268, + "~:width": 87, + "~:height": 63, + "~:x1": 483, + "~:y1": 268, + "~:x2": 570, + "~:y2": 331 + } + }, + "~:fills": [ + { + "~:fill-color": "#B1B2B5", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": 63, + "~:flip-y": null + } + }, + "~u40c555bd-1810-809a-8006-bf3912728203": { + "~#shape": { + "~:y": null, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:bool-type": "~:union", + "~:content": { + "~#penpot/path-data": "~bAQAAAAAAAAAAAAAAAAAAAAAAAAAAgPFDAICVQwIAAAAAAAAAAAAAAAAAAAAAAAAAAIDbQwCAlUMCAAAAAAAAAAAAAAAAAAAAAAAAAACA20MAAGxDAgAAAAAAAAAAAAAAAAAAAAAAAAAAgANEAABsQwIAAAAAAAAAAAAAAAAAAAAAAAAAAIADRAAAhkMCAAAAAAAAAAAAAAAAAAAAAAAAAACADkQAAIZDAgAAAAAAAAAAAAAAAAAAAAAAAAAAgA5EAIClQwIAAAAAAAAAAAAAAAAAAAAAAAAAAIDxQwCApUMCAAAAAAAAAAAAAAAAAAAAAAAAAACA8UMAgJVD" + }, + "~:name": "Union", + "~:width": null, + "~:type": "~:bool", + "~:points": [ + { + "~#point": { + "~:x": 439, + "~:y": 236 + } + }, + { + "~#point": { + "~:x": 570, + "~:y": 236 + } + }, + { + "~#point": { + "~:x": 570, + "~:y": 331 + } + }, + { + "~#point": { + "~:x": 439, + "~:y": 331 + } + } + ], + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:id": "~u40c555bd-1810-809a-8006-bf3912728203", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [], + "~:x": null, + "~:proportion": 1, + "~:selrect": { + "~#rect": { + "~:x": 439, + "~:y": 236, + "~:width": 131, + "~:height": 95, + "~:x1": 439, + "~:y1": 236, + "~:x2": 570, + "~:y2": 331 + } + }, + "~:fills": [ + { + "~:fill-color": "#B1B2B5", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": null, + "~:flip-y": null, + "~:shapes": [ + "~u40c555bd-1810-809a-8006-bf390bd6383b", + "~u40c555bd-1810-809a-8006-bf390cffa1cc" + ] + } + } + }, + "~:id": "~u7ce7750c-3efe-8009-8006-bf390a415df3", + "~:name": "Page 1" + } + }, + "~:id": "~u7ce7750c-3efe-8009-8006-bf390a415df2", + "~:options": { + "~:components-v2": true, + "~:base-font-size": "16px" + } + } +} \ No newline at end of file diff --git a/frontend/playwright/ui/pages/OnboardingPage.js b/frontend/playwright/ui/pages/OnboardingPage.js index 3ba9f3097f..bbf59bbab6 100644 --- a/frontend/playwright/ui/pages/OnboardingPage.js +++ b/frontend/playwright/ui/pages/OnboardingPage.js @@ -9,7 +9,7 @@ export class OnboardingPage extends BaseWebSocketPage { async fillOnboardingInputsStep1() { await this.page.getByText("Personal").click(); await this.page.getByText("Select option").click(); - await this.page.getByText("Product Managment").click(); + await this.page.getByText("Product Management").click(); await this.submitButton.click(); } diff --git a/frontend/playwright/ui/pages/WorkspacePage.js b/frontend/playwright/ui/pages/WorkspacePage.js index 5afc536b9a..fab32b8d9c 100644 --- a/frontend/playwright/ui/pages/WorkspacePage.js +++ b/frontend/playwright/ui/pages/WorkspacePage.js @@ -109,6 +109,7 @@ export class WorkspacePage extends BaseWebSocketPage { this.tokenContextMenuForSet = page.getByTestId( "tokens-context-menu-for-set", ); + this.contextMenuForShape = page.getByTestId("context-menu"); } async goToWorkspace({ diff --git a/frontend/playwright/ui/specs/workspace.spec.js b/frontend/playwright/ui/specs/workspace.spec.js index 82a42de14b..107ea3189b 100644 --- a/frontend/playwright/ui/specs/workspace.spec.js +++ b/frontend/playwright/ui/specs/workspace.spec.js @@ -440,3 +440,31 @@ test("Bug 9877, user navigation to dashboard from header goes to blank page", as /&project-id=c7ce0794-0992-8105-8004-38e630f7920b/, ); }); + +test("Bug 8371 - Flatten option is not visible in context menu", async ({ + page, +}) => { + const workspacePage = new WorkspacePage(page); + await workspacePage.setupEmptyFile(page); + await workspacePage.mockGetFile("workspace/get-file-8371.json"); + await workspacePage.goToWorkspace({ + fileId: "7ce7750c-3efe-8009-8006-bf390a415df2", + pageId: "7ce7750c-3efe-8009-8006-bf390a415df3", + }); + + const shape = workspacePage.page.locator( + `[id="shape-40c555bd-1810-809a-8006-bf3912728203"]`, + ); + + await workspacePage.clickLeafLayer("Union"); + await workspacePage.page + .locator(".viewport-selrect") + .click({ button: "right" }); + await expect(workspacePage.contextMenuForShape).toBeVisible(); + await expect( + workspacePage.contextMenuForShape + .getByText("Flatten") + // there are hidden elements in the context menu (in submenus) with "Flatten" text + .filter({ visible: true }), + ).toBeVisible(); +}); diff --git a/frontend/src/app/main/data/dashboard.cljs b/frontend/src/app/main/data/dashboard.cljs index 23625cb41d..11da2135a0 100644 --- a/frontend/src/app/main/data/dashboard.cljs +++ b/frontend/src/app/main/data/dashboard.cljs @@ -438,8 +438,14 @@ ptk/WatchEvent (watch [_ _ _] (let [params {:id id :is-shared is-shared}] - (->> (rp/cmd! :set-file-shared params) - (rx/ignore)))))) + (rx/concat + (->> (rp/cmd! :set-file-shared params) + (rx/ignore)) + (when is-shared + (->> (rp/cmd! :get-file-summary {:id id}) + (rx/map (fn [summary] + (when (pos? (:variants-count summary)) + (ptk/event ::ev/event {::ev/name "set-file-variants-shared" ::ev/origin "dashboard"}))))))))))) (defn set-file-thumbnail [file-id thumbnail-id] diff --git a/frontend/src/app/main/data/workspace.cljs b/frontend/src/app/main/data/workspace.cljs index cc418bd536..cf4921a8ce 100644 --- a/frontend/src/app/main/data/workspace.cljs +++ b/frontend/src/app/main/data/workspace.cljs @@ -768,7 +768,7 @@ (empty? selected) false (> (count selected) 1) true :else - (not= uuid/zero (:parent-id (get objects (first selected)))))) + (not= uuid/zero (:parent-id (get objects (:id (first selected))))))) (defn align-object-to-parent [objects object-id axis] diff --git a/frontend/src/app/main/data/workspace/clipboard.cljs b/frontend/src/app/main/data/workspace/clipboard.cljs index 9cc7a10ce1..55ae0b371e 100644 --- a/frontend/src/app/main/data/workspace/clipboard.cljs +++ b/frontend/src/app/main/data/workspace/clipboard.cljs @@ -121,6 +121,8 @@ ;; Collects all the items together and split images into a ;; separated data structure for a more easy paste process. ;; Also collects the variant properties of the copied variants + + (collect-data [state result {:keys [id ::images] :as item}] (cond-> result :always @@ -132,8 +134,6 @@ (ctc/is-variant-container? item) (update :variant-properties merge (collect-variants state item)))) - - (maybe-translate [shape objects parent-frame-id] (if (= parent-frame-id uuid/zero) shape @@ -829,7 +829,6 @@ variant-props (:variant-properties pdata) - position (deref ms/mouse-position) ;; Calculate position for the pasted elements @@ -895,7 +894,11 @@ (rx/map (fn [shape] (let [parent-type (cfh/get-shape-type all-objects (:parent-id shape)) external-lib? (not= file-id (:component-file shape)) - origin "workspace:paste"] + component (ctn/get-component-from-shape shape libraries) + origin "workspace:paste" + any-parent-is-variant (->> (cfh/get-parents-with-self all-objects (:parent-id shape)) + (some ctc/is-variant?) + boolean)] ;; NOTE: we don't emit the create-shape event all the time for ;; avoid send a lot of events (that are not necessary); this @@ -905,7 +908,9 @@ ::ev/origin origin :is-external-library external-lib? :type (get shape :type) - :parent-type parent-type}) + :parent-type parent-type + :is-variant (ctc/is-variant? component) + :any-parent-is-variant any-parent-is-variant}) (if (cfh/has-layout? objects (:parent-id shape)) (ev/event {::ev/name "layout-add-element" ::ev/origin origin diff --git a/frontend/src/app/main/data/workspace/libraries.cljs b/frontend/src/app/main/data/workspace/libraries.cljs index f1a2c10e41..e642763f16 100644 --- a/frontend/src/app/main/data/workspace/libraries.cljs +++ b/frontend/src/app/main/data/workspace/libraries.cljs @@ -549,7 +549,6 @@ (when local? (ptk/data-event :layout/update {:page-id page-id :ids frames}))))))) - (defn restore-components "Restore multiple deleted component definded by a map with the component id as key and the component library as value" [components-data] @@ -592,6 +591,10 @@ position page libraries) + component (ctn/get-component-from-shape new-shape libraries) + any-parent-is-variant (->> (cfh/get-parents-with-self objects (:parent-id new-shape)) + (some ctk/is-variant?) + boolean) undo-id (js/Symbol)] @@ -601,7 +604,9 @@ (rx/of (ptk/event ::ev/event {::ev/name "use-library-component" ::ev/origin origin - :external-library (not= file-id current-file-id)}) + :external-library (not= file-id current-file-id) + :is-variant (ctk/is-variant? component) + :any-parent-is-variant any-parent-is-variant}) (dwu/start-undo-transaction undo-id) (dch/commit-changes changes) (ptk/data-event :layout/update {:ids [(:id new-shape)]}) @@ -704,7 +709,6 @@ data (dsh/lookup-file-data state) objects (dsh/lookup-page-objects state current-page-id) - select-and-zoom (fn [ids] (let [parent-ids (when update-layout? @@ -1158,6 +1162,7 @@ ;; FIXME: the data should be set on the backend for clock consistency + (def ignore-sync "Mark the file as ignore syncs. All library changes before this moment will not ber notified to sync." @@ -1226,7 +1231,6 @@ :callback do-update} :tag :sync-dialog))))))) - (defn touch-component "Update the modified-at attribute of the component to now" [id] @@ -1364,10 +1368,19 @@ (update-in state [:files id] assoc :is-shared is-shared)) ptk/WatchEvent - (watch [_ _ _] - (let [params {:id id :is-shared is-shared}] - (->> (rp/cmd! :set-file-shared params) - (rx/ignore)))))) + (watch [_ state _] + (let [params {:id id :is-shared is-shared}] + (rx/concat + (->> (rp/cmd! :set-file-shared params) + (rx/ignore)) + (when is-shared + (let [has-variants? (->> (dsh/lookup-file-data state) + :components + vals + (some ctk/is-variant?))] + (if has-variants? + (rx/of (ptk/event ::ev/event {::ev/name "set-file-variants-shared" ::ev/origin "workspace"})) + (rx/empty))))))))) ;; --- Link and unlink Files @@ -1395,7 +1408,10 @@ ptk/WatchEvent (watch [_ state _] - (let [features (get state :features)] + (let [libraries (:shared-files state) + library (get libraries library-id) + features (get state :features) + variants-count (-> library :library-summary :components :variants-count)] (rx/concat (rx/merge (->> (rp/cmd! :link-file-to-library {:file-id file-id :library-id library-id}) @@ -1412,7 +1428,15 @@ (rx/map (fn [thumbnails] (fn [state] (update state :thumbnails merge thumbnails)))))) - (rx/of (ptk/reify ::attach-library-finished))))))) + (rx/of (ptk/reify ::attach-library-finished)) + (when (pos? variants-count) + (->> (rp/cmd! :get-library-usage {:file-id library-id}) + (rx/map (fn [library-usage] + (ptk/event ::ev/event {::ev/name "attach-library-variants" + :file-id file-id + :library-id library-id + :variants-count variants-count + :library-used-in (:used-in library-usage)})))))))))) (defn unlink-file-from-library [file-id library-id] diff --git a/frontend/src/app/main/data/workspace/selection.cljs b/frontend/src/app/main/data/workspace/selection.cljs index 531720fa78..11a00dae61 100644 --- a/frontend/src/app/main/data/workspace/selection.cljs +++ b/frontend/src/app/main/data/workspace/selection.cljs @@ -16,6 +16,7 @@ [app.common.geom.shapes :as gsh] [app.common.logic.libraries :as cll] [app.common.types.component :as ctk] + [app.common.types.container :as ctn] [app.common.uuid :as uuid] [app.main.data.changes :as dch] [app.main.data.event :as ev] @@ -484,7 +485,12 @@ (let [shape (get objects shape-id) parent-type (cfh/get-shape-type objects (:parent-id shape)) external-lib? (not= file-id (:component-file shape)) - origin "workspace:duplicate-shapes"] + component (ctn/get-component-from-shape shape libraries) + origin "workspace:duplicate-shapes" + + any-parent-is-variant (->> (cfh/get-parents-with-self objects (:parent-id shape)) + (some ctk/is-variant?) + boolean)] ;; NOTE: we don't emit the create-shape event all the time for ;; avoid send a lot of events (that are not necessary); this @@ -494,7 +500,9 @@ ::ev/origin origin :is-external-library external-lib? :type (get shape :type) - :parent-type parent-type}) + :parent-type parent-type + :is-variant (ctk/is-variant? component) + :any-parent-is-variant any-parent-is-variant}) (if (cfh/has-layout? objects (:parent-id shape)) (ev/event {::ev/name "layout-add-element" ::ev/origin origin @@ -555,10 +563,10 @@ (assoc :workspace-focus-selected focus)))))) (defn toggle-focus-mode - "Zoom in on and center viewport on selection; + "Zoom in on and center viewport on selection; hide all other layers in viewport and layer panel. - When in focus mode, exit restoring previous viewport and selection. + When in focus mode, exit restoring previous viewport and selection. " [] (ptk/reify ::toggle-focus-mode @@ -597,7 +605,7 @@ (rx/map (comp set keys)) (rx/buffer 2 1) (rx/merge-map - ;; While focus is active, update it with any new and deleted shapes + ;; While focus is active, update it with any new and deleted shapes (fn [[old-keys new-keys]] (let [removed (set/difference old-keys new-keys) added (set/difference new-keys old-keys)] diff --git a/frontend/src/app/main/data/workspace/tokens/application.cljs b/frontend/src/app/main/data/workspace/tokens/application.cljs index 3deffead5f..fc384e7ee0 100644 --- a/frontend/src/app/main/data/workspace/tokens/application.cljs +++ b/frontend/src/app/main/data/workspace/tokens/application.cljs @@ -8,6 +8,7 @@ (:require [app.common.data :as d] [app.common.files.tokens :as cft] + [app.common.types.component :as ctk] [app.common.types.shape.layout :as ctsl] [app.common.types.shape.radius :as ctsr] [app.common.types.shape.token :as ctst] @@ -481,14 +482,14 @@ objects (dsh/lookup-page-objects state) selected-shapes (select-keys objects shape-ids) - shape-ids (or (->> selected-shapes - (filter (fn [[_ shape]] - (or - (and (ctsl/any-layout-immediate-child? objects shape) - (some ctt/spacing-margin-keys attributes)) - (ctt/any-appliable-attr? attributes (:type shape))))) - (keys)) - []) + shapes (->> selected-shapes + (filter (fn [[_ shape]] + (or + (and (ctsl/any-layout-immediate-child? objects shape) + (some ctt/spacing-margin-keys attributes)) + (ctt/any-appliable-attr? attributes (:type shape)))))) + shape-ids (d/nilv (keys shapes) []) + any-variant? (->> shapes (some ctk/is-variant?) boolean) resolved-value (get-in resolved-tokens [(cft/token-identifier token) :resolved-value]) tokenized-attributes (cft/attributes-map attributes token) @@ -497,7 +498,8 @@ (rx/of (st/emit! (ev/event {::ev/name "apply-tokens" :type type - :applyed-to attributes})) + :applyed-to attributes + :applied-to-variant any-variant?})) (dwu/start-undo-transaction undo-id) (dwsh/update-shapes shape-ids (fn [shape] (cond-> shape diff --git a/frontend/src/app/main/data/workspace/variants.cljs b/frontend/src/app/main/data/workspace/variants.cljs index 7861582c5f..49bfa2dacf 100644 --- a/frontend/src/app/main/data/workspace/variants.cljs +++ b/frontend/src/app/main/data/workspace/variants.cljs @@ -21,6 +21,7 @@ [app.common.uuid :as uuid] [app.main.data.changes :as dch] [app.main.data.common :as dcm] + [app.main.data.event :as ev] [app.main.data.helpers :as dsh] [app.main.data.workspace.colors :as cl] [app.main.data.workspace.libraries :as dwl] @@ -85,6 +86,10 @@ undo-id (js/Symbol)] (rx/of + (when (or (seq properties-to-remove) (seq properties-to-update)) + (ptk/event ::ev/event {::ev/name "variant-edit-property-value" :trigger "rename-in-layers"})) + (when (seq properties-to-add) + (ptk/event ::ev/event {::ev/name "variant-add-property" :trigger "rename-in-layers"})) (dwu/start-undo-transaction undo-id) (dch/commit-changes changes) (dwu/commit-undo-transaction undo-id)))))) @@ -132,7 +137,6 @@ (dch/commit-changes changes) (dwu/commit-undo-transaction undo-id)))))) - (defn update-error "Sets or unsets an error for a component" ([component-id] @@ -156,7 +160,6 @@ (dch/commit-changes changes) (dwu/commit-undo-transaction undo-id))))))) - (defn remove-property "Remove the variant property on the position pos in all the components with this variant-id" @@ -180,7 +183,6 @@ (dch/commit-changes changes) (dwu/commit-undo-transaction undo-id)))))) - (defn remove-empty-properties "Remove every empty property for all components when their respective values are empty for all of them" @@ -221,11 +223,12 @@ undo-id (js/Symbol)] - (rx/of - (dwu/start-undo-transaction undo-id) - (dch/commit-changes changes) - (dwu/commit-undo-transaction undo-id)))))) - + (when (seq (:redo-changes changes)) + (rx/of + (ptk/event ::ev/event {::ev/name "variant-remove-property" :trigger "rename-in-layers"}) + (dwu/start-undo-transaction undo-id) + (dch/commit-changes changes) + (dwu/commit-undo-transaction undo-id))))))) (defn add-new-property "Add a new variant property to all the components with this variant-id" @@ -273,7 +276,6 @@ (effect [_ _ _] (dom/focus! (dom/get-element (str "variant-prop-" shape-id prop-num)))))) - (defn- resposition-and-resize-variant "Resize the variant container, and move the shape (that is a variant) to the right" [shape-id] @@ -292,51 +294,54 @@ {:x x} {:absolute? false})))))) - (defn add-new-variant "Create a new variant and add it to the variant-container" - [shape-id] - (ptk/reify ::add-new-variant - ptk/WatchEvent - (watch [it state _] - (let [page-id (:current-page-id state) - data (dsh/lookup-file-data state) - objects (-> (dsh/get-page data page-id) - (get :objects)) - shape (get objects shape-id) - shape (if (ctc/is-variant-container? shape) - (get objects (last (:shapes shape))) - shape) - component-id (:component-id shape) - component (ctkl/get-component data component-id) + ([shape-id] + (add-new-variant shape-id false)) + ([shape-id multiselect?] + (ptk/reify ::add-new-variant + ptk/WatchEvent + (watch [it state _] + (let [page-id (:current-page-id state) + data (dsh/lookup-file-data state) + objects (-> (dsh/get-page data page-id) + (get :objects)) + shape (get objects shape-id) + shape (if (ctc/is-variant-container? shape) + (get objects (last (:shapes shape))) + shape) + component-id (:component-id shape) + component (ctkl/get-component data component-id) - container-id (:parent-id shape) - variant-container (get objects container-id) - has-layout? (ctsl/any-layout? variant-container) + container-id (:parent-id shape) + variant-container (get objects container-id) + has-layout? (ctsl/any-layout? variant-container) - new-component-id (uuid/next) - new-shape-id (uuid/next) + new-component-id (uuid/next) + new-shape-id (uuid/next) - prop-num (dec (count (:variant-properties component))) + prop-num (dec (count (:variant-properties component))) - changes (-> (pcb/empty-changes it page-id) - (pcb/with-library-data data) - (pcb/with-objects objects) - (pcb/with-page-id page-id) - (clv/generate-add-new-variant shape (:variant-id component) new-component-id new-shape-id prop-num)) + changes (-> (pcb/empty-changes it page-id) + (pcb/with-library-data data) + (pcb/with-objects objects) + (pcb/with-page-id page-id) + (clv/generate-add-new-variant shape (:variant-id component) new-component-id new-shape-id prop-num)) - undo-id (js/Symbol)] - (rx/concat - (rx/of - (dwu/start-undo-transaction undo-id) - (dch/commit-changes changes) - (when-not has-layout? - (resposition-and-resize-variant new-shape-id)) - (dwu/commit-undo-transaction undo-id) - (ptk/data-event :layout/update {:ids [(:parent-id shape)]}) - (dws/select-shape new-shape-id)) - (->> (rx/of (focus-property new-shape-id prop-num)) - (rx/delay 250))))))) + undo-id (js/Symbol)] + (rx/concat + (rx/of + (dwu/start-undo-transaction undo-id) + (dch/commit-changes changes) + (when-not has-layout? + (resposition-and-resize-variant new-shape-id)) + (dwu/commit-undo-transaction undo-id) + (ptk/data-event :layout/update {:ids [(:parent-id shape)]}) + (if multiselect? + (dws/shift-select-shapes new-shape-id) + (dws/select-shape new-shape-id))) + (->> (rx/of (focus-property new-shape-id prop-num)) + (rx/delay 250)))))))) (defn transform-in-variant "Given the id of a main shape of a component, creates a variant structure for @@ -403,6 +408,8 @@ ;;TODO Refactor all called methods in order to be able to ;;generate changes instead of call the events + + (rx/concat (rx/of (dwu/start-undo-transaction undo-id) @@ -458,11 +465,15 @@ undo-id (js/Symbol)] (cond transform-in-variant? - (rx/of (transform-in-variant (:id first-shape))) + (rx/of + (ptk/event ::ev/event {::ev/name "transform-in-variant" :trigger "shortcut"}) + (transform-in-variant (:id first-shape))) add-new-variant? (rx/concat - (rx/of (dwu/start-undo-transaction undo-id)) + (rx/of + (ptk/event ::ev/event {::ev/name "add-new-variant" :trigger "shortcut-create-component"}) + (dwu/start-undo-transaction undo-id)) (rx/from (map add-new-variant selected-ids)) (rx/of (dwu/commit-undo-transaction undo-id))) @@ -482,12 +493,14 @@ undo-id (js/Symbol)] (if add-new-variant? (rx/concat - (rx/of (dwu/start-undo-transaction undo-id)) - (rx/from (map add-new-variant selected-ids)) + (rx/of + (ptk/event ::ev/event {::ev/name "add-new-variant" :trigger "shortcut-duplicate"}) + (dwu/start-undo-transaction undo-id) + (add-new-variant (first selected-ids) false)) + (rx/from (map #(add-new-variant % true) (rest selected-ids))) (rx/of (dwu/commit-undo-transaction undo-id))) (rx/of (dws/duplicate-selected true))))))) - (defn rename-variant "Rename the variant container and all components belonging to this variant" [variant-id name] @@ -511,7 +524,6 @@ variant-components)) (rx/of (dwu/commit-undo-transaction undo-id))))))) - (defn rename-comp-or-variant-and-main "If the component is in a variant, rename the variant. If it is not, rename the component and its main" @@ -526,7 +538,6 @@ (rx/of (rename-variant (:variant-id component) name)) (rx/of (dwl/rename-component-and-main-instance component-id name))))))) - (defn- bounding-rect "Receives a list of frames (with X, y, width and height) and calculates a rect that contains them all" diff --git a/frontend/src/app/main/errors.cljs b/frontend/src/app/main/errors.cljs index 2b9a54d39f..4f2b6009c8 100644 --- a/frontend/src/app/main/errors.cljs +++ b/frontend/src/app/main/errors.cljs @@ -286,7 +286,7 @@ (st/emit! (modal/show {:type :alert :message message :on-accept redirect-to-dashboard}))) (= :max-quote-reached code) - (let [message (tr "errors.max-quote-reached" (:target error))] + (let [message (tr "errors.max-quota-reached" (:target error))] (st/emit! (modal/show {:type :alert :message message}))) (or (= :paste-feature-not-enabled code) diff --git a/frontend/src/app/main/ui/alert.cljs b/frontend/src/app/main/ui/alert.cljs index 8dd9542493..bfcdc958cf 100644 --- a/frontend/src/app/main/ui/alert.cljs +++ b/frontend/src/app/main/ui/alert.cljs @@ -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 "")) diff --git a/frontend/src/app/main/ui/auth.cljs b/frontend/src/app/main/ui/auth.cljs index a39b2b3102..c3542fe84a 100644 --- a/frontend/src/app/main/ui/auth.cljs +++ b/frontend/src/app/main/ui/auth.cljs @@ -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)} diff --git a/frontend/src/app/main/ui/auth/login.cljs b/frontend/src/app/main/ui/auth/login.cljs index 9f20747f17..5f8888da3b 100644 --- a/frontend/src/app/main/ui/auth/login.cljs +++ b/frontend/src/app/main/ui/auth/login.cljs @@ -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)}])])) diff --git a/frontend/src/app/main/ui/comments.cljs b/frontend/src/app/main/ui/comments.cljs index 8b3f34013a..920510610b 100644 --- a/frontend/src/app/main/ui/comments.cljs +++ b/frontend/src/app/main/ui/comments.cljs @@ -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)) diff --git a/frontend/src/app/main/ui/components/context_menu_a11y.cljs b/frontend/src/app/main/ui/components/context_menu_a11y.cljs index 9160863ee6..37f532d25f 100644 --- a/frontend/src/app/main/ui/components/context_menu_a11y.cljs +++ b/frontend/src/app/main/ui/components/context_menu_a11y.cljs @@ -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]])]))))]])]))) diff --git a/frontend/src/app/main/ui/components/copy_button.cljs b/frontend/src/app/main/ui/components/copy_button.cljs index a06e6f9cf5..f9fc01f92f 100644 --- a/frontend/src/app/main/ui/components/copy_button.cljs +++ b/frontend/src/app/main/ui/components/copy_button.cljs @@ -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)]])) diff --git a/frontend/src/app/main/ui/components/editable_label.cljs b/frontend/src/app/main/ui/components/editable_label.cljs index 48c81f48bc..744804a1eb 100644 --- a/frontend/src/app/main/ui/components/editable_label.cljs +++ b/frontend/src/app/main/ui/components/editable_label.cljs @@ -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 diff --git a/frontend/src/app/main/ui/components/editable_select.cljs b/frontend/src/app/main/ui/components/editable_select.cljs index 9c93cb6359..c77f44b88b 100644 --- a/frontend/src/app/main/ui/components/editable_select.cljs +++ b/frontend/src/app/main/ui/components/editable_select.cljs @@ -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]])))]]])) diff --git a/frontend/src/app/main/ui/components/forms.cljs b/frontend/src/app/main/ui/components/forms.cljs index f8f0ea3026..0c7420255f 100644 --- a/frontend/src/app/main/ui/components/forms.cljs +++ b/frontend/src/app/main/ui/components/forms.cljs @@ -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]]])])])) diff --git a/frontend/src/app/main/ui/components/reorder_handler.cljs b/frontend/src/app/main/ui/components/reorder_handler.cljs index a5c773b5dd..1be9272427 100644 --- a/frontend/src/app/main/ui/components/reorder_handler.cljs +++ b/frontend/src/app/main/ui/components/reorder_handler.cljs @@ -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)}] diff --git a/frontend/src/app/main/ui/components/search_bar.cljs b/frontend/src/app/main/ui/components/search_bar.cljs index b8c56a7ea0..aa9fb0dcf7 100644 --- a/frontend/src/app/main/ui/components/search_bar.cljs +++ b/frontend/src/app/main/ui/components/search_bar.cljs @@ -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"}]])]])) diff --git a/frontend/src/app/main/ui/components/select.cljs b/frontend/src/app/main/ui/components/select.cljs index f6ae9e8424..25fd0e8bb3 100644 --- a/frontend/src/app/main/ui/components/select.cljs +++ b/frontend/src/app/main/ui/components/select.cljs @@ -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]])))]]]))) diff --git a/frontend/src/app/main/ui/components/tab_container.cljs b/frontend/src/app/main/ui/components/tab_container.cljs index 0d39e93d81..5896f9d763 100644 --- a/frontend/src/app/main/ui/components/tab_container.cljs +++ b/frontend/src/app/main/ui/components/tab_container.cljs @@ -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) diff --git a/frontend/src/app/main/ui/confirm.cljs b/frontend/src/app/main/ui/confirm.cljs index 9f97146c87..ca8a78aea0 100644 --- a/frontend/src/app/main/ui/confirm.cljs +++ b/frontend/src/app/main/ui/confirm.cljs @@ -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)]])]])] diff --git a/frontend/src/app/main/ui/dashboard/change_owner.cljs b/frontend/src/app/main/ui/dashboard/change_owner.cljs index e112b3ca6c..fc4ae33cc9 100644 --- a/frontend/src/app/main/ui/dashboard/change_owner.cljs +++ b/frontend/src/app/main/ui/dashboard/change_owner.cljs @@ -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)} diff --git a/frontend/src/app/main/ui/dashboard/comments.cljs b/frontend/src/app/main/ui/dashboard/comments.cljs index 5d08caecb9..e432a642c8 100644 --- a/frontend/src/app/main/ui/dashboard/comments.cljs +++ b/frontend/src/app/main/ui/dashboard/comments.cljs @@ -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)} diff --git a/frontend/src/app/main/ui/dashboard/files.cljs b/frontend/src/app/main/ui/dashboard/files.cljs index 89dafd69c6..a92264af07 100644 --- a/frontend/src/app/main/ui/dashboard/files.cljs +++ b/frontend/src/app/main/ui/dashboard/files.cljs @@ -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 diff --git a/frontend/src/app/main/ui/dashboard/fonts.cljs b/frontend/src/app/main/ui/dashboard/fonts.cljs index 833de7d1db..3e1b421cd0 100644 --- a/frontend/src/app/main/ui/dashboard/fonts.cljs +++ b/frontend/src/app/main/ui/dashboard/fonts.cljs @@ -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* diff --git a/frontend/src/app/main/ui/dashboard/grid.cljs b/frontend/src/app/main/ui/dashboard/grid.cljs index 6f8dd68479..1393e48e35 100644 --- a/frontend/src/app/main/ui/dashboard/grid.cljs +++ b/frontend/src/app/main/ui/dashboard/grid.cljs @@ -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)} diff --git a/frontend/src/app/main/ui/dashboard/import.cljs b/frontend/src/app/main/ui/dashboard/import.cljs index 30f94ffb9f..8950aaf93d 100644 --- a/frontend/src/app/main/ui/dashboard/import.cljs +++ b/frontend/src/app/main/ui/dashboard/import.cljs @@ -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?) diff --git a/frontend/src/app/main/ui/dashboard/inline_edition.cljs b/frontend/src/app/main/ui/dashboard/inline_edition.cljs index 7dc80343ae..8ee74fb74e 100644 --- a/frontend/src/app/main/ui/dashboard/inline_edition.cljs +++ b/frontend/src/app/main/ui/dashboard/inline_edition.cljs @@ -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]])) diff --git a/frontend/src/app/main/ui/dashboard/pin_button.cljs b/frontend/src/app/main/ui/dashboard/pin_button.cljs index 14ee57332e..ffa76fb6c3 100644 --- a/frontend/src/app/main/ui/dashboard/pin_button.cljs +++ b/frontend/src/app/main/ui/dashboard/pin_button.cljs @@ -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} diff --git a/frontend/src/app/main/ui/dashboard/placeholder.cljs b/frontend/src/app/main/ui/dashboard/placeholder.cljs index 8d6f369561..bb32d71b5c 100644 --- a/frontend/src/app/main/ui/dashboard/placeholder.cljs +++ b/frontend/src/app/main/ui/dashboard/placeholder.cljs @@ -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* [] diff --git a/frontend/src/app/main/ui/dashboard/projects.cljs b/frontend/src/app/main/ui/dashboard/projects.cljs index 5ca9dd7a6c..e676da5eef 100644 --- a/frontend/src/app/main/ui/dashboard/projects.cljs +++ b/frontend/src/app/main/ui/dashboard/projects.cljs @@ -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] diff --git a/frontend/src/app/main/ui/dashboard/search.cljs b/frontend/src/app/main/ui/dashboard/search.cljs index 76ec19777e..126b038ca8 100644 --- a/frontend/src/app/main/ui/dashboard/search.cljs +++ b/frontend/src/app/main/ui/dashboard/search.cljs @@ -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 diff --git a/frontend/src/app/main/ui/dashboard/sidebar.cljs b/frontend/src/app/main/ui/dashboard/sidebar.cljs index 643cf1d580..d4a071709e 100644 --- a/frontend/src/app/main/ui/dashboard/sidebar.cljs +++ b/frontend/src/app/main/ui/dashboard/sidebar.cljs @@ -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) diff --git a/frontend/src/app/main/ui/dashboard/subscription.cljs b/frontend/src/app/main/ui/dashboard/subscription.cljs index 68d2359cf9..3068f0ba01 100644 --- a/frontend/src/app/main/ui/dashboard/subscription.cljs +++ b/frontend/src/app/main/ui/dashboard/subscription.cljs @@ -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]}] diff --git a/frontend/src/app/main/ui/dashboard/team.cljs b/frontend/src/app/main/ui/dashboard/team.cljs index 75bef98e24..b883736094 100644 --- a/frontend/src/app/main/ui/dashboard/team.cljs +++ b/frontend/src/app/main/ui/dashboard/team.cljs @@ -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] @@ -186,7 +186,7 @@ (and (= :restriction type) (= :max-quote-reached code)) - (swap! error-text (tr "errors.max-quote-reached" (:target error))) + (swap! error-text (tr "errors.max-quota-reached" (:target error))) (or (= :member-is-muted code) (= :email-has-permanent-bounces code) @@ -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] diff --git a/frontend/src/app/main/ui/dashboard/team_form.cljs b/frontend/src/app/main/ui/dashboard/team_form.cljs index f0ec25a358..5f6fdaae90 100644 --- a/frontend/src/app/main/ui/dashboard/team_form.cljs +++ b/frontend/src/app/main/ui/dashboard/team_form.cljs @@ -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" diff --git a/frontend/src/app/main/ui/dashboard/templates.cljs b/frontend/src/app/main/ui/dashboard/templates.cljs index 10d44e9e33..ece2e146cf 100644 --- a/frontend/src/app/main/ui/dashboard/templates.cljs +++ b/frontend/src/app/main/ui/dashboard/templates.cljs @@ -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)) diff --git a/frontend/src/app/main/ui/debug/icons_preview.cljs b/frontend/src/app/main/ui/debug/icons_preview.cljs index 9380dc8726..03c7bd0d99 100644 --- a/frontend/src/app/main/ui/debug/icons_preview.cljs +++ b/frontend/src/app/main/ui/debug/icons_preview.cljs @@ -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] diff --git a/frontend/src/app/main/ui/delete_shared.cljs b/frontend/src/app/main/ui/delete_shared.cljs index 92fc47fad9..43a2a2425b 100644 --- a/frontend/src/app/main/ui/delete_shared.cljs +++ b/frontend/src/app/main/ui/delete_shared.cljs @@ -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 "")) diff --git a/frontend/src/app/main/ui/ds/controls/combobox.cljs b/frontend/src/app/main/ui/ds/controls/combobox.cljs index 0b6bf6ee25..80c77dbeec 100644 --- a/frontend/src/app/main/ui/ds/controls/combobox.cljs +++ b/frontend/src/app/main/ui/ds/controls/combobox.cljs @@ -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) diff --git a/frontend/src/app/main/ui/ds/controls/numeric_input.cljs b/frontend/src/app/main/ui/ds/controls/numeric_input.cljs index c78248e145..4c26835576 100644 --- a/frontend/src/app/main/ui/ds/controls/numeric_input.cljs +++ b/frontend/src/app/main/ui/ds/controls/numeric_input.cljs @@ -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 diff --git a/frontend/src/app/main/ui/ds/controls/select.cljs b/frontend/src/app/main/ui/ds/controls/select.cljs index bdc71cdc80..cb1e9ec135 100644 --- a/frontend/src/app/main/ui/ds/controls/select.cljs +++ b/frontend/src/app/main/ui/ds/controls/select.cljs @@ -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 diff --git a/frontend/src/app/main/ui/ds/controls/shared/option.cljs b/frontend/src/app/main/ui/ds/controls/shared/option.cljs index d4cc48f76d..0542268bc1 100644 --- a/frontend/src/app/main/ui/ds/controls/shared/option.cljs +++ b/frontend/src/app/main/ui/ds/controls/shared/option.cljs @@ -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) diff --git a/frontend/src/app/main/ui/ds/controls/shared/options_dropdown.cljs b/frontend/src/app/main/ui/ds/controls/shared/options_dropdown.cljs index 4d6de219e2..3a7bef9cac 100644 --- a/frontend/src/app/main/ui/ds/controls/shared/options_dropdown.cljs +++ b/frontend/src/app/main/ui/ds/controls/shared/options_dropdown.cljs @@ -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) diff --git a/frontend/src/app/main/ui/ds/controls/utilities/token_field.cljs b/frontend/src/app/main/ui/ds/controls/utilities/token_field.cljs index 5b02996bc2..128bcb8397 100644 --- a/frontend/src/app/main/ui/ds/controls/utilities/token_field.cljs +++ b/frontend/src/app/main/ui/ds/controls/utilities/token_field.cljs @@ -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}])])) diff --git a/frontend/src/app/main/ui/ds/foundations/assets/icon.mdx b/frontend/src/app/main/ui/ds/foundations/assets/icon.mdx index 091accbfa1..d13baee6e3 100644 --- a/frontend/src/app/main/ui/ds/foundations/assets/icon.mdx +++ b/frontend/src/app/main/ui/ds/foundations/assets/icon.mdx @@ -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 `` 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 diff --git a/frontend/src/app/main/ui/ds/notifications/shared/notification_pill.cljs b/frontend/src/app/main/ui/ds/notifications/shared/notification_pill.cljs index 919cc854d3..efa97a9247 100644 --- a/frontend/src/app/main/ui/ds/notifications/shared/notification_pill.cljs +++ b/frontend/src/app/main/ui/ds/notifications/shared/notification_pill.cljs @@ -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. diff --git a/frontend/src/app/main/ui/ds/notifications/toast.cljs b/frontend/src/app/main/ui/ds/notifications/toast.cljs index 3c2e76eee9..f83dbd5fd6 100644 --- a/frontend/src/app/main/ui/ds/notifications/toast.cljs +++ b/frontend/src/app/main/ui/ds/notifications/toast.cljs @@ -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}]]])) diff --git a/frontend/src/app/main/ui/ds/product/milestone.cljs b/frontend/src/app/main/ui/ds/product/milestone.cljs index 177acf17c2..4dc1930f0b 100644 --- a/frontend/src/app/main/ui/ds/product/milestone.cljs +++ b/frontend/src/app/main/ui/ds/product/milestone.cljs @@ -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}]]]])) diff --git a/frontend/src/app/main/ui/ds/product/milestone_group.cljs b/frontend/src/app/main/ui/ds/product/milestone_group.cljs index 41a2694108..2b8944d0fd 100644 --- a/frontend/src/app/main/ui/ds/product/milestone_group.cljs +++ b/frontend/src/app/main/ui/ds/product/milestone_group.cljs @@ -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}]]))]])) diff --git a/frontend/src/app/main/ui/exports/assets.cljs b/frontend/src/app/main/ui/exports/assets.cljs index 88f80255f1..6dab22b7f1 100644 --- a/frontend/src/app/main/ui/exports/assets.cljs +++ b/frontend/src/app/main/ui/exports/assets.cljs @@ -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)}])] diff --git a/frontend/src/app/main/ui/exports/files.cljs b/frontend/src/app/main/ui/exports/files.cljs index 92545be009..0dd31cb174 100644 --- a/frontend/src/app/main/ui/exports/files.cljs +++ b/frontend/src/app/main/ui/exports/files.cljs @@ -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"))] diff --git a/frontend/src/app/main/ui/inspect/code.cljs b/frontend/src/app/main/ui/inspect/code.cljs index 7268a120e6..4bff56d439 100644 --- a/frontend/src/app/main/ui/inspect/code.cljs +++ b/frontend/src/app/main/ui/inspect/code.cljs @@ -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) diff --git a/frontend/src/app/main/ui/inspect/exports.cljs b/frontend/src/app/main/ui/inspect/exports.cljs index 60df045988..7240ad59ea 100644 --- a/frontend/src/app/main/ui/inspect/exports.cljs +++ b/frontend/src/app/main/ui/inspect/exports.cljs @@ -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) diff --git a/frontend/src/app/main/ui/inspect/right_sidebar.cljs b/frontend/src/app/main/ui/inspect/right_sidebar.cljs index ff2f1b671e..ab94ede355 100644 --- a/frontend/src/app/main/ui/inspect/right_sidebar.cljs +++ b/frontend/src/app/main/ui/inspect/right_sidebar.cljs @@ -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)} @@ -221,12 +221,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) diff --git a/frontend/src/app/main/ui/inspect/styles/style_box.cljs b/frontend/src/app/main/ui/inspect/styles/style_box.cljs index d72796da53..bc30a65931 100644 --- a/frontend/src/app/main/ui/inspect/styles/style_box.cljs +++ b/frontend/src/app/main/ui/inspect/styles/style_box.cljs @@ -3,7 +3,7 @@ (:require [app.common.data :as d] [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]] [app.util.webapi :as wapi] [rumext.v2 :as mf])) @@ -57,7 +57,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) :id (str "style-box-" (d/name panel))} [:div {:class (stl/css :style-box-panel-wrapper)} children]])])) diff --git a/frontend/src/app/main/ui/notifications/context_notification.cljs b/frontend/src/app/main/ui/notifications/context_notification.cljs index d1bb0dbfc4..50ec3e138a 100644 --- a/frontend/src/app/main/ui/notifications/context_notification.cljs +++ b/frontend/src/app/main/ui/notifications/context_notification.cljs @@ -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] diff --git a/frontend/src/app/main/ui/onboarding/newsletter.cljs b/frontend/src/app/main/ui/onboarding/newsletter.cljs index 62a41d00c0..3f5ee18557 100644 --- a/frontend/src/app/main/ui/onboarding/newsletter.cljs +++ b/frontend/src/app/main/ui/onboarding/newsletter.cljs @@ -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" diff --git a/frontend/src/app/main/ui/onboarding/questions.cljs b/frontend/src/app/main/ui/onboarding/questions.cljs index da576fe4cd..d529456cc1 100644 --- a/frontend/src/app/main/ui/onboarding/questions.cljs +++ b/frontend/src/app/main/ui/onboarding/questions.cljs @@ -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]) diff --git a/frontend/src/app/main/ui/onboarding/team_choice.cljs b/frontend/src/app/main/ui/onboarding/team_choice.cljs index 59933d1847..bb896e49b5 100644 --- a/frontend/src/app/main/ui/onboarding/team_choice.cljs +++ b/frontend/src/app/main/ui/onboarding/team_choice.cljs @@ -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")]]]]) @@ -102,7 +102,7 @@ (and (= :restriction type) (= :max-quote-reached code)) - (swap! error* (tr "errors.max-quote-reached" (:target error))) + (swap! error* (tr "errors.max-quota-reached" (:target error))) (or (= :member-is-muted code) (= :email-has-permanent-bounces code) diff --git a/frontend/src/app/main/ui/onboarding/templates.cljs b/frontend/src/app/main/ui/onboarding/templates.cljs index 07a8e04632..546bc74b0e 100644 --- a/frontend/src/app/main/ui/onboarding/templates.cljs +++ b/frontend/src/app/main/ui/onboarding/templates.cljs @@ -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")] diff --git a/frontend/src/app/main/ui/settings/access_tokens.cljs b/frontend/src/app/main/ui/settings/access_tokens.cljs index 07de421de2..b75f6ef4e1 100644 --- a/frontend/src/app/main/ui/settings/access_tokens.cljs +++ b/frontend/src/app/main/ui/settings/access_tokens.cljs @@ -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)) diff --git a/frontend/src/app/main/ui/settings/change_email.cljs b/frontend/src/app/main/ui/settings/change_email.cljs index b86bdc17a6..1812ec8a65 100644 --- a/frontend/src/app/main/ui/settings/change_email.cljs +++ b/frontend/src/app/main/ui/settings/change_email.cljs @@ -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 diff --git a/frontend/src/app/main/ui/settings/delete_account.cljs b/frontend/src/app/main/ui/settings/delete_account.cljs index 5945c3c178..6f939a6390 100644 --- a/frontend/src/app/main/ui/settings/delete_account.cljs +++ b/frontend/src/app/main/ui/settings/delete_account.cljs @@ -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 diff --git a/frontend/src/app/main/ui/settings/sidebar.cljs b/frontend/src/app/main/ui/settings/sidebar.cljs index ebd2979870..5ebec1e4bc 100644 --- a/frontend/src/app/main/ui/settings/sidebar.cljs +++ b/frontend/src/app/main/ui/settings/sidebar.cljs @@ -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 diff --git a/frontend/src/app/main/ui/settings/subscription.cljs b/frontend/src/app/main/ui/settings/subscription.cljs index 3f0085525c..7f17322928 100644 --- a/frontend/src/app/main/ui/settings/subscription.cljs +++ b/frontend/src/app/main/ui/settings/subscription.cljs @@ -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)] @@ -281,7 +281,7 @@ (ct/format-inst (:created-at profile) "d MMMM, yyyy") subscribed-since - (ct/format-inst (:start-date profile) "d MMMM, yyyy") + (ct/format-inst (:start-date subscription) "d MMMM, yyyy") go-to-pricing-page (mf/use-fn @@ -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") diff --git a/frontend/src/app/main/ui/static.cljs b/frontend/src/app/main/ui/static.cljs index 03db808f87..2f6da79171 100644 --- a/frontend/src/app/main/ui/static.cljs +++ b/frontend/src/app/main/ui/static.cljs @@ -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")]]] diff --git a/frontend/src/app/main/ui/viewer.cljs b/frontend/src/app/main/ui/viewer.cljs index a78ec4f19f..e50e36a042 100644 --- a/frontend/src/app/main/ui/viewer.cljs +++ b/frontend/src/app/main/ui/viewer.cljs @@ -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]]])) diff --git a/frontend/src/app/main/ui/viewer/comments.cljs b/frontend/src/app/main/ui/viewer/comments.cljs index eb112cb293..9646c81f8c 100644 --- a/frontend/src/app/main/ui/viewer/comments.cljs +++ b/frontend/src/app/main/ui/viewer/comments.cljs @@ -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 diff --git a/frontend/src/app/main/ui/viewer/header.cljs b/frontend/src/app/main/ui/viewer/header.cljs index c0b4dee23d..292db767c1 100644 --- a/frontend/src/app/main/ui/viewer/header.cljs +++ b/frontend/src/app/main/ui/viewer/header.cljs @@ -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 diff --git a/frontend/src/app/main/ui/viewer/interactions.cljs b/frontend/src/app/main/ui/viewer/interactions.cljs index c96535b0ee..ae4bec1f1e 100644 --- a/frontend/src/app/main/ui/viewer/interactions.cljs +++ b/frontend/src/app/main/ui/viewer/interactions.cljs @@ -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] diff --git a/frontend/src/app/main/ui/viewer/login.cljs b/frontend/src/app/main/ui/viewer/login.cljs index e179048884..a23a8245d4 100644 --- a/frontend/src/app/main/ui/viewer/login.cljs +++ b/frontend/src/app/main/ui/viewer/login.cljs @@ -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 diff --git a/frontend/src/app/main/ui/viewer/share_link.cljs b/frontend/src/app/main/ui/viewer/share_link.cljs index 1db0b902b0..0a53d77e69 100644 --- a/frontend/src/app/main/ui/viewer/share_link.cljs +++ b/frontend/src/app/main/ui/viewer/share_link.cljs @@ -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"))]) diff --git a/frontend/src/app/main/ui/viewer/thumbnails.cljs b/frontend/src/app/main/ui/viewer/thumbnails.cljs index 3978d83823..62abb6b607 100644 --- a/frontend/src/app/main/ui/viewer/thumbnails.cljs +++ b/frontend/src/app/main/ui/viewer/thumbnails.cljs @@ -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 diff --git a/frontend/src/app/main/ui/workspace/color_palette.cljs b/frontend/src/app/main/ui/workspace/color_palette.cljs index f96ca2579a..7a8dae308c 100644 --- a/frontend/src/app/main/ui/workspace/color_palette.cljs +++ b/frontend/src/app/main/ui/workspace/color_palette.cljs @@ -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} diff --git a/frontend/src/app/main/ui/workspace/color_palette_ctx_menu.cljs b/frontend/src/app/main/ui/workspace/color_palette_ctx_menu.cljs index 4159c06635..a1550df877 100644 --- a/frontend/src/app/main/ui/workspace/color_palette_ctx_menu.cljs +++ b/frontend/src/app/main/ui/workspace/color_palette_ctx_menu.cljs @@ -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"}} diff --git a/frontend/src/app/main/ui/workspace/colorpicker.cljs b/frontend/src/app/main/ui/workspace/colorpicker.cljs index b663d12fd5..dec18b21de 100644 --- a/frontend/src/app/main/ui/workspace/colorpicker.cljs +++ b/frontend/src/app/main/ui/workspace/colorpicker.cljs @@ -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" diff --git a/frontend/src/app/main/ui/workspace/colorpicker/gradients.cljs b/frontend/src/app/main/ui/workspace/colorpicker/gradients.cljs index 1d37da025f..1db83d6c01 100644 --- a/frontend/src/app/main/ui/workspace/colorpicker/gradients.cljs +++ b/frontend/src/app/main/ui/workspace/colorpicker/gradients.cljs @@ -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 {} diff --git a/frontend/src/app/main/ui/workspace/colorpicker/libraries.cljs b/frontend/src/app/main/ui/workspace/colorpicker/libraries.cljs index 6e2329afb2..e565a05754 100644 --- a/frontend/src/app/main/ui/workspace/colorpicker/libraries.cljs +++ b/frontend/src/app/main/ui/workspace/colorpicker/libraries.cljs @@ -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 diff --git a/frontend/src/app/main/ui/workspace/comments.cljs b/frontend/src/app/main/ui/workspace/comments.cljs index b828746a13..f08e5fcbb2 100644 --- a/frontend/src/app/main/ui/workspace/comments.cljs +++ b/frontend/src/app/main/ui/workspace/comments.cljs @@ -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")]])]])) diff --git a/frontend/src/app/main/ui/workspace/context_menu.cljs b/frontend/src/app/main/ui/workspace/context_menu.cljs index 7d7cee43ea..c56291be03 100644 --- a/frontend/src/app/main/ui/workspace/context_menu.cljs +++ b/frontend/src/app/main/ui/workspace/context_menu.cljs @@ -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) @@ -433,7 +433,7 @@ :on-click do-start-editing}]) (when-not (or disable-flatten has-frame? has-path?) - [:> menu-entry* {:title (tr "workspace.shape.menu.transform-to-path") + [:> menu-entry* {:title (tr "workspace.shape.menu.flatten") :on-click do-transform-to-path}]) (when (and (not disable-booleans) @@ -568,6 +568,7 @@ [{:keys [shapes]}] (let [single? (= (count shapes) 1) objects (deref refs/workspace-page-objects) + shapes (keep (d/getf objects) shapes) can-make-component (every? true? (map #(ctn/valid-shape-for-component? objects %) shapes)) heads (filter ctk/instance-head? shapes) components-menu-entries (cmm/generate-components-menu-entries heads) @@ -576,10 +577,14 @@ any-variant? (some ctk/is-variant? shapes) do-add-component (mf/use-fn #(st/emit! (dwl/add-component))) do-add-multiple-components (mf/use-fn #(st/emit! (dwl/add-multiple-components))) - do-combine-as-variants (mf/use-fn #(st/emit! (dwv/combine-as-variants))) + do-combine-as-variants (mf/use-fn #(st/emit! + (ptk/event ::ev/event {::ev/name "combine-as-variants" :trigger "context-menu-component"}) + (dwv/combine-as-variants))) do-add-variant (mf/use-fn (mf/deps shapes) - #(st/emit! (dwv/add-new-variant (:id (first shapes)))))] + #(st/emit! + (ptk/event ::ev/event {::ev/name "add-new-variant" :trigger "context-menu-component"}) + (dwv/add-new-variant (:id (first shapes)))))] [:* (when can-make-component ;; We don't want to change the structure of component copies [:* @@ -631,7 +636,9 @@ ::mf/private true} [{:keys [mdata]}] (let [{:keys [disable-booleans disable-flatten]} mdata - shapes (mf/deref refs/selected-shapes) + objects (deref refs/workspace-page-objects) + shape-ids (mf/deref refs/selected-shapes) + shapes (map (d/getf objects) shape-ids) is-not-variant-container? (->> shapes (d/seek #(not (ctk/is-variant-container? %)))) props (mf/props {:shapes shapes @@ -821,6 +828,7 @@ [:div {:class (stl/css :workspace-context-menu) :ref dropdown-ref :style {:top top :left left} + :data-testid "context-menu" :on-context-menu prevent-default} [:ul {:class (stl/css :context-list)} diff --git a/frontend/src/app/main/ui/workspace/left_header.cljs b/frontend/src/app/main/ui/workspace/left_header.cljs index 44cad87617..914d4ef1a8 100644 --- a/frontend/src/app/main/ui/workspace/left_header.cljs +++ b/frontend/src/app/main/ui/workspace/left_header.cljs @@ -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 diff --git a/frontend/src/app/main/ui/workspace/libraries.cljs b/frontend/src/app/main/ui/workspace/libraries.cljs index 5076695d73..379b98242e 100644 --- a/frontend/src/app/main/ui/workspace/libraries.cljs +++ b/frontend/src/app/main/ui/workspace/libraries.cljs @@ -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)} diff --git a/frontend/src/app/main/ui/workspace/main_menu.cljs b/frontend/src/app/main/ui/workspace/main_menu.cljs index f517bf34a8..e8adccd671 100644 --- a/frontend/src/app/main/ui/workspace/main_menu.cljs +++ b/frontend/src/app/main/ui/workspace/main_menu.cljs @@ -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}]) diff --git a/frontend/src/app/main/ui/workspace/nudge.cljs b/frontend/src/app/main/ui/workspace/nudge.cljs index 34dc804cba..d9589fbfad 100644 --- a/frontend/src/app/main/ui/workspace/nudge.cljs +++ b/frontend/src/app/main/ui/workspace/nudge.cljs @@ -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) diff --git a/frontend/src/app/main/ui/workspace/palette.cljs b/frontend/src/app/main/ui/workspace/palette.cljs index 1dd3dcaae6..d5ad41b724 100644 --- a/frontend/src/app/main/ui/workspace/palette.cljs +++ b/frontend/src/app/main/ui/workspace/palette.cljs @@ -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? diff --git a/frontend/src/app/main/ui/workspace/plugins.cljs b/frontend/src/app/main/ui/workspace/plugins.cljs index ced25ea83f..ccdcd83a3a 100644 --- a/frontend/src/app/main/ui/workspace/plugins.cljs +++ b/frontend/src/app/main/ui/workspace/plugins.cljs @@ -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")]])]) diff --git a/frontend/src/app/main/ui/workspace/right_header.cljs b/frontend/src/app/main/ui/workspace/right_header.cljs index 994876adbb..67391535fa 100644 --- a/frontend/src/app/main/ui/workspace/right_header.cljs +++ b/frontend/src/app/main/ui/workspace/right_header.cljs @@ -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]])) diff --git a/frontend/src/app/main/ui/workspace/sidebar.cljs b/frontend/src/app/main/ui/workspace/sidebar.cljs index 2aa71d9f1c..a6b8e08078 100644 --- a/frontend/src/app/main/ui/workspace/sidebar.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar.cljs @@ -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 diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets.cljs index 25df2103ea..49bbfa9e36 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/assets.cljs @@ -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] diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/colors.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets/colors.cljs index bdba85ef27..25cfffa002 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/colors.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/colors.cljs @@ -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} diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/common.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets/common.cljs index aba00f1c47..2fb9829c1d 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/common.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/common.cljs @@ -17,6 +17,7 @@ [app.common.types.file :as ctf] [app.common.types.variant :as ctv] [app.config :as cf] + [app.main.data.event :as ev] [app.main.data.helpers :as dsh] [app.main.data.modal :as modal] [app.main.data.workspace :as dw] @@ -38,6 +39,7 @@ [app.util.timers :as ts] [cljs.spec.alpha :as s] [cuerdas.core :as str] + [potok.v2.core :as ptk] [rumext.v2 :as mf])) (def assets-filters (mf/create-context nil)) @@ -323,7 +325,7 @@ :is-hidden is-hidden}]))) (defn generate-components-menu-entries - [shapes] + [shapes & {:keys [for-design-tab?]}] (let [multi (> (count shapes) 1) copies (filter ctk/in-component-copy? shapes) @@ -434,12 +436,19 @@ do-add-variant #(if (ctk/is-variant? shape) - (st/emit! (dwv/add-new-variant id)) - (st/emit! (dwv/transform-in-variant id))) + (st/emit! + (ptk/event ::ev/event {::ev/name "add-new-variant" + :trigger (if for-design-tab? "design-tab-menu-variant" "context-menu-variant")}) + (dwv/add-new-variant id)) + (st/emit! + (ptk/event ::ev/event {::ev/name "transform-in-variant" + :trigger (if for-design-tab? "design-tab-menu" "context-menu")}) + (dwv/transform-in-variant id))) do-add-new-property - #(st/emit! (dwv/add-new-property variant-id {:property-value "Value 1" - :editing? true})) + #(st/emit! + (ptk/event ::ev/event {::ev/name "add-new-property" :trigger "design-tab-menu-variant"}) + (dwv/add-new-property variant-id {:property-value "Value 1" :editing? true})) do-show-local-component #(st/emit! (dwl/go-to-local-component :id component-id)) @@ -500,7 +509,7 @@ {:title (tr "workspace.shape.menu.add-variant") :shortcut :create-component :action do-add-variant}) - (when (and same-variant? main-instance? variant-id) + (when (and same-variant? main-instance? variant-id for-design-tab?) {:title (tr "workspace.shape.menu.add-variant-property") :action do-add-new-property})]] (filter (complement nil?) menu-entries))) diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/components.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets/components.cljs index d368e46e33..f0c7b1ed5d 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/components.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/components.cljs @@ -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 @@ -505,7 +505,9 @@ ids (into #{} (map :main-instance-id comps)) page-id (->> comps first :main-instance-page)] - (st/emit! (dwv/combine-as-variants ids {:page-id page-id}))))) + (st/emit! + (ptk/event ::ev/event {::ev/name "combine-as-variants" :trigger "context-menu-assets-group"}) + (dwv/combine-as-variants ids {:page-id page-id}))))) on-drag-start @@ -554,7 +556,9 @@ (let [page-id (->> selected-and-current-full first :main-instance-page) ids (into #{} (map :main-instance-id selected-full))] - (st/emit! (dwv/combine-as-variants ids {:page-id page-id})))))] + (st/emit! + (ptk/event ::ev/event {::ev/name "combine-as-variants" :trigger "context-menu-assets"}) + (dwv/combine-as-variants ids {:page-id page-id})))))] [:& cmm/asset-section {:file-id file-id :title (tr "workspace.assets.components") @@ -567,11 +571,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 +584,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 diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.cljs index 4752785edc..410d14200a 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.cljs @@ -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")]])])])) diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/groups.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets/groups.cljs index ba62c19c3c..5e7a7451d6 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/groups.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/groups.cljs @@ -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} diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/typographies.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets/typographies.cljs index 0ed537853a..75c456edc3 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/typographies.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/typographies.cljs @@ -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 diff --git a/frontend/src/app/main/ui/workspace/sidebar/collapsable_button.cljs b/frontend/src/app/main/ui/workspace/sidebar/collapsable_button.cljs index 074e8e14b0..8d6160c147 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/collapsable_button.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/collapsable_button.cljs @@ -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")}]]]])) diff --git a/frontend/src/app/main/ui/workspace/sidebar/debug.cljs b/frontend/src/app/main/ui/workspace/sidebar/debug.cljs index 27c3fcb7df..ffce84660f 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/debug.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/debug.cljs @@ -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) diff --git a/frontend/src/app/main/ui/workspace/sidebar/debug_shape_info.cljs b/frontend/src/app/main/ui/workspace/sidebar/debug_shape_info.cljs index b82adabff3..4a35c66975 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/debug_shape_info.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/debug_shape_info.cljs @@ -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"] diff --git a/frontend/src/app/main/ui/workspace/sidebar/history.cljs b/frontend/src/app/main/ui/workspace/sidebar/history.cljs index 5af8ccaaa8..8e1e473487 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/history.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/history.cljs @@ -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)] diff --git a/frontend/src/app/main/ui/workspace/sidebar/layer_item.cljs b/frontend/src/app/main/ui/workspace/sidebar/layer_item.cljs index fdf91530ea..ecb85db113 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/layer_item.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/layer_item.cljs @@ -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])) diff --git a/frontend/src/app/main/ui/workspace/sidebar/layers.cljs b/frontend/src/app/main/ui/workspace/sidebar/layers.cljs index 7d41cbd2d3..dcc12bdb65 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/layers.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/layers.cljs @@ -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"))] diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/drawing/frame.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/drawing/frame.cljs index a42ddbdc16..afff809444 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/drawing/frame.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/drawing/frame.cljs @@ -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"}]]])) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/align.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/align.cljs index f0c0778a64..4cf1c6efc4 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/align.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/align.cljs @@ -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]]]))) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.cljs index c8661fbf13..52a5570614 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.cljs @@ -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) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/bool.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/bool.cljs index 5e61e91514..4c1fb0d1b7 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/bool.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/bool.cljs @@ -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) ")") diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/border_radius.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/border_radius.cljs index f41eba18f6..b30ee20cbf 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/border_radius.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/border_radius.cljs @@ -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}]])) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.cljs index cd33a231b2..6cc9da2aa8 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.cljs @@ -7,6 +7,7 @@ (ns app.main.ui.workspace.sidebar.options.menus.component (:require-macros [app.main.style :as stl]) (:require + [app.common.data :as d] [app.common.data.macros :as dm] [app.common.files.helpers :as cfh] @@ -15,8 +16,11 @@ [app.common.types.components-list :as ctkl] [app.common.types.file :as ctf] [app.common.types.variant :as ctv] + [app.common.uuid :as uuid] + [app.main.data.event :as ev] [app.main.data.helpers :as dsh] [app.main.data.modal :as modal] + [app.main.data.notifications :as ntf] [app.main.data.workspace :as dw] [app.main.data.workspace.libraries :as dwl] [app.main.data.workspace.specialized-panel :as dwsp] @@ -32,9 +36,10 @@ [app.main.ui.ds.buttons.icon-button :refer [icon-button*]] [app.main.ui.ds.controls.combobox :refer [combobox*]] [app.main.ui.ds.controls.select :refer [select*]] - [app.main.ui.ds.foundations.assets.icon :as i] + [app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i] [app.main.ui.ds.product.input-with-meta :refer [input-with-meta*]] [app.main.ui.hooks :as h] + [app.main.ui.icons :as deprecated-icon] [app.main.ui.workspace.sidebar.assets.common :as cmm] [app.main.ui.workspace.sidebar.options.menus.variants-help-modal] [app.util.debug :as dbg] @@ -43,6 +48,7 @@ [app.util.timers :as tm] [cuerdas.core :as str] [okulary.core :as l] + [potok.v2.core :as ptk] [rumext.v2 :as mf])) (def ref:annotations-state @@ -186,7 +192,7 @@ [:span {:class (stl/css-case :icon-arrow true :expanded expanded?)} - i/arrow] + deprecated-icon/arrow] [:span {:class (stl/css :annotation-text)} (tr "workspace.options.component.annotation")]]) @@ -204,21 +210,21 @@ :icon true :icon-tick true :invalid invalid-text?)} - i/tick] + deprecated-icon/tick] [:div {:class (stl/css :icon :icon-cross) :title (tr "labels.discard") :on-click on-discard} - i/close]] + deprecated-icon/close]] [:* [:div {:class (stl/css :icon :icon-edit) :title (tr "labels.edit") :on-click on-edit} - i/curve] + deprecated-icon/curve] [:div {:class (stl/css :icon :icon-trash) :title (tr "labels.delete") :on-click on-delete-annotation} - i/delete]]))]] + deprecated-icon/delete]]))]] [:div {:class (stl/css-case :hidden (not expanded?))} [:div {:class (stl/css :grow-wrap)} @@ -235,7 +241,6 @@ (when (or editing? creating?) [:div {:class (stl/css :counter)} (str size "/300")])]]))) - (defn- get-variant-malformed-warning-message "Receive a list of booleans, one for each selected variant, indicating if that variant is malformed, and generate a warning message accordingly" @@ -252,7 +257,6 @@ :else nil)) - (defn- get-variant-duplicated-warning-message "Receive a list of booleans, one for each selected variant, indicating if that variant is duplicated, and generate a warning message accordingly" @@ -269,7 +273,6 @@ :else nil)) - (defn- get-components-with-duplicated-variant-props-and-values "Get a list of components whose property names and values are duplicated" [components] @@ -289,7 +292,6 @@ get-components-with-duplicated-variant-props-and-values (map :main-instance-id))) - (defn- get-variant-options "Get variant options for a given property name" [prop-name prop-vals] @@ -299,7 +301,6 @@ (mapv (fn [val] {:id val :label (if (str/blank? val) (str "(" (tr "labels.empty") ")") val)})))) - (mf/defc component-variant-main-instance* [{:keys [components shapes data]}] (let [component (first components) @@ -341,7 +342,9 @@ (fn [pos value] (let [value (d/nilv (str/trim value) "")] (doseq [id component-ids] - (st/emit! (dwv/update-property-value id pos value)) + (st/emit! + (ptk/event ::ev/event {::ev/name "variant-edit-property-value" :trigger "combo-design-tab"}) + (dwv/update-property-value id pos value)) (st/emit! (dwv/update-error id)))))) update-property-name @@ -353,7 +356,9 @@ (dom/get-data "position") int)] (when (seq value) - (st/emit! (dwv/update-property-name variant-id pos value))))))] + (st/emit! + (ptk/event ::ev/event {::ev/name "variant-edit-property-name" :trigger "design-tab-variant"}) + (dwv/update-property-name variant-id pos value))))))] [:* [:div {:class (stl/css :variant-property-list)} @@ -380,8 +385,8 @@ (if malformed-msg [:div {:class (stl/css :variant-warning-wrapper)} - [:> i/icon* {:icon-id i/msg-neutral - :class (stl/css :variant-warning-darken)}] + [:> icon* {:icon-id i/msg-neutral + :class (stl/css :variant-warning-darken)}] [:div {:class (stl/css :variant-warning-highlight)} (str malformed-msg " " (tr "workspace.options.component.variant.malformed.structure.title"))] [:div {:class (stl/css :variant-warning-darken)} @@ -389,15 +394,15 @@ (when duplicated-msg [:div {:class (stl/css :variant-warning-wrapper)} - [:> i/icon* {:icon-id i/msg-neutral - :class (stl/css :variant-warning-darken)}] + [:> icon* {:icon-id i/msg-neutral + :class (stl/css :variant-warning-darken)}] [:div {:class (stl/css :variant-warning-highlight)} (str duplicated-msg)]]))])) - (mf/defc component-variant-copy* [{:keys [component shape data current-file-id]}] - (let [component-id (:id component) + (let [page-objects (mf/deref refs/workspace-page-objects) + component-id (:id component) properties (:variant-properties component) variant-id (:variant-id component) objects (-> (dsh/get-page data (:main-instance-page component)) @@ -444,6 +449,10 @@ (st/emit! (dwl/go-to-local-component :id (first ids) :additional-ids (rest ids))) (st/emit! (dwl/go-to-component-file (:component-file shape) (first malformed-comps) false)))))) + ;; Used to force a remount after an error + key* (mf/use-state (uuid/next)) + key (deref key*) + switch-component (mf/use-fn (mf/deps shape component component-id variant-comps) @@ -455,9 +464,17 @@ (remove #(= (:id %) component-id)) (filter #(= (dm/get-in % [:variant-properties pos :value]) val)) (reverse)) - nearest-comp (apply min-key #(ctv/distance target-props (:variant-properties %)) valid-comps)] + nearest-comp (apply min-key #(ctv/distance target-props (:variant-properties %)) valid-comps) + parents (cfh/get-parents-with-self page-objects (:parent-id shape)) + children (cfh/get-children-with-self objects (:main-instance-id nearest-comp)) + comps-nesting-loop? (seq? (cfh/components-nesting-loop? children parents))] + (when nearest-comp - (st/emit! (dwl/component-swap shape (:component-file shape) (:id nearest-comp) true)))))))] + (if comps-nesting-loop? + (do + (st/emit! (ntf/error (tr "workspace.component.swap.loop-error"))) + (reset! key* (uuid/next))) + (st/emit! (dwl/component-swap shape (:component-file shape) (:id nearest-comp) true))))))))] [:* [:div {:class (stl/css :variant-property-list)} @@ -474,12 +491,13 @@ [:> select* {:default-selected (:value prop) :options (get-options (:name prop)) :empty-to-end true - :on-change (partial switch-component pos)}]]])] + :on-change (partial switch-component pos) + :key (str (:value prop) "-" key)}]]])] (if (seq malformed-comps) [:div {:class (stl/css :variant-warning-wrapper)} - [:> i/icon* {:icon-id i/msg-neutral - :class (stl/css :variant-warning-darken)}] + [:> icon* {:icon-id i/msg-neutral + :class (stl/css :variant-warning-darken)}] [:div {:class (stl/css :variant-warning-highlight)} (tr "workspace.options.component.variant.malformed.copy")] [:button {:class (stl/css :variant-warning-button) @@ -488,15 +506,14 @@ (when (seq duplicated-comps) [:div {:class (stl/css :variant-warning-wrapper)} - [:> i/icon* {:icon-id i/msg-neutral - :class (stl/css :variant-warning-darken)}] + [:> icon* {:icon-id i/msg-neutral + :class (stl/css :variant-warning-darken)}] [:div {:class (stl/css :variant-warning-highlight)} (tr "workspace.options.component.variant.duplicated.copy.title")] [:button {:class (stl/css :variant-warning-button) :on-click select-duplicated-comps} (tr "workspace.options.component.variant.duplicated.copy.locate")]]))])) - (mf/defc component-swap-item* [{:keys [item loop shapes file-id root-shape container component-id is-search listing-thumbs num-variants]}] (let [on-select @@ -531,7 +548,8 @@ [:span {:class (stl/css-case :variant-mark-cell listing-thumbs :variant-icon true) :title (tr "workspace.assets.components.num-variants" num-variants)} - [:> i/icon* {:icon-id i/variant :size "s"}]])])) + [:> icon* {:icon-id i/variant + :size "s"}]])])) (mf/defc component-group-item* [{:keys [item on-enter-group]}] @@ -544,8 +562,10 @@ [:span {:class (stl/css :component-group-name)} (cfh/last-path group-name)] - [:span {:class (stl/css :arrow-icon)} - i/arrow]])) + [:> icon* {:class (stl/css :component-group-icon) + :variant "ghost" + :icon-id i/arrow-right + :size "s"}]])) (defn- find-common-path ([components] @@ -606,7 +626,6 @@ is-search? (not (str/blank? (:term filters))) - current-library-id (if (contains? libraries (:file-id filters)) (:file-id filters) current-file-id) @@ -617,7 +636,6 @@ current-lib-data (get-in libraries [current-library-id :data]) - components (->> (get-in libraries [current-library-id :data :components]) vals (remove #(true? (:deleted %))) @@ -667,7 +685,6 @@ ;; Get the ids of the components that are parents of the shapes, to avoid loops parent-components (mapcat find-parent-components shapes) - libraries-options (map (fn [library] {:value (:id library) :label (:name library)}) (vals libraries)) @@ -681,7 +698,6 @@ (fn [term] (swap! filters* assoc :term term))) - on-search-clear-click (mf/use-fn #(swap! filters* assoc :term "")) @@ -727,10 +743,10 @@ :selected (if (:listing-thumbs? filters) "grid" "list") :on-change toggle-list-style :name "swap-listing-style"} - [:& radio-button {:icon i/view-as-list + [:& radio-button {:icon deprecated-icon/view-as-list :value "list" :id "swap-opt-list"}] - [:& radio-button {:icon i/flex-grid + [:& radio-button {:icon deprecated-icon/flex-grid :value "grid" :id "swap-opt-grid"}]]]] @@ -738,7 +754,8 @@ [:button {:class (stl/css :component-path) :on-click on-go-back :title filter-path-with-dots} - [:span {:class (stl/css :back-arrow)} i/arrow] + [:> icon* {:icon-id i/arrow-left + :size "s"}] [:span {:class (stl/css :path-name)} filter-path-with-dots]]) @@ -795,8 +812,6 @@ :on-click (partial do-action action)} [:span {:class (stl/css :dropdown-label)} title]]))]])) - - (mf/defc component-menu {::mf/props :obj} [{:keys [shapes swap-opened?]}] @@ -805,7 +820,6 @@ libraries (mf/deref refs/files) current-file (get libraries current-file-id) - state* (mf/use-state #(do {:show-content true :menu-open false})) @@ -881,17 +895,23 @@ create-variant (mf/use-fn (mf/deps id) - #(st/emit! (dwv/add-new-variant id))) + #(st/emit! + (ptk/event ::ev/event {::ev/name "add-new-variant" :trigger "button-design-tab-variant"}) + (dwv/add-new-variant id))) add-new-property (mf/use-fn (mf/deps shape) - #(st/emit! (dwv/add-new-property (:variant-id shape) {:property-value "Value 1" - :editing? true}))) + #(st/emit! + (ptk/event ::ev/event {::ev/name "add-new-property" :trigger "button-design-tab-variant"}) + (dwv/add-new-property (:variant-id shape) {:property-value "Value 1" + :editing? true}))) on-combine-as-variants (mf/use-fn - #(st/emit! (dwv/combine-as-variants))) + #(st/emit! + (ptk/event ::ev/event {::ev/name "combine-as-variants" :trigger "button-design-tab"}) + (dwv/combine-as-variants))) ;; NOTE: function needed for force rerender from the bottom ;; components. This is because `component-annotation` @@ -904,7 +924,7 @@ (fn [] (swap! state* update :render inc))) - menu-entries (cmm/generate-components-menu-entries shapes) + menu-entries (cmm/generate-components-menu-entries shapes {:for-design-tab? true}) show-menu? (seq menu-entries) path (->> component (:path) (cfh/split-path) (cfh/join-path-with-dot))] @@ -914,8 +934,8 @@ (if swap-opened? [:button {:class (stl/css :title-back) :on-click on-component-back} - [:> i/icon* {:icon-id i/arrow-left - :size "s"}] + [:> icon* {:icon-id i/arrow-left + :size "s"}] [:span (tr "workspace.options.component")]] [:* @@ -936,13 +956,13 @@ [:> icon-button* {:variant "ghost" :aria-label (tr "workspace.options.component.variants-help-modal.title") :on-click on-click-variant-title-help - :icon "help"}]) + :icon i/help}]) (when main-instance? [:> icon-button* {:variant "ghost" :aria-label (tr "workspace.shape.menu.add-variant") :on-click (if is-variant? create-variant transform-into-variant) - :icon "variant"}])])] + :icon i/variant}])])] (when open? [:div {:class (stl/css :element-content)} @@ -957,10 +977,10 @@ :disabled (or swap-opened? (not can-swap?))} [:div {:class (stl/css :component-icon)} - [:> i/icon* {:size "s" - :icon-id (if main-instance? - (if is-variant? i/variant i/component) - i/component-copy)}]] + [:> icon* {:size "s" + :icon-id (if main-instance? + (if is-variant? i/variant i/component) + i/component-copy)}]] [:div {:class (stl/css :component-name-outside)} [:div {:class (stl/css :component-name)} @@ -980,7 +1000,7 @@ [:button {:class (stl/css-case :component-menu-btn true :selected menu-open?) :on-click on-menu-click} - [:> i/icon* {:icon-id i/menu}]] + [:> icon* {:icon-id i/menu}]] [:> component-ctx-menu* {:show menu-open? :on-close on-menu-close @@ -991,7 +1011,7 @@ [:> icon-button* {:variant "ghost" :aria-label (tr "workspace.shape.menu.add-variant-property") :on-click add-new-property - :icon "add"}])] + :icon i/add}])] (when swap-opened? [:> component-swap* {:shapes copies}]) @@ -1025,7 +1045,6 @@ (when (dbg/enabled? :display-touched) [:div ":touched " (str (:touched shape))])])]))) - (defn- move-empty-items-to-end "Creates a new vector with the empty items at the end" [v] @@ -1033,7 +1052,6 @@ (into (remove empty?) v) (into (filter empty?) v))) - (mf/defc variant-menu* [{:keys [shapes]}] (let [multi? (> (count shapes) 1) @@ -1073,18 +1091,23 @@ create-variant (mf/use-fn (mf/deps shape) - #(st/emit! (dwv/add-new-variant (:id shape)))) + (fn [trigger] + (st/emit! (ptk/event ::ev/event {::ev/name "add-new-variant" :trigger trigger}) + (dwv/add-new-variant (:id shape))))) add-new-property (mf/use-fn (mf/deps variant-id) - #(st/emit! (dwv/add-new-property variant-id {:property-value "Value 1" - :editing? true}))) + (fn [trigger] + (st/emit! + (ptk/event ::ev/event {::ev/name "add-new-property" :trigger trigger}) + (dwv/add-new-property variant-id {:property-value "Value 1" + :editing? true})))) menu-entries [{:title (tr "workspace.shape.menu.add-variant-property") - :action add-new-property} + :action (partial add-new-property "design-tab-menu-component")} {:title (tr "workspace.shape.menu.add-variant") - :action create-variant}] + :action (partial create-variant "design-tab-menu-component")}] toggle-content (mf/use-fn @@ -1118,7 +1141,9 @@ (dom/get-data "position") int)] (when (seq value) - (st/emit! (dwv/update-property-name variant-id pos value)))))) + (st/emit! + (ptk/event ::ev/event {::ev/name "variant-edit-property-name" :trigger "design-tab-component"}) + (dwv/update-property-name variant-id pos value)))))) remove-property (mf/use-fn @@ -1128,7 +1153,9 @@ (dom/get-data "position") int)] (when (> (count properties) 1) - (st/emit! (dwv/remove-property variant-id pos)))))) + (st/emit! + (ptk/event ::ev/event {::ev/name "variant-remove-property" :trigger "button-design-tab"}) + (dwv/remove-property variant-id pos)))))) select-shapes-with-malformed (mf/use-fn @@ -1158,11 +1185,11 @@ [:> icon-button* {:variant "ghost" :aria-label (tr "workspace.options.component.variants-help-modal.title") :on-click on-click-variant-title-help - :icon "help"}] + :icon i/help}] [:> icon-button* {:variant "ghost" :aria-label (tr "workspace.shape.menu.add-variant") - :on-click create-variant - :icon "variant"}]]]] + :on-click (partial create-variant "button-design-tab-component") + :icon i/variant}]]]] (when open? [:div {:class (stl/css :element-content)} @@ -1174,8 +1201,8 @@ :disabled true} [:div {:class (stl/css :component-icon)} - [:> i/icon* {:size "s" - :icon-id i/component}]] + [:> icon* {:size "s" + :icon-id i/component}]] [:div {:class (stl/css :component-name-outside)} [:div {:class (stl/css :component-name)} @@ -1190,7 +1217,7 @@ [:button {:class (stl/css-case :component-menu-btn true :selected menu-open?) :on-click on-menu-click} - [:> i/icon* {:icon-id i/menu}]] + [:> icon* {:icon-id i/menu}]] [:> component-ctx-menu* {:show menu-open? :on-close on-menu-close @@ -1199,8 +1226,8 @@ [:> icon-button* {:variant "ghost" :aria-label (tr "workspace.shape.menu.add-variant-property") - :on-click add-new-property - :icon "add"}]] + :on-click (partial add-new-property "button-design-tab-component") + :icon i/add}]] (when-not multi? [:div {:class (stl/css :variant-property-list)} @@ -1225,13 +1252,13 @@ (tr "workspace.shape.menu.remove-variant-property")) :on-click remove-property :data-position pos - :icon "remove" + :icon i/remove :disabled last-prop?}]]))]) (if malformed? [:div {:class (stl/css :variant-warning-wrapper)} - [:> i/icon* {:icon-id i/msg-neutral - :class (stl/css :variant-warning-darken)}] + [:> icon* {:icon-id i/msg-neutral + :class (stl/css :variant-warning-darken)}] [:div {:class (stl/css :variant-warning-highlight)} (tr "workspace.options.component.variant.malformed.group.title")] [:button {:class (stl/css :variant-warning-button) @@ -1240,8 +1267,8 @@ (when duplicated? [:div {:class (stl/css :variant-warning-wrapper)} - [:> i/icon* {:icon-id i/msg-neutral - :class (stl/css :variant-warning-darken)}] + [:> icon* {:icon-id i/msg-neutral + :class (stl/css :variant-warning-darken)}] [:div {:class (stl/css :variant-warning-highlight)} (tr "workspace.options.component.variant.duplicated.group.title")] [:button {:class (stl/css :variant-warning-button) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.scss index 1e60e55c27..f0265b807a 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.scss @@ -193,18 +193,6 @@ cursor: pointer; } -.back-arrow { - @include flexCenter; - height: $s-32; - - svg { - height: $s-12; - width: $s-12; - stroke: var(--icon-foreground); - transform: rotate(180deg); - } -} - .path-name { @include bodySmallTypography; @include textEllipsis; @@ -441,6 +429,7 @@ grid-template-columns: 1fr $s-12; height: $s-32; cursor: pointer; + align-items: center; .component-group-name { @include textEllipsis; @@ -456,15 +445,8 @@ } } -.arrow-icon { - @include flexCenter; - height: $s-32; - - svg { - height: $s-12; - width: $s-12; - stroke: var(--icon-foreground); - } +.component-group-icon { + color: var(--icon-foreground); } .path-wrapper { @@ -483,6 +465,7 @@ .component-annotation { @include bodySmallTypography; + grid-column: span 8; color: var(--entry-foreground-color); border-radius: $br-8; diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/constraints.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/constraints.cljs index 5ed03279f7..b589b2a8d9 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/constraints.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/constraints.cljs @@ -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" diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.cljs index b29de7957e..7c32bcfd19 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.cljs @@ -15,9 +15,10 @@ [app.main.ui.components.select :refer [select]] [app.main.ui.components.title-bar :refer [title-bar*]] [app.main.ui.ds.buttons.icon-button :refer [icon-button*]] + [app.main.ui.ds.foundations.assets.icon :as i] [app.main.ui.exports.assets] [app.util.dom :as dom] - [app.util.i18n :refer [tr c]] + [app.util.i18n :refer [c tr]] [app.util.keyboard :as kbd] [rumext.v2 :as mf])) @@ -212,7 +213,7 @@ [:> icon-button* {:variant "ghost" :aria-label (tr "workspace.options.export.add-export") :on-click add-export - :icon "add"}]]] + :icon i/add}]]] (when open? [:div {:class (stl/css :element-set-content)} @@ -224,7 +225,7 @@ [:> icon-button* {:variant "ghost" :aria-label (tr "workspace.options.export.remove-export") :on-click on-remove-all - :icon "remove"}]]] + :icon i/remove}]]] (seq exports) [:* @@ -260,7 +261,7 @@ :aria-label (tr "workspace.options.export.remove-export") :on-click delete-export :data-value index - :icon "remove"}]])]) + :icon i/remove}]])]) (when (or (= :multiple exports) (seq exports)) [:button diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.cljs index f4415b49a6..f49bbc6104 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.cljs @@ -16,8 +16,9 @@ [app.main.store :as st] [app.main.ui.components.title-bar :refer [title-bar*]] [app.main.ui.ds.buttons.icon-button :refer [icon-button*]] + [app.main.ui.ds.foundations.assets.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.options.rows.color-row :refer [color-row*]] [app.util.dom :as dom] [app.util.i18n :as i18n :refer [tr]] @@ -195,7 +196,7 @@ :on-click on-add :data-testid "add-fill" :disabled (not can-add-fills?) - :icon "add"}])]] + :icon i/add}])]] (when open? [:div {:class (stl/css :element-content)} @@ -207,7 +208,7 @@ [:> icon-button* {:variant "ghost" :aria-label (tr "workspace.options.fill.remove-fill") :on-click on-remove-all - :icon "remove"}]] + :icon i/remove}]] (some? fills) [:& h/sortable-container {} @@ -237,7 +238,7 @@ [:span {:class (stl/css-case :check-mark true :checked (not hide-on-export))} (when (not hide-on-export) - i/status-tick)] + deprecated-icon/status-tick)] (tr "workspace.options.show-fill-on-export") [:input {:type "checkbox" :id "show-fill-on-export" diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs index 5558aea627..edda70d353 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs @@ -17,7 +17,8 @@ [app.main.ui.components.select :refer [select]] [app.main.ui.components.title-bar :refer [title-bar*]] [app.main.ui.ds.buttons.icon-button :refer [icon-button*]] - [app.main.ui.icons :as i] + [app.main.ui.ds.foundations.assets.icon :as i] + [app.main.ui.icons :as deprecated-icon] [app.main.ui.workspace.sidebar.options.common :refer [advanced-options]] [app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row*]] [app.util.i18n :as i18n :refer [tr]] @@ -150,7 +151,7 @@ [:button {:class (stl/css-case :show-options true :selected open?) :on-click toggle-advanced-options} - i/menu] + deprecated-icon/menu] [:div {:class (stl/css :type-select-wrapper)} [:& select {:class (stl/css :grid-type-select) @@ -186,7 +187,7 @@ [:> icon-button* {:variant "ghost" :aria-label (tr "workspace.options.guides.remove-guide") :on-click on-remove - :icon "remove"}]]] + :icon i/remove}]]] (when (:display grid) [:& advanced-options {:class (stl/css :grid-advanced-options) @@ -205,7 +206,7 @@ [:button {:class (stl/css-case :show-more-options true :selected show-more-options?) :on-click toggle-more-options} - i/menu]] + deprecated-icon/menu]] (when show-more-options? [:div {:class (stl/css :second-row)} [:button {:class (stl/css-case :btn-options true @@ -263,7 +264,7 @@ :title (tr "workspace.options.grid.params.gutter")} [:span {:class (stl/css-case :icon true :rotated (= type :row))} - i/gap-horizontal] + deprecated-icon/gap-horizontal] [:> numeric-input* {:placeholder "0" :on-change (handle-change :params :gutter) :nillable true @@ -274,7 +275,7 @@ :title (tr "workspace.options.grid.params.margin")} [:span {:class (stl/css-case :icon true :rotated (= type :column))} - i/grid-margin] + deprecated-icon/grid-margin] [:> numeric-input* {:placeholder "0" :on-change (handle-change :params :margin) :nillable true @@ -285,7 +286,7 @@ :selected show-more-options?) :on-click toggle-more-options :disabled is-default} - i/menu] + deprecated-icon/menu] (when show-more-options? [:div {:class (stl/css :more-options)} [:button {:class (stl/css :option-btn) @@ -322,7 +323,7 @@ [:> icon-button* {:variant "ghost" :aria-label (tr "workspace.options.guides.add-guide") :on-click handle-create-grid - :icon "add"}]] + :icon i/add}]] (when (and open? (seq frame-grids)) [:div {:class (stl/css :element-set-content)} diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/grid_cell.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/grid_cell.cljs index db685ab65d..883bf4ca78 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/grid_cell.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/grid_cell.cljs @@ -19,7 +19,7 @@ [app.main.ui.components.radio-buttons :refer [radio-button radio-buttons]] [app.main.ui.components.title-bar :refer [title-bar*]] [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]] [rumext.v2 :as mf])) @@ -52,29 +52,29 @@ :name (dm/str "flex-align-items-" type)} [:& radio-button {:value "start" :icon (if is-col? - i/align-self-row-left - i/align-self-column-top) + deprecated-icon/align-self-row-left + deprecated-icon/align-self-column-top) :title "Align self start" :id (dm/str "align-self-start-" type)}] [:& radio-button {:value "center" :icon (if is-col? - i/align-self-row-center - i/align-self-column-center) + deprecated-icon/align-self-row-center + deprecated-icon/align-self-column-center) :title "Align self center" :id (dm/str "align-self-center-" type)}] [:& radio-button {:value "end" :icon (if is-col? - i/align-self-row-right - i/align-self-column-bottom) + deprecated-icon/align-self-row-right + deprecated-icon/align-self-column-bottom) :title "Align self end" :id (dm/str "align-self-end-" type)}] [:& radio-button {:value "stretch" :icon (if is-col? - i/align-self-row-stretch - i/align-self-column-stretch) + deprecated-icon/align-self-row-stretch + deprecated-icon/align-self-column-stretch) :title "Align self stretch" :id (dm/str "align-self-stretch-" type)}]]])) @@ -208,7 +208,7 @@ (when (and (not multiple?) (= :auto cell-mode)) [:div {:class (stl/css :row)} [:div {:class (stl/css :grid-coord-group)} - [:span {:class (stl/css :icon)} i/flex-vertical] + [:span {:class (stl/css :icon)} deprecated-icon/flex-vertical] [:div {:class (stl/css :coord-input)} [:> numeric-input* {:placeholder "--" @@ -218,7 +218,7 @@ :value column}]]] [:div {:class (stl/css :grid-coord-group)} - [:span {:class (stl/css :icon)} i/flex-horizontal] + [:span {:class (stl/css :icon)} deprecated-icon/flex-horizontal] [:div {:class (stl/css :coord-input)} [:> numeric-input* {:placeholder "--" @@ -230,7 +230,7 @@ (when (and (not multiple?) (or (= :manual cell-mode) (= :area cell-mode))) [:div {:class (stl/css :row)} [:div {:class (stl/css :grid-coord-group)} - [:span {:class (stl/css :icon)} i/flex-vertical] + [:span {:class (stl/css :icon)} deprecated-icon/flex-vertical] [:div {:class (stl/css :coord-input)} [:> numeric-input* {:placeholder "--" @@ -245,7 +245,7 @@ :value column-end}]]] [:div {:class (stl/css :grid-coord-group)} - [:span {:class (stl/css :icon)} i/flex-horizontal] + [:span {:class (stl/css :icon)} deprecated-icon/flex-horizontal] [:div {:class (stl/css :coord-input :double)} [:> numeric-input* {:placeholder "--" diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs index d6a0c72e36..2abb8c4973 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs @@ -19,11 +19,12 @@ [app.main.refs :as refs] [app.main.store :as st] [app.main.ui.components.numeric-input :refer [numeric-input*]] - [app.main.ui.components.radio-buttons :refer [radio-buttons radio-button]] + [app.main.ui.components.radio-buttons :refer [radio-button radio-buttons]] [app.main.ui.components.select :refer [select]] [app.main.ui.components.title-bar :refer [title-bar*]] [app.main.ui.ds.buttons.icon-button :refer [icon-button*]] - [app.main.ui.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]] [app.util.keyboard :as kbd] @@ -140,7 +141,7 @@ [:button {:class (stl/css :start-flow-btn) :on-click start-flow} [:span {:class (stl/css :button-icon)} - i/play]] + deprecated-icon/play]] [:span {:class (stl/css :flow-input-wrapper)} [:input {:class (stl/css :flow-input) @@ -153,7 +154,7 @@ [:> icon-button* {:variant "ghost" :aria-label (tr "workspace.options.flows.remove-flow") :on-click remove-flow - :icon "remove"}]])) + :icon i/remove}]])) (mf/defc page-flows {::mf/props :obj} @@ -181,25 +182,25 @@ [:> icon-button* {:variant "ghost" :aria-label (tr "workspace.options.flows.add-flow-start") :on-click add-flow - :icon "add"}])] + :icon i/add}])] (when (some? flow) [:& flow-item {:flow flow :key (dm/str (:id flow))}])]))) (def ^:private corner-center-icon - (i/icon-xref :corner-center (stl/css :corner-icon))) + (deprecated-icon/icon-xref :corner-center (stl/css :corner-icon))) (def ^:private corner-bottom-icon - (i/icon-xref :corner-bottom (stl/css :corner-icon))) + (deprecated-icon/icon-xref :corner-bottom (stl/css :corner-icon))) (def ^:private corner-bottomleft-icon - (i/icon-xref :corner-bottom-left (stl/css :corner-icon))) + (deprecated-icon/icon-xref :corner-bottom-left (stl/css :corner-icon))) (def ^:private corner-bottomright-icon - (i/icon-xref :corner-bottom-right (stl/css :corner-icon))) + (deprecated-icon/icon-xref :corner-bottom-right (stl/css :corner-icon))) (def ^:private corner-top-icon - (i/icon-xref :corner-top (stl/css :corner-icon))) + (deprecated-icon/icon-xref :corner-top (stl/css :corner-icon))) (def ^:private corner-topleft-icon - (i/icon-xref :corner-top-left (stl/css :corner-icon))) + (deprecated-icon/icon-xref :corner-top-left (stl/css :corner-icon))) (def ^:private corner-topright-icon - (i/icon-xref :corner-top-right (stl/css :corner-icon))) + (deprecated-icon/icon-xref :corner-top-right (stl/css :corner-icon))) (mf/defc interaction-entry [{:keys [index shape interaction update-interaction remove-interaction]}] @@ -432,7 +433,7 @@ [:button {:class (stl/css-case :extend-btn true :extended extended-open?) :on-click toggle-extended} - i/menu] + deprecated-icon/menu] [:div {:class (stl/css :interactions-info) :on-click toggle-extended} @@ -441,7 +442,7 @@ [:button {:class (stl/css :remove-btn) :data-value index :on-click #(remove-interaction index)} - i/remove-icon]] + deprecated-icon/remove-icon]] (when extended-open? [:div {:class (stl/css :extended-options)} @@ -496,7 +497,7 @@ :class (stl/css-case :global/checked preserve-scroll?)} [:span {:class (stl/css-case :global/checked preserve-scroll?)} (when preserve-scroll? - i/status-tick)] + deprecated-icon/status-tick)] (tr "workspace.options.interaction-preserve-scroll") [:input {:type "checkbox" :id (str "preserve-" index) @@ -592,7 +593,7 @@ :class (stl/css-case :global/checked close-click-outside?)} [:span {:class (stl/css-case :global/checked close-click-outside?)} (when close-click-outside? - i/status-tick)] + deprecated-icon/status-tick)] (tr "workspace.options.interaction-close-outside") [:input {:type "checkbox" :id (str "close-" index) @@ -606,7 +607,7 @@ :class (stl/css-case :global/checked background-overlay?)} [:span {:class (stl/css-case :global/checked background-overlay?)} (when background-overlay? - i/status-tick)] + deprecated-icon/status-tick)] (tr "workspace.options.interaction-background") [:input {:type "checkbox" :id (str "background-" index) @@ -644,19 +645,19 @@ [:& radio-buttons {:selected (d/name direction) :on-change change-direction :name "animation-direction"} - [:& radio-button {:icon i/column + [:& radio-button {:icon deprecated-icon/column :icon-class (stl/css :right) :value "right" :id "animation-right"}] - [:& radio-button {:icon i/column + [:& radio-button {:icon deprecated-icon/column :icon-class (stl/css :left) :id "animation-left" :value "left"}] - [:& radio-button {:icon i/column + [:& radio-button {:icon deprecated-icon/column :icon-class (stl/css :down) :id "animation-down" :value "down"}] - [:& radio-button {:icon i/column + [:& radio-button {:icon deprecated-icon/column :icon-class (stl/css :up) :id "animation-up" :value "up"}]]]]) @@ -693,7 +694,7 @@ :class (stl/css-case :global/checked (-> interaction :animation :offset-effect))} [:span {:class (stl/css-case :global/checked (-> interaction :animation :offset-effect))} (when (-> interaction :animation :offset-effect) - i/status-tick)] + deprecated-icon/status-tick)] (tr "workspace.options.interaction-offset-effect") [:input {:type "checkbox" :id (str "offset-effect-" index) @@ -734,21 +735,21 @@ [:> icon-button* {:variant "ghost" :aria-label (tr "workspace.options.interactions.add-interaction") :on-click add-interaction - :icon "add"}]]]) + :icon i/add}]]]) (when (= (count interactions) 0) [:div {:class (stl/css :help-content)} (when (and shape (not (cfh/unframed-shape? shape))) [:div {:class (stl/css :help-group)} - [:div {:class (stl/css :interactions-help-icon)} i/add] + [:div {:class (stl/css :interactions-help-icon)} deprecated-icon/add] [:div {:class (stl/css :interactions-help)} (tr "workspace.options.add-interaction")]]) [:div {:class (stl/css :help-group)} - [:div {:class (stl/css :interactions-help-icon)} i/interaction] + [:div {:class (stl/css :interactions-help-icon)} deprecated-icon/interaction] [:div {:class (stl/css :interactions-help)} (tr "workspace.options.select-a-shape")]] [:div {:class (stl/css :help-group)} - [:div {:class (stl/css :interactions-help-icon)} i/play] + [:div {:class (stl/css :interactions-help-icon)} deprecated-icon/play] [:div {:class (stl/css :interactions-help)} (tr "workspace.options.use-play-button")]]]) [:div {:class (stl/css :groups)} diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.cljs index f5c7eaf14f..73be28c89d 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.cljs @@ -16,6 +16,7 @@ [app.main.ui.components.numeric-input :refer [numeric-input*]] [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.render-wasm.api :as wasm.api] [app.util.i18n :as i18n :refer [tr]] [rumext.v2 :as mf])) @@ -203,23 +204,23 @@ [:> icon-button* {:variant "ghost" :aria-label (tr "workspace.options.layer-options.toggle-layer") :on-click handle-set-hidden - :icon "shown"}] + :icon i/shown}] :else [:> icon-button* {:variant "ghost" :aria-label (tr "workspace.options.layer-options.toggle-layer") :on-click handle-set-visible - :icon "hide"}]) + :icon i/hide}]) (cond (or (= :multiple blocked?) (not blocked?)) [:> icon-button* {:variant "ghost" :aria-label (tr "workspace.shape.menu.lock") :on-click handle-set-blocked - :icon "unlock"}] + :icon i/unlock}] :else [:> icon-button* {:variant "ghost" :aria-label (tr "workspace.shape.menu.unlock") :on-click handle-set-unblocked - :icon "lock"}])]])) + :icon i/lock}])]])) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs index 7230d76b41..68a60566ba 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs @@ -24,9 +24,10 @@ [app.main.ui.components.select :refer [select]] [app.main.ui.components.title-bar :refer [title-bar*]] [app.main.ui.ds.buttons.icon-button :refer [icon-button*]] + [app.main.ui.ds.foundations.assets.icon :as i] [app.main.ui.formats :as fmt] [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] @@ -36,10 +37,10 @@ (defn- dir-icons-refactor [val] (case val - :row i/grid-row - :row-reverse i/row-reverse - :column i/column - :column-reverse i/column-reverse)) + :row deprecated-icon/grid-row + :row-reverse deprecated-icon/row-reverse + :column deprecated-icon/column + :column-reverse deprecated-icon/column-reverse)) ;; FLEX COMPONENTS @@ -67,63 +68,63 @@ :align-items (if column? (case val - :start i/align-items-column-start - :end i/align-items-column-end - :center i/align-items-column-center) + :start deprecated-icon/align-items-column-start + :end deprecated-icon/align-items-column-end + :center deprecated-icon/align-items-column-center) (case val - :start i/align-items-row-start - :end i/align-items-row-end - :center i/align-items-row-center)) + :start deprecated-icon/align-items-row-start + :end deprecated-icon/align-items-row-end + :center deprecated-icon/align-items-row-center)) :justify-content (if column? (case val - :start i/justify-content-column-start - :end i/justify-content-column-end - :center i/justify-content-column-center - :space-around i/justify-content-column-around - :space-evenly i/justify-content-column-evenly - :space-between i/justify-content-column-between) + :start deprecated-icon/justify-content-column-start + :end deprecated-icon/justify-content-column-end + :center deprecated-icon/justify-content-column-center + :space-around deprecated-icon/justify-content-column-around + :space-evenly deprecated-icon/justify-content-column-evenly + :space-between deprecated-icon/justify-content-column-between) (case val - :start i/justify-content-row-start - :end i/justify-content-row-end - :center i/justify-content-row-center - :space-around i/justify-content-row-around - :space-evenly i/justify-content-row-evenly - :space-between i/justify-content-row-between)) + :start deprecated-icon/justify-content-row-start + :end deprecated-icon/justify-content-row-end + :center deprecated-icon/justify-content-row-center + :space-around deprecated-icon/justify-content-row-around + :space-evenly deprecated-icon/justify-content-row-evenly + :space-between deprecated-icon/justify-content-row-between)) :align-content (if column? (case val - :start i/align-content-column-start - :end i/align-content-column-end - :center i/align-content-column-center - :space-around i/align-content-column-around - :space-evenly i/align-content-column-evenly - :space-between i/align-content-column-between + :start deprecated-icon/align-content-column-start + :end deprecated-icon/align-content-column-end + :center deprecated-icon/align-content-column-center + :space-around deprecated-icon/align-content-column-around + :space-evenly deprecated-icon/align-content-column-evenly + :space-between deprecated-icon/align-content-column-between :stretch nil) (case val - :start i/align-content-row-start - :end i/align-content-row-end - :center i/align-content-row-center - :space-around i/align-content-row-around - :space-evenly i/align-content-row-evenly - :space-between i/align-content-row-between + :start deprecated-icon/align-content-row-start + :end deprecated-icon/align-content-row-end + :center deprecated-icon/align-content-row-center + :space-around deprecated-icon/align-content-row-around + :space-evenly deprecated-icon/align-content-row-evenly + :space-between deprecated-icon/align-content-row-between :stretch nil)) :align-self (if column? (case val - :auto i/remove-icon - :start i/align-self-row-left - :end i/align-self-row-right - :center i/align-self-row-center) + :auto deprecated-icon/remove-icon + :start deprecated-icon/align-self-row-left + :end deprecated-icon/align-self-row-right + :center deprecated-icon/align-self-row-center) (case val - :auto i/remove-icon - :start i/align-self-column-top - :end i/align-self-column-bottom - :center i/align-self-column-center)))) + :auto deprecated-icon/remove-icon + :start deprecated-icon/align-self-column-top + :end deprecated-icon/align-self-column-bottom + :center deprecated-icon/align-self-column-center)))) (defn get-layout-grid-icon [type val ^boolean column?] @@ -131,32 +132,32 @@ :align-items (if column? (case val - :auto i/remove-icon - :start i/align-self-row-left - :end i/align-self-row-right - :center i/align-self-row-center) + :auto deprecated-icon/remove-icon + :start deprecated-icon/align-self-row-left + :end deprecated-icon/align-self-row-right + :center deprecated-icon/align-self-row-center) (case val - :auto i/remove-icon - :start i/align-self-column-top - :end i/align-self-column-bottom - :center i/align-self-column-center)) + :auto deprecated-icon/remove-icon + :start deprecated-icon/align-self-column-top + :end deprecated-icon/align-self-column-bottom + :center deprecated-icon/align-self-column-center)) :justify-items (if (not column?) (case val - :start i/align-content-column-start - :center i/align-content-column-center - :end i/align-content-column-end - :space-around i/align-content-column-around - :space-between i/align-content-column-between - :stretch i/align-content-column-stretch) + :start deprecated-icon/align-content-column-start + :center deprecated-icon/align-content-column-center + :end deprecated-icon/align-content-column-end + :space-around deprecated-icon/align-content-column-around + :space-between deprecated-icon/align-content-column-between + :stretch deprecated-icon/align-content-column-stretch) (case val - :start i/align-content-row-start - :center i/align-content-row-center - :end i/align-content-row-end - :space-around i/align-content-row-around - :space-between i/align-content-row-between - :stretch i/align-content-row-stretch)))) + :start deprecated-icon/align-content-row-start + :center deprecated-icon/align-content-row-center + :end deprecated-icon/align-content-row-end + :space-around deprecated-icon/align-content-row-around + :space-between deprecated-icon/align-content-row-between + :stretch deprecated-icon/align-content-row-stretch)))) (mf/defc direction-row-flex {::mf/props :obj @@ -193,7 +194,7 @@ "No wrap" "Wrap") :on-click on-click} - i/wrap]) + deprecated-icon/wrap]) (mf/defc align-row {::mf/props :obj} @@ -339,7 +340,7 @@ [:div {:class (stl/css :padding-simple) :title (tr "workspace.layout_grid.editor.padding.vertical")} [:span {:class (stl/css :icon)} - i/padding-top-bottom] + deprecated-icon/padding-top-bottom] [:> numeric-input* {:class (stl/css :numeric-input) :placeholder (tr "settings.multiple") @@ -354,7 +355,7 @@ :title (tr "workspace.layout_grid.editor.padding.horizontal")} [:span {:class (stl/css :icon)} - i/padding-left-right] + deprecated-icon/padding-left-right] [:> numeric-input* {:className (stl/css :numeric-input) :placeholder (tr "settings.multiple") @@ -398,7 +399,7 @@ [:div {:class (stl/css :padding-multiple) :title (tr "workspace.layout_grid.editor.padding.top")} [:span {:class (stl/css :icon)} - i/padding-top] + deprecated-icon/padding-top] [:> numeric-input* {:class (stl/css :numeric-input) :placeholder "--" @@ -413,7 +414,7 @@ [:div {:class (stl/css :padding-multiple) :title (tr "workspace.layout_grid.editor.padding.right")} [:span {:class (stl/css :icon)} - i/padding-right] + deprecated-icon/padding-right] [:> numeric-input* {:class (stl/css :numeric-input) :placeholder "--" @@ -428,7 +429,7 @@ [:div {:class (stl/css :padding-multiple) :title (tr "workspace.layout_grid.editor.padding.bottom")} [:span {:class (stl/css :icon)} - i/padding-bottom] + deprecated-icon/padding-bottom] [:> numeric-input* {:class (stl/css :numeric-input) :placeholder "--" @@ -443,7 +444,7 @@ [:div {:class (stl/css :padding-multiple) :title (tr "workspace.layout_grid.editor.padding.left")} [:span {:class (stl/css :icon)} - i/padding-left] + deprecated-icon/padding-left] [:> numeric-input* {:class (stl/css :numeric-input) :placeholder "--" @@ -490,7 +491,7 @@ :aria-label (tr "workspace.layout_grid.editor.padding.expand") :data-type (d/name type) :on-click on-type-change'} - i/padding-extended]])) + deprecated-icon/padding-extended]])) ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;; GAP @@ -547,7 +548,7 @@ :row-gap true :disabled row-gap-disabled?) :title "Row gap"} - [:span {:class (stl/css :icon)} i/gap-vertical] + [:span {:class (stl/css :icon)} deprecated-icon/gap-vertical] [:> numeric-input* {:class (stl/css :numeric-input true) :no-validate true @@ -566,7 +567,7 @@ :column-gap true :disabled col-gap-disabled?) :title "Column gap"} - [:span {:class (stl/css :icon)} i/gap-horizontal] + [:span {:class (stl/css :icon)} deprecated-icon/gap-horizontal] [:> numeric-input* {:class (stl/css :numeric-input true) :no-validate true @@ -756,7 +757,7 @@ [:div {:class (stl/css :track-info-container)} [:div {:class (stl/css :track-info-dir-icon) :on-click handle-select-track} - (if is-column i/flex-vertical i/flex-horizontal)] + (if is-column deprecated-icon/flex-vertical deprecated-icon/flex-horizontal)] [:div {:class (stl/css :track-info-value)} [:> numeric-input* {:no-validate true @@ -780,7 +781,7 @@ :on-click remove-element :data-type type :data-index index - :icon "remove"}]])) + :icon i/remove}]])) (mf/defc grid-columns-row {::mf/props :obj} @@ -804,11 +805,11 @@ [:div {:class (stl/css :grid-tracks) :data-testid testid} [:div {:class (stl/css :grid-track-header)} - [:button {:class (stl/css :expand-icon) :on-click toggle} i/menu] + [:button {:class (stl/css :expand-icon) :on-click toggle} deprecated-icon/menu] [:div {:class (stl/css :track-title) :on-click toggle} [:div {:class (stl/css :track-name) :title track-name} track-name] [:div {:class (stl/css :track-detail) :title track-detail} track-detail]] - [:button {:class (stl/css :add-column) :on-click add-track} i/add]] + [:button {:class (stl/css :add-column) :on-click add-track} deprecated-icon/add]] (when expanded? [:& h/sortable-container {} @@ -1014,7 +1015,7 @@ [:> icon-button* {:variant "ghost" :aria-label (tr "workspace.shape.menu.add-layout") :on-click on-toggle-dropdown-visibility - :icon "menu"}] + :icon i/menu}] [:& dropdown {:show show-dropdown? :on-close on-hide-dropdown} @@ -1032,13 +1033,13 @@ [:> icon-button* {:variant "ghost" :aria-label (tr "workspace.shape.menu.remove-layout") :on-click on-remove-layout - :icon "remove"}])] + :icon i/remove}])] [:div {:class (stl/css :title-actions)} [:> icon-button* {:variant "ghost" :aria-label (tr "workspace.shape.menu.add-layout") :on-click on-toggle-dropdown-visibility - :icon "add"}] + :icon i/add}] [:& dropdown {:show show-dropdown? :on-close on-hide-dropdown} @@ -1056,7 +1057,7 @@ [:> icon-button* {:variant "ghost" :aria-label (tr "workspace.shape.menu.delete") :on-click on-remove-layout - :icon "remove"}])])]] + :icon i/remove}])])]] (when (and ^boolean open? ^boolean has-layout? @@ -1083,7 +1084,7 @@ [:> icon-button* {:variant "ghost" :aria-label (tr "labels.help-center") :on-click open-flex-help - :icon "help"}]] + :icon i/help}]] (when (= :wrap wrap-type) [:div {:class (stl/css :third-row)} [:& align-content-row {:is-column is-column @@ -1108,7 +1109,7 @@ [:> icon-button* {:variant "ghost" :aria-label (tr "labels.help-center") :on-click open-grid-help - :icon "help"}]]) + :icon i/help}]]) [:div {:class (stl/css :first-row)} [:div {:class (stl/css :direction-edit)} @@ -1294,7 +1295,7 @@ :class (stl/css :help-button) :aria-label (tr "labels.help-center") :on-click open-grid-help - :icon "help"}] + :icon i/help}] [:button {:class (stl/css :exit-btn) :on-click #(st/emit! (udw/clear-edition-mode))} (tr "workspace.layout_grid.editor.options.exit")]] @@ -1325,7 +1326,7 @@ :class (stl/css :locate-button) :aria-label (tr "workspace.layout_grid.editor.top-bar.locate.tooltip") :on-click handle-locate-grid - :icon "locate"}]] + :icon i/locate}]] [:div {:class (stl/css :gap-row)} [:& gap-section {:on-change on-gap-change diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs index 4a83f2b0b5..b55fe5de01 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs @@ -16,7 +16,7 @@ [app.main.ui.components.numeric-input :refer [numeric-input*]] [app.main.ui.components.radio-buttons :refer [radio-button radio-buttons]] [app.main.ui.components.title-bar :refer [title-bar*]] - [app.main.ui.icons :as i] + [app.main.ui.icons :as deprecated-icon] [app.main.ui.workspace.sidebar.options.menus.layout-container :refer [get-layout-flex-icon]] [app.util.dom :as dom] [app.util.i18n :as i18n :refer [tr]] @@ -81,7 +81,7 @@ [:div {:class (stl/css :vertical-margin) :title "Vertical margin"} [:span {:class (stl/css :icon)} - i/margin-top-bottom] + deprecated-icon/margin-top-bottom] [:> numeric-input* {:class (stl/css :numeric-input) :placeholder m1-placeholder :data-name "m1" @@ -94,7 +94,7 @@ [:div {:class (stl/css :horizontal-margin) :title "Horizontal margin"} [:span {:class (stl/css :icon)} - i/margin-left-right] + deprecated-icon/margin-left-right] [:> numeric-input* {:class (stl/css :numeric-input) :placeholder m2-placeholder :data-name "m2" @@ -133,7 +133,7 @@ [:div {:class (stl/css :top-margin) :title "Top margin"} [:span {:class (stl/css :icon)} - i/margin-top] + deprecated-icon/margin-top] [:> numeric-input* {:class (stl/css :numeric-input) :placeholder "--" :data-name "m1" @@ -145,7 +145,7 @@ [:div {:class (stl/css :right-margin) :title "Right margin"} [:span {:class (stl/css :icon)} - i/margin-right] + deprecated-icon/margin-right] [:> numeric-input* {:class (stl/css :numeric-input) :placeholder "--" :data-name "m2" @@ -158,7 +158,7 @@ [:div {:class (stl/css :bottom-margin) :title "Bottom margin"} [:span {:class (stl/css :icon)} - i/margin-bottom] + deprecated-icon/margin-bottom] [:> numeric-input* {:class (stl/css :numeric-input) :placeholder "--" :data-name "m3" @@ -171,7 +171,7 @@ [:div {:class (stl/css :left-margin) :title "Left margin"} [:span {:class (stl/css :icon)} - i/margin-left] + deprecated-icon/margin-left] [:> numeric-input* {:class (stl/css :numeric-input) :placeholder "--" :data-name "m4" @@ -215,7 +215,7 @@ :selected (= type :multiple)) :title "Margin - multiple" :on-click on-type-change'} - i/margin]])) + deprecated-icon/margin]])) (mf/defc element-behaviour-horizontal {::mf/props :obj @@ -234,20 +234,20 @@ [:& radio-button {:value "fix" - :icon i/fixed-width + :icon deprecated-icon/fixed-width :title "Fix width" :id "behaviour-h-fix"}] (when has-fill [:& radio-button {:value "fill" - :icon i/fill-content + :icon deprecated-icon/fill-content :title "Width 100%" :id "behaviour-h-fill"}]) (when is-auto [:& radio-button {:value "auto" - :icon i/hug-content + :icon deprecated-icon/hug-content :title "Fit content (Horizontal)" :id "behaviour-h-auto"}])]]) @@ -268,7 +268,7 @@ [:& radio-button {:value "fix" - :icon i/fixed-width + :icon deprecated-icon/fixed-width :icon-class (stl/css :rotated) :title "Fix height" :id "behaviour-v-fix"}] @@ -276,14 +276,14 @@ (when has-fill [:& radio-button {:value "fill" - :icon i/fill-content + :icon deprecated-icon/fill-content :icon-class (stl/css :rotated) :title "Height 100%" :id "behaviour-v-fill"}]) (when is-auto [:& radio-button {:value "auto" - :icon i/hug-content + :icon deprecated-icon/hug-content :icon-class (stl/css :rotated) :title "Fit content (Vertical)" :id "behaviour-v-auto"}])]]) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs index c93bf3320e..43b0726a3b 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs @@ -26,8 +26,8 @@ [app.main.ui.components.numeric-input :refer [numeric-input*]] [app.main.ui.components.radio-buttons :refer [radio-button radio-buttons]] [app.main.ui.ds.buttons.icon-button :refer [icon-button*]] - [app.main.ui.ds.foundations.assets.icon :as ds-i] - [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.workspace.sidebar.options.menus.border-radius :refer [border-radius-menu*]] [app.util.dom :as dom] [app.util.i18n :as i18n :refer [tr]] @@ -347,7 +347,7 @@ :opened show-presets-dropdown?) :on-click open-presets} [:span {:class (stl/css :select-name)} (tr "workspace.options.size-presets")] - [:span {:class (stl/css :collapsed-icon)} i/arrow] + [:span {:class (stl/css :collapsed-icon)} deprecated-icon/arrow] [:& dropdown {:show show-presets-dropdown? :on-close close-presets} @@ -371,24 +371,24 @@ [:span {:class (stl/css :preset-name)} (:name size-preset)] [:span {:class (stl/css :preset-size)} (:width size-preset) " x " (:height size-preset)]] (when preset-match - [:span {:class (stl/css :check-icon)} i/tick])])))]]] + [: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 "vert" :id "size-vertical"}] - [:& radio-button {:icon i/size-horizontal + [:& radio-button {:icon deprecated-icon/size-horizontal :value "horiz" :id "size-horizontal"}]] [:> icon-button* {:variant "ghost" :aria-label (tr "workspace.options.fit-content") :on-pointer-down handle-fit-content - :icon "fit-content"}]]) + :icon i/fit-content}]]) (when (options :size) [:div {:class (stl/css :size)} @@ -450,7 +450,7 @@ (when (options :rotation) [:div {:class (stl/css :rotation) :title (tr "workspace.options.rotation")} - [:span {:class (stl/css :icon)} i/rotation] + [:span {:class (stl/css :icon)} deprecated-icon/rotation] [:> numeric-input* {:no-validate true :min -359 @@ -481,7 +481,7 @@ :class (stl/css-case :clip-content-label true :selected (not (:show-content values)))} - [:> ds-i/icon* {:icon-id ds-i/clip-content}]]]) + [:> icon* {:icon-id i/clip-content}]]]) (when (options :show-in-viewer) [:div {:class (stl/css :show-in-viewer)} [:input {:type "checkbox" @@ -495,4 +495,4 @@ :title (tr "workspace.options.show-in-viewer") :class (stl/css-case :clip-content-label true :selected (not (:hide-in-viewer values)))} - [:> ds-i/icon* {:icon-id ds-i/play}]]])])])) + [:> icon* {:icon-id i/play}]]])])])) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs index aaf5f04770..afc6061ae1 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs @@ -22,8 +22,9 @@ [app.main.ui.components.select :refer [select]] [app.main.ui.components.title-bar :refer [title-bar*]] [app.main.ui.ds.buttons.icon-button :refer [icon-button*]] + [app.main.ui.ds.foundations.assets.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.options.common :refer [advanced-options]] [app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row*]] [app.util.i18n :as i18n :refer [tr]] @@ -162,7 +163,7 @@ [:button {:class (stl/css-case :more-options true :selected is-open) :on-click on-toggle-open} - i/menu] + deprecated-icon/menu] [:div {:class (stl/css :type-select)} [:& select {:class (stl/css :shadow-type-select) @@ -177,7 +178,7 @@ [:> icon-button* {:variant "ghost" :aria-label (tr "workspace.options.shadow-options.remove-shadow") :on-click on-remove - :icon "remove"}]]] + :icon i/remove}]]] (when is-open [:& advanced-options {:class (stl/css :shadow-advanced-options) :visible? is-open @@ -334,7 +335,7 @@ [:> icon-button* {:variant "ghost" :aria-label (tr "workspace.options.shadow-options.add-shadow") :on-click on-add-shadow - :icon "add" + :icon i/add :data-testid "add-shadow"}])]] (when show-content? @@ -347,7 +348,7 @@ [:> icon-button* {:variant "ghost" :aria-label (tr "workspace.options.shadow-options.remove-shadow") :on-click on-remove-all - :icon "remove"}]]]] + :icon i/remove}]]]] (some? shadows) [:& h/sortable-container {} diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs index 0e8eb69f25..9ef4f7a658 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs @@ -15,6 +15,7 @@ [app.main.store :as st] [app.main.ui.components.title-bar :refer [title-bar*]] [app.main.ui.ds.buttons.icon-button :refer [icon-button*]] + [app.main.ui.ds.foundations.assets.icon :as i] [app.main.ui.hooks :as h] [app.main.ui.workspace.sidebar.options.rows.stroke-row :refer [stroke-row]] [app.util.dom :as dom] @@ -179,7 +180,7 @@ [:> icon-button* {:variant "ghost" :aria-label (tr "workspace.options.stroke.add-stroke") :on-click on-add-stroke - :icon "add" + :icon i/add :data-testid "add-stroke"}])]] (when open? [:div {:class (stl/css-case :element-content true @@ -192,7 +193,7 @@ [:> icon-button* {:variant "ghost" :aria-label (tr "workspace.options.stroke.remove-stroke") :on-click handle-remove-all - :icon "remove"}]] + :icon i/remove}]] (seq strokes) [:& h/sortable-container {} (for [[index value] (d/enumerate (:strokes values []))] diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/svg_attrs.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/svg_attrs.cljs index ea2ab0ce91..b50adf32bf 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/svg_attrs.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/svg_attrs.cljs @@ -11,7 +11,7 @@ [app.main.data.workspace.shapes :as dwsh] [app.main.store :as st] [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.functions :as uf] [app.util.i18n :refer [tr]] @@ -50,7 +50,7 @@ [:div {:class (stl/css :attr-actions)} [:button {:class (stl/css :attr-action-btn) :on-click handle-delete} - i/remove-icon]]] + deprecated-icon/remove-icon]]] [:div {:class (stl/css :attr-nested-content)} [:div {:class (stl/css :attr-title)} (str (d/name (last attr)))] diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.cljs index 3f5c9ee4cd..93d0692260 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.cljs @@ -22,8 +22,9 @@ [app.main.ui.components.title-bar :refer [title-bar*]] [app.main.ui.context :as ctx] [app.main.ui.ds.buttons.icon-button :refer [icon-button*]] + [app.main.ui.ds.foundations.assets.icon :as i] [app.main.ui.hooks :as hooks] - [app.main.ui.icons :as i] + [app.main.ui.icons :as deprecated-icon] [app.main.ui.workspace.sidebar.options.menus.typography :refer [text-options typography-entry]] [app.util.dom :as dom] @@ -52,19 +53,19 @@ [:& radio-button {:value "left" :id "text-align-left" :title (tr "workspace.options.text-options.text-align-left" (sc/get-tooltip :text-align-left)) - :icon i/text-align-left}] + :icon deprecated-icon/text-align-left}] [:& radio-button {:value "center" :id "text-align-center" :title (tr "workspace.options.text-options.text-align-center" (sc/get-tooltip :text-align-center)) - :icon i/text-align-center}] + :icon deprecated-icon/text-align-center}] [:& radio-button {:value "right" :id "text-align-right" :title (tr "workspace.options.text-options.text-align-right" (sc/get-tooltip :text-align-right)) - :icon i/text-align-right}] + :icon deprecated-icon/text-align-right}] [:& radio-button {:value "justify" :id "text-align-justify" :title (tr "workspace.options.text-options.text-align-justify" (sc/get-tooltip :text-align-justify)) - :icon i/text-justify}]]])) + :icon deprecated-icon/text-justify}]]])) (mf/defc text-direction-options [{:keys [values on-change on-blur] :as props}] @@ -87,12 +88,12 @@ :type "checkbox" :id "ltr-text-direction" :title (tr "workspace.options.text-options.direction-ltr") - :icon i/text-ltr}] + :icon deprecated-icon/text-ltr}] [:& radio-button {:value "rtl" :type "checkbox" :id "rtl-text-direction" :title (tr "workspace.options.text-options.direction-rtl") - :icon i/text-rtl}]]])) + :icon deprecated-icon/text-rtl}]]])) (mf/defc vertical-align [{:keys [values on-change on-blur] :as props}] @@ -112,15 +113,15 @@ [:& radio-button {:value "top" :id "vertical-text-align-top" :title (tr "workspace.options.text-options.align-top") - :icon i/text-top}] + :icon deprecated-icon/text-top}] [:& radio-button {:value "center" :id "vertical-text-align-center" :title (tr "workspace.options.text-options.align-middle") - :icon i/text-middle}] + :icon deprecated-icon/text-middle}] [:& radio-button {:value "bottom" :id "vertical-text-align-bottom" :title (tr "workspace.options.text-options.align-bottom") - :icon i/text-bottom}]]])) + :icon deprecated-icon/text-bottom}]]])) (mf/defc grow-options [{:keys [ids values on-blur] :as props}] @@ -149,15 +150,15 @@ [:& radio-button {:value "fixed" :id "text-fixed-grow" :title (tr "workspace.options.text-options.grow-fixed") - :icon i/text-fixed}] + :icon deprecated-icon/text-fixed}] [:& radio-button {:value "auto-width" :id "text-auto-width-grow" :title (tr "workspace.options.text-options.grow-auto-width") - :icon i/text-auto-width}] + :icon deprecated-icon/text-auto-width}] [:& radio-button {:value "auto-height" :id "text-auto-height-grow" :title (tr "workspace.options.text-options.grow-auto-height") - :icon i/text-auto-height}]]])) + :icon deprecated-icon/text-auto-height}]]])) (mf/defc text-decoration-options [{:keys [values on-change on-blur] :as props}] @@ -179,12 +180,12 @@ :type "checkbox" :id "underline-text-decoration" :title (tr "workspace.options.text-options.underline" (sc/get-tooltip :underline)) - :icon i/text-underlined}] + :icon deprecated-icon/text-underlined}] [:& radio-button {:value "line-through" :type "checkbox" :id "line-through-text-decoration" :title (tr "workspace.options.text-options.strikethrough" (sc/get-tooltip :line-through)) - :icon i/text-stroked}]]])) + :icon deprecated-icon/text-stroked}]]])) (mf/defc text-menu {::mf/wrap [mf/memo]} @@ -308,7 +309,7 @@ [:> icon-button* {:variant "ghost" :aria-label (tr "labels.options") :on-click on-convert-to-typography - :icon "add"}])]] + :icon i/add}])]] (when main-menu-open? [:div {:class (stl/css :element-content)} @@ -326,7 +327,7 @@ [:div {:class (stl/css :multiple-typography-button) :on-click handle-detach-typography :title (tr "workspace.libraries.text.multiple-typography-tooltip")} - i/detach]] + deprecated-icon/detach]] :else [:> text-options opts]) @@ -338,7 +339,7 @@ :aria-label (tr "labels.options") :data-testid "text-align-options-button" :on-click toggle-more-options - :icon "menu"}]] + :icon i/menu}]] (when more-options-open? [:div {:class (stl/css :text-decoration-options)} diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs index 3d94e11cf0..35cc2b9949 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs @@ -26,7 +26,7 @@ [app.main.ui.components.search-bar :refer [search-bar*]] [app.main.ui.components.select :refer [select]] [app.main.ui.context :as ctx] - [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] @@ -79,7 +79,7 @@ [:div {:class (stl/css-case :font-item true :selected is-current)} [:span {:class (stl/css :label)} (:name font)] - [:span {:class (stl/css :icon)} (when is-current i/tick)]]])) + [:span {:class (stl/css :icon)} (when is-current deprecated-icon/tick)]]])) (declare row-renderer) @@ -311,7 +311,7 @@ [:span {:class (stl/css :name)} (:name font)] [:span {:class (stl/css :icon)} - i/arrow]] + deprecated-icon/arrow]] :else (tr "dashboard.fonts.deleted-placeholder"))] @@ -371,7 +371,7 @@ :title (tr "inspect.attributes.typography.line-height")} [:span {:class (stl/css :icon) :alt (tr "workspace.options.text-options.line-height")} - i/text-lineheight] + deprecated-icon/text-lineheight] [:> numeric-input* {:min -200 :max 200 @@ -389,7 +389,7 @@ [:span {:class (stl/css :icon) :alt (tr "workspace.options.text-options.letter-spacing")} - i/text-letterspacing] + deprecated-icon/text-letterspacing] [:> numeric-input* {:min -200 :max 200 @@ -418,17 +418,17 @@ [:& radio-buttons {:selected text-transform :on-change handle-change :name "text-transform"} - [:& radio-button {:icon i/text-uppercase + [:& radio-button {:icon deprecated-icon/text-uppercase :type "checkbox" :title (tr "inspect.attributes.typography.text-transform.uppercase") :value "uppercase" :id "text-transform-uppercase"}] - [:& radio-button {:icon i/text-mixed + [:& radio-button {:icon deprecated-icon/text-mixed :type "checkbox" :value "capitalize" :title (tr "inspect.attributes.typography.text-transform.capitalize") :id "text-transform-capitalize"}] - [:& radio-button {:icon i/text-lowercase + [:& radio-button {:icon deprecated-icon/text-lowercase :type "checkbox" :title (tr "inspect.attributes.typography.text-transform.lowercase") :value "lowercase" @@ -490,7 +490,7 @@ [:div {:class (stl/css :action-btn) :on-click on-close} - i/tick]] + deprecated-icon/tick]] [:& text-options {:values typography :on-change on-change @@ -512,7 +512,7 @@ (:name font-data)] [:div {:class (stl/css :action-btn) :on-click on-close} - i/menu]] + deprecated-icon/menu]] [:div {:class (stl/css :info-row)} [:span {:class (stl/css :info-label)} (tr "labels.variant")] @@ -643,10 +643,10 @@ (when ^boolean on-detach [:button {:class (stl/css :element-set-actions-button) :on-click on-detach} - i/detach]) + deprecated-icon/detach]) [:button {:class (stl/css :menu-btn) :on-click on-open} - i/menu]]] + deprecated-icon/menu]]] [:& typography-advanced-options {:visible? open? diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs index 95ff3813d4..b2bd704263 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs @@ -20,16 +20,17 @@ [app.main.ui.components.numeric-input :refer [numeric-input*]] [app.main.ui.components.reorder-handler :refer [reorder-handler*]] [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.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]] [rumext.v2 :as mf])) (def ^:private detach-icon - (i/icon-xref :detach (stl/css :detach-icon))) + (deprecated-icon/icon-xref :detach (stl/css :detach-icon))) (defn opacity->string [opacity] @@ -282,10 +283,10 @@ [:> icon-button* {:variant "ghost" :aria-label (tr "settings.remove-color") :on-click on-remove' - :icon "remove"}]) + :icon i/remove}]) (when select-only [:> icon-button* {:variant "ghost" :aria-label (tr "settings.select-this-color") :on-click handle-select - :icon "move"}])])) + :icon i/move}])])) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.cljs index 3ab9b6298a..9d084a2cb9 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.cljs @@ -13,7 +13,7 @@ [app.main.ui.components.reorder-handler :refer [reorder-handler*]] [app.main.ui.components.select :refer [select]] [app.main.ui.hooks :as h] - [app.main.ui.icons :as i] + [app.main.ui.icons :as deprecated-icon] [app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row*]] [app.util.i18n :as i18n :refer [tr]] [rumext.v2 :as mf])) @@ -165,7 +165,7 @@ [:div {:class (stl/css :stroke-width-input-element) :title (tr "workspace.options.stroke-width")} [:span {:class (stl/css :icon)} - i/stroke-size] + deprecated-icon/stroke-size] [:> numeric-input* {:min 0 :className (stl/css :stroke-width-input) @@ -203,7 +203,7 @@ [:button {:class (stl/css :swap-caps-btn) :on-click on-cap-switch} - i/switch] + deprecated-icon/switch] [:div {:class (stl/css :cap-select)} [:& select diff --git a/frontend/src/app/main/ui/workspace/sidebar/shortcuts.cljs b/frontend/src/app/main/ui/workspace/sidebar/shortcuts.cljs index 9cca7a3590..27dee45b59 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/shortcuts.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/shortcuts.cljs @@ -18,7 +18,8 @@ [app.main.data.workspace.shortcuts] [app.main.store :as st] [app.main.ui.components.search-bar :refer [search-bar*]] - [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 :refer [tr]] [app.util.strings :refer [matches-search]] @@ -292,7 +293,7 @@ (stl/css :subsection-title) (stl/css :section-title))} [:span {:class (stl/css-case :open is-visible? - :collapsed-shortcuts true)} i/arrow] + :collapsed-shortcuts true)} deprecated-icon/arrow] [:span {:class (if is-sub? (stl/css :subsection-name) (stl/css :section-name))} name]]) @@ -497,14 +498,14 @@ [:div {:class (stl/css :shortcuts-title)} (tr "shortcuts.title")] [:div {:class (stl/css :shortcuts-close-button) :on-click close-fn} - i/close]] + deprecated-icon/close]] [:div {:class (stl/css :search-field)} [:> search-bar* {:on-change on-search-term-change-2 :on-clear on-search-clear-click :value @filter-term :placeholder (tr "shortcuts.title") - :icon-id "search"}]] + :icon-id i/search}]] (if match-any? [:div {:class (stl/css :shortcuts-list)} diff --git a/frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs b/frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs index 942320ec87..57d8fa007b 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs @@ -18,8 +18,9 @@ [app.main.ui.components.title-bar :refer [title-bar*]] [app.main.ui.context :as ctx] [app.main.ui.ds.buttons.icon-button :refer [icon-button*]] + [app.main.ui.ds.foundations.assets.icon :as i] [app.main.ui.hooks :as hooks] - [app.main.ui.icons :as i] + [app.main.ui.icons :as deprecated-icon] [app.main.ui.notifications.badge :refer [badge-notification]] [app.util.dom :as dom] [app.util.i18n :as i18n :refer [tr]] @@ -158,7 +159,7 @@ :on-double-click on-double-click :on-context-menu on-context-menu} [:div {:class (stl/css :page-icon)} - i/document] + deprecated-icon/document] (if editing? [:* @@ -175,7 +176,7 @@ [:div {:class (stl/css :page-actions)} (when (and deletable? (not read-only?)) [:button {:on-click on-delete} - i/delete])]])]])) + deprecated-icon/delete])]])]])) ;; --- Page Item Wrapper @@ -247,7 +248,7 @@ :class (stl/css :add-page) :aria-label (tr "workspace.sidebar.sitemap.add-page") :on-click on-create - :icon "add"}])] + :icon i/add}])] (when-not ^boolean collapsed [:div {:class (stl/css :tool-window-content)} diff --git a/frontend/src/app/main/ui/workspace/sidebar/versions.cljs b/frontend/src/app/main/ui/workspace/sidebar/versions.cljs index 2f8088f742..1fda5b93e9 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/versions.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/versions.cljs @@ -19,7 +19,7 @@ [app.main.ui.components.select :refer [select]] [app.main.ui.dashboard.subscription :refer [get-subscription-type]] [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.product.cta :refer [cta*]] [app.main.ui.ds.product.milestone :refer [milestone*]] [app.main.ui.ds.product.milestone-group :refer [milestone-group*]] @@ -395,11 +395,11 @@ [:> icon-button* {:variant "ghost" :aria-label (tr "workspace.versions.button.save") :on-click on-create-version - :icon "pin"}]] + :icon i/pin}]] (if (empty? data) [:div {:class (stl/css :versions-entry-empty)} - [:div {:class (stl/css :versions-entry-empty-icon)} [:> i/icon* {:icon-id i/history}]] + [:div {:class (stl/css :versions-entry-empty-icon)} [:> icon* {:icon-id i/history}]] [:div {:class (stl/css :versions-entry-empty-msg)} (tr "workspace.versions.empty")]] [:ul {:class (stl/css :versions-entries)} diff --git a/frontend/src/app/main/ui/workspace/text_palette.cljs b/frontend/src/app/main/ui/workspace/text_palette.cljs index 4becd5a546..5325102a05 100644 --- a/frontend/src/app/main/ui/workspace/text_palette.cljs +++ b/frontend/src/app/main/ui/workspace/text_palette.cljs @@ -14,7 +14,7 @@ [app.main.refs :as refs] [app.main.store :as st] [app.main.ui.context :as ctx] - [app.main.ui.icons :as i] + [app.main.ui.icons :as deprecated-icon] [app.util.dom :as dom] [app.util.i18n :refer [tr]] [app.util.object :as obj] @@ -147,7 +147,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 :text-palette-content) :ref container @@ -176,7 +176,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 text-palette {::mf/wrap [mf/memo]} diff --git a/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.cljs b/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.cljs index 8034780e58..c2767a27eb 100644 --- a/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.cljs +++ b/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.cljs @@ -10,7 +10,7 @@ [app.common.data.macros :as dm] [app.main.refs :as refs] [app.main.ui.components.dropdown :refer [dropdown]] - [app.main.ui.icons :as i] + [app.main.ui.icons :as deprecated-icon] [app.util.i18n :refer [tr]] [rumext.v2 :as mf])) @@ -37,7 +37,7 @@ (when (= selected (:id cur-library)) [:span {:class (stl/css :icon-wrapper)} - i/tick])])) + deprecated-icon/tick])])) [:li {:class (stl/css-case :file-library true @@ -51,4 +51,4 @@ (dm/str "(" (count typographies) ")")]] (when (= selected :file) [:span {:class (stl/css :icon-wrapper)} - i/tick])]]])) + deprecated-icon/tick])]]])) diff --git a/frontend/src/app/main/ui/workspace/tokens/export.cljs b/frontend/src/app/main/ui/workspace/tokens/export.cljs index e3b2bbff13..41f05ed856 100644 --- a/frontend/src/app/main/ui/workspace/tokens/export.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/export.cljs @@ -9,6 +9,7 @@ (:require [app.main.data.modal :as modal] [app.main.ui.ds.buttons.icon-button :refer [icon-button*]] + [app.main.ui.ds.foundations.assets.icon :as i] [app.main.ui.workspace.tokens.export.modal :refer [export-modal-body*]] [app.util.i18n :refer [tr]] [rumext.v2 :as mf])) @@ -23,5 +24,5 @@ :on-click modal/hide! :aria-label (tr "labels.close") :variant "ghost" - :icon "close"}] + :icon i/close}] [:> export-modal-body*]]]) diff --git a/frontend/src/app/main/ui/workspace/tokens/export/modal.cljs b/frontend/src/app/main/ui/workspace/tokens/export/modal.cljs index 432c91f568..0db9bc5fcb 100644 --- a/frontend/src/app/main/ui/workspace/tokens/export/modal.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/export/modal.cljs @@ -15,7 +15,7 @@ [app.main.store :as st] [app.main.ui.components.code-block :refer [code-block]] [app.main.ui.ds.buttons.button :refer [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.foundations.typography.heading :refer [heading*]] [app.main.ui.ds.foundations.typography.text :refer [text*]] [app.main.ui.ds.layout.tab-switcher :refer [tab-switcher*]] @@ -98,7 +98,7 @@ [:li {:key path :class (stl/css :file-item)} [:div {:class (stl/css :file-icon)} - [:> icon* {:icon-id "document"}]] + [:> icon* {:icon-id i/document}]] [:div {:class (stl/css :file-name) :title path} path]])]]])) diff --git a/frontend/src/app/main/ui/workspace/tokens/import.cljs b/frontend/src/app/main/ui/workspace/tokens/import.cljs index 26b324b24c..37b00efe26 100644 --- a/frontend/src/app/main/ui/workspace/tokens/import.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/import.cljs @@ -3,6 +3,7 @@ (:require [app.main.data.modal :as modal] [app.main.ui.ds.buttons.icon-button :refer [icon-button*]] + [app.main.ui.ds.foundations.assets.icon :as i] [app.main.ui.workspace.tokens.import.modal :refer [import-modal-body*]] [app.util.i18n :refer [tr]] [rumext.v2 :as mf])) @@ -17,5 +18,5 @@ :on-click modal/hide! :aria-label (tr "labels.close") :variant "ghost" - :icon "close"}] + :icon i/close}] [:> import-modal-body*]]]) diff --git a/frontend/src/app/main/ui/workspace/tokens/import/modal.cljs b/frontend/src/app/main/ui/workspace/tokens/import/modal.cljs index bf87c47d8a..dbd356d1a5 100644 --- a/frontend/src/app/main/ui/workspace/tokens/import/modal.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/import/modal.cljs @@ -17,6 +17,7 @@ [app.main.ui.components.dropdown :refer [dropdown]] [app.main.ui.ds.buttons.button :refer [button*]] [app.main.ui.ds.controls.shared.options-dropdown :refer [options-dropdown*]] + [app.main.ui.ds.foundations.assets.icon :as i] [app.main.ui.ds.foundations.typography.heading :refer [heading*]] [app.main.ui.ds.foundations.typography.text :refer [text*]] [app.main.ui.ds.notifications.context-notification :refer [context-notification*]] @@ -103,7 +104,7 @@ [:> button* {:variant "primary" :type "button" :class (stl/css :dropdown-trigger-btn) - :icon "arrow-down" + :icon i/arrow-down :on-click toggle-dropdown :aria-label "Show options"}] diff --git a/frontend/src/app/main/ui/workspace/tokens/management.cljs b/frontend/src/app/main/ui/workspace/tokens/management.cljs index 4e141cc7bb..ba4fbea79e 100644 --- a/frontend/src/app/main/ui/workspace/tokens/management.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/management.cljs @@ -11,7 +11,7 @@ [app.main.data.workspace.tokens.library-edit :as dwtl] [app.main.refs :as refs] [app.main.store :as st] - [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.text :refer [text*]] [app.main.ui.workspace.tokens.management.context-menu :refer [token-context-menu]] [app.main.ui.workspace.tokens.management.group :refer [token-group*]] @@ -136,7 +136,7 @@ (when (and (some? selected-token-set-name) (not (token-set-active? selected-token-set-name))) [:* - [:> i/icon* {:class (stl/css :sets-header-status-icon) :icon-id i/eye-off}] + [:> icon* {:class (stl/css :sets-header-status-icon) :icon-id i/eye-off}] [:> text* {:as "span" :typography "body-small" :class (stl/css :sets-header-status-text)} (tr "workspace.tokens.inactive-set")]])]] diff --git a/frontend/src/app/main/ui/workspace/tokens/management/context_menu.cljs b/frontend/src/app/main/ui/workspace/tokens/management/context_menu.cljs index c49027a2bc..34c44683e9 100644 --- a/frontend/src/app/main/ui/workspace/tokens/management/context_menu.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/management/context_menu.cljs @@ -20,7 +20,7 @@ [app.main.refs :as refs] [app.main.store :as st] [app.main.ui.components.dropdown :refer [dropdown]] - [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.i18n :refer [tr]] [app.util.timers :as timers] @@ -420,12 +420,12 @@ (when hint [:span {:class (stl/css :context-menu-item-hint)} hint]) (when (not no-selectable) - [:> icon* {:icon-id "tick" :size "s" :class (stl/css :icon-wrapper)}]) + [:> icon* {:icon-id i/tick :size "s" :class (stl/css :icon-wrapper)}]) [:span {:class (stl/css :item-text)} title] (when children [:* - [:> icon* {:icon-id "arrow" :size "s"}] + [:> icon* {:icon-id i/arrow :size "s"}] [:ul {:ref submenu-ref :class (stl/css-case :token-context-submenu true diff --git a/frontend/src/app/main/ui/workspace/tokens/management/create/form.cljs b/frontend/src/app/main/ui/workspace/tokens/management/create/form.cljs index ba445a9b17..e58cd31b3f 100644 --- a/frontend/src/app/main/ui/workspace/tokens/management/create/form.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/management/create/form.cljs @@ -843,7 +843,7 @@ custom-input-token-value-props: Custom props passed to the custom-input-token-va [:> icon-button* {:on-click on-click-dropdown-button :aria-label (tr "workspace.tokens.token-font-family-select") - :icon "arrow-down" + :icon i/arrow-down :variant "action" :type "button"}])] [:* @@ -854,7 +854,7 @@ custom-input-token-value-props: Custom props passed to the custom-input-token-va :ref input-ref :on-blur on-blur :on-change on-update-value' - :icon "text-font-family" + :icon i/text-font-family :slot-end font-selector-button :token-resolve-result token-resolve-result}] (when font-selector-open? diff --git a/frontend/src/app/main/ui/workspace/tokens/management/group.cljs b/frontend/src/app/main/ui/workspace/tokens/management/group.cljs index f014375a60..dfdd2f202d 100644 --- a/frontend/src/app/main/ui/workspace/tokens/management/group.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/management/group.cljs @@ -15,6 +15,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.tokens.management.token-pill :refer [token-pill*]] [app.util.dom :as dom] @@ -109,7 +110,7 @@ (when can-edit? [:> icon-button* {:on-click on-popover-open-click :variant "ghost" - :icon "add" + :icon i/add :aria-label (tr "workspace.tokens.add-token" title)}])] (when is-open [:& cmm/asset-section-block {:role :content} diff --git a/frontend/src/app/main/ui/workspace/tokens/management/token_pill.cljs b/frontend/src/app/main/ui/workspace/tokens/management/token_pill.cljs index afc2e85b82..b21f54067f 100644 --- a/frontend/src/app/main/ui/workspace/tokens/management/token_pill.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/management/token_pill.cljs @@ -18,7 +18,7 @@ [app.main.data.workspace.tokens.format :as dwtf] [app.main.refs :as refs] [app.main.ui.components.color-bullet :refer [color-bullet]] - [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.utilities.token.token-status :refer [token-status-icon*]] [app.util.dom :as dom] [app.util.i18n :refer [tr]] @@ -294,7 +294,7 @@ (cond errors? [:> icon* - {:icon-id "broken-link" + {:icon-id i/broken-link :class (stl/css :token-pill-icon)}] color diff --git a/frontend/src/app/main/ui/workspace/tokens/sets/lists.cljs b/frontend/src/app/main/ui/workspace/tokens/sets/lists.cljs index cf0cff1d95..3b772f2009 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sets/lists.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/sets/lists.cljs @@ -14,7 +14,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 :refer [icon*] :as ic] + [app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i] [app.main.ui.ds.foundations.typography.text :refer [text*]] [app.main.ui.hooks :as h] [app.main.ui.workspace.tokens.sets.helpers :as sets-helpers] @@ -86,7 +86,7 @@ {:aria-label aria-label :class (stl/css :check-icon) :size "s" - :icon-id (if mixed? ic/remove ic/tick)}])])) + :icon-id (if mixed? i/remove i/tick)}])])) (mf/defc inline-add-button* [] @@ -105,7 +105,7 @@ (mf/defc add-button* [] [:> icon-button* {:variant "ghost" - :icon "add" + :icon i/add :on-click on-start-creation :aria-label (tr "workspace.tokens.add set")}]) @@ -298,7 +298,7 @@ :aria-checked is-active} [:> icon* - {:icon-id "document" + {:icon-id i/document :class (stl/css-case :icon true :root-icon (not tree-depth))}] (if is-editing diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs index e00b09286f..3e8efc67d6 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs @@ -17,6 +17,7 @@ [app.main.ui.context :as ctx] [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 :as i] [app.main.ui.hooks :as h] [app.main.ui.hooks.resize :refer [use-resize-hook]] [app.main.ui.workspace.tokens.management :refer [tokens-section*]] @@ -120,7 +121,7 @@ [:div {:class (stl/css :import-export-button-wrapper)} [:> button* {:on-click open-menu - :icon "import-export" + :icon i/import-export :variant "secondary"} (tr "workspace.tokens.tools")] [:> dropdown-menu* {:show show-menu? @@ -137,9 +138,9 @@ (tr "labels.export")]] - (when (and can-edit? (contains? cf/flags :token-units)) + (when (and can-edit? (contains? cf/flags :token-base-font-size)) [:> icon-button* {:variant "secondary" - :icon "settings" + :icon i/settings :aria-label "Settings" :on-click open-settings-modal}])])) diff --git a/frontend/src/app/main/ui/workspace/tokens/themes/create_modal.cljs b/frontend/src/app/main/ui/workspace/tokens/themes/create_modal.cljs index 8bae6baaf0..2c9ac18e42 100644 --- a/frontend/src/app/main/ui/workspace/tokens/themes/create_modal.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/themes/create_modal.cljs @@ -22,10 +22,10 @@ [app.main.ui.ds.controls.combobox :refer [combobox*]] [app.main.ui.ds.controls.input :refer [input*]] [app.main.ui.ds.controls.utilities.label :refer [label*]] - [app.main.ui.ds.foundations.assets.icon :refer [icon*] :as ic] + [app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i] [app.main.ui.ds.foundations.typography.heading :refer [heading*]] [app.main.ui.ds.foundations.typography.text :refer [text*]] - [app.main.ui.icons :as i] + [app.main.ui.icons :as deprecated-icon] [app.main.ui.workspace.tokens.sets.lists :as wts] [app.util.dom :as dom] [app.util.i18n :refer [tr]] @@ -69,11 +69,11 @@ :name name} [:& radio-button {:id :on :value :on - :icon i/tick + :icon deprecated-icon/tick :label ""}] [:& radio-button {:id :off :value :off - :icon i/close + :icon deprecated-icon/close :label ""}]])) (mf/defc themes-overview @@ -102,7 +102,7 @@ :class (stl/css :theme-group-label) :typography "body-large"} [:div {:class (stl/css :group-title) :title (str (tr "workspace.tokens.group-name") ": " group)} - [:> icon* {:icon-id "group" :class (stl/css :group-title-icon)}] + [:> icon* {:icon-id i/group :class (stl/css :group-title-icon)}] [:> text* {:as "span" :typography "body-medium" :class (stl/css :group-title-name)} group]]]) [:ul {:class (stl/css :theme-group-rows-wrapper)} (for [[_ {:keys [group name] :as theme}] themes @@ -147,12 +147,12 @@ (if sets-count (tr "workspace.tokens.num-active-sets" sets-count) (tr "workspace.tokens.no-active-sets"))] - [:> icon* {:icon-id "arrow-right"}]]]) + [:> icon* {:icon-id i/arrow-right}]]]) [:> icon-button* {:on-click delete-theme :variant "ghost" :aria-label (tr "workspace.tokens.delete-theme-title") - :icon "delete"}]]])]])] + :icon i/delete}]]])]])] [:div {:class (stl/css :button-footer)} [:> button* {:variant "secondary" @@ -334,7 +334,7 @@ [:button {:on-click on-back :class (stl/css :back-btn) :type "button"} - [:> icon* {:icon-id ic/arrow-left :aria-hidden true}] + [:> icon* {:icon-id i/arrow-left :aria-hidden true}] (tr "workspace.tokens.back-to-themes")]) [:> theme-inputs* {:theme current-theme @@ -357,7 +357,7 @@ (when is-editing [:> button* {:variant "secondary" :type "button" - :icon "delete" + :icon i/delete :on-click on-delete-theme} (tr "labels.delete")]) [:div {:class (stl/css :button-footer)} @@ -441,5 +441,5 @@ :on-click modal/hide! :aria-label (tr "labels.close") :variant "action" - :icon "close"}] + :icon i/close}] [:> themes-modal-body*]]]) diff --git a/frontend/src/app/main/ui/workspace/top_toolbar.cljs b/frontend/src/app/main/ui/workspace/top_toolbar.cljs index 5d8abacdad..54a6bca3e0 100644 --- a/frontend/src/app/main/ui/workspace/top_toolbar.cljs +++ b/frontend/src/app/main/ui/workspace/top_toolbar.cljs @@ -19,7 +19,7 @@ [app.main.store :as st] [app.main.ui.components.file-uploader :refer [file-uploader]] [app.main.ui.context :as ctx] - [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.timers :as ts] @@ -58,7 +58,7 @@ :aria-label (tr "workspace.toolbar.image" (sc/get-tooltip :insert-image)) :on-click on-click :class (stl/css :main-toolbar-options-button)} - i/img + deprecated-icon/img [:& file-uploader {:input-id "image-upload" :accept dwm/accept-image-types @@ -143,7 +143,7 @@ :selected (and (nil? drawtool) (not edition))) :on-click interrupt} - i/move]] + deprecated-icon/move]] [:* [:li [:button @@ -153,7 +153,7 @@ :on-click select-drawtool :data-tool "frame" :data-testid "artboard-btn"} - i/board]] + deprecated-icon/board]] [:li [:button {:title (tr "workspace.toolbar.rect" (sc/get-tooltip :draw-rect)) @@ -162,7 +162,7 @@ :on-click select-drawtool :data-tool "rect" :data-testid "rect-btn"} - i/rectangle]] + deprecated-icon/rectangle]] [:li [:button {:title (tr "workspace.toolbar.ellipse" (sc/get-tooltip :draw-ellipse)) @@ -171,7 +171,7 @@ :on-click select-drawtool :data-tool "circle" :data-testid "ellipse-btn"} - i/elipse]] + deprecated-icon/elipse]] [:li [:button {:title (tr "workspace.toolbar.text" (sc/get-tooltip :draw-text)) @@ -179,7 +179,7 @@ :class (stl/css-case :main-toolbar-options-button true :selected (= drawtool :text)) :on-click select-drawtool :data-tool "text"} - i/text]] + deprecated-icon/text]] [:& image-upload] @@ -191,7 +191,7 @@ :on-click select-drawtool :data-tool "curve" :data-testid "curve-btn"} - i/curve]] + deprecated-icon/curve]] [:li [:button {:title (tr "workspace.toolbar.path" (sc/get-tooltip :draw-path)) @@ -200,7 +200,7 @@ :on-click select-drawtool :data-tool "path" :data-testid "path-btn"} - i/path]] + deprecated-icon/path]] (when (features/active-feature? @st/state "plugins/runtime") [:li @@ -214,7 +214,7 @@ (modal/show :plugin-management {})) :data-tool "plugins" :data-testid "plugins-btn"} - i/puzzle]]) + deprecated-icon/puzzle]]) (when *assert* [:li @@ -222,7 +222,7 @@ {:title "Debugging tool" :class (stl/css-case :main-toolbar-options-button true :selected (contains? layout :debug-panel)) :on-click toggle-debug-panel} - i/bug]])]] + deprecated-icon/bug]])]] [:button {:title (tr "workspace.toolbar.toggle-toolbar") :aria-label (tr "workspace.toolbar.toggle-toolbar") diff --git a/frontend/src/app/main/ui/workspace/viewport/grid_layout_editor.cljs b/frontend/src/app/main/ui/workspace/viewport/grid_layout_editor.cljs index 4f94b0bde0..2b5085bf8f 100644 --- a/frontend/src/app/main/ui/workspace/viewport/grid_layout_editor.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/grid_layout_editor.cljs @@ -28,7 +28,7 @@ [app.main.store :as st] [app.main.ui.css-cursors :as cur] [app.main.ui.formats :as fmt] - [app.main.ui.icons :as i] + [app.main.ui.icons :as deprecated-icon] [app.main.ui.workspace.viewport.viewport-ref :as uwvv] [app.util.debug :as dbg] [app.util.dom :as dom] @@ -915,7 +915,7 @@ :on-blur handle-blur-track-input}] (when (and hovering? (not medium?) (not small?)) [:button {:class (stl/css :grid-editor-button) - :on-click handle-show-track-menu} i/menu])]])] + :on-click handle-show-track-menu} deprecated-icon/menu])]])] [:g {:transform (when (= type :row) (dm/fmt "rotate(-90 % %)" (:x marker-p) (:y marker-p)))} [:& track-marker diff --git a/frontend/src/app/main/ui/workspace/viewport/path_actions.cljs b/frontend/src/app/main/ui/workspace/viewport/path_actions.cljs index 5930c74c12..81bd964e5c 100644 --- a/frontend/src/app/main/ui/workspace/viewport/path_actions.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/path_actions.cljs @@ -11,39 +11,39 @@ [app.main.data.workspace.path :as drp] [app.main.data.workspace.path.shortcuts :as sc] [app.main.store :as st] - [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 pentool-icon - (i/icon-xref :pentool (stl/css :pentool-icon :pathbar-icon))) + (deprecated-icon/icon-xref :pentool (stl/css :pentool-icon :pathbar-icon))) (def ^:private move-icon - (i/icon-xref :move (stl/css :move-icon :pathbar-icon))) + (deprecated-icon/icon-xref :move (stl/css :move-icon :pathbar-icon))) (def ^:private add-icon - (i/icon-xref :add (stl/css :add-icon :pathbar-icon))) + (deprecated-icon/icon-xref :add (stl/css :add-icon :pathbar-icon))) (def ^:private remove-icon - (i/icon-xref :remove (stl/css :remove :pathbar-icon))) + (deprecated-icon/icon-xref :remove (stl/css :remove :pathbar-icon))) (def ^:private merge-nodes-icon - (i/icon-xref :merge-nodes (stl/css :merge-nodes-icon :pathbar-icon))) + (deprecated-icon/icon-xref :merge-nodes (stl/css :merge-nodes-icon :pathbar-icon))) (def ^:private join-nodes-icon - (i/icon-xref :join-nodes (stl/css :join-nodes-icon :pathbar-icon))) + (deprecated-icon/icon-xref :join-nodes (stl/css :join-nodes-icon :pathbar-icon))) (def ^:private separate-nodes-icon - (i/icon-xref :separate-nodes (stl/css :separate-nodes-icon :pathbar-icon))) + (deprecated-icon/icon-xref :separate-nodes (stl/css :separate-nodes-icon :pathbar-icon))) (def ^:private to-corner-icon - (i/icon-xref :to-corner (stl/css :to-corner-icon :pathbar-icon))) + (deprecated-icon/icon-xref :to-corner (stl/css :to-corner-icon :pathbar-icon))) (def ^:private to-curve-icon - (i/icon-xref :to-curve (stl/css :to-curve-icon :pathbar-icon))) + (deprecated-icon/icon-xref :to-curve (stl/css :to-curve-icon :pathbar-icon))) (def ^:private snap-nodes-icon - (i/icon-xref :snap-nodes (stl/css :snap-nodes-icon :pathbar-icon))) + (deprecated-icon/icon-xref :snap-nodes (stl/css :snap-nodes-icon :pathbar-icon))) (defn check-enabled [content selected-points] (when content diff --git a/frontend/src/app/main/ui/workspace/viewport/widgets.cljs b/frontend/src/app/main/ui/workspace/viewport/widgets.cljs index 816eee1fa8..b017e7bd78 100644 --- a/frontend/src/app/main/ui/workspace/viewport/widgets.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/widgets.cljs @@ -23,7 +23,7 @@ [app.main.streams :as ms] [app.main.ui.context :as ctx] [app.main.ui.hooks :as hooks] - [app.main.ui.icons :as i] + [app.main.ui.icons :as deprecated-icon] [app.main.ui.workspace.viewport.utils :as vwu] [app.util.debug :as dbg] [app.util.dom :as dom] @@ -330,7 +330,7 @@ :on-double-click on-double-click :on-pointer-enter on-pointer-enter :on-pointer-leave on-pointer-leave} - i/play + deprecated-icon/play [:span flow-name]]]])) (mf/defc frame-flows* diff --git a/frontend/src/app/util/shape_icon.cljs b/frontend/src/app/util/shape_icon.cljs index dcc484184b..3602d8d24c 100644 --- a/frontend/src/app/util/shape_icon.cljs +++ b/frontend/src/app/util/shape_icon.cljs @@ -60,7 +60,7 @@ "elipse") :path (if (cts/has-images? shape) "img" - "rectangle") + "path") :rect (if (cts/has-images? shape) "img" "rectangle") diff --git a/frontend/translations/cs.po b/frontend/translations/cs.po index c9e6d0fb8e..e7a622d9f5 100644 --- a/frontend/translations/cs.po +++ b/frontend/translations/cs.po @@ -1225,7 +1225,7 @@ msgid "errors.ldap-disabled" msgstr "Ověřování LDAP je vypnuto." #: src/app/main/errors.cljs:289, src/app/main/ui/dashboard/team.cljs:189, src/app/main/ui/onboarding/team_choice.cljs:105 -msgid "errors.max-quote-reached" +msgid "errors.max-quota-reached" msgstr "Dosáhli jste '%s' kvóty. Kontaktujte podporu." #: src/app/main/ui/dashboard/team.cljs:185, src/app/main/ui/onboarding/team_choice.cljs:101 diff --git a/frontend/translations/de.po b/frontend/translations/de.po index bb067780dd..6af6cc6501 100644 --- a/frontend/translations/de.po +++ b/frontend/translations/de.po @@ -1345,7 +1345,7 @@ msgid "errors.ldap-disabled" msgstr "Die LDAP-Authentifizierung ist deaktiviert." #: src/app/main/errors.cljs:289, src/app/main/ui/dashboard/team.cljs:189, src/app/main/ui/onboarding/team_choice.cljs:105 -msgid "errors.max-quote-reached" +msgid "errors.max-quota-reached" msgstr "Sie haben das Limit von '%s' erreicht. Kontaktieren Sie den Support." #: src/app/main/ui/dashboard/team.cljs:185, src/app/main/ui/onboarding/team_choice.cljs:101 diff --git a/frontend/translations/en.po b/frontend/translations/en.po index fdc42bb441..3d7523d610 100644 --- a/frontend/translations/en.po +++ b/frontend/translations/en.po @@ -880,7 +880,7 @@ msgstr "The plugin URL is incorrect" #: src/app/main/ui/dashboard.cljs:205 msgid "dashboard.plugins.parse-error" -msgstr "Cannot parser the plugin manifest" +msgstr "Cannot parse the plugin manifest" #: src/app/main/ui/dashboard.cljs:168 msgid "dashboard.plugins.try-plugin" @@ -1358,8 +1358,8 @@ msgid "errors.ldap-disabled" msgstr "LDAP authentication is disabled." #: src/app/main/errors.cljs:289, src/app/main/ui/dashboard/team.cljs:189, src/app/main/ui/onboarding/team_choice.cljs:105 -msgid "errors.max-quote-reached" -msgstr "You have reached the '%s' quote. Contact with support." +msgid "errors.max-quota-reached" +msgstr "You have reached the '%s' quota. Contact support." #: src/app/main/ui/dashboard/team.cljs:185, src/app/main/ui/onboarding/team_choice.cljs:101 msgid "errors.maximum-invitations-by-request-reached" @@ -2360,7 +2360,7 @@ msgstr "Product or UX design" #: src/app/main/ui/onboarding/questions.cljs:90 msgid "labels.product-management" -msgstr "Product Managment" +msgstr "Product Management" #: src/app/main/ui/settings/profile.cljs:128, src/app/main/ui/settings/sidebar.cljs:93 msgid "labels.profile" @@ -5615,6 +5615,9 @@ msgstr "Swap component" msgid "workspace.options.component.swap.empty" msgstr "There are no assets in this library yet" +msgid "workspace.component.swap.loop-error" +msgstr "Components can't be nested inside themselves" + #: src/app/main/ui/workspace/sidebar/options/menus/component.cljs:973 msgid "workspace.options.component.unlinked" msgstr "Unlinked" diff --git a/frontend/translations/es.po b/frontend/translations/es.po index 989c31c8e7..756087a184 100644 --- a/frontend/translations/es.po +++ b/frontend/translations/es.po @@ -1362,7 +1362,7 @@ msgid "errors.ldap-disabled" msgstr "La autheticacion via LDAP esta deshabilitada." #: src/app/main/errors.cljs:289, src/app/main/ui/dashboard/team.cljs:189, src/app/main/ui/onboarding/team_choice.cljs:105 -msgid "errors.max-quote-reached" +msgid "errors.max-quota-reached" msgstr "Ha alcalzando el maximo de la quota '%s'. Contacte con soporte tecnico." #: src/app/main/ui/dashboard/team.cljs:185, src/app/main/ui/onboarding/team_choice.cljs:101 @@ -5622,6 +5622,9 @@ msgstr "Intercambiar componente" msgid "workspace.options.component.swap.empty" msgstr "Aún no hay recursos en esta biblioteca" +msgid "workspace.component.swap.loop-error" +msgstr "Los componentes no pueden anidarse dentro de sí mismos" + #: src/app/main/ui/workspace/sidebar/options/menus/component.cljs:973 msgid "workspace.options.component.unlinked" msgstr "Desvinculado" diff --git a/frontend/translations/eu.po b/frontend/translations/eu.po index de583ab0bd..a28696ec9c 100644 --- a/frontend/translations/eu.po +++ b/frontend/translations/eu.po @@ -861,7 +861,7 @@ msgid "errors.ldap-disabled" msgstr "LDAP bidez sartzea desgaituta dago." #: src/app/main/errors.cljs:289, src/app/main/ui/dashboard/team.cljs:189, src/app/main/ui/onboarding/team_choice.cljs:105 -msgid "errors.max-quote-reached" +msgid "errors.max-quota-reached" msgstr "" "Kuotaren maximora heldu zara: '%s'. Jarri kontaktuan laguntza " "zerbitzuarekin." diff --git a/frontend/translations/fr.po b/frontend/translations/fr.po index dc1c6c9fad..29727f35fb 100644 --- a/frontend/translations/fr.po +++ b/frontend/translations/fr.po @@ -1368,7 +1368,7 @@ msgid "errors.ldap-disabled" msgstr "Authentification LDAP désactivée." #: src/app/main/errors.cljs:289, src/app/main/ui/dashboard/team.cljs:189, src/app/main/ui/onboarding/team_choice.cljs:105 -msgid "errors.max-quote-reached" +msgid "errors.max-quota-reached" msgstr "" "Vous avez atteint le quota maximal de « %s ». Contactez l'assistance " "technique." diff --git a/frontend/translations/ha.po b/frontend/translations/ha.po index 767a9300f2..7c7cc67ed1 100644 --- a/frontend/translations/ha.po +++ b/frontend/translations/ha.po @@ -925,7 +925,7 @@ msgid "errors.ldap-disabled" msgstr "LDAP ya gaza tantancewa." #: src/app/main/errors.cljs:289, src/app/main/ui/dashboard/team.cljs:189, src/app/main/ui/onboarding/team_choice.cljs:105 -msgid "errors.max-quote-reached" +msgid "errors.max-quota-reached" msgstr "kammala adadin '%s' madogara. gyara." #: src/app/main/data/workspace/media.cljs:190 diff --git a/frontend/translations/he.po b/frontend/translations/he.po index ed2fe56002..b0368ae8ef 100644 --- a/frontend/translations/he.po +++ b/frontend/translations/he.po @@ -1322,7 +1322,7 @@ msgid "errors.ldap-disabled" msgstr "אימות מול LDAP הושבת." #: src/app/main/errors.cljs:289, src/app/main/ui/dashboard/team.cljs:189, src/app/main/ui/onboarding/team_choice.cljs:105 -msgid "errors.max-quote-reached" +msgid "errors.max-quota-reached" msgstr "הגעת למיכסת ה־‚%s’. נא ליצור קשר עם התמיכה." #: src/app/main/ui/dashboard/team.cljs:185, src/app/main/ui/onboarding/team_choice.cljs:101 diff --git a/frontend/translations/hi.po b/frontend/translations/hi.po index 42bf89cd93..6724624b12 100644 --- a/frontend/translations/hi.po +++ b/frontend/translations/hi.po @@ -1345,7 +1345,7 @@ msgid "errors.ldap-disabled" msgstr "LDAP प्रमाणीकरण अक्षम है।" #: src/app/main/errors.cljs:289, src/app/main/ui/dashboard/team.cljs:189, src/app/main/ui/onboarding/team_choice.cljs:105 -msgid "errors.max-quote-reached" +msgid "errors.max-quota-reached" msgstr "आप '%s' सीमा तक पहुंच चुके हैं। सहायता से संपर्क करें।" #: src/app/main/ui/dashboard/team.cljs:185, src/app/main/ui/onboarding/team_choice.cljs:101 diff --git a/frontend/translations/hr.po b/frontend/translations/hr.po index 853b3081ba..4513171252 100644 --- a/frontend/translations/hr.po +++ b/frontend/translations/hr.po @@ -1223,7 +1223,7 @@ msgid "errors.ldap-disabled" msgstr "Onemogućena je LDAP provjera autentičnosti." #: src/app/main/errors.cljs:289, src/app/main/ui/dashboard/team.cljs:189, src/app/main/ui/onboarding/team_choice.cljs:105 -msgid "errors.max-quote-reached" +msgid "errors.max-quota-reached" msgstr "Dosegli ste kvotu '%s'. Kontaktirajte podršku." #: src/app/main/ui/dashboard/team.cljs:185, src/app/main/ui/onboarding/team_choice.cljs:101 diff --git a/frontend/translations/id.po b/frontend/translations/id.po index 18ca13c4b6..7eefde9b8a 100644 --- a/frontend/translations/id.po +++ b/frontend/translations/id.po @@ -1282,7 +1282,7 @@ msgid "errors.ldap-disabled" msgstr "Autentikasi LDAP dinonaktifkan." #: src/app/main/errors.cljs:289, src/app/main/ui/dashboard/team.cljs:189, src/app/main/ui/onboarding/team_choice.cljs:105 -msgid "errors.max-quote-reached" +msgid "errors.max-quota-reached" msgstr "Anda telah meraih kutipan '%s'. Hubungi dukungan." #: src/app/main/ui/dashboard/team.cljs:185, src/app/main/ui/onboarding/team_choice.cljs:101 diff --git a/frontend/translations/ig.po b/frontend/translations/ig.po index 53d0000133..5a36b3930c 100644 --- a/frontend/translations/ig.po +++ b/frontend/translations/ig.po @@ -816,7 +816,7 @@ msgid "errors.ldap-disabled" msgstr "LDAP mbinye aka agaghị ." #: src/app/main/errors.cljs:289, src/app/main/ui/dashboard/team.cljs:189, src/app/main/ui/onboarding/team_choice.cljs:105 -msgid "errors.max-quote-reached" +msgid "errors.max-quota-reached" msgstr "I ruola '%s' ole a chọrọ . Chọọ enyemaka nkwado ." #: src/app/main/data/workspace/media.cljs:190 diff --git a/frontend/translations/it.po b/frontend/translations/it.po index e06c4ad681..17f63cc60b 100644 --- a/frontend/translations/it.po +++ b/frontend/translations/it.po @@ -1350,7 +1350,7 @@ msgid "errors.ldap-disabled" msgstr "Autenticazione LDAP disabilitata." #: src/app/main/errors.cljs:289, src/app/main/ui/dashboard/team.cljs:189, src/app/main/ui/onboarding/team_choice.cljs:105 -msgid "errors.max-quote-reached" +msgid "errors.max-quota-reached" msgstr "Hai raggiunto la quota '%s'. Contatta il supporto." #: src/app/main/ui/dashboard/team.cljs:185, src/app/main/ui/onboarding/team_choice.cljs:101 diff --git a/frontend/translations/lv.po b/frontend/translations/lv.po index fc07699bea..805c0d227c 100644 --- a/frontend/translations/lv.po +++ b/frontend/translations/lv.po @@ -1348,7 +1348,7 @@ msgid "errors.ldap-disabled" msgstr "LDAP autentifikācija ir atspējota." #: src/app/main/errors.cljs:289, src/app/main/ui/dashboard/team.cljs:189, src/app/main/ui/onboarding/team_choice.cljs:105 -msgid "errors.max-quote-reached" +msgid "errors.max-quota-reached" msgstr "Ir sasniegts '%s' ierobežojums. Jāsazinās ar atbalstu." #: src/app/main/ui/dashboard/team.cljs:185, src/app/main/ui/onboarding/team_choice.cljs:101 diff --git a/frontend/translations/ms.po b/frontend/translations/ms.po index 61b93bfcb3..14ad9feadd 100644 --- a/frontend/translations/ms.po +++ b/frontend/translations/ms.po @@ -948,7 +948,7 @@ msgid "errors.ldap-disabled" msgstr "Pengesahan LDAP dilumpuhkan." #: src/app/main/errors.cljs:289, src/app/main/ui/dashboard/team.cljs:189, src/app/main/ui/onboarding/team_choice.cljs:105 -msgid "errors.max-quote-reached" +msgid "errors.max-quota-reached" msgstr "Anda telah mencapai petikan '%s'. Hubungi sokongan." #: src/app/main/data/workspace/media.cljs:190 diff --git a/frontend/translations/nl.po b/frontend/translations/nl.po index 0423ec8a3c..6ee02a4d30 100644 --- a/frontend/translations/nl.po +++ b/frontend/translations/nl.po @@ -1357,7 +1357,7 @@ msgid "errors.ldap-disabled" msgstr "LDAP-authenticatie is uitgeschakeld." #: src/app/main/errors.cljs:289, src/app/main/ui/dashboard/team.cljs:189, src/app/main/ui/onboarding/team_choice.cljs:105 -msgid "errors.max-quote-reached" +msgid "errors.max-quota-reached" msgstr "Je hebt de limiet van '%s' bereikt. Neem contact op met support." #: src/app/main/ui/dashboard/team.cljs:185, src/app/main/ui/onboarding/team_choice.cljs:101 diff --git a/frontend/translations/pl.po b/frontend/translations/pl.po index 20c282bc72..4d60959d84 100644 --- a/frontend/translations/pl.po +++ b/frontend/translations/pl.po @@ -846,7 +846,7 @@ msgid "errors.ldap-disabled" msgstr "Uwierzytelnianie LDAP jest wyłączone." #: src/app/main/errors.cljs:289, src/app/main/ui/dashboard/team.cljs:189, src/app/main/ui/onboarding/team_choice.cljs:105 -msgid "errors.max-quote-reached" +msgid "errors.max-quota-reached" msgstr "Osiągnąłeś limit '%s'. Skontaktuj się z pomocą techniczną." #: src/app/main/data/workspace/media.cljs:190 diff --git a/frontend/translations/pt_BR.po b/frontend/translations/pt_BR.po index aa600562b0..be911ee28b 100644 --- a/frontend/translations/pt_BR.po +++ b/frontend/translations/pt_BR.po @@ -1164,7 +1164,7 @@ msgid "errors.ldap-disabled" msgstr "Autenticação por LDAP está desativada." #: src/app/main/errors.cljs:289, src/app/main/ui/dashboard/team.cljs:189, src/app/main/ui/onboarding/team_choice.cljs:105 -msgid "errors.max-quote-reached" +msgid "errors.max-quota-reached" msgstr "Você atingiu a cota de '%s'. Entre em contato com o suporte." #: src/app/main/ui/dashboard/team.cljs:185, src/app/main/ui/onboarding/team_choice.cljs:101 diff --git a/frontend/translations/pt_PT.po b/frontend/translations/pt_PT.po index b3917f0fb9..1f615729b1 100644 --- a/frontend/translations/pt_PT.po +++ b/frontend/translations/pt_PT.po @@ -1226,7 +1226,7 @@ msgid "errors.ldap-disabled" msgstr "Autenticação LDAP está desativada." #: src/app/main/errors.cljs:289, src/app/main/ui/dashboard/team.cljs:189, src/app/main/ui/onboarding/team_choice.cljs:105 -msgid "errors.max-quote-reached" +msgid "errors.max-quota-reached" msgstr "Alcançou o máximo da quota '%s'. Contacte o suporte técnico." #: src/app/main/data/workspace/media.cljs:190 diff --git a/frontend/translations/ro.po b/frontend/translations/ro.po index 4e73c43715..7a19a14c8e 100644 --- a/frontend/translations/ro.po +++ b/frontend/translations/ro.po @@ -1134,7 +1134,7 @@ msgid "errors.ldap-disabled" msgstr "Autentificarea cu LDAP este dezactivată." #: src/app/main/errors.cljs:289, src/app/main/ui/dashboard/team.cljs:189, src/app/main/ui/onboarding/team_choice.cljs:105 -msgid "errors.max-quote-reached" +msgid "errors.max-quota-reached" msgstr "Ați ajuns la cota \"%s\". Luați legătura cu serviciul de asistență." #: src/app/main/data/workspace/media.cljs:190 diff --git a/frontend/translations/ru.po b/frontend/translations/ru.po index 506753bd2d..68d3c0f58e 100644 --- a/frontend/translations/ru.po +++ b/frontend/translations/ru.po @@ -1166,7 +1166,7 @@ msgid "errors.ldap-disabled" msgstr "Вход c LDAP отключён." #: src/app/main/errors.cljs:289, src/app/main/ui/dashboard/team.cljs:189, src/app/main/ui/onboarding/team_choice.cljs:105 -msgid "errors.max-quote-reached" +msgid "errors.max-quota-reached" msgstr "Вы достигли указанного значения «%s». Обратитесь в службу поддержки." #: src/app/main/data/workspace/media.cljs:190 diff --git a/frontend/translations/sr.po b/frontend/translations/sr.po index 876ab62e73..b9920d3e8e 100644 --- a/frontend/translations/sr.po +++ b/frontend/translations/sr.po @@ -1003,7 +1003,7 @@ msgid "errors.ldap-disabled" msgstr "LDAP аутентификација је онемогућена." #: src/app/main/errors.cljs:289, src/app/main/ui/dashboard/team.cljs:189, src/app/main/ui/onboarding/team_choice.cljs:105 -msgid "errors.max-quote-reached" +msgid "errors.max-quota-reached" msgstr "Достигли сте квоту од '%s'. Контактирајте подршку." #: src/app/main/data/workspace/media.cljs:190 diff --git a/frontend/translations/sv.po b/frontend/translations/sv.po index 4ef271cfaa..90d65ee3be 100644 --- a/frontend/translations/sv.po +++ b/frontend/translations/sv.po @@ -1221,7 +1221,7 @@ msgid "errors.ldap-disabled" msgstr "LDAP-autentisering är inaktiverad." #: src/app/main/errors.cljs:289, src/app/main/ui/dashboard/team.cljs:189, src/app/main/ui/onboarding/team_choice.cljs:105 -msgid "errors.max-quote-reached" +msgid "errors.max-quota-reached" msgstr "Du har nått \"%s\" kvoten. Kontakta supporten." #: src/app/main/ui/dashboard/team.cljs:185, src/app/main/ui/onboarding/team_choice.cljs:101 diff --git a/frontend/translations/tr.po b/frontend/translations/tr.po index 8534be1565..02958b7ba6 100644 --- a/frontend/translations/tr.po +++ b/frontend/translations/tr.po @@ -1034,7 +1034,7 @@ msgid "errors.ldap-disabled" msgstr "LDAP ile oturum açma devre dışı bırakıldı." #: src/app/main/errors.cljs:289, src/app/main/ui/dashboard/team.cljs:189, src/app/main/ui/onboarding/team_choice.cljs:105 -msgid "errors.max-quote-reached" +msgid "errors.max-quota-reached" msgstr "'%s' sınırına ulaştınız. Destek ile iletişime geçin." #: src/app/main/data/workspace/media.cljs:190 diff --git a/frontend/translations/ukr_UA.po b/frontend/translations/ukr_UA.po index 8ebb93cd09..4912caf063 100644 --- a/frontend/translations/ukr_UA.po +++ b/frontend/translations/ukr_UA.po @@ -1359,7 +1359,7 @@ msgid "errors.ldap-disabled" msgstr "Автентифікація через LDAP вимкнена." #: src/app/main/errors.cljs:289, src/app/main/ui/dashboard/team.cljs:189, src/app/main/ui/onboarding/team_choice.cljs:105 -msgid "errors.max-quote-reached" +msgid "errors.max-quota-reached" msgstr "Ви досягли квоти \"%s\". Зв'яжіться із службою підтримки." #: src/app/main/ui/dashboard/team.cljs:185, src/app/main/ui/onboarding/team_choice.cljs:101 diff --git a/frontend/translations/yo.po b/frontend/translations/yo.po index 5267744c18..0d0071200d 100644 --- a/frontend/translations/yo.po +++ b/frontend/translations/yo.po @@ -884,7 +884,7 @@ msgid "errors.ldap-disabled" msgstr "Ìfàṣẹsí LDAP kò ṣe é ṣe ." #: src/app/main/errors.cljs:289, src/app/main/ui/dashboard/team.cljs:189, src/app/main/ui/onboarding/team_choice.cljs:105 -msgid "errors.max-quote-reached" +msgid "errors.max-quota-reached" msgstr "O ti débi '%s' ìfàmìsí. Késí i pẹ̀lú àtìlẹ́yìn ." #: src/app/main/data/workspace/media.cljs:190 diff --git a/frontend/translations/zh_CN.po b/frontend/translations/zh_CN.po index 00f517744d..c4cf99dc75 100644 --- a/frontend/translations/zh_CN.po +++ b/frontend/translations/zh_CN.po @@ -1269,7 +1269,7 @@ msgid "errors.ldap-disabled" msgstr "LDAP身份验证已禁用。" #: src/app/main/errors.cljs:289, src/app/main/ui/dashboard/team.cljs:189, src/app/main/ui/onboarding/team_choice.cljs:105 -msgid "errors.max-quote-reached" +msgid "errors.max-quota-reached" msgstr "您已达到“%s”报价。与支持人员联系。" #: src/app/main/data/workspace/media.cljs:190 diff --git a/frontend/translations/zh_Hant.po b/frontend/translations/zh_Hant.po index db13e5e5e2..49014fb066 100644 --- a/frontend/translations/zh_Hant.po +++ b/frontend/translations/zh_Hant.po @@ -1172,7 +1172,7 @@ msgid "errors.ldap-disabled" msgstr "LDAP 驗證已停用。" #: src/app/main/errors.cljs:289, src/app/main/ui/dashboard/team.cljs:189, src/app/main/ui/onboarding/team_choice.cljs:105 -msgid "errors.max-quote-reached" +msgid "errors.max-quota-reached" msgstr "你已達「%s」上限。請聯絡支援。" #: src/app/main/ui/dashboard/team.cljs:185, src/app/main/ui/onboarding/team_choice.cljs:101