johanels/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-12-12 06:24:17 +01:00
Code Issues Actions 9 Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/staging' into develop

Browse Source
This commit is contained in:
Alejandro Alonso
2025-09-09 08:40:35 +02:00
parent 8aed47dad3 e3c9588c1c
commit 43a238a896
197 changed files with 2092 additions and 1136 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
CHANGES.md
View File

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

5
backend/src/app/migrations.clj
View File

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

2
backend/src/app/migrations/sql/0141-add-idx-to-file_library_rel.sql Normal file
View File

@@ -0,0 +1,2 @@
CREATE INDEX file_library_rel__library_file_id__idx
ON file_library_rel (library_file_id);

79
backend/src/app/rpc/commands/files.clj
View File

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

41
common/src/app/common/files/helpers.cljc
View File

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

13
common/src/app/common/files/repair.cljc
View File

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

18
common/src/app/common/files/validate.cljc
View File

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

1
common/src/app/common/flags.cljc
View File

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

5
common/src/app/common/logic/shapes.cljc
View File

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

39
common/src/app/common/test_helpers/tokens.cljc
View File

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

22
common/src/app/common/types/container.cljc
View File

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

7
common/src/app/common/types/modifiers.cljc
View File

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

26
common/src/app/common/types/shape/layout.cljc
View File

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

25
common/src/app/common/types/token.cljc
View File

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

134
common/test/common_tests/logic/move_shapes_test.cljc
View File

@@ -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
@@ -82,3 +82,133 @@
(t/is (= (:parent-id circle') uuid/zero))
(t/is group)
(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')))))

151
common/test/common_tests/logic/token_apply_test.cljc
View File

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

483
frontend/playwright/data/workspace/get-file-8371.json Normal file
View File

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

2
frontend/playwright/ui/pages/OnboardingPage.js
View File

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

1
frontend/playwright/ui/pages/WorkspacePage.js
View File

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

28
frontend/playwright/ui/specs/workspace.spec.js
View File

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

10
frontend/src/app/main/data/dashboard.cljs
View File

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

2
frontend/src/app/main/data/workspace.cljs
View File

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

15
frontend/src/app/main/data/workspace/clipboard.cljs
View File

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

44
frontend/src/app/main/data/workspace/libraries.cljs
View File

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

12
frontend/src/app/main/data/workspace/selection.cljs
View File

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

20
frontend/src/app/main/data/workspace/tokens/application.cljs
View File

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

119
frontend/src/app/main/data/workspace/variants.cljs
View File

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

2
frontend/src/app/main/errors.cljs
View File

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -26,8 +26,8 @@
members-cta*
show-subscription-members-banner?]]
[app.main.ui.dashboard.team-form]
[app.main.ui.ds.foundations.assets.icon :refer [icon*]]
[app.main.ui.icons :as i]
[app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i]
[app.main.ui.icons :as deprecated-icon]
[app.main.ui.notifications.badge :refer [badge-notification]]
[app.main.ui.notifications.context-notification :refer [context-notification]]
[app.util.dom :as dom]
@@ -37,28 +37,28 @@
[rumext.v2 :as mf]))
(def ^:private arrow-icon
(i/icon-xref :arrow (stl/css :arrow-icon)))
(deprecated-icon/icon-xref :arrow (stl/css :arrow-icon)))
(def ^:private menu-icon
(i/icon-xref :menu (stl/css :menu-icon)))
(deprecated-icon/icon-xref :menu (stl/css :menu-icon)))
(def ^:private warning-icon
(i/icon-xref :msg-warning (stl/css :warning-icon)))
(deprecated-icon/icon-xref :msg-warning (stl/css :warning-icon)))
(def ^:private success-icon
(i/icon-xref :msg-success (stl/css :success-icon)))
(deprecated-icon/icon-xref :msg-success (stl/css :success-icon)))
(def ^:private image-icon
(i/icon-xref :img (stl/css :image-icon)))
(deprecated-icon/icon-xref :img (stl/css :image-icon)))
(def ^:private user-icon
(i/icon-xref :user (stl/css :user-icon)))
(deprecated-icon/icon-xref :user (stl/css :user-icon)))
(def ^:private document-icon
(i/icon-xref :document (stl/css :document-icon)))
(deprecated-icon/icon-xref :document (stl/css :document-icon)))
(def ^:private group-icon
(i/icon-xref :group (stl/css :group-icon)))
(deprecated-icon/icon-xref :group (stl/css :group-icon)))
(mf/defc header
{::mf/wrap [mf/memo]
@@ -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]

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -12,7 +12,7 @@
[app.main.store :as st]
[app.main.ui.components.forms :as fm]
[app.main.ui.dashboard.subscription :refer [get-subscription-type]]
[app.main.ui.icons :as i]
[app.main.ui.icons :as deprecated-icon]
[app.util.dom :as dom]
[app.util.i18n :as i18n :refer [tr c]]
[potok.v2.core :as ptk]
@@ -46,7 +46,7 @@
(for [benefit benefits]
[:li {:key (dm/str benefit) :class (stl/css :benefit)} "- " benefit])]
(when (and cta-link-with-icon cta-text-with-icon) [:button {:class (stl/css :cta-button :more-info)
:on-click cta-link-with-icon} cta-text-with-icon i/open-link])
:on-click cta-link-with-icon} cta-text-with-icon deprecated-icon/open-link])
(when (and cta-link cta-text) [:button {:class (stl/css-case :cta-button true
:bottom-link (not (and cta-link-trial cta-text-trial)))
:on-click cta-link} cta-text])
@@ -121,7 +121,7 @@
[:div {:class (stl/css :modal-overlay)}
[:div {:class (stl/css :modal-dialog)}
[:button {:class (stl/css :close-btn) :on-click handle-close-dialog} i/close]
[:button {:class (stl/css :close-btn) :on-click handle-close-dialog} deprecated-icon/close]
[:div {:class (stl/css :modal-title :subscription-title)}
(tr "subscription.settings.management.dialog.title" subscription-name)]
@@ -131,7 +131,7 @@
(tr "subscription.settings.management.dialog.currently-editors-title" (c (count editors)))]
[:button {:class (stl/css :cta-button :show-editors-button) :on-click handle-click}
(tr "subscription.settings.management.dialog.editors")
[:span {:class (stl/css :icon-dropdown)} i/arrow]]
[:span {:class (stl/css :icon-dropdown)} deprecated-icon/arrow]]
(when show-editors-list
[:*
[:p {:class (stl/css :editors-text :editors-list-warning)}
@@ -225,12 +225,12 @@
[:div {:class (stl/css :modal-overlay)}
[:div {:class (stl/css :modal-dialog :subscription-success)}
[:button {:class (stl/css :close-btn) :on-click handle-close-dialog} i/close]
[:button {:class (stl/css :close-btn) :on-click handle-close-dialog} deprecated-icon/close]
[:div {:class (stl/css :modal-success-content)}
[:div {:class (stl/css :modal-start)}
(if (= "light" (:theme profile))
i/logo-subscription-light
i/logo-subscription)]
deprecated-icon/logo-subscription-light
deprecated-icon/logo-subscription)]
[:div {:class (stl/css :modal-end)}
[:div {:class (stl/css :modal-title)} (tr "subscription.settings.sucess.dialog.title" subscription-name)]
@@ -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")

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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