diff --git a/CHANGES.md b/CHANGES.md
index 7e1a1760b..f80e97245 100644
--- a/CHANGES.md
+++ b/CHANGES.md
@@ -1,36 +1,136 @@
# CHANGELOG
-## :rocket: Next
+## 2.0.0 - I Just Can't Get Enough
+
+### :rocket: Epics and highlights
+- Grid CSS layout [Taiga #4915](https://tree.taiga.io/project/penpot/epic/4915)
+- UI redesign [Taiga #4958](https://tree.taiga.io/project/penpot/epic/4958)
+- New components System [Taiga #2662](https://tree.taiga.io/project/penpot/epic/2662)
+- Swap components [Taiga #1331](https://tree.taiga.io/project/penpot/us/1331)
+- Images as fill [Taiga #2983](https://tree.taiga.io/project/penpot/us/2983)
+- HTML code generation [Taiga #5277](https://tree.taiga.io/project/penpot/us/5277)
+- Light and dark themes [Taiga #2287](https://tree.taiga.io/project/penpot/us/2287)
### :boom: Breaking changes & Deprecations
-### :sparkles: New features
+- New strokes default to inside border [Taiga #6847](https://tree.taiga.io/project/penpot/issue/6847)
-### :bug: Bugs fixed
-
-### :arrow_up: Deps updates
-
-### :heart: Community contributions by (Thank you!)
-
-## 1.20.0
-
-### :boom: Breaking changes & Deprecations
+### :heart: Community contributions (Thank you!)
+- New Hausa, Yoruba and Igbo translations and update translation files (by All For Tech Empowerment Foundation) [Taiga #6950](https://tree.taiga.io/project/penpot/us/6950), [Taiga #6534](https://tree.taiga.io/project/penpot/us/6534)
+- Hide bounding-box when editing shape (by @VasilevsVV) [#3930](https://github.com/penpot/penpot/pull/3930)
+- CTRL + "+" to zoom into canvas instead of browser (by @audriu) [#3848](https://github.com/penpot/penpot/pull/3848)
+- Add dev deps.edn in the project root (by @PEZ) [#3794](https://github.com/penpot/penpot/pull/3794)
+- Allow passing overrides to frontend nginx config (by @m90) [#3602](https://github.com/penpot/penpot/pull/3602)
+- Update index.njk to remove typo (by @fdvmoreira) [#155](https://github.com/penpot/penpot-docs/pull/155)
+- Typo (by StephanEggermont) [#157](https://github.com/penpot/penpot-docs/pull/157)
### :sparkles: New features
-
+- Send comments with Ctrl+Enter / Cmd + Enter [Taiga #6085](https://tree.taiga.io/project/penpot/issue/6085)
- Select through stroke only rectangle [Taiga #5484](https://tree.taiga.io/project/penpot/issue/5484)
+- Stroke default position [Taiga #6847](https://tree.taiga.io/project/penpot/issue/6847)
- Override browser Ctrl+ and Ctrl- zoom with Penpot Zoom [Taiga #3200](https://tree.taiga.io/project/penpot/us/3200)
-- Reduce handlers for the flex layout gaps and paddings
+- Improve the way handlers work on flex layouts [Taiga #6598](https://tree.taiga.io/project/penpot/us/6598)
+- Add menu entry for toggle between light/dark theme [Taiga #6829](https://tree.taiga.io/project/penpot/issue/6829)
+- Switch themes shortcut [Taiga #6644](https://tree.taiga.io/project/penpot/us/6644)
+- Constraints section at design tab new position [Taiga #6830](https://tree.taiga.io/project/penpot/issue/6830)
+- [PICKER] File library colors order [Taiga #5399](https://tree.taiga.io/project/penpot/us/5399)
+- Onboarding invitations improvements [Taiga #5974](https://tree.taiga.io/project/penpot/us/5974)
+- [PERFORMANCE] Workspace thumbnails refactor [Taiga #5828](https://tree.taiga.io/project/penpot/us/5828)
+- [PERFORMANCE] Add performance optimizations to shape rendering [Taiga #5835](https://tree.taiga.io/project/penpot/us/5835)
+- [PERFORMANCE] Optimize SVG output [Taiga #4134](https://tree.taiga.io/project/penpot/us/4134)
+- [PERFORMANCE] Optimize svg on importation [Taiga #5879](https://tree.taiga.io/project/penpot/us/5879)
+- [PERFORMANCE] Optimization tasks related to design tab file [Taiga #5760](https://tree.taiga.io/project/penpot/us/5760)
+- [INSTALL] Ability to setup features by team [Taiga #6108](https://tree.taiga.io/project/penpot/us/6108)
+- [IMAGES] Keep aspect ratio option [Taiga #6933](https://tree.taiga.io/project/penpot/us/6933)
+- [INSPECT] UI review [Taiga #5687](https://tree.taiga.io/project/penpot/us/5687)
+- [GRID LAYOUT] Phase 1 [Taiga #4303](https://tree.taiga.io/project/penpot/us/4303)
+- [GRID LAYOUT] Inspect code for Grid [Taiga #5277](https://tree.taiga.io/project/penpot/us/5277)
+- [GRID LAYOUT] Phase 1 polishing [Taiga #5612](https://tree.taiga.io/project/penpot/us/5612)
+- [GRID LAYOUT] Improvements & Feedback [Taiga #6047](https://tree.taiga.io/project/penpot/us/6047)
+- [COMPONENTS] Naming of the main component [Taiga #5291](https://tree.taiga.io/project/penpot/us/5291)
+- [COMPONENTS] Rework inside of components - Library page [Taiga #2918](https://tree.taiga.io/project/penpot/us/2918)
+- [COMPONENTS] Update component when updating main instance [Taiga #3794](https://tree.taiga.io/project/penpot/us/3794)
+- [COMPONENTS] Main component new behavior [Taiga #3796](https://tree.taiga.io/project/penpot/us/3796)
+- [COMPONENTS] Main component look & feel [Taiga #5290](https://tree.taiga.io/project/penpot/us/5290)
+- [COMPONENTS] Library view [Taiga #2880](https://tree.taiga.io/project/penpot/us/2880)
+- [COMPONENTS] Positioning inside a component should relative, as in boards [Taiga #2826](https://tree.taiga.io/project/penpot/us/2826)
+- [COMPONENTS] Update message should show only if affecting at components that are being used at a file [Taiga #1397](https://tree.taiga.io/project/penpot/us/1397)
+- [COMPONENTS] Annotations [Taiga #4957](https://tree.taiga.io/project/penpot/us/4957)
+- [COMPONENTS] Synchronization order for nested components [Taiga #5439](https://tree.taiga.io/project/penpot/us/5439)
+- [COMPONENTS] Libraries modal zero case [Taiga #5294](https://tree.taiga.io/project/penpot/us/5294)
+- [COMPONENTS] Contextual menu casuistics [Taiga #5292](https://tree.taiga.io/project/penpot/us/5292)
+- [COMPONENTS] Libraries publishing flow review [Taiga #5293](https://tree.taiga.io/project/penpot/us/5293)
+- [COMPONENTS] Add loading text to Libraries modal [Taiga #6702](https://tree.taiga.io/project/penpot/us/6702)
+- [COMPONENTS] Components rename and organization in bulk [Taiga #2877](https://tree.taiga.io/project/penpot/us/2877)
+- [COMPONENTS] Info overlay about components V2 [Taiga #6276](https://tree.taiga.io/project/penpot/us/6276)
+- [REDESIGN] New styles basics [Taiga #4967](https://tree.taiga.io/project/penpot/us/4967)
+- [REDESIGN] Layers tab redesign [Taiga #4966](https://tree.taiga.io/project/penpot/us/4966)
+- [REDESIGN] Design tab phase 1 [Taiga #4982](https://tree.taiga.io/project/penpot/us/4966)
+- [REDESIGN] Assets tab redesign [Taiga #4984](https://tree.taiga.io/project/penpot/us/4984)
+- [REDESIGN] Palette panels (colors, typographies...) [Taiga #4983](https://tree.taiga.io/project/penpot/us/4983)
+- [REDESIGN] Workspace structure [Taiga #4988](https://tree.taiga.io/project/penpot/us/4988)
+- [REDESIGN] Shortcut tab [Taiga #4989](https://tree.taiga.io/project/penpot/us/4989)
+- [REDESIGN] Toolbar [Taiga #5500](https://tree.taiga.io/project/penpot/us/5500)
+- [REDESIGN] History tab [Taiga #5481](https://tree.taiga.io/project/penpot/us/5481)
+- [REDESIGN] Path options/toolbar [Taiga #5815](https://tree.taiga.io/project/penpot/us/5815)
+- [REDESIGN] Design tab phase 2 [Taiga #5814](https://tree.taiga.io/project/penpot/us/5814)
+- [REDESIGN] Design tab phase 3 and dashboard details [Taiga #5920](https://tree.taiga.io/project/penpot/us/5920)
+- [REDESIGN] Dashboard [Taiga #5164](https://tree.taiga.io/project/penpot/us/5164)
+- [REDESIGN] New Dashboard UI [Taiga #5869](https://tree.taiga.io/project/penpot/us/5869)
+- [REDESIGN] Prototype tab [Taiga #4985](https://tree.taiga.io/project/penpot/us/4985)
+- [REDESIGN] Code tab [Taiga #4986](https://tree.taiga.io/project/penpot/us/4986)
+- [REDESIGN] Modals and alert messages [Taiga #5915](https://tree.taiga.io/project/penpot/us/5915)
+- [REDESIGN] Comments page [Taiga #5917](https://tree.taiga.io/project/penpot/us/5917)
+- [REDESIGN] View Mode [Taiga #5163](https://tree.taiga.io/project/penpot/us/5163)
+- [REDESIGN] Miscellaneous tasks [Taiga #6050](https://tree.taiga.io/project/penpot/us/6050)
+- [REDESIGN] Swap components [Taiga #6739](https://tree.taiga.io/project/penpot/us/6739)
+- [REDESIGN] Font selector [Taiga #6677](https://tree.taiga.io/project/penpot/us/6677)
+- [REDESIGN] Colour system of alerts and notifications [Taiga #6746](https://tree.taiga.io/project/penpot/us/6746)
+- [REDESIGN] Review text in paragraphs for accessibility [Taiga #6703](https://tree.taiga.io/project/penpot/us/6703)
+- [REDESIGN] Interaction icons [Taiga #6880](https://tree.taiga.io/project/penpot/us/6880)
+- [REDESIGN] Panels visual separations [Taiga #6692](https://tree.taiga.io/project/penpot/us/6692)
+- [REDESIGN] Onboarding slides [Taiga #6678](https://tree.taiga.io/project/penpot/us/6678)
-### :bug: Bugs fixed
-
-- Fix pixelated thumbnails [Github #3681](https://github.com/penpot/penpot/issues/3681) [Github #3661](https://github.com/penpot/penpot/issues/3661)
+### :bug Bugs fixed
+- Fix pixelated thumbnails [Github #3681](https://github.com/penpot/penpot/issues/3681), [Github #3661](https://github.com/penpot/penpot/issues/3661)
- Fix problem with not applying colors to boards [Github #3941](https://github.com/penpot/penpot/issues/3941)
- Fix problem with path editor undoing changes [Github #3998](https://github.com/penpot/penpot/issues/3998)
+- [View mode] Open overlay places frame in the wrong position when paired with a fixed element [Taiga #6385](https://tree.taiga.io/project/penpot/issue/6385)
+- Flex Layout: Fit-content not recalculated after deleting an element [Taiga #5968](https://tree.taiga.io/project/penpot/issue/5968)
+- Selecting from Color Palette does not work for board when there is no existing fill [Taiga #6464](https://tree.taiga.io/project/penpot/issue/6464)
+- Color thumbnails are consistently rounded in the inspect code mode [Taiga #5886](https://tree.taiga.io/project/penpot/issue/5886)
+- Adding vector path points before first point of existing open path not working [Taiga #6593](https://tree.taiga.io/project/penpot/issue/6593)
+- Some image formats include the extension when importing [Taiga #5485](https://tree.taiga.io/project/penpot/issue/5485)
+- Gradient color tool doesn't work properly with flipped items [Taiga #6485](https://tree.taiga.io/project/penpot/issue/6485)
+- [TEXT] Align options are not shown when several text are selected [Taiga #5948](https://tree.taiga.io/project/penpot/issue/5948)
+- [VIEW MODE] Comments not working properly on multiple pages [Taiga #6281](https://tree.taiga.io/project/penpot/issue/6281)
+- [PERFORMANCE] Alignments are slow [Taiga #5865](https://tree.taiga.io/project/penpot/issue/5865)
+- [EXPORT] Exporting an element with a non-visible drop shadow displays the shadow either way [Taiga #6768](https://tree.taiga.io/project/penpot/issue/6768)
+- [SAFARI] Color picker cursor is not pointing correctly [Taiga #6733](https://tree.taiga.io/project/penpot/issue/6733)
+- [Import Files] When user has imported .penpot file with new file name of previously downloaded library file the default library file name is set for it [Taiga #5596](https://tree.taiga.io/project/penpot/issue/5596)
+- Issue when resizing a duotone FA icon [Taiga #5935](https://tree.taiga.io/project/penpot/issue/5935)
+- "Hide grid" keyboard shortcut broken [Taiga #5102](https://tree.taiga.io/project/penpot/issue/5102)
+- Picking a gradient color in recent colors for a new color in the assets tab crashes Penpot [Taiga #5601](https://tree.taiga.io/project/penpot/issue/5601)
+- Thumbnails not loading [Taiga #6012](https://tree.taiga.io/project/penpot/issue/6012)
+- Don't show signup link/form when registration is disabled. [Taiga #1196](https://tree.taiga.io/project/penpot/issue/1196)
+- Registration Page UI UX issue with small resolutions [Taiga #1693](https://tree.taiga.io/project/penpot/issue/1693)
+- [LOGIN] "E-Mail-Adress" input field is set to type 'text' instead of 'eMail [Taiga #1921](https://tree.taiga.io/project/penpot/issue/1921)
+- Handling correctly slashes "/" in emails [Taiga #4906](https://tree.taiga.io/project/penpot/issue/4906)
+- Tab character in texts crashes the app [Taiga #4418](https://tree.taiga.io/project/penpot/issue/4418)
+- Text does not match export [Taiga #4129](https://tree.taiga.io/project/penpot/issue/4129)
+- Scrollbars cover the layers carets [Taiga #4431](https://tree.taiga.io/project/penpot/issue/4431)
+- Horizontal ruler disappear when overlapping a board [Taiga #4138](https://tree.taiga.io/project/penpot/issue/4138)
+- Resize shape + Alt key is not working [Taiga #3447](https://tree.taiga.io/project/penpot/issue/3447)
+- Libraries images broken on premise [Taiga #4573](https://tree.taiga.io/project/penpot/issue/4573)
+- [VIEWER] Cannot scroll down in code mode [Taiga #4655](https://tree.taiga.io/project/penpot/issue/4655)
+- Strange cursor behavior after clicking viewport with text tool [Taiga #4363](https://tree.taiga.io/project/penpot/issue/4363)
+- Selected color affects all of them [Taiga #5285](https://tree.taiga.io/project/penpot/issue/5285)
+- Fix problem with shadow negative spread [Github #3421](https://github.com/penpot/penpot/issues/3421)
+- Fix problem with linked colors to strokes [Github #3522](https://github.com/penpot/penpot/issues/3522)
+- Fix problem with hand tool stuck [Github #3318](https://github.com/penpot/penpot/issues/3318)
+- Fix problem with fix scrolling on nested elements [Github #3508](https://github.com/penpot/penpot/issues/3508)
+- Fix problem when changing typography assets [Github #3683](https://github.com/penpot/penpot/issues/3683)
-### :arrow_up: Deps updates
-
-### :heart: Community contributions by (Thank you!)
## 1.19.5
diff --git a/backend/resources/app/templates/api-doc.tmpl b/backend/resources/app/templates/api-doc.tmpl
index aa0b2a7d9..8c67fdeee 100644
--- a/backend/resources/app/templates/api-doc.tmpl
+++ b/backend/resources/app/templates/api-doc.tmpl
@@ -37,6 +37,13 @@
GENERAL NOTES
+ HTTP Transport & Methods
+ The HTTP is the transport method for accesing this API; all
+ functions can be called using POST HTTP method; the functions
+ that starts with get- in the name, can use GET HTTP
+ method which in many cases benefits from the HTTP cache.
+
+
Authentication
The penpot backend right now offers two way for authenticate the request:
cookies (the same mechanism that we use ourselves on accessing the API from the
diff --git a/backend/src/app/auth/oidc.clj b/backend/src/app/auth/oidc.clj
index 243c08da5..34e2cee57 100644
--- a/backend/src/app/auth/oidc.clj
+++ b/backend/src/app/auth/oidc.clj
@@ -22,6 +22,7 @@
[app.loggers.audit :as audit]
[app.main :as-alias main]
[app.rpc.commands.profile :as profile]
+ [app.setup :as-alias setup]
[app.tokens :as tokens]
[app.util.json :as json]
[app.util.time :as dt]
@@ -37,7 +38,7 @@
;; HELPERS
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
-(defn- obfuscate-string
+(defn obfuscate-string
[s]
(if (< (count s) 10)
(apply str (take (count s) (repeat "*")))
@@ -413,7 +414,7 @@
::props]))
(defn get-info
- [{:keys [provider ::main/props] :as cfg} {:keys [params] :as request}]
+ [{:keys [provider ::setup/props] :as cfg} {:keys [params] :as request}]
(when-let [error (get params :error)]
(ex/raise :type :internal
:code :error-on-retrieving-code
@@ -508,7 +509,7 @@
(if profile
(let [sxf (session/create-fn cfg (:id profile))
token (or (:invitation-token info)
- (tokens/generate (::main/props cfg)
+ (tokens/generate (::setup/props cfg)
{:iss :auth
:exp (dt/in-future "15m")
:profile-id (:id profile)}))
@@ -536,7 +537,7 @@
:iss :prepared-register
:is-active true
:exp (dt/in-future {:hours 48}))
- token (tokens/generate (::main/props cfg) info)
+ token (tokens/generate (::setup/props cfg) info)
params (d/without-nils
{:token token
:fullname (:fullname info)})
@@ -551,7 +552,7 @@
(defn- auth-handler
[cfg {:keys [params] :as request}]
(let [props (audit/extract-utm-params params)
- state (tokens/generate (::main/props cfg)
+ state (tokens/generate (::setup/props cfg)
{:iss :oauth
:invitation-token (:invitation-token params)
:props props
@@ -618,7 +619,7 @@
[_]
(s/keys :req [::session/manager
::http/client
- ::main/props
+ ::setup/props
::db/pool
::providers]))
diff --git a/backend/src/app/binfile/common.clj b/backend/src/app/binfile/common.clj
index d5a4241e2..ace98c80e 100644
--- a/backend/src/app/binfile/common.clj
+++ b/backend/src/app/binfile/common.clj
@@ -277,7 +277,7 @@
(update :fill-color-ref-file lookup-index)
;; This covers the old shapes and the new :strokes
- (uuid? (:storage-color-ref-file form))
+ (uuid? (:stroke-color-ref-file form))
(update :stroke-color-ref-file lookup-index)
;; This covers all text shapes that have typography referenced
diff --git a/backend/src/app/features/components_v2.clj b/backend/src/app/features/components_v2.clj
index 8c7933160..46d04636f 100644
--- a/backend/src/app/features/components_v2.clj
+++ b/backend/src/app/features/components_v2.clj
@@ -806,7 +806,8 @@
:width (:width (:selrect root-shape))
:height (:height (:selrect root-shape))
:name (:name component)
- :shapes [new-id]})
+ :shapes [new-id]
+ :show-content true})
(assoc :frame-id nil
:parent-id nil))
root-shape' (assoc root-shape
@@ -846,13 +847,15 @@
(fix-shape [shape]
(if (or (nil? (:parent-id shape)) (ctk/instance-head? shape))
- (assoc shape
- :type :frame ; Old groups must be converted
- :fills (or (:fills shape) []) ; to frames and conform to spec
- :shapes (or (:shapes shape) [])
- :hide-in-viewer (or (:hide-in-viewer shape) true)
- :rx (or (:rx shape) 0)
- :ry (or (:ry shape) 0))
+ (let [frame? (= :frame (:type shape))]
+ (assoc shape
+ :type :frame ; Old groups must be converted
+ :fills (or (:fills shape) []) ; to frames and conform to spec
+ :shapes (or (:shapes shape) [])
+ :hide-in-viewer (if frame? (boolean (:hide-in-viewer shape)) true)
+ :show-content (if frame? (boolean (:show-content shape)) true)
+ :rx (or (:rx shape) 0)
+ :ry (or (:ry shape) 0)))
shape))]
(-> file-data
(update :pages-index update-vals fix-container)
@@ -1089,7 +1092,12 @@
(let [shapes (cfh/get-children-with-self (:objects component)
(:id component))
- root-shape (first shapes)
+ ;; Let's calculate the top shame name from the components path and name
+ root-shape (-> (first shapes)
+ (assoc :name (cfh/merge-path-item (:path component) (:name component))))
+
+ shapes (assoc shapes 0 root-shape)
+
orig-pos (gpt/point (:x root-shape) (:y root-shape))
delta (gpt/subtract position orig-pos)
diff --git a/backend/src/app/http.clj b/backend/src/app/http.clj
index 1e605cdb0..a696d5477 100644
--- a/backend/src/app/http.clj
+++ b/backend/src/app/http.clj
@@ -23,6 +23,7 @@
[app.metrics :as mtx]
[app.rpc :as-alias rpc]
[app.rpc.doc :as-alias rpc.doc]
+ [app.setup :as-alias setup]
[clojure.spec.alpha :as s]
[integrant.core :as ig]
[promesa.exec :as px]
@@ -136,7 +137,7 @@
::rpc/routes
::rpc.doc/routes
::oidc/routes
- ::main/props
+ ::setup/props
::assets/routes
::debug/routes
::db/pool
diff --git a/backend/src/app/http/access_token.clj b/backend/src/app/http/access_token.clj
index bfddbb42d..0d1865f10 100644
--- a/backend/src/app/http/access_token.clj
+++ b/backend/src/app/http/access_token.clj
@@ -10,6 +10,7 @@
[app.config :as cf]
[app.db :as db]
[app.main :as-alias main]
+ [app.setup :as-alias setup]
[app.tokens :as tokens]
[ring.request :as rreq]))
@@ -42,7 +43,7 @@
(defn- wrap-soft-auth
"Soft Authentication, will be executed synchronously on the undertow
worker thread."
- [handler {:keys [::main/props]}]
+ [handler {:keys [::setup/props]}]
(letfn [(handle-request [request]
(try
(let [token (get-token request)
diff --git a/backend/src/app/http/awsns.clj b/backend/src/app/http/awsns.clj
index 7508be8a2..88060bb20 100644
--- a/backend/src/app/http/awsns.clj
+++ b/backend/src/app/http/awsns.clj
@@ -13,6 +13,7 @@
[app.db.sql :as sql]
[app.http.client :as http]
[app.main :as-alias main]
+ [app.setup :as-alias setup]
[app.tokens :as tokens]
[app.worker :as-alias wrk]
[clojure.spec.alpha :as s]
@@ -30,7 +31,7 @@
(defmethod ig/pre-init-spec ::routes [_]
(s/keys :req [::http/client
- ::main/props
+ ::setup/props
::db/pool]))
(defmethod ig/init-key ::routes
@@ -106,7 +107,7 @@
[cfg headers]
(let [tdata (get headers "x-penpot-data")]
(when-not (str/empty? tdata)
- (let [result (tokens/verify (::main/props cfg) {:token tdata :iss :profile-identity})]
+ (let [result (tokens/verify (::setup/props cfg) {:token tdata :iss :profile-identity})]
(:profile-id result)))))
(defn- parse-notification
diff --git a/backend/src/app/http/client.clj b/backend/src/app/http/client.clj
index 5b4a8541c..9ef4cc4b2 100644
--- a/backend/src/app/http/client.clj
+++ b/backend/src/app/http/client.clj
@@ -55,8 +55,8 @@
convention."
([cfg-or-client request]
(let [client (resolve-client cfg-or-client)]
- (send! client request {})))
+ (send! client request {:sync? true})))
([cfg-or-client request options]
(let [client (resolve-client cfg-or-client)]
- (send! client request options))))
+ (send! client request (merge {:sync? true} options)))))
diff --git a/backend/src/app/http/debug.clj b/backend/src/app/http/debug.clj
index 1d2a129cf..a453c6872 100644
--- a/backend/src/app/http/debug.clj
+++ b/backend/src/app/http/debug.clj
@@ -20,6 +20,7 @@
[app.rpc.commands.auth :as auth]
[app.rpc.commands.files-create :refer [create-file]]
[app.rpc.commands.profile :as profile]
+ [app.setup :as-alias setup]
[app.srepl.helpers :as srepl]
[app.storage :as-alias sto]
[app.storage.tmp :as tmp]
@@ -340,7 +341,7 @@
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
(defn- resend-email-notification
- [{:keys [::db/pool ::main/props] :as cfg} {:keys [params] :as request}]
+ [{:keys [::db/pool ::setup/props] :as cfg} {:keys [params] :as request}]
(when-not (contains? params :force)
(ex/raise :type :validation
diff --git a/backend/src/app/http/errors.clj b/backend/src/app/http/errors.clj
index 580cd6703..18350d21d 100644
--- a/backend/src/app/http/errors.clj
+++ b/backend/src/app/http/errors.clj
@@ -60,8 +60,12 @@
(defmethod handle-error :restriction
[err _ _]
- {::rres/status 400
- ::rres/body (ex-data err)})
+ (let [{:keys [code] :as data} (ex-data err)]
+ (if (= code :method-not-allowed)
+ {::rres/status 405
+ ::rres/body data}
+ {::rres/status 400
+ ::rres/body data})))
(defmethod handle-error :rate-limit
[err _ _]
diff --git a/backend/src/app/http/session.clj b/backend/src/app/http/session.clj
index 696cc6a3a..c4a3f0ba6 100644
--- a/backend/src/app/http/session.clj
+++ b/backend/src/app/http/session.clj
@@ -15,6 +15,7 @@
[app.db.sql :as sql]
[app.http.session.tasks :as-alias tasks]
[app.main :as-alias main]
+ [app.setup :as-alias setup]
[app.tokens :as tokens]
[app.util.time :as dt]
[clojure.spec.alpha :as s]
@@ -138,7 +139,7 @@
(declare ^:private gen-token)
(defn create-fn
- [{:keys [::manager ::main/props]} profile-id]
+ [{:keys [::manager ::setup/props]} profile-id]
(us/assert! ::manager manager)
(us/assert! ::us/uuid profile-id)
@@ -196,7 +197,7 @@
(neg? (compare default-renewal-max-age elapsed)))))
(defn- wrap-soft-auth
- [handler {:keys [::manager ::main/props]}]
+ [handler {:keys [::manager ::setup/props]}]
(us/assert! ::manager manager)
(letfn [(handle-request [request]
(try
@@ -248,6 +249,7 @@
renewal (dt/plus created-at default-renewal-max-age)
expires (dt/plus created-at max-age)
secure? (contains? cf/flags :secure-session-cookies)
+ strict? (contains? cf/flags :strict-session-cookies)
cors? (contains? cf/flags :cors)
name (cf/get :auth-token-cookie-name default-auth-token-cookie-name)
comment (str "Renewal at: " (dt/format-instant renewal :rfc1123))
@@ -256,7 +258,7 @@
:expires expires
:value token
:comment comment
- :same-site (if cors? :none :lax)
+ :same-site (if cors? :none (if strict? :strict :lax))
:secure secure?}]
(update response :cookies assoc name cookie)))
diff --git a/backend/src/app/loggers/audit.clj b/backend/src/app/loggers/audit.clj
index 45c36334a..aead09110 100644
--- a/backend/src/app/loggers/audit.clj
+++ b/backend/src/app/loggers/audit.clj
@@ -24,6 +24,7 @@
[app.main :as-alias main]
[app.rpc :as-alias rpc]
[app.rpc.retry :as rtry]
+ [app.setup :as-alias setup]
[app.tokens :as tokens]
[app.util.services :as-alias sv]
[app.util.time :as dt]
@@ -261,7 +262,7 @@
(s/def ::tasks/uri ::us/string)
(defmethod ig/pre-init-spec ::tasks/archive-task [_]
- (s/keys :req [::db/pool ::main/props ::http.client/client]))
+ (s/keys :req [::db/pool ::setup/props ::http.client/client]))
(defmethod ig/init-key ::tasks/archive
[_ cfg]
@@ -287,7 +288,7 @@
(px/sleep 100)
(recur (+ total ^long n)))
(when (pos? total)
- (l/debug :hint "events archived" :total total)))))))))
+ (l/dbg :hint "events archived" :total total)))))))))
(def ^:private sql:retrieve-batch-of-audit-log
"select *
@@ -322,7 +323,7 @@
:context]))
(send [events]
- (let [token (tokens/generate (::main/props cfg)
+ (let [token (tokens/generate (::setup/props cfg)
{:iss "authentication"
:iat (dt/now)
:uid uuid/zero})
@@ -331,11 +332,11 @@
"origin" (cf/get :public-uri)
"cookie" (u/map->query-string {:auth-token token})}
params {:uri uri
- :timeout 6000
+ :timeout 12000
:method :post
:headers headers
:body body}
- resp (http.client/req! cfg params {:sync? true})]
+ resp (http.client/req! cfg params)]
(if (= (:status resp) 204)
true
(do
@@ -355,7 +356,7 @@
(map row->event))
events (into [] xform rows)]
(when-not (empty? events)
- (l/trace :hint "archive events chunk" :uri uri :events (count events))
+ (l/trc :hint "archive events chunk" :uri uri :events (count events))
(when (send events)
(mark-as-archived conn rows)
(count events)))))))
diff --git a/backend/src/app/main.clj b/backend/src/app/main.clj
index 47e43f5cf..e0177110f 100644
--- a/backend/src/app/main.clj
+++ b/backend/src/app/main.clj
@@ -221,7 +221,7 @@
{::db/pool (ig/ref ::db/pool)}
::http.awsns/routes
- {::props (ig/ref ::setup/props)
+ {::setup/props (ig/ref ::setup/props)
::db/pool (ig/ref ::db/pool)
::http.client/client (ig/ref ::http.client/client)}
@@ -262,7 +262,7 @@
::oidc/routes
{::http.client/client (ig/ref ::http.client/client)
::db/pool (ig/ref ::db/pool)
- ::props (ig/ref ::setup/props)
+ ::setup/props (ig/ref ::setup/props)
::oidc/providers {:google (ig/ref ::oidc.providers/google)
:github (ig/ref ::oidc.providers/github)
:gitlab (ig/ref ::oidc.providers/gitlab)
@@ -274,7 +274,7 @@
::db/pool (ig/ref ::db/pool)
::rpc/routes (ig/ref ::rpc/routes)
::rpc.doc/routes (ig/ref ::rpc.doc/routes)
- ::props (ig/ref ::setup/props)
+ ::setup/props (ig/ref ::setup/props)
::mtx/routes (ig/ref ::mtx/routes)
::oidc/routes (ig/ref ::oidc/routes)
::http.debug/routes (ig/ref ::http.debug/routes)
@@ -286,7 +286,7 @@
{::db/pool (ig/ref ::db/pool)
::session/manager (ig/ref ::session/manager)
::sto/storage (ig/ref ::sto/storage)
- ::props (ig/ref ::setup/props)}
+ ::setup/props (ig/ref ::setup/props)}
::http.ws/routes
{::db/pool (ig/ref ::db/pool)
@@ -322,7 +322,7 @@
::rpc/climit (ig/ref ::rpc/climit)
::rpc/rlimit (ig/ref ::rpc/rlimit)
::setup/templates (ig/ref ::setup/templates)
- ::props (ig/ref ::setup/props)}
+ ::setup/props (ig/ref ::setup/props)}
:app.rpc.doc/routes
{:methods (ig/ref :app.rpc/methods)}
@@ -331,7 +331,7 @@
{::rpc/methods (ig/ref :app.rpc/methods)
::db/pool (ig/ref ::db/pool)
::session/manager (ig/ref ::session/manager)
- ::props (ig/ref ::setup/props)}
+ ::setup/props (ig/ref ::setup/props)}
::wrk/registry
{::mtx/metrics (ig/ref ::mtx/metrics)
@@ -388,7 +388,7 @@
:app.tasks.telemetry/handler
{::db/pool (ig/ref ::db/pool)
::http.client/client (ig/ref ::http.client/client)
- ::props (ig/ref ::setup/props)}
+ ::setup/props (ig/ref ::setup/props)}
[::srepl/urepl ::srepl/server]
{::srepl/port (cf/get :urepl-port 6062)
@@ -402,7 +402,7 @@
::setup/props
{::db/pool (ig/ref ::db/pool)
- ::key (cf/get :secret-key)
+ ::setup/key (cf/get :secret-key)
;; NOTE: this dependency is only necessary for proper initialization ordering, props
;; module requires the migrations to run before initialize.
@@ -412,7 +412,7 @@
{}
::audit.tasks/archive
- {::props (ig/ref ::setup/props)
+ {::setup/props (ig/ref ::setup/props)
::db/pool (ig/ref ::db/pool)
::http.client/client (ig/ref ::http.client/client)}
diff --git a/backend/src/app/rpc.clj b/backend/src/app/rpc.clj
index 2f999a08e..ea49b6b70 100644
--- a/backend/src/app/rpc.clj
+++ b/backend/src/app/rpc.clj
@@ -27,10 +27,12 @@
[app.rpc.helpers :as rph]
[app.rpc.retry :as retry]
[app.rpc.rlimit :as rlimit]
+ [app.setup :as-alias setup]
[app.storage :as-alias sto]
[app.util.services :as sv]
[app.util.time :as dt]
[clojure.spec.alpha :as s]
+ [cuerdas.core :as str]
[integrant.core :as ig]
[promesa.core :as p]
[ring.request :as rreq]
@@ -71,24 +73,31 @@
(defn- rpc-handler
"Ring handler that dispatches cmd requests and convert between
internal async flow into ring async flow."
- [methods {:keys [params path-params] :as request}]
- (let [type (keyword (:type path-params))
- etag (rreq/get-header request "if-none-match")
- profile-id (or (::session/profile-id request)
- (::actoken/profile-id request))
+ [methods {:keys [params path-params method] :as request}]
+ (let [handler-name (:type path-params)
+ etag (rreq/get-header request "if-none-match")
+ profile-id (or (::session/profile-id request)
+ (::actoken/profile-id request))
- data (-> params
- (assoc ::request-at (dt/now))
- (assoc ::session/id (::session/id request))
- (assoc ::cond/key etag)
- (cond-> (uuid? profile-id)
- (assoc ::profile-id profile-id)))
+ data (-> params
+ (assoc ::request-at (dt/now))
+ (assoc ::session/id (::session/id request))
+ (assoc ::cond/key etag)
+ (cond-> (uuid? profile-id)
+ (assoc ::profile-id profile-id)))
- data (vary-meta data assoc ::http/request request)
- method (get methods type default-handler)]
+ data (vary-meta data assoc ::http/request request)
+ handler-fn (get methods (keyword handler-name) default-handler)]
+
+ (when (and (or (= method :get)
+ (= method :head))
+ (not (str/starts-with? handler-name "get-")))
+ (ex/raise :type :restriction
+ :code :method-not-allowed
+ :hint "method not allowed for this request"))
(binding [cond/*enabled* true]
- (let [response (method data)]
+ (let [response (handler-fn data)]
(handle-response request response)))))
(defn- wrap-metrics
@@ -240,7 +249,7 @@
::ldap/provider
::sto/storage
::mtx/metrics
- ::main/props]
+ ::setup/props]
:opt [::climit
::rlimit]))
@@ -257,7 +266,7 @@
(defmethod ig/pre-init-spec ::routes [_]
(s/keys :req [::methods
::db/pool
- ::main/props
+ ::setup/props
::session/manager]))
(defmethod ig/init-key ::routes
diff --git a/backend/src/app/rpc/commands/access_token.clj b/backend/src/app/rpc/commands/access_token.clj
index dd10f3371..06a6e516c 100644
--- a/backend/src/app/rpc/commands/access_token.clj
+++ b/backend/src/app/rpc/commands/access_token.clj
@@ -13,6 +13,7 @@
[app.rpc :as-alias rpc]
[app.rpc.doc :as-alias doc]
[app.rpc.quotes :as quotes]
+ [app.setup :as-alias setup]
[app.tokens :as tokens]
[app.util.services :as sv]
[app.util.time :as dt]
@@ -23,7 +24,7 @@
(dissoc row :perms))
(defn create-access-token
- [{:keys [::db/conn ::main/props]} profile-id name expiration]
+ [{:keys [::db/conn ::setup/props]} profile-id name expiration]
(let [created-at (dt/now)
token-id (uuid/next)
token (tokens/generate props {:iss "access-token"
@@ -47,7 +48,7 @@
[{:keys [::db/pool] :as system} profile-id name expiration]
(db/with-atomic [conn pool]
(let [props (:app.setup/props system)]
- (create-access-token {::db/conn conn ::main/props props}
+ (create-access-token {::db/conn conn ::setup/props props}
profile-id
name
expiration))))
diff --git a/backend/src/app/rpc/commands/auth.clj b/backend/src/app/rpc/commands/auth.clj
index 8e9671e59..e87979007 100644
--- a/backend/src/app/rpc/commands/auth.clj
+++ b/backend/src/app/rpc/commands/auth.clj
@@ -26,6 +26,7 @@
[app.rpc.commands.teams :as teams]
[app.rpc.doc :as-alias doc]
[app.rpc.helpers :as rph]
+ [app.setup :as-alias setup]
[app.tokens :as tokens]
[app.util.services :as sv]
[app.util.time :as dt]
@@ -88,7 +89,7 @@
(profile/strip-private-attrs))
invitation (when-let [token (:invitation-token params)]
- (tokens/verify (::main/props cfg) {:token token :iss :team-invitation}))
+ (tokens/verify (::setup/props cfg) {:token token :iss :team-invitation}))
;; If invitation member-id does not matches the profile-id, we just proceed to ignore the
;; invitation because invitations matches exactly; and user can't login with other email and
@@ -133,7 +134,7 @@
(defn recover-profile
[{:keys [::db/pool] :as cfg} {:keys [token password]}]
(letfn [(validate-token [token]
- (let [tdata (tokens/verify (::main/props cfg) {:token token :iss :password-recovery})]
+ (let [tdata (tokens/verify (::setup/props cfg) {:token token :iss :password-recovery})]
(:profile-id tdata)))
(update-password [conn profile-id]
@@ -170,7 +171,7 @@
:code :registration-disabled)))
(when (contains? params :invitation-token)
- (let [invitation (tokens/verify (::main/props cfg) {:token (:invitation-token params) :iss :team-invitation})]
+ (let [invitation (tokens/verify (::setup/props cfg) {:token (:invitation-token params) :iss :team-invitation})]
(when-not (= (:email params) (:member-email invitation))
(ex/raise :type :restriction
:code :email-does-not-match-invitation
@@ -233,7 +234,7 @@
params (d/without-nils params)
- token (tokens/generate (::main/props cfg) params)]
+ token (tokens/generate (::setup/props cfg) params)]
(with-meta {:token token}
{::audit/profile-id uuid/zero})))
@@ -340,7 +341,7 @@
(defn register-profile
[{:keys [::db/conn] :as cfg} {:keys [token fullname] :as params}]
- (let [claims (tokens/verify (::main/props cfg) {:token token :iss :prepared-register})
+ (let [claims (tokens/verify (::setup/props cfg) {:token token :iss :prepared-register})
params (-> claims
(into params)
(assoc :fullname fullname))
@@ -357,7 +358,7 @@
(create-profile-rels! conn))))
invitation (when-let [token (:invitation-token params)]
- (tokens/verify (::main/props cfg) {:token token :iss :team-invitation}))]
+ (tokens/verify (::setup/props cfg) {:token token :iss :team-invitation}))]
;; If profile is filled in claims, means it tries to register
;; again, so we proceed to update the modified-at attr
@@ -377,7 +378,7 @@
;; email.
(and (some? invitation) (= (:email profile) (:member-email invitation)))
(let [claims (assoc invitation :member-id (:id profile))
- token (tokens/generate (::main/props cfg) claims)
+ token (tokens/generate (::setup/props cfg) claims)
resp {:invitation-token token}]
(-> resp
(rph/with-transform (session/create-fn cfg (:id profile)))
@@ -404,7 +405,7 @@
;; In all other cases, send a verification email.
:else
(do
- (send-email-verification! conn (::main/props cfg) profile)
+ (send-email-verification! conn (::setup/props cfg) profile)
(rph/with-meta profile
{::audit/replace-props (audit/profile->props profile)
::audit/profile-id (:id profile)})))))
@@ -429,14 +430,14 @@
(defn request-profile-recovery
[{:keys [::db/pool] :as cfg} {:keys [email] :as params}]
(letfn [(create-recovery-token [{:keys [id] :as profile}]
- (let [token (tokens/generate (::main/props cfg)
+ (let [token (tokens/generate (::setup/props cfg)
{:iss :password-recovery
:exp (dt/in-future "15m")
:profile-id id})]
(assoc profile :token token)))
(send-email-notification [conn profile]
- (let [ptoken (tokens/generate (::main/props cfg)
+ (let [ptoken (tokens/generate (::setup/props cfg)
{:iss :profile-identity
:profile-id (:id profile)
:exp (dt/in-future {:days 30})})]
diff --git a/backend/src/app/rpc/commands/ldap.clj b/backend/src/app/rpc/commands/ldap.clj
index bb86aec90..780f0e100 100644
--- a/backend/src/app/rpc/commands/ldap.clj
+++ b/backend/src/app/rpc/commands/ldap.clj
@@ -18,6 +18,7 @@
[app.rpc.commands.profile :as profile]
[app.rpc.doc :as-alias doc]
[app.rpc.helpers :as rph]
+ [app.setup :as-alias setup]
[app.tokens :as tokens]
[app.util.services :as sv]
[clojure.spec.alpha :as s]))
@@ -40,7 +41,7 @@
{::rpc/auth false
::doc/added "1.15"
::doc/module :auth}
- [{:keys [::main/props ::ldap/provider] :as cfg} params]
+ [{:keys [::setup/props ::ldap/provider] :as cfg} params]
(when-not provider
(ex/raise :type :restriction
:code :ldap-not-initialized
diff --git a/backend/src/app/rpc/commands/profile.clj b/backend/src/app/rpc/commands/profile.clj
index 6ef2ef90d..ccb6a8b2e 100644
--- a/backend/src/app/rpc/commands/profile.clj
+++ b/backend/src/app/rpc/commands/profile.clj
@@ -23,6 +23,7 @@
[app.rpc.climit :as climit]
[app.rpc.doc :as-alias doc]
[app.rpc.helpers :as rph]
+ [app.setup :as-alias setup]
[app.storage :as sto]
[app.tokens :as tokens]
[app.util.services :as sv]
@@ -296,12 +297,12 @@
(defn- request-email-change!
[{:keys [::conn] :as cfg} {:keys [profile email] :as params}]
- (let [token (tokens/generate (::main/props cfg)
+ (let [token (tokens/generate (::setup/props cfg)
{:iss :change-email
:exp (dt/in-future "15m")
:profile-id (:id profile)
:email email})
- ptoken (tokens/generate (::main/props cfg)
+ ptoken (tokens/generate (::setup/props cfg)
{:iss :profile-identity
:profile-id (:id profile)
:exp (dt/in-future {:days 30})})]
diff --git a/backend/src/app/rpc/commands/teams.clj b/backend/src/app/rpc/commands/teams.clj
index 4b5f07700..f62f8bc6a 100644
--- a/backend/src/app/rpc/commands/teams.clj
+++ b/backend/src/app/rpc/commands/teams.clj
@@ -26,6 +26,7 @@
[app.rpc.helpers :as rph]
[app.rpc.permissions :as perms]
[app.rpc.quotes :as quotes]
+ [app.setup :as-alias setup]
[app.storage :as sto]
[app.tokens :as tokens]
[app.util.services :as sv]
@@ -691,7 +692,7 @@
(defn- create-invitation-token
[cfg {:keys [profile-id valid-until team-id member-id member-email role]}]
- (tokens/generate (::main/props cfg)
+ (tokens/generate (::setup/props cfg)
{:iss :team-invitation
:exp valid-until
:profile-id profile-id
@@ -702,7 +703,7 @@
(defn- create-profile-identity-token
[cfg profile]
- (tokens/generate (::main/props cfg)
+ (tokens/generate (::setup/props cfg)
{:iss :profile-identity
:profile-id (:id profile)
:exp (dt/in-future {:days 30})}))
diff --git a/backend/src/app/rpc/commands/verify_token.clj b/backend/src/app/rpc/commands/verify_token.clj
index 49c76c110..e072c90d6 100644
--- a/backend/src/app/rpc/commands/verify_token.clj
+++ b/backend/src/app/rpc/commands/verify_token.clj
@@ -18,6 +18,7 @@
[app.rpc.doc :as-alias doc]
[app.rpc.helpers :as rph]
[app.rpc.quotes :as quotes]
+ [app.setup :as-alias setup]
[app.tokens :as tokens]
[app.tokens.spec.team-invitation :as-alias spec.team-invitation]
[app.util.services :as sv]
@@ -38,7 +39,7 @@
::doc/module :auth}
[{:keys [::db/pool] :as cfg} {:keys [token] :as params}]
(db/with-atomic [conn pool]
- (let [claims (tokens/verify (::main/props cfg) {:token token})
+ (let [claims (tokens/verify (::setup/props cfg) {:token token})
cfg (assoc cfg :conn conn)]
(process-token cfg params claims))))
diff --git a/backend/src/app/setup.clj b/backend/src/app/setup.clj
index 8e889e2b4..d187f3e5f 100644
--- a/backend/src/app/setup.clj
+++ b/backend/src/app/setup.clj
@@ -50,16 +50,15 @@
:cause cause))))
instance-id)))
-(s/def ::main/key ::us/string)
-(s/def ::main/props
- (s/map-of ::us/keyword some?))
+(s/def ::key ::us/string)
+(s/def ::props (s/map-of ::us/keyword some?))
(defmethod ig/pre-init-spec ::props [_]
(s/keys :req [::db/pool]
- :opt [::main/key]))
+ :opt [::key]))
(defmethod ig/init-key ::props
- [_ {:keys [::db/pool ::main/key] :as cfg}]
+ [_ {:keys [::db/pool ::key] :as cfg}]
(db/with-atomic [conn pool]
(db/xact-lock! conn 0)
(when-not key
diff --git a/backend/src/app/srepl/fixes.clj b/backend/src/app/srepl/fixes.clj
index 955f08366..2d50bd8a8 100644
--- a/backend/src/app/srepl/fixes.clj
+++ b/backend/src/app/srepl/fixes.clj
@@ -10,10 +10,15 @@
(:require
[app.binfile.common :as bfc]
[app.common.data :as d]
+ [app.common.data.macros :as dm]
[app.common.files.changes :as cpc]
+ [app.common.files.helpers :as cfh]
[app.common.files.repair :as cfr]
[app.common.files.validate :as cfv]
[app.common.logging :as l]
+ [app.common.types.component :as ctk]
+ [app.common.types.container :as ctn]
+ [app.common.types.file :as ctf]
[app.common.uuid :as uuid]
[app.db :as db]
[app.features.fdata :as feat.fdata]
@@ -133,4 +138,102 @@
(fn [touched]
(disj touched :shapes-group))))]
file (-> file
- (update :data fix-fdata))))
\ No newline at end of file
+ (update :data fix-fdata))))
+
+(defn add-swap-slots
+ [file libs _opts]
+ ;; Detect swapped copies and try to generate a valid swap-slot.
+ (letfn [(process-fdata [data]
+ ;; Walk through all containers in the file, both pages and deleted components.
+ (reduce process-container data (ctf/object-containers-seq data)))
+
+ (process-container [data container]
+ ;; Walk through all shapes in depth-first tree order.
+ (l/dbg :hint "Processing container" :type (:type container) :name (:name container))
+ (let [root-shape (ctn/get-container-root container)]
+ (ctf/update-container data
+ container
+ #(reduce process-shape % (ctn/get-direct-children container root-shape)))))
+
+ (process-shape [container shape]
+ ;; Look for head copies in the first level (either component roots or inside main components).
+ ;; Even if they have been swapped, we don't add slot to them because there is no way to know
+ ;; the original shape. Only children.
+ (if (and (ctk/instance-head? shape)
+ (ctk/in-component-copy? shape)
+ (nil? (ctk/get-swap-slot shape)))
+ (process-copy-head container shape)
+ (reduce process-shape container (ctn/get-direct-children container shape))))
+
+ (process-copy-head [container head-shape]
+ ;; Process recursively all children, comparing each one with the corresponding child in the main
+ ;; component, looking by position. If the shape-ref does not point to the found child, then it has
+ ;; been swapped and need to set up a slot.
+ (l/trc :hint "Processing copy-head" :id (:id head-shape) :name (:name head-shape))
+ (let [component-shape (ctf/find-ref-shape file container libs head-shape :include-deleted? true :with-context? true)
+ component-container (:container (meta component-shape))]
+ (loop [container container
+ children (map #(ctn/get-shape container %) (:shapes head-shape))
+ component-children (map #(ctn/get-shape component-container %) (:shapes component-shape))]
+ (let [child (first children)
+ component-child (first component-children)]
+ (if (or (nil? child) (nil? component-child))
+ container
+ (let [container (if (and (not (ctk/is-main-of? component-child child))
+ (nil? (ctk/get-swap-slot child))
+ (ctk/instance-head? child))
+ (let [slot (guess-swap-slot component-child component-container)]
+ (l/dbg :hint "child" :id (:id child) :name (:name child) :slot slot)
+ (ctn/update-shape container (:id child)
+ #(update % :touched
+ cfh/set-touched-group
+ (ctk/build-swap-slot-group slot))))
+ container)]
+ (recur (process-copy-head container child)
+ (rest children)
+ (rest component-children))))))))
+
+ (guess-swap-slot [shape container]
+ ;; To guess the slot, we must follow the chain until we find the definitive main. But
+ ;; we cannot navigate by shape-ref, because main shapes may also have been swapped. So
+ ;; chain by position, too.
+ (if-let [slot (ctk/get-swap-slot shape)]
+ slot
+ (if-not (ctk/in-component-copy? shape)
+ (:id shape)
+ (let [head-copy (ctn/get-component-shape (:objects container) shape)]
+ (if (= (:id head-copy) (:id shape))
+ (:id shape)
+ (let [head-main (ctf/find-ref-shape file
+ container
+ libs
+ head-copy
+ :include-deleted? true
+ :with-context? true)
+ container-main (:container (meta head-main))
+ shape-main (find-match-by-position shape
+ head-copy
+ container
+ head-main
+ container-main)]
+ (guess-swap-slot shape-main container-main)))))))
+
+ (find-match-by-position [shape-copy head-copy container-copy head-main container-main]
+ ;; Find the shape in the main that has the same position under its parent than
+ ;; the copy under its one. To get the parent we must process recursively until
+ ;; the component head, because mains may also have been swapped.
+ (let [parent-copy (ctn/get-shape container-copy (:parent-id shape-copy))
+ parent-main (if (= (:id parent-copy) (:id head-copy))
+ head-main
+ (find-match-by-position parent-copy
+ head-copy
+ container-copy
+ head-main
+ container-main))
+ index (cfh/get-position-on-parent (:objects container-copy)
+ (:id shape-copy))
+ shape-main-id (dm/get-in parent-main [:shapes index])]
+ (ctn/get-shape container-main shape-main-id)))]
+
+ file (-> file
+ (update :data process-fdata))))
diff --git a/backend/src/app/srepl/main.clj b/backend/src/app/srepl/main.clj
index ba9693e93..17df79a9a 100644
--- a/backend/src/app/srepl/main.clj
+++ b/backend/src/app/srepl/main.clj
@@ -378,11 +378,11 @@
(defn process-file!
"Apply a function to the file. Optionally save the changes or not.
The function receives the decoded and migrated file data."
- [file-id update-fn & {:keys [rollback?] :or {rollback? true}}]
+ [file-id update-fn & {:keys [rollback?] :or {rollback? true} :as opts}]
(db/tx-run! (assoc main/system ::db/rollback rollback?)
(fn [system]
(binding [h/*system* system]
- (h/process-file! system file-id update-fn)))))
+ (h/process-file! system file-id update-fn opts)))))
(defn process-team-files!
"Apply a function to each file of the specified team."
diff --git a/backend/src/app/tasks/telemetry.clj b/backend/src/app/tasks/telemetry.clj
index 70fa8c35b..43c0b26f9 100644
--- a/backend/src/app/tasks/telemetry.clj
+++ b/backend/src/app/tasks/telemetry.clj
@@ -15,6 +15,7 @@
[app.db :as db]
[app.http.client :as http]
[app.main :as-alias main]
+ [app.setup :as-alias setup]
[app.util.json :as json]
[clojure.spec.alpha :as s]
[integrant.core :as ig]
@@ -32,13 +33,14 @@
(defmethod ig/pre-init-spec ::handler [_]
(s/keys :req [::http/client
::db/pool
- ::main/props]))
+ ::setup/props]))
(defmethod ig/init-key ::handler
- [_ {:keys [::db/pool ::main/props] :as cfg}]
+ [_ {:keys [::db/pool ::setup/props] :as cfg}]
(fn [{:keys [send? enabled?] :or {send? true enabled? false}}]
(let [subs {:newsletter-updates (get-subscriptions-newsletter-updates pool)
:newsletter-news (get-subscriptions-newsletter-news pool)}
+
enabled? (or enabled?
(contains? cf/flags :telemetry)
(cf/get :telemetry-enabled))
@@ -77,12 +79,11 @@
(defn- send!
[cfg data]
- (let [response (http/req! cfg
- {:method :post
- :uri (cf/get :telemetry-uri)
- :headers {"content-type" "application/json"}
- :body (json/encode-str data)}
- {:sync? true})]
+ (let [request {:method :post
+ :uri (cf/get :telemetry-uri)
+ :headers {"content-type" "application/json"}
+ :body (json/encode-str data)}
+ response (http/req! cfg request)]
(when (> (:status response) 206)
(ex/raise :type :internal
:code :invalid-response
diff --git a/backend/test/backend_tests/bounce_handling_test.clj b/backend/test/backend_tests/bounce_handling_test.clj
index 61a322084..13774e042 100644
--- a/backend/test/backend_tests/bounce_handling_test.clj
+++ b/backend/test/backend_tests/bounce_handling_test.clj
@@ -102,7 +102,7 @@
(t/deftest test-parse-bounce-report
(let [profile (th/create-profile* 1)
props (:app.setup/props th/*system*)
- cfg {:app.main/props props}
+ cfg {:app.setup/props props}
report (bounce-report {:token (tokens/generate props
{:iss :profile-identity
:profile-id (:id profile)})})
@@ -118,7 +118,7 @@
(t/deftest test-parse-complaint-report
(let [profile (th/create-profile* 1)
props (:app.setup/props th/*system*)
- cfg {:app.main/props props}
+ cfg {:app.setup/props props}
report (complaint-report {:token (tokens/generate props
{:iss :profile-identity
:profile-id (:id profile)})})
@@ -132,7 +132,7 @@
(t/deftest test-parse-complaint-report-without-token
(let [props (:app.setup/props th/*system*)
- cfg {:app.main/props props}
+ cfg {:app.setup/props props}
report (complaint-report {:token ""})
result (#'awsns/parse-notification cfg report)]
(t/is (= "complaint" (:type result)))
@@ -145,7 +145,7 @@
(let [profile (th/create-profile* 1)
props (:app.setup/props th/*system*)
pool (:app.db/pool th/*system*)
- cfg {:app.main/props props :app.db/pool pool}
+ cfg {:app.setup/props props :app.db/pool pool}
report (bounce-report {:token (tokens/generate props
{:iss :profile-identity
:profile-id (:id profile)})})
@@ -172,7 +172,7 @@
(let [profile (th/create-profile* 1)
props (:app.setup/props th/*system*)
pool (:app.db/pool th/*system*)
- cfg {:app.main/props props
+ cfg {:app.setup/props props
:app.db/pool pool}
report (complaint-report {:token (tokens/generate props
{:iss :profile-identity
@@ -202,7 +202,7 @@
(let [profile (th/create-profile* 1)
props (:app.setup/props th/*system*)
pool (:app.db/pool th/*system*)
- cfg {:app.main/props props :app.db/pool pool}
+ cfg {:app.setup/props props :app.db/pool pool}
report (bounce-report {:email (:email profile)
:token (tokens/generate props
{:iss :profile-identity
@@ -224,7 +224,7 @@
(let [profile (th/create-profile* 1)
props (:app.setup/props th/*system*)
pool (:app.db/pool th/*system*)
- cfg {:app.main/props props :app.db/pool pool}
+ cfg {:app.setup/props props :app.db/pool pool}
report (complaint-report {:email (:email profile)
:token (tokens/generate props
{:iss :profile-identity
diff --git a/common/src/app/common/data.cljc b/common/src/app/common/data.cljc
index 0dcf23e7e..736803631 100644
--- a/common/src/app/common/data.cljc
+++ b/common/src/app/common/data.cljc
@@ -716,20 +716,19 @@
(defn name
"Improved version of name that won't fail if the input is not a keyword"
- ([maybe-keyword] (name maybe-keyword nil))
- ([maybe-keyword default-value]
- (cond
- (keyword? maybe-keyword)
- (c/name maybe-keyword)
+ [maybe-keyword]
+ (cond
+ (nil? maybe-keyword)
+ nil
- (string? maybe-keyword)
- maybe-keyword
+ (keyword? maybe-keyword)
+ (c/name maybe-keyword)
- (nil? maybe-keyword) default-value
+ (string? maybe-keyword)
+ maybe-keyword
- :else
- (or default-value
- (str maybe-keyword)))))
+ :else
+ (str maybe-keyword)))
(defn prefix-keyword
"Given a keyword and a prefix will return a new keyword with the prefix attached
diff --git a/common/src/app/common/files/changes.cljc b/common/src/app/common/files/changes.cljc
index 2f1858505..978cc8edf 100644
--- a/common/src/app/common/files/changes.cljc
+++ b/common/src/app/common/files/changes.cljc
@@ -507,8 +507,7 @@
(and (:shape-ref parent)
(#{:group :frame} (:type parent))
(not ignore-touched))
- (-> (update :touched cfh/set-touched-group :shapes-group)
- (dissoc :remote-synced)))))
+ (dissoc :remote-synced))))
(remove-from-old-parent [old-objects objects shape-id]
(let [prev-parent-id (dm/get-in old-objects [shape-id :parent-id])]
@@ -525,9 +524,7 @@
(-> objects
(d/update-in-when [pid :shapes] d/without-obj sid)
(d/update-in-when [pid :shapes] d/vec-without-nils)
- (cond-> component? (d/update-when pid #(-> %
- (update :touched cfh/set-touched-group :shapes-group)
- (dissoc :remote-synced)))))))))
+ (cond-> component? (d/update-when pid #(dissoc % :remote-synced))))))))
(update-parent-id [objects id]
(-> objects
(d/update-when id assoc :parent-id parent-id)))
@@ -612,11 +609,15 @@
(defmethod process-change :add-recent-color
[data {:keys [color]}]
;; Moves the color to the top of the list and then truncates up to 15
- (update data :recent-colors (fn [rc]
- (let [rc (conj (filterv (comp not #{color}) (or rc [])) color)]
- (if (> (count rc) 15)
- (subvec rc 1)
- rc)))))
+ (update
+ data
+ :recent-colors
+ (fn [rc]
+ (let [rc (->> rc (d/removev (partial ctc/eq-recent-color? color)))
+ rc (-> rc (conj color))]
+ (cond-> rc
+ (> (count rc) 15)
+ (subvec 1))))))
;; -- Media
diff --git a/common/src/app/common/files/changes_builder.cljc b/common/src/app/common/files/changes_builder.cljc
index f868cbd2a..d219fc365 100644
--- a/common/src/app/common/files/changes_builder.cljc
+++ b/common/src/app/common/files/changes_builder.cljc
@@ -109,11 +109,12 @@
[changes f]
(update changes :redo-changes #(mapv f %)))
+;; redo-changes is a vector and :undo-changes is a list
(defn concat-changes
[changes1 changes2]
(-> changes1
(update :redo-changes d/concat-vec (:redo-changes changes2))
- (update :undo-changes d/concat-vec (:undo-changes changes2))))
+ (update :undo-changes #(concat (:undo-changes changes2) %))))
; TODO: remove this when not needed
(defn- assert-page-id!
diff --git a/common/src/app/common/files/helpers.cljc b/common/src/app/common/files/helpers.cljc
index 296d4da83..287bb7bb8 100644
--- a/common/src/app/common/files/helpers.cljc
+++ b/common/src/app/common/files/helpers.cljc
@@ -12,7 +12,6 @@
[app.common.schema :as sm]
[app.common.types.components-list :as ctkl]
[app.common.types.pages-list :as ctpl]
- [app.common.types.shape.layout :as ctl]
[app.common.uuid :as uuid]
[clojure.set :as set]
[cuerdas.core :as str]))
@@ -361,7 +360,8 @@
(defn set-touched-group
[touched group]
- (conj (or touched #{}) group))
+ (when group
+ (conj (or touched #{}) group)))
(defn touched-group?
[shape group]
@@ -741,22 +741,6 @@
(d/seek root-frame?)
:id))
-(defn comparator-layout-z-index
- [[idx-a child-a] [idx-b child-b]]
- (cond
- (> (ctl/layout-z-index child-a) (ctl/layout-z-index child-b)) 1
- (< (ctl/layout-z-index child-a) (ctl/layout-z-index child-b)) -1
- (< idx-a idx-b) 1
- (> idx-a idx-b) -1
- :else 0))
-
-(defn sort-layout-children-z-index
- [children]
- (->> children
- (d/enumerate)
- (sort comparator-layout-z-index)
- (mapv second)))
-
(defn common-parent-frame
"Search for the common frame for the selected shapes. Otherwise returns the root frame"
[objects selected]
@@ -779,6 +763,13 @@
(recur frame-id frame-parents (rest selected))))))
+(defn fixed-scroll?
+ [shape]
+ ^boolean
+ (and (:fixed-scroll shape)
+ (= (:parent-id shape) (:frame-id shape))
+ (not= (:frame-id shape) uuid/zero)))
+
(defn fixed?
[objects shape-id]
(let [ids-to-check
@@ -789,4 +780,4 @@
(take-while #(and (not= % uuid/zero) (not (root-frame? objects %))))))]
(boolean
(->> ids-to-check
- (d/seek (fn [id] (dm/get-in objects [id :fixed-scroll])))))))
+ (d/seek (fn [id] () (fixed-scroll? (get objects id))))))))
diff --git a/common/src/app/common/media.cljc b/common/src/app/common/media.cljc
index 212d43f2a..a342a227f 100644
--- a/common/src/app/common/media.cljc
+++ b/common/src/app/common/media.cljc
@@ -10,7 +10,7 @@
[cuerdas.core :as str]))
;; We have added ".ttf" as string to solve a problem with chrome input selector
-(def valid-font-types #{"font/ttf", ".ttf", "font/woff", "application/font-woff", "font/otf"})
+(def valid-font-types #{"font/ttf" ".ttf" "font/woff", "application/font-woff" "woff" "font/otf" ".otf" "font/opentype"})
(def valid-image-types #{"image/jpeg", "image/png", "image/webp", "image/gif", "image/svg+xml"})
(def str-image-types (str/join "," valid-image-types))
(def str-font-types (str/join "," valid-font-types))
diff --git a/common/src/app/common/types/color.cljc b/common/src/app/common/types/color.cljc
index 382530ac2..7bded1492 100644
--- a/common/src/app/common/types/color.cljc
+++ b/common/src/app/common/types/color.cljc
@@ -358,3 +358,9 @@
(process-shape-colors shape sync-color)))
+(defn eq-recent-color?
+ [c1 c2]
+ (or (= c1 c2)
+ (and (some? (:color c1))
+ (some? (:color c2))
+ (= (:color c1) (:color c2)))))
diff --git a/common/src/app/common/types/component.cljc b/common/src/app/common/types/component.cljc
index ec9a679a9..205454d71 100644
--- a/common/src/app/common/types/component.cljc
+++ b/common/src/app/common/types/component.cljc
@@ -4,7 +4,11 @@
;;
;; Copyright (c) KALEIDOS INC
-(ns app.common.types.component)
+(ns app.common.types.component
+ (:require
+ [app.common.data :as d]
+ [app.common.uuid :as uuid]
+ [cuerdas.core :as str]))
;; Attributes that may be synced in components, and the group they belong to.
;; When one attribute is modified in a shape inside a component, the corresponding
@@ -170,6 +174,29 @@
(and (= shape-id (:main-instance-id component))
(= page-id (:main-instance-page component))))
+(defn build-swap-slot-group
+ "Convert a swap-slot into a :touched group"
+ [swap-slot]
+ (when swap-slot
+ (keyword (str "swap-slot-" swap-slot))))
+
+(defn get-swap-slot
+ "If the shape has a :touched group in the form :swap-slot-, get the id."
+ [shape]
+ (let [group (->> (:touched shape)
+ (map name)
+ (d/seek #(str/starts-with? % "swap-slot-")))]
+ (when group
+ (uuid/uuid (subs group 10)))))
+
+(defn match-swap-slot?
+ [shape-main shape-inst]
+ (let [slot-main (get-swap-slot shape-main)
+ slot-inst (get-swap-slot shape-inst)]
+ (when (some? slot-inst)
+ (or (= slot-main slot-inst)
+ (= (:id shape-main) slot-inst)))))
+
(defn get-component-root
[component]
(if (true? (:main-instance-id component))
@@ -213,3 +240,13 @@
(distinct)
(filter #(not (eq % (get comp1 %) (get comp2 %))))
set)))
+
+(defn allow-duplicate?
+ [objects shape]
+
+ (let [parent (get objects (:parent-id shape))]
+ ;; We don't want to change the structure of component copies
+ (and (not (in-component-copy-not-head? shape))
+ ;; Non instance, non copy. We allow
+ (or (not (instance-head? shape))
+ (not (in-component-copy? parent))))))
diff --git a/common/src/app/common/types/container.cljc b/common/src/app/common/types/container.cljc
index a29d8b940..ee2be1ae6 100644
--- a/common/src/app/common/types/container.cljc
+++ b/common/src/app/common/types/container.cljc
@@ -90,6 +90,10 @@
[container shape-id f]
(update-in container [:objects shape-id] f))
+(defn get-container-root
+ [container]
+ (d/seek #(or (nil? (:parent-id %)) (= (:parent-id %) uuid/zero)) (shapes-seq container)))
+
(defn get-direct-children
[container shape]
(map #(get-shape container %) (:shapes shape)))
@@ -107,7 +111,7 @@
(get-children-rec [] id)))
(defn get-component-shape
- "Get the parent top shape linked to a component for this shape, if any"
+ "Get the parent top shape linked to a component main for this shape, if any"
([objects shape] (get-component-shape objects shape nil))
([objects shape {:keys [allow-main?] :or {allow-main? false} :as options}]
(let [parent (get objects (:parent-id shape))]
@@ -416,12 +420,6 @@
(some ctk/main-instance? children)
(some ctk/main-instance? parents))))
-(defn has-any-main-children?
- "Check if the shape is a main component or has any children that is a main component."
- [objects shape]
- (let [children (cfh/get-children-with-self objects (:id shape))]
- (some ctk/main-instance? children)))
-
(defn valid-shape-for-component?
"Check if a main component can be generated from this shape in terms of nested components:
- A main can't be the ancestor of another main
@@ -431,10 +429,29 @@
(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]
+ (if-let [children (cfh/get-children objects (:id shape))]
+ (mapcat collect-main-shapes children objects)
+ [])))
+
(defn- invalid-structure-for-component?
"Check if the structure generated nesting children in parent is invalid in terms of nested components"
- [objects parent children]
- (let [selected-main-instance? (some true? (map #(has-any-main-children? objects %) children))
+ [objects parent children pasting? libraries]
+ (let [; When we are pasting, the main shapes will be pasted as copies, unless the
+ ; 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)])]
+ (and component (not (:deleted component)))))
+
+ selected-components (cond->> (mapcat collect-main-shapes children objects)
+ pasting?
+ (remove #(remove? %)))
+
+ selected-main-instance? (seq selected-components)
parent-in-component? (in-any-component? objects parent)
comps-nesting-loop? (not (->> children
(map #(cfh/components-nesting-loop? objects (:id %) (:id parent)))
@@ -450,13 +467,15 @@
(defn find-valid-parent-and-frame-ids
"Navigate trough the ancestors until find one that is valid. Returns [ parent-id frame-id ]"
- [parent-id objects children]
- (letfn [(get-frame [parent-id]
- (if (cfh/frame-shape? objects parent-id) parent-id (get-in objects [parent-id :frame-id])))]
- (let [parent (get objects parent-id)
+ ([parent-id objects children]
+ (find-valid-parent-and-frame-ids parent-id objects children false nil))
+ ([parent-id objects children pasting? libraries]
+ (letfn [(get-frame [parent-id]
+ (if (cfh/frame-shape? objects parent-id) parent-id (get-in objects [parent-id :frame-id])))]
+ (let [parent (get objects parent-id)
;; We can always move the children to the parent they already have
- no-changes?
- (->> children (every? #(= parent-id (:parent-id %))))]
- (if (or no-changes? (not (invalid-structure-for-component? objects parent children)))
- [parent-id (get-frame parent-id)]
- (recur (:parent-id parent) objects children)))))
+ no-changes?
+ (->> children (every? #(= parent-id (:parent-id %))))]
+ (if (or no-changes? (not (invalid-structure-for-component? objects parent children pasting? libraries)))
+ [parent-id (get-frame parent-id)]
+ (recur (:parent-id parent) objects children pasting? libraries))))))
diff --git a/common/src/app/common/types/file.cljc b/common/src/app/common/types/file.cljc
index 58b579f2e..3afb89c24 100644
--- a/common/src/app/common/types/file.cljc
+++ b/common/src/app/common/types/file.cljc
@@ -117,12 +117,6 @@
(ctkl/update-component file-data (:id container) f)))
;; Asset helpers
-
-(defn find-component
- "Retrieve a component from libraries, iterating over all of them."
- [libraries component-id & {:keys [include-deleted?] :or {include-deleted? false}}]
- (some #(ctkl/get-component (:data %) component-id include-deleted?) (vals libraries)))
-
(defn find-component-file
[file libraries component-file]
(if (and (some? file) (= component-file (:id file)))
@@ -153,7 +147,7 @@
(defn get-component-container
"Retrieve the container that holds the component shapes (the page in components-v2
- or the component itself in v1)"
+ or the component itself in v1 or deleted component)."
[file-data component]
(let [components-v2 (dm/get-in file-data [:options :components-v2])]
(if (and components-v2 (not (:deleted component)))
@@ -172,22 +166,34 @@
(ctk/get-component-root component))))
(defn get-component-shape
- "Retrieve one shape in the component by id."
- [file-data component shape-id]
+ "Retrieve one shape in the component by id. If with-context? is true, add the
+ file and container where the shape resides in its metadata."
+ [file-data component shape-id & {:keys [with-context?] :or {with-context? false}}]
(let [components-v2 (dm/get-in file-data [:options :components-v2])]
(if (and components-v2 (not (:deleted component)))
(let [component-page (get-component-page file-data component)]
(when component-page
- (cfh/get-child (:objects component-page)
- (:main-instance-id component)
- shape-id)))
- (dm/get-in component [:objects shape-id]))))
+ (let [child (cfh/get-child (:objects component-page)
+ (:main-instance-id component)
+ shape-id)]
+ (cond-> child
+ (and child with-context?)
+ (with-meta {:file {:id (:id file-data)
+ :data file-data}
+ :container (ctn/make-container component-page :page)})))))
+
+ (let [shape (dm/get-in component [:objects shape-id])]
+ (cond-> shape
+ (and shape with-context?)
+ (with-meta {:file {:id (:id file-data)
+ :data file-data}
+ :container (ctn/make-container component :component)}))))))
(defn get-ref-shape
"Retrieve the shape in the component that is referenced by the instance shape."
- [file-data component shape]
+ [file-data component shape & {:keys [with-context?] :or {with-context? false}}]
(when (:shape-ref shape)
- (get-component-shape file-data component (:shape-ref shape))))
+ (get-component-shape file-data component (:shape-ref shape) :with-context? with-context?)))
(defn get-shape-in-copy
"Given a shape in the main component and the root of the copy component returns the equivalent
@@ -199,16 +205,25 @@
(defn find-ref-shape
"Locate the nearest component in the local file or libraries, and retrieve the shape
referenced by the instance shape."
- [file page libraries shape & {:keys [include-deleted?] :or {include-deleted? false}}]
+ [file container libraries shape & {:keys [include-deleted? with-context?] :or {include-deleted? false with-context? false}}]
(let [find-ref-shape-in-head
(fn [head-shape]
- (let [head-file (find-component-file file libraries (:component-file head-shape))
- head-component (when (some? head-file)
- (ctkl/get-component (:data head-file) (:component-id head-shape) include-deleted?))]
- (when (some? head-component)
- (get-ref-shape (:data head-file) head-component shape))))]
+ (let [component-file (find-component-file file libraries (:component-file head-shape))
+ component (when (some? component-file)
+ (ctkl/get-component (:data component-file) (:component-id head-shape) include-deleted?))]
+ (when (some? component)
+ (get-ref-shape (:data component-file) component shape :with-context? with-context?))))]
+
+ (some find-ref-shape-in-head (ctn/get-parent-heads (:objects container) shape))))
+
+(defn find-original-ref-shape
+ "Recursively call to find-ref-shape until find the original shape of the original component"
+ [file container libraries shape & options]
+ (let [ref-shape (find-ref-shape file container libraries shape options)]
+ (if (nil? (:shape-ref ref-shape))
+ ref-shape
+ (find-original-ref-shape file container libraries ref-shape options))))
- (some find-ref-shape-in-head (ctn/get-parent-heads (:objects page) shape))))
(defn find-ref-component
"Locate the nearest component in the local file or libraries that is referenced by the
@@ -216,12 +231,14 @@
[file page libraries shape & {:keys [include-deleted?] :or {include-deleted? false}}]
(let [find-ref-component-in-head
(fn [head-shape]
- (let [head-file (find-component-file file libraries (:component-file head-shape))
- head-component (when (some? head-file)
- (ctkl/get-component (:data head-file) (:component-id head-shape) include-deleted?))]
- (when (some? head-component)
- (when (get-ref-shape (:data head-file) head-component shape)
- head-component))))]
+ (let [component-file (find-component-file file libraries (:component-file head-shape))
+ component (when (some? component-file)
+ (ctkl/get-component (:data component-file)
+ (:component-id head-shape)
+ include-deleted?))]
+ (when (some? component)
+ (when (get-ref-shape (:data component-file) component shape)
+ component))))]
(some find-ref-component-in-head (ctn/get-parent-copy-heads (:objects page) shape))))
@@ -257,6 +274,34 @@
(let [ref-component (find-ref-component file page libraries shape :include-deleted? true)]
(true? (= (:id component) (:id ref-component)))))
+(defn find-swap-slot
+ [shape container file libraries]
+ (if-let [swap-slot (ctk/get-swap-slot shape)]
+ swap-slot
+ (let [ref-shape (find-ref-shape file
+ container
+ libraries
+ shape
+ :include-deleted? true
+ :with-context? true)
+ shape-meta (meta ref-shape)
+ ref-file (:file shape-meta)
+ ref-container (:container shape-meta)]
+ (when ref-shape
+ (if-let [swap-slot (ctk/get-swap-slot ref-shape)]
+ swap-slot
+ (if (ctk/main-instance? ref-shape)
+ (:id shape)
+ (find-swap-slot ref-shape ref-container ref-file libraries)))))))
+
+(defn match-swap-slot?
+ [shape-main shape-inst container-inst container-main file libraries]
+ (let [slot-main (find-swap-slot shape-main container-main file libraries)
+ slot-inst (find-swap-slot shape-inst container-inst file libraries)]
+ (when (some? slot-inst)
+ (or (= slot-main slot-inst)
+ (= (:id shape-main) slot-inst)))))
+
(defn get-component-shapes
"Retrieve all shapes of the component"
[file-data component]
@@ -268,7 +313,7 @@
(vals (:objects component)))))
;; Return true if the object is a component that exists on the file or its libraries (even a deleted one)
-(defn is-known-component?
+(defn is-main-of-known-component?
[shape libraries]
(let [main-instance? (ctk/main-instance? shape)
component-id (:component-id shape)
diff --git a/common/src/app/common/types/shape/layout.cljc b/common/src/app/common/types/shape/layout.cljc
index 7c60ad412..c39545041 100644
--- a/common/src/app/common/types/shape/layout.cljc
+++ b/common/src/app/common/types/shape/layout.cljc
@@ -8,6 +8,7 @@
(:require
[app.common.data :as d]
[app.common.data.macros :as dm]
+ [app.common.files.helpers :as cfh]
[app.common.geom.shapes.grid-layout.areas :as sga]
[app.common.math :as mth]
[app.common.schema :as sm]
@@ -47,7 +48,8 @@
#{:flex :grid})
(def flex-direction-types
- #{:row :reverse-row :row-reverse :column :reverse-column :column-reverse}) ;;TODO remove reverse-column and reverse-row after script
+ ;;TODO remove reverse-column and reverse-row after script
+ #{:row :reverse-row :row-reverse :column :reverse-column :column-reverse})
(def grid-direction-types
#{:row :column})
@@ -128,7 +130,7 @@
(def grid-cell-justify-self-types
#{:auto :start :center :end :stretch})
-(sm/define! ::grid-cell
+(sm/def! ::grid-cell
[:map {:title "GridCell"}
[:id ::sm/uuid]
[:area-name {:optional true} :string]
@@ -142,7 +144,7 @@
[:shapes
[:vector {:gen/max 1} ::sm/uuid]]])
-(sm/define! ::grid-track
+(sm/def! ::grid-track
[:map {:title "GridTrack"}
[:type [::sm/one-of grid-track-types]]
[:value {:optional true} [:maybe ::sm/safe-number]]])
@@ -197,14 +199,14 @@
([objects id]
(flex-layout? (get objects id)))
([shape]
- (and (= :frame (:type shape))
+ (and (cfh/frame-shape? shape)
(= :flex (:layout shape)))))
(defn grid-layout?
([objects id]
(grid-layout? (get objects id)))
([shape]
- (and (= :frame (:type shape))
+ (and (cfh/frame-shape? shape)
(= :grid (:layout shape)))))
(defn any-layout?
@@ -212,7 +214,10 @@
(any-layout? (get objects id)))
([shape]
- (or (flex-layout? shape) (grid-layout? shape))))
+ (and (cfh/frame-shape? shape)
+ (let [layout (:layout shape)]
+ (or (= :flex layout)
+ (= :grid layout))))))
(defn flex-layout-immediate-child? [objects shape]
(let [parent-id (:parent-id shape)
@@ -262,20 +267,21 @@
(defn inside-layout?
"Check if the shape is inside a layout"
[objects shape]
-
- (loop [current-id (:id shape)]
- (let [current (get objects current-id)]
+ (loop [current-id (dm/get-prop shape :id)]
+ (let [current (get objects current-id)
+ parent-id (dm/get-prop current :parent-id)]
(cond
- (or (nil? current) (= current-id (:parent-id current)))
+ (or (nil? current) (= current-id parent-id))
false
- (= :frame (:type current))
+ (cfh/frame-shape? current-id)
(:layout current)
:else
- (recur (:parent-id current))))))
+ (recur parent-id)))))
-(defn wrap? [{:keys [layout-wrap-type]}]
+(defn wrap?
+ [{:keys [layout-wrap-type]}]
(= layout-wrap-type :wrap))
(defn fill-width?
@@ -536,6 +542,22 @@
([shape]
(or (:layout-item-z-index shape) 0)))
+(defn- comparator-layout-z-index
+ [[idx-a child-a] [idx-b child-b]]
+ (cond
+ (> (layout-z-index child-a) (layout-z-index child-b)) 1
+ (< (layout-z-index child-a) (layout-z-index child-b)) -1
+ (< idx-a idx-b) 1
+ (> idx-a idx-b) -1
+ :else 0))
+
+(defn sort-layout-children-z-index
+ [children]
+ (->> children
+ (d/enumerate)
+ (sort comparator-layout-z-index)
+ (mapv second)))
+
(defn change-h-sizing?
[frame-id objects children-ids]
(and (flex-layout? objects frame-id)
diff --git a/common/src/app/common/types/shape_tree.cljc b/common/src/app/common/types/shape_tree.cljc
index 92e8880be..646c26641 100644
--- a/common/src/app/common/types/shape_tree.cljc
+++ b/common/src/app/common/types/shape_tree.cljc
@@ -40,8 +40,7 @@
(update :shapes update-parent-shapes)
(update :shapes d/vec-without-nils)
(cond-> (and (ctk/in-component-copy? parent) (not ignore-touched))
- (-> (update :touched cfh/set-touched-group :shapes-group)
- (dissoc :remote-synced)))))
+ (dissoc :remote-synced))))
update-objects
(fn [objects parent-id]
@@ -85,8 +84,7 @@
(let [parent (update parent :shapes d/without-obj shape-id)]
(cond-> parent
(and (:shape-ref parent) (not ignore-touched))
- (-> (update :touched cfh/set-touched-group :shapes-group)
- (dissoc :remote-synced)))))
+ (dissoc :remote-synced))))
(delete-from-objects [objects]
(if-let [target (get objects shape-id)]
diff --git a/common/test/common_tests/helpers/components.cljc b/common/test/common_tests/helpers/components.cljc
index f842d2dc2..523438c44 100644
--- a/common/test/common_tests/helpers/components.cljc
+++ b/common/test/common_tests/helpers/components.cljc
@@ -82,7 +82,7 @@
[page root-inst-id libraries]
(let [root-inst (ctn/get-shape page root-inst-id)
- component (ctf/find-component libraries (:component-id root-inst))
+ component (ctf/get-component libraries (:component-file root-inst) (:component-id root-inst))
shapes-inst (cfh/get-children-with-self (:objects page) root-inst-id)
shapes-main (cfh/get-children-with-self (:objects component) (:shape-ref root-inst))
@@ -94,7 +94,7 @@
(ctn/get-component-shape (:objects page) shape)
component
- (ctf/find-component libraries (:component-id component-shape))
+ (ctf/get-component libraries (:component-file component-shape) (:component-id component-shape))
main-shape
(ctn/get-shape component (:shape-ref shape))]
@@ -118,7 +118,7 @@
[page root-inst-id libraries]
(let [root-inst (ctn/get-shape page root-inst-id)
- component (ctf/find-component libraries (:component-id root-inst))
+ component (ctf/get-component libraries (:component-file root-inst) (:component-id root-inst))
shapes-inst (cfh/get-children-with-self (:objects page) root-inst-id)
shapes-main (cfh/get-children-with-self (:objects component) (:shape-ref root-inst))
@@ -130,7 +130,7 @@
(ctn/get-component-shape (:objects page) shape)
component
- (ctf/find-component libraries (:component-id component-shape))
+ (ctf/get-component libraries (:component-file component-shape) (:component-id component-shape))
main-shape
(ctn/get-shape component (:shape-ref shape))]
@@ -142,15 +142,5 @@
[shapes-inst shapes-main component]))
-(defn resolve-component
- "Get the component with the given id and all its shapes."
- [page component-id libraries]
- (let [component (ctf/find-component libraries component-id)
- root-main (ctk/get-component-root component)
- shapes-main (cfh/get-children-with-self (:objects component) (:id root-main))]
- ;; Validate that the component tree is well constructed
- (run! check-noninstance shapes-main)
-
- [shapes-main component]))
diff --git a/frontend/deps.edn b/frontend/deps.edn
index f4a152eae..3cd46d85a 100644
--- a/frontend/deps.edn
+++ b/frontend/deps.edn
@@ -9,8 +9,8 @@
funcool/okulary {:mvn/version "2022.04.11-16"}
funcool/potok2
- {:git/tag "v2.0"
- :git/sha "2bb377b"
+ {:git/tag "v2.1"
+ :git/sha "84c97b9"
:git/url "https://github.com/funcool/potok.git"}
funcool/beicon2
diff --git a/frontend/resources/images/features/2.0-html.gif b/frontend/resources/images/features/2.0-html.gif
new file mode 100644
index 000000000..6e10f5ad7
Binary files /dev/null and b/frontend/resources/images/features/2.0-html.gif differ
diff --git a/frontend/resources/images/icons/absolute-refactor.svg b/frontend/resources/images/icons/absolute.svg
similarity index 100%
rename from frontend/resources/images/icons/absolute-refactor.svg
rename to frontend/resources/images/icons/absolute.svg
diff --git a/frontend/resources/images/icons/action-mark.svg b/frontend/resources/images/icons/action-mark.svg
deleted file mode 100644
index 7c5ca1f0d..000000000
--- a/frontend/resources/images/icons/action-mark.svg
+++ /dev/null
@@ -1 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/add-refactor.svg b/frontend/resources/images/icons/add.svg
similarity index 100%
rename from frontend/resources/images/icons/add-refactor.svg
rename to frontend/resources/images/icons/add.svg
diff --git a/frontend/resources/images/icons/align-bottom-refactor.svg b/frontend/resources/images/icons/align-bottom-refactor.svg
deleted file mode 100644
index add9efe67..000000000
--- a/frontend/resources/images/icons/align-bottom-refactor.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
\ No newline at end of file
diff --git a/frontend/resources/images/icons/align-bottom.svg b/frontend/resources/images/icons/align-bottom.svg
index 79e156fd8..add9efe67 100644
--- a/frontend/resources/images/icons/align-bottom.svg
+++ b/frontend/resources/images/icons/align-bottom.svg
@@ -1,3 +1,3 @@
-
-
+
+
\ No newline at end of file
diff --git a/frontend/resources/images/icons/align-content-column-around-refactor.svg b/frontend/resources/images/icons/align-content-column-around-refactor.svg
deleted file mode 100644
index a10b0133f..000000000
--- a/frontend/resources/images/icons/align-content-column-around-refactor.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
\ No newline at end of file
diff --git a/frontend/resources/images/icons/align-content-column-around.svg b/frontend/resources/images/icons/align-content-column-around.svg
index d7f54514a..a10b0133f 100644
--- a/frontend/resources/images/icons/align-content-column-around.svg
+++ b/frontend/resources/images/icons/align-content-column-around.svg
@@ -1,3 +1,3 @@
-
-
+
+
\ No newline at end of file
diff --git a/frontend/resources/images/icons/align-content-column-between-refactor.svg b/frontend/resources/images/icons/align-content-column-between-refactor.svg
deleted file mode 100644
index f3a70b757..000000000
--- a/frontend/resources/images/icons/align-content-column-between-refactor.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
\ No newline at end of file
diff --git a/frontend/resources/images/icons/align-content-column-between.svg b/frontend/resources/images/icons/align-content-column-between.svg
index f07dbe1db..f3a70b757 100644
--- a/frontend/resources/images/icons/align-content-column-between.svg
+++ b/frontend/resources/images/icons/align-content-column-between.svg
@@ -1,3 +1,3 @@
-
-
+
+
\ No newline at end of file
diff --git a/frontend/resources/images/icons/align-content-column-center-refactor.svg b/frontend/resources/images/icons/align-content-column-center-refactor.svg
deleted file mode 100644
index 04737fd9d..000000000
--- a/frontend/resources/images/icons/align-content-column-center-refactor.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
\ No newline at end of file
diff --git a/frontend/resources/images/icons/align-content-column-center.svg b/frontend/resources/images/icons/align-content-column-center.svg
index 56317ce06..04737fd9d 100644
--- a/frontend/resources/images/icons/align-content-column-center.svg
+++ b/frontend/resources/images/icons/align-content-column-center.svg
@@ -1,3 +1,3 @@
-
-
+
+
\ No newline at end of file
diff --git a/frontend/resources/images/icons/align-content-column-end-refactor.svg b/frontend/resources/images/icons/align-content-column-end-refactor.svg
deleted file mode 100644
index bec340dc7..000000000
--- a/frontend/resources/images/icons/align-content-column-end-refactor.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
\ No newline at end of file
diff --git a/frontend/resources/images/icons/align-content-column-end.svg b/frontend/resources/images/icons/align-content-column-end.svg
index eab99cd62..bec340dc7 100644
--- a/frontend/resources/images/icons/align-content-column-end.svg
+++ b/frontend/resources/images/icons/align-content-column-end.svg
@@ -1,3 +1,3 @@
-
-
+
+
\ No newline at end of file
diff --git a/frontend/resources/images/icons/align-content-column-evenly-refactor.svg b/frontend/resources/images/icons/align-content-column-evenly-refactor.svg
deleted file mode 100644
index f9f0cdd13..000000000
--- a/frontend/resources/images/icons/align-content-column-evenly-refactor.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
\ No newline at end of file
diff --git a/frontend/resources/images/icons/align-content-column-evenly.svg b/frontend/resources/images/icons/align-content-column-evenly.svg
index bb613bc72..f9f0cdd13 100644
--- a/frontend/resources/images/icons/align-content-column-evenly.svg
+++ b/frontend/resources/images/icons/align-content-column-evenly.svg
@@ -1,3 +1,3 @@
-
-
+
+
\ No newline at end of file
diff --git a/frontend/resources/images/icons/align-content-column-start-refactor.svg b/frontend/resources/images/icons/align-content-column-start-refactor.svg
deleted file mode 100644
index c85b3f48f..000000000
--- a/frontend/resources/images/icons/align-content-column-start-refactor.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
\ No newline at end of file
diff --git a/frontend/resources/images/icons/align-content-column-start.svg b/frontend/resources/images/icons/align-content-column-start.svg
index d3490501f..c85b3f48f 100644
--- a/frontend/resources/images/icons/align-content-column-start.svg
+++ b/frontend/resources/images/icons/align-content-column-start.svg
@@ -1,3 +1,3 @@
-
-
+
+
\ No newline at end of file
diff --git a/frontend/resources/images/icons/align-content-column-stretch-refactor.svg b/frontend/resources/images/icons/align-content-column-stretch.svg
similarity index 100%
rename from frontend/resources/images/icons/align-content-column-stretch-refactor.svg
rename to frontend/resources/images/icons/align-content-column-stretch.svg
diff --git a/frontend/resources/images/icons/align-content-row-around-refactor.svg b/frontend/resources/images/icons/align-content-row-around-refactor.svg
deleted file mode 100644
index 41537d8a9..000000000
--- a/frontend/resources/images/icons/align-content-row-around-refactor.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
\ No newline at end of file
diff --git a/frontend/resources/images/icons/align-content-row-around.svg b/frontend/resources/images/icons/align-content-row-around.svg
index f49bb584f..41537d8a9 100644
--- a/frontend/resources/images/icons/align-content-row-around.svg
+++ b/frontend/resources/images/icons/align-content-row-around.svg
@@ -1,3 +1,3 @@
-
-
+
+
\ No newline at end of file
diff --git a/frontend/resources/images/icons/align-content-row-between-refactor.svg b/frontend/resources/images/icons/align-content-row-between-refactor.svg
deleted file mode 100644
index b8e1ad1f5..000000000
--- a/frontend/resources/images/icons/align-content-row-between-refactor.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
\ No newline at end of file
diff --git a/frontend/resources/images/icons/align-content-row-between.svg b/frontend/resources/images/icons/align-content-row-between.svg
index 6723db3d9..b8e1ad1f5 100644
--- a/frontend/resources/images/icons/align-content-row-between.svg
+++ b/frontend/resources/images/icons/align-content-row-between.svg
@@ -1,3 +1,3 @@
-
-
+
+
\ No newline at end of file
diff --git a/frontend/resources/images/icons/align-content-row-center-refactor.svg b/frontend/resources/images/icons/align-content-row-center-refactor.svg
deleted file mode 100644
index 87775ca90..000000000
--- a/frontend/resources/images/icons/align-content-row-center-refactor.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
\ No newline at end of file
diff --git a/frontend/resources/images/icons/align-content-row-center.svg b/frontend/resources/images/icons/align-content-row-center.svg
index b318cd9d2..87775ca90 100644
--- a/frontend/resources/images/icons/align-content-row-center.svg
+++ b/frontend/resources/images/icons/align-content-row-center.svg
@@ -1,3 +1,3 @@
-
-
+
+
\ No newline at end of file
diff --git a/frontend/resources/images/icons/align-content-row-end-refactor.svg b/frontend/resources/images/icons/align-content-row-end-refactor.svg
deleted file mode 100644
index b31b629eb..000000000
--- a/frontend/resources/images/icons/align-content-row-end-refactor.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
\ No newline at end of file
diff --git a/frontend/resources/images/icons/align-content-row-end.svg b/frontend/resources/images/icons/align-content-row-end.svg
index 56aecaae9..b31b629eb 100644
--- a/frontend/resources/images/icons/align-content-row-end.svg
+++ b/frontend/resources/images/icons/align-content-row-end.svg
@@ -1,3 +1,3 @@
-
-
+
+
\ No newline at end of file
diff --git a/frontend/resources/images/icons/align-content-row-evenly-refactor.svg b/frontend/resources/images/icons/align-content-row-evenly-refactor.svg
deleted file mode 100644
index 2607631c6..000000000
--- a/frontend/resources/images/icons/align-content-row-evenly-refactor.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
\ No newline at end of file
diff --git a/frontend/resources/images/icons/align-content-row-evenly.svg b/frontend/resources/images/icons/align-content-row-evenly.svg
index fd67e71e7..2607631c6 100644
--- a/frontend/resources/images/icons/align-content-row-evenly.svg
+++ b/frontend/resources/images/icons/align-content-row-evenly.svg
@@ -1,3 +1,3 @@
-
-
+
+
\ No newline at end of file
diff --git a/frontend/resources/images/icons/align-content-row-start-refactor.svg b/frontend/resources/images/icons/align-content-row-start-refactor.svg
deleted file mode 100644
index e20658500..000000000
--- a/frontend/resources/images/icons/align-content-row-start-refactor.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
\ No newline at end of file
diff --git a/frontend/resources/images/icons/align-content-row-start.svg b/frontend/resources/images/icons/align-content-row-start.svg
index d666646cf..e20658500 100644
--- a/frontend/resources/images/icons/align-content-row-start.svg
+++ b/frontend/resources/images/icons/align-content-row-start.svg
@@ -1,3 +1,3 @@
-
-
+
+
\ No newline at end of file
diff --git a/frontend/resources/images/icons/align-content-row-stretch-refactor.svg b/frontend/resources/images/icons/align-content-row-stretch.svg
similarity index 100%
rename from frontend/resources/images/icons/align-content-row-stretch-refactor.svg
rename to frontend/resources/images/icons/align-content-row-stretch.svg
diff --git a/frontend/resources/images/icons/align-horizontal-center-refactor.svg b/frontend/resources/images/icons/align-horizontal-center.svg
similarity index 100%
rename from frontend/resources/images/icons/align-horizontal-center-refactor.svg
rename to frontend/resources/images/icons/align-horizontal-center.svg
diff --git a/frontend/resources/images/icons/align-items-column-baseline.svg b/frontend/resources/images/icons/align-items-column-baseline.svg
deleted file mode 100644
index 862f7afd1..000000000
--- a/frontend/resources/images/icons/align-items-column-baseline.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/align-items-column-center-refactor.svg b/frontend/resources/images/icons/align-items-column-center-refactor.svg
deleted file mode 100644
index 6685e5b1d..000000000
--- a/frontend/resources/images/icons/align-items-column-center-refactor.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
\ No newline at end of file
diff --git a/frontend/resources/images/icons/align-items-column-center.svg b/frontend/resources/images/icons/align-items-column-center.svg
index e35973436..6685e5b1d 100644
--- a/frontend/resources/images/icons/align-items-column-center.svg
+++ b/frontend/resources/images/icons/align-items-column-center.svg
@@ -1,3 +1,3 @@
-
-
+
+
\ No newline at end of file
diff --git a/frontend/resources/images/icons/align-items-column-end-refactor.svg b/frontend/resources/images/icons/align-items-column-end-refactor.svg
deleted file mode 100644
index 40c753395..000000000
--- a/frontend/resources/images/icons/align-items-column-end-refactor.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
\ No newline at end of file
diff --git a/frontend/resources/images/icons/align-items-column-end.svg b/frontend/resources/images/icons/align-items-column-end.svg
index 7bdb1d632..40c753395 100644
--- a/frontend/resources/images/icons/align-items-column-end.svg
+++ b/frontend/resources/images/icons/align-items-column-end.svg
@@ -1,3 +1,3 @@
-
-
+
+
\ No newline at end of file
diff --git a/frontend/resources/images/icons/align-items-column-start-refactor.svg b/frontend/resources/images/icons/align-items-column-start-refactor.svg
deleted file mode 100644
index 6e71ebd87..000000000
--- a/frontend/resources/images/icons/align-items-column-start-refactor.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
\ No newline at end of file
diff --git a/frontend/resources/images/icons/align-items-column-start.svg b/frontend/resources/images/icons/align-items-column-start.svg
index 5c231d486..6e71ebd87 100644
--- a/frontend/resources/images/icons/align-items-column-start.svg
+++ b/frontend/resources/images/icons/align-items-column-start.svg
@@ -1,3 +1,3 @@
-
-
+
+
\ No newline at end of file
diff --git a/frontend/resources/images/icons/align-items-column-strech.svg b/frontend/resources/images/icons/align-items-column-strech.svg
deleted file mode 100644
index dd441d93f..000000000
--- a/frontend/resources/images/icons/align-items-column-strech.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/align-items-row-baseline.svg b/frontend/resources/images/icons/align-items-row-baseline.svg
deleted file mode 100644
index b8b397e0a..000000000
--- a/frontend/resources/images/icons/align-items-row-baseline.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/align-items-row-center-refactor.svg b/frontend/resources/images/icons/align-items-row-center-refactor.svg
deleted file mode 100644
index b7e4541b8..000000000
--- a/frontend/resources/images/icons/align-items-row-center-refactor.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
\ No newline at end of file
diff --git a/frontend/resources/images/icons/align-items-row-center.svg b/frontend/resources/images/icons/align-items-row-center.svg
index a07e43a47..b7e4541b8 100644
--- a/frontend/resources/images/icons/align-items-row-center.svg
+++ b/frontend/resources/images/icons/align-items-row-center.svg
@@ -1,3 +1,3 @@
-
-
+
+
\ No newline at end of file
diff --git a/frontend/resources/images/icons/align-items-row-end-refactor.svg b/frontend/resources/images/icons/align-items-row-end-refactor.svg
deleted file mode 100644
index 2080b816a..000000000
--- a/frontend/resources/images/icons/align-items-row-end-refactor.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
\ No newline at end of file
diff --git a/frontend/resources/images/icons/align-items-row-end.svg b/frontend/resources/images/icons/align-items-row-end.svg
index ddeb660a1..2080b816a 100644
--- a/frontend/resources/images/icons/align-items-row-end.svg
+++ b/frontend/resources/images/icons/align-items-row-end.svg
@@ -1,3 +1,3 @@
-
-
+
+
\ No newline at end of file
diff --git a/frontend/resources/images/icons/align-items-row-start-refactor.svg b/frontend/resources/images/icons/align-items-row-start-refactor.svg
deleted file mode 100644
index a05190ed7..000000000
--- a/frontend/resources/images/icons/align-items-row-start-refactor.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
\ No newline at end of file
diff --git a/frontend/resources/images/icons/align-items-row-start.svg b/frontend/resources/images/icons/align-items-row-start.svg
index 69516fc68..a05190ed7 100644
--- a/frontend/resources/images/icons/align-items-row-start.svg
+++ b/frontend/resources/images/icons/align-items-row-start.svg
@@ -1,3 +1,3 @@
-
-
+
+
\ No newline at end of file
diff --git a/frontend/resources/images/icons/align-items-row-strech.svg b/frontend/resources/images/icons/align-items-row-strech.svg
deleted file mode 100644
index 22b308e14..000000000
--- a/frontend/resources/images/icons/align-items-row-strech.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/align-left-refactor.svg b/frontend/resources/images/icons/align-left.svg
similarity index 100%
rename from frontend/resources/images/icons/align-left-refactor.svg
rename to frontend/resources/images/icons/align-left.svg
diff --git a/frontend/resources/images/icons/align-middle.svg b/frontend/resources/images/icons/align-middle.svg
deleted file mode 100644
index 60a538eb3..000000000
--- a/frontend/resources/images/icons/align-middle.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/align-right-refactor.svg b/frontend/resources/images/icons/align-right.svg
similarity index 100%
rename from frontend/resources/images/icons/align-right-refactor.svg
rename to frontend/resources/images/icons/align-right.svg
diff --git a/frontend/resources/images/icons/align-self-column-baseline.svg b/frontend/resources/images/icons/align-self-column-baseline.svg
deleted file mode 100644
index 4ed4d6357..000000000
--- a/frontend/resources/images/icons/align-self-column-baseline.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/align-self-column-bottom-refactor.svg b/frontend/resources/images/icons/align-self-column-bottom-refactor.svg
deleted file mode 100644
index 369adddc4..000000000
--- a/frontend/resources/images/icons/align-self-column-bottom-refactor.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
\ No newline at end of file
diff --git a/frontend/resources/images/icons/align-self-column-bottom.svg b/frontend/resources/images/icons/align-self-column-bottom.svg
index 6ef7f1e75..369adddc4 100644
--- a/frontend/resources/images/icons/align-self-column-bottom.svg
+++ b/frontend/resources/images/icons/align-self-column-bottom.svg
@@ -1,3 +1,3 @@
-
-
+
+
\ No newline at end of file
diff --git a/frontend/resources/images/icons/align-self-column-center-refactor.svg b/frontend/resources/images/icons/align-self-column-center-refactor.svg
deleted file mode 100644
index cc1fcae0c..000000000
--- a/frontend/resources/images/icons/align-self-column-center-refactor.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
\ No newline at end of file
diff --git a/frontend/resources/images/icons/align-self-column-center.svg b/frontend/resources/images/icons/align-self-column-center.svg
index c45bfb53f..cc1fcae0c 100644
--- a/frontend/resources/images/icons/align-self-column-center.svg
+++ b/frontend/resources/images/icons/align-self-column-center.svg
@@ -1,3 +1,3 @@
-
-
+
+
\ No newline at end of file
diff --git a/frontend/resources/images/icons/align-self-column-strech.svg b/frontend/resources/images/icons/align-self-column-strech.svg
deleted file mode 100644
index 5803cb447..000000000
--- a/frontend/resources/images/icons/align-self-column-strech.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/align-self-column-stretch-refactor.svg b/frontend/resources/images/icons/align-self-column-stretch.svg
similarity index 100%
rename from frontend/resources/images/icons/align-self-column-stretch-refactor.svg
rename to frontend/resources/images/icons/align-self-column-stretch.svg
diff --git a/frontend/resources/images/icons/align-self-column-top-refactor.svg b/frontend/resources/images/icons/align-self-column-top-refactor.svg
deleted file mode 100644
index 71bb8e702..000000000
--- a/frontend/resources/images/icons/align-self-column-top-refactor.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
\ No newline at end of file
diff --git a/frontend/resources/images/icons/align-self-column-top.svg b/frontend/resources/images/icons/align-self-column-top.svg
index 67adbc722..71bb8e702 100644
--- a/frontend/resources/images/icons/align-self-column-top.svg
+++ b/frontend/resources/images/icons/align-self-column-top.svg
@@ -1,3 +1,3 @@
-
-
+
+
\ No newline at end of file
diff --git a/frontend/resources/images/icons/align-self-row-baseline.svg b/frontend/resources/images/icons/align-self-row-baseline.svg
deleted file mode 100644
index db2660684..000000000
--- a/frontend/resources/images/icons/align-self-row-baseline.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/align-self-row-center-refactor.svg b/frontend/resources/images/icons/align-self-row-center-refactor.svg
deleted file mode 100644
index 56976d204..000000000
--- a/frontend/resources/images/icons/align-self-row-center-refactor.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/align-self-row-center.svg b/frontend/resources/images/icons/align-self-row-center.svg
index df911a89c..56976d204 100644
--- a/frontend/resources/images/icons/align-self-row-center.svg
+++ b/frontend/resources/images/icons/align-self-row-center.svg
@@ -1,3 +1,3 @@
-
-
+
diff --git a/frontend/resources/images/icons/align-self-row-left-refactor.svg b/frontend/resources/images/icons/align-self-row-left-refactor.svg
deleted file mode 100644
index 335307663..000000000
--- a/frontend/resources/images/icons/align-self-row-left-refactor.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/align-self-row-left.svg b/frontend/resources/images/icons/align-self-row-left.svg
index 7ff6caee1..335307663 100644
--- a/frontend/resources/images/icons/align-self-row-left.svg
+++ b/frontend/resources/images/icons/align-self-row-left.svg
@@ -1,3 +1,3 @@
-
-
+
diff --git a/frontend/resources/images/icons/align-self-row-right-refactor.svg b/frontend/resources/images/icons/align-self-row-right-refactor.svg
deleted file mode 100644
index ea257cea1..000000000
--- a/frontend/resources/images/icons/align-self-row-right-refactor.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/align-self-row-right.svg b/frontend/resources/images/icons/align-self-row-right.svg
index 665e7b562..ea257cea1 100644
--- a/frontend/resources/images/icons/align-self-row-right.svg
+++ b/frontend/resources/images/icons/align-self-row-right.svg
@@ -1,3 +1,3 @@
-
-
+
diff --git a/frontend/resources/images/icons/align-self-row-strech.svg b/frontend/resources/images/icons/align-self-row-strech.svg
deleted file mode 100644
index 426db52b5..000000000
--- a/frontend/resources/images/icons/align-self-row-strech.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/align-self-row-stretch-refactor.svg b/frontend/resources/images/icons/align-self-row-stretch.svg
similarity index 100%
rename from frontend/resources/images/icons/align-self-row-stretch-refactor.svg
rename to frontend/resources/images/icons/align-self-row-stretch.svg
diff --git a/frontend/resources/images/icons/align-top-refactor.svg b/frontend/resources/images/icons/align-top-refactor.svg
deleted file mode 100644
index acb7268d8..000000000
--- a/frontend/resources/images/icons/align-top-refactor.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
\ No newline at end of file
diff --git a/frontend/resources/images/icons/align-top.svg b/frontend/resources/images/icons/align-top.svg
index 4e95be8d3..acb7268d8 100644
--- a/frontend/resources/images/icons/align-top.svg
+++ b/frontend/resources/images/icons/align-top.svg
@@ -1,3 +1,3 @@
-
-
+
+
\ No newline at end of file
diff --git a/frontend/resources/images/icons/align-vertical-center-refactor.svg b/frontend/resources/images/icons/align-vertical-center.svg
similarity index 100%
rename from frontend/resources/images/icons/align-vertical-center-refactor.svg
rename to frontend/resources/images/icons/align-vertical-center.svg
diff --git a/frontend/resources/images/icons/alignment.svg b/frontend/resources/images/icons/alignment.svg
deleted file mode 100644
index 65db1eb38..000000000
--- a/frontend/resources/images/icons/alignment.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/animate-down.svg b/frontend/resources/images/icons/animate-down.svg
deleted file mode 100644
index 6eb7a3501..000000000
--- a/frontend/resources/images/icons/animate-down.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/animate-left.svg b/frontend/resources/images/icons/animate-left.svg
deleted file mode 100644
index 39318e4cc..000000000
--- a/frontend/resources/images/icons/animate-left.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/animate-right.svg b/frontend/resources/images/icons/animate-right.svg
deleted file mode 100644
index aadf5a05b..000000000
--- a/frontend/resources/images/icons/animate-right.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/animate-up.svg b/frontend/resources/images/icons/animate-up.svg
deleted file mode 100644
index 31e877423..000000000
--- a/frontend/resources/images/icons/animate-up.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/arrow-down.svg b/frontend/resources/images/icons/arrow-down.svg
deleted file mode 100644
index 9402aff96..000000000
--- a/frontend/resources/images/icons/arrow-down.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/arrow-end.svg b/frontend/resources/images/icons/arrow-end.svg
deleted file mode 100644
index a025ca2c5..000000000
--- a/frontend/resources/images/icons/arrow-end.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/arrow-slide.svg b/frontend/resources/images/icons/arrow-slide.svg
deleted file mode 100644
index 754e3e97f..000000000
--- a/frontend/resources/images/icons/arrow-slide.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/arrow-up.svg b/frontend/resources/images/icons/arrow-up.svg
deleted file mode 100644
index 63c47d9c8..000000000
--- a/frontend/resources/images/icons/arrow-up.svg
+++ /dev/null
@@ -1 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/asc-sort-refactor.svg b/frontend/resources/images/icons/asc-sort.svg
similarity index 100%
rename from frontend/resources/images/icons/asc-sort-refactor.svg
rename to frontend/resources/images/icons/asc-sort.svg
diff --git a/frontend/resources/images/icons/at.svg b/frontend/resources/images/icons/at.svg
deleted file mode 100644
index c9bb6aada..000000000
--- a/frontend/resources/images/icons/at.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/auto-direction.svg b/frontend/resources/images/icons/auto-direction.svg
deleted file mode 100644
index 3429588fe..000000000
--- a/frontend/resources/images/icons/auto-direction.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/auto-fill.svg b/frontend/resources/images/icons/auto-fill.svg
deleted file mode 100644
index 344e188d7..000000000
--- a/frontend/resources/images/icons/auto-fill.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/auto-fix-layout.svg b/frontend/resources/images/icons/auto-fix-layout.svg
deleted file mode 100644
index f2be41986..000000000
--- a/frontend/resources/images/icons/auto-fix-layout.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/auto-fix.svg b/frontend/resources/images/icons/auto-fix.svg
deleted file mode 100644
index f2be41986..000000000
--- a/frontend/resources/images/icons/auto-fix.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/auto-gap.svg b/frontend/resources/images/icons/auto-gap.svg
deleted file mode 100644
index 25593da80..000000000
--- a/frontend/resources/images/icons/auto-gap.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/auto-grid.svg b/frontend/resources/images/icons/auto-grid.svg
deleted file mode 100644
index c2acf2476..000000000
--- a/frontend/resources/images/icons/auto-grid.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/auto-height.svg b/frontend/resources/images/icons/auto-height.svg
deleted file mode 100644
index 963dda6d3..000000000
--- a/frontend/resources/images/icons/auto-height.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/auto-hug.svg b/frontend/resources/images/icons/auto-hug.svg
deleted file mode 100644
index f72fbd3c8..000000000
--- a/frontend/resources/images/icons/auto-hug.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/auto-margin-both-sides.svg b/frontend/resources/images/icons/auto-margin-both-sides.svg
deleted file mode 100644
index 841f73206..000000000
--- a/frontend/resources/images/icons/auto-margin-both-sides.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/auto-margin-side.svg b/frontend/resources/images/icons/auto-margin-side.svg
deleted file mode 100644
index 087ae8250..000000000
--- a/frontend/resources/images/icons/auto-margin-side.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/auto-margin.svg b/frontend/resources/images/icons/auto-margin.svg
deleted file mode 100644
index 4777ce3b1..000000000
--- a/frontend/resources/images/icons/auto-margin.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/auto-padding-both-sides.svg b/frontend/resources/images/icons/auto-padding-both-sides.svg
deleted file mode 100644
index a9702f96d..000000000
--- a/frontend/resources/images/icons/auto-padding-both-sides.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/auto-padding-side.svg b/frontend/resources/images/icons/auto-padding-side.svg
deleted file mode 100644
index d4c56746b..000000000
--- a/frontend/resources/images/icons/auto-padding-side.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/auto-padding.svg b/frontend/resources/images/icons/auto-padding.svg
deleted file mode 100644
index e546d0631..000000000
--- a/frontend/resources/images/icons/auto-padding.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/auto-width.svg b/frontend/resources/images/icons/auto-width.svg
deleted file mode 100644
index c88a331e3..000000000
--- a/frontend/resources/images/icons/auto-width.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/auto-wrap.svg b/frontend/resources/images/icons/auto-wrap.svg
deleted file mode 100644
index 08a7a19a0..000000000
--- a/frontend/resources/images/icons/auto-wrap.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/board-refactor.svg b/frontend/resources/images/icons/board.svg
similarity index 100%
rename from frontend/resources/images/icons/board-refactor.svg
rename to frontend/resources/images/icons/board.svg
diff --git a/frontend/resources/images/icons/boards-thumbnail-refactor.svg b/frontend/resources/images/icons/boards-thumbnail.svg
similarity index 100%
rename from frontend/resources/images/icons/boards-thumbnail-refactor.svg
rename to frontend/resources/images/icons/boards-thumbnail.svg
diff --git a/frontend/resources/images/icons/boolean-difference-refactor.svg b/frontend/resources/images/icons/boolean-difference-refactor.svg
deleted file mode 100644
index 7d184da97..000000000
--- a/frontend/resources/images/icons/boolean-difference-refactor.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
\ No newline at end of file
diff --git a/frontend/resources/images/icons/boolean-difference.svg b/frontend/resources/images/icons/boolean-difference.svg
index 4d5c7f6a8..7d184da97 100644
--- a/frontend/resources/images/icons/boolean-difference.svg
+++ b/frontend/resources/images/icons/boolean-difference.svg
@@ -1,3 +1,3 @@
-
-
+
+
\ No newline at end of file
diff --git a/frontend/resources/images/icons/boolean-exclude-refactor.svg b/frontend/resources/images/icons/boolean-exclude-refactor.svg
deleted file mode 100644
index 23956eea9..000000000
--- a/frontend/resources/images/icons/boolean-exclude-refactor.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
\ No newline at end of file
diff --git a/frontend/resources/images/icons/boolean-exclude.svg b/frontend/resources/images/icons/boolean-exclude.svg
index 6a3865703..23956eea9 100644
--- a/frontend/resources/images/icons/boolean-exclude.svg
+++ b/frontend/resources/images/icons/boolean-exclude.svg
@@ -1,3 +1,3 @@
-
-
+
+
\ No newline at end of file
diff --git a/frontend/resources/images/icons/boolean-flatten-refactor.svg b/frontend/resources/images/icons/boolean-flatten-refactor.svg
deleted file mode 100644
index 269d05530..000000000
--- a/frontend/resources/images/icons/boolean-flatten-refactor.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
\ No newline at end of file
diff --git a/frontend/resources/images/icons/boolean-flatten.svg b/frontend/resources/images/icons/boolean-flatten.svg
index f7816f8b5..269d05530 100644
--- a/frontend/resources/images/icons/boolean-flatten.svg
+++ b/frontend/resources/images/icons/boolean-flatten.svg
@@ -1,3 +1,3 @@
-
-
+
+
\ No newline at end of file
diff --git a/frontend/resources/images/icons/boolean-intersection-refactor.svg b/frontend/resources/images/icons/boolean-intersection-refactor.svg
deleted file mode 100644
index 42bf660ba..000000000
--- a/frontend/resources/images/icons/boolean-intersection-refactor.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
\ No newline at end of file
diff --git a/frontend/resources/images/icons/boolean-intersection.svg b/frontend/resources/images/icons/boolean-intersection.svg
index 3480e6366..42bf660ba 100644
--- a/frontend/resources/images/icons/boolean-intersection.svg
+++ b/frontend/resources/images/icons/boolean-intersection.svg
@@ -1,3 +1,3 @@
-
-
+
+
\ No newline at end of file
diff --git a/frontend/resources/images/icons/boolean-union-refactor.svg b/frontend/resources/images/icons/boolean-union-refactor.svg
deleted file mode 100644
index 132a1fc29..000000000
--- a/frontend/resources/images/icons/boolean-union-refactor.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
\ No newline at end of file
diff --git a/frontend/resources/images/icons/boolean-union.svg b/frontend/resources/images/icons/boolean-union.svg
index fdeb117b7..132a1fc29 100644
--- a/frontend/resources/images/icons/boolean-union.svg
+++ b/frontend/resources/images/icons/boolean-union.svg
@@ -1,3 +1,3 @@
-
-
+
+
\ No newline at end of file
diff --git a/frontend/resources/images/icons/box.svg b/frontend/resources/images/icons/box.svg
deleted file mode 100644
index d8ef1bffe..000000000
--- a/frontend/resources/images/icons/box.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/bug-refactor.svg b/frontend/resources/images/icons/bug-refactor.svg
deleted file mode 100644
index 0da547da5..000000000
--- a/frontend/resources/images/icons/bug-refactor.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/bug.svg b/frontend/resources/images/icons/bug.svg
index 2904d3122..0da547da5 100644
--- a/frontend/resources/images/icons/bug.svg
+++ b/frontend/resources/images/icons/bug.svg
@@ -1,3 +1,3 @@
-
-
+
diff --git a/frontend/resources/images/icons/cap-circle-marker.svg b/frontend/resources/images/icons/cap-circle-marker.svg
deleted file mode 100644
index 3068ad7b7..000000000
--- a/frontend/resources/images/icons/cap-circle-marker.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/cap-diamond-marker.svg b/frontend/resources/images/icons/cap-diamond-marker.svg
deleted file mode 100644
index 0391c0ffe..000000000
--- a/frontend/resources/images/icons/cap-diamond-marker.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/cap-line-arrow.svg b/frontend/resources/images/icons/cap-line-arrow.svg
deleted file mode 100644
index c24e84233..000000000
--- a/frontend/resources/images/icons/cap-line-arrow.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/cap-round.svg b/frontend/resources/images/icons/cap-round.svg
deleted file mode 100644
index c717c13b9..000000000
--- a/frontend/resources/images/icons/cap-round.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/cap-square-marker.svg b/frontend/resources/images/icons/cap-square-marker.svg
deleted file mode 100644
index 00407fd37..000000000
--- a/frontend/resources/images/icons/cap-square-marker.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/cap-square.svg b/frontend/resources/images/icons/cap-square.svg
deleted file mode 100644
index 24ad4f43f..000000000
--- a/frontend/resources/images/icons/cap-square.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/cap-triangle-arrow.svg b/frontend/resources/images/icons/cap-triangle-arrow.svg
deleted file mode 100644
index 6d6f15978..000000000
--- a/frontend/resources/images/icons/cap-triangle-arrow.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/chain.svg b/frontend/resources/images/icons/chain.svg
deleted file mode 100644
index 661d8db6b..000000000
--- a/frontend/resources/images/icons/chain.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/chat.svg b/frontend/resources/images/icons/chat.svg
deleted file mode 100644
index 5890c6960..000000000
--- a/frontend/resources/images/icons/chat.svg
+++ /dev/null
@@ -1 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/close-small-refactor.svg b/frontend/resources/images/icons/close-small.svg
similarity index 100%
rename from frontend/resources/images/icons/close-small-refactor.svg
rename to frontend/resources/images/icons/close-small.svg
diff --git a/frontend/resources/images/icons/close.svg b/frontend/resources/images/icons/close.svg
index ec01cddba..3c4885be7 100644
--- a/frontend/resources/images/icons/close.svg
+++ b/frontend/resources/images/icons/close.svg
@@ -1 +1,3 @@
-
+
diff --git a/frontend/resources/images/icons/code-refactor.svg b/frontend/resources/images/icons/code-refactor.svg
deleted file mode 100644
index d91ebb9e5..000000000
--- a/frontend/resources/images/icons/code-refactor.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/code.svg b/frontend/resources/images/icons/code.svg
index 3c80441e3..d91ebb9e5 100644
--- a/frontend/resources/images/icons/code.svg
+++ b/frontend/resources/images/icons/code.svg
@@ -1,3 +1,3 @@
-
-
+
diff --git a/frontend/resources/images/icons/column-reverse-refactor.svg b/frontend/resources/images/icons/column-reverse.svg
similarity index 100%
rename from frontend/resources/images/icons/column-reverse-refactor.svg
rename to frontend/resources/images/icons/column-reverse.svg
diff --git a/frontend/resources/images/icons/column-refactor.svg b/frontend/resources/images/icons/column.svg
similarity index 100%
rename from frontend/resources/images/icons/column-refactor.svg
rename to frontend/resources/images/icons/column.svg
diff --git a/frontend/resources/images/icons/comment.svg b/frontend/resources/images/icons/comment.svg
deleted file mode 100644
index f6c098e08..000000000
--- a/frontend/resources/images/icons/comment.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/comments-refactor.svg b/frontend/resources/images/icons/comments.svg
similarity index 100%
rename from frontend/resources/images/icons/comments-refactor.svg
rename to frontend/resources/images/icons/comments.svg
diff --git a/frontend/resources/images/icons/component-copy.svg b/frontend/resources/images/icons/component-copy.svg
index 658e0554d..787024177 100644
--- a/frontend/resources/images/icons/component-copy.svg
+++ b/frontend/resources/images/icons/component-copy.svg
@@ -1,3 +1,3 @@
-
-
+
diff --git a/frontend/resources/images/icons/component-refactor.svg b/frontend/resources/images/icons/component-refactor.svg
deleted file mode 100644
index 289bba9b7..000000000
--- a/frontend/resources/images/icons/component-refactor.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/component.svg b/frontend/resources/images/icons/component.svg
index b89a10c8d..289bba9b7 100644
--- a/frontend/resources/images/icons/component.svg
+++ b/frontend/resources/images/icons/component.svg
@@ -1,3 +1,3 @@
-
-
+
diff --git a/frontend/resources/images/icons/constraint-horizontal-refactor.svg b/frontend/resources/images/icons/constraint-horizontal.svg
similarity index 100%
rename from frontend/resources/images/icons/constraint-horizontal-refactor.svg
rename to frontend/resources/images/icons/constraint-horizontal.svg
diff --git a/frontend/resources/images/icons/constraint-vertical-refactor.svg b/frontend/resources/images/icons/constraint-vertical.svg
similarity index 100%
rename from frontend/resources/images/icons/constraint-vertical-refactor.svg
rename to frontend/resources/images/icons/constraint-vertical.svg
diff --git a/frontend/resources/images/icons/copy-refactor.svg b/frontend/resources/images/icons/copy-refactor.svg
deleted file mode 100644
index 787024177..000000000
--- a/frontend/resources/images/icons/copy-refactor.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/copy.svg b/frontend/resources/images/icons/copy.svg
deleted file mode 100644
index d676e2227..000000000
--- a/frontend/resources/images/icons/copy.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/corner-bottomleft-refactor.svg b/frontend/resources/images/icons/corner-bottom-left.svg
similarity index 100%
rename from frontend/resources/images/icons/corner-bottomleft-refactor.svg
rename to frontend/resources/images/icons/corner-bottom-left.svg
diff --git a/frontend/resources/images/icons/corner-bottomright-refactor.svg b/frontend/resources/images/icons/corner-bottom-right.svg
similarity index 100%
rename from frontend/resources/images/icons/corner-bottomright-refactor.svg
rename to frontend/resources/images/icons/corner-bottom-right.svg
diff --git a/frontend/resources/images/icons/corner-bottom-refactor.svg b/frontend/resources/images/icons/corner-bottom.svg
similarity index 100%
rename from frontend/resources/images/icons/corner-bottom-refactor.svg
rename to frontend/resources/images/icons/corner-bottom.svg
diff --git a/frontend/resources/images/icons/corner-center-refactor.svg b/frontend/resources/images/icons/corner-center.svg
similarity index 100%
rename from frontend/resources/images/icons/corner-center-refactor.svg
rename to frontend/resources/images/icons/corner-center.svg
diff --git a/frontend/resources/images/icons/corner-radius-refactor.svg b/frontend/resources/images/icons/corner-radius.svg
similarity index 100%
rename from frontend/resources/images/icons/corner-radius-refactor.svg
rename to frontend/resources/images/icons/corner-radius.svg
diff --git a/frontend/resources/images/icons/corner-topleft-refactor.svg b/frontend/resources/images/icons/corner-top-left.svg
similarity index 100%
rename from frontend/resources/images/icons/corner-topleft-refactor.svg
rename to frontend/resources/images/icons/corner-top-left.svg
diff --git a/frontend/resources/images/icons/corner-topright-refactor.svg b/frontend/resources/images/icons/corner-top-right.svg
similarity index 100%
rename from frontend/resources/images/icons/corner-topright-refactor.svg
rename to frontend/resources/images/icons/corner-top-right.svg
diff --git a/frontend/resources/images/icons/corner-top-refactor.svg b/frontend/resources/images/icons/corner-top.svg
similarity index 100%
rename from frontend/resources/images/icons/corner-top-refactor.svg
rename to frontend/resources/images/icons/corner-top.svg
diff --git a/frontend/resources/images/icons/cross.svg b/frontend/resources/images/icons/cross.svg
deleted file mode 100644
index aa1472308..000000000
--- a/frontend/resources/images/icons/cross.svg
+++ /dev/null
@@ -1 +0,0 @@
-
-
\ No newline at end of file
diff --git a/frontend/resources/images/icons/curve.svg b/frontend/resources/images/icons/curve.svg
index c6f046e9a..cdc84c29c 100644
--- a/frontend/resources/images/icons/curve.svg
+++ b/frontend/resources/images/icons/curve.svg
@@ -1 +1,3 @@
-
+
\ No newline at end of file
diff --git a/frontend/resources/images/icons/delete-text-refactor.svg b/frontend/resources/images/icons/delete-text.svg
similarity index 100%
rename from frontend/resources/images/icons/delete-text-refactor.svg
rename to frontend/resources/images/icons/delete-text.svg
diff --git a/frontend/resources/images/icons/delete-refactor.svg b/frontend/resources/images/icons/delete.svg
similarity index 100%
rename from frontend/resources/images/icons/delete-refactor.svg
rename to frontend/resources/images/icons/delete.svg
diff --git a/frontend/resources/images/icons/desc-sort-refactor.svg b/frontend/resources/images/icons/desc-sort.svg
similarity index 100%
rename from frontend/resources/images/icons/desc-sort-refactor.svg
rename to frontend/resources/images/icons/desc-sort.svg
diff --git a/frontend/resources/images/icons/detach-refactor.svg b/frontend/resources/images/icons/detach.svg
similarity index 100%
rename from frontend/resources/images/icons/detach-refactor.svg
rename to frontend/resources/images/icons/detach.svg
diff --git a/frontend/resources/images/icons/detached-refactor.svg b/frontend/resources/images/icons/detached.svg
similarity index 100%
rename from frontend/resources/images/icons/detached-refactor.svg
rename to frontend/resources/images/icons/detached.svg
diff --git a/frontend/resources/images/icons/distribute-horizontally-refactor.svg b/frontend/resources/images/icons/distribute-horizontally.svg
similarity index 100%
rename from frontend/resources/images/icons/distribute-horizontally-refactor.svg
rename to frontend/resources/images/icons/distribute-horizontally.svg
diff --git a/frontend/resources/images/icons/distribute-vertical-spacing-refactor.svg b/frontend/resources/images/icons/distribute-vertical-spacing.svg
similarity index 100%
rename from frontend/resources/images/icons/distribute-vertical-spacing-refactor.svg
rename to frontend/resources/images/icons/distribute-vertical-spacing.svg
diff --git a/frontend/resources/images/icons/document-refactor.svg b/frontend/resources/images/icons/document.svg
similarity index 100%
rename from frontend/resources/images/icons/document-refactor.svg
rename to frontend/resources/images/icons/document.svg
diff --git a/frontend/resources/images/icons/download-refactor.svg b/frontend/resources/images/icons/download-refactor.svg
deleted file mode 100644
index ee4af8ded..000000000
--- a/frontend/resources/images/icons/download-refactor.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/download.svg b/frontend/resources/images/icons/download.svg
index 1f78adb6c..ee4af8ded 100644
--- a/frontend/resources/images/icons/download.svg
+++ b/frontend/resources/images/icons/download.svg
@@ -1,3 +1,3 @@
-
-
+
diff --git a/frontend/resources/images/icons/drop-refactor.svg b/frontend/resources/images/icons/drop.svg
similarity index 100%
rename from frontend/resources/images/icons/drop-refactor.svg
rename to frontend/resources/images/icons/drop.svg
diff --git a/frontend/resources/images/icons/easing-ease-in-out-refactor.svg b/frontend/resources/images/icons/easing-ease-in-out-refactor.svg
deleted file mode 100644
index def35ce0e..000000000
--- a/frontend/resources/images/icons/easing-ease-in-out-refactor.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
\ No newline at end of file
diff --git a/frontend/resources/images/icons/easing-ease-in-out.svg b/frontend/resources/images/icons/easing-ease-in-out.svg
index 3ada98e19..def35ce0e 100644
--- a/frontend/resources/images/icons/easing-ease-in-out.svg
+++ b/frontend/resources/images/icons/easing-ease-in-out.svg
@@ -1,3 +1,3 @@
-
-
+
+
\ No newline at end of file
diff --git a/frontend/resources/images/icons/easing-ease-in-refactor.svg b/frontend/resources/images/icons/easing-ease-in-refactor.svg
deleted file mode 100644
index 8d2d215ce..000000000
--- a/frontend/resources/images/icons/easing-ease-in-refactor.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
\ No newline at end of file
diff --git a/frontend/resources/images/icons/easing-ease-in.svg b/frontend/resources/images/icons/easing-ease-in.svg
index 40d2bbd24..8d2d215ce 100644
--- a/frontend/resources/images/icons/easing-ease-in.svg
+++ b/frontend/resources/images/icons/easing-ease-in.svg
@@ -1,3 +1,3 @@
-
-
+
+
\ No newline at end of file
diff --git a/frontend/resources/images/icons/easing-ease-out-refactor.svg b/frontend/resources/images/icons/easing-ease-out-refactor.svg
deleted file mode 100644
index 03209db2d..000000000
--- a/frontend/resources/images/icons/easing-ease-out-refactor.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
\ No newline at end of file
diff --git a/frontend/resources/images/icons/easing-ease-out.svg b/frontend/resources/images/icons/easing-ease-out.svg
index 9bf6cd73f..03209db2d 100644
--- a/frontend/resources/images/icons/easing-ease-out.svg
+++ b/frontend/resources/images/icons/easing-ease-out.svg
@@ -1,3 +1,3 @@
-
-
+
+
\ No newline at end of file
diff --git a/frontend/resources/images/icons/easing-ease-refactor.svg b/frontend/resources/images/icons/easing-ease-refactor.svg
deleted file mode 100644
index 68cac1fa6..000000000
--- a/frontend/resources/images/icons/easing-ease-refactor.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
\ No newline at end of file
diff --git a/frontend/resources/images/icons/easing-ease.svg b/frontend/resources/images/icons/easing-ease.svg
index 7760f329d..68cac1fa6 100644
--- a/frontend/resources/images/icons/easing-ease.svg
+++ b/frontend/resources/images/icons/easing-ease.svg
@@ -1,3 +1,3 @@
-
-
+
+
\ No newline at end of file
diff --git a/frontend/resources/images/icons/easing-linear-refactor.svg b/frontend/resources/images/icons/easing-linear-refactor.svg
deleted file mode 100644
index 2890f2212..000000000
--- a/frontend/resources/images/icons/easing-linear-refactor.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
\ No newline at end of file
diff --git a/frontend/resources/images/icons/easing-linear.svg b/frontend/resources/images/icons/easing-linear.svg
index f3ab49784..2890f2212 100644
--- a/frontend/resources/images/icons/easing-linear.svg
+++ b/frontend/resources/images/icons/easing-linear.svg
@@ -1,3 +1,3 @@
-
-
+
+
\ No newline at end of file
diff --git a/frontend/resources/images/icons/effects-refactor.svg b/frontend/resources/images/icons/effects.svg
similarity index 100%
rename from frontend/resources/images/icons/effects-refactor.svg
rename to frontend/resources/images/icons/effects.svg
diff --git a/frontend/resources/images/icons/elipse-refactor.svg b/frontend/resources/images/icons/elipse.svg
similarity index 100%
rename from frontend/resources/images/icons/elipse-refactor.svg
rename to frontend/resources/images/icons/elipse.svg
diff --git a/frontend/resources/images/icons/exclude.svg b/frontend/resources/images/icons/exclude.svg
deleted file mode 100644
index 843d6c0d0..000000000
--- a/frontend/resources/images/icons/exclude.svg
+++ /dev/null
@@ -1 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/exit.svg b/frontend/resources/images/icons/exit.svg
index ce145a385..9b80aa590 100644
--- a/frontend/resources/images/icons/exit.svg
+++ b/frontend/resources/images/icons/exit.svg
@@ -1,3 +1,3 @@
-
-
+
diff --git a/frontend/resources/images/icons/expand-refactor.svg b/frontend/resources/images/icons/expand.svg
similarity index 100%
rename from frontend/resources/images/icons/expand-refactor.svg
rename to frontend/resources/images/icons/expand.svg
diff --git a/frontend/resources/images/icons/export.svg b/frontend/resources/images/icons/export.svg
deleted file mode 100644
index b645d17b1..000000000
--- a/frontend/resources/images/icons/export.svg
+++ /dev/null
@@ -1 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/file-svg.svg b/frontend/resources/images/icons/file-svg.svg
deleted file mode 100644
index 33e5830de..000000000
--- a/frontend/resources/images/icons/file-svg.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/fill-content-refactor.svg b/frontend/resources/images/icons/fill-content.svg
similarity index 100%
rename from frontend/resources/images/icons/fill-content-refactor.svg
rename to frontend/resources/images/icons/fill-content.svg
diff --git a/frontend/resources/images/icons/fill.svg b/frontend/resources/images/icons/fill.svg
deleted file mode 100644
index a509069cc..000000000
--- a/frontend/resources/images/icons/fill.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/filter-refactor.svg b/frontend/resources/images/icons/filter-refactor.svg
deleted file mode 100644
index 323863f0a..000000000
--- a/frontend/resources/images/icons/filter-refactor.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
\ No newline at end of file
diff --git a/frontend/resources/images/icons/filter.svg b/frontend/resources/images/icons/filter.svg
index 0ca8a5ab8..323863f0a 100644
--- a/frontend/resources/images/icons/filter.svg
+++ b/frontend/resources/images/icons/filter.svg
@@ -1 +1,3 @@
-
+
\ No newline at end of file
diff --git a/frontend/resources/images/icons/fixed-width-refactor.svg b/frontend/resources/images/icons/fixed-width.svg
similarity index 100%
rename from frontend/resources/images/icons/fixed-width-refactor.svg
rename to frontend/resources/images/icons/fixed-width.svg
diff --git a/frontend/resources/images/icons/flex-grid-refactor.svg b/frontend/resources/images/icons/flex-grid.svg
similarity index 100%
rename from frontend/resources/images/icons/flex-grid-refactor.svg
rename to frontend/resources/images/icons/flex-grid.svg
diff --git a/frontend/resources/images/icons/flex-horizontal-refactor.svg b/frontend/resources/images/icons/flex-horizontal.svg
similarity index 100%
rename from frontend/resources/images/icons/flex-horizontal-refactor.svg
rename to frontend/resources/images/icons/flex-horizontal.svg
diff --git a/frontend/resources/images/icons/flex-vertical-refactor.svg b/frontend/resources/images/icons/flex-vertical.svg
similarity index 100%
rename from frontend/resources/images/icons/flex-vertical-refactor.svg
rename to frontend/resources/images/icons/flex-vertical.svg
diff --git a/frontend/resources/images/icons/flex-refactor.svg b/frontend/resources/images/icons/flex.svg
similarity index 100%
rename from frontend/resources/images/icons/flex-refactor.svg
rename to frontend/resources/images/icons/flex.svg
diff --git a/frontend/resources/images/icons/flip-horizontal-refactor.svg b/frontend/resources/images/icons/flip-horizontal.svg
similarity index 100%
rename from frontend/resources/images/icons/flip-horizontal-refactor.svg
rename to frontend/resources/images/icons/flip-horizontal.svg
diff --git a/frontend/resources/images/icons/flip-vertical-refactor.svg b/frontend/resources/images/icons/flip-vertical.svg
similarity index 100%
rename from frontend/resources/images/icons/flip-vertical-refactor.svg
rename to frontend/resources/images/icons/flip-vertical.svg
diff --git a/frontend/resources/images/icons/folder-zip.svg b/frontend/resources/images/icons/folder-zip.svg
deleted file mode 100644
index a07dbcb80..000000000
--- a/frontend/resources/images/icons/folder-zip.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/folder.svg b/frontend/resources/images/icons/folder.svg
deleted file mode 100644
index cd7c2a4ec..000000000
--- a/frontend/resources/images/icons/folder.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/full-screen-off.svg b/frontend/resources/images/icons/full-screen-off.svg
deleted file mode 100644
index 47e7db42c..000000000
--- a/frontend/resources/images/icons/full-screen-off.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
\ No newline at end of file
diff --git a/frontend/resources/images/icons/full-screen.svg b/frontend/resources/images/icons/full-screen.svg
deleted file mode 100644
index 252357a17..000000000
--- a/frontend/resources/images/icons/full-screen.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
\ No newline at end of file
diff --git a/frontend/resources/images/icons/gap-horizontal-refactor.svg b/frontend/resources/images/icons/gap-horizontal.svg
similarity index 100%
rename from frontend/resources/images/icons/gap-horizontal-refactor.svg
rename to frontend/resources/images/icons/gap-horizontal.svg
diff --git a/frontend/resources/images/icons/gap-vertical-refactor.svg b/frontend/resources/images/icons/gap-vertical.svg
similarity index 100%
rename from frontend/resources/images/icons/gap-vertical-refactor.svg
rename to frontend/resources/images/icons/gap-vertical.svg
diff --git a/frontend/resources/images/icons/go-next.svg b/frontend/resources/images/icons/go-next.svg
deleted file mode 100644
index ed48fbcde..000000000
--- a/frontend/resources/images/icons/go-next.svg
+++ /dev/null
@@ -1 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/grid-justify-content-column-between.svg b/frontend/resources/images/icons/grid-justify-content-column-between.svg
deleted file mode 100644
index 783d91a21..000000000
--- a/frontend/resources/images/icons/grid-justify-content-column-between.svg
+++ /dev/null
@@ -1,38 +0,0 @@
-
-
-
diff --git a/frontend/resources/images/icons/grid-justify-content-column-center.svg b/frontend/resources/images/icons/grid-justify-content-column-center.svg
deleted file mode 100644
index fc52ce5ed..000000000
--- a/frontend/resources/images/icons/grid-justify-content-column-center.svg
+++ /dev/null
@@ -1,38 +0,0 @@
-
-
-
diff --git a/frontend/resources/images/icons/grid-justify-content-column-end.svg b/frontend/resources/images/icons/grid-justify-content-column-end.svg
deleted file mode 100644
index 18825a412..000000000
--- a/frontend/resources/images/icons/grid-justify-content-column-end.svg
+++ /dev/null
@@ -1,38 +0,0 @@
-
-
-
diff --git a/frontend/resources/images/icons/grid-justify-content-column-start.svg b/frontend/resources/images/icons/grid-justify-content-column-start.svg
deleted file mode 100644
index 823ef4ebf..000000000
--- a/frontend/resources/images/icons/grid-justify-content-column-start.svg
+++ /dev/null
@@ -1,38 +0,0 @@
-
-
-
diff --git a/frontend/resources/images/icons/grid-justify-content-row-around.svg b/frontend/resources/images/icons/grid-justify-content-row-around.svg
deleted file mode 100644
index 41a980b7f..000000000
--- a/frontend/resources/images/icons/grid-justify-content-row-around.svg
+++ /dev/null
@@ -1,38 +0,0 @@
-
-
-
diff --git a/frontend/resources/images/icons/grid-justify-content-row-between.svg b/frontend/resources/images/icons/grid-justify-content-row-between.svg
deleted file mode 100644
index bfc38460a..000000000
--- a/frontend/resources/images/icons/grid-justify-content-row-between.svg
+++ /dev/null
@@ -1,38 +0,0 @@
-
-
-
diff --git a/frontend/resources/images/icons/grid-justify-content-row-center.svg b/frontend/resources/images/icons/grid-justify-content-row-center.svg
deleted file mode 100644
index 402b8dba2..000000000
--- a/frontend/resources/images/icons/grid-justify-content-row-center.svg
+++ /dev/null
@@ -1,38 +0,0 @@
-
-
-
diff --git a/frontend/resources/images/icons/grid-justify-content-row-end.svg b/frontend/resources/images/icons/grid-justify-content-row-end.svg
deleted file mode 100644
index 3515d5a95..000000000
--- a/frontend/resources/images/icons/grid-justify-content-row-end.svg
+++ /dev/null
@@ -1,38 +0,0 @@
-
-
-
diff --git a/frontend/resources/images/icons/grid-justify-content-row-start.svg b/frontend/resources/images/icons/grid-justify-content-row-start.svg
deleted file mode 100644
index 6539a9314..000000000
--- a/frontend/resources/images/icons/grid-justify-content-row-start.svg
+++ /dev/null
@@ -1,38 +0,0 @@
-
-
-
diff --git a/frontend/resources/images/icons/grid-layout-mode.svg b/frontend/resources/images/icons/grid-layout-mode.svg
deleted file mode 100644
index c90cf5c85..000000000
--- a/frontend/resources/images/icons/grid-layout-mode.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/grid-margin-refactor.svg b/frontend/resources/images/icons/grid-margin.svg
similarity index 100%
rename from frontend/resources/images/icons/grid-margin-refactor.svg
rename to frontend/resources/images/icons/grid-margin.svg
diff --git a/frontend/resources/images/icons/grid-refactor.svg b/frontend/resources/images/icons/grid-refactor.svg
deleted file mode 100644
index d15e06b9a..000000000
--- a/frontend/resources/images/icons/grid-refactor.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
\ No newline at end of file
diff --git a/frontend/resources/images/icons/grid-row-refactor.svg b/frontend/resources/images/icons/grid-row.svg
similarity index 100%
rename from frontend/resources/images/icons/grid-row-refactor.svg
rename to frontend/resources/images/icons/grid-row.svg
diff --git a/frontend/resources/images/icons/grid-rows-refactor.svg b/frontend/resources/images/icons/grid-rows.svg
similarity index 100%
rename from frontend/resources/images/icons/grid-rows-refactor.svg
rename to frontend/resources/images/icons/grid-rows.svg
diff --git a/frontend/resources/images/icons/grid-snap.svg b/frontend/resources/images/icons/grid-snap.svg
deleted file mode 100644
index 2f03be05a..000000000
--- a/frontend/resources/images/icons/grid-snap.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/grid-square-refactor.svg b/frontend/resources/images/icons/grid-square.svg
similarity index 100%
rename from frontend/resources/images/icons/grid-square-refactor.svg
rename to frontend/resources/images/icons/grid-square.svg
diff --git a/frontend/resources/images/icons/grid.svg b/frontend/resources/images/icons/grid.svg
index be57664c1..d15e06b9a 100644
--- a/frontend/resources/images/icons/grid.svg
+++ b/frontend/resources/images/icons/grid.svg
@@ -1,3 +1,3 @@
-
-
+
+
\ No newline at end of file
diff --git a/frontend/resources/images/icons/group-refactor.svg b/frontend/resources/images/icons/group.svg
similarity index 100%
rename from frontend/resources/images/icons/group-refactor.svg
rename to frontend/resources/images/icons/group.svg
diff --git a/frontend/resources/images/icons/gutter-horizontal-refactor.svg b/frontend/resources/images/icons/gutter-horizontal.svg
similarity index 100%
rename from frontend/resources/images/icons/gutter-horizontal-refactor.svg
rename to frontend/resources/images/icons/gutter-horizontal.svg
diff --git a/frontend/resources/images/icons/gutter-vertical-refactor.svg b/frontend/resources/images/icons/gutter-vertical.svg
similarity index 100%
rename from frontend/resources/images/icons/gutter-vertical-refactor.svg
rename to frontend/resources/images/icons/gutter-vertical.svg
diff --git a/frontend/resources/images/icons/help-refactor.svg b/frontend/resources/images/icons/help-refactor.svg
deleted file mode 100644
index 08bddb3ed..000000000
--- a/frontend/resources/images/icons/help-refactor.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/help.svg b/frontend/resources/images/icons/help.svg
index b1cb21827..08bddb3ed 100644
--- a/frontend/resources/images/icons/help.svg
+++ b/frontend/resources/images/icons/help.svg
@@ -1,4 +1,3 @@
-
-
+
diff --git a/frontend/resources/images/icons/hide-refactor.svg b/frontend/resources/images/icons/hide.svg
similarity index 100%
rename from frontend/resources/images/icons/hide-refactor.svg
rename to frontend/resources/images/icons/hide.svg
diff --git a/frontend/resources/images/icons/history-refactor.svg b/frontend/resources/images/icons/history.svg
similarity index 100%
rename from frontend/resources/images/icons/history-refactor.svg
rename to frontend/resources/images/icons/history.svg
diff --git a/frontend/resources/images/icons/hsva-refactor.svg b/frontend/resources/images/icons/hsva.svg
similarity index 100%
rename from frontend/resources/images/icons/hsva-refactor.svg
rename to frontend/resources/images/icons/hsva.svg
diff --git a/frontend/resources/images/icons/hug-content-refactor.svg b/frontend/resources/images/icons/hug-content.svg
similarity index 100%
rename from frontend/resources/images/icons/hug-content-refactor.svg
rename to frontend/resources/images/icons/hug-content.svg
diff --git a/frontend/resources/images/icons/icon-empty.svg b/frontend/resources/images/icons/icon-empty.svg
deleted file mode 100644
index b3988c12b..000000000
--- a/frontend/resources/images/icons/icon-empty.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/icon-key.svg b/frontend/resources/images/icons/icon-key.svg
deleted file mode 100644
index 01f6a28de..000000000
--- a/frontend/resources/images/icons/icon-key.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-
-
-
\ No newline at end of file
diff --git a/frontend/resources/images/icons/icon-list.svg b/frontend/resources/images/icons/icon-list.svg
deleted file mode 100644
index eb47d32f2..000000000
--- a/frontend/resources/images/icons/icon-list.svg
+++ /dev/null
@@ -1 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/icon-set.svg b/frontend/resources/images/icons/icon-set.svg
deleted file mode 100644
index cb246d458..000000000
--- a/frontend/resources/images/icons/icon-set.svg
+++ /dev/null
@@ -1 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/img-refactor.svg b/frontend/resources/images/icons/img.svg
similarity index 100%
rename from frontend/resources/images/icons/img-refactor.svg
rename to frontend/resources/images/icons/img.svg
diff --git a/frontend/resources/images/icons/import.svg b/frontend/resources/images/icons/import.svg
deleted file mode 100644
index 4e0914b05..000000000
--- a/frontend/resources/images/icons/import.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/infocard.svg b/frontend/resources/images/icons/infocard.svg
deleted file mode 100644
index 8fd6ec40d..000000000
--- a/frontend/resources/images/icons/infocard.svg
+++ /dev/null
@@ -1 +0,0 @@
-
-
\ No newline at end of file
diff --git a/frontend/resources/images/icons/interaction.svg b/frontend/resources/images/icons/interaction.svg
index d95baa8be..7c3fb8462 100644
--- a/frontend/resources/images/icons/interaction.svg
+++ b/frontend/resources/images/icons/interaction.svg
@@ -1,3 +1,3 @@
-
-
+
+
\ No newline at end of file
diff --git a/frontend/resources/images/icons/join-nodes-refactor.svg b/frontend/resources/images/icons/join-nodes.svg
similarity index 100%
rename from frontend/resources/images/icons/join-nodes-refactor.svg
rename to frontend/resources/images/icons/join-nodes.svg
diff --git a/frontend/resources/images/icons/justify-content-column-around-refactor.svg b/frontend/resources/images/icons/justify-content-column-around-refactor.svg
deleted file mode 100644
index bb1510773..000000000
--- a/frontend/resources/images/icons/justify-content-column-around-refactor.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/justify-content-column-around.svg b/frontend/resources/images/icons/justify-content-column-around.svg
index 19fbfcc57..bb1510773 100644
--- a/frontend/resources/images/icons/justify-content-column-around.svg
+++ b/frontend/resources/images/icons/justify-content-column-around.svg
@@ -1,3 +1,3 @@
-
-
+
diff --git a/frontend/resources/images/icons/justify-content-column-between-refactor.svg b/frontend/resources/images/icons/justify-content-column-between-refactor.svg
deleted file mode 100644
index c7720e25f..000000000
--- a/frontend/resources/images/icons/justify-content-column-between-refactor.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/justify-content-column-between.svg b/frontend/resources/images/icons/justify-content-column-between.svg
index 6e1bb1297..c7720e25f 100644
--- a/frontend/resources/images/icons/justify-content-column-between.svg
+++ b/frontend/resources/images/icons/justify-content-column-between.svg
@@ -1,3 +1,3 @@
-
-
+
diff --git a/frontend/resources/images/icons/justify-content-column-center-refactor.svg b/frontend/resources/images/icons/justify-content-column-center-refactor.svg
deleted file mode 100644
index 3d2a12a74..000000000
--- a/frontend/resources/images/icons/justify-content-column-center-refactor.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/justify-content-column-center.svg b/frontend/resources/images/icons/justify-content-column-center.svg
index f4c774653..3d2a12a74 100644
--- a/frontend/resources/images/icons/justify-content-column-center.svg
+++ b/frontend/resources/images/icons/justify-content-column-center.svg
@@ -1,3 +1,3 @@
-
-
+
diff --git a/frontend/resources/images/icons/justify-content-column-end-refactor.svg b/frontend/resources/images/icons/justify-content-column-end-refactor.svg
deleted file mode 100644
index 564d39850..000000000
--- a/frontend/resources/images/icons/justify-content-column-end-refactor.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/justify-content-column-end.svg b/frontend/resources/images/icons/justify-content-column-end.svg
index 9ac317727..564d39850 100644
--- a/frontend/resources/images/icons/justify-content-column-end.svg
+++ b/frontend/resources/images/icons/justify-content-column-end.svg
@@ -1,3 +1,3 @@
-
-
+
diff --git a/frontend/resources/images/icons/justify-content-column-evenly-refactor.svg b/frontend/resources/images/icons/justify-content-column-evenly-refactor.svg
deleted file mode 100644
index 927629f76..000000000
--- a/frontend/resources/images/icons/justify-content-column-evenly-refactor.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/justify-content-column-evenly.svg b/frontend/resources/images/icons/justify-content-column-evenly.svg
index 22708241a..927629f76 100644
--- a/frontend/resources/images/icons/justify-content-column-evenly.svg
+++ b/frontend/resources/images/icons/justify-content-column-evenly.svg
@@ -1,3 +1,3 @@
-
-
+
diff --git a/frontend/resources/images/icons/justify-content-column-start-refactor.svg b/frontend/resources/images/icons/justify-content-column-start-refactor.svg
deleted file mode 100644
index 52f757702..000000000
--- a/frontend/resources/images/icons/justify-content-column-start-refactor.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/justify-content-column-start.svg b/frontend/resources/images/icons/justify-content-column-start.svg
index f73b2c754..52f757702 100644
--- a/frontend/resources/images/icons/justify-content-column-start.svg
+++ b/frontend/resources/images/icons/justify-content-column-start.svg
@@ -1,3 +1,3 @@
-
-
+
diff --git a/frontend/resources/images/icons/justify-content-row-around-refactor.svg b/frontend/resources/images/icons/justify-content-row-around-refactor.svg
deleted file mode 100644
index 9fd7cdd75..000000000
--- a/frontend/resources/images/icons/justify-content-row-around-refactor.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
\ No newline at end of file
diff --git a/frontend/resources/images/icons/justify-content-row-around.svg b/frontend/resources/images/icons/justify-content-row-around.svg
index ff52e7857..9fd7cdd75 100644
--- a/frontend/resources/images/icons/justify-content-row-around.svg
+++ b/frontend/resources/images/icons/justify-content-row-around.svg
@@ -1,3 +1,3 @@
-
-
+
+
\ No newline at end of file
diff --git a/frontend/resources/images/icons/justify-content-row-between-refactor.svg b/frontend/resources/images/icons/justify-content-row-between-refactor.svg
deleted file mode 100644
index b4878ab1c..000000000
--- a/frontend/resources/images/icons/justify-content-row-between-refactor.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
\ No newline at end of file
diff --git a/frontend/resources/images/icons/justify-content-row-between.svg b/frontend/resources/images/icons/justify-content-row-between.svg
index 57cba5490..b4878ab1c 100644
--- a/frontend/resources/images/icons/justify-content-row-between.svg
+++ b/frontend/resources/images/icons/justify-content-row-between.svg
@@ -1,3 +1,3 @@
-
-
+
+
\ No newline at end of file
diff --git a/frontend/resources/images/icons/justify-content-row-center-refactor.svg b/frontend/resources/images/icons/justify-content-row-center-refactor.svg
deleted file mode 100644
index 6b185e939..000000000
--- a/frontend/resources/images/icons/justify-content-row-center-refactor.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
\ No newline at end of file
diff --git a/frontend/resources/images/icons/justify-content-row-center.svg b/frontend/resources/images/icons/justify-content-row-center.svg
index 2a7e32c75..6b185e939 100644
--- a/frontend/resources/images/icons/justify-content-row-center.svg
+++ b/frontend/resources/images/icons/justify-content-row-center.svg
@@ -1,3 +1,3 @@
-
-
+
+
\ No newline at end of file
diff --git a/frontend/resources/images/icons/justify-content-row-end-refactor.svg b/frontend/resources/images/icons/justify-content-row-end-refactor.svg
deleted file mode 100644
index 0c6955c3e..000000000
--- a/frontend/resources/images/icons/justify-content-row-end-refactor.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
\ No newline at end of file
diff --git a/frontend/resources/images/icons/justify-content-row-end.svg b/frontend/resources/images/icons/justify-content-row-end.svg
index 1b3a33d48..0c6955c3e 100644
--- a/frontend/resources/images/icons/justify-content-row-end.svg
+++ b/frontend/resources/images/icons/justify-content-row-end.svg
@@ -1,3 +1,3 @@
-
-
+
+
\ No newline at end of file
diff --git a/frontend/resources/images/icons/justify-content-row-evenly-refactor.svg b/frontend/resources/images/icons/justify-content-row-evenly-refactor.svg
deleted file mode 100644
index f60cee27d..000000000
--- a/frontend/resources/images/icons/justify-content-row-evenly-refactor.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
\ No newline at end of file
diff --git a/frontend/resources/images/icons/justify-content-row-evenly.svg b/frontend/resources/images/icons/justify-content-row-evenly.svg
index 7d5add80e..f60cee27d 100644
--- a/frontend/resources/images/icons/justify-content-row-evenly.svg
+++ b/frontend/resources/images/icons/justify-content-row-evenly.svg
@@ -1,3 +1,3 @@
-
-
+
+
\ No newline at end of file
diff --git a/frontend/resources/images/icons/justify-content-row-start-refactor.svg b/frontend/resources/images/icons/justify-content-row-start-refactor.svg
deleted file mode 100644
index 15c38fd14..000000000
--- a/frontend/resources/images/icons/justify-content-row-start-refactor.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
\ No newline at end of file
diff --git a/frontend/resources/images/icons/justify-content-row-start.svg b/frontend/resources/images/icons/justify-content-row-start.svg
index 7ba66c756..15c38fd14 100644
--- a/frontend/resources/images/icons/justify-content-row-start.svg
+++ b/frontend/resources/images/icons/justify-content-row-start.svg
@@ -1,3 +1,3 @@
-
-
+
+
\ No newline at end of file
diff --git a/frontend/resources/images/icons/layers-refactor.svg b/frontend/resources/images/icons/layers-refactor.svg
deleted file mode 100644
index dd446f29b..000000000
--- a/frontend/resources/images/icons/layers-refactor.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/layers.svg b/frontend/resources/images/icons/layers.svg
index 703fd0cbe..dd446f29b 100644
--- a/frontend/resources/images/icons/layers.svg
+++ b/frontend/resources/images/icons/layers.svg
@@ -1,3 +1,3 @@
-
-
+
diff --git a/frontend/resources/images/icons/layout-columns.svg b/frontend/resources/images/icons/layout-columns.svg
deleted file mode 100644
index eb4b7ba55..000000000
--- a/frontend/resources/images/icons/layout-columns.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/layout-rows.svg b/frontend/resources/images/icons/layout-rows.svg
deleted file mode 100644
index 9023c8fcf..000000000
--- a/frontend/resources/images/icons/layout-rows.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/letter-spacing.svg b/frontend/resources/images/icons/letter-spacing.svg
deleted file mode 100644
index 6098501c7..000000000
--- a/frontend/resources/images/icons/letter-spacing.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/libraries.svg b/frontend/resources/images/icons/libraries.svg
deleted file mode 100644
index 3e4e98b75..000000000
--- a/frontend/resources/images/icons/libraries.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/library-refactor.svg b/frontend/resources/images/icons/library-refactor.svg
deleted file mode 100644
index ea1a7b808..000000000
--- a/frontend/resources/images/icons/library-refactor.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/library.svg b/frontend/resources/images/icons/library.svg
index c4be0d41f..ea1a7b808 100644
--- a/frontend/resources/images/icons/library.svg
+++ b/frontend/resources/images/icons/library.svg
@@ -1,3 +1,3 @@
-
-
+
diff --git a/frontend/resources/images/icons/line-arrow.svg b/frontend/resources/images/icons/line-arrow.svg
deleted file mode 100644
index aa4a34757..000000000
--- a/frontend/resources/images/icons/line-arrow.svg
+++ /dev/null
@@ -1 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/line.svg b/frontend/resources/images/icons/line.svg
deleted file mode 100644
index 35ce08de7..000000000
--- a/frontend/resources/images/icons/line.svg
+++ /dev/null
@@ -1 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/listing-thumbs.svg b/frontend/resources/images/icons/listing-thumbs.svg
deleted file mode 100644
index ac5d98e47..000000000
--- a/frontend/resources/images/icons/listing-thumbs.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/locate-refactor.svg b/frontend/resources/images/icons/locate.svg
similarity index 100%
rename from frontend/resources/images/icons/locate-refactor.svg
rename to frontend/resources/images/icons/locate.svg
diff --git a/frontend/resources/images/icons/lock-refactor.svg b/frontend/resources/images/icons/lock-refactor.svg
deleted file mode 100644
index c1a51ce03..000000000
--- a/frontend/resources/images/icons/lock-refactor.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
\ No newline at end of file
diff --git a/frontend/resources/images/icons/lock.svg b/frontend/resources/images/icons/lock.svg
index 6477336ae..c1a51ce03 100644
--- a/frontend/resources/images/icons/lock.svg
+++ b/frontend/resources/images/icons/lock.svg
@@ -1,3 +1,3 @@
-
-
+
+
\ No newline at end of file
diff --git a/frontend/resources/images/icons/logout.svg b/frontend/resources/images/icons/logout.svg
deleted file mode 100644
index b5ae8c421..000000000
--- a/frontend/resources/images/icons/logout.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/lowercase.svg b/frontend/resources/images/icons/lowercase.svg
deleted file mode 100644
index 9741dae12..000000000
--- a/frontend/resources/images/icons/lowercase.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/mail.svg b/frontend/resources/images/icons/mail.svg
deleted file mode 100644
index 0d03f891d..000000000
--- a/frontend/resources/images/icons/mail.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/margin-bottom-refactor.svg b/frontend/resources/images/icons/margin-bottom.svg
similarity index 100%
rename from frontend/resources/images/icons/margin-bottom-refactor.svg
rename to frontend/resources/images/icons/margin-bottom.svg
diff --git a/frontend/resources/images/icons/margin-left-right-refactor.svg b/frontend/resources/images/icons/margin-left-right.svg
similarity index 100%
rename from frontend/resources/images/icons/margin-left-right-refactor.svg
rename to frontend/resources/images/icons/margin-left-right.svg
diff --git a/frontend/resources/images/icons/margin-left-refactor.svg b/frontend/resources/images/icons/margin-left.svg
similarity index 100%
rename from frontend/resources/images/icons/margin-left-refactor.svg
rename to frontend/resources/images/icons/margin-left.svg
diff --git a/frontend/resources/images/icons/margin-right-refactor.svg b/frontend/resources/images/icons/margin-right.svg
similarity index 100%
rename from frontend/resources/images/icons/margin-right-refactor.svg
rename to frontend/resources/images/icons/margin-right.svg
diff --git a/frontend/resources/images/icons/margin-top-bottom-refactor.svg b/frontend/resources/images/icons/margin-top-bottom.svg
similarity index 100%
rename from frontend/resources/images/icons/margin-top-bottom-refactor.svg
rename to frontend/resources/images/icons/margin-top-bottom.svg
diff --git a/frontend/resources/images/icons/margin-top-refactor.svg b/frontend/resources/images/icons/margin-top.svg
similarity index 100%
rename from frontend/resources/images/icons/margin-top-refactor.svg
rename to frontend/resources/images/icons/margin-top.svg
diff --git a/frontend/resources/images/icons/margin-refactor.svg b/frontend/resources/images/icons/margin.svg
similarity index 100%
rename from frontend/resources/images/icons/margin-refactor.svg
rename to frontend/resources/images/icons/margin.svg
diff --git a/frontend/resources/images/icons/mask-refactor.svg b/frontend/resources/images/icons/mask-refactor.svg
deleted file mode 100644
index 466697abf..000000000
--- a/frontend/resources/images/icons/mask-refactor.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
\ No newline at end of file
diff --git a/frontend/resources/images/icons/mask.svg b/frontend/resources/images/icons/mask.svg
index 3c2e31534..466697abf 100644
--- a/frontend/resources/images/icons/mask.svg
+++ b/frontend/resources/images/icons/mask.svg
@@ -1,3 +1,3 @@
-
-
+
+
\ No newline at end of file
diff --git a/frontend/resources/images/icons/masked-refactor.svg b/frontend/resources/images/icons/masked.svg
similarity index 100%
rename from frontend/resources/images/icons/masked-refactor.svg
rename to frontend/resources/images/icons/masked.svg
diff --git a/frontend/resources/images/icons/menu-refactor.svg b/frontend/resources/images/icons/menu.svg
similarity index 100%
rename from frontend/resources/images/icons/menu-refactor.svg
rename to frontend/resources/images/icons/menu.svg
diff --git a/frontend/resources/images/icons/merge-nodes-refactor.svg b/frontend/resources/images/icons/merge-nodes.svg
similarity index 100%
rename from frontend/resources/images/icons/merge-nodes-refactor.svg
rename to frontend/resources/images/icons/merge-nodes.svg
diff --git a/frontend/resources/images/icons/minus.svg b/frontend/resources/images/icons/minus.svg
deleted file mode 100644
index d79c63c51..000000000
--- a/frontend/resources/images/icons/minus.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/move-refactor.svg b/frontend/resources/images/icons/move.svg
similarity index 100%
rename from frontend/resources/images/icons/move-refactor.svg
rename to frontend/resources/images/icons/move.svg
diff --git a/frontend/resources/images/icons/msg-error-refactor.svg b/frontend/resources/images/icons/msg-error-refactor.svg
deleted file mode 100644
index a5871b29f..000000000
--- a/frontend/resources/images/icons/msg-error-refactor.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/msg-error.svg b/frontend/resources/images/icons/msg-error.svg
index 44ef863ce..a5871b29f 100644
--- a/frontend/resources/images/icons/msg-error.svg
+++ b/frontend/resources/images/icons/msg-error.svg
@@ -1,3 +1,3 @@
-
-
+
diff --git a/frontend/resources/images/icons/msg-info.svg b/frontend/resources/images/icons/msg-info.svg
deleted file mode 100644
index 8c04184cc..000000000
--- a/frontend/resources/images/icons/msg-info.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/msg-neutral-refactor.svg b/frontend/resources/images/icons/msg-neutral.svg
similarity index 100%
rename from frontend/resources/images/icons/msg-neutral-refactor.svg
rename to frontend/resources/images/icons/msg-neutral.svg
diff --git a/frontend/resources/images/icons/msg-success-refactor.svg b/frontend/resources/images/icons/msg-success-refactor.svg
deleted file mode 100644
index f7cf5e6de..000000000
--- a/frontend/resources/images/icons/msg-success-refactor.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/msg-success.svg b/frontend/resources/images/icons/msg-success.svg
index 584811b18..f7cf5e6de 100644
--- a/frontend/resources/images/icons/msg-success.svg
+++ b/frontend/resources/images/icons/msg-success.svg
@@ -1,3 +1,3 @@
-
-
+
diff --git a/frontend/resources/images/icons/msg-warning-refactor.svg b/frontend/resources/images/icons/msg-warning-refactor.svg
deleted file mode 100644
index df700ade5..000000000
--- a/frontend/resources/images/icons/msg-warning-refactor.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/msg-warning.svg b/frontend/resources/images/icons/msg-warning.svg
index a2e327a0e..df700ade5 100644
--- a/frontend/resources/images/icons/msg-warning.svg
+++ b/frontend/resources/images/icons/msg-warning.svg
@@ -1,3 +1,3 @@
-
-
+
diff --git a/frontend/resources/images/icons/multi-canvas.svg b/frontend/resources/images/icons/multi-canvas.svg
deleted file mode 100644
index 94025eee1..000000000
--- a/frontend/resources/images/icons/multi-canvas.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/navigate.svg b/frontend/resources/images/icons/navigate.svg
deleted file mode 100644
index 1b13012e4..000000000
--- a/frontend/resources/images/icons/navigate.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/nodes-add.svg b/frontend/resources/images/icons/nodes-add.svg
deleted file mode 100644
index 9c5ecf93a..000000000
--- a/frontend/resources/images/icons/nodes-add.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/nodes-corner.svg b/frontend/resources/images/icons/nodes-corner.svg
deleted file mode 100644
index 295e316ab..000000000
--- a/frontend/resources/images/icons/nodes-corner.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/nodes-curve.svg b/frontend/resources/images/icons/nodes-curve.svg
deleted file mode 100644
index b12913fc5..000000000
--- a/frontend/resources/images/icons/nodes-curve.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/nodes-join.svg b/frontend/resources/images/icons/nodes-join.svg
deleted file mode 100644
index 551451cb9..000000000
--- a/frontend/resources/images/icons/nodes-join.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/nodes-merge.svg b/frontend/resources/images/icons/nodes-merge.svg
deleted file mode 100644
index 5e0d9c336..000000000
--- a/frontend/resources/images/icons/nodes-merge.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/nodes-remove.svg b/frontend/resources/images/icons/nodes-remove.svg
deleted file mode 100644
index e00ecd534..000000000
--- a/frontend/resources/images/icons/nodes-remove.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/nodes-separate.svg b/frontend/resources/images/icons/nodes-separate.svg
deleted file mode 100644
index 4e188e3cb..000000000
--- a/frontend/resources/images/icons/nodes-separate.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/nodes-snap.svg b/frontend/resources/images/icons/nodes-snap.svg
deleted file mode 100644
index 1bd5edac4..000000000
--- a/frontend/resources/images/icons/nodes-snap.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/open-link-refactor.svg b/frontend/resources/images/icons/open-link.svg
similarity index 100%
rename from frontend/resources/images/icons/open-link-refactor.svg
rename to frontend/resources/images/icons/open-link.svg
diff --git a/frontend/resources/images/icons/organize.svg b/frontend/resources/images/icons/organize.svg
deleted file mode 100644
index 5368b0249..000000000
--- a/frontend/resources/images/icons/organize.svg
+++ /dev/null
@@ -1 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/path-refactor.svg b/frontend/resources/images/icons/path.svg
similarity index 100%
rename from frontend/resources/images/icons/path-refactor.svg
rename to frontend/resources/images/icons/path.svg
diff --git a/frontend/resources/images/icons/pen.svg b/frontend/resources/images/icons/pen.svg
deleted file mode 100644
index cc3c91147..000000000
--- a/frontend/resources/images/icons/pen.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/pencil.svg b/frontend/resources/images/icons/pencil.svg
deleted file mode 100644
index 8382b124f..000000000
--- a/frontend/resources/images/icons/pencil.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/pentool-refactor.svg b/frontend/resources/images/icons/pentool.svg
similarity index 100%
rename from frontend/resources/images/icons/pentool-refactor.svg
rename to frontend/resources/images/icons/pentool.svg
diff --git a/frontend/resources/images/icons/picker-harmony.svg b/frontend/resources/images/icons/picker-harmony.svg
deleted file mode 100644
index 1f8de0d5c..000000000
--- a/frontend/resources/images/icons/picker-harmony.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/picker-hsv.svg b/frontend/resources/images/icons/picker-hsv.svg
deleted file mode 100644
index 2218c82a1..000000000
--- a/frontend/resources/images/icons/picker-hsv.svg
+++ /dev/null
@@ -1 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/picker-refactor.svg b/frontend/resources/images/icons/picker-refactor.svg
deleted file mode 100644
index 05f1ed1a7..000000000
--- a/frontend/resources/images/icons/picker-refactor.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/picker.svg b/frontend/resources/images/icons/picker.svg
index 99c8edc76..05f1ed1a7 100644
--- a/frontend/resources/images/icons/picker.svg
+++ b/frontend/resources/images/icons/picker.svg
@@ -1,3 +1,3 @@
-
-
+
diff --git a/frontend/resources/images/icons/pin-fill.svg b/frontend/resources/images/icons/pin-fill.svg
deleted file mode 100644
index 1e11c8c45..000000000
--- a/frontend/resources/images/icons/pin-fill.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/pin-refactor.svg b/frontend/resources/images/icons/pin-refactor.svg
deleted file mode 100644
index 2d71bc0e2..000000000
--- a/frontend/resources/images/icons/pin-refactor.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/pin.svg b/frontend/resources/images/icons/pin.svg
index 46d71436a..2d71bc0e2 100644
--- a/frontend/resources/images/icons/pin.svg
+++ b/frontend/resources/images/icons/pin.svg
@@ -1,3 +1,3 @@
-
-
+
diff --git a/frontend/resources/images/icons/play-refactor.svg b/frontend/resources/images/icons/play-refactor.svg
deleted file mode 100644
index daa0c49f8..000000000
--- a/frontend/resources/images/icons/play-refactor.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
\ No newline at end of file
diff --git a/frontend/resources/images/icons/play.svg b/frontend/resources/images/icons/play.svg
index 5a9880b73..daa0c49f8 100644
--- a/frontend/resources/images/icons/play.svg
+++ b/frontend/resources/images/icons/play.svg
@@ -1 +1,3 @@
-
+
\ No newline at end of file
diff --git a/frontend/resources/images/icons/plus.svg b/frontend/resources/images/icons/plus.svg
deleted file mode 100644
index 8368e0234..000000000
--- a/frontend/resources/images/icons/plus.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/pointer-inner.svg b/frontend/resources/images/icons/pointer-inner.svg
deleted file mode 100644
index 50798578b..000000000
--- a/frontend/resources/images/icons/pointer-inner.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/position-absolute.svg b/frontend/resources/images/icons/position-absolute.svg
deleted file mode 100644
index 067d77864..000000000
--- a/frontend/resources/images/icons/position-absolute.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/position-bottom-center.svg b/frontend/resources/images/icons/position-bottom-center.svg
deleted file mode 100644
index 002466ead..000000000
--- a/frontend/resources/images/icons/position-bottom-center.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-
-
-
-
diff --git a/frontend/resources/images/icons/position-bottom-left.svg b/frontend/resources/images/icons/position-bottom-left.svg
deleted file mode 100644
index 4811b74a9..000000000
--- a/frontend/resources/images/icons/position-bottom-left.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-
-
-
-
diff --git a/frontend/resources/images/icons/position-bottom-right.svg b/frontend/resources/images/icons/position-bottom-right.svg
deleted file mode 100644
index ebf861dcf..000000000
--- a/frontend/resources/images/icons/position-bottom-right.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-
-
-
-
diff --git a/frontend/resources/images/icons/position-center.svg b/frontend/resources/images/icons/position-center.svg
deleted file mode 100644
index ce6695ba7..000000000
--- a/frontend/resources/images/icons/position-center.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-
-
-
-
diff --git a/frontend/resources/images/icons/position-top-center.svg b/frontend/resources/images/icons/position-top-center.svg
deleted file mode 100644
index 5a971d427..000000000
--- a/frontend/resources/images/icons/position-top-center.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-
-
-
-
diff --git a/frontend/resources/images/icons/position-top-left.svg b/frontend/resources/images/icons/position-top-left.svg
deleted file mode 100644
index 0285e444e..000000000
--- a/frontend/resources/images/icons/position-top-left.svg
+++ /dev/null
@@ -1,7 +0,0 @@
-
-
-
-
-
diff --git a/frontend/resources/images/icons/position-top-right.svg b/frontend/resources/images/icons/position-top-right.svg
deleted file mode 100644
index 838f63602..000000000
--- a/frontend/resources/images/icons/position-top-right.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-
-
-
-
diff --git a/frontend/resources/images/icons/puzzle.svg b/frontend/resources/images/icons/puzzle.svg
deleted file mode 100644
index 495b38a11..000000000
--- a/frontend/resources/images/icons/puzzle.svg
+++ /dev/null
@@ -1 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/radius-4.svg b/frontend/resources/images/icons/radius-4.svg
deleted file mode 100644
index 121940d51..000000000
--- a/frontend/resources/images/icons/radius-4.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/radius.svg b/frontend/resources/images/icons/radius.svg
deleted file mode 100644
index 4777b58fd..000000000
--- a/frontend/resources/images/icons/radius.svg
+++ /dev/null
@@ -1 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/rectangle-refactor.svg b/frontend/resources/images/icons/rectangle.svg
similarity index 100%
rename from frontend/resources/images/icons/rectangle-refactor.svg
rename to frontend/resources/images/icons/rectangle.svg
diff --git a/frontend/resources/images/icons/redo.svg b/frontend/resources/images/icons/redo.svg
deleted file mode 100644
index 2c1488b4f..000000000
--- a/frontend/resources/images/icons/redo.svg
+++ /dev/null
@@ -1 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/ruler.svg b/frontend/resources/images/icons/ruler.svg
deleted file mode 100644
index d520e3e84..000000000
--- a/frontend/resources/images/icons/ruler.svg
+++ /dev/null
@@ -1 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/search.svg b/frontend/resources/images/icons/search.svg
index 777105ceb..aacd59883 100644
--- a/frontend/resources/images/icons/search.svg
+++ b/frontend/resources/images/icons/search.svg
@@ -1 +1,3 @@
-
+
diff --git a/frontend/resources/images/icons/separate-nodes-refactor.svg b/frontend/resources/images/icons/separate-nodes.svg
similarity index 100%
rename from frontend/resources/images/icons/separate-nodes-refactor.svg
rename to frontend/resources/images/icons/separate-nodes.svg
diff --git a/frontend/resources/images/icons/set-thumbnail.svg b/frontend/resources/images/icons/set-thumbnail.svg
deleted file mode 100644
index e82fa55b1..000000000
--- a/frontend/resources/images/icons/set-thumbnail.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/shape-halign-center.svg b/frontend/resources/images/icons/shape-halign-center.svg
deleted file mode 100644
index b861539f2..000000000
--- a/frontend/resources/images/icons/shape-halign-center.svg
+++ /dev/null
@@ -1 +0,0 @@
-
-
\ No newline at end of file
diff --git a/frontend/resources/images/icons/shown-refactor.svg b/frontend/resources/images/icons/shown.svg
similarity index 100%
rename from frontend/resources/images/icons/shown-refactor.svg
rename to frontend/resources/images/icons/shown.svg
diff --git a/frontend/resources/images/icons/size-horiz.svg b/frontend/resources/images/icons/size-horiz.svg
deleted file mode 100644
index ab9456580..000000000
--- a/frontend/resources/images/icons/size-horiz.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/size-horizontal-refactor.svg b/frontend/resources/images/icons/size-horizontal.svg
similarity index 100%
rename from frontend/resources/images/icons/size-horizontal-refactor.svg
rename to frontend/resources/images/icons/size-horizontal.svg
diff --git a/frontend/resources/images/icons/size-vert.svg b/frontend/resources/images/icons/size-vert.svg
deleted file mode 100644
index f2e807c40..000000000
--- a/frontend/resources/images/icons/size-vert.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/size-vertical-refactor.svg b/frontend/resources/images/icons/size-vertical.svg
similarity index 100%
rename from frontend/resources/images/icons/size-vertical-refactor.svg
rename to frontend/resources/images/icons/size-vertical.svg
diff --git a/frontend/resources/images/icons/snap-nodes-refactor.svg b/frontend/resources/images/icons/snap-nodes.svg
similarity index 100%
rename from frontend/resources/images/icons/snap-nodes-refactor.svg
rename to frontend/resources/images/icons/snap-nodes.svg
diff --git a/frontend/resources/images/icons/sort-ascending.svg b/frontend/resources/images/icons/sort-ascending.svg
deleted file mode 100644
index 48ed056f4..000000000
--- a/frontend/resources/images/icons/sort-ascending.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/sort-descending.svg b/frontend/resources/images/icons/sort-descending.svg
deleted file mode 100644
index 3a5838b95..000000000
--- a/frontend/resources/images/icons/sort-descending.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/space-around.svg b/frontend/resources/images/icons/space-around.svg
deleted file mode 100644
index 94e6e8de4..000000000
--- a/frontend/resources/images/icons/space-around.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/space-between.svg b/frontend/resources/images/icons/space-between.svg
deleted file mode 100644
index 639040b0b..000000000
--- a/frontend/resources/images/icons/space-between.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/status-alert-refactor.svg b/frontend/resources/images/icons/status-alert.svg
similarity index 100%
rename from frontend/resources/images/icons/status-alert-refactor.svg
rename to frontend/resources/images/icons/status-alert.svg
diff --git a/frontend/resources/images/icons/status-tick-refactor.svg b/frontend/resources/images/icons/status-tick.svg
similarity index 100%
rename from frontend/resources/images/icons/status-tick-refactor.svg
rename to frontend/resources/images/icons/status-tick.svg
diff --git a/frontend/resources/images/icons/status-update-refactor.svg b/frontend/resources/images/icons/status-update.svg
similarity index 100%
rename from frontend/resources/images/icons/status-update-refactor.svg
rename to frontend/resources/images/icons/status-update.svg
diff --git a/frontend/resources/images/icons/status-wrong-refactor.svg b/frontend/resources/images/icons/status-wrong.svg
similarity index 100%
rename from frontend/resources/images/icons/status-wrong-refactor.svg
rename to frontend/resources/images/icons/status-wrong.svg
diff --git a/frontend/resources/images/icons/strikethrough.svg b/frontend/resources/images/icons/strikethrough.svg
deleted file mode 100644
index bbec524b4..000000000
--- a/frontend/resources/images/icons/strikethrough.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/stroke-arrow-refactor.svg b/frontend/resources/images/icons/stroke-arrow.svg
similarity index 100%
rename from frontend/resources/images/icons/stroke-arrow-refactor.svg
rename to frontend/resources/images/icons/stroke-arrow.svg
diff --git a/frontend/resources/images/icons/stroke-circle-refactor.svg b/frontend/resources/images/icons/stroke-circle.svg
similarity index 100%
rename from frontend/resources/images/icons/stroke-circle-refactor.svg
rename to frontend/resources/images/icons/stroke-circle.svg
diff --git a/frontend/resources/images/icons/stroke-diamond-refactor.svg b/frontend/resources/images/icons/stroke-diamond.svg
similarity index 100%
rename from frontend/resources/images/icons/stroke-diamond-refactor.svg
rename to frontend/resources/images/icons/stroke-diamond.svg
diff --git a/frontend/resources/images/icons/stroke-rectangle-refactor.svg b/frontend/resources/images/icons/stroke-rectangle.svg
similarity index 100%
rename from frontend/resources/images/icons/stroke-rectangle-refactor.svg
rename to frontend/resources/images/icons/stroke-rectangle.svg
diff --git a/frontend/resources/images/icons/stroke-rounded-refactor.svg b/frontend/resources/images/icons/stroke-rounded.svg
similarity index 100%
rename from frontend/resources/images/icons/stroke-rounded-refactor.svg
rename to frontend/resources/images/icons/stroke-rounded.svg
diff --git a/frontend/resources/images/icons/stroke-size-refactor.svg b/frontend/resources/images/icons/stroke-size.svg
similarity index 100%
rename from frontend/resources/images/icons/stroke-size-refactor.svg
rename to frontend/resources/images/icons/stroke-size.svg
diff --git a/frontend/resources/images/icons/stroke-squared-refactor.svg b/frontend/resources/images/icons/stroke-squared.svg
similarity index 100%
rename from frontend/resources/images/icons/stroke-squared-refactor.svg
rename to frontend/resources/images/icons/stroke-squared.svg
diff --git a/frontend/resources/images/icons/stroke-triangle-refactor.svg b/frontend/resources/images/icons/stroke-triangle.svg
similarity index 100%
rename from frontend/resources/images/icons/stroke-triangle-refactor.svg
rename to frontend/resources/images/icons/stroke-triangle.svg
diff --git a/frontend/resources/images/icons/stroke.svg b/frontend/resources/images/icons/stroke.svg
deleted file mode 100644
index fd82b03f7..000000000
--- a/frontend/resources/images/icons/stroke.svg
+++ /dev/null
@@ -1 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/switch.svg b/frontend/resources/images/icons/switch.svg
index d6bf0ab85..4e802c818 100644
--- a/frontend/resources/images/icons/switch.svg
+++ b/frontend/resources/images/icons/switch.svg
@@ -1,5 +1,3 @@
-
-
-
+
+
diff --git a/frontend/resources/images/icons/text-align-center-refactor.svg b/frontend/resources/images/icons/text-align-center-refactor.svg
deleted file mode 100644
index 279428533..000000000
--- a/frontend/resources/images/icons/text-align-center-refactor.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
\ No newline at end of file
diff --git a/frontend/resources/images/icons/text-align-center.svg b/frontend/resources/images/icons/text-align-center.svg
index 304412d42..279428533 100644
--- a/frontend/resources/images/icons/text-align-center.svg
+++ b/frontend/resources/images/icons/text-align-center.svg
@@ -1 +1,3 @@
-
+
\ No newline at end of file
diff --git a/frontend/resources/images/icons/text-align-justify.svg b/frontend/resources/images/icons/text-align-justify.svg
deleted file mode 100644
index acf125ade..000000000
--- a/frontend/resources/images/icons/text-align-justify.svg
+++ /dev/null
@@ -1 +0,0 @@
-
-
\ No newline at end of file
diff --git a/frontend/resources/images/icons/text-align-left.svg b/frontend/resources/images/icons/text-align-left.svg
index 20f7e7caa..8f117047b 100644
--- a/frontend/resources/images/icons/text-align-left.svg
+++ b/frontend/resources/images/icons/text-align-left.svg
@@ -1 +1,3 @@
-
+
\ No newline at end of file
diff --git a/frontend/resources/images/icons/text-align-right-refactor.svg b/frontend/resources/images/icons/text-align-right-refactor.svg
deleted file mode 100644
index 503291102..000000000
--- a/frontend/resources/images/icons/text-align-right-refactor.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
\ No newline at end of file
diff --git a/frontend/resources/images/icons/text-align-right.svg b/frontend/resources/images/icons/text-align-right.svg
index 40dc9024d..503291102 100644
--- a/frontend/resources/images/icons/text-align-right.svg
+++ b/frontend/resources/images/icons/text-align-right.svg
@@ -1 +1,3 @@
-
+
\ No newline at end of file
diff --git a/frontend/resources/images/icons/text-auto-height-refactor.svg b/frontend/resources/images/icons/text-auto-height.svg
similarity index 100%
rename from frontend/resources/images/icons/text-auto-height-refactor.svg
rename to frontend/resources/images/icons/text-auto-height.svg
diff --git a/frontend/resources/images/icons/text-auto-width-refactor.svg b/frontend/resources/images/icons/text-auto-width.svg
similarity index 100%
rename from frontend/resources/images/icons/text-auto-width-refactor.svg
rename to frontend/resources/images/icons/text-auto-width.svg
diff --git a/frontend/resources/images/icons/text-bottom-refactor.svg b/frontend/resources/images/icons/text-bottom.svg
similarity index 100%
rename from frontend/resources/images/icons/text-bottom-refactor.svg
rename to frontend/resources/images/icons/text-bottom.svg
diff --git a/frontend/resources/images/icons/text-direction-ltr.svg b/frontend/resources/images/icons/text-direction-ltr.svg
deleted file mode 100644
index ec3a3c282..000000000
--- a/frontend/resources/images/icons/text-direction-ltr.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/text-direction-rtl.svg b/frontend/resources/images/icons/text-direction-rtl.svg
deleted file mode 100644
index db287b350..000000000
--- a/frontend/resources/images/icons/text-direction-rtl.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/text-fixed-refactor.svg b/frontend/resources/images/icons/text-fixed.svg
similarity index 100%
rename from frontend/resources/images/icons/text-fixed-refactor.svg
rename to frontend/resources/images/icons/text-fixed.svg
diff --git a/frontend/resources/images/icons/text-justify-refactor.svg b/frontend/resources/images/icons/text-justify.svg
similarity index 100%
rename from frontend/resources/images/icons/text-justify-refactor.svg
rename to frontend/resources/images/icons/text-justify.svg
diff --git a/frontend/resources/images/icons/text-letterspacing-refactor.svg b/frontend/resources/images/icons/text-letterspacing.svg
similarity index 100%
rename from frontend/resources/images/icons/text-letterspacing-refactor.svg
rename to frontend/resources/images/icons/text-letterspacing.svg
diff --git a/frontend/resources/images/icons/text-lineheight-refactor.svg b/frontend/resources/images/icons/text-lineheight.svg
similarity index 100%
rename from frontend/resources/images/icons/text-lineheight-refactor.svg
rename to frontend/resources/images/icons/text-lineheight.svg
diff --git a/frontend/resources/images/icons/text-lowercase-refactor.svg b/frontend/resources/images/icons/text-lowercase.svg
similarity index 100%
rename from frontend/resources/images/icons/text-lowercase-refactor.svg
rename to frontend/resources/images/icons/text-lowercase.svg
diff --git a/frontend/resources/images/icons/text-ltr-refactor.svg b/frontend/resources/images/icons/text-ltr-refactor.svg
deleted file mode 100644
index 8acf7188b..000000000
--- a/frontend/resources/images/icons/text-ltr-refactor.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/text-LTR-refactor.svg b/frontend/resources/images/icons/text-ltr.svg
similarity index 100%
rename from frontend/resources/images/icons/text-LTR-refactor.svg
rename to frontend/resources/images/icons/text-ltr.svg
diff --git a/frontend/resources/images/icons/text-middle-refactor.svg b/frontend/resources/images/icons/text-middle.svg
similarity index 100%
rename from frontend/resources/images/icons/text-middle-refactor.svg
rename to frontend/resources/images/icons/text-middle.svg
diff --git a/frontend/resources/images/icons/text-mixed-refactor.svg b/frontend/resources/images/icons/text-mixed.svg
similarity index 100%
rename from frontend/resources/images/icons/text-mixed-refactor.svg
rename to frontend/resources/images/icons/text-mixed.svg
diff --git a/frontend/resources/images/icons/text-palette-refactor.svg b/frontend/resources/images/icons/text-palette.svg
similarity index 100%
rename from frontend/resources/images/icons/text-palette-refactor.svg
rename to frontend/resources/images/icons/text-palette.svg
diff --git a/frontend/resources/images/icons/text-paragraph-refactor.svg b/frontend/resources/images/icons/text-paragraph.svg
similarity index 100%
rename from frontend/resources/images/icons/text-paragraph-refactor.svg
rename to frontend/resources/images/icons/text-paragraph.svg
diff --git a/frontend/resources/images/icons/text-refactor.svg b/frontend/resources/images/icons/text-refactor.svg
deleted file mode 100644
index 36169c1fd..000000000
--- a/frontend/resources/images/icons/text-refactor.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/text-rtl-refactor.svg b/frontend/resources/images/icons/text-rtl-refactor.svg
deleted file mode 100644
index 217b18c12..000000000
--- a/frontend/resources/images/icons/text-rtl-refactor.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/text-RTL-refactor.svg b/frontend/resources/images/icons/text-rtl.svg
similarity index 100%
rename from frontend/resources/images/icons/text-RTL-refactor.svg
rename to frontend/resources/images/icons/text-rtl.svg
diff --git a/frontend/resources/images/icons/text-stroked-refactor.svg b/frontend/resources/images/icons/text-stroked.svg
similarity index 100%
rename from frontend/resources/images/icons/text-stroked-refactor.svg
rename to frontend/resources/images/icons/text-stroked.svg
diff --git a/frontend/resources/images/icons/text-top-refactor.svg b/frontend/resources/images/icons/text-top.svg
similarity index 100%
rename from frontend/resources/images/icons/text-top-refactor.svg
rename to frontend/resources/images/icons/text-top.svg
diff --git a/frontend/resources/images/icons/text-underlined-refactor.svg b/frontend/resources/images/icons/text-underlined.svg
similarity index 100%
rename from frontend/resources/images/icons/text-underlined-refactor.svg
rename to frontend/resources/images/icons/text-underlined.svg
diff --git a/frontend/resources/images/icons/text-uppercase-refactor.svg b/frontend/resources/images/icons/text-uppercase.svg
similarity index 100%
rename from frontend/resources/images/icons/text-uppercase-refactor.svg
rename to frontend/resources/images/icons/text-uppercase.svg
diff --git a/frontend/resources/images/icons/text.svg b/frontend/resources/images/icons/text.svg
index aa17f967f..36169c1fd 100644
--- a/frontend/resources/images/icons/text.svg
+++ b/frontend/resources/images/icons/text.svg
@@ -1 +1,3 @@
-
+
diff --git a/frontend/resources/images/icons/thumbnail-refactor.svg b/frontend/resources/images/icons/thumbnail.svg
similarity index 100%
rename from frontend/resources/images/icons/thumbnail-refactor.svg
rename to frontend/resources/images/icons/thumbnail.svg
diff --git a/frontend/resources/images/icons/tick-refactor.svg b/frontend/resources/images/icons/tick-refactor.svg
deleted file mode 100644
index 4e616b7d7..000000000
--- a/frontend/resources/images/icons/tick-refactor.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/tick.svg b/frontend/resources/images/icons/tick.svg
index 93e3f520b..4e616b7d7 100644
--- a/frontend/resources/images/icons/tick.svg
+++ b/frontend/resources/images/icons/tick.svg
@@ -1,3 +1,3 @@
-
-
+
diff --git a/frontend/resources/images/icons/titlecase.svg b/frontend/resources/images/icons/titlecase.svg
deleted file mode 100644
index 473b6c8cb..000000000
--- a/frontend/resources/images/icons/titlecase.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/to-corner-refactor.svg b/frontend/resources/images/icons/to-corner.svg
similarity index 100%
rename from frontend/resources/images/icons/to-corner-refactor.svg
rename to frontend/resources/images/icons/to-corner.svg
diff --git a/frontend/resources/images/icons/to-curve-refactor.svg b/frontend/resources/images/icons/to-curve.svg
similarity index 100%
rename from frontend/resources/images/icons/to-curve-refactor.svg
rename to frontend/resources/images/icons/to-curve.svg
diff --git a/frontend/resources/images/icons/toggle.svg b/frontend/resources/images/icons/toggle.svg
deleted file mode 100644
index 732c7042c..000000000
--- a/frontend/resources/images/icons/toggle.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/trash.svg b/frontend/resources/images/icons/trash.svg
deleted file mode 100644
index a5d92bf57..000000000
--- a/frontend/resources/images/icons/trash.svg
+++ /dev/null
@@ -1 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/tree.svg b/frontend/resources/images/icons/tree.svg
index ddfffe3e7..b9405eaac 100644
--- a/frontend/resources/images/icons/tree.svg
+++ b/frontend/resources/images/icons/tree.svg
@@ -1,3 +1,3 @@
-
-
+
diff --git a/frontend/resources/images/icons/unchain.svg b/frontend/resources/images/icons/unchain.svg
deleted file mode 100644
index 911560889..000000000
--- a/frontend/resources/images/icons/unchain.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/underline.svg b/frontend/resources/images/icons/underline.svg
deleted file mode 100644
index 3e35ddc93..000000000
--- a/frontend/resources/images/icons/underline.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/undo.svg b/frontend/resources/images/icons/undo.svg
deleted file mode 100644
index 9394fa24a..000000000
--- a/frontend/resources/images/icons/undo.svg
+++ /dev/null
@@ -1 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/unlock-refactor.svg b/frontend/resources/images/icons/unlock-refactor.svg
deleted file mode 100644
index 6382db15d..000000000
--- a/frontend/resources/images/icons/unlock-refactor.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
\ No newline at end of file
diff --git a/frontend/resources/images/icons/unlock.svg b/frontend/resources/images/icons/unlock.svg
index b9c1ffa83..6382db15d 100644
--- a/frontend/resources/images/icons/unlock.svg
+++ b/frontend/resources/images/icons/unlock.svg
@@ -1,3 +1,3 @@
-
-
+
+
\ No newline at end of file
diff --git a/frontend/resources/images/icons/uppercase.svg b/frontend/resources/images/icons/uppercase.svg
deleted file mode 100644
index 3c681ac75..000000000
--- a/frontend/resources/images/icons/uppercase.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/user-refactor.svg b/frontend/resources/images/icons/user-refactor.svg
deleted file mode 100644
index 0d763101a..000000000
--- a/frontend/resources/images/icons/user-refactor.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/frontend/resources/images/icons/user.svg b/frontend/resources/images/icons/user.svg
index 228a69876..0d763101a 100644
--- a/frontend/resources/images/icons/user.svg
+++ b/frontend/resources/images/icons/user.svg
@@ -1,3 +1,3 @@
-
-
+
diff --git a/frontend/resources/images/icons/vertical-align-items-center-refactor.svg b/frontend/resources/images/icons/vertical-align-items-center.svg
similarity index 100%
rename from frontend/resources/images/icons/vertical-align-items-center-refactor.svg
rename to frontend/resources/images/icons/vertical-align-items-center.svg
diff --git a/frontend/resources/images/icons/vertical-align-items-end-refactor.svg b/frontend/resources/images/icons/vertical-align-items-end.svg
similarity index 100%
rename from frontend/resources/images/icons/vertical-align-items-end-refactor.svg
rename to frontend/resources/images/icons/vertical-align-items-end.svg
diff --git a/frontend/resources/images/icons/vertical-align-items-start-refactor.svg b/frontend/resources/images/icons/vertical-align-items-start.svg
similarity index 100%
rename from frontend/resources/images/icons/vertical-align-items-start-refactor.svg
rename to frontend/resources/images/icons/vertical-align-items-start.svg
diff --git a/frontend/resources/images/icons/view-as-icons-refactor.svg b/frontend/resources/images/icons/view-as-icons.svg
similarity index 100%
rename from frontend/resources/images/icons/view-as-icons-refactor.svg
rename to frontend/resources/images/icons/view-as-icons.svg
diff --git a/frontend/resources/images/icons/view-as-list-refactor.svg b/frontend/resources/images/icons/view-as-list.svg
similarity index 100%
rename from frontend/resources/images/icons/view-as-list-refactor.svg
rename to frontend/resources/images/icons/view-as-list.svg
diff --git a/frontend/resources/images/icons/wrap-refactor.svg b/frontend/resources/images/icons/wrap.svg
similarity index 100%
rename from frontend/resources/images/icons/wrap-refactor.svg
rename to frontend/resources/images/icons/wrap.svg
diff --git a/frontend/resources/styles/common/framework.scss b/frontend/resources/styles/common/framework.scss
index 5a22085ee..a90e22dbd 100644
--- a/frontend/resources/styles/common/framework.scss
+++ b/frontend/resources/styles/common/framework.scss
@@ -1011,7 +1011,7 @@ input[type="range"]:focus::-ms-fill-upper {
padding-left: 16px;
top: 16px;
right: 16px;
- z-index: 1005;
+ z-index: 40;
display: flex;
align-items: center;
diff --git a/frontend/resources/styles/common/refactor/basic-rules.scss b/frontend/resources/styles/common/refactor/basic-rules.scss
index 61a1c4c49..f057974d0 100644
--- a/frontend/resources/styles/common/refactor/basic-rules.scss
+++ b/frontend/resources/styles/common/refactor/basic-rules.scss
@@ -32,6 +32,12 @@
background: var(--text-editor-selection-background-color);
color: var(--text-editor-selection-foreground-color);
}
+
+ ::placeholder,
+ ::-webkit-input-placeholder {
+ @include bodySmallTypography;
+ color: var(--input-placeholder-color);
+ }
}
// BUTTONS
@@ -39,7 +45,7 @@
@include buttonStyle;
@include flexCenter;
@include focusPrimary;
- @include uppercaseTitleTipography;
+ @include headlineSmallTypography;
background-color: var(--button-primary-background-color-rest);
border: $s-1 solid var(--button-primary-border-color-rest);
color: var(--button-primary-foreground-color-rest);
@@ -223,7 +229,6 @@
.button-disabled {
@include buttonStyle;
@include flexCenter;
- height: $s-32;
background-color: var(--button-background-color-disabled);
border: $s-1 solid var(--button-border-color-disabled);
color: var(--button-foreground-color-disabled);
@@ -304,7 +309,7 @@
}
.input-label {
- @include uppercaseTitleTipography;
+ @include headlineSmallTypography;
@include flexCenter;
width: $s-20;
padding-left: $s-8;
@@ -402,6 +407,7 @@
background-color: var(--input-background-color);
}
::placeholder {
+ @include bodySmallTypography;
color: var(--input-placeholder-color);
}
&:hover {
@@ -905,7 +911,7 @@
margin: 0;
margin-top: $s-1;
border-radius: $br-8;
- z-index: $z-index-3;
+ z-index: $z-index-4;
overflow-y: auto;
overflow-x: hidden;
background-color: var(--menu-background-color);
diff --git a/frontend/resources/styles/common/refactor/common-dashboard.scss b/frontend/resources/styles/common/refactor/common-dashboard.scss
index 7e1830ab7..79ffa2542 100644
--- a/frontend/resources/styles/common/refactor/common-dashboard.scss
+++ b/frontend/resources/styles/common/refactor/common-dashboard.scss
@@ -4,12 +4,13 @@
//
// Copyright (c) KALEIDOS INC
-@use "common/refactor/common-refactor" as *;
+@use "refactor/common-refactor" as *;
.dashboard-header {
align-items: center;
display: flex;
height: $s-64;
+ max-height: $s-64;
justify-content: space-between;
padding: $s-4 $s-16 $s-4 $s-8;
position: relative;
@@ -18,6 +19,7 @@
&.team {
display: grid;
grid-template-columns: 20% 1fr 20%;
+ max-height: $s-64;
}
.element-name {
@@ -93,12 +95,14 @@
cursor: pointer;
svg {
- fill: $df-secondary;
+ stroke: $df-secondary;
+ fill: none;
width: $s-16;
height: $s-16;
&:hover {
- fill: $da-tertiary;
+ stroke: $da-tertiary;
+ fill: none;
}
}
}
diff --git a/frontend/resources/styles/common/refactor/design-tokens.scss b/frontend/resources/styles/common/refactor/design-tokens.scss
index eb1116b7f..a1527bf05 100644
--- a/frontend/resources/styles/common/refactor/design-tokens.scss
+++ b/frontend/resources/styles/common/refactor/design-tokens.scss
@@ -156,6 +156,7 @@
--icon-foreground-accept: var(--status-color-success-500);
--icon-foreground-discard: var(--status-color-error-500);
--icon-foreground-active: var(--color-accent-primary);
+ --icon-foreground-selected: var(--color-accent-tertiary);
// INPUTS, SELECTS, DROPDOWNS
@@ -314,7 +315,13 @@
--modal-navigator-foreground-color-rest: var(--color-background-quaternary);
--modal-navigator-foreground-color-active: var(--color-accent-primary);
- // ALERTS NOTIFICATION TOAST & STATUS WIDGET
+ // ALERTS, NOTIFICATION, TOAST & BADGES
+
+ --alert-background-color-default: var(--color-background-primary);
+ --alert-text-foreground-color-default: var(--color-foreground-primary);
+ --alert-icon-foreground-color-default: var(--color-foreground-primary);
+ --alert-border-color-default: var(--color-background-quaternary);
+
--alert-background-color-success: var(--color-success-background);
--alert-text-foreground-color-success: var(--color-foreground-primary);
--alert-icon-foreground-color-success: var(--color-success-foreground);
@@ -335,26 +342,20 @@
--alert-icon-foreground-color-info: var(--color-info-foreground);
--alert-border-color-info: var(--color-info-foreground);
- --alert-background-color-default: var(--color-background-primary);
- --alert-text-foreground-color-default: var(--color-foreground-primary);
- --alert-icon-foreground-color-default: var(--color-foreground-primary);
- --alert-border-color-default: var(--color-background-quaternary);
+ --alert-text-foreground-color-focus: var(--color-accent-primary);
+ --alert-border-color-focus: var(--color-accent-primary);
- --notification-background-color-success: var();
- --notification-foreground-color-success: var();
- --notification-border-color-success: var();
--notification-foreground-color-default: var(--color-foreground-secondary);
+ --element-foreground-warning: var(--status-color-warning-500);
+ --element-foreground-error: var(--status-color-error-500);
+
+ // STATUS WIDGET
--status-widget-background-color-success: var(--status-color-success-500);
--status-widget-background-color-warning: var(--status-color-warning-500);
--status-widget-background-color-pending: var(--status-color-pending-500);
--status-widget-background-color-error: var(--status-color-error-500);
- --status-widget-icon-foreground-color: var(--color-background-primary); // TODO review
-
- --element-foreground-success: var(--status-color-success-500);
- --element-foreground-warning: var(--status-color-warning-500);
- --element-foreground-pending: var(--status-color-info-500);
- --element-foreground-error: var(--status-color-error-500);
+ --status-widget-icon-foreground-color: var(--color-background-primary);
// INTERFACE ELEMENTS
--search-bar-background-color: var(--color-background-primary);
@@ -369,14 +370,15 @@
--pill-background-color: var(--color-background-tertiary);
--pill-foreground-color: var(--color-foreground-primary);
- --tag-background-color: var(--color-accent-primary);
-
--link-foreground-color: var(--color-accent-primary);
--resize-area-background-color: var(--color-background-primary);
--resize-area-border-color: var(--color-background-quaternary);
--profile-section-background-color: var(--color-background-tertiary);
+ --dashboard-list-background-color: var(--color-background-tertiary);
+ --dashboard-list-foreground-color: var(--color-foreground-primary);
+ --dashboard-list-text-foreground-color: var(--color-foreground-secondary);
--flow-tag-background-color: var(--color-background-tertiary);
--flow-tag-foreground-color: var(--color-foreground-secondary);
diff --git a/frontend/resources/styles/common/refactor/mixins.scss b/frontend/resources/styles/common/refactor/mixins.scss
index 60f2f1e3d..992380e57 100644
--- a/frontend/resources/styles/common/refactor/mixins.scss
+++ b/frontend/resources/styles/common/refactor/mixins.scss
@@ -116,11 +116,11 @@
}
@mixin textEllipsis {
+ display: block;
max-width: 99%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
- display: block;
}
@mixin twoLineTextEllipsis {
diff --git a/frontend/resources/styles/common/refactor/z-index.scss b/frontend/resources/styles/common/refactor/z-index.scss
index 5be8e2e5b..755b2e9fa 100644
--- a/frontend/resources/styles/common/refactor/z-index.scss
+++ b/frontend/resources/styles/common/refactor/z-index.scss
@@ -6,8 +6,9 @@
$z-index-1: 1; // floating elements
$z-index-2: 2; // sidebars
-$z-index-3: 3; // context menu
-$z-index-4: 4; // modal
+$z-index-3: 3; // topbar
+$z-index-4: 4; // context menu
+$z-index-5: 5; // modal
$z-index-10: 10;
$z-index-20: 20;
$z-index-modal: 30; // When refactor finish we can reduce this number,
diff --git a/frontend/resources/styles/debug.scss b/frontend/resources/styles/debug.scss
index e54ea5153..be3edc522 100644
--- a/frontend/resources/styles/debug.scss
+++ b/frontend/resources/styles/debug.scss
@@ -15,5 +15,4 @@ body {
.deprecated-icon {
fill: red !important;
- stroke: red !important;
}
diff --git a/frontend/resources/styles/main-default.scss b/frontend/resources/styles/main-default.scss
index f3fd5e5bc..48c342b70 100644
--- a/frontend/resources/styles/main-default.scss
+++ b/frontend/resources/styles/main-default.scss
@@ -60,9 +60,7 @@
@import "main/partials/project-bar";
@import "main/partials/sidebar";
@import "main/partials/tab-container";
-@import "main/partials/tool-bar";
@import "main/partials/user-settings";
@import "main/partials/workspace";
-@import "main/partials/color-bullet";
@import "main/partials/exception-page";
@import "main/partials/signup-questions";
diff --git a/frontend/resources/styles/main/partials/color-bullet.scss b/frontend/resources/styles/main/partials/color-bullet.scss
deleted file mode 100644
index 43983d50f..000000000
--- a/frontend/resources/styles/main/partials/color-bullet.scss
+++ /dev/null
@@ -1,209 +0,0 @@
-// This Source Code Form is subject to the terms of the Mozilla Public
-// License, v. 2.0. If a copy of the MPL was not distributed with this
-// file, You can obtain one at http://mozilla.org/MPL/2.0/.
-//
-// Copyright (c) KALEIDOS INC
-
-.color-bullet {
- border: 2px solid $color-gray-30;
- position: relative;
- width: var(--bullet-size);
- height: var(--bullet-size);
-
- &:hover {
- border-color: $color-primary;
- }
-}
-.color-cell {
- display: grid;
- grid-template-columns: 100%;
- grid-template-rows: 1fr auto;
- height: 100%;
- justify-items: center;
- width: 65px;
-
- .color-bullet {
- border: 2px solid $color-gray-30;
- position: relative;
- width: var(--bullet-size);
- height: var(--bullet-size);
-
- &:hover {
- border-color: $color-primary;
- }
- }
-
- & > * {
- overflow: hidden;
- }
-}
-
-.color-cell.current {
- .color-bullet {
- border-color: $color-gray-30;
- }
-}
-
-ul.palette-menu .color-bullet {
- width: 20px;
- height: 20px;
- border: 1px solid $color-gray-30;
- margin-right: 5px;
- background-size: 8px;
-}
-.color-cell.add-color .color-bullet {
- align-items: center;
- background-color: $color-gray-50;
- border: 3px dashed $color-gray-30;
- cursor: pointer;
- display: flex;
- justify-content: center;
- margin-bottom: 1rem;
- padding: 0.6rem;
-
- svg {
- fill: $color-gray-10;
- height: 30px;
- width: 30px;
- }
-}
-
-.colorpicker-content .color-bullet {
- grid-area: color;
- width: 20px;
- height: 20px;
- border: 1px solid $color-gray-30;
- background-size: 8px;
- overflow: hidden;
-}
-
-.asset-section .asset-list-item .color-bullet {
- border: 1px solid $color-gray-30;
- height: 20px;
- margin-right: $size-1;
- width: 20px;
-}
-.tool-window-content .asset-list .asset-list-item {
- &:hover {
- .color-bullet {
- border: 1px solid $color-primary;
- }
- }
-}
-
-.color-cell.add-color:hover .color-bullet {
- border-color: $color-gray-30;
-
- svg {
- fill: $color-gray-30;
- }
-}
-
-.color-bullet {
- display: flex;
- flex-direction: row;
- border-radius: 50%;
-
- & .color-bullet-wrapper {
- background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAADFJREFUOE9jZGBgEAFifOANPknGUQMYhkkYEEgG+NMJKAwIAbwJbdQABnBCIgRoG4gAIF8IsXB/Rs4AAAAASUVORK5CYII=")
- left center;
- background-color: $color-white;
- clip-path: circle(50%);
- display: flex;
- flex-direction: row;
- height: 100%;
- width: 100%;
- }
-
- &.is-gradient {
- background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAADFJREFUOE9jZGBgEAFifOANPknGUQMYhkkYEEgG+NMJKAwIAbwJbdQABnBCIgRoG4gAIF8IsXB/Rs4AAAAASUVORK5CYII=")
- left center;
- background-color: $color-white;
- }
-
- & .color-bullet-wrapper > * {
- width: 100%;
- height: 100%;
- }
-}
-
-.color-data .color-bullet.multiple {
- background: transparent;
-
- &::before {
- content: "?";
- }
-}
-
-.color-data .color-bullet {
- border: 1px solid $color-gray-30;
- border-radius: 50%;
- cursor: pointer;
- display: flex;
- align-items: center;
- justify-content: center;
- color: $color-gray-10;
- flex-shrink: 0;
- height: 20px;
- margin: 5px 4px 0 0;
- width: 20px;
-
- &.palette-th {
- align-items: center;
- border: 1px solid $color-gray-30;
- display: flex;
- justify-content: center;
-
- svg {
- fill: $color-gray-30;
- height: 16px;
- width: 16px;
- }
-
- &:hover {
- border-color: $color-primary;
- svg {
- fill: $color-primary;
- }
- }
- }
-}
-
-.colorpicker-content .libraries .selected-colors .color-bullet {
- grid-area: auto;
- margin-bottom: 0.25rem;
- cursor: pointer;
-
- &:hover {
- border-color: $color-primary;
- z-index: 10;
- }
-
- &.button {
- background: $color-white;
- display: flex;
- align-items: center;
- justify-content: center;
- }
-
- &.button svg {
- width: 12px;
- height: 12px;
- fill: $color-gray-30;
- }
-
- &.plus-button svg {
- width: 8px;
- height: 8px;
- fill: $color-black;
- }
-}
-
-.color-bullet.is-not-library-color {
- border-radius: $br3;
- overflow: hidden;
-
- & .color-bullet-wrapper {
- clip-path: none;
- }
-}
diff --git a/frontend/resources/styles/main/partials/context-menu.scss b/frontend/resources/styles/main/partials/context-menu.scss
index e7a302655..3f4e3f0dd 100644
--- a/frontend/resources/styles/main/partials/context-menu.scss
+++ b/frontend/resources/styles/main/partials/context-menu.scss
@@ -8,7 +8,7 @@
position: relative;
visibility: hidden;
opacity: 0;
- z-index: 100;
+ z-index: 3;
}
.context-menu.is-open {
diff --git a/frontend/resources/styles/main/partials/debug-icons-preview.scss b/frontend/resources/styles/main/partials/debug-icons-preview.scss
index 763485890..4b72bd0a7 100644
--- a/frontend/resources/styles/main/partials/debug-icons-preview.scss
+++ b/frontend/resources/styles/main/partials/debug-icons-preview.scss
@@ -61,8 +61,7 @@
.cursor-item div,
.icon-item-old svg {
- fill: #aab5ba;
- stroke: none;
+ stroke: #aab5ba;
}
.cursor-item {
diff --git a/frontend/resources/styles/main/partials/dropdown.scss b/frontend/resources/styles/main/partials/dropdown.scss
index 0abd62a4f..ed3a2817f 100644
--- a/frontend/resources/styles/main/partials/dropdown.scss
+++ b/frontend/resources/styles/main/partials/dropdown.scss
@@ -4,7 +4,7 @@
background-color: $color-white;
border-radius: $br2;
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25);
- z-index: 12;
+ z-index: 3;
hr {
margin: 0 !important;
diff --git a/frontend/resources/styles/main/partials/exception-page.scss b/frontend/resources/styles/main/partials/exception-page.scss
index 3ffd4ca1b..30686023a 100644
--- a/frontend/resources/styles/main/partials/exception-page.scss
+++ b/frontend/resources/styles/main/partials/exception-page.scss
@@ -12,7 +12,7 @@
display: flex;
align-items: center;
padding: 32px;
- z-index: 1000;
+ z-index: 40;
cursor: pointer;
diff --git a/frontend/resources/styles/main/partials/loader.scss b/frontend/resources/styles/main/partials/loader.scss
index f42675aaf..ce2542d2d 100644
--- a/frontend/resources/styles/main/partials/loader.scss
+++ b/frontend/resources/styles/main/partials/loader.scss
@@ -9,7 +9,7 @@
position: fixed;
top: 0;
width: 100%;
- z-index: 999;
+ z-index: 40;
}
// full with loader CSS
diff --git a/frontend/resources/styles/main/partials/tool-bar.scss b/frontend/resources/styles/main/partials/tool-bar.scss
deleted file mode 100644
index eea14f2e3..000000000
--- a/frontend/resources/styles/main/partials/tool-bar.scss
+++ /dev/null
@@ -1,48 +0,0 @@
-// This Source Code Form is subject to the terms of the Mozilla Public
-// License, v. 2.0. If a copy of the MPL was not distributed with this
-// file, You can obtain one at http://mozilla.org/MPL/2.0/.
-//
-// Copyright (c) KALEIDOS INC
-
-.tool-bar {
- background-color: $color-gray-40;
- bottom: 0;
- height: 100%;
- position: fixed;
- left: 0;
- width: 50px;
- z-index: 10;
-
- .tool-bar-inside {
- padding-top: 70px;
-
- .main-tools {
- align-items: center;
- display: flex;
- flex-direction: column;
-
- li {
- cursor: pointer;
- margin-bottom: $size-5;
-
- svg {
- fill: $color-gray-20;
- height: 25px;
- width: 25px;
- }
-
- &:hover {
- svg {
- fill: $color-white;
- }
- }
-
- &.current {
- svg {
- fill: $color-primary;
- }
- }
- }
- }
- }
-}
diff --git a/frontend/resources/styles/main/partials/workspace.scss b/frontend/resources/styles/main/partials/workspace.scss
index 5288b7475..088add928 100644
--- a/frontend/resources/styles/main/partials/workspace.scss
+++ b/frontend/resources/styles/main/partials/workspace.scss
@@ -68,100 +68,6 @@ $height-palette-max: 80px;
}
}
-.workspace-context-menu {
- background-color: $color-white;
- border-radius: $br3;
- box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25);
- left: 740px;
- position: absolute;
- top: 40px;
- width: 240px;
- z-index: 12;
-
- li {
- align-items: center;
- font-size: $fs14;
- padding: $size-1 $size-4;
- cursor: pointer;
-
- display: flex;
- justify-content: space-between;
-
- &.separator {
- border-top: 1px solid $color-gray-10;
- padding: 0px;
- margin: 2px;
- }
-
- span {
- color: $color-gray-60;
- }
-
- span.shortcut {
- color: $color-gray-20;
- font-size: $fs12;
- }
-
- &:hover {
- background-color: $color-primary-lighter;
- }
-
- .submenu-icon {
- position: absolute;
- right: 1rem;
-
- svg {
- width: 10px;
- height: 10px;
- }
- }
- }
-
- .icon-menu-item {
- display: flex;
- justify-content: flex-start;
-
- &:hover {
- background-color: $color-primary-lighter;
- }
-
- span.title {
- margin-left: 5px;
- }
-
- .selected-icon {
- svg {
- width: 10px;
- height: 10px;
- }
- }
-
- .shape-icon {
- margin-left: 3px;
- svg {
- width: 13px;
- height: 13px;
- }
- }
-
- .icon-wrapper {
- display: grid;
- grid-template-columns: 1fr 1fr;
- margin: 0;
- }
- }
-}
-
-// .workspace-loader {
-// display: flex;
-// justify-content: center;
-// align-items: center;
-
-// svg {
-// fill: $color-gray-50;
-// }
-// }
-
.workspace-content {
background-color: $color-canvas;
display: flex;
@@ -242,20 +148,22 @@ $height-palette-max: 80px;
.viewport-overlays {
cursor: initial;
- height: 100%;
overflow: hidden;
pointer-events: none;
position: absolute;
- width: 100%;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
z-index: 10;
.pixel-overlay {
- height: 100%;
left: 0;
pointer-events: initial;
position: absolute;
top: 0;
- width: 100%;
+ right: 0;
+ bottom: 0;
z-index: 1;
}
}
diff --git a/frontend/src/app/main/data/comments.cljs b/frontend/src/app/main/data/comments.cljs
index ce8e1bd6d..981f78336 100644
--- a/frontend/src/app/main/data/comments.cljs
+++ b/frontend/src/app/main/data/comments.cljs
@@ -12,6 +12,7 @@
[app.common.schema :as sm]
[app.common.types.shape-tree :as ctst]
[app.common.uuid :as uuid]
+ [app.main.data.events :as ev]
[app.main.data.workspace.state-helpers :as wsh]
[app.main.repo :as rp]
[beicon.v2.core :as rx]
@@ -61,13 +62,23 @@
(ptk/reify ::created-thread-on-workspace
ptk/UpdateEvent
(update [_ state]
- (-> state
- (update :comment-threads assoc id (dissoc thread :comment))
- (update-in [:workspace-data :pages-index page-id :options :comment-threads-position] assoc id (select-keys thread [:position :frame-id]))
- (update :comments-local assoc :open id)
- (update :comments-local dissoc :draft)
- (update :workspace-drawing dissoc :comment)
- (update-in [:comments id] assoc (:id comment) comment)))))
+ (let [position (select-keys thread [:position :frame-id])]
+ (-> state
+ (update :comment-threads assoc id (dissoc thread :comment))
+ (update-in [:workspace-data :pages-index page-id :options :comment-threads-position] assoc id position)
+ (update :comments-local assoc :open id)
+ (update :comments-local dissoc :draft)
+ (update :workspace-drawing dissoc :comment)
+ (update-in [:comments id] assoc (:id comment) comment))))
+
+ ptk/WatchEvent
+ (watch [_ _ _]
+ (rx/of (ptk/data-event ::ev/event
+ {::ev/name "create-comment-thread"
+ ::ev/origin "workspace"
+ :id id
+ :content-size (count (:content comment))})))))
+
(def ^:private
@@ -81,8 +92,7 @@
(defn create-thread-on-workspace
[params]
- (dm/assert!
- (sm/check! schema:create-thread-on-workspace params))
+ (dm/assert! (sm/check! schema:create-thread-on-workspace params))
(ptk/reify ::create-thread-on-workspace
ptk/WatchEvent
@@ -105,13 +115,22 @@
(ptk/reify ::created-thread-on-viewer
ptk/UpdateEvent
(update [_ state]
- (-> state
- (update :comment-threads assoc id (dissoc thread :comment))
- (update-in [:viewer :pages page-id :options :comment-threads-position] assoc id (select-keys thread [:position :frame-id]))
- (update :comments-local assoc :open id)
- (update :comments-local dissoc :draft)
- (update :workspace-drawing dissoc :comment)
- (update-in [:comments id] assoc (:id comment) comment)))))
+ (let [position (select-keys thread [:position :frame-id])]
+ (-> state
+ (update :comment-threads assoc id (dissoc thread :comment))
+ (update-in [:viewer :pages page-id :options :comment-threads-position] assoc id position)
+ (update :comments-local assoc :open id)
+ (update :comments-local dissoc :draft)
+ (update :workspace-drawing dissoc :comment)
+ (update-in [:comments id] assoc (:id comment) comment))))
+
+ ptk/WatchEvent
+ (watch [_ _ _]
+ (rx/of (ptk/data-event ::ev/event
+ {::ev/name "create-comment-thread"
+ ::ev/origin "viewer"
+ :id id
+ :content-size (count (:content comment))})))))
(def ^:private
schema:create-thread-on-viewer
@@ -191,21 +210,27 @@
"expected valid content"
(string? content))
- (letfn [(created [comment state]
- (update-in state [:comments (:id thread)] assoc (:id comment) comment))]
- (ptk/reify ::create-comment
- ptk/WatchEvent
- (watch [_ state _]
- (let [share-id (-> state :viewer-local :share-id)]
- (rx/concat
- (->> (rp/cmd! :create-comment {:thread-id (:id thread) :content content :share-id share-id})
- (rx/map #(partial created %))
- (rx/catch (fn [{:keys [type code] :as cause}]
- (if (and (= type :restriction)
- (= code :max-quote-reached))
- (rx/throw cause)
- (rx/throw {:type :comment-error})))))
- (rx/of (refresh-comment-thread thread))))))))
+ (ptk/reify ::create-comment
+ ev/Event
+ (-data [_]
+ {:thread-id (:id thread)
+ :file-id (:file-id thread)
+ :content-size (count content)})
+
+ ptk/WatchEvent
+ (watch [_ state _]
+ (let [share-id (-> state :viewer-local :share-id)
+ created (fn [comment state]
+ (update-in state [:comments (:id thread)] assoc (:id comment) comment))]
+ (rx/concat
+ (->> (rp/cmd! :create-comment {:thread-id (:id thread) :content content :share-id share-id})
+ (rx/map (fn [comment] (partial created comment)))
+ (rx/catch (fn [{:keys [type code] :as cause}]
+ (if (and (= type :restriction)
+ (= code :max-quote-reached))
+ (rx/throw cause)
+ (rx/throw {:type :comment-error})))))
+ (rx/of (refresh-comment-thread thread)))))))
(defn update-comment
[{:keys [id content thread-id] :as comment}]
@@ -214,6 +239,12 @@
(check-comment! comment))
(ptk/reify ::update-comment
+ ev/Event
+ (-data [_]
+ {:thread-id thread-id
+ :id id
+ :content-size (count content)})
+
ptk/UpdateEvent
(update [_ state]
(d/update-in-when state [:comments thread-id id] assoc :content content))
@@ -241,9 +272,14 @@
ptk/WatchEvent
(watch [_ _ _]
- (->> (rp/cmd! :delete-comment-thread {:id id})
- (rx/catch #(rx/throw {:type :comment-error}))
- (rx/ignore)))))
+ (rx/concat
+ (->> (rp/cmd! :delete-comment-thread {:id id})
+ (rx/catch #(rx/throw {:type :comment-error}))
+ (rx/ignore))
+ (rx/of (ptk/data-event ::ev/event
+ {::ev/name "delete-comment-thread"
+ ::ev/origin "workspace"
+ :id id}))))))
(defn delete-comment-thread-on-viewer
[{:keys [id] :as thread}]
@@ -262,19 +298,29 @@
ptk/WatchEvent
(watch [_ state _]
(let [share-id (-> state :viewer-local :share-id)]
- (->> (rp/cmd! :delete-comment-thread {:id id :share-id share-id})
- (rx/catch #(rx/throw {:type :comment-error}))
- (rx/ignore))))))
-
+ (rx/concat
+ (->> (rp/cmd! :delete-comment-thread {:id id :share-id share-id})
+ (rx/catch #(rx/throw {:type :comment-error}))
+ (rx/ignore))
+ (rx/of (ptk/data-event ::ev/event
+ {::ev/name "delete-comment-thread"
+ ::ev/origin "viewer"
+ :id id})))))))
(defn delete-comment
[{:keys [id thread-id] :as comment}]
(dm/assert!
"expected valid comment"
(check-comment! comment))
(ptk/reify ::delete-comment
+ ev/Event
+ (-data [_]
+ {:thread-id thread-id})
+
ptk/UpdateEvent
(update [_ state]
- (d/update-in-when state [:comments thread-id] dissoc id))
+ (-> state
+ (d/update-in-when [:comments thread-id] dissoc id)
+ (d/update-in-when [:comment-threads thread-id :count-comments] dec)))
ptk/WatchEvent
(watch [_ state _]
@@ -373,6 +419,10 @@
"expected valid comment thread"
(check-comment-thread! thread))
(ptk/reify ::open-comment-thread
+ ev/Event
+ (-data [_]
+ {:thread-id id})
+
ptk/UpdateEvent
(update [_ state]
(-> state
diff --git a/frontend/src/app/main/data/dashboard.cljs b/frontend/src/app/main/data/dashboard.cljs
index b75fddfc9..bde91339d 100644
--- a/frontend/src/app/main/data/dashboard.cljs
+++ b/frontend/src/app/main/data/dashboard.cljs
@@ -469,7 +469,11 @@
(rx/map prepare)
(rx/mapcat #(rp/cmd! :update-team-photo %))
(rx/tap on-success)
- (rx/map du/fetch-teams)
+ (rx/mapcat (fn [_]
+ (rx/of (du/fetch-teams)
+ (ptk/data-event ::ev/event
+ {::ev/name "update-team-photo"
+ :team-id team-id}))))
(rx/catch on-error))))))
(defn update-team-member-role
@@ -484,7 +488,12 @@
(->> (rp/cmd! :update-team-member-role params)
(rx/mapcat (fn [_]
(rx/of (fetch-team-members team-id)
- (du/fetch-teams)))))))))
+ (du/fetch-teams)
+ (ptk/data-event ::ev/event
+ {::ev/name "update-team-member-role"
+ :team-id team-id
+ :role role
+ :member-id member-id})))))))))
(defn delete-team-member
[{:keys [member-id] :as params}]
@@ -497,7 +506,11 @@
(->> (rp/cmd! :delete-team-member params)
(rx/mapcat (fn [_]
(rx/of (fetch-team-members team-id)
- (du/fetch-teams)))))))))
+ (du/fetch-teams)
+ (ptk/data-event ::ev/event
+ {::ev/name "delete-team-member"
+ :team-id team-id
+ :member-id member-id})))))))))
(defn leave-team
[{:keys [reassign-to] :as params}]
@@ -516,6 +529,11 @@
(assoc :reassign-to reassign-to))]
(->> (rp/cmd! :leave-team params)
(rx/tap #(tm/schedule on-success))
+ (rx/map (fn [_]
+ (ptk/data-event ::ev/event
+ {::ev/name "leave-team"
+ :reassign-to reassign-to
+ :team-id team-id})))
(rx/catch on-error))))))
(defn invite-team-members
@@ -528,8 +546,11 @@
(sm/check-set-of-emails! emails))
(ptk/reify ::invite-team-members
- IDeref
- (-deref [_] {:role role :team-id team-id :resend? resend?})
+ ev/Event
+ (-data [_]
+ {:role role
+ :team-id team-id
+ :resend resend?})
ptk/WatchEvent
(watch [_ _ _]
@@ -727,6 +748,11 @@
[{:keys [id name] :as params}]
(dm/assert! (uuid? id))
(ptk/reify ::duplicate-project
+ ev/Event
+ (-data [_]
+ {:project-id id
+ :name name})
+
ptk/WatchEvent
(watch [_ _ _]
(let [{:keys [on-success on-error]
@@ -744,10 +770,12 @@
[{:keys [id team-id] :as params}]
(dm/assert! (uuid? id))
(dm/assert! (uuid? team-id))
+
(ptk/reify ::move-project
- IDeref
- (-deref [_]
- {:id id :team-id team-id})
+ ev/Event
+ (-data [_]
+ {:id id
+ :team-id team-id})
ptk/WatchEvent
(watch [_ _ _]
@@ -834,9 +862,11 @@
(defn rename-file
[{:keys [id name] :as params}]
(ptk/reify ::rename-file
- IDeref
- (-deref [_]
- {::ev/origin "dashboard" :id id :name name})
+ ev/Event
+ (-data [_]
+ {::ev/origin "dashboard"
+ :id id
+ :name name})
ptk/UpdateEvent
(update [_ state]
@@ -856,9 +886,11 @@
(defn set-file-shared
[{:keys [id is-shared] :as params}]
(ptk/reify ::set-file-shared
- IDeref
- (-deref [_]
- {::ev/origin "dashboard" :id id :shared is-shared})
+ ev/Event
+ (-data [_]
+ {::ev/origin "dashboard"
+ :id id
+ :shared is-shared})
ptk/UpdateEvent
(update [_ state]
@@ -912,9 +944,8 @@
[{:keys [project-id] :as params}]
(dm/assert! (uuid? project-id))
(ptk/reify ::create-file
-
- IDeref
- (-deref [_] {:project-id project-id})
+ ev/Event
+ (-data [_] {:project-id project-id})
ptk/WatchEvent
(watch [it state _]
@@ -967,8 +998,8 @@
(sm/check-set-of-uuid! ids))
(ptk/reify ::move-files
- IDeref
- (-deref [_]
+ ev/Event
+ (-data [_]
{:num-files (count ids)
:project-id project-id})
@@ -998,8 +1029,8 @@
[{:keys [template-id project-id] :as params}]
(dm/assert! (uuid? project-id))
(ptk/reify ::clone-template
- IDeref
- (-deref [_]
+ ev/Event
+ (-data [_]
{:template-id template-id
:project-id project-id})
diff --git a/frontend/src/app/main/data/events.cljs b/frontend/src/app/main/data/events.cljs
index a1460eedd..ec217339c 100644
--- a/frontend/src/app/main/data/events.cljs
+++ b/frontend/src/app/main/data/events.cljs
@@ -75,73 +75,23 @@
;; --- EVENT TRANSLATION
-(derive :app.main.data.comments/create-comment ::generic-action)
-(derive :app.main.data.comments/create-comment-thread ::generic-action)
-(derive :app.main.data.comments/delete-comment ::generic-action)
-(derive :app.main.data.comments/delete-comment-thread ::generic-action)
-(derive :app.main.data.comments/open-comment-thread ::generic-action)
-(derive :app.main.data.comments/update-comment ::generic-action)
-(derive :app.main.data.comments/update-comment-thread ::generic-action)
-(derive :app.main.data.comments/update-comment-thread-status ::generic-action)
-(derive :app.main.data.dashboard/delete-team-member ::generic-action)
-(derive :app.main.data.dashboard/duplicate-project ::generic-action)
-(derive :app.main.data.dashboard/create-file ::generic-action)
-(derive :app.main.data.dashboard/file-created ::generic-action)
-(derive :app.main.data.dashboard/invite-team-members ::generic-action)
-(derive :app.main.data.dashboard/leave-team ::generic-action)
-(derive :app.main.data.dashboard/move-files ::generic-action)
-(derive :app.main.data.dashboard/move-project ::generic-action)
-(derive :app.main.data.dashboard/project-created ::generic-action)
-(derive :app.main.data.dashboard/rename-file ::generic-action)
-(derive :app.main.data.dashboard/set-file-shared ::generic-action)
-(derive :app.main.data.dashboard/update-team-member-role ::generic-action)
-(derive :app.main.data.dashboard/update-team-photo ::generic-action)
-(derive :app.main.data.dashboard/clone-template ::generic-action)
-(derive :app.main.data.fonts/add-font ::generic-action)
-(derive :app.main.data.fonts/delete-font ::generic-action)
-(derive :app.main.data.fonts/delete-font-variant ::generic-action)
-(derive :app.main.data.modal/show-modal ::generic-action)
-(derive :app.main.data.users/logout ::generic-action)
-(derive :app.main.data.users/request-email-change ::generic-action)
-(derive :app.main.data.users/update-password ::generic-action)
-(derive :app.main.data.users/update-photo ::generic-action)
-(derive :app.main.data.workspace.comments/open-comment-thread ::generic-action)
-(derive :app.main.data.workspace.guides/update-guides ::generic-action)
-(derive :app.main.data.workspace.libraries/add-color ::generic-action)
-(derive :app.main.data.workspace.libraries/add-media ::generic-action)
-(derive :app.main.data.workspace.libraries/add-typography ::generic-action)
-(derive :app.main.data.workspace.libraries/delete-color ::generic-action)
-(derive :app.main.data.workspace.libraries/delete-media ::generic-action)
-(derive :app.main.data.workspace.libraries/delete-typography ::generic-action)
-(derive :app.main.data.workspace.persistence/attach-library ::generic-action)
-(derive :app.main.data.workspace.persistence/detach-library ::generic-action)
-(derive :app.main.data.workspace.persistence/set-file-shard ::generic-action)
-(derive :app.main.data.workspace.selection/toggle-focus-mode ::generic-action)
-(derive :app.main.data.workspace/create-page ::generic-action)
-(derive :app.main.data.workspace/set-workspace-layout ::generic-action)
-(derive :app.main.data.workspace/toggle-layout-flag ::generic-action)
-
(defprotocol Event
(-data [_] "Get event data"))
(defn- simplify-props
"Removes complex data types from props."
[data]
- (into {}
- (comp
- (remove (fn [[_ v]] (nil? v)))
- (map (fn [[k v :as kv]]
- (cond
- (map? v) [k :placeholder/map]
- (vector? v) [k :placeholder/vec]
- (set? v) [k :placeholder/set]
- (coll? v) [k :placeholder/coll]
- (fn? v) [k :placeholder/fn]
- :else kv))))
- data))
-
-
-(defmulti process-event-by-type ptk/type)
+ (reduce-kv (fn [data k v]
+ (cond
+ (map? v) (assoc data k :placeholder/map)
+ (vector? v) (assoc data k :placeholder/vec)
+ (set? v) (assoc data k :placeholder/set)
+ (coll? v) (assoc data k :placeholder/coll)
+ (fn? v) (assoc data k :placeholder/fn)
+ (nil? v) (dissoc data k)
+ :else data))
+ data
+ data))
(defn- process-event-by-proto
[event]
@@ -160,72 +110,30 @@
:context context
:props props}))
+(defn- process-data-event
+ [event]
+ (let [data (deref event)
+ name (::name data)]
+
+ (when (string? name)
+ (let [type (::type data "action")
+ context (-> (::context data)
+ (assoc :event-origin (::origin data))
+ (d/without-nils))
+ props (-> data d/without-qualified simplify-props)]
+ {:type type
+ :name name
+ :context context
+ :props props}))))
+
(defn- process-event
[event]
- (if (satisfies? Event event)
+ (cond
+ (satisfies? Event event)
(process-event-by-proto event)
- (process-event-by-type event)))
-(defmethod process-event-by-type :default [_] nil)
-
-(defmethod process-event-by-type ::event
- [event]
- (let [data (deref event)
- context (-> (::context data)
- (assoc :event-origin (::origin data))
- (d/without-nils))
- props (-> data d/without-qualified simplify-props)]
-
- {:type (::type data "action")
- :name (::name data "unnamed")
- :context context
- :props props}))
-
-(defmethod process-event-by-type ::generic-action
- [event]
- (let [type (ptk/type event)
- data (if (satisfies? IDeref event)
- (deref event)
- {})
- data (d/deep-merge data (meta event))]
-
- {:type "action"
- :name (or (::name data) (name type))
- :props (-> (d/without-qualified data)
- (simplify-props))
- :context (d/without-nils
- {:event-origin (::origin data)
- :event-namespace (namespace type)
- :event-symbol (name type)})}))
-
-(defmethod process-event-by-type :app.util.router/navigated
- [event]
- (let [match (deref event)
- route (get-in match [:data :name])
- props {:route (name route)
- :team-id (get-in match [:path-params :team-id])
- :file-id (get-in match [:path-params :file-id])
- :project-id (get-in match [:path-params :project-id])}]
- {:name "navigate"
- :type "action"
- :props (simplify-props props)}))
-
-(defmethod process-event-by-type :app.main.data.users/logged-in
- [event]
- (let [data (deref event)
- mdata (meta data)
- props {:signin-source (::source mdata)
- :email (:email data)
- :auth-backend (:auth-backend data)
- :fullname (:fullname data)
- :is-muted (:is-muted data)
- :default-team-id (str (:default-team-id data))
- :default-project-id (str (:default-project-id data))}]
-
- {:name "signin"
- :type "identify"
- :profile-id (:id data)
- :props (simplify-props props)}))
+ (ptk/data-event? event)
+ (process-data-event event)))
;; --- MAIN LOOP
diff --git a/frontend/src/app/main/data/fonts.cljs b/frontend/src/app/main/data/fonts.cljs
index 5c9e3837d..b7150b033 100644
--- a/frontend/src/app/main/data/fonts.cljs
+++ b/frontend/src/app/main/data/fonts.cljs
@@ -12,6 +12,7 @@
[app.common.logging :as log]
[app.common.media :as cm]
[app.common.uuid :as uuid]
+ [app.main.data.events :as ev]
[app.main.data.messages :as msg]
[app.main.fonts :as fonts]
[app.main.repo :as rp]
@@ -236,12 +237,19 @@
(defn add-font
[font]
(ptk/reify ::add-font
- IDeref
- (-deref [_] (select-keys font [:font-family :font-style :font-weight]))
-
ptk/UpdateEvent
(update [_ state]
- (update state :dashboard-fonts assoc (:id font) font))))
+ (update state :dashboard-fonts assoc (:id font) font))
+
+ ptk/WatchEvent
+ (watch [_ state _]
+ (let [team-id (:current-team-id state)]
+ (rx/of (ptk/data-event ::ev/event {::ev/name "add-font"
+ :team-id team-id
+ :font-id (:id font)
+ :font-family (:font-family font)
+ :font-style (:font-style font)
+ :font-weight (:font-weight font)}))))))
(defn update-font
[{:keys [id name] :as params}]
@@ -271,6 +279,10 @@
[font-id]
(dm/assert! (uuid? font-id))
(ptk/reify ::delete-font
+ ev/Event
+ (-data [_]
+ {:id font-id})
+
ptk/UpdateEvent
(update [_ state]
(update state :dashboard-fonts
@@ -280,8 +292,12 @@
ptk/WatchEvent
(watch [_ state _]
(let [team-id (:current-team-id state)]
- (->> (rp/cmd! :delete-font {:id font-id :team-id team-id})
- (rx/ignore))))))
+ (rx/concat
+ (->> (rp/cmd! :delete-font {:id font-id :team-id team-id})
+ (rx/ignore))
+ (rx/of (ptk/data-event ::ev/event {::ev/name "delete-font"
+ :team-id team-id
+ :font-id font-id})))))))
(defn delete-font-variant
[id]
@@ -297,8 +313,13 @@
ptk/WatchEvent
(watch [_ state _]
(let [team-id (:current-team-id state)]
- (->> (rp/cmd! :delete-font-variant {:id id :team-id team-id})
- (rx/ignore))))))
+ (rx/concat
+ (->> (rp/cmd! :delete-font-variant {:id id :team-id team-id})
+ (rx/ignore))
+ (rx/of (ptk/data-event ::ev/event {::ev/name "delete-font-variant"
+ :id id
+ :team-id team-id})))))))
+
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; Workspace related events
@@ -318,9 +339,12 @@
(swap! storage assoc ::recent-fonts most-recent-fonts)))))
(defn load-recent-fonts
- []
+ [fonts]
(ptk/reify ::load-recent-fonts
ptk/UpdateEvent
(update [_ state]
- (let [saved-recent-fonts (::recent-fonts @storage)]
+ (let [fonts-map (d/index-by :id fonts)
+ saved-recent-fonts (->> (::recent-fonts @storage)
+ (keep #(get fonts-map (:id %)))
+ (into #{}))]
(assoc-in state [:workspace-data :recent-fonts] saved-recent-fonts)))))
diff --git a/frontend/src/app/main/data/modal.cljs b/frontend/src/app/main/data/modal.cljs
index 5b5b79524..1055014c2 100644
--- a/frontend/src/app/main/data/modal.cljs
+++ b/frontend/src/app/main/data/modal.cljs
@@ -8,6 +8,7 @@
(:refer-clojure :exclude [update])
(:require
[app.common.uuid :as uuid]
+ [app.main.data.events :as ev]
[app.main.store :as st]
[cljs.core :as c]
[potok.v2.core :as ptk]))
@@ -23,9 +24,11 @@
(show (uuid/next) type props))
([id type props]
(ptk/reify ::show-modal
- IDeref
- (-deref [_]
- (merge (dissoc props :type) {:name type}))
+ ev/Event
+ (-data [_]
+ (-> props
+ (dissoc :type)
+ (assoc :name type)))
ptk/UpdateEvent
(update [_ state]
diff --git a/frontend/src/app/main/data/preview.cljs b/frontend/src/app/main/data/preview.cljs
index 519ed96d3..7510fb089 100644
--- a/frontend/src/app/main/data/preview.cljs
+++ b/frontend/src/app/main/data/preview.cljs
@@ -76,7 +76,7 @@
(let [style-code
(dm/str
fontfaces-css "\n"
- (-> (cg/generate-style-code objects style-type all-children)
+ (-> (cg/generate-style-code objects style-type [shape] all-children)
(cb/format-code style-type)))
markup-code
diff --git a/frontend/src/app/main/data/users.cljs b/frontend/src/app/main/data/users.cljs
index 64142d327..392c6e055 100644
--- a/frontend/src/app/main/data/users.cljs
+++ b/frontend/src/app/main/data/users.cljs
@@ -161,8 +161,16 @@
(rt/nav' :dashboard-projects {:team-id team-id}))))]
(ptk/reify ::logged-in
- IDeref
- (-deref [_] profile)
+ ev/Event
+ (-data [_]
+ {::ev/name "signing"
+ ::ev/type "identify"
+ :email (:email profile)
+ :auth-backend (:auth-backend profile)
+ :fullname (:fullname profile)
+ :is-muted (:is-muted profile)
+ :default-team-id (:default-team-id profile)
+ :default-project-id (:default-project-id profile)})
ptk/WatchEvent
(watch [_ _ _]
@@ -288,6 +296,9 @@
([] (logout {}))
([params]
(ptk/reify ::logout
+ ev/Event
+ (-data [_] {})
+
ptk/WatchEvent
(watch [_ _ _]
(->> (rp/cmd! :logout)
@@ -360,6 +371,10 @@
[{:keys [email] :as data}]
(dm/assert! ::us/email email)
(ptk/reify ::request-email-change
+ ev/Event
+ (-data [_]
+ {:email email})
+
ptk/WatchEvent
(watch [_ _ _]
(let [{:keys [on-error on-success]
@@ -395,6 +410,9 @@
(sm/check! schema:update-password data))
(ptk/reify ::update-password
+ ev/Event
+ (-data [_] {})
+
ptk/WatchEvent
(watch [_ _ _]
(let [{:keys [on-error on-success]
@@ -458,6 +476,9 @@
(di/blob? file))
(ptk/reify ::update-photo
+ ev/Event
+ (-data [_] {})
+
ptk/WatchEvent
(watch [_ _ _]
(let [on-success di/notify-finished-loading
diff --git a/frontend/src/app/main/data/viewer/shortcuts.cljs b/frontend/src/app/main/data/viewer/shortcuts.cljs
index 5cae65f67..f6ac67296 100644
--- a/frontend/src/app/main/data/viewer/shortcuts.cljs
+++ b/frontend/src/app/main/data/viewer/shortcuts.cljs
@@ -37,17 +37,17 @@
:fn #(st/emit! dv/toggle-zoom-style)}
:toggle-fullscreen {:tooltip (ds/shift "F")
- :command "shift+f"
+ :command ["shift+f" "alt+enter"]
:subsections [:zoom-viewer]
:fn #(st/emit! dv/toggle-fullscreen)}
- :next-frame {:tooltip ds/left-arrow
- :command ["left" "up"]
+ :prev-frame {:tooltip ds/left-arrow
+ :command ["left" "up" "shift+enter" "pageup" "shift+space"]
:subsections [:general-viewer]
:fn #(st/emit! dv/select-prev-frame)}
- :prev-frame {:tooltip ds/right-arrow
- :command ["right" "down"]
+ :next-frame {:tooltip ds/right-arrow
+ :command ["right" "down" "enter" "pagedown" "space"]
:subsections [:general-viewer]
:fn #(st/emit! dv/select-next-frame)}
diff --git a/frontend/src/app/main/data/workspace.cljs b/frontend/src/app/main/data/workspace.cljs
index 0ef0c3c7a..da8ac8eab 100644
--- a/frontend/src/app/main/data/workspace.cljs
+++ b/frontend/src/app/main/data/workspace.cljs
@@ -458,9 +458,10 @@
[{:keys [file-id]}]
(let [id (uuid/next)]
(ptk/reify ::create-page
- IDeref
- (-deref [_]
- {:id id :file-id file-id})
+ ev/Event
+ (-data [_]
+ {:id id
+ :file-id file-id})
ptk/WatchEvent
(watch [it state _]
@@ -777,7 +778,7 @@
(rx/of (dwu/start-undo-transaction undo-id)
(dch/commit-changes changes)
- (ptk/data-event :layout/update selected-ids)
+ (ptk/data-event :layout/update {:ids selected-ids})
(dwu/commit-undo-transaction undo-id))))))
;; --- Change Shape Order (D&D Ordering)
@@ -987,7 +988,7 @@
(rx/of (dwu/start-undo-transaction undo-id)
(dch/commit-changes changes)
(dwco/expand-collapse parent-id)
- (ptk/data-event :layout/update (concat all-parents ids))
+ (ptk/data-event :layout/update {:ids (concat all-parents ids)})
(dwu/commit-undo-transaction undo-id))))))
(defn relocate-selected-shapes
@@ -1105,7 +1106,7 @@
(when (can-align? selected objects)
(rx/of (dwu/start-undo-transaction undo-id)
(dwt/position-shapes moved)
- (ptk/data-event :layout/update selected)
+ (ptk/data-event :layout/update {:ids selected})
(dwu/commit-undo-transaction undo-id)))))))
(defn can-distribute? [selected]
@@ -1132,7 +1133,7 @@
(when (can-distribute? selected)
(rx/of (dwu/start-undo-transaction undo-id)
(dwt/position-shapes moved)
- (ptk/data-event :layout/update selected)
+ (ptk/data-event :layout/update {:ids selected})
(dwu/commit-undo-transaction undo-id)))))))
;; --- Shape Proportions
@@ -1967,8 +1968,13 @@
page-objects (:objects page)
+ libraries (wsh/get-libraries state)
+ ldata (wsh/get-local-file state)
+
+ full-libs (assoc-in libraries [(:id ldata) :data] ldata)
+
[parent-id
- frame-id] (ctn/find-valid-parent-and-frame-ids candidate-parent-id page-objects (vals objects))
+ frame-id] (ctn/find-valid-parent-and-frame-ids candidate-parent-id page-objects (vals objects) true full-libs)
index (if (= candidate-parent-id parent-id)
index
@@ -1978,8 +1984,7 @@
all-objects (merge page-objects objects)
- libraries (wsh/get-libraries state)
- ldata (wsh/get-file state file-id)
+
drop-cell (when (ctl/grid-layout? all-objects parent-id)
(gslg/get-drop-cell frame-id all-objects position))
@@ -2012,7 +2017,7 @@
(rx/of (dwu/start-undo-transaction undo-id)
(dch/commit-changes changes)
(dws/select-shapes selected)
- (ptk/data-event :layout/update [frame-id])
+ (ptk/data-event :layout/update {:ids [frame-id]})
(dwu/commit-undo-transaction undo-id)))))))
(defn as-content [text]
diff --git a/frontend/src/app/main/data/workspace/changes.cljs b/frontend/src/app/main/data/workspace/changes.cljs
index 061b3c550..b2d595086 100644
--- a/frontend/src/app/main/data/workspace/changes.cljs
+++ b/frontend/src/app/main/data/workspace/changes.cljs
@@ -101,7 +101,7 @@
;; Update layouts for properties marked
(if (d/not-empty? update-layout-ids)
- (rx/of (ptk/data-event :layout/update update-layout-ids))
+ (rx/of (ptk/data-event :layout/update {:ids update-layout-ids}))
(rx/empty))))))))
(defn send-update-indices
diff --git a/frontend/src/app/main/data/workspace/comments.cljs b/frontend/src/app/main/data/workspace/comments.cljs
index 3d1457d56..246034878 100644
--- a/frontend/src/app/main/data/workspace/comments.cljs
+++ b/frontend/src/app/main/data/workspace/comments.cljs
@@ -13,6 +13,7 @@
[app.common.schema :as sm]
[app.common.types.shape-tree :as ctst]
[app.main.data.comments :as dcm]
+ [app.main.data.events :as ev]
[app.main.data.workspace.changes :as dch]
[app.main.data.workspace.common :as dwco]
[app.main.data.workspace.drawing :as dwd]
@@ -118,7 +119,8 @@
(rx/take 1)
(rx/mapcat #(rx/of (center-to-comment-thread thread)
(dwd/select-for-drawing :comments)
- (dcm/open-thread thread)))))))))
+ (with-meta (dcm/open-thread thread)
+ {::ev/origin "workspace"})))))))))
(defn update-comment-thread-position
([thread [new-x new-y]]
diff --git a/frontend/src/app/main/data/workspace/drawing/box.cljs b/frontend/src/app/main/data/workspace/drawing/box.cljs
index 76a6c3ce8..a595a8c3f 100644
--- a/frontend/src/app/main/data/workspace/drawing/box.cljs
+++ b/frontend/src/app/main/data/workspace/drawing/box.cljs
@@ -78,13 +78,7 @@
(ptk/reify ::handle-drawing
ptk/WatchEvent
(watch [_ state stream]
- (let [stopper (rx/merge
- (->> stream
- (rx/filter mse/mouse-event?)
- (rx/filter mse/mouse-up-event?))
- (->> stream
- (rx/filter #(= % :interrupt))))
-
+ (let [stopper (mse/drag-stopper stream)
layout (get state :workspace-layout)
zoom (dm/get-in state [:workspace-local :zoom] 1)
diff --git a/frontend/src/app/main/data/workspace/drawing/curve.cljs b/frontend/src/app/main/data/workspace/drawing/curve.cljs
index 8a2194962..5c0d98898 100644
--- a/frontend/src/app/main/data/workspace/drawing/curve.cljs
+++ b/frontend/src/app/main/data/workspace/drawing/curve.cljs
@@ -28,11 +28,6 @@
(def simplify-tolerance 0.3)
-(defn stopper-event?
- [{:keys [type] :as event}]
- (and (mse/mouse-event? event)
- (= type :up)))
-
(defn- insert-point
[point]
(ptk/reify ::insert-point
@@ -104,13 +99,13 @@
(ptk/reify ::handle-drawing
ptk/WatchEvent
(watch [_ _ stream]
- (let [stopper (rx/filter stopper-event? stream)
- mouse (rx/sample 10 ms/mouse-position)
- shape (cts/setup-shape {:type :path
- :initialized? true
- :frame-id uuid/zero
- :parent-id uuid/zero
- :segments []})]
+ (let [stopper (mse/drag-stopper stream)
+ mouse (rx/sample 10 ms/mouse-position)
+ shape (cts/setup-shape {:type :path
+ :initialized? true
+ :frame-id uuid/zero
+ :parent-id uuid/zero
+ :segments []})]
(rx/concat
(rx/of #(update % :workspace-drawing assoc :object shape))
(->> mouse
diff --git a/frontend/src/app/main/data/workspace/groups.cljs b/frontend/src/app/main/data/workspace/groups.cljs
index a89d845cb..c3a403269 100644
--- a/frontend/src/app/main/data/workspace/groups.cljs
+++ b/frontend/src/app/main/data/workspace/groups.cljs
@@ -194,7 +194,7 @@
(prepare-create-group it objects page-id shapes "Group" false)]
(rx/of (dch/commit-changes changes)
(dws/select-shapes (d/ordered-set (:id group)))
- (ptk/data-event :layout/update parents))))))))
+ (ptk/data-event :layout/update {:ids parents}))))))))
(def ungroup-selected
(ptk/reify ::ungroup-selected
@@ -244,7 +244,7 @@
(when-not (empty? selected)
(rx/of (dwu/start-undo-transaction undo-id)
(dch/commit-changes changes)
- (ptk/data-event :layout/update parents)
+ (ptk/data-event :layout/update {:ids parents})
(dwu/commit-undo-transaction undo-id)
(dws/select-shapes child-ids)))))))
@@ -289,7 +289,7 @@
(rx/of (dwu/start-undo-transaction undo-id)
(dch/commit-changes changes)
(dws/select-shapes (d/ordered-set (:id group)))
- (ptk/data-event :layout/update [(:id group)])
+ (ptk/data-event :layout/update {:ids [(:id group)]})
(dwu/commit-undo-transaction undo-id))))))))
(def unmask-group
diff --git a/frontend/src/app/main/data/workspace/guides.cljs b/frontend/src/app/main/data/workspace/guides.cljs
index 222921010..2c7c6c2c0 100644
--- a/frontend/src/app/main/data/workspace/guides.cljs
+++ b/frontend/src/app/main/data/workspace/guides.cljs
@@ -11,23 +11,30 @@
[app.common.geom.point :as gpt]
[app.common.geom.shapes :as gsh]
[app.common.types.page :as ctp]
+ [app.main.data.events :as ev]
[app.main.data.workspace.changes :as dch]
[app.main.data.workspace.state-helpers :as wsh]
[beicon.v2.core :as rx]
[potok.v2.core :as ptk]))
-(defn make-update-guide [guide]
+(defn make-update-guide
+ [guide]
(fn [other]
(cond-> other
(= (:id other) (:id guide))
(merge guide))))
-(defn update-guides [guide]
+(defn update-guides
+ [guide]
(dm/assert!
"expected valid guide"
(ctp/check-page-guide! guide))
(ptk/reify ::update-guides
+ ev/Event
+ (-data [_]
+ (assoc guide ::ev/name "update-guide"))
+
ptk/WatchEvent
(watch [it state _]
(let [page (wsh/lookup-page state)
@@ -37,17 +44,20 @@
(pcb/update-page-option :guides assoc (:id guide) guide))]
(rx/of (dch/commit-changes changes))))))
-(defn remove-guide [guide]
+(defn remove-guide
+ [guide]
(dm/assert!
"expected valid guide"
(ctp/check-page-guide! guide))
(ptk/reify ::remove-guide
+ ev/Event
+ (-data [_] guide)
+
ptk/UpdateEvent
(update [_ state]
(let [sdisj (fnil disj #{})]
- (-> state
- (update-in [:workspace-guides :hover] sdisj (:id guide)))))
+ (update-in state [:workspace-guides :hover] sdisj (:id guide))))
ptk/WatchEvent
(watch [it state _]
diff --git a/frontend/src/app/main/data/workspace/interactions.cljs b/frontend/src/app/main/data/workspace/interactions.cljs
index 5708ca3c4..1aad31f2f 100644
--- a/frontend/src/app/main/data/workspace/interactions.cljs
+++ b/frontend/src/app/main/data/workspace/interactions.cljs
@@ -193,9 +193,7 @@
(watch [_ state stream]
(let [initial-pos @ms/mouse-position
selected (wsh/lookup-selected state)
- stopper (->> stream
- (rx/filter mse/mouse-event?)
- (rx/filter mse/mouse-up-event?))]
+ stopper (mse/drag-stopper stream)]
(when (= 1 (count selected))
(rx/concat
(->> ms/mouse-position
@@ -305,9 +303,7 @@
(watch [_ state stream]
(let [initial-pos @ms/mouse-position
selected (wsh/lookup-selected state)
- stopper (->> stream
- (rx/filter mse/mouse-event?)
- (rx/filter mse/mouse-up-event?))]
+ stopper (mse/drag-stopper stream)]
(when (= 1 (count selected))
(let [page-id (:current-page-id state)
objects (wsh/lookup-page-objects state page-id)
diff --git a/frontend/src/app/main/data/workspace/layout.cljs b/frontend/src/app/main/data/workspace/layout.cljs
index 24cfc6779..1c7582a59 100644
--- a/frontend/src/app/main/data/workspace/layout.cljs
+++ b/frontend/src/app/main/data/workspace/layout.cljs
@@ -23,12 +23,12 @@
:colorpalette
:element-options
:rulers
- :display-grid
- :snap-grid
+ :display-guides
+ :snap-guides
:scale-text
:dynamic-alignment
:display-artboard-names
- :snap-guides
+ :snap-ruler-guides
:show-pixel-grid
:snap-pixel-grid})
@@ -53,11 +53,11 @@
:layers
:element-options
:rulers
- :display-grid
- :snap-grid
+ :display-guides
+ :snap-guides
:dynamic-alignment
:display-artboard-names
- :snap-guides
+ :snap-ruler-guides
:show-pixel-grid
:snap-pixel-grid})
@@ -82,13 +82,14 @@
(defn toggle-layout-flag
[flag & {:keys [force?] :as opts}]
(ptk/reify ::toggle-layout-flag
- IDeref
- (-deref [_] {:name flag})
+ ev/Event
+ (-data [_] {:name flag})
ptk/UpdateEvent
(update [_ state]
(update state :workspace-layout
(fn [flags]
+ (prn flags)
(if force?
(conj flags flag)
(if (contains? flags flag)
diff --git a/frontend/src/app/main/data/workspace/libraries.cljs b/frontend/src/app/main/data/workspace/libraries.cljs
index c24d1d469..2f0961b78 100644
--- a/frontend/src/app/main/data/workspace/libraries.cljs
+++ b/frontend/src/app/main/data/workspace/libraries.cljs
@@ -108,8 +108,8 @@
(uc/gradient-type->string (get-in color [:gradient :type])))))]
(dm/assert! ::ctc/color color)
(ptk/reify ::add-color
- IDeref
- (-deref [_] color)
+ ev/Event
+ (-data [_] color)
ptk/WatchEvent
(watch [it _ _]
@@ -185,6 +185,9 @@
[{:keys [id] :as params}]
(dm/assert! (uuid? id))
(ptk/reify ::delete-color
+ ev/Event
+ (-data [_] {:id id})
+
ptk/WatchEvent
(watch [it state _]
(let [data (get state :workspace-data)
@@ -200,6 +203,9 @@
(ctf/check-media-object! media))
(ptk/reify ::add-media
+ ev/Event
+ (-data [_] media)
+
ptk/WatchEvent
(watch [it _ _]
(let [obj (select-keys media [:id :name :width :height :mtype])
@@ -230,6 +236,9 @@
[{:keys [id] :as params}]
(dm/assert! (uuid? id))
(ptk/reify ::delete-media
+ ev/Event
+ (-data [_] {:id id})
+
ptk/WatchEvent
(watch [it state _]
(let [data (get state :workspace-data)
@@ -247,8 +256,8 @@
(ctt/check-typography! typography))
(ptk/reify ::add-typography
- IDeref
- (-deref [_] typography)
+ ev/Event
+ (-data [_] typography)
ptk/WatchEvent
(watch [it _ _]
@@ -291,6 +300,9 @@
(dm/assert! (uuid? id))
(dm/assert! (string? new-name))
(ptk/reify ::rename-typography
+ ev/Event
+ (-data [_] {:id id :name new-name})
+
ptk/WatchEvent
(watch [it state _]
(when (and (some? new-name) (not= "" new-name))
@@ -304,6 +316,9 @@
[id]
(dm/assert! (uuid? id))
(ptk/reify ::delete-typography
+ ev/Event
+ (-data [_] {:id id})
+
ptk/WatchEvent
(watch [it state _]
(let [data (get state :workspace-data)
@@ -316,8 +331,10 @@
"This is the second step of the component creation."
[selected components-v2]
(ptk/reify ::add-component2
- IDeref
- (-deref [_] {:num-shapes (count selected)})
+ ev/Event
+ (-data [_]
+ {::ev/name "add-component"
+ :shapes (count selected)})
ptk/WatchEvent
(watch [it state _]
@@ -334,7 +351,7 @@
(when-not (empty? (:redo-changes changes))
(rx/of (dch/commit-changes changes)
(dws/select-shapes (d/ordered-set (:id root)))
- (ptk/data-event :layout/update parents)))))))))
+ (ptk/data-event :layout/update {:ids parents})))))))))
(defn add-component
"Add a new component to current file library, from the currently selected shapes.
@@ -369,9 +386,10 @@
selected-objects (map #(get objects %) selected)
;; We don't want to change the structure of component copies
can-make-component (every? true? (map #(ctn/valid-shape-for-component? objects %) selected-objects))
- added-components (map
- #(add-component2 [%] components-v2)
- selected)
+ added-components (map (fn [id]
+ (with-meta (add-component2 [id] components-v2)
+ {:multiple true}))
+ selected)
undo-id (js/Symbol)]
(when can-make-component
(rx/concat
@@ -566,7 +584,7 @@
undo-id (js/Symbol)]
(rx/of (dwu/start-undo-transaction undo-id)
(dch/commit-changes changes)
- (ptk/data-event :layout/update [(:id new-shape)])
+ (ptk/data-event :layout/update {:ids [(:id new-shape)]})
(dws/select-shapes (d/ordered-set (:id new-shape)))
(when start-move?
(dwtr/start-move initial-point #{(:id new-shape)}))
@@ -699,6 +717,7 @@
(watch [it state _]
(log/info :msg "RESET-COMPONENT of shape" :id (str id))
(let [file (wsh/get-local-file state)
+ file-full (wsh/get-local-file-full state)
libraries (wsh/get-libraries state)
page-id (:current-page-id state)
@@ -707,11 +726,18 @@
components-v2
(features/active-feature? state "components/v2")
+ shape-inst (ctn/get-shape container id)
+ swap-slot (-> (ctn/get-shape container id)
+ (ctk/get-swap-slot))
changes
(-> (pcb/empty-changes it)
(pcb/with-container container)
(pcb/with-objects (:objects container))
- (dwlh/generate-sync-shape-direct libraries container id true components-v2))]
+ (dwlh/generate-sync-shape-direct file-full libraries container id true components-v2)
+ (cond->
+ (some? swap-slot)
+ ;; We need to propagate parent changes
+ (dwlh/generate-sync-shape-direct file-full libraries container (:parent-id shape-inst) true components-v2)))]
(log/debug :msg "RESET-COMPONENT finished" :js/rchanges (log-changes
(:redo-changes changes)
@@ -750,6 +776,7 @@
(log/info :msg "UPDATE-COMPONENT of shape" :id (str id) :undo-group undo-group)
(let [page-id (get state :current-page-id)
local-file (wsh/get-local-file state)
+ full-file (wsh/get-local-file-full state)
container (cfh/get-container local-file :page page-id)
shape (ctn/get-shape container id)
components-v2 (features/active-feature? state "components/v2")]
@@ -761,7 +788,7 @@
(-> (pcb/empty-changes it)
(pcb/set-undo-group undo-group)
(pcb/with-container container)
- (dwlh/generate-sync-shape-inverse libraries container id components-v2))
+ (dwlh/generate-sync-shape-inverse full-file libraries container id components-v2))
file-id (:component-file shape)
file (wsh/get-file state file-id)
@@ -870,16 +897,12 @@
0)))))
(defn- add-component-for-swap
- [shape file-id id-new-component index target-cell keep-props-values {:keys [undo-group]}]
+ [shape file page libraries id-new-component index target-cell keep-props-values {:keys [undo-group]}]
(dm/assert! (uuid? id-new-component))
- (dm/assert! (uuid? file-id))
(ptk/reify ::add-component-for-swap
ptk/WatchEvent
- (watch [it state _]
- (let [page (wsh/lookup-page state)
- libraries (wsh/get-libraries state)
-
- objects (:objects page)
+ (watch [it _ _]
+ (let [objects (:objects page)
position (gpt/point (:x shape) (:y shape))
changes (-> (pcb/empty-changes it (:id page))
(pcb/set-undo-group undo-group)
@@ -889,14 +912,24 @@
[new-shape changes]
(dwlh/generate-instantiate-component changes
objects
- file-id
+ (:id file)
id-new-component
position
page
libraries
nil
(:parent-id shape)
- (:frame-id shape))
+ (:frame-id shape)
+ {:force-frame? true})
+
+ new-shape (cond-> new-shape
+ (nil? (ctk/get-swap-slot new-shape))
+ (update :touched cfh/set-touched-group (-> (ctf/find-swap-slot shape
+ page
+ {:id (:id file)
+ :data file}
+ libraries)
+ (ctk/build-swap-slot-group))))
changes
(-> changes
@@ -905,7 +938,11 @@
;; We need to set the same index as the original shape
(pcb/change-parent (:parent-id shape) [new-shape] index {:component-swap true
- :ignore-touched true}))]
+ :ignore-touched true})
+ (dwlh/change-touched new-shape
+ shape
+ (ctn/make-container page :page)
+ {}))]
;; First delete so we don't break the grid layout cells
(rx/of (dch/commit-changes changes)
@@ -921,7 +958,10 @@
(watch [_ state _]
;; First delete shapes so we have space in the layout otherwise we can have problems
;; in the grid creating new rows/columns to make space
- (let [objects (wsh/lookup-page-objects state)
+ (let [file (wsh/get-file state file-id)
+ libraries (wsh/get-libraries state)
+ page (wsh/lookup-page state)
+ objects (wsh/lookup-page-objects state)
parent (get objects (:parent-id shape))
;; If the target parent is a grid layout we need to pass the target cell
@@ -935,15 +975,14 @@
undo-id (js/Symbol)
undo-group (uuid/next)]
-
(rx/of
(dwu/start-undo-transaction undo-id)
(dwsh/delete-shapes nil (d/ordered-set (:id shape)) {:component-swap true
:undo-id undo-id
:undo-group undo-group})
- (add-component-for-swap shape file-id id-new-component index target-cell keep-props-values
+ (add-component-for-swap shape file page libraries id-new-component index target-cell keep-props-values
{:undo-group undo-group})
- (ptk/data-event :layout/update [(:parent-id shape)])
+ (ptk/data-event :layout/update {:ids [(:parent-id shape)] :undo-group undo-group})
(dwu/commit-undo-transaction undo-id))))))
(defn component-multi-swap
@@ -958,8 +997,12 @@
{::ev/name "component-swap"})
ptk/WatchEvent
- (watch [_ _ _]
+ (watch [_ state _]
(let [undo-id (js/Symbol)]
+ (log/info :msg "COMPONENT-SWAP"
+ :file (dwlh/pretty-file file-id state)
+ :id-new-component id-new-component
+ :undo-id undo-id)
(rx/concat
(rx/of (dwu/start-undo-transaction undo-id))
(rx/map #(component-swap % file-id id-new-component) (rx/from shapes))
@@ -1065,7 +1108,7 @@
:file-id file-id))))
(when-not (empty? updated-frames)
(rx/merge
- (rx/of (ptk/data-event :layout/update (map :id updated-frames)))
+ (rx/of (ptk/data-event :layout/update {:ids (map :id updated-frames) :undo-group undo-group}))
(->> (rx/from updated-frames)
(rx/mapcat
(fn [shape]
@@ -1242,9 +1285,11 @@
[id is-shared]
{:pre [(uuid? id) (boolean? is-shared)]}
(ptk/reify ::set-file-shared
- IDeref
- (-deref [_]
- {::ev/origin "workspace" :id id :shared is-shared})
+ ev/Event
+ (-data [_]
+ {::ev/origin "workspace"
+ :id id
+ :shared is-shared})
ptk/UpdateEvent
(update [_ state]
@@ -1278,6 +1323,12 @@
(defn link-file-to-library
[file-id library-id]
(ptk/reify ::attach-library
+ ev/Event
+ (-data [_]
+ {::ev/name "attach-library"
+ :file-id file-id
+ :library-id library-id})
+
;; NOTE: this event implements UpdateEvent protocol for perform an
;; optimistic update state for make the UI feel more responsive.
ptk/UpdateEvent
@@ -1307,6 +1358,12 @@
(defn unlink-file-from-library
[file-id library-id]
(ptk/reify ::detach-library
+ ev/Event
+ (-data [_]
+ {::ev/name "detach-library"
+ :file-id file-id
+ :library-id library-id})
+
ptk/UpdateEvent
(update [_ state]
(d/dissoc-in state [:workspace-libraries library-id]))
diff --git a/frontend/src/app/main/data/workspace/libraries_helpers.cljs b/frontend/src/app/main/data/workspace/libraries_helpers.cljs
index 322345efa..b3aa937db 100644
--- a/frontend/src/app/main/data/workspace/libraries_helpers.cljs
+++ b/frontend/src/app/main/data/workspace/libraries_helpers.cljs
@@ -152,9 +152,11 @@
(defn generate-instantiate-component
"Generate changes to create a new instance from a component."
([changes objects file-id component-id position page libraries]
- (generate-instantiate-component changes objects file-id component-id position page libraries nil nil nil))
+ (generate-instantiate-component changes objects file-id component-id position page libraries nil nil nil {}))
- ([changes objects file-id component-id position page libraries old-id parent-id frame-id]
+ ([changes objects file-id component-id position page libraries old-id parent-id frame-id
+ {:keys [force-frame?]
+ :or {force-frame? false}}]
(let [component (ctf/get-component libraries file-id component-id)
parent (when parent-id (get objects parent-id))
library (get libraries file-id)
@@ -166,7 +168,9 @@
component
(:data library)
position
- components-v2)
+ components-v2
+ (cond-> {}
+ force-frame? (assoc :force-frame-id frame-id)))
first-shape (cond-> (first new-shapes)
(not (nil? parent-id))
@@ -263,9 +267,6 @@
parent (get-in page [:objects parent-id])
main-inst (get-in component [:objects (:main-instance-id component)])
inside-component? (some? (ctn/get-instance-root (:objects page) parent))
- origin-frame (get-in page [:objects (:frame-id main-inst)])
- ;; We are using a deleted component andit's coordenates are absolute, we must adjust them to its containing frame to adjust the delta
- delta (gpt/subtract delta (-> origin-frame :selrect gpt/point))
shapes (cfh/get-children-with-self (:objects component) (:main-instance-id component))
shapes (map #(gsh/move % delta) shapes)
@@ -320,16 +321,17 @@
(loop [containers (ctf/object-containers-seq file)
changes (pcb/empty-changes it)]
(if-let [container (first containers)]
- (recur (next containers)
- (pcb/concat-changes
- changes
- (generate-sync-container it
- asset-type
- asset-id
- library-id
- state
- container
- components-v2)))
+ (do
+ (recur (next containers)
+ (pcb/concat-changes
+ changes
+ (generate-sync-container it
+ asset-type
+ asset-id
+ library-id
+ state
+ container
+ components-v2))))
changes))))
(defn generate-sync-library
@@ -424,8 +426,9 @@
(defmethod generate-sync-shape :components
[_ changes _library-id state container shape components-v2]
(let [shape-id (:id shape)
+ file (wsh/get-local-file-full state)
libraries (wsh/get-libraries state)]
- (generate-sync-shape-direct changes libraries container shape-id false components-v2)))
+ (generate-sync-shape-direct changes file libraries container shape-id false components-v2)))
(defmethod generate-sync-shape :colors
[_ changes library-id state _ shape _]
@@ -462,21 +465,35 @@
[changes shape container update-node]
(let [old-content (:content shape)
new-content (txt/transform-nodes update-node old-content)
+
+ redo-change
+ (make-change
+ container
+ {:type :mod-obj
+ :id (:id shape)
+ :operations [{:type :set
+ :attr :content
+ :val new-content}
+ {:type :set
+ :attr :position-data
+ :val nil}]})
+
+ undo-change
+ (make-change
+ container
+ {:type :mod-obj
+ :id (:id shape)
+ :operations [{:type :set
+ :attr :content
+ :val old-content}
+ {:type :set
+ :attr :position-data
+ :val nil}]})
+
changes' (-> changes
- (update :redo-changes conj (make-change
- container
- {:type :mod-obj
- :id (:id shape)
- :operations [{:type :set
- :attr :content
- :val new-content}]}))
- (update :undo-changes conj (make-change
- container
- {:type :mod-obj
- :id (:id shape)
- :operations [{:type :set
- :attr :content
- :val old-content}]})))]
+ (update :redo-changes conj redo-change)
+ (update :undo-changes conj undo-change))]
+
(if (= new-content old-content)
changes
changes')))
@@ -593,8 +610,8 @@
(defn generate-sync-shape-direct
"Generate changes to synchronize one shape that is the root of a component
instance, and all its children, from the given component."
- [changes libraries container shape-id reset? components-v2]
- (log/debug :msg "Sync shape direct" :shape (str shape-id) :reset? reset?)
+ [changes file libraries container shape-id reset? components-v2]
+ (log/debug :msg "Sync shape direct" :shape-inst (str shape-id) :reset? reset?)
(let [shape-inst (ctn/get-shape container shape-id)
library (dm/get-in libraries [(:component-file shape-inst) :data])
component (ctkl/get-component library (:component-id shape-inst) true)]
@@ -605,7 +622,7 @@
shape-main (when component
(if (and reset? components-v2)
;; the reset is against the ref-shape, not against the original shape of the component
- (ctf/find-ref-shape nil container libraries shape-inst {:include-deleted? true})
+ (ctf/find-ref-shape file container libraries shape-inst)
(ctf/get-ref-shape library component shape-inst)))
shape-inst (if (and reset? components-v2)
@@ -623,6 +640,8 @@
shape-inst
component
library
+ file
+ libraries
shape-main
root-inst
root-main
@@ -655,9 +674,9 @@
nil))))))
(defn- generate-sync-shape-direct-recursive
- [changes container shape-inst component library shape-main root-inst root-main reset? initial-root? redirect-shaperef components-v2]
+ [changes container shape-inst component library file libraries shape-main root-inst root-main reset? initial-root? redirect-shaperef components-v2]
(log/debug :msg "Sync shape direct recursive"
- :shape (str (:name shape-inst))
+ :shape-inst (str (:name shape-inst) " " (pretty-uuid (:id shape-inst)))
:component (:name component))
(if (nil? shape-main)
@@ -714,6 +733,8 @@
(map #(redirect-shaperef %) children-inst) children-inst)
only-inst (fn [changes child-inst]
+ (log/trace :msg "Only inst"
+ :child-inst (str (:name child-inst) " " (pretty-uuid (:id child-inst))))
(if-not (and omit-touched?
(contains? (:touched shape-inst)
:shapes-group))
@@ -724,6 +745,8 @@
changes))
only-main (fn [changes child-main]
+ (log/trace :msg "Only main"
+ :child-main (str (:name child-main) " " (pretty-uuid (:id child-main))))
(if-not (and omit-touched?
(contains? (:touched shape-inst)
:shapes-group))
@@ -740,11 +763,16 @@
changes))
both (fn [changes child-inst child-main]
+ (log/trace :msg "Both"
+ :child-inst (str (:name child-inst) " " (pretty-uuid (:id child-inst)))
+ :child-main (str (:name child-main) " " (pretty-uuid (:id child-main))))
(generate-sync-shape-direct-recursive changes
container
child-inst
component
library
+ file
+ libraries
child-main
root-inst
root-main
@@ -753,7 +781,17 @@
redirect-shaperef
components-v2))
+ swapped (fn [changes child-inst child-main]
+ (log/trace :msg "Match slot"
+ :child-inst (str (:name child-inst) " " (pretty-uuid (:id child-inst)))
+ :child-main (str (:name child-main) " " (pretty-uuid (:id child-main))))
+ ;; For now we don't make any sync here.
+ changes)
+
moved (fn [changes child-inst child-main]
+ (log/trace :msg "Move"
+ :child-inst (str (:name child-inst) " " (pretty-uuid (:id child-inst)))
+ :child-main (str (:name child-main) " " (pretty-uuid (:id child-main))))
(move-shape
changes
child-inst
@@ -765,11 +803,17 @@
(compare-children changes
children-inst
children-main
+ container
+ component-container
+ file
+ libraries
only-inst
only-main
both
+ swapped
moved
- false))))
+ false
+ reset?))))
(defn- generate-rename-component
@@ -793,7 +837,7 @@
(defn generate-sync-shape-inverse
"Generate changes to update the component a shape is linked to, from
the values in the shape and all its children."
- [changes libraries container shape-id components-v2]
+ [changes file libraries container shape-id components-v2]
(log/debug :msg "Sync shape inverse" :shape (str shape-id))
(let [redirect-shaperef (partial redirect-shaperef container libraries)
shape-inst (ctn/get-shape container shape-id)
@@ -824,6 +868,8 @@
shape-inst
component
library
+ file
+ libraries
shape-main
root-inst
root-main
@@ -833,7 +879,7 @@
changes)))
(defn- generate-sync-shape-inverse-recursive
- [changes container shape-inst component library shape-main root-inst root-main initial-root? redirect-shaperef components-v2]
+ [changes container shape-inst component library file libraries shape-main root-inst root-main initial-root? redirect-shaperef components-v2]
(log/trace :msg "Sync shape inverse recursive"
:shape (str (:name shape-inst))
:component (:name component))
@@ -916,6 +962,8 @@
child-inst
component
library
+ file
+ libraries
child-main
root-inst
root-main
@@ -923,6 +971,13 @@
redirect-shaperef
components-v2))
+ swapped (fn [changes child-inst child-main]
+ (log/trace :msg "Match slot"
+ :child-inst (str (:name child-inst) " " (pretty-uuid (:id child-inst)))
+ :child-main (str (:name child-main) " " (pretty-uuid (:id child-main))))
+ ;; For now we don't make any sync here.
+ changes)
+
moved (fn [changes child-inst child-main]
(move-shape
changes
@@ -936,10 +991,16 @@
(compare-children changes
children-inst
children-main
+ container
+ component-container
+ file
+ libraries
only-inst
only-main
both
+ swapped
moved
+ true
true)
;; The inverse sync may be made on a component that is inside a
@@ -958,12 +1019,15 @@
;; ---- Operation generation helpers ----
(defn- compare-children
- [changes children-inst children-main only-inst-cb only-main-cb both-cb moved-cb inverse?]
+ [changes children-inst children-main container-inst container-main file libraries only-inst-cb only-main-cb both-cb swapped-cb moved-cb inverse? reset?]
+ (log/trace :msg "Compare children")
(loop [children-inst (seq (or children-inst []))
children-main (seq (or children-main []))
changes changes]
(let [child-inst (first children-inst)
child-main (first children-main)]
+ (log/trace :main (str (:name child-main) " " (pretty-uuid (:id child-main)))
+ :inst (str (:name child-inst) " " (pretty-uuid (:id child-inst))))
(cond
(and (nil? child-inst) (nil? child-main))
changes
@@ -975,13 +1039,20 @@
(reduce only-inst-cb changes children-inst)
:else
- (if (ctk/is-main-of? child-main child-inst)
+ (if (or (ctk/is-main-of? child-main child-inst)
+ (and (ctf/match-swap-slot? child-main child-inst container-inst container-main file libraries) (not reset?)))
(recur (next children-inst)
(next children-main)
- (both-cb changes child-inst child-main))
+ (if (ctk/is-main-of? child-main child-inst)
+ (both-cb changes child-inst child-main)
+ (swapped-cb changes child-inst child-main)))
- (let [child-inst' (d/seek #(ctk/is-main-of? child-main %) children-inst)
- child-main' (d/seek #(ctk/is-main-of? % child-inst) children-main)]
+ (let [child-inst' (d/seek #(or (ctk/is-main-of? child-main %)
+ (and (ctf/match-swap-slot? child-main % container-inst container-main file libraries) (not reset?)))
+ children-inst)
+ child-main' (d/seek #(or (ctk/is-main-of? % child-inst)
+ (and (ctf/match-swap-slot? % child-inst container-inst container-main file libraries) (not reset?)))
+ children-main)]
(cond
(nil? child-inst')
(recur children-inst
@@ -995,16 +1066,26 @@
:else
(if inverse?
- (recur (next children-inst)
- (remove #(= (:id %) (:id child-main')) children-main)
- (-> changes
+ (let [is-main? (ctk/is-main-of? child-inst child-main')]
+ (recur (next children-inst)
+ (remove #(= (:id %) (:id child-main')) children-main)
+ (cond-> changes
+ is-main?
(both-cb child-inst child-main')
- (moved-cb child-inst child-main')))
- (recur (remove #(= (:id %) (:id child-inst')) children-inst)
- (next children-main)
- (-> changes
+ (not is-main?)
+ (swapped-cb child-inst child-main')
+ :always
+ (moved-cb child-inst child-main'))))
+ (let [is-main? (ctk/is-main-of? child-inst' child-main)]
+ (recur (remove #(= (:id %) (:id child-inst')) children-inst)
+ (next children-main)
+ (cond-> changes
+ is-main?
(both-cb child-inst' child-main)
- (moved-cb child-inst' child-main)))))))))))
+ (not is-main?)
+ (swapped-cb child-inst' child-main)
+ :always
+ (moved-cb child-inst' child-main))))))))))))
(defn- add-shape-to-instance
[changes component-shape index component-page container root-instance root-main omit-touched? set-remote-synced?]
@@ -1034,7 +1115,8 @@
(assoc :remote-synced true)
:always
- (assoc :shape-ref (:id original-shape)))))
+ (-> (assoc :shape-ref (:id original-shape))
+ (dissoc :touched))))) ; New shape, by definition, is synced to the main shape
update-original-shape (fn [original-shape _new-shape]
original-shape)
@@ -1271,11 +1353,10 @@
changes
changes')))
-(defn- change-touched
+(defn change-touched
[changes dest-shape origin-shape container
{:keys [reset-touched? copy-touched?] :as options}]
- (if (or (nil? (:shape-ref dest-shape))
- (not (or reset-touched? copy-touched?)))
+ (if (nil? (:shape-ref dest-shape))
changes
(do
(log/info :msg (str "CHANGE-TOUCHED "
@@ -1288,12 +1369,16 @@
(let [new-touched (cond
reset-touched?
nil
+
copy-touched?
(if (:remote-synced origin-shape)
nil
(set/union
(:touched dest-shape)
- (:touched origin-shape))))]
+ (:touched origin-shape)))
+
+ :else
+ (:touched dest-shape))]
(-> changes
(update :redo-changes conj (make-change
@@ -1438,11 +1523,26 @@
(defn- update-flex-child-copy-attrs
"Synchronizes the attributes inside the flex-child items (main->copy)"
- [changes _shape-main shape-copy main-container main-component copy-container omit-touched?]
+ [changes shape-main shape-copy main-container main-component copy-container omit-touched?]
+
(let [new-changes
(-> (pcb/empty-changes)
(pcb/with-container copy-container)
(pcb/with-objects (:objects copy-container))
+
+ ;; The layout-item-sizing needs to be update when the parent is auto or fix
+ (pcb/update-shapes
+ [(:id shape-copy)]
+ (fn [shape-copy]
+ (cond-> shape-copy
+ (contains? #{:auto :fix} (:layout-item-h-sizing shape-main))
+ (propagate-attrs shape-main #{:layout-item-h-sizing} omit-touched?)
+
+ (contains? #{:auto :fix} (:layout-item-h-sizing shape-main))
+ (propagate-attrs shape-main #{:layout-item-v-sizing} omit-touched?)))
+ {:ignore-touched true})
+
+ ;; Update the child flex properties from the parent
(pcb/update-shapes
(:shapes shape-copy)
(fn [child-copy]
@@ -1459,6 +1559,20 @@
(-> (pcb/empty-changes)
(pcb/with-page main-container)
(pcb/with-objects (:objects main-container))
+
+ ;; The layout-item-sizing needs to be update when the parent is auto or fix
+ (pcb/update-shapes
+ [(:id shape-main)]
+ (fn [shape-main]
+ (cond-> shape-main
+ (contains? #{:auto :fix} (:layout-item-h-sizing shape-copy))
+ (propagate-attrs shape-copy #{:layout-item-h-sizing} omit-touched?)
+
+ (contains? #{:auto :fix} (:layout-item-h-sizing shape-copy))
+ (propagate-attrs shape-copy #{:layout-item-v-sizing} omit-touched?)))
+ {:ignore-touched true})
+
+ ;; Updates the children properties from the parent
(pcb/update-shapes
(:shapes shape-main)
(fn [child-main]
@@ -1537,4 +1651,3 @@
(if (cfh/page? container)
(assoc change :page-id (:id container))
(assoc change :component-id (:id container))))
-
diff --git a/frontend/src/app/main/data/workspace/modifiers.cljs b/frontend/src/app/main/data/workspace/modifiers.cljs
index d27b980f6..b552bee67 100644
--- a/frontend/src/app/main/data/workspace/modifiers.cljs
+++ b/frontend/src/app/main/data/workspace/modifiers.cljs
@@ -18,6 +18,7 @@
[app.common.types.component :as ctk]
[app.common.types.container :as ctn]
[app.common.types.modifiers :as ctm]
+ [app.common.types.shape-tree :as ctst]
[app.common.types.shape.attrs :refer [editable-attrs]]
[app.common.types.shape.layout :as ctl]
[app.common.uuid :as uuid]
@@ -193,13 +194,16 @@
(update :shapes #(d/removev ids %))
(ctl/assign-cells objects))
- ids (->> ids (remove #(ctl/position-absolute? objects %)))
+ ids (->> ids
+ (remove #(ctl/position-absolute? objects %))
+ (ctst/sort-z-index objects)
+ reverse)
+
frame (-> frame
(update :shapes d/concat-vec ids)
(cond-> (some? cell)
(ctl/push-into-cell ids row column))
(ctl/assign-cells objects))]
-
(-> modifiers
(ctm/change-property :layout-grid-rows (:layout-grid-rows frame))
(ctm/change-property :layout-grid-columns (:layout-grid-columns frame))
@@ -454,7 +458,7 @@
([]
(apply-modifiers nil))
- ([{:keys [modifiers undo-transation? stack-undo? ignore-constraints ignore-snap-pixel]
+ ([{:keys [modifiers undo-transation? stack-undo? ignore-constraints ignore-snap-pixel undo-group]
:or {undo-transation? true stack-undo? false ignore-constraints false ignore-snap-pixel false}}]
(ptk/reify ::apply-modifiers
ptk/WatchEvent
@@ -504,6 +508,7 @@
{:reg-objects? true
:stack-undo? stack-undo?
:ignore-tree ignore-tree
+ :undo-group undo-group
;; Attributes that can change in the transform. This way we don't have to check
;; all the attributes
:attrs [:selrect
diff --git a/frontend/src/app/main/data/workspace/path/drawing.cljs b/frontend/src/app/main/data/workspace/path/drawing.cljs
index af492bc0f..f536f3369 100644
--- a/frontend/src/app/main/data/workspace/path/drawing.cljs
+++ b/frontend/src/app/main/data/workspace/path/drawing.cljs
@@ -139,9 +139,7 @@
(rx/map #(drag-handler position idx prefix %))
(rx/take-until
(rx/merge
- (->> stream
- (rx/filter mse/mouse-event?)
- (rx/filter mse/mouse-up-event?))
+ (mse/drag-stopper stream)
(->> stream
(rx/filter helpers/end-path-event?)))))]
@@ -166,9 +164,7 @@
ptk/WatchEvent
(watch [_ state stream]
(let [stopper (rx/merge
- (->> stream
- (rx/filter mse/mouse-event?)
- (rx/filter mse/mouse-up-event?))
+ (mse/drag-stopper stream)
(->> stream
(rx/filter helpers/end-path-event?)))
@@ -197,9 +193,7 @@
(gpt/point? down-event))
(let [stopper (rx/merge
- (->> stream
- (rx/filter mse/mouse-event?)
- (rx/filter mse/mouse-up-event?))
+ (mse/drag-stopper stream)
(->> stream
(rx/filter helpers/end-path-event?)))
diff --git a/frontend/src/app/main/data/workspace/path/edition.cljs b/frontend/src/app/main/data/workspace/path/edition.cljs
index a10b24b03..164e37acb 100644
--- a/frontend/src/app/main/data/workspace/path/edition.cljs
+++ b/frontend/src/app/main/data/workspace/path/edition.cljs
@@ -150,9 +150,7 @@
(ptk/reify ::drag-selected-points
ptk/WatchEvent
(watch [_ state stream]
- (let [stopper (->> stream
- (rx/filter mse/mouse-event?)
- (rx/filter mse/mouse-up-event?))
+ (let [stopper (mse/drag-stopper stream)
id (dm/get-in state [:workspace-local :edition])
@@ -279,9 +277,7 @@
(not alt?)))))
(rx/take-until
(rx/merge
- (->> stream
- (rx/filter mse/mouse-event?)
- (rx/filter mse/mouse-up-event?))
+ (mse/drag-stopper stream)
(->> stream
(rx/filter streams/finish-edition?)))))
@@ -332,7 +328,7 @@
ptk/WatchEvent
(watch [_ _ _]
- (rx/of (ptk/data-event :layout/update [id])))))
+ (rx/of (ptk/data-event :layout/update {:ids [id]})))))
(defn split-segments
[{:keys [from-p to-p t]}]
diff --git a/frontend/src/app/main/data/workspace/path/selection.cljs b/frontend/src/app/main/data/workspace/path/selection.cljs
index 028a6ec3b..b2256b3c9 100644
--- a/frontend/src/app/main/data/workspace/path/selection.cljs
+++ b/frontend/src/app/main/data/workspace/path/selection.cljs
@@ -10,7 +10,6 @@
[app.common.geom.point :as gpt]
[app.common.geom.rect :as grc]
[app.common.geom.shapes :as gsh]
- [app.main.data.workspace.common :as dwc]
[app.main.data.workspace.path.state :as st]
[app.main.streams :as ms]
[app.util.mouse :as mse]
@@ -119,15 +118,9 @@
(ptk/reify ::handle-area-selection
ptk/WatchEvent
(watch [_ state stream]
- (let [zoom (get-in state [:workspace-local :zoom] 1)
- stopper (rx/merge
- (->> stream
- (rx/filter mse/mouse-event?)
- (rx/filter mse/mouse-up-event?))
- (->> stream
- (rx/filter dwc/interrupt?)))
-
- from-p @ms/mouse-position]
+ (let [zoom (get-in state [:workspace-local :zoom] 1)
+ stopper (mse/drag-stopper stream)
+ from-p @ms/mouse-position]
(rx/concat
(->> ms/mouse-position
(rx/map #(grc/points->rect [from-p %]))
diff --git a/frontend/src/app/main/data/workspace/path/streams.cljs b/frontend/src/app/main/data/workspace/path/streams.cljs
index 9f55e92a0..38d0efd50 100644
--- a/frontend/src/app/main/data/workspace/path/streams.cljs
+++ b/frontend/src/app/main/data/workspace/path/streams.cljs
@@ -53,9 +53,7 @@
start (-> @ms/mouse-position to-pixel-snap)
stopper (rx/merge
- (->> st/stream
- (rx/filter mse/mouse-event?)
- (rx/filter mse/mouse-up-event?))
+ (mse/drag-stopper st/stream)
(->> st/stream
(rx/filter finish-edition?)))
diff --git a/frontend/src/app/main/data/workspace/selection.cljs b/frontend/src/app/main/data/workspace/selection.cljs
index 89904f836..5fa17a631 100644
--- a/frontend/src/app/main/data/workspace/selection.cljs
+++ b/frontend/src/app/main/data/workspace/selection.cljs
@@ -24,9 +24,11 @@
[app.common.types.shape.interactions :as ctsi]
[app.common.types.shape.layout :as ctl]
[app.common.uuid :as uuid]
+ [app.main.data.events :as ev]
[app.main.data.modal :as md]
[app.main.data.workspace.changes :as dch]
[app.main.data.workspace.collapse :as dwc]
+ [app.main.data.workspace.edition :as dwe]
[app.main.data.workspace.libraries-helpers :as dwlh]
[app.main.data.workspace.specialized-panel :as-alias dwsp]
[app.main.data.workspace.state-helpers :as wsh]
@@ -63,14 +65,8 @@
(ptk/reify ::handle-area-selection
ptk/WatchEvent
(watch [_ state stream]
- (let [zoom (dm/get-in state [:workspace-local :zoom] 1)
- stopper (rx/merge
- (->> stream
- (rx/filter mse/mouse-event?)
- (rx/filter mse/mouse-up-event?))
- (->> stream
- (rx/filter interrupt?)))
-
+ (let [zoom (dm/get-in state [:workspace-local :zoom] 1)
+ stopper (mse/drag-stopper stream)
init-position @ms/mouse-position
init-selrect (grc/make-rect
@@ -155,7 +151,7 @@
objects (wsh/lookup-page-objects state page-id)]
(rx/of
(dwc/expand-all-parents [id] objects)
- :interrupt
+ (dwe/clear-edition-mode)
::dwsp/interrupt))))))
(defn select-prev-shape
@@ -433,6 +429,10 @@
main-component (ctf/get-component libraries file-id component-id)
moved-component (gsh/move component-root delta)
pos (gpt/point (:x moved-component) (:y moved-component))
+ origin-frame (get-in page [:objects frame-id])
+ delta (cond-> delta
+ (some? origin-frame)
+ (gpt/subtract (-> origin-frame :selrect gpt/point)))
instantiate-component
#(dwlh/generate-instantiate-component changes
@@ -444,7 +444,8 @@
libraries
(:id component-root)
parent-id
- frame-id)
+ frame-id
+ {})
restore-component
#(let [restore (dwlh/prepare-restore-component changes library-data (:component-id component-root) it page delta (:id component-root) parent-id frame-id)]
@@ -466,7 +467,7 @@
(nil? obj)
changes
- (ctf/is-known-component? obj libraries)
+ (ctf/is-main-of-known-component? obj libraries)
(prepare-duplicate-component-change changes objects page obj parent-id frame-id delta libraries library-data it)
:else
@@ -484,6 +485,9 @@
(ctk/instance-root? obj))
duplicating-component? (or duplicating-component? (ctk/instance-head? obj))
is-component-main? (ctk/main-instance? obj)
+
+ original-ref-shape (-> (ctf/find-original-ref-shape nil page libraries obj {:include-deleted? true})
+ :id)
into-component? (and duplicating-component?
(ctn/in-any-component? objects parent))
@@ -514,6 +518,10 @@
(cond-> (or frame? group? bool?)
(assoc :shapes []))
+ (cond-> (and (some? original-ref-shape)
+ (not= original-ref-shape (:shape-ref obj)))
+ (assoc :shape-ref original-ref-shape))
+
(gsh/move delta)
(d/update-when :interactions #(ctsi/remap-interactions % ids-map objects))
@@ -709,8 +717,8 @@
(let [page (wsh/lookup-page state)
objects (:objects page)
selected (->> (wsh/lookup-selected state)
- (map #(get objects %))
- (remove #(ctk/in-component-copy-not-root? %)) ;; We don't want to change the structure of component copies
+ (map (d/getf objects))
+ (filter #(ctk/allow-duplicate? objects %))
(map :id)
set)]
(when (seq selected)
@@ -751,7 +759,7 @@
(dwu/start-undo-transaction undo-id)
(dch/commit-changes changes)
(select-shapes new-selected)
- (ptk/data-event :layout/update frames)
+ (ptk/data-event :layout/update {:ids frames})
(memorize-duplicated id-original id-duplicated)
(dwu/commit-undo-transaction undo-id))))))))))
@@ -782,6 +790,9 @@
(defn toggle-focus-mode
[]
(ptk/reify ::toggle-focus-mode
+ ev/Event
+ (-data [_] {})
+
ptk/UpdateEvent
(update [_ state]
(let [selected (wsh/lookup-selected state)]
diff --git a/frontend/src/app/main/data/workspace/shape_layout.cljs b/frontend/src/app/main/data/workspace/shape_layout.cljs
index 19e17a5a2..37e40cf91 100644
--- a/frontend/src/app/main/data/workspace/shape_layout.cljs
+++ b/frontend/src/app/main/data/workspace/shape_layout.cljs
@@ -94,7 +94,7 @@
;; Never call this directly but through the data-event `:layout/update`
;; Otherwise a lot of cycle dependencies could be generated
(defn- update-layout-positions
- [ids]
+ [{:keys [ids undo-group]}]
(ptk/reify ::update-layout-positions
ptk/WatchEvent
(watch [_ state _]
@@ -103,7 +103,8 @@
(if (d/not-empty? ids)
(let [modif-tree (dwm/create-modif-tree ids (ctm/reflow-modifiers))]
(rx/of (dwm/apply-modifiers {:modifiers modif-tree
- :stack-undo? true})))
+ :stack-undo? true
+ :undo-group undo-group})))
(rx/empty))))))
(defn initialize
@@ -139,7 +140,7 @@
(rx/of (dwu/start-undo-transaction undo-id)
(dch/update-shapes [id] layout-initializer {:with-objects? true})
(dch/update-shapes (dm/get-prop parent :shapes) #(dissoc % :constraints-h :constraints-v))
- (ptk/data-event :layout/update [id])
+ (ptk/data-event :layout/update {:ids [id]})
(dwu/commit-undo-transaction undo-id))))))
(defn create-layout-from-selection
@@ -180,7 +181,7 @@
(dch/update-shapes [new-shape-id] #(assoc % :layout-item-h-sizing :auto :layout-item-v-sizing :auto))
(dch/update-shapes selected #(assoc % :layout-item-h-sizing :fix :layout-item-v-sizing :fix))
(dwsh/delete-shapes page-id selected)
- (ptk/data-event :layout/update [new-shape-id])
+ (ptk/data-event :layout/update {:ids [new-shape-id]})
(dwu/commit-undo-transaction undo-id)))
;; Create Layout from selection
@@ -191,7 +192,7 @@
(dch/update-shapes [new-shape-id] #(assoc % :layout-item-h-sizing :auto :layout-item-v-sizing :auto))
(dch/update-shapes selected #(assoc % :layout-item-h-sizing :fix :layout-item-v-sizing :fix))))
- (rx/of (ptk/data-event :layout/update [new-shape-id])
+ (rx/of (ptk/data-event :layout/update {:ids [new-shape-id]})
(dwu/commit-undo-transaction undo-id)))))))
(defn remove-layout
@@ -203,7 +204,7 @@
(rx/of
(dwu/start-undo-transaction undo-id)
(dch/update-shapes ids #(apply dissoc % layout-keys))
- (ptk/data-event :layout/update ids)
+ (ptk/data-event :layout/update {:ids ids})
(dwu/commit-undo-transaction undo-id))))))
(defn create-layout
@@ -256,7 +257,7 @@
(let [undo-id (js/Symbol)]
(rx/of (dwu/start-undo-transaction undo-id)
(dch/update-shapes ids (d/patch-object changes))
- (ptk/data-event :layout/update ids)
+ (ptk/data-event :layout/update {:ids ids})
(dwu/commit-undo-transaction undo-id))))))
(defn add-layout-track
@@ -275,7 +276,7 @@
(case type
:row (ctl/add-grid-row shape value index)
:column (ctl/add-grid-column shape value index))))
- (ptk/data-event :layout/update ids)
+ (ptk/data-event :layout/update {:ids ids})
(dwu/commit-undo-transaction undo-id)))))))
(defn remove-layout-track
@@ -309,7 +310,7 @@
:row (ctl/remove-grid-row shape index objects)
:column (ctl/remove-grid-column shape index objects)))
{:with-objects? true})
- (ptk/data-event :layout/update ids)
+ (ptk/data-event :layout/update {:ids ids})
(dwu/commit-undo-transaction undo-id)))))))
(defn duplicate-layout-track
@@ -363,7 +364,7 @@
undo-id (js/Symbol)]
(rx/of (dwu/start-undo-transaction undo-id)
(dch/commit-changes changes)
- (ptk/data-event :layout/update ids)
+ (ptk/data-event :layout/update {:ids ids})
(dwu/commit-undo-transaction undo-id))))))
(defn reorder-layout-track
@@ -381,7 +382,7 @@
(case type
:row (ctl/reorder-grid-row shape from-index to-index move-content?)
:column (ctl/reorder-grid-column shape from-index to-index move-content?))))
- (ptk/data-event :layout/update ids)
+ (ptk/data-event :layout/update {:ids ids})
(dwu/commit-undo-transaction undo-id))))))
(defn hover-layout-track
@@ -426,7 +427,7 @@
(fn [shape]
(-> shape
(update-in [property index] merge props))))
- (ptk/data-event :layout/update ids)
+ (ptk/data-event :layout/update {:ids ids})
(dwu/commit-undo-transaction undo-id))))))
(defn fix-child-sizing
@@ -523,7 +524,7 @@
(cond-> (ctl/grid-layout? parent)
(ctl/assign-cells objects))))
{:with-objects? true})
- (ptk/data-event :layout/update ids)
+ (ptk/data-event :layout/update {:ids ids})
(dwu/commit-undo-transaction undo-id))))))
(defn update-grid-cells
@@ -546,7 +547,7 @@
[:layout-grid-cells cell-id]
d/patch-object props))
shape))))
- (ptk/data-event :layout/update [layout-id])
+ (ptk/data-event :layout/update {:ids [layout-id]})
(dwu/commit-undo-transaction undo-id))))))
(defn change-cells-mode
@@ -612,7 +613,7 @@
(d/update-in-when [:layout-grid-cells (:id target-cell)] assoc :position :area)))))
{:with-objects? true})
(dwge/clean-selection layout-id)
- (ptk/data-event :layout/update [layout-id])
+ (ptk/data-event :layout/update {:ids [layout-id]})
(dwu/commit-undo-transaction undo-id))))))
(defn merge-cells
@@ -644,7 +645,7 @@
(ctl/assign-cells objects))))
{:with-objects? true})
(dwge/clean-selection layout-id)
- (ptk/data-event :layout/update [layout-id])
+ (ptk/data-event :layout/update {:ids [layout-id]})
(dwu/commit-undo-transaction undo-id))))))
(defn update-grid-cell-position
@@ -669,7 +670,7 @@
(:row-span new-data) (:column-span new-data))
(ctl/assign-cells objects))))
{:with-objects? true})
- (ptk/data-event :layout/update [layout-id])
+ (ptk/data-event :layout/update {:ids [layout-id]})
(dwu/commit-undo-transaction undo-id))))))
@@ -724,5 +725,5 @@
(rx/of
(dwu/start-undo-transaction undo-id)
(dch/commit-changes changes)
- (ptk/data-event :layout/update [layout-id])
+ (ptk/data-event :layout/update {:ids [layout-id]})
(dwu/commit-undo-transaction undo-id))))))
diff --git a/frontend/src/app/main/data/workspace/shapes.cljs b/frontend/src/app/main/data/workspace/shapes.cljs
index 72cbd6f7e..7febfef6f 100644
--- a/frontend/src/app/main/data/workspace/shapes.cljs
+++ b/frontend/src/app/main/data/workspace/shapes.cljs
@@ -57,7 +57,7 @@
(rx/of (dwu/start-undo-transaction undo-id)
(dch/commit-changes changes)
(when-not no-update-layout?
- (ptk/data-event :layout/update [(:parent-id shape)]))
+ (ptk/data-event :layout/update {:ids [(:parent-id shape)]}))
(when-not no-select?
(dws/select-shapes (d/ordered-set (:id shape))))
(dwu/commit-undo-transaction undo-id))
@@ -141,10 +141,11 @@
(rx/concat
(rx/of (dwu/start-undo-transaction undo-id)
- (update-shape-flags ids-to-hide {:hidden true}))
+ (update-shape-flags ids-to-hide {:hidden true :undo-group (:undo-group options)}))
(real-delete-shapes file page objects ids-to-delete it {:components-v2 components-v2
:ignore-touched (:component-swap options)
- :undo-group (:undo-group options)})
+ :undo-group (:undo-group options)
+ :undo-id undo-id})
(rx/of (dwu/commit-undo-transaction undo-id))))))))
(defn- real-delete-shapes-changes
@@ -291,11 +292,11 @@
(defn- real-delete-shapes
[file page objects ids it options]
(let [[changes all-parents] (real-delete-shapes-changes file page objects ids it options)
- undo-id (js/Symbol)]
+ undo-id (or (:undo-id options) (js/Symbol))]
(rx/of (dwu/start-undo-transaction undo-id)
(dc/detach-comment-thread ids)
(dch/commit-changes changes)
- (ptk/data-event :layout/update all-parents)
+ (ptk/data-event :layout/update {:ids all-parents :undo-group (:undo-group options)})
(dwu/commit-undo-transaction undo-id))))
(defn create-and-add-shape
@@ -377,7 +378,7 @@
(dwu/start-undo-transaction undo-id)
(dch/commit-changes changes)
(dws/select-shapes (d/ordered-set (:id frame-shape)))
- (ptk/data-event :layout/update [(:id frame-shape)])
+ (ptk/data-event :layout/update {:ids [(:id frame-shape)]})
(dwu/commit-undo-transaction undo-id))))))))
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
@@ -385,7 +386,7 @@
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
(defn update-shape-flags
- [ids {:keys [blocked hidden transforming] :as flags}]
+ [ids {:keys [blocked hidden transforming undo-group] :as flags}]
(dm/assert!
"expected valid coll of uuids"
(every? uuid? ids))
@@ -409,7 +410,7 @@
ids (if (boolean? blocked)
(into ids (->> ids (mapcat #(cfh/get-children-ids objects %))))
ids)]
- (rx/of (dch/update-shapes ids update-fn {:attrs #{:blocked :hidden :transforming}}))))))
+ (rx/of (dch/update-shapes ids update-fn {:attrs #{:blocked :hidden :transforming} :undo-group undo-group}))))))
(defn toggle-visibility-selected
[]
diff --git a/frontend/src/app/main/data/workspace/shortcuts.cljs b/frontend/src/app/main/data/workspace/shortcuts.cljs
index 66ad43b6e..b8d10264d 100644
--- a/frontend/src/app/main/data/workspace/shortcuts.cljs
+++ b/frontend/src/app/main/data/workspace/shortcuts.cljs
@@ -364,19 +364,12 @@
:subsections [:main-menu]
:fn #(st/emit! (dw/select-all))}
- :toggle-grid {:tooltip (ds/meta "'")
+ :toggle-guides {:tooltip (ds/meta "'")
;;https://github.com/ccampbell/mousetrap/issues/85
:command [(ds/c-mod "'") (ds/c-mod "219")]
:show-command (ds/c-mod "'")
:subsections [:main-menu]
- :fn #(st/emit! (toggle-layout-flag :display-grid))}
-
- :toggle-snap-grid {:tooltip (ds/meta-shift "'")
- ;;https://github.com/ccampbell/mousetrap/issues/85
- :command [(ds/c-mod "shift+'") (ds/c-mod "shift+219")]
- :show-command (ds/c-mod "shift+'")
- :subsections [:main-menu]
- :fn #(st/emit! (toggle-layout-flag :snap-grid))}
+ :fn #(st/emit! (toggle-layout-flag :display-guides))}
:toggle-alignment {:tooltip (ds/meta "\\")
:command (ds/c-mod "\\")
@@ -404,10 +397,17 @@
:fn #(st/emit!
(de/show-workspace-export-dialog))}
- :toggle-snap-guide {:tooltip (ds/meta-shift "G")
- :command (ds/c-mod "shift+g")
- :subsections [:main-menu]
- :fn #(st/emit! (toggle-layout-flag :snap-guides))}
+ :toggle-snap-ruler-guide {:tooltip (ds/meta-shift "G")
+ :command (ds/c-mod "shift+g")
+ :subsections [:main-menu]
+ :fn #(st/emit! (toggle-layout-flag :snap-ruler-guides))}
+
+ :toggle-snap-guides {:tooltip (ds/meta-shift "'")
+ ;;https://github.com/ccampbell/mousetrap/issues/85
+ :command [(ds/c-mod "shift+'") (ds/c-mod "shift+219")]
+ :show-command (ds/c-mod "shift+'")
+ :subsections [:main-menu]
+ :fn #(st/emit! (toggle-layout-flag :snap-guides))}
:show-shortcuts {:tooltip "?"
:command "?"
@@ -416,34 +416,34 @@
;; PANELS
- :toggle-layers {:tooltip (ds/alt "L")
- :command (ds/a-mod "l")
- :subsections [:panels]
- :fn #(st/emit! (dw/go-to-layout :layers))}
+ :toggle-layers {:tooltip (ds/alt "L")
+ :command (ds/a-mod "l")
+ :subsections [:panels]
+ :fn #(st/emit! (dw/go-to-layout :layers))}
- :toggle-assets {:tooltip (ds/alt "I")
- :command (ds/a-mod "i")
- :subsections [:panels]
- :fn #(st/emit! (dw/go-to-layout :assets))}
+ :toggle-assets {:tooltip (ds/alt "I")
+ :command (ds/a-mod "i")
+ :subsections [:panels]
+ :fn #(st/emit! (dw/go-to-layout :assets))}
- :toggle-history {:tooltip (ds/alt "H")
- :command (ds/a-mod "h")
- :subsections [:panels]
- :fn #(emit-when-no-readonly (dw/go-to-layout :document-history))}
+ :toggle-history {:tooltip (ds/alt "H")
+ :command (ds/a-mod "h")
+ :subsections [:panels]
+ :fn #(emit-when-no-readonly (dw/go-to-layout :document-history))}
- :toggle-colorpalette {:tooltip (ds/alt "P")
- :command (ds/a-mod "p")
- :subsections [:panels]
- :fn #(do (r/set-resize-type! :bottom)
- (emit-when-no-readonly (dw/remove-layout-flag :textpalette)
- (toggle-layout-flag :colorpalette)))}
+ :toggle-colorpalette {:tooltip (ds/alt "P")
+ :command (ds/a-mod "p")
+ :subsections [:panels]
+ :fn #(do (r/set-resize-type! :bottom)
+ (emit-when-no-readonly (dw/remove-layout-flag :textpalette)
+ (toggle-layout-flag :colorpalette)))}
- :toggle-textpalette {:tooltip (ds/alt "T")
- :command (ds/a-mod "t")
- :subsections [:panels]
- :fn #(do (r/set-resize-type! :bottom)
- (emit-when-no-readonly (dw/remove-layout-flag :colorpalette)
- (toggle-layout-flag :textpalette)))}
+ :toggle-textpalette {:tooltip (ds/alt "T")
+ :command (ds/a-mod "t")
+ :subsections [:panels]
+ :fn #(do (r/set-resize-type! :bottom)
+ (emit-when-no-readonly (dw/remove-layout-flag :colorpalette)
+ (toggle-layout-flag :textpalette)))}
:hide-ui {:tooltip "\\"
:command "\\"
@@ -482,10 +482,10 @@
:subsections [:zoom-workspace]
:fn identity}
- :zoom-lense-decrease {:tooltip (ds/alt "Z")
- :command "alt+z"
- :subsections [:zoom-workspace]
- :fn identity}
+ :zoom-lense-decrease {:tooltip (ds/alt "Z")
+ :command "alt+z"
+ :subsections [:zoom-workspace]
+ :fn identity}
;; NAVIGATION
@@ -553,11 +553,11 @@
:fn #(emit-when-no-readonly (dp/open-preview-selected))}
;; THEME
- :toggle-theme {:tooltip (ds/alt "M")
- :command (ds/a-mod "m")
- :subsections [:basics]
- :fn #(st/emit! (with-meta (du/toggle-theme)
- {::ev/origin "workspace:shortcut"}))}})
+ :toggle-theme {:tooltip (ds/alt "M")
+ :command (ds/a-mod "m")
+ :subsections [:basics]
+ :fn #(st/emit! (with-meta (du/toggle-theme)
+ {::ev/origin "workspace:shortcut"}))}})
(def opacity-shortcuts
(into {} (->>
diff --git a/frontend/src/app/main/data/workspace/state_helpers.cljs b/frontend/src/app/main/data/workspace/state_helpers.cljs
index c33f62d18..b04fa88f6 100644
--- a/frontend/src/app/main/data/workspace/state_helpers.cljs
+++ b/frontend/src/app/main/data/workspace/state_helpers.cljs
@@ -110,6 +110,11 @@
[state]
(get state :workspace-data))
+(defn get-local-file-full
+ [state]
+ (-> (get state :workspace-file)
+ (assoc :data (get state :workspace-data))))
+
(defn get-file
"Get the data content of the given file (it may be the current file
or one library)."
diff --git a/frontend/src/app/main/data/workspace/svg_upload.cljs b/frontend/src/app/main/data/workspace/svg_upload.cljs
index d0a262312..fa159cf04 100644
--- a/frontend/src/app/main/data/workspace/svg_upload.cljs
+++ b/frontend/src/app/main/data/workspace/svg_upload.cljs
@@ -102,7 +102,7 @@
(rx/of (dwu/start-undo-transaction undo-id)
(dch/commit-changes changes)
(dws/select-shapes (d/ordered-set (:id new-shape)))
- (ptk/data-event :layout/update [(:id new-shape)])
+ (ptk/data-event :layout/update {:ids [(:id new-shape)]})
(dwu/commit-undo-transaction undo-id)))
(catch :default cause
diff --git a/frontend/src/app/main/data/workspace/texts.cljs b/frontend/src/app/main/data/workspace/texts.cljs
index c3e98739b..c42a65378 100644
--- a/frontend/src/app/main/data/workspace/texts.cljs
+++ b/frontend/src/app/main/data/workspace/texts.cljs
@@ -382,7 +382,7 @@
:stack-undo? true
:ignore-remote? true
:ignore-touched true})
- (ptk/data-event :layout/update ids)
+ (ptk/data-event :layout/update {:ids ids})
(dwu/commit-undo-transaction undo-id))))))))
(defn resize-text
@@ -601,12 +601,16 @@
attrs (-> typography
(assoc :typography-ref-file file-id)
(assoc :typography-ref-id (:id typography))
- (dissoc :id :name))]
+ (dissoc :id :name))
+ undo-id (js/Symbol)]
- (->> (rx/from (seq selected))
- (rx/map (fn [id]
- (let [editor (get editor-state id)]
- (update-text-attrs {:id id :editor editor :attrs attrs})))))))))
+ (rx/concat
+ (rx/of (dwu/start-undo-transaction undo-id))
+ (->> (rx/from (seq selected))
+ (rx/map (fn [id]
+ (let [editor (get editor-state id)]
+ (update-text-attrs {:id id :editor editor :attrs attrs})))))
+ (rx/of (dwu/commit-undo-transaction undo-id)))))))
(defn generate-typography-name
[{:keys [font-id font-variant-id] :as typography}]
diff --git a/frontend/src/app/main/data/workspace/transforms.cljs b/frontend/src/app/main/data/workspace/transforms.cljs
index be9635715..c52cd2fbb 100644
--- a/frontend/src/app/main/data/workspace/transforms.cljs
+++ b/frontend/src/app/main/data/workspace/transforms.cljs
@@ -257,9 +257,7 @@
(watch [_ state stream]
(let [initial-position @ms/mouse-position
- stopper (->> stream
- (rx/filter mse/mouse-event?)
- (rx/filter mse/mouse-up-event?))
+ stopper (mse/drag-stopper stream)
layout (:workspace-layout state)
page-id (:current-page-id state)
focus (:workspace-focus-selected state)
@@ -370,10 +368,7 @@
ptk/WatchEvent
(watch [_ _ stream]
- (let [stopper (->> stream
- (rx/filter mse/mouse-event?)
- (rx/filter mse/mouse-up-event?))
-
+ (let [stopper (mse/drag-stopper stream)
group (gsh/shapes->rect shapes)
group-center (grc/rect->center group)
initial-angle (gpt/angle @ms/mouse-position group-center)
@@ -436,10 +431,7 @@
(watch [_ state stream]
(let [initial (deref ms/mouse-position)
- stopper (->> stream
- (rx/filter mse/mouse-event?)
- (rx/filter mse/mouse-up-event?))
-
+ stopper (mse/drag-stopper stream)
zoom (get-in state [:workspace-local :zoom] 1)
;; We toggle the selection so we don't have to wait for the event
@@ -518,10 +510,7 @@
duplicate-move-started? (get-in state [:workspace-local :duplicate-move-started?] false)
- stopper (->> stream
- (rx/filter mse/mouse-event?)
- (rx/filter mse/mouse-up-event?))
-
+ stopper (mse/drag-stopper stream)
layout (get state :workspace-layout)
zoom (get-in state [:workspace-local :zoom] 1)
focus (:workspace-focus-selected state)
@@ -719,7 +708,7 @@
(rx/of
(dwu/start-undo-transaction undo-id)
(dch/commit-changes changes)
- (ptk/data-event :layout/update selected)
+ (ptk/data-event :layout/update {:ids selected})
(dwu/commit-undo-transaction undo-id))))))
(defn nudge-selected-shapes
diff --git a/frontend/src/app/main/snap.cljs b/frontend/src/app/main/snap.cljs
index 5e8f14431..d5ec5a6cf 100644
--- a/frontend/src/app/main/snap.cljs
+++ b/frontend/src/app/main/snap.cljs
@@ -40,14 +40,14 @@
(fn [{:keys [type id frame-id]}]
(cond
(= type :layout)
- (or (not (contains? layout :display-grid))
- (not (contains? layout :snap-grid))
+ (or (not (contains? layout :display-guides))
+ (not (contains? layout :snap-guides))
(and (d/not-empty? focus)
(not (contains? focus id))))
(= type :guide)
(or (not (contains? layout :rulers))
- (not (contains? layout :snap-guides))
+ (not (contains? layout :snap-ruler-guides))
(and (d/not-empty? focus)
(not (contains? focus frame-id))))
diff --git a/frontend/src/app/main/streams.cljs b/frontend/src/app/main/streams.cljs
index 4fc3d970d..d6ebf074b 100644
--- a/frontend/src/app/main/streams.cljs
+++ b/frontend/src/app/main/streams.cljs
@@ -151,6 +151,11 @@
(rx/filter kbd/space?)
(rx/filter (complement kbd/editing-event?))
(rx/map kbd/key-down-event?)
+ ;; Fix a situation caused by using `ctrl+alt` kind of
+ ;; shortcuts, that makes keyboard-alt stream
+ ;; registering the key pressed but on blurring the
+ ;; window (unfocus) the key down is never arrived.
+ (rx/merge window-blur)
(rx/pipe (rxo/distinct-contiguous)))]
(rx/sub! ob sub)
sub))
diff --git a/frontend/src/app/main/ui.cljs b/frontend/src/app/main/ui.cljs
index 69c83db69..9c7e3110c 100644
--- a/frontend/src/app/main/ui.cljs
+++ b/frontend/src/app/main/ui.cljs
@@ -107,8 +107,7 @@
(not= "0.0" (:main cf/version)))
[:& release-notes-modal {:version (:main cf/version)}]))
- (when profile
- [:& dashboard-page {:route route :profile profile}])]
+ [:& dashboard-page {:route route :profile profile}]]
:viewer
(let [{:keys [query-params path-params]} route
@@ -118,7 +117,7 @@
[:? {}
(if (:token query-params)
[:> static/error-container {}
- [:div.image i/unchain]
+ [:div.image i/detach]
[:div.main-message (tr "viewer.breaking-change.message")]
[:div.desc-message (tr "viewer.breaking-change.description")]]
diff --git a/frontend/src/app/main/ui/alert.cljs b/frontend/src/app/main/ui/alert.cljs
index 8c7ee4b02..821b97cee 100644
--- a/frontend/src/app/main/ui/alert.cljs
+++ b/frontend/src/app/main/ui/alert.cljs
@@ -54,7 +54,7 @@
[:div {:class (stl/css :modal-header)}
[:h2 {:class (stl/css :modal-title)} title]
[:button {:class (stl/css :modal-close-btn)
- :on-click accept-fn} i/close-refactor]]
+ :on-click accept-fn} i/close]]
[:div {:class (stl/css :modal-content)}
(when (and (string? message) (not= message ""))
diff --git a/frontend/src/app/main/ui/auth/recovery_request.cljs b/frontend/src/app/main/ui/auth/recovery_request.cljs
index e90eec477..d1d72ed2d 100644
--- a/frontend/src/app/main/ui/auth/recovery_request.cljs
+++ b/frontend/src/app/main/ui/auth/recovery_request.cljs
@@ -49,19 +49,20 @@
on-error
(mf/use-callback
- (fn [data {:keys [code] :as error}]
+ (fn [data cause]
(reset! submitted false)
- (case code
- :profile-not-verified
- (rx/of (msg/error (tr "auth.notifications.profile-not-verified")))
+ (let [code (-> cause ex-data :code)]
+ (case code
+ :profile-not-verified
+ (rx/of (msg/error (tr "auth.notifications.profile-not-verified")))
- :profile-is-muted
- (rx/of (msg/error (tr "errors.profile-is-muted")))
+ :profile-is-muted
+ (rx/of (msg/error (tr "errors.profile-is-muted")))
- :email-has-permanent-bounces
- (rx/of (msg/error (tr "errors.email-has-permanent-bounces" (:email data))))
+ :email-has-permanent-bounces
+ (rx/of (msg/error (tr "errors.email-has-permanent-bounces" (:email data))))
- (rx/throw error))))
+ (rx/throw cause)))))
on-submit
(mf/use-callback
diff --git a/frontend/src/app/main/ui/auth/register.cljs b/frontend/src/app/main/ui/auth/register.cljs
index cda4f878d..6789b99dc 100644
--- a/frontend/src/app/main/ui/auth/register.cljs
+++ b/frontend/src/app/main/ui/auth/register.cljs
@@ -58,33 +58,33 @@
:opt-un [::invitation-token]))
(defn- handle-prepare-register-error
- [form {:keys [type code] :as cause}]
- (condp = [type code]
- [:restriction :registration-disabled]
- (st/emit! (msg/error (tr "errors.registration-disabled")))
+ [form cause]
+ (let [{:keys [type code]} (ex-data cause)]
+ (condp = [type code]
+ [:restriction :registration-disabled]
+ (st/emit! (msg/error (tr "errors.registration-disabled")))
- [:restriction :profile-blocked]
- (st/emit! (msg/error (tr "errors.profile-blocked")))
+ [:restriction :profile-blocked]
+ (st/emit! (msg/error (tr "errors.profile-blocked")))
- [:validation :email-has-permanent-bounces]
- (let [email (get @form [:data :email])]
- (st/emit! (msg/error (tr "errors.email-has-permanent-bounces" email))))
+ [:validation :email-has-permanent-bounces]
+ (let [email (get @form [:data :email])]
+ (st/emit! (msg/error (tr "errors.email-has-permanent-bounces" email))))
- [:validation :email-already-exists]
- (swap! form assoc-in [:errors :email]
- {:message "errors.email-already-exists"})
+ [:validation :email-already-exists]
+ (swap! form assoc-in [:errors :email]
+ {:message "errors.email-already-exists"})
- [:validation :email-as-password]
- (swap! form assoc-in [:errors :password]
- {:message "errors.email-as-password"})
+ [:validation :email-as-password]
+ (swap! form assoc-in [:errors :password]
+ {:message "errors.email-as-password"})
- (st/emit! (msg/error (tr "errors.generic")))))
+ (st/emit! (msg/error (tr "errors.generic"))))))
(defn- handle-prepare-register-success
[params]
(st/emit! (rt/nav :auth-register-validate {} params)))
-
(mf/defc register-form
[{:keys [params on-success-callback] :as props}]
(let [initial (mf/use-memo (mf/deps params) (constantly params))
@@ -100,7 +100,7 @@
(on-success-callback p)))
on-submit
- (mf/use-callback
+ (mf/use-fn
(fn [form _event]
(reset! submitted? true)
(let [cdata (:clean-data @form)]
@@ -114,7 +114,7 @@
[:& fm/form {:on-submit on-submit :form form}
[:div {:class (stl/css :fields-row)}
- [:& fm/input {:type "email"
+ [:& fm/input {:type "text"
:name :email
:label (tr "auth.email")
:data-test "email-input"
@@ -225,7 +225,7 @@
(on-success-callback (:email p))))
on-submit
- (mf/use-callback
+ (mf/use-fn
(fn [form _event]
(reset! submitted? true)
(let [params (:clean-data @form)]
diff --git a/frontend/src/app/main/ui/comments.cljs b/frontend/src/app/main/ui/comments.cljs
index 1147cf99a..2fd50ec86 100644
--- a/frontend/src/app/main/ui/comments.cljs
+++ b/frontend/src/app/main/ui/comments.cljs
@@ -323,12 +323,12 @@
[:div {:class (stl/css :options-resolve-wrapper)
:on-click toggle-resolved}
[:span {:class (stl/css-case :options-resolve true
- :global/checked (:is-resolved thread))} i/tick-refactor]])
+ :global/checked (:is-resolved thread))} i/tick]])
(when (= (:id profile) (:id owner))
[:div {:class (stl/css :options)
:on-click on-toggle-options}
- i/menu-refactor])]
+ i/menu])]
[:div {:class (stl/css :content)}
(if @edition?
@@ -355,22 +355,41 @@
[thread-id]
(l/derived (l/in [:comments thread-id]) st/state))
+(defn- offset-position [position viewport zoom bubble-margin]
+ (let [base-x (+ (* (:x position) zoom) (:offset-x viewport))
+ base-y (+ (* (:y position) zoom) (:offset-y viewport))
+ w (:width viewport)
+ h (:height viewport)
+ comment-width 284 ;; TODO: this is the width set via CSS in an outer container…
+ ;; We should probably do this in a different way.
+ orientation-left? (>= (+ base-x comment-width (:x bubble-margin)) w)
+ orientation-top? (>= base-y (/ h 2))
+ h-dir (if orientation-left? :left :right)
+ v-dir (if orientation-top? :top :bottom)
+ x (:x position)
+ y (:y position)]
+ {:x x :y y :h-dir h-dir :v-dir v-dir}))
+
(mf/defc thread-comments
{::mf/wrap [mf/memo]}
- [{:keys [thread zoom users origin position-modifier]}]
+ [{:keys [thread zoom users origin position-modifier viewport]}]
(let [ref (mf/use-ref)
-
-
thread-id (:id thread)
thread-pos (:position thread)
- pos (cond-> thread-pos
+ base-pos (cond-> thread-pos
(some? position-modifier)
(gpt/transform position-modifier))
- pos-x (+ (* (:x pos) zoom) 24)
- pos-y (- (* (:y pos) zoom) 28)
+ max-height (int (* (:height viewport) 0.75))
+ ;; We should probably look for a better way of doing this.
+ bubble-margin {:x 24 :y 0}
+ pos (offset-position base-pos viewport zoom bubble-margin)
+ margin-x (* (:x bubble-margin) (if (= (:h-dir pos) :left) -1 1))
+ margin-y (* (:y bubble-margin) (if (= (:v-dir pos) :top) -1 1))
+ pos-x (+ (* (:x pos) zoom) margin-x)
+ pos-y (- (* (:y pos) zoom) margin-y)
comments-ref (mf/with-memo [thread-id]
(make-comments-ref thread-id))
@@ -391,10 +410,16 @@
(mf/with-layout-effect [thread-pos comments-map]
(when-let [node (mf/ref-val ref)]
(dom/scroll-into-view-if-needed! node)))
+
(when (some? comment)
- [:div {:class (stl/css :thread-content)
- :style {:top (str pos-y "px")
- :left (str pos-x "px")}
+ [:div {:class (stl/css-case :thread-content true
+ :thread-content-left (= (:h-dir pos) :left)
+ :thread-content-top (= (:v-dir pos) :top))
+ :id (str "thread-" thread-id)
+ :style {:left (str pos-x "px")
+ :top (str pos-y "px")
+ :max-height max-height
+ :overflow-y "scroll"}
:on-click dom/stop-propagation}
[:div {:class (stl/css :comments)}
@@ -579,12 +604,14 @@
[{:keys [group users on-thread-click]}]
[:div {:class (stl/css :thread-group)}
(if (:file-name group)
- [:div {:class (stl/css :section-title)}
+ [:div {:class (stl/css :section-title)
+ :title (str (:file-name group) ", " (:page-name group))}
[:span {:class (stl/css :file-name)} (:file-name group) ", "]
[:span {:class (stl/css :page-name)} (:page-name group)]]
- [:div {:class (stl/css :section-title)}
- [:span {:class (stl/css :icon)} i/document-refactor]
+ [:div {:class (stl/css :section-title)
+ :title (:page-name group)}
+ [:span {:class (stl/css :icon)} i/document]
[:span {:class (stl/css :page-name)} (:page-name group)]])
[:div {:class (stl/css :threads)}
diff --git a/frontend/src/app/main/ui/comments.scss b/frontend/src/app/main/ui/comments.scss
index ddad36a6b..51e6ddadb 100644
--- a/frontend/src/app/main/ui/comments.scss
+++ b/frontend/src/app/main/ui/comments.scss
@@ -19,6 +19,8 @@
}
.section-title {
+ display: grid;
+ grid-template-columns: auto auto;
@include bodySmallTypography;
height: $s-32;
display: flex;
@@ -27,10 +29,12 @@
}
.file-name {
+ @include textEllipsis;
color: var(--comment-subtitle-color);
}
.page-name {
+ @include textEllipsis;
color: var(--comment-subtitle-color);
}
@@ -98,8 +102,12 @@
}
.content {
+ position: relative;
@include bodySmallTypography;
color: var(--color-foreground-primary);
+ word-wrap: break-word;
+ overflow-wrap: break-word;
+ hyphens: auto;
}
.replies {
@@ -138,7 +146,11 @@
width: $s-284;
padding: $s-12;
border-radius: $br-8;
+ border: $s-2 solid var(--modal-border-color);
background-color: var(--comment-modal-background-color);
+ --translate-x: 0%;
+ --translate-y: 0%;
+ transform: translate(var(--translate-x), var(--translate-y));
.comments {
display: flex;
flex-direction: column;
@@ -146,6 +158,13 @@
}
}
+.thread-content-left {
+ --translate-x: -100%;
+}
+.thread-content-top {
+ --translate-y: -100%;
+}
+
// comment-item
.comment-container {
@@ -192,12 +211,6 @@
}
}
}
- .content {
- position: relative;
- .text {
- @include bodySmallTypography;
- }
- }
}
.comment-options-dropdown {
@extend .dropdown-wrapper;
@@ -221,7 +234,6 @@
height: 100%;
width: 100%;
max-width: $s-260;
- min-width: $s-260;
margin-bottom: $s-8;
padding: $s-8;
color: var(--input-foreground-color-active);
diff --git a/frontend/src/app/main/ui/components/color_bullet.cljs b/frontend/src/app/main/ui/components/color_bullet.cljs
index 7213a8347..1d4b9aacc 100644
--- a/frontend/src/app/main/ui/components/color_bullet.cljs
+++ b/frontend/src/app/main/ui/components/color_bullet.cljs
@@ -5,57 +5,110 @@
;; Copyright (c) KALEIDOS INC
(ns app.main.ui.components.color-bullet
+ (:require-macros [app.main.style :as stl])
(:require
[app.config :as cfg]
[app.util.color :as uc]
- [app.util.dom :as dom]
- [app.util.i18n :as i18n :refer [tr]]
+ [app.util.i18n :refer [tr]]
[cuerdas.core :as str]
[rumext.v2 :as mf]))
+(defn- color-title
+ [color-item]
+ (let [name (:name color-item)
+ gradient (:gradient color-item)
+ image (:image color-item)
+ color (:color color-item)]
+
+ (if (some? name)
+ (cond
+ (some? color)
+ (str/ffmt "% (%)" name color)
+
+ (some? gradient)
+ (str/ffmt "% (%)" name (uc/gradient-type->string (:type gradient)))
+
+ (some? image)
+ (str/ffmt "% (%)" name (tr "media.image"))
+
+ :else
+ name)
+
+ (cond
+ (some? color)
+ color
+
+ (some? gradient)
+ (uc/gradient-type->string (:type gradient))
+
+ (some? image)
+ (tr "media.image")))))
+
(mf/defc color-bullet
{::mf/wrap [mf/memo]
::mf/wrap-props false}
- [{:keys [color on-click]}]
- (let [on-click (mf/use-fn
- (mf/deps color on-click)
- (fn [event]
- (when (fn? on-click)
- (^function on-click color event))))]
+ [{:keys [color on-click mini? area]}]
+ (let [read-only? (nil? on-click)
+ on-click
+ (mf/use-fn
+ (mf/deps color on-click)
+ (fn [event]
+ (when (fn? on-click)
+ (^function on-click color event))))]
(if (uc/multiple? color)
- [:div.color-bullet.multiple {:on-click on-click}]
-
+ [:div {:class (stl/css :color-bullet :multiple)
+ :on-click on-click
+ :title (color-title color)}]
;; No multiple selection
- (let [color (if (string? color) {:color color :opacity 1} color)]
- [:div.color-bullet
- {:class (dom/classnames :is-library-color (some? (:id color))
- :is-not-library-color (nil? (:id color))
- :is-gradient (some? (:gradient color)))
+ (let [color (if (string? color) {:color color :opacity 1} color)
+ id (:id color)
+ gradient (:gradient color)
+ opacity (:opacity color)
+ image (:image color)]
+ [:div
+ {:class (stl/css-case
+ :color-bullet true
+ :mini mini?
+ :is-library-color (some? id)
+ :is-not-library-color (nil? id)
+ :is-gradient (some? gradient)
+ :is-transparent (and opacity (> 1 opacity))
+ :grid-area area
+ :read-only read-only?)
+ :data-readonly (str read-only?)
:on-click on-click
- :title (uc/get-color-name color)}
- (cond
- (:gradient color)
- [:div.color-bullet-wrapper {:style {:background (uc/color->background color)}}]
+ :title (color-title color)}
- (:image color)
- (let [uri (cfg/resolve-file-media (:image color))]
- [:div.color-bullet-wrapper {:style {:background-size "contain" :background-image (str/ffmt "url(%)" uri)}}])
+ (cond
+ (some? gradient)
+ [:div {:class (stl/css :color-bullet-wrapper)
+ :style {:background (uc/color->background color)}}]
+
+ (some? image)
+ (let [uri (cfg/resolve-file-media image)]
+ [:div {:class (stl/css :color-bullet-wrapper)
+ :style {:background-image (str/ffmt "url(%)" uri)}}])
:else
- [:div.color-bullet-wrapper
- [:div.color-bullet-left {:style {:background (uc/color->background (assoc color :opacity 1))}}]
- [:div.color-bullet-right {:style {:background (uc/color->background color)}}]])]))))
+ [:div {:class (stl/css :color-bullet-wrapper)}
+ [:div {:class (stl/css :color-bullet-left)
+ :style {:background (uc/color->background (assoc color :opacity 1))}}]
+ [:div {:class (stl/css :color-bullet-right)
+ :style {:background (uc/color->background color)}}]])]))))
(mf/defc color-name
{::mf/wrap-props false}
- [{:keys [color size on-click on-double-click]}]
- (let [{:keys [name color gradient image]} (if (string? color) {:color color :opacity 1} color)]
- (when (or (not size) (= size :big))
- [:span.color-text
- {:on-click on-click
- :on-double-click on-double-click
- :title name}
- (if (some? image)
- (tr "media.image.short")
- (or name color (uc/gradient-type->string (:type gradient))))])))
+ [{:keys [color size on-click on-double-click origin]}]
+ (let [{:keys [name color gradient]} (if (string? color) {:color color :opacity 1} color)]
+ (when (or (not size) (> size 64))
+ [:span {:class (stl/css-case
+ :color-text (and (= origin :palette) (< size 72))
+ :small-text (and (= origin :palette) (>= size 64) (< size 72))
+ :big-text (and (= origin :palette) (>= size 72))
+ :gradient (some? gradient)
+ :color-row-name (not= origin :palette))
+ :title name
+ :on-click on-click
+ :on-double-click on-double-click}
+ (or name color (uc/gradient-type->string (:type gradient)))])))
diff --git a/frontend/src/app/main/ui/components/color_bullet_new.scss b/frontend/src/app/main/ui/components/color_bullet.scss
similarity index 87%
rename from frontend/src/app/main/ui/components/color_bullet_new.scss
rename to frontend/src/app/main/ui/components/color_bullet.scss
index 36afda4b2..3a8e0e202 100644
--- a/frontend/src/app/main/ui/components/color_bullet_new.scss
+++ b/frontend/src/app/main/ui/components/color_bullet.scss
@@ -39,13 +39,13 @@
}
}
&.is-gradient {
- background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAADFJREFUOE9jZGBgEAFifOANPknGUQMYhkkYEEgG+NMJKAwIAbwJbdQABnBCIgRoG4gAIF8IsXB/Rs4AAAAASUVORK5CYII=")
+ background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAExJREFUSIljvHnz5n8GLEBNTQ2bMMOtW7ewiuNSz4RVlIpg1IKBt4Dx////WFMRqakFl/qhH0SjFhAELNRKLaNl0Qi2YLQsGrWAcgAA0gAgQPhT2rAAAAAASUVORK5CYII=")
left center;
background-color: var(--color-bullet-background-color);
transform: rotate(-90deg);
}
&.is-transparent {
- background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAADFJREFUOE9jZGBgEAFifOANPknGUQMYhkkYEEgG+NMJKAwIAbwJbdQABnBCIgRoG4gAIF8IsXB/Rs4AAAAASUVORK5CYII=")
+ background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAExJREFUSIljvHnz5n8GLEBNTQ2bMMOtW7ewiuNSz4RVlIpg1IKBt4Dx////WFMRqakFl/qhH0SjFhAELNRKLaNl0Qi2YLQsGrWAcgAA0gAgQPhT2rAAAAAASUVORK5CYII=")
left center;
background-color: var(--color-bullet-background-color);
}
diff --git a/frontend/src/app/main/ui/components/color_bullet_new.cljs b/frontend/src/app/main/ui/components/color_bullet_new.cljs
deleted file mode 100644
index 6173a582f..000000000
--- a/frontend/src/app/main/ui/components/color_bullet_new.cljs
+++ /dev/null
@@ -1,114 +0,0 @@
-;; This Source Code Form is subject to the terms of the Mozilla Public
-;; License, v. 2.0. If a copy of the MPL was not distributed with this
-;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
-;;
-;; Copyright (c) KALEIDOS INC
-
-(ns app.main.ui.components.color-bullet-new
- (:require-macros [app.main.style :as stl])
- (:require
- [app.config :as cfg]
- [app.util.color :as uc]
- [app.util.i18n :refer [tr]]
- [cuerdas.core :as str]
- [rumext.v2 :as mf]))
-
-(defn- color-title
- [color-item]
- (let [name (:name color-item)
- gradient (:gradient color-item)
- image (:image color-item)
- color (:color color-item)]
-
- (if (some? name)
- (cond
- (some? color)
- (str/ffmt "% (%)" name color)
-
- (some? gradient)
- (str/ffmt "% (%)" name (uc/gradient-type->string (:type gradient)))
-
- (some? image)
- (str/ffmt "% (%)" name (tr "media.image"))
-
- :else
- name)
-
- (cond
- (some? color)
- color
-
- (some? gradient)
- (uc/gradient-type->string (:type gradient))
-
- (some? image)
- (tr "media.image")))))
-
-(mf/defc color-bullet
- {::mf/wrap [mf/memo]
- ::mf/wrap-props false}
- [{:keys [color on-click mini? area]}]
- (let [read-only? (nil? on-click)
- on-click
- (mf/use-fn
- (mf/deps color on-click)
- (fn [event]
- (when (fn? on-click)
- (^function on-click color event))))]
-
- (if (uc/multiple? color)
- [:div {:class (stl/css :color-bullet :multiple)
- :on-click on-click
- :title (color-title color)}]
- ;; No multiple selection
- (let [color (if (string? color) {:color color :opacity 1} color)
- id (:id color)
- gradient (:gradient color)
- opacity (:opacity color)
- image (:image color)]
- [:div
- {:class (stl/css-case
- :color-bullet true
- :mini mini?
- :is-library-color (some? id)
- :is-not-library-color (nil? id)
- :is-gradient (some? gradient)
- :is-transparent (and opacity (> 1 opacity))
- :grid-area area
- :read-only read-only?)
- :data-readonly (str read-only?)
- :on-click on-click
- :title (color-title color)}
-
- (cond
- (some? gradient)
- [:div {:class (stl/css :color-bullet-wrapper)
- :style {:background (uc/color->background color)}}]
-
- (some? image)
- (let [uri (cfg/resolve-file-media image)]
- [:div {:class (stl/css :color-bullet-wrapper)
- :style {:background-image (str/ffmt "url(%)" uri)}}])
-
- :else
- [:div {:class (stl/css :color-bullet-wrapper)}
- [:div {:class (stl/css :color-bullet-left)
- :style {:background (uc/color->background (assoc color :opacity 1))}}]
- [:div {:class (stl/css :color-bullet-right)
- :style {:background (uc/color->background color)}}]])]))))
-
-(mf/defc color-name
- {::mf/wrap-props false}
- [{:keys [color size on-click on-double-click origin]}]
- (let [{:keys [name color gradient]} (if (string? color) {:color color :opacity 1} color)]
- (when (or (not size) (> size 64))
- [:span {:class (stl/css-case
- :color-text (and (= origin :palette) (< size 72))
- :small-text (and (= origin :palette) (>= size 64) (< size 72))
- :big-text (and (= origin :palette) (>= size 72))
- :gradient (some? gradient)
- :color-row-name (not= origin :palette))
- :title name
- :on-click on-click
- :on-double-click on-double-click}
- (or name color (uc/gradient-type->string (:type gradient)))])))
diff --git a/frontend/src/app/main/ui/components/context_menu.cljs b/frontend/src/app/main/ui/components/context_menu.cljs
deleted file mode 100644
index 4bf05203e..000000000
--- a/frontend/src/app/main/ui/components/context_menu.cljs
+++ /dev/null
@@ -1,131 +0,0 @@
-;; This Source Code Form is subject to the terms of the Mozilla Public
-;; License, v. 2.0. If a copy of the MPL was not distributed with this
-;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
-;;
-;; Copyright (c) KALEIDOS INC
-
-(ns app.main.ui.components.context-menu
- (:require
- [app.common.data :as d]
- [app.common.data.macros :as dm]
- [app.main.refs :as refs]
- [app.main.ui.components.dropdown :refer [dropdown']]
- [app.main.ui.icons :as i]
- [app.util.dom :as dom]
- [app.util.i18n :as i18n :refer [tr]]
- [app.util.object :as obj]
- [goog.object :as gobj]
- [rumext.v2 :as mf]))
-
-(mf/defc context-menu
- {::mf/wrap-props false}
- [props]
- (assert (fn? (gobj/get props "on-close")) "missing `on-close` prop")
- (assert (boolean? (gobj/get props "show")) "missing `show` prop")
- (assert (vector? (gobj/get props "options")) "missing `options` prop")
-
- (let [open? (gobj/get props "show")
- on-close (gobj/get props "on-close")
- options (gobj/get props "options")
- is-selectable (gobj/get props "selectable")
- selected (gobj/get props "selected")
- top (gobj/get props "top" 0)
- left (gobj/get props "left" 0)
- fixed? (gobj/get props "fixed?" false)
- min-width? (gobj/get props "min-width?" false)
- route (mf/deref refs/route)
- in-dashboard? (= :dashboard-projects (:name (:data route)))
-
- local (mf/use-state {:offset-y 0
- :offset-x 0
- :levels nil})
-
- on-local-close
- (mf/use-callback
- (fn []
- (swap! local assoc :levels [{:parent-option nil
- :options options}])
- (on-close)))
-
- check-menu-offscreen
- (mf/use-callback
- (mf/deps top (:offset-y @local) left (:offset-x @local))
- (fn [node]
- (when (some? node)
- (let [bounding_rect (dom/get-bounding-rect node)
- window_size (dom/get-window-size)
- {node-height :height node-width :width} bounding_rect
- {window-height :height window-width :width} window_size
- target-offset-y (if (> (+ top node-height) window-height)
- (- node-height)
- 0)
- target-offset-x (if (> (+ left node-width) window-width)
- (- node-width)
- 0)]
-
- (when (or (not= target-offset-y (:offset-y @local)) (not= target-offset-x (:offset-x @local)))
- (swap! local assoc :offset-y target-offset-y :offset-x target-offset-x))))))
-
- enter-submenu
- (mf/use-callback
- (mf/deps options)
- (fn [option-name sub-options]
- (fn [event]
- (dom/stop-propagation event)
- (swap! local update :levels
- conj {:parent-option option-name
- :options sub-options}))))
-
- exit-submenu
- (mf/use-callback
- (fn [event]
- (dom/stop-propagation event)
- (swap! local update :levels pop)))
-
- props (obj/merge props #js {:on-close on-local-close})]
-
- (mf/use-effect
- (mf/deps options)
- #(swap! local assoc :levels [{:parent-option nil
- :options options}]))
-
- (when (and open? (some? (:levels @local)))
- [:> dropdown' props
- [:div.context-menu {:class (dom/classnames :is-open open?
- :fixed fixed?
- :is-selectable is-selectable)
- :style {:top (+ top (:offset-y @local))
- :left (+ left (:offset-x @local))}}
- (let [level (-> @local :levels peek)]
- [:ul.context-menu-items {:class (dom/classnames :min-width min-width?)
- :ref check-menu-offscreen}
- (when-let [parent-option (:parent-option level)]
- [:*
- [:li.context-menu-item
- [:a.context-menu-action.submenu-back
- {:data-no-close true
- :on-click exit-submenu}
- [:span i/arrow-slide]
- parent-option]]
- [:li.separator]])
- (for [[index [option-name option-handler sub-options data-test]] (d/enumerate (:options level))]
- (when option-name
- (if (= option-name :separator)
- [:li.separator {:key (dm/str "context-item-" index)}]
- [:li.context-menu-item
- {:class (dom/classnames :is-selected (and selected (= option-name selected)))
- :key (dm/str "context-item-" index)}
- (if-not sub-options
- [:a.context-menu-action {:on-click #(do (dom/stop-propagation %)
- (on-close)
- (option-handler %))
- :data-test data-test}
- (if (and in-dashboard? (= option-name "Default"))
- (tr "dashboard.default-team-name")
- option-name)]
- [:a.context-menu-action.submenu
- {:data-no-close true
- :on-click (enter-submenu option-name sub-options)
- :data-test data-test}
- option-name
- [:span i/arrow-slide]])])))])]])))
diff --git a/frontend/src/app/main/ui/components/context_menu_a11y.cljs b/frontend/src/app/main/ui/components/context_menu_a11y.cljs
index f6fd0c424..0787b69e7 100644
--- a/frontend/src/app/main/ui/components/context_menu_a11y.cljs
+++ b/frontend/src/app/main/ui/components/context_menu_a11y.cljs
@@ -220,7 +220,7 @@
[:button {:class (stl/css :context-menu-action :submenu-back)
:data-no-close true
:on-click exit-submenu}
- [:span {:class (stl/css :submenu-icon-back)} i/arrow-refactor]
+ [:span {:class (stl/css :submenu-icon-back)} i/arrow]
parent-option]]
[:li {:class (stl/css :separator)}]])
@@ -257,14 +257,14 @@
option-name)
(when (and selected (= data-test selected))
- [:span {:class (stl/css :selected-icon)} i/tick-refactor])]
+ [:span {:class (stl/css :selected-icon)} i/tick])]
[:a {:class (stl/css :context-menu-action :submenu)
:data-no-close true
:on-click (enter-submenu option-name sub-options)
:data-test data-test}
option-name
- [:span {:class (stl/css :submenu-icon)} i/arrow-refactor]])]))))])])])))
+ [:span {:class (stl/css :submenu-icon)} i/arrow]])]))))])])])))
(mf/defc context-menu-a11y
{::mf/wrap-props false}
diff --git a/frontend/src/app/main/ui/components/context_menu_a11y.scss b/frontend/src/app/main/ui/components/context_menu_a11y.scss
index ed007261c..ea8a89cc5 100644
--- a/frontend/src/app/main/ui/components/context_menu_a11y.scss
+++ b/frontend/src/app/main/ui/components/context_menu_a11y.scss
@@ -10,7 +10,7 @@
position: relative;
visibility: hidden;
opacity: $op-0;
- z-index: $z-index-3;
+ z-index: $z-index-4;
&.is-open {
position: relative;
diff --git a/frontend/src/app/main/ui/components/copy_button.cljs b/frontend/src/app/main/ui/components/copy_button.cljs
index c9456acff..912fcb9f9 100644
--- a/frontend/src/app/main/ui/components/copy_button.cljs
+++ b/frontend/src/app/main/ui/components/copy_button.cljs
@@ -43,5 +43,5 @@
children
[:span {:class (stl/css :icon-btn)}
(if active?
- i/tick-refactor
- i/clipboard-refactor)]]))
+ i/tick
+ i/clipboard)]]))
diff --git a/frontend/src/app/main/ui/components/editable_label.cljs b/frontend/src/app/main/ui/components/editable_label.cljs
index 0b5930c92..32f8b3eb0 100644
--- a/frontend/src/app/main/ui/components/editable_label.cljs
+++ b/frontend/src/app/main/ui/components/editable_label.cljs
@@ -97,7 +97,7 @@
[:span {:class (stl/css :editable-label-close)
:on-click cancel-edition}
- i/delete-text-refactor]]
+ i/delete-text]]
[:span {:class final-class
:title tooltip
diff --git a/frontend/src/app/main/ui/components/editable_select.cljs b/frontend/src/app/main/ui/components/editable_select.cljs
index a39ea201c..614fd7002 100644
--- a/frontend/src/app/main/ui/components/editable_select.cljs
+++ b/frontend/src/app/main/ui/components/editable_select.cljs
@@ -180,7 +180,7 @@
[:span {:class (stl/css :dropdown-button)
:on-click toggle-dropdown}
- i/arrow-refactor]
+ i/arrow]
[:& dropdown {:show (or is-open? false)
:on-close close-dropdown}
@@ -199,4 +199,4 @@
:on-click select-item}
[:span {:class (stl/css :label)} label]
[:span {:class (stl/css :check-icon)}
- i/tick-refactor]])))]]]))
+ i/tick]])))]]]))
diff --git a/frontend/src/app/main/ui/components/forms.cljs b/frontend/src/app/main/ui/components/forms.cljs
index b7ad29e5f..7d1ad4a46 100644
--- a/frontend/src/app/main/ui/components/forms.cljs
+++ b/frontend/src/app/main/ui/components/forms.cljs
@@ -52,11 +52,11 @@
help-icon' (cond
(and (= input-type "password")
(= @type' "password"))
- i/shown-refactor
+ i/shown
(and (= input-type "password")
(= @type' "text"))
- i/hide-refactor
+ i/hide
:else
help-icon)
@@ -125,7 +125,7 @@
:for (name input-name)} label
(when is-checkbox?
- [:span {:class (stl/css-case :global/checked checked?)} (when checked? i/status-tick-refactor)])
+ [:span {:class (stl/css-case :global/checked checked?)} (when checked? i/status-tick)])
(if is-checkbox?
[:> :input props]
@@ -140,11 +140,11 @@
(when show-valid?
[:span {:class (stl/css :valid-icon)}
- i/tick-refactor])
+ i/tick])
(when show-invalid?
[:span {:class (stl/css :invalid-icon)}
- i/close-refactor])])]
+ i/close])])]
(some? children)
[:label {:for (name input-name)}
@@ -372,7 +372,10 @@
in-klass (str class " "
(stl/css-case
:inside-input true
- :no-padding (pos? (count @items))))
+ :no-padding (pos? (count @items))
+ :invalid (and (some? valid-item-fn)
+ touched?
+ (not (valid-item-fn @value)))))
on-focus
(mf/use-fn #(reset! focus? true))
@@ -394,27 +397,38 @@
(mf/use-fn
(mf/deps @value)
(fn [event]
- (cond
- (or (kbd/enter? event)
- (kbd/comma? event))
- (do
- (dom/prevent-default event)
- (dom/stop-propagation event)
- (let [val (cond-> @value trim str/trim)]
+ (let [val (cond-> @value trim str/trim)]
+ (cond
+ (or (kbd/enter? event) (kbd/comma? event) (kbd/space? event))
+ (do
+ (dom/prevent-default event)
+ (dom/stop-propagation event)
+
+ ;; Once enter/comma is pressed we mark it as touched
+ (swap! form assoc-in [:touched input-name] true)
+
+ ;; Empty values means "submit" the form (whent some items have been added
(when (and (kbd/enter? event) (str/empty? @value) (not-empty @items))
(on-submit form))
- (when (not (str/empty? @value))
- (reset! value "")
- (swap! items conj-dedup {:text val
- :valid (valid-item-fn val)
- :caution (caution-item-fn val)}))))
- (and (kbd/backspace? event)
- (str/empty? @value))
- (do
- (dom/prevent-default event)
- (dom/stop-propagation event)
- (swap! items (fn [items] (if (c/empty? items) items (pop items))))))))
+ ;; If we have a string in the input we add it only if valid
+ (when (and (valid-item-fn val) (not (str/empty? @value)))
+ (reset! value "")
+
+ ;; Once added the form is back as "untouched"
+ (swap! form assoc-in [:touched input-name] false)
+
+ ;; This split will allow users to copy comma/space separated values of emails
+ (doseq [val (str/split val #",|\s+")]
+ (swap! items conj-dedup {:text (str/trim val)
+ :valid (valid-item-fn val)
+ :caution (caution-item-fn val)}))))
+
+ (and (kbd/backspace? event) (str/empty? @value))
+ (do
+ (dom/prevent-default event)
+ (dom/stop-propagation event)
+ (swap! items (fn [items] (if (c/empty? items) items (pop items)))))))))
on-blur
(mf/use-fn
@@ -465,7 +479,7 @@
:caution (:caution item))}
[:span {:class (stl/css :text)} (:text item)]
[:button {:class (stl/css :icon)
- :on-click #(remove-item! item)} i/close-refactor]]])])]))
+ :on-click #(remove-item! item)} i/close]]])])]))
;; --- Validators
diff --git a/frontend/src/app/main/ui/components/forms.scss b/frontend/src/app/main/ui/components/forms.scss
index c9e09ec19..53db07493 100644
--- a/frontend/src/app/main/ui/components/forms.scss
+++ b/frontend/src/app/main/ui/components/forms.scss
@@ -263,6 +263,7 @@
:disabled {
@extend .button-disabled;
+ min-height: $s-32;
}
// MULTI INPUT
@@ -293,6 +294,13 @@
outline: none;
border: $s-1 solid var(--input-border-color-focus);
}
+ &.invalid {
+ border: $s-1 solid var(--input-border-color-error);
+ &:hover,
+ &:focus {
+ border: $s-1 solid var(--input-border-color-error);
+ }
+ }
}
label {
display: none;
@@ -336,7 +344,7 @@
color: var(--alert-text-foreground-color-error);
}
.icon svg {
- stroke: var(--alert-icon-foreground-color-error);
+ stroke: var(--alert-text-foreground-color-error);
}
}
}
diff --git a/frontend/src/app/main/ui/components/numeric_input.cljs b/frontend/src/app/main/ui/components/numeric_input.cljs
index 308ef8e42..134a01440 100644
--- a/frontend/src/app/main/ui/components/numeric_input.cljs
+++ b/frontend/src/app/main/ui/components/numeric_input.cljs
@@ -152,7 +152,7 @@
handle-key-down
(mf/use-fn
- (mf/deps set-delta apply-value update-input)
+ (mf/deps set-delta apply-value update-input parse-value)
(fn [event]
(mf/set-ref-val! dirty-ref true)
(let [up? (kbd/up-arrow? event)
@@ -162,13 +162,14 @@
node (mf/ref-val ref)]
(when (or up? down?)
(set-delta event up? down?))
+ (reset! last-value* (parse-value))
(when enter?
(dom/blur! node))
(when esc?
(update-input value-str)
(dom/blur! node)))))
- handle-key-up
+ handle-change
(mf/use-fn
(mf/deps parse-value)
(fn []
@@ -224,14 +225,13 @@
(obj/unset! "selectOnFocus")
(obj/unset! "nillable")
(obj/set! "value" mf/undefined)
- (obj/set! "onChange" mf/undefined)
+ (obj/set! "onChange" handle-change)
(obj/set! "className" class)
(obj/set! "type" "text")
(obj/set! "ref" ref)
(obj/set! "defaultValue" (fmt/format-number value))
(obj/set! "title" title)
(obj/set! "onKeyDown" handle-key-down)
- (obj/set! "onKeyUp" handle-key-up)
(obj/set! "onBlur" handle-blur)
(obj/set! "onFocus" handle-focus))]
diff --git a/frontend/src/app/main/ui/components/search_bar.cljs b/frontend/src/app/main/ui/components/search_bar.cljs
index 0db4f1a87..0fb73303c 100644
--- a/frontend/src/app/main/ui/components/search_bar.cljs
+++ b/frontend/src/app/main/ui/components/search_bar.cljs
@@ -62,4 +62,4 @@
(when (not= "" value)
[:button {:class (stl/css :clear)
:on-click handle-clear}
- i/delete-text-refactor])]]))
+ i/delete-text])]]))
diff --git a/frontend/src/app/main/ui/components/select.cljs b/frontend/src/app/main/ui/components/select.cljs
index 51c7874b4..0187499e6 100644
--- a/frontend/src/app/main/ui/components/select.cljs
+++ b/frontend/src/app/main/ui/components/select.cljs
@@ -104,7 +104,7 @@
(when (and current-icon current-icon-ref)
[:span {:class (stl/css :current-icon)} current-icon-ref])
[:span {:class (stl/css :current-label)} current-label]
- [:span {:class (stl/css :dropdown-button)} i/arrow-refactor]
+ [:span {:class (stl/css :dropdown-button)} i/arrow]
[:& dropdown {:show is-open? :on-close close-dropdown}
[:ul {:ref dropdown-element* :data-direction @dropdown-direction*
:class (dm/str dropdown-class " " (stl/css :custom-select-dropdown))}
@@ -126,4 +126,4 @@
:on-click select-item}
(when (and icon icon-ref) [:span {:class (stl/css :icon)} icon-ref])
[:span {:class (stl/css :label)} label]
- [:span {:class (stl/css :check-icon)} i/tick-refactor]])))]]])))
+ [:span {:class (stl/css :check-icon)} i/tick]])))]]])))
diff --git a/frontend/src/app/main/ui/components/shape_icon.cljs b/frontend/src/app/main/ui/components/shape_icon.cljs
new file mode 100644
index 000000000..060213681
--- /dev/null
+++ b/frontend/src/app/main/ui/components/shape_icon.cljs
@@ -0,0 +1,65 @@
+;; This Source Code Form is subject to the terms of the Mozilla Public
+;; License, v. 2.0. If a copy of the MPL was not distributed with this
+;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
+;;
+;; Copyright (c) KALEIDOS INC
+
+(ns app.main.ui.components.shape-icon
+ (:require
+ [app.common.types.component :as ctk]
+ [app.common.types.shape :as cts]
+ [app.common.types.shape.layout :as ctl]
+ [app.main.ui.icons :as i]
+ [rumext.v2 :as mf]))
+
+(mf/defc element-icon
+ {::mf/wrap-props false}
+ [{:keys [shape main-instance?]}]
+ (if (ctk/instance-head? shape)
+ (if main-instance?
+ i/component
+ i/component-copy)
+ (case (:type shape)
+ :frame (cond
+ (and (ctl/flex-layout? shape) (ctl/col? shape))
+ i/flex-horizontal
+
+ (and (ctl/flex-layout? shape) (ctl/row? shape))
+ i/flex-vertical
+
+ (ctl/grid-layout? shape)
+ i/flex-grid
+
+ :else
+ i/board)
+ ;; TODO -> THUMBNAIL ICON
+ :image i/img
+ :line (if (cts/has-images? shape) i/img i/path)
+ :circle (if (cts/has-images? shape) i/img i/elipse)
+ :path (if (cts/has-images? shape) i/img i/path)
+ :rect (if (cts/has-images? shape) i/img i/rectangle)
+ :text i/text
+ :group (if (:masked-group shape)
+ i/mask
+ i/group)
+ :bool (case (:bool-type shape)
+ :difference i/boolean-difference
+ :exclude i/boolean-exclude
+ :intersection i/boolean-intersection
+ #_:default i/boolean-union)
+ :svg-raw i/img
+ nil)))
+
+
+(mf/defc element-icon-by-type
+ [{:keys [type main-instance?] :as props}]
+ (if main-instance?
+ i/component
+ (case type
+ :frame i/board
+ :image i/img
+ :shape i/path
+ :text i/text
+ :mask i/mask
+ :group i/group
+ nil)))
diff --git a/frontend/src/app/main/ui/components/shape_icon_refactor.cljs b/frontend/src/app/main/ui/components/shape_icon_refactor.cljs
deleted file mode 100644
index d4a9cf927..000000000
--- a/frontend/src/app/main/ui/components/shape_icon_refactor.cljs
+++ /dev/null
@@ -1,65 +0,0 @@
-;; This Source Code Form is subject to the terms of the Mozilla Public
-;; License, v. 2.0. If a copy of the MPL was not distributed with this
-;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
-;;
-;; Copyright (c) KALEIDOS INC
-
-(ns app.main.ui.components.shape-icon-refactor
- (:require
- [app.common.types.component :as ctk]
- [app.common.types.shape :as cts]
- [app.common.types.shape.layout :as ctl]
- [app.main.ui.icons :as i]
- [rumext.v2 :as mf]))
-
-(mf/defc element-icon-refactor
- {::mf/wrap-props false}
- [{:keys [shape main-instance?]}]
- (if (ctk/instance-head? shape)
- (if main-instance?
- i/component-refactor
- i/copy-refactor)
- (case (:type shape)
- :frame (cond
- (and (ctl/flex-layout? shape) (ctl/col? shape))
- i/flex-horizontal-refactor
-
- (and (ctl/flex-layout? shape) (ctl/row? shape))
- i/flex-vertical-refactor
-
- (ctl/grid-layout? shape)
- i/flex-grid-refactor
-
- :else
- i/board-refactor)
- ;; TODO -> THUMBNAIL ICON
- :image i/img-refactor
- :line (if (cts/has-images? shape) i/img-refactor i/path-refactor)
- :circle (if (cts/has-images? shape) i/img-refactor i/elipse-refactor)
- :path (if (cts/has-images? shape) i/img-refactor i/path-refactor)
- :rect (if (cts/has-images? shape) i/img-refactor i/rectangle-refactor)
- :text i/text-refactor
- :group (if (:masked-group shape)
- i/mask-refactor
- i/group-refactor)
- :bool (case (:bool-type shape)
- :difference i/boolean-difference-refactor
- :exclude i/boolean-exclude-refactor
- :intersection i/boolean-intersection-refactor
- #_:default i/boolean-union-refactor)
- :svg-raw i/img-refactor
- nil)))
-
-
-(mf/defc element-icon-refactor-by-type
- [{:keys [type main-instance?] :as props}]
- (if main-instance?
- i/component-refactor
- (case type
- :frame i/board-refactor
- :image i/img-refactor
- :shape i/path-refactor
- :text i/text-refactor
- :mask i/mask-refactor
- :group i/group-refactor
- nil)))
diff --git a/frontend/src/app/main/ui/components/tab_container.cljs b/frontend/src/app/main/ui/components/tab_container.cljs
index 495ceeec2..4dae9d52b 100644
--- a/frontend/src/app/main/ui/components/tab_container.cljs
+++ b/frontend/src/app/main/ui/components/tab_container.cljs
@@ -48,7 +48,7 @@
{:on-click handle-collapse
:class (stl/css :collapse-sidebar)
:aria-label (tr "workspace.sidebar.collapse")}
- i/arrow-refactor])
+ i/arrow])
[:div {:class (stl/css :tab-container-tab-wrapper)}
(for [tab children]
(let [props (.-props tab)
diff --git a/frontend/src/app/main/ui/components/tab_container.scss b/frontend/src/app/main/ui/components/tab_container.scss
index 86ac4c4f3..7c9b08b52 100644
--- a/frontend/src/app/main/ui/components/tab_container.scss
+++ b/frontend/src/app/main/ui/components/tab_container.scss
@@ -28,7 +28,7 @@
width: 100%;
.tab-container-tab-title {
@include flexCenter;
- @include uppercaseTitleTipography;
+ @include headlineSmallTypography;
height: 100%;
width: 100%;
padding: 0 $s-8;
diff --git a/frontend/src/app/main/ui/components/title_bar.cljs b/frontend/src/app/main/ui/components/title_bar.cljs
index 45a23a975..04e621133 100644
--- a/frontend/src/app/main/ui/components/title_bar.cljs
+++ b/frontend/src/app/main/ui/components/title_bar.cljs
@@ -12,7 +12,7 @@
[rumext.v2 :as mf]))
(def ^:private chevron-icon
- (i/icon-xref :arrow-refactor (stl/css :chevron-icon)))
+ (i/icon-xref :arrow (stl/css :chevron-icon)))
(mf/defc title-bar
{::mf/props :obj}
diff --git a/frontend/src/app/main/ui/components/title_bar.scss b/frontend/src/app/main/ui/components/title_bar.scss
index 2ff458ded..c6882c4e0 100644
--- a/frontend/src/app/main/ui/components/title_bar.scss
+++ b/frontend/src/app/main/ui/components/title_bar.scss
@@ -19,10 +19,11 @@
.title,
.title-only,
.inspect-title {
- @include uppercaseTitleTipography;
- display: flex;
+ @include headlineSmallTypography;
+ display: grid;
align-items: center;
- flex-grow: 1;
+ justify-content: flex-start;
+ grid-auto-flow: column;
height: 100%;
min-height: $s-32;
color: var(--title-foreground-color);
@@ -30,7 +31,8 @@
}
.title-only {
- margin-left: $s-8;
+ --title-bar-title-margin: #{$s-8};
+ margin-inline-start: var(--title-bar-title-margin);
}
.inspect-title {
@@ -66,23 +68,6 @@
}
}
-.title,
-.title-only {
- @include uppercaseTitleTipography;
- display: flex;
- align-items: center;
- flex-grow: 1;
- height: 100%;
- min-height: $s-32;
- color: var(--title-foreground-color);
- overflow: hidden;
-}
-
-.title-only {
- --title-bar-title-margin: #{$s-8};
- margin-inline-start: var(--title-bar-title-margin);
-}
-
.title-only-icon-gap {
--title-bar-title-margin: #{$s-12};
}
diff --git a/frontend/src/app/main/ui/confirm.cljs b/frontend/src/app/main/ui/confirm.cljs
index cfce7c2c1..66fd00e92 100644
--- a/frontend/src/app/main/ui/confirm.cljs
+++ b/frontend/src/app/main/ui/confirm.cljs
@@ -70,7 +70,7 @@
[:div {:class (stl/css :modal-header)}
[:h2 {:class (stl/css :modal-title)} title]
[:button {:class (stl/css :modal-close-btn)
- :on-click cancel-fn} i/close-refactor]]
+ :on-click cancel-fn} i/close]]
[:div {:class (stl/css :modal-content)}
(when (and (string? message) (not= message ""))
@@ -87,7 +87,7 @@
(for [item items]
[:li {:class (stl/css :modal-item-element)}
[:span {:class (stl/css :modal-component-icon)}
- i/component-refactor]
+ i/component]
[:span {:class (stl/css :modal-component-name)}
(:name item)]])]])]
diff --git a/frontend/src/app/main/ui/dashboard.cljs b/frontend/src/app/main/ui/dashboard.cljs
index 29c41f8e9..4adec8d15 100644
--- a/frontend/src/app/main/ui/dashboard.cljs
+++ b/frontend/src/app/main/ui/dashboard.cljs
@@ -58,6 +58,9 @@
project-id (:id project)
team-id (:id team)
+ dashboard-local (mf/deref refs/dashboard-local)
+ file-menu-open? (:menu-open dashboard-local)
+
default-project-id
(mf/with-memo [projects]
(->> (vals projects)
@@ -83,6 +86,7 @@
[:div {:class (stl/css :dashboard-content)
+ :style {:pointer-events (when file-menu-open? "none")}
:on-click clear-selected-fn :ref container}
(case section
:dashboard-projects
diff --git a/frontend/src/app/main/ui/dashboard.scss b/frontend/src/app/main/ui/dashboard.scss
index fdf2d0d69..bad41ea11 100644
--- a/frontend/src/app/main/ui/dashboard.scss
+++ b/frontend/src/app/main/ui/dashboard.scss
@@ -7,6 +7,7 @@
@use "refactor/common-refactor.scss" as *;
.dashboard {
+ @extend .new-scrollbar;
background-color: var(--app-background);
display: grid;
grid-template-columns: $s-40 $s-256 1fr;
@@ -20,8 +21,8 @@
}
.dashboard-content {
- display: flex;
- flex-direction: column;
+ display: grid;
+ grid-template-rows: $s-64 1fr;
position: relative;
grid-row: 1 / span 2;
padding: $s-16 $s-16 0 0;
diff --git a/frontend/src/app/main/ui/dashboard/change_owner.cljs b/frontend/src/app/main/ui/dashboard/change_owner.cljs
index cae033df3..b3a8e04d2 100644
--- a/frontend/src/app/main/ui/dashboard/change_owner.cljs
+++ b/frontend/src/app/main/ui/dashboard/change_owner.cljs
@@ -29,10 +29,13 @@
members-map (mf/deref refs/dashboard-team-members)
members (vals members-map)
- options (into [{:value ""
- :label (tr "modals.leave-and-reassign.select-member-to-promote")}]
- (filter #(not= (:label %) (:fullname profile))
- (map #(hash-map :label (:name %) :value (str (:id %))) members)))
+ options
+ (into [{:value ""
+ :label (tr "modals.leave-and-reassign.select-member-to-promote")}]
+ (comp
+ (filter #(not= (:email %) (:email profile)))
+ (map #(hash-map :label (:name %) :value (str (:id %)))))
+ members)
on-cancel #(st/emit! (modal/hide))
on-accept
@@ -45,7 +48,7 @@
[:div {:class (stl/css :modal-header)}
[:h2 {:class (stl/css :modal-title)} (tr "modals.leave-and-reassign.title")]
[:button {:class (stl/css :modal-close-btn)
- :on-click on-cancel} i/close-refactor]]
+ :on-click on-cancel} i/close]]
[:div {:class (stl/css :modal-content)}
[:p {:class (stl/css :modal-msg)}
diff --git a/frontend/src/app/main/ui/dashboard/comments.cljs b/frontend/src/app/main/ui/dashboard/comments.cljs
index aa55bddf8..f200d98f9 100644
--- a/frontend/src/app/main/ui/dashboard/comments.cljs
+++ b/frontend/src/app/main/ui/dashboard/comments.cljs
@@ -20,6 +20,17 @@
[potok.v2.core :as ptk]
[rumext.v2 :as mf]))
+
+(def ^:private close-icon
+ (i/icon-xref :close (stl/css :close-icon)))
+
+(def ^:private comments-icon-svg
+ (i/icon-xref :comments (stl/css :comments-icon)))
+
+
+(def ^:private comments-icon-small
+ (i/icon-xref :comments (stl/css :comments-icon-small)))
+
(mf/defc comments-icon
[{:keys [profile show? on-show-comments]}]
@@ -44,10 +55,10 @@
:on-click on-show-comments
:on-key-down handle-keydown
:data-test "open-comments"
- :class (stl/css-case :button true
+ :class (stl/css-case :comment-button true
:open show?
:unread (boolean (seq tgroups)))}
- i/comments-refactor]]))
+ comments-icon-small]]))
(mf/defc comments-section
[{:keys [profile team show? on-hide-comments]}]
@@ -90,12 +101,12 @@
[:& dropdown {:show show? :on-close on-hide-comments}
[:div {:class (stl/css :dropdown :comments-section :comment-threads-section)}
[:div {:class (stl/css :header)}
- [:h3 (tr "labels.comments")]
- [:button
- {:class (stl/css :close)
- :tab-index (if show? "0" "-1")
- :on-click on-hide-comments
- :on-key-down handle-keydown} i/close]]
+ [:h3 {:class (stl/css :header-title)} (tr "labels.comments")]
+ [:button {:class (stl/css :close-btn)
+ :tab-index (if show? "0" "-1")
+ :on-click on-hide-comments
+ :on-key-down handle-keydown}
+ close-icon]]
(if (seq tgroups)
[:div {:class (stl/css :thread-groups)}
@@ -113,5 +124,5 @@
:key (:page-id tgroup)}])]
[:div {:class (stl/css :thread-groups-placeholder)}
- i/comments-refactor
+ comments-icon-svg
(tr "labels.no-comments-available")])]]]))
diff --git a/frontend/src/app/main/ui/dashboard/comments.scss b/frontend/src/app/main/ui/dashboard/comments.scss
index 70b96cdae..b6e872e52 100644
--- a/frontend/src/app/main/ui/dashboard/comments.scss
+++ b/frontend/src/app/main/ui/dashboard/comments.scss
@@ -7,17 +7,9 @@
@use "common/refactor/common-refactor.scss" as *;
.dashboard-comments-section {
- display: flex;
- align-items: center;
- justify-content: center;
+ @include flexCenter;
position: relative;
border-radius: $br-8;
-
- button {
- cursor: pointer;
- background: none;
- border: none;
- }
}
.thread-groups {
@@ -25,13 +17,6 @@
overflow-y: scroll;
max-height: $s-440;
overflow: auto;
-
- hr {
- background-color: $df-primary;
- border: 0;
- height: $s-1;
- margin: 0;
- }
}
.thread-group {
@@ -48,45 +33,40 @@
padding: $s-24;
text-align: center;
color: $df-secondary;
-
- svg {
- stroke: $df-secondary;
- fill: none;
- height: $s-24;
- margin-bottom: $s-24;
- width: $s-24;
- }
}
-.button {
- display: flex;
- align-items: center;
- justify-content: center;
+.comments-icon {
+ @extend .button-icon;
+ stroke: var(--icon-foreground);
+ height: $s-24;
+ width: $s-24;
+ margin-bottom: $s-24;
+}
+
+.comment-button {
+ @include buttonStyle;
+ @include flexCenter;
border-radius: $br-8;
height: $s-32;
width: $s-32;
+ --comment-icon-small-foreground-color: var(--icon-foreground);
- svg {
- width: $s-16;
- height: $s-16;
- stroke: $df-secondary;
- fill: none;
- }
-
- &.unread svg,
- &.open svg {
- stroke: $da-tertiary;
+ &.unread,
+ &.open {
+ --comment-icon-small-foreground-color: var(--icon-foreground-selected);
}
&:hover {
background-color: $db-quaternary;
-
- svg {
- stroke: $da-primary;
- }
+ --comment-icon-small-foreground-color: var(--icon-foreground-active);
}
}
+.comments-icon-small {
+ @extend .button-icon;
+ stroke: var(--comment-icon-small-foreground-color);
+}
+
.dropdown {
@include menuShadow;
background-color: $db-tertiary;
@@ -98,7 +78,7 @@
min-height: $s-200;
position: absolute;
width: 100%;
- z-index: $z-index-3;
+ z-index: $z-index-4;
hr {
margin: 0;
@@ -111,24 +91,22 @@
height: $s-40;
align-items: center;
padding: 0 $s-12;
-
- h3 {
- color: $df-secondary;
- font-size: $fs-11;
- line-height: 1.28;
- flex-grow: 1;
- text-transform: uppercase;
- }
-
- .close {
- display: flex;
- align-items: center;
- cursor: pointer;
- svg {
- width: $s-16;
- height: $s-16;
- transform: rotate(45deg);
- fill: $df-secondary;
- }
- }
+}
+
+.header-title {
+ color: $df-secondary;
+ font-size: $fs-11;
+ line-height: 1.28;
+ flex-grow: 1;
+ text-transform: uppercase;
+}
+
+.close-btn {
+ @include buttonStyle;
+ @include flexCenter;
+}
+
+.close-icon {
+ @extend .button-icon;
+ stroke: var(--icon-foreground);
}
diff --git a/frontend/src/app/main/ui/dashboard/files.cljs b/frontend/src/app/main/ui/dashboard/files.cljs
index 049688c2b..afee2564d 100644
--- a/frontend/src/app/main/ui/dashboard/files.cljs
+++ b/frontend/src/app/main/ui/dashboard/files.cljs
@@ -24,6 +24,9 @@
[cuerdas.core :as str]
[rumext.v2 :as mf]))
+(def ^:private menu-icon
+ (i/icon-xref :menu (stl/css :menu-icon)))
+
(mf/defc header
[{:keys [project create-fn] :as props}]
(let [local (mf/use-state
@@ -92,14 +95,13 @@
:on-import on-import}]
[:div {:class (stl/css :dashboard-header-actions)}
- [:a
- {:class (stl/css :btn-secondary :btn-small :new-file)
- :tab-index "0"
- :on-click on-create-click
- :data-test "new-file"
- :on-key-down (fn [event]
- (when (kbd/enter? event)
- (on-create-click event)))}
+ [:a {:class (stl/css :btn-secondary :btn-small :new-file)
+ :tab-index "0"
+ :on-click on-create-click
+ :data-test "new-file"
+ :on-key-down (fn [event]
+ (when (kbd/enter? event)
+ (on-create-click event)))}
(tr "dashboard.new-file")]
(when-not (:is-default project)
@@ -109,15 +111,14 @@
:on-click toggle-pin
:on-key-down (fn [event] (when (kbd/enter? event) (toggle-pin event)))}])
- [:div
- {:class (stl/css :icon :tooltip :tooltip-bottom-left)
- :tab-index "0"
- :on-click on-menu-click
- :alt (tr "dashboard.options")
- :on-key-down (fn [event]
- (when (kbd/enter? event)
- (on-menu-click event)))}
- i/actions]]]))
+ [:div {:class (stl/css :icon)
+ :tab-index "0"
+ :on-click on-menu-click
+ :title (tr "dashboard.options")
+ :on-key-down (fn [event]
+ (when (kbd/enter? event)
+ (on-menu-click event)))}
+ menu-icon]]]))
(mf/defc files-section
[{:keys [project team] :as props}]
diff --git a/frontend/src/app/main/ui/dashboard/files.scss b/frontend/src/app/main/ui/dashboard/files.scss
index 4473dab6a..98cf1733e 100644
--- a/frontend/src/app/main/ui/dashboard/files.scss
+++ b/frontend/src/app/main/ui/dashboard/files.scss
@@ -30,3 +30,8 @@
.new-file {
margin-inline-end: $s-8;
}
+
+.menu-icon {
+ @extend .button-icon;
+ stroke: var(--icon-foreground);
+}
diff --git a/frontend/src/app/main/ui/dashboard/fonts.cljs b/frontend/src/app/main/ui/dashboard/fonts.cljs
index bdd8e5ede..be6cd908f 100644
--- a/frontend/src/app/main/ui/dashboard/fonts.cljs
+++ b/frontend/src/app/main/ui/dashboard/fonts.cljs
@@ -25,108 +25,143 @@
[cuerdas.core :as str]
[rumext.v2 :as mf]))
-(defn- use-set-page-title
+(defn- use-page-title
[team section]
- (mf/use-effect
- (mf/deps team)
- (fn []
- (when team
- (let [tname (if (:is-default team)
- (tr "dashboard.your-penpot")
- (:name team))]
- (case section
- :fonts (dom/set-html-title (tr "title.dashboard.fonts" tname))
- :providers (dom/set-html-title (tr "title.dashboard.font-providers" tname))))))))
+ (mf/with-effect [team]
+ (when team
+ (let [tname (if (:is-default team)
+ (tr "dashboard.your-penpot")
+ (:name team))]
+ (case section
+ :fonts (dom/set-html-title (tr "title.dashboard.fonts" tname))
+ :providers (dom/set-html-title (tr "title.dashboard.font-providers" tname)))))))
+
+(defn- bad-font-family-tmp?
+ [font]
+ (and (contains? font :font-family-tmp)
+ (str/blank? (:font-family-tmp font))))
(mf/defc header
- {::mf/wrap [mf/memo]}
- [{:keys [section team] :as props}]
- (use-set-page-title team section)
+ {::mf/props :obj
+ ::mf/memo true
+ ::mf/private true}
+ [{:keys [section team]}]
+ (use-page-title team section)
[:header {:class (stl/css :dashboard-header)}
[:div#dashboard-fonts-title {:class (stl/css :dashboard-title)}
[:h1 (tr "labels.fonts")]]])
(mf/defc font-variant-display-name
+ {::mf/props :obj
+ ::mf/private true}
[{:keys [variant]}]
[:*
[:span (cm/font-weight->name (:font-weight variant))]
(when (not= "normal" (:font-style variant))
[:span " " (str/capital (:font-style variant))])])
-(mf/defc fonts-upload
+(mf/defc uploaded-fonts
+ {::mf/props :obj
+ ::mf/private true}
[{:keys [team installed-fonts] :as props}]
- (let [fonts* (mf/use-state {})
- fonts (deref fonts*)
- input-ref (mf/use-ref)
- uploading (mf/use-state #{})
+ (let [fonts* (mf/use-state {})
+ fonts (deref fonts*)
+ font-vals (mf/with-memo [fonts]
+ (->> fonts
+ (into [] (map val))
+ (not-empty)))
- bad-font-family-tmp?
- (mf/use-fn
- (fn [font]
- (and (contains? font :font-family-tmp)
- (str/blank? (:font-family-tmp font)))))
+ team-id (:id team)
- disable-upload-all? (some bad-font-family-tmp? (vals fonts))
+ input-ref (mf/use-ref)
- handle-click
+ uploading* (mf/use-state #{})
+ uploading (deref uploading*)
+
+ disable-upload-all?
+ (some bad-font-family-tmp? fonts)
+
+ problematic-fonts?
+ (some :height-warning? (vals fonts))
+
+ on-click
(mf/use-fn #(dom/click (mf/ref-val input-ref)))
- handle-selected
+ on-selected
(mf/use-fn
- (mf/deps team installed-fonts)
+ (mf/deps team-id installed-fonts)
(fn [blobs]
- (->> (df/process-upload blobs (:id team))
+ (->> (df/process-upload blobs team-id)
(rx/subs! (fn [result]
(swap! fonts* df/merge-and-group-fonts installed-fonts result))
(fn [error]
(js/console.error "error" error))))))
- on-upload
+ on-upload*
(mf/use-fn
- (mf/deps team)
- (fn [item]
- (swap! uploading conj (:id item))
+ (fn [{:keys [id] :as item}]
+ (swap! uploading* conj id)
(->> (rp/cmd! :create-font-variant item)
(rx/delay-at-least 2000)
(rx/subs! (fn [font]
- (swap! fonts* dissoc (:id item))
- (swap! uploading disj (:id item))
+ (swap! fonts* dissoc id)
+ (swap! uploading* disj id)
(st/emit! (df/add-font font)))
(fn [error]
(js/console.log "error" error))))))
- on-upload-all
- (fn [items]
- (run! on-upload items))
+ on-upload
+ (mf/use-fn
+ (mf/deps fonts on-upload*)
+ (fn [event]
+ (let [id (-> (dom/get-current-target event)
+ (dom/get-data "id")
+ (parse-uuid))
+ item (get fonts id)]
+ (on-upload* item))))
on-blur-name
- (fn [id event]
- (let [name (dom/get-target-val event)]
- (when-not (str/blank? name)
- (swap! fonts* df/rename-and-regroup id name installed-fonts))))
+ (mf/use-fn
+ (mf/deps installed-fonts)
+ (fn [event]
+ (let [target (dom/get-current-target event)
+ id (-> target
+ (dom/get-data "id")
+ (parse-uuid))
+ name (dom/get-value target)]
+ (when-not (str/blank? name)
+ (swap! fonts* df/rename-and-regroup id name installed-fonts)))))
on-change-name
- (fn [id event]
- (let [name (dom/get-target-val event)]
- (swap! fonts* update-in [id] #(assoc % :font-family-tmp name))))
+ (mf/use-fn
+ (fn [event]
+ (let [target (dom/get-current-target event)
+ id (-> target
+ (dom/get-data "id")
+ (parse-uuid))
+ name (dom/get-value target)]
+ (swap! fonts* update id assoc :font-family-tmp name))))
on-delete
(mf/use-fn
(mf/deps team)
- (fn [{:keys [id] :as item}]
- (swap! fonts* dissoc id)))
+ (fn [event]
+ (let [id (-> (dom/get-current-target event)
+ (dom/get-data "id")
+ (parse-uuid))]
+ (swap! fonts* dissoc id))))
- on-dismiss-all
- (fn [items]
- (run! on-delete items))
+ on-upload-all
+ (mf/use-fn
+ (mf/deps font-vals)
+ (fn [_]
+ (run! on-upload* font-vals)))
- problematic-fonts? (some :height-warning? (vals fonts))
-
- handle-upload-all
- (mf/use-fn (mf/deps fonts) #(on-upload-all (vals fonts)))
-
- handle-dismiss-all
- (mf/use-fn (mf/deps fonts) #(on-dismiss-all (vals fonts)))]
+ on-dismis-all
+ (mf/use-fn
+ (mf/deps fonts)
+ (fn [_]
+ (run! #(swap! fonts* dissoc (:id %)) (vals fonts))))]
[:div {:class (stl/css :dashboard-fonts-upload)}
[:div {:class (stl/css :dashboard-fonts-hero)}
@@ -135,14 +170,14 @@
[:& i18n/tr-html {:label "dashboard.fonts.hero-text1"}]
[:button {:class (stl/css :btn-primary)
- :on-click handle-click
+ :on-click on-click
:tab-index "0"}
[:span (tr "labels.add-custom-font")]
[:& file-uploader {:input-id "font-upload"
:accept cm/str-font-types
:multi true
:ref input-ref
- :on-selected handle-selected}]]
+ :on-selected on-selected}]]
[:& context-notification {:content (tr "dashboard.fonts.hero-text2")
:type :default
@@ -154,31 +189,32 @@
:is-html true}])]]
[:*
- (when (some? (vals fonts))
+ (when (seq fonts)
[:div {:class (stl/css :font-item :table-row)}
- [:span (tr "dashboard.fonts.fonts-added" (i18n/c (count (vals fonts))))]
+ [:span (tr "dashboard.fonts.fonts-added" (i18n/c (count fonts)))]
[:div {:class (stl/css :table-field :options)}
- [:button {:class (stl/css-case :btn-primary true
- :disabled disable-upload-all?)
- :on-click handle-upload-all
+ [:button {:class (stl/css-case
+ :btn-primary true
+ :disabled disable-upload-all?)
+ :on-click on-upload-all
:data-test "upload-all"
:disabled disable-upload-all?}
[:span (tr "dashboard.fonts.upload-all")]]
[:button {:class (stl/css :btn-secondary)
- :on-click handle-dismiss-all
+ :on-click on-dismis-all
:data-test "dismiss-all"}
[:span (tr "dashboard.fonts.dismiss-all")]]]])
- (for [item (sort-by :font-family (vals fonts))]
- (let [uploading? (contains? @uploading (:id item))
- disable-upload? (or uploading?
- (bad-font-family-tmp? item))]
+ (for [{:keys [id] :as item} (sort-by :font-family font-vals)]
+ (let [uploading? (contains? uploading id)
+ disable-upload? (or uploading? (bad-font-family-tmp? item))]
[:div {:class (stl/css :font-item :table-row)
- :key (:id item)}
+ :key (dm/str id)}
[:div {:class (stl/css :table-field :family)}
[:input {:type "text"
- :on-blur #(on-blur-name (:id item) %)
- :on-change #(on-change-name (:id item) %)
+ :data-id (dm/str id)
+ :on-blur on-blur-name
+ :on-change on-change-name
:default-value (:font-family item)}]]
[:div {:class (stl/css :table-field :variants)}
[:span {:class (stl/css :label)}
@@ -190,115 +226,151 @@
[:div {:class (stl/css :table-field :options)}
(when (:height-warning? item)
- [:span {:class (stl/css :icon :failure)} i/msg-neutral-refactor])
+ [:span {:class (stl/css :icon :failure)}
+ i/msg-neutral])
- [:button {:on-click #(on-upload item)
- :class (stl/css-case :btn-primary true
- :upload-button true
- :disabled disable-upload?)
+ [:button {:on-click on-upload
+ :data-id (dm/str id)
+ :class (stl/css-case
+ :btn-primary true
+ :upload-button true
+ :disabled disable-upload?)
:disabled disable-upload?}
- (if uploading?
+ (if ^boolean uploading?
(tr "labels.uploading")
(tr "labels.upload"))]
[:span {:class (stl/css :icon :close)
- :on-click #(on-delete item)} i/close-refactor]]]))]]))
+ :data-id (dm/str id)
+ :on-click on-delete}
+ i/close]]]))]]))
+
+(mf/defc installed-font-context-menu
+ {::mf/props :obj
+ ::mf/private true}
+ [{:keys [is-open on-close on-edit on-delete]}]
+ (let [options (mf/with-memo [on-edit on-delete]
+ [{:option-name (tr "labels.edit")
+ :id "font-edit"
+ :option-handler on-edit}
+ {:option-name (tr "labels.delete")
+ :id "font-delete"
+ :option-handler on-delete}])]
+ [:& context-menu-a11y
+ {:on-close on-close
+ :show is-open
+ :fixed? false
+ :min-width? true
+ :top -15
+ :left -115
+ :options options
+ :workspace? false}]))
(mf/defc installed-font
- [{:keys [font-id variants] :as props}]
+ {::mf/props :obj
+ ::mf/private true
+ ::mf/memo true}
+ [{:keys [font-id variants]}]
(let [font (first variants)
- variants (sort-by (fn [item]
- [(:font-weight item)
- (if (= "normal" (:font-style item)) 1 2)])
- variants)
+ menu-open* (mf/use-state false)
+ menu-open? (deref menu-open*)
+ edition* (mf/use-state false)
+ edition? (deref edition*)
- open-menu? (mf/use-state false)
- edit? (mf/use-state false)
state* (mf/use-state (:font-family font))
font-family (deref state*)
+ variants
+ (mf/with-memo [variants]
+ (sort-by (fn [item]
+ [(:font-weight item)
+ (if (= "normal" (:font-style item)) 1 2)])
+ variants))
on-change
- (mf/use-callback
+ (mf/use-fn
(fn [event]
(reset! state* (dom/get-target-val event))))
+ on-edit
+ (mf/use-fn #(reset! edition* true))
+
+ on-menu-open
+ (mf/use-fn #(reset! menu-open* true))
+
+ on-menu-close
+ (mf/use-fn #(reset! menu-open* false))
+
on-save
- (mf/use-callback
+ (mf/use-fn
(mf/deps font-family)
(fn [_]
+ (reset! edition* false)
(when-not (str/blank? font-family)
- (st/emit! (df/update-font {:id font-id :name font-family})))
- (reset! edit? false)))
+ (st/emit! (df/update-font {:id font-id :name font-family})))))
on-key-down
- (mf/use-callback
+ (mf/use-fn
(mf/deps on-save)
(fn [event]
(when (kbd/enter? event)
(on-save event))))
on-cancel
- (mf/use-callback
+ (mf/use-fn
(fn [_]
- (reset! edit? false)
+ (reset! edition* false)
(reset! state* (:font-family font))))
- delete-font-fn
- (mf/use-callback
+ on-delete-font
+ (mf/use-fn
(mf/deps font-id)
(fn []
- (st/emit! (df/delete-font font-id))))
-
- delete-variant-fn
- (mf/use-callback
- (fn [id]
- (st/emit! (df/delete-font-variant id))))
-
- on-delete
- (mf/use-callback
- (mf/deps delete-font-fn)
- (fn []
- (st/emit! (modal/show
- {:type :confirm
- :title (tr "modals.delete-font.title")
- :message (tr "modals.delete-font.message")
- :accept-label (tr "labels.delete")
- :on-accept (fn [_props] (delete-font-fn))}))))
+ (let [options {:type :confirm
+ :title (tr "modals.delete-font.title")
+ :message (tr "modals.delete-font.message")
+ :accept-label (tr "labels.delete")
+ :on-accept (fn [_props]
+ (st/emit! (df/delete-font font-id)))}]
+ (st/emit! (modal/show options)))))
on-delete-variant
- (mf/use-callback
- (mf/deps delete-variant-fn)
- (fn [id]
- (st/emit! (modal/show
- {:type :confirm
- :title (tr "modals.delete-font-variant.title")
- :message (tr "modals.delete-font-variant.message")
- :accept-label (tr "labels.delete")
- :on-accept (fn [_props]
- (delete-variant-fn id))}))))]
+ (mf/use-fn
+ (fn [event]
+ (let [id (-> (dom/get-current-target event)
+ (dom/get-data "id")
+ (parse-uuid))
+ options {:type :confirm
+ :title (tr "modals.delete-font-variant.title")
+ :message (tr "modals.delete-font-variant.message")
+ :accept-label (tr "labels.delete")
+ :on-accept (fn [_props]
+ (st/emit! (df/delete-font-variant id)))}]
+ (st/emit! (modal/show options)))))]
[:div {:class (stl/css :font-item :table-row)}
[:div {:class (stl/css :table-field :family)}
- (if @edit?
+ (if ^boolean edition?
[:input {:type "text"
+ :auto-focus true
:default-value font-family
:on-key-down on-key-down
:on-change on-change}]
[:span (:font-family font)])]
[:div {:class (stl/css :table-field :variants)}
- (for [item variants]
+ (for [{:keys [id] :as item} variants]
[:div {:class (stl/css :variant)
- :key (dm/str (:id item) "-variant")}
+ :key (dm/str id)}
[:span {:class (stl/css :label)}
[:& font-variant-display-name {:variant item}]]
[:span
{:class (stl/css :icon :close)
- :on-click #(on-delete-variant (:id item))}
- i/add-refactor]])]
+ :data-id (dm/str id)
+ :on-click on-delete-variant}
+ i/add]])]
- (if @edit?
+ (if ^boolean edition?
[:div {:class (stl/css :table-field :options)}
[:button
{:disabled (str/blank? font-family)
@@ -307,27 +379,19 @@
:btn-disabled (str/blank? font-family))}
(tr "labels.save")]
[:button {:class (stl/css :icon :close)
- :on-click on-cancel} i/close-refactor]]
+ :on-click on-cancel}
+ i/close]]
[:div {:class (stl/css :table-field :options)}
[:span {:class (stl/css :icon)
- :on-click #(reset! open-menu? true)}
- i/menu-refactor]
-
- [:& context-menu-a11y {:on-close #(reset! open-menu? false)
- :show @open-menu?
- :fixed? false
- :min-width? true
- :top -15
- :left -115
- :options [{:option-name (tr "labels.edit")
- :id "font-edit"
- :option-handler #(reset! edit? true)}
- {:option-name (tr "labels.delete")
- :id "font-delete"
- :option-handler on-delete}]
- :workspace? false}]])]))
+ :on-click on-menu-open}
+ i/menu]
+ [:& installed-font-context-menu
+ {:on-close on-menu-close
+ :is-open menu-open?
+ :on-delete on-delete-font
+ :on-edit on-edit}]])]))
(mf/defc installed-fonts
[{:keys [fonts] :as props}]
@@ -368,7 +432,7 @@
:else
[:div {:class (stl/css :fonts-placeholder)}
- [:div {:class (stl/css :icon)} i/text-refactor]
+ [:div {:class (stl/css :icon)} i/text]
[:div {:class (stl/css :label)} (tr "dashboard.fonts.empty-placeholder")]])]))
(mf/defc fonts-page
@@ -377,7 +441,7 @@
[:*
[:& header {:team team :section :fonts}]
[:section {:class (stl/css :dashboard-container :dashboard-fonts)}
- [:& fonts-upload {:team team :installed-fonts fonts}]
+ [:& uploaded-fonts {:team team :installed-fonts fonts}]
[:& installed-fonts {:team team :fonts fonts}]]]))
(mf/defc font-providers-page
diff --git a/frontend/src/app/main/ui/dashboard/grid.cljs b/frontend/src/app/main/ui/dashboard/grid.cljs
index 16a5e9e31..276fa7ce4 100644
--- a/frontend/src/app/main/ui/dashboard/grid.cljs
+++ b/frontend/src/app/main/ui/dashboard/grid.cljs
@@ -96,7 +96,7 @@
;; --- Grid Item Library
(def ^:private menu-icon
- (i/icon-xref :menu-refactor (stl/css :menu-icon)))
+ (i/icon-xref :menu (stl/css :menu-icon)))
(mf/defc grid-item-library
{::mf/wrap [mf/memo]}
@@ -163,10 +163,12 @@
(:gradient color) (uc/gradient-type->string (get-in color [:gradient :type]))
(:color color) (:color color)
:else (:value color))]
- [:div {:class (stl/css :asset-list-item)
+ [:div {:class (stl/css :asset-list-item :color-item)
:key (str "assets-color-" (:id color))}
[:& bc/color-bullet {:color {:color (:color color)
- :opacity (:opacity color)}}]
+ :id (:id color)
+ :opacity (:opacity color)}
+ :mini? true}]
[:div {:class (stl/css :name-block)}
[:span {:class (stl/css :color-name)} (:name color)]
(when-not (= (:name color) default-name)
@@ -363,7 +365,7 @@
:background-color (dm/get-in file [:data :options :background])}])
(when (and (:is-shared file) (not library-view?))
- [:div {:class (stl/css :item-badge)} i/library-refactor])
+ [:div {:class (stl/css :item-badge)} i/library])
[:div {:class (stl/css :info-wrapper)}
[:div {:class (stl/css :item-info)}
@@ -386,15 +388,18 @@
(on-menu-click event)))}
menu-icon
(when (and selected? file-menu-open?)
- [:& file-menu {:files (vals selected-files)
- :show? (:menu-open dashboard-local)
- :left (+ 24 (:x (:menu-pos dashboard-local)))
- :top (:y (:menu-pos dashboard-local))
- :navigate? true
- :on-edit on-edit
- :on-menu-close on-menu-close
- :origin origin
- :parent-id (str file-id "-action-menu")}])]]]]]))
+ ;; When the menu is open we disable events in the dashboard. We need to force pointer events
+ ;; so the menu can be handled
+ [:div {:style {:pointer-events "all"}}
+ [:& file-menu {:files (vals selected-files)
+ :show? (:menu-open dashboard-local)
+ :left (+ 24 (:x (:menu-pos dashboard-local)))
+ :top (:y (:menu-pos dashboard-local))
+ :navigate? true
+ :on-edit on-edit
+ :on-menu-close on-menu-close
+ :origin origin
+ :parent-id (str file-id "-action-menu")}]])]]]]]))
(mf/defc grid
[{:keys [files project origin limit library-view? create-fn] :as props}]
@@ -414,8 +419,9 @@
on-drag-enter
(mf/use-fn
(fn [e]
- (when (or (dnd/has-type? e "Files")
- (dnd/has-type? e "application/x-moz-file"))
+ (when (and (not (dnd/has-type? e "penpot/files"))
+ (or (dnd/has-type? e "Files")
+ (dnd/has-type? e "application/x-moz-file")))
(dom/prevent-default e)
(reset! dragging? true))))
@@ -435,8 +441,9 @@
on-drop
(mf/use-fn
(fn [e]
- (when (or (dnd/has-type? e "Files")
- (dnd/has-type? e "application/x-moz-file"))
+ (when (and (not (dnd/has-type? e "penpot/files"))
+ (or (dnd/has-type? e "Files")
+ (dnd/has-type? e "application/x-moz-file")))
(dom/prevent-default e)
(reset! dragging? false)
(import-files (.-files (.-dataTransfer e))))))]
diff --git a/frontend/src/app/main/ui/dashboard/grid.scss b/frontend/src/app/main/ui/dashboard/grid.scss
index e3188a2f9..72f95e4ec 100644
--- a/frontend/src/app/main/ui/dashboard/grid.scss
+++ b/frontend/src/app/main/ui/dashboard/grid.scss
@@ -18,7 +18,9 @@ $thumbnail-default-height: $s-168; // Default width
}
.grid-row {
- display: flex;
+ display: grid;
+ grid-auto-flow: column;
+ grid-auto-columns: calc($s-12 + var(--th-width, #{$thumbnail-default-width}));
width: 100%;
gap: $s-24;
}
@@ -370,3 +372,9 @@ $thumbnail-default-height: $s-168; // Default width
}
}
}
+
+.color-item {
+ display: grid;
+ grid-template-columns: auto 1fr;
+ gap: $s-8;
+}
diff --git a/frontend/src/app/main/ui/dashboard/import.cljs b/frontend/src/app/main/ui/dashboard/import.cljs
index 8bca69f80..14f0318e3 100644
--- a/frontend/src/app/main/ui/dashboard/import.cljs
+++ b/frontend/src/app/main/ui/dashboard/import.cljs
@@ -36,25 +36,26 @@
(defn use-import-file
[project-id on-finish-import]
- (mf/use-callback
+ (mf/use-fn
(mf/deps project-id on-finish-import)
- (fn [files]
- (when files
- (let [files (->> files
- (mapv
- (fn [file]
- {:name (.-name file)
- :uri (wapi/create-uri file)})))]
+ (fn [entries]
+ (let [entries (->> entries
+ (mapv (fn [file]
+ {:name (.-name file)
+ :uri (wapi/create-uri file)}))
+ (not-empty))]
+ (when entries
(st/emit! (modal/show
{:type :import
:project-id project-id
- :files files
+ :entries entries
:on-finish-import on-finish-import})))))))
(mf/defc import-form
- {::mf/forward-ref true}
- [{:keys [project-id on-finish-import]} external-ref]
+ {::mf/forward-ref true
+ ::mf/props :obj}
+ [{:keys [project-id on-finish-import]} external-ref]
(let [on-file-selected (use-import-file project-id on-finish-import)]
[:form.import-file {:aria-hidden "true"}
[:& file-uploader {:accept ".penpot,.zip"
@@ -62,69 +63,72 @@
:ref external-ref
:on-selected on-file-selected}]]))
-(defn update-file [files file-id new-name]
- (->> files
- (mapv
- (fn [file]
+(defn- update-entry-name
+ [entries file-id new-name]
+ (mapv (fn [entry]
(let [new-name (str/trim new-name)]
- (cond-> file
- (and (= (:file-id file) file-id)
+ (cond-> entry
+ (and (= (:file-id entry) file-id)
(not= "" new-name))
- (assoc :name new-name)))))))
+ (assoc :name new-name))))
+ entries))
-(defn remove-file [files file-id]
- (->> files
- (mapv
- (fn [file]
- (cond-> file
- (= (:file-id file) file-id)
- (assoc :deleted? true))))))
+(defn- remove-entry
+ [entries file-id]
+ (mapv (fn [entry]
+ (cond-> entry
+ (= (:file-id entry) file-id)
+ (assoc :deleted true)))
+ entries))
-(defn set-analyze-error
- [files uri error]
- (->> files
- (mapv (fn [file]
- (cond-> file
- (= uri (:uri file))
+(defn- update-with-analyze-error
+ [entries uri error]
+ (->> entries
+ (mapv (fn [entry]
+ (cond-> entry
+ (= uri (:uri entry))
(-> (assoc :status :analyze-error)
(assoc :error error)))))))
-(defn set-analyze-result [files uri type data]
- (let [existing-files? (into #{} (->> files (map :file-id) (filter some?)))
- replace-file
- (fn [file]
- (if (and (= uri (:uri file))
- (= (:status file) :analyzing))
- (->> (:files data)
- (remove (comp existing-files? first))
- (mapv (fn [[file-id file-data]]
- (-> file-data
- (assoc :file-id file-id
- :status :ready
- :uri uri
- :type type)))))
- [file]))]
- (into [] (mapcat replace-file) files)))
+(defn- update-with-analyze-result
+ [entries uri type result]
+ (let [existing-entries? (into #{} (keep :file-id) entries)
+ replace-entry
+ (fn [entry]
+ (if (and (= uri (:uri entry))
+ (= (:status entry) :analyzing))
+ (->> (:files result)
+ (remove (comp existing-entries? first))
+ (map (fn [[file-id file-data]]
+ (-> file-data
+ (assoc :file-id file-id)
+ (assoc :status :ready)
+ (assoc :uri uri)
+ (assoc :type type)))))
+ [entry]))]
+ (into [] (mapcat replace-entry) entries)))
-(defn mark-files-importing [files]
- (->> files
+(defn- mark-entries-importing
+ [entries]
+ (->> entries
(filter #(= :ready (:status %)))
(mapv #(assoc % :status :importing))))
-(defn update-status [files file-id status progress errors]
- (->> files
- (mapv (fn [file]
- (cond-> file
- (and (= file-id (:file-id file)) (not= status :import-progress))
- (assoc :status status)
+(defn- update-entry-status
+ [entries file-id status progress errors]
+ (mapv (fn [entry]
+ (cond-> entry
+ (and (= file-id (:file-id entry)) (not= status :import-progress))
+ (assoc :status status)
- (and (= file-id (:file-id file)) (= status :import-progress))
- (assoc :progress progress)
+ (and (= file-id (:file-id entry)) (= status :import-progress))
+ (assoc :progress progress)
- (= file-id (:file-id file))
- (assoc :errors errors))))))
+ (= file-id (:file-id entry))
+ (assoc :errors errors)))
+ entries))
-(defn parse-progress-message
+(defn- parse-progress-message
[message]
(case (:type message)
:upload-data
@@ -150,52 +154,116 @@
(str message)))
+(defn- has-status-importing?
+ [item]
+ (= (:status item) :importing))
+
+(defn- has-status-analyzing?
+ [item]
+ (= (:status item) :analyzing))
+
+(defn- has-status-analyze-error?
+ [item]
+ (= (:status item) :analyzing))
+
+(defn- has-status-success?
+ [item]
+ (and (= (:status item) :import-finish)
+ (empty? (:errors item))))
+
+(defn- has-status-error?
+ [item]
+ (and (= (:status item) :import-finish)
+ (d/not-empty? (:errors item))))
+
+(defn- has-status-ready?
+ [item]
+ (and (= :ready (:status item))
+ (not (:deleted item))))
+
+(defn- analyze-entries
+ [state entries]
+ (->> (uw/ask-many!
+ {:cmd :analyze-import
+ :files entries
+ :features @features/features-ref})
+ (rx/mapcat #(rx/delay emit-delay (rx/of %)))
+ (rx/filter some?)
+ (rx/subs!
+ (fn [{:keys [uri data error type] :as msg}]
+ (if (some? error)
+ (swap! state update-with-analyze-error uri error)
+ (swap! state update-with-analyze-result uri type data))))))
+
+(defn- import-files!
+ [state project-id entries]
+ (st/emit! (ptk/data-event ::ev/event {::ev/name "import-files"
+ :num-files (count entries)}))
+ (->> (uw/ask-many!
+ {:cmd :import-files
+ :project-id project-id
+ :files entries
+ :features @features/features-ref})
+ (rx/subs!
+ (fn [{:keys [file-id status message errors] :as msg}]
+ (swap! state update-entry-status file-id status message errors)))))
+
(mf/defc import-entry
- [{:keys [state file editing? can-be-deleted?]}]
- (let [loading? (or (= :analyzing (:status file))
- (= :importing (:status file)))
- analyze-error? (= :analyze-error (:status file))
- import-finish? (= :import-finish (:status file))
- import-error? (= :import-error (:status file))
- import-warn? (d/not-empty? (:errors file))
- ready? (= :ready (:status file))
- is-shared? (:shared file)
- progress (:progress file)
+ {::mf/props :obj
+ ::mf/memo true
+ ::mf/private true}
+ [{:keys [entries entry edition can-be-deleted on-edit on-change on-delete]}]
+ (let [status (:status entry)
+ loading? (or (= :analyzing status)
+ (= :importing status))
+ analyze-error? (= :analyze-error status)
+ import-finish? (= :import-finish status)
+ import-error? (= :import-error status)
+ import-warn? (d/not-empty? (:errors entry))
+ ready? (= :ready status)
+ is-shared? (:shared entry)
+ progress (:progress entry)
- handle-edit-key-press
- (mf/use-callback
- (fn [e]
- (when (or (kbd/enter? e) (kbd/esc? e))
- (dom/prevent-default e)
- (dom/stop-propagation e)
- (dom/blur! (dom/get-target e)))))
+ file-id (:file-id entry)
+ editing? (and (some? file-id) (= edition file-id))
- handle-edit-blur
- (mf/use-callback
- (mf/deps file)
- (fn [e]
- (let [value (dom/get-target-val e)]
- (swap! state #(-> (assoc % :editing nil)
- (update :files update-file (:file-id file) value))))))
+ on-edit-key-press
+ (mf/use-fn
+ (fn [event]
+ (when (or (kbd/enter? event)
+ (kbd/esc? event))
+ (dom/prevent-default event)
+ (dom/stop-propagation event)
+ (dom/blur! (dom/get-target event)))))
- handle-edit-entry
- (mf/use-callback
- (mf/deps file)
- (fn []
- (swap! state assoc :editing (:file-id file))))
+ on-edit-blur
+ (mf/use-fn
+ (mf/deps file-id on-change)
+ (fn [event]
+ (let [value (dom/get-target-val event)]
+ (on-change file-id value event))))
- handle-remove-entry
- (mf/use-callback
- (mf/deps file)
- (fn []
- (swap! state update :files remove-file (:file-id file))))]
+ on-edit'
+ (mf/use-fn
+ (mf/deps file-id on-change)
+ (fn [event]
+ (when (fn? on-edit)
+ (on-edit file-id event))))
- [:div {:class (stl/css-case :file-entry true
- :loading loading?
- :success (and import-finish? (not import-warn?) (not import-error?))
- :warning (and import-finish? import-warn? (not import-error?))
- :error (or import-error? analyze-error?)
- :editable (and ready? (not editing?)))}
+ on-delete'
+ (mf/use-fn
+ (mf/deps file-id on-delete)
+ (fn [event]
+ (when (fn? on-delete)
+ (on-delete file-id event))))]
+
+ [:div {:class (stl/css-case
+ :file-entry true
+ :loading loading?
+ :success (and import-finish? (not import-warn?) (not import-error?))
+ :warning (and import-finish? import-warn? (not import-error?))
+ :error (or import-error? analyze-error?)
+ :editable (and ready? (not editing?)))}
[:div {:class (stl/css :file-name)}
[:div {:class (stl/css-case :file-icon true
@@ -203,34 +271,36 @@
(cond loading? i/loader-pencil
ready? i/logo-icon
import-warn? i/msg-warning
- import-error? i/close-refactor
- import-finish? i/tick-refactor
- analyze-error? i/close-refactor)]
+ import-error? i/close
+ import-finish? i/tick
+ analyze-error? i/close)]
(if editing?
[:div {:class (stl/css :file-name-edit)}
[:input {:type "text"
:auto-focus true
- :default-value (:name file)
- :on-key-press handle-edit-key-press
- :on-blur handle-edit-blur}]]
+ :default-value (:name entry)
+ :on-key-press on-edit-key-press
+ :on-blur on-edit-blur}]]
[:div {:class (stl/css :file-name-label)}
- (:name file)
- (when is-shared?
+ (:name entry)
+ (when ^boolean is-shared?
[:span {:class (stl/css :icon)}
- i/library-refactor])])
+ i/library])])
[:div {:class (stl/css :edit-entry-buttons)}
- (when (= "application/zip" (:type file))
- [:button {:on-click handle-edit-entry} i/curve-refactor])
- (when can-be-deleted?
- [:button {:on-click handle-remove-entry} i/delete-refactor])]]
+ (when (and (= "application/zip" (:type entry))
+ (= status :ready))
+ [:button {:on-click on-edit'} i/curve])
+ (when can-be-deleted
+ [:button {:on-click on-delete'} i/delete])]]
+
(cond
analyze-error?
[:div {:class (stl/css :error-message)}
- (if (some? (:error file))
- (tr (:error file))
+ (if (some? (:error entry))
+ (tr (:error entry))
(tr "dashboard.import.analyze-error"))]
import-error?
@@ -241,138 +311,160 @@
[:div {:class (stl/css :progress-message)} (parse-progress-message progress)])
[:div {:class (stl/css :linked-libraries)}
- (for [library-id (:libraries file)]
- (let [library-data (->> @state :files (d/seek #(= library-id (:file-id %))))
- error? (or (:deleted? library-data) (:import-error library-data))]
+ (for [library-id (:libraries entry)]
+ (let [library-data (d/seek #(= library-id (:file-id %)) entries)
+ error? (or (:deleted library-data)
+ (:import-error library-data))]
(when (some? library-data)
- [:div {:class (stl/css :linked-library)}
+ [:div {:class (stl/css :linked-library)
+ :key (dm/str library-id)}
(:name library-data)
- [:span {:class (stl/css-case :linked-library-tag true
- :error error?)} i/detach-refactor]])))]]))
+ [:span {:class (stl/css-case
+ :linked-library-tag true
+ :error error?)}
+ i/detach]])))]]))
(mf/defc import-dialog
{::mf/register modal/components
- ::mf/register-as :import}
- [{:keys [project-id files template on-finish-import]}]
- (let [state (mf/use-state
- {:status :analyzing
- :editing nil
- :importing-templates 0
- :files (->> files
- (mapv #(assoc % :status :analyzing)))})
+ ::mf/register-as :import
+ ::mf/props :obj}
- analyze-import
- (mf/use-callback
- (fn [files]
- (->> (uw/ask-many!
- {:cmd :analyze-import
- :files files
- :features @features/features-ref})
- (rx/mapcat #(rx/delay emit-delay (rx/of %)))
- (rx/filter some?)
- (rx/subs!
- (fn [{:keys [uri data error type] :as msg}]
- (if (some? error)
- (swap! state update :files set-analyze-error uri error)
- (swap! state update :files set-analyze-result uri type data)))))))
+ [{:keys [project-id entries template on-finish-import]}]
- import-files
- (mf/use-callback
- (fn [project-id files]
- (st/emit! (ptk/event ::ev/event {::ev/name "import-files"
- :num-files (count files)}))
- (->> (uw/ask-many!
- {:cmd :import-files
- :project-id project-id
- :files files
- :features @features/features-ref})
- (rx/subs!
- (fn [{:keys [file-id status message errors] :as msg}]
- (swap! state update :files update-status file-id status message errors))))))
+ (mf/with-effect []
+ ;; dispose uris when the component is umount
+ (fn [] (run! wapi/revoke-uri (map :uri entries))))
- handle-cancel
- (mf/use-callback
- (mf/deps (:editing @state))
+ (let [entries* (mf/use-state
+ (fn [] (mapv #(assoc % :status :analyzing) entries)))
+ entries (deref entries*)
+
+ status* (mf/use-state :analyzing)
+ status (deref status*)
+
+ edition* (mf/use-state nil)
+ edition (deref edition*)
+
+ template-finished* (mf/use-state nil)
+ template-finished (deref template-finished*)
+
+ on-template-cloned-success
+ (mf/use-fn
+ (fn []
+ (reset! status* :importing)
+ (reset! template-finished* true)
+ (st/emit! (dd/fetch-recent-files))))
+
+ on-template-cloned-error
+ (mf/use-fn
+ (fn [cause]
+ (reset! status* :error)
+ (reset! template-finished* true)
+ (errors/print-error! cause)
+ (rx/of (modal/hide)
+ (msg/error (tr "dashboard.libraries-and-templates.import-error")))))
+
+ continue-entries
+ (mf/use-fn
+ (mf/deps entries)
+ (fn []
+ (let [entries (filterv has-status-ready? entries)]
+ (swap! status* (constantly :importing))
+ (swap! entries* mark-entries-importing)
+ (import-files! entries* project-id entries))))
+
+ continue-template
+ (mf/use-fn
+ (mf/deps on-template-cloned-success
+ on-template-cloned-error
+ template)
+ (fn []
+ (let [mdata {:on-success on-template-cloned-success
+ :on-error on-template-cloned-error}
+ params {:project-id project-id :template-id (:id template)}]
+ (swap! status* (constantly :importing))
+ (st/emit! (dd/clone-template (with-meta params mdata))))))
+
+ on-edit
+ (mf/use-fn
+ (fn [file-id _event]
+ (swap! edition* (constantly file-id))))
+
+ on-entry-change
+ (mf/use-fn
+ (fn [file-id value]
+ (swap! edition* (constantly nil))
+ (swap! entries* update-entry-name file-id value)))
+
+ on-entry-delete
+ (mf/use-fn
+ (fn [file-id]
+ (swap! entries* remove-entry file-id)))
+
+ on-cancel
+ (mf/use-fn
+ (mf/deps edition)
(fn [event]
- (when (nil? (:editing @state))
+ (when (nil? edition)
(dom/prevent-default event)
(st/emit! (modal/hide)))))
- on-template-cloned-success
- (fn []
- (swap! state assoc :status :importing :importing-templates 0)
- (st/emit! (dd/fetch-recent-files)))
-
- on-template-cloned-error
- (fn [cause]
- (swap! state assoc :status :error :importing-templates 0)
- (errors/print-error! cause)
- (rx/of (modal/hide)
- (msg/error (tr "dashboard.libraries-and-templates.import-error"))))
-
- continue-files
- (fn []
- (let [files (->> @state :files (filterv #(and (= :ready (:status %)) (not (:deleted? %)))))]
- (import-files project-id files))
-
- (swap! state
- (fn [state]
- (-> state
- (assoc :status :importing)
- (update :files mark-files-importing)))))
-
- continue-template
- (fn []
- (let [mdata {:on-success on-template-cloned-success
- :on-error on-template-cloned-error}
- params {:project-id project-id :template-id (:id template)}]
- (swap! state
- (fn [state]
- (-> state
- (assoc :status :importing :importing-templates 1))))
- (st/emit! (dd/clone-template (with-meta params mdata)))))
-
-
- handle-continue
- (mf/use-callback
- (mf/deps project-id (:files @state))
+ on-continue
+ (mf/use-fn
+ (mf/deps template
+ continue-template
+ continue-entries)
(fn [event]
(dom/prevent-default event)
(if (some? template)
(continue-template)
- (continue-files))))
+ (continue-entries))))
- handle-accept
- (mf/use-callback
+ on-accept
+ (mf/use-fn
+ (mf/deps on-finish-import)
(fn [event]
(dom/prevent-default event)
(st/emit! (modal/hide))
- (when on-finish-import (on-finish-import))))
+ (when (fn? on-finish-import)
+ (on-finish-import))))
- files (->> (:files @state) (filterv (comp not :deleted?)))
+ entries (filterv (comp not :deleted) entries)
+ num-importing (+ (count (filterv has-status-importing? entries))
+ (if (some? template) 1 0))
- num-importing (+
- (->> files (filter #(= (:status %) :importing)) count)
- (:importing-templates @state))
+ success-num (if (some? template)
+ 1
+ (count (filterv has-status-success? entries)))
- warning-files (->> files (filter #(and (= (:status %) :import-finish) (d/not-empty? (:errors %)))) count)
- success-files (->> files (filter #(and (= (:status %) :import-finish) (empty? (:errors %)))) count)
- pending-analysis? (> (->> files (filter #(= (:status %) :analyzing)) count) 0)
- pending-import? (> num-importing 0)
+ errors? (if (some? template)
+ (= status :error)
+ (or (some has-status-error? entries)
+ (zero? (count entries))))
- valid-files? (or (some? template)
- (> (+ (->> files (filterv (fn [x] (not= (:status x) :analyze-error))) count)) 0))]
+ pending-analysis? (some has-status-analyzing? entries)
+ pending-import? (and (or (nil? template)
+ (not template-finished))
+ (pos? num-importing))
- (mf/use-effect
- (fn []
- (let [sub (analyze-import files)]
- #(rx/dispose! sub))))
+ valid-all-entries? (or (some? template)
+ (not (some has-status-analyze-error? entries)))
- (mf/use-effect
- (fn []
- ;; dispose uris when the component is umount
- #(doseq [file files]
- (wapi/revoke-uri (:uri file)))))
+ template-status
+ (cond
+ (and (= :importing status) pending-import?)
+ :importing
+
+ (and (= :importing status) (not ^boolean pending-import?))
+ :import-finish
+
+ :else
+ :ready)]
+
+ ;; Run analyze operation on component mount
+ (mf/with-effect []
+ (let [sub (analyze-entries entries* entries)]
+ (partial rx/dispose! sub)))
[:div {:class (stl/css :modal-overlay)}
[:div {:class (stl/css :modal-container)}
@@ -380,52 +472,58 @@
[:h2 {:class (stl/css :modal-title)} (tr "dashboard.import")]
[:button {:class (stl/css :modal-close-btn)
- :on-click handle-cancel} i/close-refactor]]
+ :on-click on-cancel} i/close]]
[:div {:class (stl/css :modal-content)}
+ (when (and (= :analyzing status) errors?)
+ [:& context-notification
+ {:type :warning
+ :content (tr "dashboard.import.import-warning")}])
- (when (and (= :importing (:status @state)) (not pending-import?))
- (if (> warning-files 0)
+ (when (and (= :importing status) (not ^boolean pending-import?))
+ (cond
+ errors?
[:& context-notification
{:type :warning
- :content (tr "dashboard.import.import-warning" warning-files success-files)}]
+ :content (tr "dashboard.import.import-warning")}]
+
+ :else
[:& context-notification
{:type :success
- :content (tr "dashboard.import.import-message" (i18n/c (if (some? template) 1 success-files)))}]))
+ :content (tr "dashboard.import.import-message" (i18n/c success-num))}]))
- (for [file files]
- (let [editing? (and (some? (:file-id file))
- (= (:file-id file) (:editing @state)))]
- [:& import-entry {:state state
- :key (dm/str (:uri file))
- :file file
- :editing? editing?
- :can-be-deleted? (> (count files) 1)}]))
+ (for [entry entries]
+ [:& import-entry {:edition edition
+ :key (dm/str (:uri entry))
+ :entry entry
+ :entries entries
+ :on-edit on-edit
+ :on-change on-entry-change
+ :on-delete on-entry-delete
+ :can-be-deleted (> (count entries) 1)}])
(when (some? template)
- [:& import-entry {:state state
- :file (assoc template :status (if (= 1 (:importing-templates @state)) :importing :ready))
- :editing? false
- :can-be-deleted? false}])]
+ [:& import-entry {:entry (assoc template :status template-status)
+ :can-be-deleted false}])]
[:div {:class (stl/css :modal-footer)}
[:div {:class (stl/css :action-buttons)}
- (when (= :analyzing (:status @state))
+ (when (= :analyzing status)
[:input {:class (stl/css :cancel-button)
:type "button"
:value (tr "labels.cancel")
- :on-click handle-cancel}])
+ :on-click on-cancel}])
- (when (= :analyzing (:status @state))
+ (when (and (= :analyzing status) (not errors?))
[:input {:class (stl/css :accept-btn)
:type "button"
:value (tr "labels.continue")
- :disabled (or pending-analysis? (not valid-files?))
- :on-click handle-continue}])
+ :disabled (or pending-analysis? (not valid-all-entries?))
+ :on-click on-continue}])
- (when (= :importing (:status @state))
+ (when (and (= :importing status) (not errors?))
[:input {:class (stl/css :accept-btn)
:type "button"
:value (tr "labels.accept")
- :disabled (or pending-import? (not valid-files?))
- :on-click handle-accept}])]]]]))
+ :disabled (or pending-import? (not valid-all-entries?))
+ :on-click on-accept}])]]]]))
diff --git a/frontend/src/app/main/ui/dashboard/import.scss b/frontend/src/app/main/ui/dashboard/import.scss
index 0fc0c620f..a89dda6da 100644
--- a/frontend/src/app/main/ui/dashboard/import.scss
+++ b/frontend/src/app/main/ui/dashboard/import.scss
@@ -33,6 +33,7 @@
grid-template-columns: 1fr;
gap: $s-16;
margin-bottom: $s-24;
+ min-height: 40px;
}
.action-buttons {
diff --git a/frontend/src/app/main/ui/dashboard/inline_edition.cljs b/frontend/src/app/main/ui/dashboard/inline_edition.cljs
index 499f52214..0ceda89a6 100644
--- a/frontend/src/app/main/ui/dashboard/inline_edition.cljs
+++ b/frontend/src/app/main/ui/dashboard/inline_edition.cljs
@@ -69,5 +69,5 @@
:on-key-down on-keyup
:on-blur on-blur}]
[:span {:class (stl/css :close)
- :on-click on-cancel} i/close-refactor]]))
+ :on-click on-cancel} i/close]]))
diff --git a/frontend/src/app/main/ui/dashboard/pin_button.cljs b/frontend/src/app/main/ui/dashboard/pin_button.cljs
index be27a05f0..14ee57332 100644
--- a/frontend/src/app/main/ui/dashboard/pin_button.cljs
+++ b/frontend/src/app/main/ui/dashboard/pin_button.cljs
@@ -16,7 +16,7 @@
[rumext.v2 :as mf]))
(def ^:private pin-icon
- (icon-xref :pin-refactor (stl/css :icon)))
+ (icon-xref :pin (stl/css :icon)))
(mf/defc pin-button*
{::mf/props :obj}
diff --git a/frontend/src/app/main/ui/dashboard/placeholder.cljs b/frontend/src/app/main/ui/dashboard/placeholder.cljs
index ce8c5d81f..8f5daa04e 100644
--- a/frontend/src/app/main/ui/dashboard/placeholder.cljs
+++ b/frontend/src/app/main/ui/dashboard/placeholder.cljs
@@ -36,7 +36,7 @@
{:class (stl/css :grid-empty-placeholder)}
[:button {:class (stl/css :create-new)
:on-click on-click}
- i/add-refactor]])))
+ i/add]])))
(mf/defc loading-placeholder
[]
diff --git a/frontend/src/app/main/ui/dashboard/placeholder.scss b/frontend/src/app/main/ui/dashboard/placeholder.scss
index 6f05ba000..f2a37fbf0 100644
--- a/frontend/src/app/main/ui/dashboard/placeholder.scss
+++ b/frontend/src/app/main/ui/dashboard/placeholder.scss
@@ -23,7 +23,8 @@
svg {
width: $s-64;
height: $s-64;
- fill: $df-secondary;
+ stroke: $df-secondary;
+ fill: none;
}
}
diff --git a/frontend/src/app/main/ui/dashboard/projects.cljs b/frontend/src/app/main/ui/dashboard/projects.cljs
index 179f66d32..97667fef6 100644
--- a/frontend/src/app/main/ui/dashboard/projects.cljs
+++ b/frontend/src/app/main/ui/dashboard/projects.cljs
@@ -35,7 +35,16 @@
[rumext.v2 :as mf]))
(def ^:private show-more-icon
- (i/icon-xref :arrow-refactor (stl/css :show-more-icon)))
+ (i/icon-xref :arrow (stl/css :show-more-icon)))
+
+(def ^:private close-icon
+ (i/icon-xref :close (stl/css :close-icon)))
+
+(def ^:private add-icon
+ (i/icon-xref :add (stl/css :add-icon)))
+
+(def ^:private menu-icon
+ (i/icon-xref :menu (stl/css :menu-icon)))
(mf/defc header
{::mf/wrap [mf/memo]}
@@ -44,10 +53,9 @@
[:header {:class (stl/css :dashboard-header)}
[:div#dashboard-projects-title {:class (stl/css :dashboard-title)}
[:h1 (tr "dashboard.projects-title")]]
- [:button
- {:class (stl/css :btn-secondary :btn-small)
- :on-click on-click
- :data-test "new-project-button"}
+ [:button {:class (stl/css :btn-secondary :btn-small)
+ :on-click on-click
+ :data-test "new-project-button"}
(tr "dashboard.new-project")]]))
(mf/defc team-hero
@@ -84,11 +92,10 @@
:on-click on-invite-click}
(tr "onboarding.choice.team-up.invite-members")]]
- [:button
- {:class (stl/css :close)
- :on-click on-close-click
- :aria-label (tr "labels.close")}
- [:span i/close]]]))
+ [:button {:class (stl/css :close)
+ :on-click on-close-click
+ :aria-label (tr "labels.close")}
+ close-icon]]))
(def builtin-templates
(l/derived :builtin-templates st/state))
@@ -139,11 +146,10 @@
:importing [:span.loader i/loader-pencil]
:success "")]]
- [:button
- {:class (stl/css :close)
- :on-click close-tutorial
- :aria-label (tr "labels.close")}
- [:span {:class (stl/css :icon)} i/close]]]))
+ [:button {:class (stl/css :close)
+ :on-click close-tutorial
+ :aria-label (tr "labels.close")}
+ close-icon]]))
(mf/defc interface-walkthrough
{::mf/wrap [mf/memo]}
@@ -163,11 +169,10 @@
:target "_blank"
:on-click handle-walkthrough-link}
(tr "dasboard.walkthrough-hero.start")]]
- [:button
- {:class (stl/css :close)
- :on-click close-walkthrough
- :aria-label (tr "labels.close")}
- [:span {:class (stl/css :icon)} i/close]]]))
+ [:button {:class (stl/css :close)
+ :on-click close-walkthrough
+ :aria-label (tr "labels.close")}
+ close-icon]]))
(mf/defc project-item
[{:keys [project first? team files] :as props}]
@@ -277,7 +282,8 @@
(fn [event]
(when (kbd/enter? event)
(dom/stop-propagation event)
- (on-menu-click event))))]
+ (on-menu-click event))))
+ title-width (/ 100 limit)]
[:article {:class (stl/css-case :dashboard-project-row true :first first?)}
[:header {:class (stl/css :project)}
@@ -286,47 +292,52 @@
[:& inline-edition {:content (:name project)
:on-end on-edit}]
[:h2 {:on-click on-nav
+ :style {:max-width (str title-width "%")}
+ :class (stl/css :project-name)
+ :title (if (:is-default project)
+ (tr "labels.drafts")
+ (:name project))
:on-context-menu on-menu-click}
(if (:is-default project)
(tr "labels.drafts")
(:name project))])
- [:& project-menu
- {:project project
- :show? (:menu-open @local)
- :left (+ 24 (:x (:menu-pos @local)))
- :top (:y (:menu-pos @local))
- :on-edit on-edit-open
- :on-menu-close on-menu-close
- :on-import on-import}]
+ [:div {:class (stl/css :info-wrapper)}
+ [:& project-menu
+ {:project project
+ :show? (:menu-open @local)
+ :left (+ 24 (:x (:menu-pos @local)))
+ :top (:y (:menu-pos @local))
+ :on-edit on-edit-open
+ :on-menu-close on-menu-close
+ :on-import on-import}]
- [:span {:class (stl/css :info)} (str (tr "labels.num-of-files" (i18n/c file-count)))]
+ [:span {:class (stl/css :info)} (str (tr "labels.num-of-files" (i18n/c file-count)))]
- (let [time (-> (:modified-at project)
- (dt/timeago {:locale locale}))]
- [:span {:class (stl/css :recent-files-row-title-info)} (str ", " time)])
+ (let [time (-> (:modified-at project)
+ (dt/timeago {:locale locale}))]
+ [:span {:class (stl/css :recent-files-row-title-info)} (str ", " time)])
- [:div {:class (stl/css :project-actions)}
- (when-not (:is-default project)
- [:> pin-button* {:class (stl/css :pin-button) :is-pinned (:is-pinned project) :on-click toggle-pin :tab-index 0}])
+ [:div {:class (stl/css-case :project-actions true
+ :pinned-project (:is-pinned project))}
+ (when-not (:is-default project)
+ [:> pin-button* {:class (stl/css :pin-button) :is-pinned (:is-pinned project) :on-click toggle-pin :tab-index 0}])
- [:button
- {:class (stl/css :btn-secondary :btn-small :tooltip :tooltip-bottom)
- :on-click on-create-click
- :alt (tr "dashboard.new-file")
- :aria-label (tr "dashboard.new-file")
- :data-test "project-new-file"
- :on-key-down handle-create-click}
- i/add-refactor]
+ [:button {:class (stl/css :add-file-btn)
+ :on-click on-create-click
+ :title (tr "dashboard.new-file")
+ :aria-label (tr "dashboard.new-file")
+ :data-test "project-new-file"
+ :on-key-down handle-create-click}
+ add-icon]
- [:button
- {:class (stl/css :btn-secondary :btn-small :tooltip :tooltip-bottom)
- :on-click on-menu-click
- :alt (tr "dashboard.options")
- :aria-label (tr "dashboard.options")
- :data-test "project-options"
- :on-key-down handle-menu-click}
- i/menu-refactor]]]]
+ [:button {:class (stl/css :options-btn)
+ :on-click on-menu-click
+ :title (tr "dashboard.options")
+ :aria-label (tr "dashboard.options")
+ :data-test "project-options"
+ :on-key-down handle-menu-click}
+ menu-icon]]]]]
[:div {:class (stl/css :grid-container) :ref rowref}
[:& line-grid
@@ -338,14 +349,13 @@
(when (and (> limit 0)
(> file-count limit))
- [:button
- {:class (stl/css :show-more)
- :on-click on-nav
- :tab-index "0"
- :on-key-down (fn [event]
- (when (kbd/enter? event)
- (on-nav)))}
- [:div {:class (stl/css :placeholder-label)} (tr "dashboard.show-all-files")]
+ [:button {:class (stl/css :show-more)
+ :on-click on-nav
+ :tab-index "0"
+ :on-key-down (fn [event]
+ (when (kbd/enter? event)
+ (on-nav)))}
+ [:span {:class (stl/css :placeholder-label)} (tr "dashboard.show-all-files")]
show-more-icon])]))
@@ -375,24 +385,24 @@
(mf/use-fn
(fn []
(st/emit! (du/update-profile-props {:team-hero? false})
- (ptk/event ::ev/event {::ev/name "dont-show-team-up-hero"
- ::ev/origin "dashboard"}))))
+ (ptk/data-event ::ev/event {::ev/name "dont-show-team-up-hero"
+ ::ev/origin "dashboard"}))))
close-tutorial
(mf/use-fn
(fn []
(st/emit! (du/update-profile-props {:viewed-tutorial? true})
- (ptk/event ::ev/event {::ev/name "dont-show"
- ::ev/origin "get-started-hero-block"
- :type "tutorial"
- :section "dashboard"}))))
+ (ptk/data-event ::ev/event {::ev/name "dont-show-tutorial"
+ ::ev/origin "get-started-hero"
+ :type "tutorial"
+ :section "dashboard"}))))
close-walkthrough
(mf/use-fn
(fn []
(st/emit! (du/update-profile-props {:viewed-walkthrough? true})
- (ptk/event ::ev/event {::ev/name "dont-show"
- ::ev/origin "get-started-hero-block"
- :type "walkthrough"
- :section "dashboard"}))))]
+ (ptk/data-event ::ev/event {::ev/name "dont-show-walkthrough"
+ ::ev/origin "get-started-hero"
+ :type "walkthrough"
+ :section "dashboard"}))))]
(mf/with-effect [team]
(let [tname (if (:is-default team)
@@ -407,31 +417,32 @@
(when (seq projects)
[:*
[:& header]
+ [:div {:class (stl/css :projects-container)}
+ [:*
+ (when team-hero?
+ [:& team-hero {:team team :close-fn close-banner}])
- (when team-hero?
- [:& team-hero {:team team :close-fn close-banner}])
+ (when (and (contains? cf/flags :dashboard-templates-section)
+ (or (not tutorial-viewed?)
+ (not walkthrough-viewed?)))
+ [:div {:class (stl/css :hero-projects)}
+ (when (and (not tutorial-viewed?) (:is-default team))
+ [:& tutorial-project
+ {:close-tutorial close-tutorial
+ :default-project-id default-project-id}])
- (when (and (contains? cf/flags :dashboard-templates-section)
- (or (not tutorial-viewed?)
- (not walkthrough-viewed?)))
- [:div {:class (stl/css :hero-projects)}
- (when (and (not tutorial-viewed?) (:is-default team))
- [:& tutorial-project
- {:close-tutorial close-tutorial
- :default-project-id default-project-id}])
+ (when (and (not walkthrough-viewed?) (:is-default team))
+ [:& interface-walkthrough
+ {:close-walkthrough close-walkthrough}])])
- (when (and (not walkthrough-viewed?) (:is-default team))
- [:& interface-walkthrough
- {:close-walkthrough close-walkthrough}])])
-
- [:div {:class (stl/css :dashboard-container :no-bg :dashboard-projects)}
- (for [{:keys [id] :as project} projects]
- (let [files (when recent-map
- (->> (vals recent-map)
- (filterv #(= id (:project-id %)))
- (sort-by :modified-at #(compare %2 %1))))]
- [:& project-item {:project project
- :team team
- :files files
- :first? (= project (first projects))
- :key id}]))]])))
+ [:div {:class (stl/css :dashboard-container :no-bg :dashboard-projects)}
+ (for [{:keys [id] :as project} projects]
+ (let [files (when recent-map
+ (->> (vals recent-map)
+ (filterv #(= id (:project-id %)))
+ (sort-by :modified-at #(compare %2 %1))))]
+ [:& project-item {:project project
+ :team team
+ :files files
+ :first? (= project (first projects))
+ :key id}]))]]]])))
diff --git a/frontend/src/app/main/ui/dashboard/projects.scss b/frontend/src/app/main/ui/dashboard/projects.scss
index b950bd48e..105dabd50 100644
--- a/frontend/src/app/main/ui/dashboard/projects.scss
+++ b/frontend/src/app/main/ui/dashboard/projects.scss
@@ -9,128 +9,134 @@
.dashboard-container {
flex: 1 0 0;
- margin-right: $s-16;
- overflow-y: auto;
width: 100%;
- border-top: $s-1 solid $db-quaternary;
+ margin-right: $s-16;
+ border-top: $s-1 solid var(--panel-border-color);
+ overflow-y: auto;
+}
- &.dashboard-projects {
- user-select: none;
- }
- &.dashboard-shared {
- width: calc(100vw - $s-320);
- margin-right: $s-52;
- }
+.dashboard-projects {
+ user-select: none;
+}
- &.search {
- margin-top: $s-12;
- }
+.dashboard-shared {
+ width: calc(100vw - $s-320);
+ margin-right: $s-52;
+}
+
+.search {
+ margin-top: $s-12;
}
.dashboard-project-row {
+ --actions-opacity: 0;
margin-bottom: $s-24;
position: relative;
- .project {
- align-items: center;
- border-radius: $br-4;
- display: flex;
- flex-direction: row;
- justify-content: space-between;
- align-items: center;
- margin-top: $s-16;
- padding: $s-8 $s-8 $s-8 $s-16;
- width: 99%;
- max-height: $s-40;
- gap: $s-8;
-
- .project-name-wrapper {
- display: flex;
- align-items: center;
- justify-content: flex-start;
- min-height: $s-32;
- margin-left: $s-8;
- }
-
- .btn-secondary {
- border: none;
- padding: $s-8;
- }
-
- h2 {
- cursor: pointer;
- font-size: $fs-16;
- line-height: 0.8;
- font-weight: $fw400;
- color: $df-primary;
- margin-right: $s-4;
- margin-right: $s-12;
- }
-
- .info,
- .recent-files-row-title-info {
- font-size: $fs-14;
- line-height: 1.15;
- font-weight: $fw400;
- color: $df-secondary;
- @media (max-width: 760px) {
- display: none;
- }
- }
-
- .project-actions {
- display: flex;
- opacity: 1;
- margin-left: $s-32;
-
- .btn-small:not(.pin-button) {
- height: $s-32;
- margin: 0 $s-8;
- width: $s-32;
-
- &:not(:hover) {
- background: transparent;
- }
- svg {
- fill: $df-primary;
- height: $s-16;
- width: $s-16;
- }
- }
- }
- }
-
- .grid-container {
- width: 100%;
- padding: 0 $s-4;
- }
-
&:hover,
&:focus,
&:focus-within {
- .project-actions {
- opacity: 1;
- }
+ --actions-opacity: 1;
}
}
-.show-more {
+.pinned-project {
+ --actions-opacity: 1;
+}
+
+.projects-container {
+ display: grid;
+ grid-auto-rows: min-content;
+}
+
+.project {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-between;
+ gap: $s-8;
+ width: 99%;
+ max-height: $s-40;
+ padding: $s-8 $s-8 $s-8 $s-16;
+ margin-top: $s-16;
+ border-radius: $br-4;
+}
+
+.project-name-wrapper {
display: flex;
align-items: center;
- column-gap: $s-12;
+ justify-content: flex-start;
+ width: 100%;
+ min-height: $s-32;
+ margin-left: $s-8;
+}
- color: $df-secondary;
- font-size: $fs-14;
- justify-content: space-between;
+.project-name {
+ @include bodyLargeTypography;
+ @include textEllipsis;
+ width: fit-content;
+ margin-right: $s-12;
+ line-height: 0.8;
+ color: var(--title-foreground-color-hover);
cursor: pointer;
- background-color: transparent;
- border: none;
+}
+
+.info-wrapper {
+ display: flex;
+ align-items: center;
+ gap: $s-8;
+}
+
+.info,
+.recent-files-row-title-info {
+ @include bodyMediumTypography;
+ color: var(--title-foreground-color);
+ @media (max-width: 760px) {
+ display: none;
+ }
+}
+
+.project-actions {
+ display: flex;
+ opacity: var(--actions-opacity);
+ margin-left: $s-32;
+}
+
+.add-file-btn,
+.options-btn {
+ @extend .button-tertiary;
+ height: $s-32;
+ width: $s-32;
+ margin: 0 $s-8;
+ padding: $s-8;
+}
+
+.add-icon,
+.menu-icon {
+ @extend .button-icon;
+ stroke: var(--icon-foreground);
+}
+
+.grid-container {
+ width: 100%;
+ padding: 0 $s-4;
+}
+
+.show-more {
+ --show-more-color: var(--button-secondary-foreground-color-rest);
+ @include buttonStyle;
+ @include bodyMediumTypography;
position: absolute;
top: $s-8;
right: $s-52;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ column-gap: $s-12;
+ color: var(--show-more-color);
&:hover {
- color: $da-tertiary;
+ --show-more-color: var(--button-secondary-foreground-color-active);
}
}
@@ -138,9 +144,10 @@
height: $s-16;
width: $s-16;
fill: none;
- stroke: currentColor;
+ stroke: var(--show-more-color);
}
+// Team hero
.team-hero {
background-color: $db-tertiary;
border-radius: $br-8;
@@ -150,60 +157,6 @@
padding: $s-8;
position: relative;
- .text {
- display: flex;
- flex-direction: column;
- align-items: flex-start;
- flex-grow: 1;
- padding: $s-20 $s-20;
- }
- .title {
- font-size: $fs-24;
- color: $df-primary;
- font-weight: $fw400;
- }
- .info {
- flex: 1;
- font-size: $fs-16;
- span {
- color: $df-secondary;
- display: block;
- }
- a {
- color: $da-primary;
- }
- padding: $s-8 0;
- }
- .close {
- position: absolute;
- top: $s-20;
- right: $s-20;
- background-color: transparent;
- border: none;
- cursor: pointer;
- svg {
- transform: rotate(45deg);
- width: $s-16;
- height: $s-16;
- }
- }
- .invite {
- height: $s-32;
- width: $s-180;
- }
- .img-wrapper {
- display: flex;
- align-items: center;
- justify-content: center;
- width: $s-200;
- height: $s-200;
- overflow: hidden;
- border-radius: $br-4;
- @media (max-width: 1200px) {
- display: none;
- width: 0;
- }
- }
img {
border-radius: $br-4;
height: $s-200;
@@ -214,8 +167,70 @@
width: 0;
}
}
- svg {
- fill: $df-secondary;
+}
+
+.text {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ flex-grow: 1;
+ padding: $s-20 $s-20;
+}
+
+.title {
+ font-size: $fs-24;
+ color: $df-primary;
+ font-weight: $fw400;
+}
+
+.info {
+ flex: 1;
+ font-size: $fs-16;
+ span {
+ color: $df-secondary;
+ display: block;
+ }
+ a {
+ color: $da-primary;
+ }
+ padding: $s-8 0;
+}
+
+.close {
+ --close-icon-foreground-color: var(--icon-foreground);
+ position: absolute;
+ top: $s-20;
+ right: $s-24;
+ width: $s-24;
+ background-color: transparent;
+ border: none;
+ cursor: pointer;
+ &:hover {
+ --close-icon-foreground-color: var(--button-icon-foreground-color-selected);
+ }
+}
+
+.close-icon {
+ @extend .button-icon;
+ stroke: var(--close-icon-foreground-color);
+}
+
+.invite {
+ height: $s-32;
+ width: $s-180;
+}
+
+.img-wrapper {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: $s-200;
+ height: $s-200;
+ overflow: hidden;
+ border-radius: $br-4;
+ @media (max-width: 1200px) {
+ display: none;
+ width: 0;
}
}
@@ -279,30 +294,6 @@
width: $s-180;
height: $s-40;
}
- .close {
- position: absolute;
- top: 0;
- right: 0;
- width: $s-24;
- cursor: pointer;
- display: flex;
- margin: $s-20;
- justify-content: center;
- align-items: center;
- background-color: transparent;
- border: none;
- .icon {
- svg {
- fill: $df-secondary;
- height: $s-16;
- width: $s-16;
- transform: rotate(45deg);
- &:hover {
- fill: $da-tertiary;
- }
- }
- }
- }
}
.walkthrough {
.thumbnail {
diff --git a/frontend/src/app/main/ui/dashboard/search.scss b/frontend/src/app/main/ui/dashboard/search.scss
index 0922089ad..7c20671c2 100644
--- a/frontend/src/app/main/ui/dashboard/search.scss
+++ b/frontend/src/app/main/ui/dashboard/search.scss
@@ -42,7 +42,7 @@
color: $df-primary;
}
.icon svg {
- fill: $df-secondary;
+ stroke: $df-secondary;
width: $s-32;
height: $s-32;
}
diff --git a/frontend/src/app/main/ui/dashboard/sidebar.cljs b/frontend/src/app/main/ui/dashboard/sidebar.cljs
index 1a93e3a64..96d4c9df0 100644
--- a/frontend/src/app/main/ui/dashboard/sidebar.cljs
+++ b/frontend/src/app/main/ui/dashboard/sidebar.cljs
@@ -40,31 +40,31 @@
[rumext.v2 :as mf]))
(def ^:private clear-search-icon
- (icon-xref :delete-text-refactor (stl/css :clear-search-icon)))
+ (icon-xref :delete-text (stl/css :clear-search-icon)))
(def ^:private search-icon
- (icon-xref :search-refactor (stl/css :search-icon)))
+ (icon-xref :search (stl/css :search-icon)))
(def ^:private tick-icon
- (icon-xref :tick-refactor (stl/css :tick-icon)))
+ (icon-xref :tick (stl/css :tick-icon)))
(def ^:private logo-icon
- (icon-xref :logo-refactor (stl/css :logo-icon)))
+ (icon-xref :logo (stl/css :logo-icon)))
(def ^:private add-icon
- (icon-xref :add-refactor (stl/css :add-icon)))
+ (icon-xref :add (stl/css :add-icon)))
(def ^:private arrow-icon
- (icon-xref :arrow-refactor (stl/css :arrow-icon)))
+ (icon-xref :arrow (stl/css :arrow-icon)))
(def ^:private menu-icon
- (icon-xref :menu-refactor (stl/css :menu-icon)))
+ (icon-xref :menu (stl/css :menu-icon)))
(def ^:private pin-icon
- (icon-xref :pin-refactor (stl/css :pin-icon)))
+ (icon-xref :pin (stl/css :pin-icon)))
(def ^:private exit-icon
- (icon-xref :exit-refactor (stl/css :exit-icon)))
+ (icon-xref :exit (stl/css :exit-icon)))
(mf/defc sidebar-project
[{:keys [item selected?] :as props}]
diff --git a/frontend/src/app/main/ui/dashboard/sidebar.scss b/frontend/src/app/main/ui/dashboard/sidebar.scss
index c6cea273a..1a5c627e6 100644
--- a/frontend/src/app/main/ui/dashboard/sidebar.scss
+++ b/frontend/src/app/main/ui/dashboard/sidebar.scss
@@ -239,6 +239,7 @@
.element-title {
@include textEllipsis;
+ width: $s-256;
color: var(--sidebar-element-foreground-color);
font-size: $fs-14;
}
diff --git a/frontend/src/app/main/ui/dashboard/team.cljs b/frontend/src/app/main/ui/dashboard/team.cljs
index cbbbb421e..76652e98a 100644
--- a/frontend/src/app/main/ui/dashboard/team.cljs
+++ b/frontend/src/app/main/ui/dashboard/team.cljs
@@ -24,6 +24,8 @@
[app.main.ui.dashboard.change-owner]
[app.main.ui.dashboard.team-form]
[app.main.ui.icons :as i]
+ [app.main.ui.notifications.badge :refer [badge-notification]]
+ [app.main.ui.notifications.context-notification :refer [context-notification]]
[app.util.dom :as dom]
[app.util.i18n :as i18n :refer [tr]]
[beicon.v2.core :as rx]
@@ -31,6 +33,31 @@
[cuerdas.core :as str]
[rumext.v2 :as mf]))
+
+(def ^:private arrow-icon
+ (i/icon-xref :arrow (stl/css :arrow-icon)))
+
+(def ^:private menu-icon
+ (i/icon-xref :menu (stl/css :menu-icon)))
+
+(def ^:private warning-icon
+ (i/icon-xref :msg-warning (stl/css :warning-icon)))
+
+(def ^:private success-icon
+ (i/icon-xref :msg-success (stl/css :success-icon)))
+
+(def ^:private image-icon
+ (i/icon-xref :img (stl/css :image-icon)))
+
+(def ^:private user-icon
+ (i/icon-xref :user (stl/css :user-icon)))
+
+(def ^:private document-icon
+ (i/icon-xref :document (stl/css :document-icon)))
+
+(def ^:private group-icon
+ (i/icon-xref :group (stl/css :group-icon)))
+
(mf/defc header
{::mf/wrap [mf/memo]
::mf/wrap-props false}
@@ -163,17 +190,16 @@
(tr "modals.invite-team-member.title")]
(when-not (= "" @error-text)
- [:div {:class (stl/css :error-msg)}
- [:span {:class (stl/css :icon)} i/msg-error]
- [:span {:class (stl/css :message)} @error-text]])
+ [:& context-notification {:content @error-text
+ :type :error}])
(when (some current-data-emails current-members-emails)
- [:div {:class (stl/css :warning-msg)}
- [:span {:class (stl/css :icon)} i/msg-warning]
- [:span {:class (stl/css :message)} (tr "modals.invite-member.repeated-invitation")]])
+ [:& context-notification {:content (tr "modals.invite-member.repeated-invitation")
+ :type :warning}])
[:div {:class (stl/css :role-select)}
- [:p {:class (stl/css :role-title)} (tr "onboarding.choice.team-up.roles")]
+ [:p {:class (stl/css :role-title)}
+ (tr "onboarding.choice.team-up.roles")]
[:& fm/select {:name :role :options roles}]]
[:div {:class (stl/css :invitation-row)}
@@ -190,6 +216,7 @@
[:div {:class (stl/css :action-buttons)}
[:> fm/submit-button*
{:label (tr "modals.invite-member-confirm.accept")
+ :class (stl/css :accept-btn)
:disabled (and (boolean (some current-data-emails current-members-emails))
(empty? (remove current-members-emails current-data-emails)))}]]]]))
@@ -202,8 +229,8 @@
[{:keys [member profile]}]
(let [is-you? (= (:id profile) (:id member))]
[:*
- [:div {:class (stl/css :member-image)}
- [:img {:src (cfg/resolve-profile-photo-url member)}]]
+ [:img {:class (stl/css :member-image)
+ :src (cfg/resolve-profile-photo-url member)}]
[:div {:class (stl/css :member-info)}
[:div {:class (stl/css :member-name)} (:name member)
(when is-you?
@@ -238,19 +265,25 @@
[:div {:class (stl/css :rol-selector :has-priv)
:on-click on-show}
[:span {:class (stl/css :rol-label)} (tr role)]
- [:span {:class (stl/css :icon)} i/arrow-down]]
+ arrow-icon]
[:div {:class (stl/css :rol-selector)}
[:span {:class (stl/css :rol-label)} (tr role)]])
[:& dropdown {:show @show? :on-close on-hide}
- [:ul {:class (stl/css :dropdown :options-dropdown)}
- [:li {:on-click on-set-admin} (tr "labels.admin")]
- [:li {:on-click on-set-editor} (tr "labels.editor")]
- ;; Temporarily disabled viewer role
- ;; https://tree.taiga.io/project/penpot/issue/1083
- ;; [:li {:on-click set-viewer} (tr "labels.viewer")]
+ [:ul {:class (stl/css :roles-dropdown)}
+ [:li {:on-click on-set-admin
+ :class (stl/css :rol-dropdown-item)}
+ (tr "labels.admin")]
+ [:li {:on-click on-set-editor
+ :class (stl/css :rol-dropdown-item)}
+ (tr "labels.editor")]
+ ;; Temporarily disabled viewer role
+ ;; https://tree.taiga.io/project/penpot/issue/1083
+ ;; [:li {:on-click set-viewer} (tr "labels.viewer")]
(when you-owner?
- [:li {:on-click (partial on-set-owner member)} (tr "labels.owner")])]]]))
+ [:li {:on-click (partial on-set-owner member)
+ :class (:stl/css :rol-dropdown-item)}
+ (tr "labels.owner")])]]]))
(mf/defc member-actions
{::mf/wrap-props false}
@@ -267,15 +300,20 @@
[:*
(when (or is-you? (and can-delete? (not (and is-owner? (not owner?)))))
- [:span {:class (stl/css :icon)
- :on-click on-show} [i/actions]])
+ [:button {:class (stl/css :menu-btn)
+ :on-click on-show}
+ menu-icon])
[:& dropdown {:show @show? :on-close on-hide}
- [:ul {:class (stl/css :dropdown :actions-dropdown)}
+ [:ul {:class (stl/css :actions-dropdown)}
(when is-you?
- [:li {:on-click on-leave} (tr "dashboard.leave-team")])
+ [:li {:on-click on-leave
+ :class (stl/css :action-dropdown-item)
+ :key "is-you-option"} (tr "dashboard.leave-team")])
(when (and can-delete? (not is-you?) (not (and is-owner? (not owner?))))
- [:li {:on-click on-delete} (tr "labels.remove-member")])]]]))
+ [:li {:on-click on-delete
+ :class (stl/css :action-dropdown-item)
+ :key "is-not-you-option"} (tr "labels.remove-member")])]]]))
(defn- set-role! [member-id role]
(let [params {:member-id member-id :role role}]
@@ -396,10 +434,10 @@
:else on-leave)]
[:div {:class (stl/css :table-row)}
- [:div {:class (stl/css :table-field :name)}
+ [:div {:class (stl/css :table-field :field-name)}
[:& member-info {:member member :profile profile}]]
- [:div {:class (stl/css :table-field :roles)}
+ [:div {:class (stl/css :table-field :field-roles)}
[:& rol-info {:member member
:team team
:on-set-admin on-set-admin
@@ -407,7 +445,7 @@
:on-set-owner on-set-owner
:profile profile}]]
- [:div {:class (stl/css :table-field :actions)}
+ [:div {:class (stl/css :table-field :field-actions)}
[:& member-actions {:member member
:profile profile
:team team
@@ -427,8 +465,8 @@
[:div {:class (stl/css :dashboard-table :team-members)}
[:div {:class (stl/css :table-header)}
- [:div {:class (stl/css :table-field :name)} (tr "labels.member")]
- [:div {:class (stl/css :table-field :role)} (tr "labels.role")]]
+ [:div {:class (stl/css :table-field :title-field-name)} (tr "labels.member")]
+ [:div {:class (stl/css :table-field :title-field-role)} (tr "labels.role")]]
[:div {:class (stl/css :table-rows)}
[:& team-member
@@ -499,27 +537,20 @@
[:div {:class (stl/css :rol-selector :has-priv)
:on-click on-show}
[:span {:class (stl/css :rol-label)} label]
- [:span {:class (stl/css :icon)} i/arrow-down]]
+ arrow-icon]
[:div {:class (stl/css :rol-selector)}
[:span {:class (stl/css :rol-label)} label]])
[:& dropdown {:show @show? :on-close on-hide}
- [:ul {:class (stl/css :dropdown :options-dropdown)}
- [:li {:data-role "admin" :on-click on-change'} (tr "labels.admin")]
- [:li {:data-role "editor" :on-click on-change'} (tr "labels.editor")]]]]))
-
-(mf/defc invitation-status-badge
- {::mf/wrap-props false}
- [{:keys [status]}]
- [:div
- {:class (stl/css-case
- :status-badge true
- :expired (= status :expired)
- :pending (= status :pending))}
- [:span {:class (stl/css :status-label)}
- (if (= status :expired)
- (tr "labels.expired-invitation")
- (tr "labels.pending-invitation"))]])
+ [:ul {:class (stl/css :roles-dropdown)}
+ [:li {:data-role "admin"
+ :class (stl/css :rol-dropdown-item)
+ :on-click on-change'}
+ (tr "labels.admin")]
+ [:li {:data-role "editor"
+ :class (stl/css :rol-dropdown-item)
+ :on-click on-change'}
+ (tr "labels.editor")]]]]))
(mf/defc invitation-actions
{::mf/wrap-props false}
@@ -600,13 +631,21 @@
on-show (mf/use-fn #(reset! show? true))]
[:*
- [:span {:class (stl/css :icon)
- :on-click on-show} [i/actions]]
+ [:button {:class (stl/css :menu-btn)
+ :on-click on-show}
+ menu-icon]
+
[:& dropdown {:show @show? :on-close on-hide}
- [:ul {:class (stl/css :dropdown :actions-dropdown)}
- [:li {:on-click on-copy} (tr "labels.copy-invitation-link")]
- [:li {:on-click on-resend} (tr "labels.resend-invitation")]
- [:li {:on-click on-delete} (tr "labels.delete-invitation")]]]]))
+ [:ul {:class (stl/css :actions-dropdown :invitations-dropdown)}
+ [:li {:on-click on-copy
+ :class (stl/css :action-dropdown-item)}
+ (tr "labels.copy-invitation-link")]
+ [:li {:on-click on-resend
+ :class (stl/css :action-dropdown-item)}
+ (tr "labels.resend-invitation")]
+ [:li {:on-click on-delete
+ :class (stl/css :action-dropdown-item)}
+ (tr "labels.delete-invitation")]]]]))
(mf/defc invitation-row
{::mf/wrap [mf/memo]
@@ -617,6 +656,10 @@
email (:email invitation)
role (:role invitation)
status (if expired? :expired :pending)
+ type (if expired? :warning :default)
+ badge-content (if (= status :expired)
+ (tr "labels.expired-invitation")
+ (tr "labels.pending-invitation"))
on-change-role
(mf/use-fn
@@ -626,20 +669,20 @@
mdata {:on-success #(st/emit! (dd/fetch-team-invitations))}]
(st/emit! (dd/update-team-invitation-role (with-meta params mdata))))))]
- [:div {:class (stl/css :table-row)}
- [:div {:class (stl/css :table-field :mail)} email]
+ [:div {:class (stl/css :table-row :table-row-invitations)}
+ [:div {:class (stl/css :table-field :field-email)} email]
- [:div {:class (stl/css :table-field :roles)}
+ [:div {:class (stl/css :table-field :field-roles)}
[:& invitation-role-selector
{:can-invite? can-invite?
:role role
:status status
:on-change on-change-role}]]
- [:div {:class (stl/css :table-field :status)}
- [:& invitation-status-badge {:status status}]]
+ [:div {:class (stl/css :table-field :field-status)}
+ [:& badge-notification {:type type :content badge-content}]]
- [:div {:class (stl/css :table-field :actions)}
+ [:div {:class (stl/css :table-field :field-actions)}
(when can-invite?
[:& invitation-actions
{:invitation invitation
@@ -660,11 +703,11 @@
can-invite? (or owner? admin?)
team-id (:id team)]
- [:div {:class (stl/css :dashboard-table :invitations)}
+ [:div {:class (stl/css :invitations)}
[:div {:class (stl/css :table-header)}
- [:div {:class (stl/css :table-field :name)} (tr "labels.invitations")]
- [:div {:class (stl/css :table-field :role)} (tr "labels.role")]
- [:div {:class (stl/css :table-field :status)} (tr "labels.status")]]
+ [:div {:class (stl/css :title-field-name)} (tr "labels.invitations")]
+ [:div {:class (stl/css :title-field-role)} (tr "labels.role")]
+ [:div {:class (stl/css :title-field-status)} (tr "labels.status")]]
(if (empty? invitations)
[:& empty-invitation-table {:can-invite? can-invite?}]
[:div {:class (stl/css :table-rows)}
@@ -692,7 +735,7 @@
[:*
[:& header {:section :dashboard-team-invitations
:team team}]
- [:section {:class (stl/css :dashboard-container :dashboard-team-invitations)}
+ [:section {:class (stl/css :dashboard-team-invitations)}
;; TODO: We should consider adding a "loading state" here
;; with an (if (nil? invitations) [:& loading-state] [:& invitations])
(when-not (nil? invitations)
@@ -736,24 +779,25 @@
on-error
(mf/use-fn
- (fn [form {:keys [type code hint] :as error}]
- (if (and (= type :validation)
- (= code :webhook-validation))
- (let [message (cond
- (= hint "unknown")
- (tr "errors.webhooks.unexpected")
- (= hint "invalid-uri")
- (tr "errors.webhooks.invalid-uri")
- (= hint "ssl-validation-error")
- (tr "errors.webhooks.ssl-validation")
- (= hint "timeout")
- (tr "errors.webhooks.timeout")
- (= hint "connection-error")
- (tr "errors.webhooks.connection")
- (str/starts-with? hint "unexpected-status")
- (tr "errors.webhooks.unexpected-status" (extract-status hint)))]
- (swap! form assoc-in [:errors :uri] {:message message}))
- (rx/throw error))))
+ (fn [form error]
+ (let [{:keys [type code hint]} (ex-data error)]
+ (if (and (= type :validation)
+ (= code :webhook-validation))
+ (let [message (cond
+ (= hint "unknown")
+ (tr "errors.webhooks.unexpected")
+ (= hint "invalid-uri")
+ (tr "errors.webhooks.invalid-uri")
+ (= hint "ssl-validation-error")
+ (tr "errors.webhooks.ssl-validation")
+ (= hint "timeout")
+ (tr "errors.webhooks.timeout")
+ (= hint "connection-error")
+ (tr "errors.webhooks.connection")
+ (str/starts-with? hint "unexpected-status")
+ (tr "errors.webhooks.unexpected-status" (extract-status hint)))]
+ (swap! form assoc-in [:errors :uri] {:message message}))
+ (rx/throw error)))))
on-create-submit
(mf/use-fn
@@ -794,7 +838,7 @@
[:h2 {:class (stl/css :modal-title)} (tr "modals.create-webhook.title")])
[:button {:class (stl/css :modal-close-btn)
- :on-click on-modal-close} i/close-refactor]]
+ :on-click on-modal-close} i/close]]
[:div {:class (stl/css :modal-content)}
[:div {:class (stl/css :fields-row)}
@@ -828,20 +872,17 @@
(tr "modals.edit-webhook.submit-label")
(tr "modals.create-webhook.submit-label"))}]]]]]]))
-
(mf/defc webhooks-hero
{::mf/wrap-props false}
[]
[:div {:class (stl/css :webhooks-hero-container)}
- [:div {:class (stl/css :webhooks-hero)}
- [:div {:class (stl/css :desc)}
- [:h2 (tr "labels.webhooks")]
- [:& i18n/tr-html {:label "dashboard.webhooks.description"}]]
-
- [:div
- {:class (stl/css :btn-primary)
- :on-click #(st/emit! (modal/show :webhook {}))}
- [:span (tr "dashboard.webhooks.create")]]]])
+ [:h2 {:class (stl/css :hero-title)}
+ (tr "labels.webhooks")]
+ [:& i18n/tr-html {:class (stl/css :hero-desc)
+ :label "dashboard.webhooks.description"}]
+ [:button {:class (stl/css :hero-btn)
+ :on-click #(st/emit! (modal/show :webhook {}))}
+ (tr "dashboard.webhooks.create")]])
(mf/defc webhook-actions
{::mf/wrap-props false}
@@ -852,23 +893,24 @@
[:*
- [:span {:class (stl/css :icon)
- :on-click on-show} [i/actions]]
+ [:button {:class (stl/css :menu-btn)
+ :on-click on-show}
+ menu-icon]
[:& dropdown {:show @show? :on-close on-hide}
- [:ul {:class (stl/css :dropdown :actions-dropdown)}
- [:li {:on-click on-edit} (tr "labels.edit")]
- [:li {:on-click on-delete} (tr "labels.delete")]]]]))
+ [:ul {:class (stl/css :webhook-actions-dropdown)}
+ [:li {:on-click on-edit
+ :class (stl/css :webhook-dropdown-item)} (tr "labels.edit")]
+ [:li {:on-click on-delete
+ :class (stl/css :webhook-dropdown-item)} (tr "labels.delete")]]]]))
(mf/defc last-delivery-icon
{::mf/wrap-props false}
[{:keys [success? text]}]
- [:div {:class (stl/css :last-delivery-icon)}
- [:div {:class (stl/css :tooltip)}
- [:div {:class (stl/css :label)} text]
- [:div {:class (stl/css :arrow-down)}]]
+ [:div {:class (stl/css :last-delivery-icon)
+ :title text}
(if success?
- [:span {:class (stl/css :icon :success)} i/msg-success]
- [:span {:class (stl/css :icon :failure)} i/msg-warning])])
+ success-icon
+ warning-icon)])
(mf/defc webhook-item
{::mf/wrap [mf/memo]}
@@ -913,12 +955,12 @@
(dm/str " " (tr "errors.webhooks.unexpected-status" (extract-status error-code))))))]
- [:div {:class (stl/css :table-row)}
- [:div {:class (stl/css :table-field :last-delivery)}
- [:div {:class (stl/css :icon-container)}
- [:& last-delivery-icon
- {:success? (nil? error-code)
- :text last-delivery-text}]]]
+ [:div {:class (stl/css :table-row :webhook-row)}
+ [:div {:class (stl/css :table-field :last-delivery)
+ :title last-delivery-text}
+ (if (nil? error-code)
+ success-icon
+ warning-icon)]
[:div {:class (stl/css :table-field :uri)}
[:div (dm/str (:uri webhook))]]
[:div {:class (stl/css :table-field :active)}
@@ -933,10 +975,9 @@
(mf/defc webhooks-list
{::mf/wrap-props false}
[{:keys [webhooks]}]
- [:div {:class (stl/css :dashboard-table)}
- [:div {:class (stl/css :table-rows)}
- (for [webhook webhooks]
- [:& webhook-item {:webhook webhook :key (:id webhook)}])]])
+ [:div {:class (stl/css :table-rows :webhook-table)}
+ (for [webhook webhooks]
+ [:& webhook-item {:webhook webhook :key (:id webhook)}])])
(mf/defc team-webhooks-page
{::mf/wrap-props false}
@@ -1005,38 +1046,51 @@
[:*
[:& header {:section :dashboard-team-settings :team team}]
- [:section {:class (stl/css :dashboard-container :dashboard-team-settings)}
- [:div {:class (stl/css :team-settings)}
- [:div {:class (stl/css :horizontal-blocks)}
- [:div {:class (stl/css :block :info-block)}
- [:div {:class (stl/css :label)} (tr "dashboard.team-info")]
- [:div {:class (stl/css :name)} (:name team)]
- [:div {:class (stl/css :icon)}
- (when can-edit?
- [:span {:class (stl/css :update-overlay)
- :on-click on-image-click} i/image])
- [:img {:src (cfg/resolve-team-photo-url team)}]
- (when can-edit?
- [:& file-uploader {:accept "image/jpeg,image/png"
- :multi false
- :ref finput
- :on-selected on-file-selected}])]]
+ [:section {:class (stl/css :dashboard-team-settings)}
+ [:div {:class (stl/css :block :info-block)}
+ [:div {:class (stl/css :block-label)}
+ (tr "dashboard.team-info")]
+ [:div {:class (stl/css :block-text)}
+ (:name team)]
+ [:div {:class (stl/css :team-icon)}
+ (when can-edit?
+ [:button {:class (stl/css :update-overlay)
+ :on-click on-image-click}
+ image-icon])
+ [:img {:class (stl/css :team-image)
+ :src (cfg/resolve-team-photo-url team)}]
+ (when can-edit?
+ [:& file-uploader {:accept "image/jpeg,image/png"
+ :multi false
+ :ref finput
+ :on-selected on-file-selected}])]]
- [:div {:class (stl/css :block :owner-block)}
- [:div {:class (stl/css :label)} (tr "dashboard.team-members")]
- [:div {:class (stl/css :owner)}
- [:span {:class (stl/css :icon)} [:img {:src (cfg/resolve-profile-photo-url owner)}]]
- [:span {:class (stl/css :text)} (str (:name owner) " (" (tr "labels.owner") ")")]]
- [:div {:class (stl/css :summary)}
- [:span {:class (stl/css :icon)} i/user]
- [:span {:class (stl/css :text)} (tr "dashboard.num-of-members" (count members-map))]]]
+ [:div {:class (stl/css :block)}
+ [:div {:class (stl/css :block-label)}
+ (tr "dashboard.team-members")]
- [:div {:class (stl/css :block :stats-block)}
- [:div {:class (stl/css :label)} (tr "dashboard.team-projects")]
- [:div {:class (stl/css :projects)}
- [:span {:class (stl/css :icon)} i/folder]
- [:span {:class (stl/css :text)} (tr "labels.num-of-projects" (i18n/c (dec (:projects stats))))]]
- [:div {:class (stl/css :files)}
- [:span {:class (stl/css :icon)} i/file-html]
- [:span {:class (stl/css :text)} (tr "labels.num-of-files" (i18n/c (:files stats)))]]]]]]]))
+ [:div {:class (stl/css :block-content)}
+ [:img {:class (stl/css :owner-icon)
+ :src (cfg/resolve-profile-photo-url owner)}]
+ [:span {:class (stl/css :block-text)}
+ (str (:name owner) " (" (tr "labels.owner") ")")]]
+
+ [:div {:class (stl/css :block-content)}
+ user-icon
+ [:span {:class (stl/css :block-text)}
+ (tr "dashboard.num-of-members" (count members-map))]]]
+
+ [:div {:class (stl/css :block)}
+ [:div {:class (stl/css :block-label)}
+ (tr "dashboard.team-projects")]
+
+ [:div {:class (stl/css :block-content)}
+ group-icon
+ [:span {:class (stl/css :block-text)}
+ (tr "labels.num-of-projects" (i18n/c (dec (:projects stats))))]]
+
+ [:div {:class (stl/css :block-content)}
+ document-icon
+ [:span {:class (stl/css :block-text)}
+ (tr "labels.num-of-files" (i18n/c (:files stats)))]]]]]))
diff --git a/frontend/src/app/main/ui/dashboard/team.scss b/frontend/src/app/main/ui/dashboard/team.scss
index 2f1b8840e..e79a69f63 100644
--- a/frontend/src/app/main/ui/dashboard/team.scss
+++ b/frontend/src/app/main/ui/dashboard/team.scss
@@ -7,577 +7,427 @@
@use "common/refactor/common-refactor.scss" as *;
@use "common/refactor/common-dashboard";
-.dashboard-container {
- flex: 1 0 0;
- margin-right: $s-16;
- overflow-y: auto;
+// Dashboard team settings
+.dashboard-team-settings {
+ display: grid;
+ grid-template-rows: auto auto 1fr;
+ justify-items: center;
+ gap: $s-24;
width: 100%;
- border-top: $s-1 solid $db-quaternary;
-
- &.dashboard-projects {
- user-select: none;
- }
- &.dashboard-shared {
- width: calc(100vw - $s-320);
- margin-right: $s-52;
- }
-
- &.search {
- margin-top: $s-12;
- }
+ border-top: $s-1 solid var(--panel-border-color);
+ overflow-y: auto;
}
-.dashboard-team-webhooks {
- display: flex;
- flex-direction: column;
- width: $s-800;
- margin-left: $s-120;
- margin-top: $s-80;
- border: none;
- align-items: flex-start;
-}
-
-.webhooks-empty {
- align-items: center;
- background-color: transparent;
- border-radius: $br-8;
- border: $s-1 solid $db-quaternary;
- color: $df-secondary;
- display: flex;
- flex-direction: column;
- font-size: $fs-12;
- justify-content: center;
- margin-top: $s-32;
+.block {
+ display: grid;
+ grid-auto-rows: min-content;
+ gap: $s-8;
max-width: $s-1000;
- min-height: $s-136;
- padding: $s-32;
- text-align: center;
- width: $s-468;
+ width: $s-1000;
+}
+
+.info-block {
+ position: relative;
+ padding-top: $s-180;
+}
+
+.block-label {
+ @include headlineSmallTypography;
+ color: var(--title-foreground-color);
+}
+
+.block-text {
+ color: var(--title-foreground-color-hover);
+}
+
+.block-content {
+ display: grid;
+ grid-template-columns: $s-32 1fr;
+ align-items: center;
+ gap: $s-12;
+}
+
+.owner-icon {
+ width: $s-32;
+ height: $s-32;
+ border-radius: 50%;
+}
+
+.user-icon,
+.document-icon,
+.group-icon {
+ @extend .button-icon;
+ margin: 0 auto;
+ stroke: var(--icon-foreground);
+}
+
+.team-icon {
+ --update-button-opacity: 0;
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: $s-120;
+ width: $s-120;
+ padding: $s-16;
+
+ &:hover {
+ --update-button-opacity: 1;
+ }
+}
+
+.team-image {
+ border-radius: 50%;
+ width: $s-120;
+ height: $s-120;
+}
+
+.update-overlay {
+ opacity: var(--update-button-opacity);
+ @include buttonStyle;
+ @include flexCenter;
+ position: absolute;
+ top: $s-16;
+ left: $s-16;
+ height: 100%;
+ width: 100%;
+ z-index: $z-index-modal;
+ border-radius: $br-circle;
+ background-color: $da-primary;
+}
+
+.image-icon {
+ @extend .button-icon;
+ min-width: $s-24;
+ min-height: $s-24;
+ stroke: var(--icon-foreground-hover);
+}
+
+// TEAM MEMBERS PAGE
+.dashboard-team-members {
+ display: grid;
+ justify-items: center;
+ width: 100%;
+ height: 100%;
+ padding-top: $s-20;
+ border-top: $s-1 solid var(--panel-border-color);
+ overflow-y: auto;
+ scrollbar-gutter: stable;
+}
+
+.team-members {
+ display: grid;
+ grid-template-rows: auto 1fr;
+ height: fit-content;
+ max-width: $s-1000;
+ width: $s-1000;
+}
+
+.table-header {
+ @include headlineSmallTypography;
+ display: grid;
+ align-items: center;
+ grid-template-columns: 43% 1fr $s-108 $s-12;
+ height: $s-40;
+ width: 100%;
+ max-width: $s-1000;
+ padding: 0 $s-16;
+ user-select: none;
+ color: var(--title-foreground-color);
+}
+
+.table-rows {
+ display: grid;
+ grid-auto-rows: $s-64;
+ gap: $s-16;
+ width: 100%;
+ height: 100%;
+ max-width: $s-1000;
+ margin-top: $s-16;
+ color: var(--title-foreground-color);
+}
+
+.table-row {
+ display: grid;
+ grid-template-columns: 43% 1fr auto;
+ align-items: center;
+ height: $s-64;
+ width: 100%;
+ padding: 0 $s-16;
+ border-radius: $br-8;
+ background-color: var(--dashboard-list-background-color);
+ color: var(--dashboard-list-foreground-color);
+}
+
+.title-field-name {
+ width: 43%;
+ min-width: $s-300;
+}
+
+.title-field-roles {
+ position: relative;
+ cursor: default;
+}
+
+.field-name {
+ display: grid;
+ grid-template-columns: auto 1fr;
+ gap: $s-16;
+ width: 43%;
+ min-width: $s-300;
+}
+
+.field-roles {
+ position: relative;
+ cursor: default;
+}
+
+.field-actions {
+ position: relative;
+}
+
+// MEMBER INFO
+.member-image {
+ height: $s-32;
+ width: $s-32;
+ border-radius: $br-circle;
+}
+
+.member-info {
+ display: grid;
+ grid-template-rows: 1fr 1fr;
+ width: 100%;
+}
+
+.member-name,
+.member-email {
+ @include textEllipsis;
+ @include bodyLargeTypography;
+}
+
+.member-email {
+ @include bodySmallTypography;
+ color: var(--dashboard-list-text-foreground-color);
+}
+
+.you {
+ color: var(--dashboard-list-text-foreground-color);
+ margin-left: $s-6;
+}
+
+// ROL INFO
+.rol-selector {
+ position: relative;
+ display: grid;
+ grid-template-columns: 1fr auto;
+ align-items: center;
+ height: $s-32;
+ min-width: $s-160;
+ width: fit-content;
+ padding: $s-4 $s-8;
+ border-radius: $br-8;
+ border-color: var(--menu-background-color-hover);
+ background-color: var(--menu-background-color-hover);
+ font-size: $fs-14;
+}
+
+.has-priv {
+ cursor: pointer;
+}
+
+.rol-label {
+ user-select: none;
+}
+
+.roles-dropdown {
+ @extend .menu-dropdown;
+ bottom: calc(-1 * $s-76);
+ width: fit-content;
+ min-width: $s-160;
+}
+
+.rol-dropdown-item {
+ @extend .menu-item-base;
+}
+
+// MEMBER ACTIONS
+.menu-icon {
+ @extend .button-icon;
+ stroke: var(--icon-foreground);
+}
+
+.menu-btn {
+ @include buttonStyle;
+}
+
+.actions-dropdown {
+ @extend .menu-dropdown;
+ bottom: calc(-1 * $s-32);
+ right: 0;
+ left: unset;
+ width: fit-content;
+ min-width: $s-160;
+}
+
+.action-dropdown-item {
+ @extend .menu-item-base;
+}
+
+// TEAM INVITATION PAGE
+.dashboard-team-invitations {
+ display: grid;
+ justify-items: center;
+ width: 100%;
+ height: 100%;
+ padding-top: $s-20;
+ border-top: $s-1 solid var(--panel-border-color);
+ overflow-y: auto;
+ scrollbar-gutter: stable;
+}
+
+.invitations {
+ display: grid;
+ grid-template-rows: auto 1fr;
+ height: fit-content;
+ max-width: $s-1000;
+ width: $s-1000;
+}
+
+.table-row-invitations {
+ grid-template-columns: 43% 1fr $s-108 $s-12;
+ align-items: center;
+}
+
+.empty-invitations {
+ display: grid;
+ place-items: center;
+ align-content: center;
+ height: $s-156;
+ max-width: $s-1000;
+ width: 100%;
+ margin-top: $s-16;
+ border: $s-1 solid var(--panel-border-color);
+ border-radius: $br-8;
+ color: var(--dashboard-list-text-foreground-color);
+}
+
+.title-field-status {
+ position: relative;
+ cursor: default;
+}
+
+.field-email {
+ @include textEllipsis;
+ @include bodyLargeTypography;
+ display: grid;
+ align-items: center;
+}
+
+.invitations-dropdown {
+ bottom: calc(-1 * $s-112);
+ right: calc(-1 * $s-20);
+}
+
+// WEBHOOKS SECTION
+.dashboard-team-webhooks {
+ display: grid;
+ grid-template-rows: auto 1fr;
+ justify-items: center;
+ gap: $s-24;
+ width: 100%;
+ height: 100%;
+ padding-top: $s-16;
+ border-top: $s-1 solid var(--panel-border-color);
+ overflow-y: auto;
}
.webhooks-hero-container {
+ display: grid;
+ gap: $s-32;
+ max-width: $s-1000;
+ width: $s-1000;
+}
+
+.webhooks-empty {
+ display: grid;
+ place-items: center;
+ align-content: center;
+ height: $s-156;
max-width: $s-1000;
width: 100%;
- display: flex;
- flex-direction: column;
-
- width: $s-468;
- background-color: transparent;
-
- .upload-button {
- width: $s-100;
- }
-
- .btn-secondary {
- margin-left: $s-12;
- }
+ padding: $s-32;
+ border: $s-1 solid var(--panel-border-color);
+ border-radius: $br-8;
+ color: var(--dashboard-list-text-foreground-color);
}
.webhooks-hero {
font-size: $fs-14;
- display: flex;
- flex-direction: column;
+ display: grid;
+ grid-template-rows: auto 1fr auto;
gap: $s-32;
- justify-content: space-between;
margin-top: $s-32;
margin: 0;
padding: $s-32;
padding: 0;
width: $s-468;
-
- .desc {
- color: $df-secondary;
- width: 100%;
-
- h2 {
- color: $df-primary;
- font-size: $fs-24;
- font-weight: regular;
- margin-bottom: $s-32;
- }
- p {
- color: $df-secondary;
- margin-bottom: 0;
- font-size: $fs-16;
- }
- }
- .btn-primary {
- @extend .button-primary;
- height: $s-32;
- }
}
-.dropdown {
- background-color: $db-tertiary;
- border-radius: $br-8;
- border: $s-1 solid $db-quaternary;
- box-shadow: 0 $s-2 $s-8 rgba(0, 0, 0, 0.25);
- left: calc(-1 * $s-144);
- max-height: $s-480;
- min-width: $s-252;
- overflow-y: auto;
- position: absolute;
- top: $s-32;
- width: $s-152;
- z-index: $z-index-4;
-
- hr {
- margin: 0;
- border-color: $df-secondary;
- }
-
- li {
- display: flex;
- align-items: center;
- cursor: pointer;
- font-size: $fs-14;
- padding: $s-4 $s-16;
- border-radius: $br-8;
- height: $s-40;
- margin: $s-6;
- color: $df-primary;
-
- &:hover {
- background-color: $db-quaternary;
- }
-
- &.title {
- font-weight: $fw700;
- cursor: default;
- }
- }
-
- .separator {
- border-color: transparent;
- margin-top: $s-8;
- }
-
- &.options-dropdown {
- li {
- color: $df-primary;
- &.warning {
- color: var(--element-foreground-warning);
- }
- }
- }
+.hero-title {
+ @include bigTitleTipography;
+ color: var(--dashboard-list-foreground-color);
}
-.dashboard-table {
- display: flex;
- flex-direction: column;
- align-items: center;
- margin-top: $s-20;
- font-size: $fs-16;
-
- .table-header {
- color: $df-secondary;
- display: grid;
- font-size: $fs-12;
- grid-template-columns: 43% 1fr $s-108 $s-12;
- height: $s-40;
- max-width: $s-1000;
- padding: 0 $s-16;
- text-transform: uppercase;
- user-select: none;
- width: 100%;
- }
- .table-rows {
- display: flex;
- flex-direction: column;
- max-width: $s-1000;
- width: 100%;
- margin-top: $s-16;
- color: $db-secondary;
- }
-
- .table-row {
- align-items: center;
- background-color: $db-tertiary;
- border-radius: $br-8;
- color: $df-primary;
- display: flex;
- height: $s-64;
- padding: 0 $s-16;
- width: 100%;
-
- &:not(:first-child) {
- margin-top: $s-16;
- }
- }
-
- .table-field {
- display: flex;
- align-items: center;
-
- .icon {
- padding-left: $s-12;
- cursor: pointer;
- }
-
- &.name {
- width: 43%;
- min-width: $s-300;
- display: flex;
- }
- &.roles {
- flex-grow: 1;
- cursor: default;
- position: relative;
- .rol-label {
- user-select: none;
- }
- .rol-selector {
- &.has-priv {
- cursor: pointer;
- }
- min-width: $s-160;
- height: $s-32;
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding: $s-4 $s-8;
- font-size: $fs-14;
- background-color: $db-quaternary;
- border-color: transparent;
- border-radius: $br-8;
- }
-
- .dropdown {
- left: 0;
- }
- }
-
- &.actions {
- position: relative;
- .actions-dropdown {
- max-height: $s-480;
- min-width: $s-180;
- }
-
- svg {
- fill: $df-secondary;
- }
- }
-
- &.status {
- .status-badge {
- min-width: $s-76;
- height: $s-24;
- display: flex;
- justify-content: center;
- align-items: center;
- border-radius: $br-8;
- color: $db-primary;
- text-transform: uppercase;
-
- &.pending {
- background-color: var(--status-color-warning-500);
- }
-
- &.expired {
- background-color: $df-secondary;
- }
-
- .status-label {
- font-size: $fs-12;
- }
- }
- }
-
- &.uri {
- flex-grow: 1;
- }
-
- &.active {
- min-width: $s-100;
- }
-
- &.last-delivery {
- display: flex;
- justify-content: center;
- width: $s-52;
- position: relative;
- .success svg {
- fill: $da-tertiary;
- width: $s-16;
- height: $s-16;
- }
- .failure svg {
- fill: var(--element-foreground-warning);
- width: $s-16;
- height: $s-16;
- }
-
- .icon-container {
- width: $s-16;
- height: $s-16;
- overflow-x: visible;
- }
-
- .icon {
- padding: 0;
- }
- }
-
- .tooltip {
- display: none;
- position: absolute;
- top: calc(-1 * $s-56);
- left: 50%;
- transform: translate(-50%, 0);
- text-align: center;
-
- .label {
- border-radius: $br-4;
- color: $df-primary;
- background-color: $db-secondary;
- white-space: nowrap;
- padding: $s-12 $s-20;
- }
-
- .arrow-down {
- margin: 0 auto;
- width: 0;
- height: 0;
- border-left: $s-8 solid transparent;
- border-right: $s-8 solid transparent;
- border-top: $s-8 solid $db-secondary;
- }
- }
-
- .last-delivery-icon:hover {
- .tooltip {
- display: block;
- }
- }
- }
-
- .member-info {
- display: flex;
- flex-direction: column;
- margin-left: $s-16;
- }
- .member-name {
- font-size: $fs-16;
- }
- .you {
- color: $df-secondary;
- margin-left: $s-6;
- }
- .member-email {
- color: $df-secondary;
- font-size: $fs-12;
- }
- .member-image {
- height: $s-32;
- width: $s-32;
- img {
- border-radius: 50%;
- }
- }
-
- .dashboard-team-webhooks & {
- width: $s-800;
- .table-rows {
- padding-top: 0;
- .table-row {
- font-size: $fs-16;
- min-height: $s-40;
- height: fit-content;
- .name {
- color: $df-primary;
- max-width: $s-480;
- }
- .expiration-date {
- color: $df-secondary;
- }
- }
- }
- }
-
- &.team-members {
- margin-bottom: $s-52;
- }
-
- &.invitations {
- .table-row {
- display: grid;
- grid-template-columns: 43% 1fr $s-108 $s-12;
- }
- }
-
- svg {
- width: $s-12;
- height: $s-12;
- fill: $df-secondary;
- }
-}
-
-.empty-invitations {
- height: $s-156;
- max-width: $s-1000;
- width: 100%;
- display: flex;
- justify-content: center;
- align-items: center;
- flex-direction: column;
- margin-top: $s-16;
- border: $s-1 solid $db-quaternary;
- border-radius: $br-8;
+.hero-desc {
color: $df-secondary;
+ margin-bottom: 0;
+ font-size: $fs-16;
+ max-width: $s-512;
}
-.team-settings {
- display: flex;
- justify-content: center;
- margin-top: $s-16;
-
- svg {
- width: $s-20;
- height: $s-20;
- }
-
- .horizontal-blocks {
- display: flex;
- max-width: $s-1000;
- justify-content: space-between;
- width: 100%;
- flex-direction: column;
- gap: $s-24;
- }
-
- .block {
- display: flex;
- max-width: $s-324;
- width: $s-324;
- flex-direction: column;
- padding: $s-12;
-
- .label {
- color: $df-secondary;
- font-size: $fs-12;
- text-transform: uppercase;
- }
- .icon svg {
- fill: $df-secondary;
- }
- .name,
- .text {
- color: $df-primary;
- }
- }
-
- .info-block {
- position: relative;
- padding-top: $s-180;
-
- .name {
- margin-top: $s-12;
- font-size: $fs-24;
- color: $df-primary;
- @include text-ellipsis;
- margin-right: $s-88;
- }
-
- .icon {
- position: absolute;
- padding: $s-16;
- right: 0;
- top: 0;
- left: 0;
- height: $s-120;
- width: $s-120;
-
- img {
- border-radius: 50%;
- width: $s-120;
- height: $s-120;
- }
-
- .update-overlay {
- opacity: 0;
- cursor: pointer;
- position: absolute;
- display: flex;
- justify-content: center;
- align-items: center;
- border-radius: 50%;
- color: $df-primary;
- z-index: $z-index-modal;
- background-color: $da-primary;
- height: 100%;
- width: 100%;
-
- svg {
- fill: $db-primary;
- }
- }
-
- &:hover {
- .update-overlay {
- opacity: 1;
- top: $s-16;
- left: $s-16;
- }
- }
- }
- }
-
- .owner-block {
- img {
- width: $s-32;
- height: $s-32;
- border-radius: 50%;
- }
-
- svg {
- width: $s-12;
- height: $s-12;
- fill: $db-secondary;
- }
-
- .owner {
- margin-top: $s-6;
- display: flex;
- align-items: center;
- color: $db-secondary;
- .icon {
- margin-right: $s-12;
- }
- }
-
- .summary {
- margin-top: $s-6;
- color: $db-secondary;
- .icon {
- padding: 0 $s-12;
- margin-right: $s-12;
- }
- }
- }
-
- .stats-block {
- svg {
- fill: $db-secondary;
- }
-
- .projects,
- .files {
- margin-top: $s-8;
- display: flex;
- align-items: center;
- color: $db-secondary;
-
- .icon {
- display: flex;
- align-items: center;
- padding: 0 $s-2;
- margin-right: $s-12;
- }
- }
- }
+.hero-btn {
+ @extend .button-primary;
+ height: $s-32;
+ max-width: $s-512;
}
+.webhook-table {
+ height: fit-content;
+}
+
+.webhook-row {
+ display: grid;
+ align-items: center;
+ grid-template-columns: auto 1fr auto auto;
+ gap: $s-16;
+}
+
+.actions {
+ position: relative;
+}
+
+.webhook-actions-dropdown {
+ @extend .menu-dropdown;
+ right: calc(-1 * $s-16);
+ bottom: calc(-1 * $s-40);
+ width: fit-content;
+ min-width: $s-160;
+}
+
+.webhook-dropdown-item {
+ @extend .menu-item-base;
+}
+
+.success-icon {
+ @extend .button-icon;
+ stroke: var(--alert-icon-foreground-color-success);
+}
+
+.warning-icon {
+ @extend .button-icon;
+ stroke: var(--alert-icon-foreground-color-warning);
+}
+
+// INVITE MEMBERS MODAL
.modal-team-container {
@extend .modal-container-base;
@include menuShadow;
@@ -592,83 +442,46 @@
top: $s-216;
right: $s-32;
}
- .modal-title {
- @include headlineMediumTypography;
- height: $s-32;
- color: var(--modal-title-foreground-color);
- }
- .error-msg {
- @include flexRow;
- height: $s-32;
- border-radius: $br-8;
- background-color: var(--alert-background-color-error);
- .icon {
- @include flexCenter;
- width: $s-16;
- height: $s-24;
- svg {
- @extend .button-icon;
- stroke: var(--alert-icon-foreground-color-error);
- }
- }
- .message {
- @include bodySmallTypography;
- color: var(--alert-foreground-color-error);
- }
- }
-
- .warning-msg {
- @include flexRow;
- height: $s-32;
- border-radius: $br-8;
- background-color: var(--alert-background-color-warning);
- padding: $s-24 $s-8;
- gap: $s-8;
- margin-bottom: $s-16;
-
- .icon {
- @include flexCenter;
- width: $s-16;
- height: $s-24;
- svg {
- @extend .button-icon;
- stroke: var(--alert-icon-foreground-color-warning);
- }
- }
- .message {
- @include bodySmallTypography;
- color: var(--alert-foreground-color-warning);
- }
- }
-
- .role-select {
- @include flexColumn;
- row-gap: $s-8;
- .role-title {
- @include bodyLargeTypography;
- margin: 0;
- color: var(--modal-title-foreground-color);
- }
- }
-
- .invitation-row {
- margin-top: $s-8;
- margin-bottom: $s-24;
- }
-
- .action-buttons {
- display: flex;
- justify-content: flex-end;
- button {
- @extend .modal-accept-btn;
- &:disabled {
- @extend .button-disabled;
- }
- }
- }
}
-// WEBHOOKS
+.modal-title {
+ @include headlineMediumTypography;
+ height: $s-32;
+ color: var(--modal-title-foreground-color);
+}
+
+.role-select {
+ @include flexColumn;
+ row-gap: $s-8;
+}
+
+.arrow-icon {
+ @extend .button-icon;
+ stroke: var(--icon-foreground);
+ transform: rotate(90deg);
+}
+
+.role-title {
+ @include bodyLargeTypography;
+ margin: 0;
+ color: var(--modal-title-foreground-color);
+}
+
+.invitation-row {
+ margin-top: $s-8;
+ margin-bottom: $s-24;
+}
+
+.action-buttons {
+ display: flex;
+ justify-content: flex-end;
+}
+
+.accept-btn {
+ @extend .modal-accept-btn;
+}
+
+// WEBHOOKS MODAL
.modal-overlay {
@extend .modal-overlay-base;
diff --git a/frontend/src/app/main/ui/dashboard/team_form.cljs b/frontend/src/app/main/ui/dashboard/team_form.cljs
index e93244e53..7a37ec9c6 100644
--- a/frontend/src/app/main/ui/dashboard/team_form.cljs
+++ b/frontend/src/app/main/ui/dashboard/team_form.cljs
@@ -101,7 +101,7 @@
(tr "labels.create-team")])
[:button {:class (stl/css :modal-close-btn)
- :on-click on-close} i/close-refactor]]
+ :on-click on-close} i/close]]
[:div {:class (stl/css :modal-content)}
[:& fm/input {:type "text"
diff --git a/frontend/src/app/main/ui/dashboard/templates.cljs b/frontend/src/app/main/ui/dashboard/templates.cljs
index 953f9b4b3..7fb943a88 100644
--- a/frontend/src/app/main/ui/dashboard/templates.cljs
+++ b/frontend/src/app/main/ui/dashboard/templates.cljs
@@ -25,6 +25,12 @@
[potok.v2.core :as ptk]
[rumext.v2 :as mf]))
+(def ^:private arrow-icon
+ (i/icon-xref :arrow (stl/css :arrow-icon)))
+
+(def ^:private download-icon
+ (i/icon-xref :download (stl/css :download-icon)))
+
(def builtin-templates
(l/derived :builtin-templates st/state))
@@ -76,10 +82,16 @@
[:div {:class (stl/css :title)}
[:button {:tab-index "0"
+ :class (stl/css :title-btn)
:on-click on-click
:on-key-down on-key-down}
- [:span (tr "dashboard.libraries-and-templates")]
- [:span {:class (stl/css :icon)} (if ^boolean collapsed i/arrow-up i/arrow-down)]]]))
+ [:span {:class (stl/css :title-text)}
+ (tr "dashboard.libraries-and-templates")]
+ (if ^boolean collapsed
+ [:span {:class (stl/css :title-icon :title-icon-collapsed)}
+ arrow-icon]
+ [:span {:class (stl/css :title-icon)}
+ arrow-icon])]]))
(mf/defc card-item
{::mf/wrap-props false}
@@ -112,8 +124,8 @@
[:img {:src (dm/str thb)
:alt (:name item)}]]
[:div {:class (stl/css :card-name)}
- [:span (:name item)]
- [:span {:class (stl/css :icon)} i/download-refactor]]]]))
+ [:span {:class (stl/css :card-text)} (:name item)]
+ download-icon]]]))
(mf/defc card-item-link
{::mf/wrap-props false}
@@ -260,18 +272,16 @@
:total total}]]
(when (< card-offset 0)
- [:button
- {:class (stl/css :button :left)
- :tab-index (if ^boolean collapsed "-1" "0")
- :on-click on-move-left
- :on-key-down on-move-left-key-down}
- i/go-prev])
+ [:button {:class (stl/css :move-button :move-left)
+ :tab-index (if ^boolean collapsed "-1" "0")
+ :on-click on-move-left
+ :on-key-down on-move-left-key-down}
+ arrow-icon])
(when more-cards
- [:button
- {:class (stl/css :button :right)
- :tab-index (if collapsed "-1" "0")
- :on-click on-move-right
- :aria-label (tr "labels.next")
- :on-key-down on-move-right-key-down}
- i/go-next])]))
+ [:button {:class (stl/css :move-button :move-right)
+ :tab-index (if collapsed "-1" "0")
+ :on-click on-move-right
+ :aria-label (tr "labels.next")
+ :on-key-down on-move-right-key-down}
+ arrow-icon])]))
diff --git a/frontend/src/app/main/ui/dashboard/templates.scss b/frontend/src/app/main/ui/dashboard/templates.scss
index f70618c45..2649d166b 100644
--- a/frontend/src/app/main/ui/dashboard/templates.scss
+++ b/frontend/src/app/main/ui/dashboard/templates.scss
@@ -20,173 +20,175 @@
bottom: calc(-1 * $s-228);
transition: bottom 300ms;
}
+}
- .title {
- pointer-events: all;
- width: fit-content;
- top: calc(-1 * $s-56);
- text-align: right;
- height: $s-56;
- position: absolute;
- right: calc(-1 * $s-24);
+.title {
+ pointer-events: all;
+ width: fit-content;
+ top: calc(-1 * $s-56);
+ text-align: right;
+ height: $s-56;
+ position: absolute;
+ right: calc(-1 * $s-24);
+}
- button {
- border: none;
- cursor: pointer;
- height: $s-56;
- display: inline-flex;
- align-items: center;
- border-top-left-radius: $br-10;
- border-top-right-radius: $br-10;
- margin-right: $s-32;
- position: relative;
- z-index: 1;
- background-color: $db-quaternary;
+.title-btn {
+ border: none;
+ cursor: pointer;
+ height: $s-56;
+ display: inline-flex;
+ align-items: center;
+ border-top-left-radius: $br-10;
+ border-top-right-radius: $br-10;
+ margin-right: $s-32;
+ position: relative;
+ z-index: $z-index-1;
+ background-color: $db-quaternary;
+}
- span {
- display: inline-block;
- vertical-align: middle;
- line-height: 1.2;
- font-size: $fs-16;
- margin-left: $s-16;
- margin-right: $s-8;
- color: $df-primary;
- font-weight: $fw400;
- &.icon {
- margin-left: $s-16;
- margin-right: $s-16;
- }
- }
- svg {
- width: $s-12;
- height: $s-12;
- fill: $df-secondary;
- }
- }
- }
+.title-text {
+ display: inline-block;
+ vertical-align: middle;
+ line-height: 1.2;
+ font-size: $fs-16;
+ margin-left: $s-16;
+ margin-right: $s-8;
+ color: $df-primary;
+ font-weight: $fw400;
+}
- .button {
- position: absolute;
- top: $s-136;
- border: $s-2 solid $df-secondary;
- border-radius: 50%;
- text-align: center;
- width: $s-36;
- height: $s-36;
- cursor: pointer;
- background-color: $df-primary;
- display: flex;
- align-items: center;
- justify-content: center;
- pointer-events: all;
- svg {
- width: $s-12;
- height: $s-12;
- fill: $df-secondary;
- }
+.title-icon {
+ display: inline-block;
+ vertical-align: middle;
+ margin-left: $s-16;
+ margin-right: $s-8;
+ color: $df-primary;
+ margin-left: $s-16;
+ margin-right: $s-16;
+ transform: rotate(90deg);
+}
- &.left {
- left: 0;
- margin-left: $s-44;
- }
+.title-icon-collapsed {
+ transform: rotate(-90deg);
+}
- &.right {
- right: 0;
- margin-right: $s-44;
- }
+.arrow-icon {
+ @extend .button-icon;
+ stroke: var(--icon-foreground);
+}
- &:hover {
- border: $s-2 solid $da-tertiary;
- }
- }
+.move-button {
+ position: absolute;
+ top: $s-136;
+ border: $s-2 solid $df-secondary;
+ border-radius: 50%;
+ text-align: center;
+ width: $s-36;
+ height: $s-36;
+ cursor: pointer;
+ background-color: $df-primary;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ pointer-events: all;
- .content {
- pointer-events: all;
- width: 200%;
- height: $s-228;
- margin-left: $s-6;
- position: absolute;
- border-top-left-radius: $s-8;
- background-color: $db-quaternary;
-
- .card-container {
- width: $s-276;
- margin-top: $s-20;
- display: inline-block;
- text-align: center;
- vertical-align: top;
- background-color: transparent;
- border: none;
- padding: 0;
- }
-
- .template-card {
- display: inline-block;
- width: $s-256;
- font-size: $fs-16;
- cursor: pointer;
- color: $df-primary;
- padding: $s-3 $s-6 $s-16 $s-6;
- border-radius: $br-8;
-
- .img-container {
- width: 100%;
- height: $s-136;
- margin-bottom: $s-16;
- border-radius: $br-5;
- display: flex;
- justify-content: center;
- flex-direction: column;
-
- img {
- border-radius: $br-4;
- }
- }
-
- .card-name {
- padding: 0 $s-6;
- display: flex;
- justify-content: space-between;
- height: $s-24;
- align-items: center;
-
- .icon {
- width: $s-16;
- height: $s-16;
- }
- svg {
- width: $s-16;
- height: $s-16;
- fill: none;
- stroke: currentColor;
- }
- span {
- font-weight: $fw500;
- font-size: $fs-16;
- }
- }
-
- .template-link {
- border: $s-2 solid transparent;
- margin: $s-32;
- padding: $s-32 0;
- }
-
- .template-link-title {
- font-size: $fs-14;
- color: $df-primary;
- font-weight: $fw400;
- }
-
- .template-link-text {
- font-size: $fs-12;
- margin-top: $s-8;
- color: $df-secondary;
- }
-
- &:hover {
- background-color: $db-tertiary;
- }
- }
+ &:hover {
+ border: $s-2 solid $da-tertiary;
}
}
+
+.move-left {
+ left: 0;
+ margin-left: $s-44;
+ transform: rotate(180deg);
+}
+
+.move-right {
+ right: 0;
+ margin-right: $s-44;
+}
+
+.content {
+ pointer-events: all;
+ width: 200%;
+ height: $s-228;
+ margin-left: $s-6;
+ position: absolute;
+ border-top-left-radius: $s-8;
+ background-color: $db-quaternary;
+}
+
+.card-container {
+ width: $s-276;
+ margin-top: $s-20;
+ display: inline-block;
+ text-align: center;
+ vertical-align: top;
+ background-color: transparent;
+ border: none;
+ padding: 0;
+}
+
+.template-card {
+ display: inline-block;
+ width: $s-256;
+ font-size: $fs-16;
+ cursor: pointer;
+ color: $df-primary;
+ padding: $s-3 $s-6 $s-16 $s-6;
+ border-radius: $br-8;
+
+ &:hover {
+ background-color: $db-tertiary;
+ }
+}
+
+.img-container {
+ width: 100%;
+ height: $s-136;
+ margin-bottom: $s-16;
+ border-radius: $br-5;
+ display: flex;
+ justify-content: center;
+ flex-direction: column;
+
+ img {
+ border-radius: $br-4;
+ }
+}
+
+.card-name {
+ padding: 0 $s-6;
+ display: flex;
+ justify-content: space-between;
+ height: $s-24;
+ align-items: center;
+}
+
+.card-text {
+ font-weight: $fw500;
+ font-size: $fs-16;
+}
+
+.download-icon {
+ @extend .button-icon;
+ stroke: var(--icon-foreground);
+}
+
+.template-link {
+ border: $s-2 solid transparent;
+ margin: $s-32;
+ padding: $s-32 0;
+}
+
+.template-link-title {
+ font-size: $fs-14;
+ color: $df-primary;
+ font-weight: $fw400;
+}
+
+.template-link-text {
+ font-size: $fs-12;
+ margin-top: $s-8;
+ color: $df-secondary;
+}
diff --git a/frontend/src/app/main/ui/debug/components_preview.cljs b/frontend/src/app/main/ui/debug/components_preview.cljs
index e13ad747e..9fd0788b7 100644
--- a/frontend/src/app/main/ui/debug/components_preview.cljs
+++ b/frontend/src/app/main/ui/debug/components_preview.cljs
@@ -109,7 +109,7 @@
[:& title-bar {:collapsable false
:title "Title"
:on-btn-click on-btn-click
- :btn-children i/add-refactor}]]
+ :btn-children i/add}]]
[:& component-wrapper
{:title "Collapsed title and action button"}
[:& title-bar {:collapsable true
@@ -117,7 +117,7 @@
:on-collapsed toggle-collapsed
:title "Title"
:on-btn-click on-btn-click
- :btn-children i/add-refactor}]]
+ :btn-children i/add}]]
[:& component-wrapper
{:title "Collapsed title and children"}
[:& title-bar {:collapsable true
@@ -179,10 +179,10 @@
[:& radio-buttons {:selected radio-selected
:on-change set-radio-selected
:name "listing-style"}
- [:& radio-button {:icon i/view-as-list-refactor
+ [:& radio-button {:icon i/view-as-list
:value "first"
:id :list}]
- [:& radio-button {:icon i/flex-grid-refactor
+ [:& radio-button {:icon i/flex-grid
:value "second"
:id :grid}]]]
[:& component-wrapper
@@ -190,14 +190,14 @@
[:& radio-buttons {:selected radio-selected
:on-change set-radio-selected
:name "listing-style"}
- [:& radio-button {:icon i/view-as-list-refactor
+ [:& radio-button {:icon i/view-as-list
:value "first"
:id :first}]
- [:& radio-button {:icon i/flex-grid-refactor
+ [:& radio-button {:icon i/flex-grid
:value "second"
:id :second}]
- [:& radio-button {:icon i/add-refactor
+ [:& radio-button {:icon i/add
:value "third"
:id :third}]]]
@@ -206,18 +206,18 @@
[:& radio-buttons {:selected radio-selected
:on-change set-radio-selected
:name "listing-style"}
- [:& radio-button {:icon i/view-as-list-refactor
+ [:& radio-button {:icon i/view-as-list
:value "first"
:id :first}]
- [:& radio-button {:icon i/flex-grid-refactor
+ [:& radio-button {:icon i/flex-grid
:value "second"
:id :second}]
- [:& radio-button {:icon i/add-refactor
+ [:& radio-button {:icon i/add
:value "third"
:id :third}]
- [:& radio-button {:icon i/board-refactor
+ [:& radio-button {:icon i/board
:value "forth"
:id :forth}]]]]
[:div {:class (stl/css :components-group)}
@@ -229,7 +229,7 @@
[:& component-wrapper
{:title "Button primary with icon"}
[:button {:class (stl/css :button-primary)}
- i/add-refactor]]
+ i/add]]
[:& component-wrapper
{:title "Button secondary"}
@@ -238,7 +238,7 @@
[:& component-wrapper
{:title "Button secondary with icon"}
[:button {:class (stl/css :button-secondary)}
- i/add-refactor]]
+ i/add]]
[:& component-wrapper
{:title "Button tertiary"}
@@ -247,7 +247,7 @@
[:& component-wrapper
{:title "Button tertiary with icon"}
[:button {:class (stl/css :button-tertiary)}
- i/add-refactor]]]
+ i/add]]]
[:div {:class (stl/css :components-group)}
[:h3 "Inputs"]
[:& component-wrapper
@@ -265,6 +265,6 @@
{:title "Input with icon"}
[:div {:class (stl/css :input-wrapper)}
[:span {:class (stl/css :input-label)}
- i/add-refactor]
+ i/add]
[:input {:class (stl/css :basic-input)
:placeholder "----"}]]]]]]]))
diff --git a/frontend/src/app/main/ui/delete_shared.cljs b/frontend/src/app/main/ui/delete_shared.cljs
index f0e8dabc3..ec2100937 100644
--- a/frontend/src/app/main/ui/delete_shared.cljs
+++ b/frontend/src/app/main/ui/delete_shared.cljs
@@ -97,7 +97,7 @@
[:div {:class (stl/css :modal-header)}
[:h2 {:class (stl/css :modal-title)} title]
[:button {:class (stl/css :modal-close-btn)
- :on-click cancel-fn} i/close-refactor]]
+ :on-click cancel-fn} i/close]]
[:div {:class (stl/css :modal-content)}
(when (and (string? subtitle) (not= subtitle ""))
diff --git a/frontend/src/app/main/ui/export.cljs b/frontend/src/app/main/ui/export.cljs
index 711d4474b..c13b074a4 100644
--- a/frontend/src/app/main/ui/export.cljs
+++ b/frontend/src/app/main/ui/export.cljs
@@ -26,13 +26,13 @@
[rumext.v2 :as mf]))
(def ^:private neutral-icon
- (i/icon-xref :msg-neutral-refactor (stl/css :icon)))
+ (i/icon-xref :msg-neutral (stl/css :icon)))
(def ^:private error-icon
- (i/icon-xref :delete-text-refactor (stl/css :icon)))
+ (i/icon-xref :delete-text (stl/css :icon)))
(def ^:private close-icon
- (i/icon-xref :close-refactor (stl/css :close-icon)))
+ (i/icon-xref :close (stl/css :close-icon)))
(mf/defc export-multiple-dialog
[{:keys [exports title cmd no-selection]}]
@@ -86,7 +86,7 @@
[:h2 {:class (stl/css :modal-title)} title]
[:button {:class (stl/css :modal-close-btn)
:on-click cancel-fn}
- i/close-refactor]]
+ i/close]]
[:*
[:div {:class (stl/css :modal-content)}
@@ -99,12 +99,12 @@
(cond
all-checked? [:span {:class (stl/css-case :checkobox-tick true
:global/checked true)}
- i/tick-refactor]
+ i/tick]
all-unchecked? [:span {:class (stl/css-case :checkobox-tick true
:global/uncheked true)}]
:else [:span {:class (stl/css-case :checkobox-tick true
:global/intermediate true)}
- i/remove-refactor])]]
+ i/remove-icon])]]
[:div {:class (stl/css :selection-title)}
(tr "dashboard.export-multiple.selected"
(c (count enabled-exports))
@@ -123,7 +123,7 @@
(if (:enabled export)
[:span {:class (stl/css-case :checkobox-tick true
:global/checked true)}
- i/tick-refactor]
+ i/tick]
[:span {:class (stl/css-case :checkobox-tick true
:global/uncheked true)}])]
@@ -318,8 +318,8 @@
[:div {:class (stl/css :file-name)}
[:span {:class (stl/css :file-icon)}
- (cond (:export-success? file) i/tick-refactor
- (:export-error? file) i/close-refactor
+ (cond (:export-success? file) i/tick
+ (:export-error? file) i/close
(:loading? file) i/loader-pencil)]
[:div {:class (stl/css :file-name-label)}
@@ -417,7 +417,7 @@
[:h2 {:class (stl/css :modal-title)}
(tr "dashboard.export.title")]
[:button {:class (stl/css :modal-close-btn)
- :on-click on-cancel} i/close-refactor]]
+ :on-click on-cancel} i/close]]
(cond
(= status :prepare)
@@ -440,7 +440,7 @@
;; dashboard.export.options.merge.title
[:span {:class (stl/css-case :global/checked (= selected type))}
(when (= selected type)
- i/status-tick-refactor)]
+ i/status-tick)]
[:div {:class (stl/css :option-content)}
[:h3 {:class (stl/css :modal-subtitle)} (tr (dm/str "dashboard.export.options." (d/name type) ".title"))]
[:p {:class (stl/css :modal-msg)} (tr (dm/str "dashboard.export.options." (d/name type) ".message"))]]
diff --git a/frontend/src/app/main/ui/icons.clj b/frontend/src/app/main/ui/icons.clj
index 636f585c4..600dc7e02 100644
--- a/frontend/src/app/main/ui/icons.clj
+++ b/frontend/src/app/main/ui/icons.clj
@@ -15,13 +15,7 @@
(defmacro icon-xref
[id & [class]]
(let [href (str "#icon-" (name id))
- class (or class (str "icon-" (name id)))
-
- ;; FIXME: Debug tool. Remove when we remove the old icons
- class (cond-> class
- (and (not (str/ends-with? (name id) "-refactor"))
- (not (contains? exceptions id)))
- (str " deprecated-icon"))]
+ class (or class (str "icon-" (name id)))]
`(rumext.v2/html
[:svg {:width 500 :height 500 :class ~class}
[:use {:href ~href}]])))
diff --git a/frontend/src/app/main/ui/icons.cljs b/frontend/src/app/main/ui/icons.cljs
index 198a03515..002ef71a8 100644
--- a/frontend/src/app/main/ui/icons.cljs
+++ b/frontend/src/app/main/ui/icons.cljs
@@ -13,493 +13,250 @@
[rumext.v2 :as mf]))
;; Keep the list of icons sorted
-
-(def ^:icon action (icon-xref :action))
-(def ^:icon actions (icon-xref :actions))
-(def ^:icon align-bottom (icon-xref :align-bottom))
-(def ^:icon align-content-column-around (icon-xref :align-content-column-around))
-(def ^:icon align-content-column-evenly (icon-xref :align-content-column-evenly))
-(def ^:icon align-content-column-between (icon-xref :align-content-column-between))
-(def ^:icon align-content-column-center (icon-xref :align-content-column-center))
-(def ^:icon align-content-column-end (icon-xref :align-content-column-end))
-(def ^:icon align-content-column-start (icon-xref :align-content-column-start))
-(def ^:icon align-content-row-around (icon-xref :align-content-row-around))
-(def ^:icon align-content-row-evenly (icon-xref :align-content-row-evenly))
-(def ^:icon align-content-row-between (icon-xref :align-content-row-between))
-(def ^:icon align-content-row-center (icon-xref :align-content-row-center))
-(def ^:icon align-content-row-end (icon-xref :align-content-row-end))
-(def ^:icon align-content-row-start (icon-xref :align-content-row-start))
-(def ^:icon align-items-column-baseline (icon-xref :align-items-column-baseline))
-(def ^:icon align-items-column-center (icon-xref :align-items-column-center))
-(def ^:icon align-items-column-end (icon-xref :align-items-column-end))
-(def ^:icon align-items-column-start (icon-xref :align-items-column-start))
-(def ^:icon align-items-column-strech (icon-xref :align-items-column-strech))
-(def ^:icon align-items-row-baseline (icon-xref :align-items-row-baseline))
-(def ^:icon align-items-row-center (icon-xref :align-items-row-center))
-(def ^:icon align-items-row-end (icon-xref :align-items-row-end))
-(def ^:icon align-items-row-start (icon-xref :align-items-row-start))
-(def ^:icon align-items-row-strech (icon-xref :align-items-row-strech))
-(def ^:icon align-self-column-baseline (icon-xref :align-self-column-baseline))
-(def ^:icon align-self-column-center (icon-xref :align-self-column-center))
-(def ^:icon align-self-column-top (icon-xref :align-self-column-top))
-(def ^:icon align-self-column-bottom (icon-xref :align-self-column-bottom))
-(def ^:icon align-self-column-strech (icon-xref :align-self-column-strech))
-(def ^:icon align-self-row-baseline (icon-xref :align-self-row-baseline))
-(def ^:icon align-self-row-center (icon-xref :align-self-row-center))
-(def ^:icon align-self-row-left (icon-xref :align-self-row-left))
-(def ^:icon align-self-row-right (icon-xref :align-self-row-right))
-(def ^:icon align-self-row-strech (icon-xref :align-self-row-strech))
-(def ^:icon align-middle (icon-xref :align-middle))
-(def ^:icon align-top (icon-xref :align-top))
-(def ^:icon alignment (icon-xref :alignment))
-(def ^:icon animate-down (icon-xref :animate-down))
-(def ^:icon animate-left (icon-xref :animate-left))
-(def ^:icon animate-right (icon-xref :animate-right))
-(def ^:icon animate-up (icon-xref :animate-up))
-(def ^:icon arrow-down (icon-xref :arrow-down))
-(def ^:icon arrow-end (icon-xref :arrow-end))
-(def ^:icon arrow-slide (icon-xref :arrow-slide))
-(def ^:icon arrow-up (icon-xref :arrow-up))
-(def ^:icon artboard (icon-xref :artboard))
-(def ^:icon at (icon-xref :at))
-(def ^:icon auto-direction (icon-xref :auto-direction))
-(def ^:icon auto-fill (icon-xref :auto-fill))
-(def ^:icon auto-fix (icon-xref :auto-fix))
-(def ^:icon auto-fix-layout (icon-xref :auto-fix-layout))
-(def ^:icon auto-gap (icon-xref :auto-gap))
-(def ^:icon auto-height (icon-xref :auto-height))
-(def ^:icon auto-hug (icon-xref :auto-hug))
-(def ^:icon auto-margin-side (icon-xref :auto-margin-side))
-(def ^:icon auto-margin-both-sides (icon-xref :auto-margin-both-sides))
-(def ^:icon auto-margin (icon-xref :auto-margin))
-(def ^:icon auto-padding (icon-xref :auto-padding))
-(def ^:icon auto-padding-side (icon-xref :auto-padding-side))
-(def ^:icon auto-padding-both-sides (icon-xref :auto-padding-both-sides))
-(def ^:icon auto-width (icon-xref :auto-width))
-(def ^:icon auto-wrap (icon-xref :auto-wrap))
-(def ^:icon bool-difference (icon-xref :boolean-difference))
-(def ^:icon bool-exclude (icon-xref :boolean-exclude))
-(def ^:icon bool-flatten (icon-xref :boolean-flatten))
-(def ^:icon bool-intersection (icon-xref :boolean-intersection))
-(def ^:icon bool-union (icon-xref :boolean-union))
-(def ^:icon box (icon-xref :box))
-(def ^:icon bug (icon-xref :bug))
-(def ^:icon chain (icon-xref :chain))
-(def ^:icon chat (icon-xref :chat))
-(def ^:icon checkbox-checked (icon-xref :checkbox-checked))
-(def ^:icon checkbox-unchecked (icon-xref :checkbox-unchecked))
-(def ^:icon checkbox-intermediate (icon-xref :checkbox-intermediate))
-(def ^:icon circle (icon-xref :circle))
-(def ^:icon close (icon-xref :close))
-(def ^:icon code (icon-xref :code))
-(def ^:icon component (icon-xref :component))
-(def ^:icon component-copy (icon-xref :component-copy))
-(def ^:icon copy (icon-xref :copy))
-(def ^:icon curve (icon-xref :curve))
-(def ^:icon cross (icon-xref :cross))
-(def ^:icon download (icon-xref :download))
-(def ^:icon easing-linear (icon-xref :easing-linear))
-(def ^:icon easing-ease (icon-xref :easing-ease))
-(def ^:icon easing-ease-in (icon-xref :easing-ease-in))
-(def ^:icon easing-ease-out (icon-xref :easing-ease-out))
-(def ^:icon easing-ease-in-out (icon-xref :easing-ease-in-out))
-(def ^:icon exclude (icon-xref :exclude))
-(def ^:icon exit (icon-xref :exit))
-(def ^:icon export (icon-xref :export))
-(def ^:icon eye (icon-xref :eye))
-(def ^:icon eye-closed (icon-xref :eye-closed))
-(def ^:icon file-html (icon-xref :file-html))
-(def ^:icon file-svg (icon-xref :file-svg))
-(def ^:icon fill (icon-xref :fill))
-(def ^:icon folder (icon-xref :folder))
-(def ^:icon folder-zip (icon-xref :folder-zip))
-(def ^:icon full-screen (icon-xref :full-screen))
-(def ^:icon full-screen-off (icon-xref :full-screen-off))
-(def ^:icon grid (icon-xref :grid))
-(def ^:icon grid-justify-content-column-around (icon-xref :grid-justify-content-column-around))
-(def ^:icon grid-justify-content-column-between (icon-xref :grid-justify-content-column-between))
-(def ^:icon grid-justify-content-column-center (icon-xref :grid-justify-content-column-center))
-(def ^:icon grid-justify-content-column-end (icon-xref :grid-justify-content-column-end))
-(def ^:icon grid-justify-content-column-start (icon-xref :grid-justify-content-column-start))
-(def ^:icon grid-justify-content-row-around (icon-xref :grid-justify-content-row-around))
-(def ^:icon grid-justify-content-row-between (icon-xref :grid-justify-content-row-between))
-(def ^:icon grid-justify-content-row-center (icon-xref :grid-justify-content-row-center))
-(def ^:icon grid-justify-content-row-end (icon-xref :grid-justify-content-row-end))
-(def ^:icon grid-justify-content-row-start (icon-xref :grid-justify-content-row-start))
-(def ^:icon grid-layout-mode (icon-xref :grid-layout-mode))
-(def ^:icon grid-snap (icon-xref :grid-snap))
-(def ^:icon go-next (icon-xref :go-next))
-(def ^:icon go-prev (icon-xref :go-prev))
-(def ^:icon help (icon-xref :help))
-(def ^:icon icon-empty (icon-xref :icon-empty))
-(def ^:icon icon-filter (icon-xref :filter))
-(def ^:icon icon-list (icon-xref :icon-list))
-(def ^:icon icon-lock (icon-xref :icon-lock))
-(def ^:icon icon-set (icon-xref :icon-set))
(def ^:icon icon-verify (icon-xref :icon-verify))
-(def ^:icon image (icon-xref :image))
-(def ^:icon import (icon-xref :import))
-(def ^:icon infocard (icon-xref :infocard))
-(def ^:icon interaction (icon-xref :interaction))
-(def ^:icon justify-content-column-around (icon-xref :justify-content-column-around))
-(def ^:icon justify-content-column-evenly (icon-xref :justify-content-column-evenly))
-(def ^:icon justify-content-column-between (icon-xref :justify-content-column-between))
-(def ^:icon justify-content-column-center (icon-xref :justify-content-column-center))
-(def ^:icon justify-content-column-end (icon-xref :justify-content-column-end))
-(def ^:icon justify-content-column-start (icon-xref :justify-content-column-start))
-(def ^:icon justify-content-row-around (icon-xref :justify-content-row-around))
-(def ^:icon justify-content-row-evenly (icon-xref :justify-content-row-evenly))
-(def ^:icon justify-content-row-between (icon-xref :justify-content-row-between))
-(def ^:icon justify-content-row-center (icon-xref :justify-content-row-center))
-(def ^:icon justify-content-row-end (icon-xref :justify-content-row-end))
-(def ^:icon justify-content-row-start (icon-xref :justify-content-row-start))
-(def ^:icon icon-key (icon-xref :icon-key))
-(def ^:icon layers (icon-xref :layers))
-(def ^:icon layout-columns (icon-xref :layout-columns))
-(def ^:icon layout-rows (icon-xref :layout-rows))
-(def ^:icon letter-spacing (icon-xref :letter-spacing))
-(def ^:icon libraries (icon-xref :libraries))
-(def ^:icon library (icon-xref :library))
-(def ^:icon line (icon-xref :line))
-(def ^:icon line-height (icon-xref :line-height))
-(def ^:icon listing-enum (icon-xref :listing-enum))
-(def ^:icon listing-thumbs (icon-xref :listing-thumbs))
(def ^:icon loader (icon-xref :loader))
-(def ^:icon lock (icon-xref :lock))
(def ^:icon logo (icon-xref :penpot-logo))
(def ^:icon logo-icon (icon-xref :penpot-logo-icon))
(def ^:icon logo-error-screen (icon-xref :logo-error-screen))
-(def ^:icon logout (icon-xref :logout))
(def ^:icon login-illustration (icon-xref :login-illustration))
-(def ^:icon lowercase (icon-xref :lowercase))
-(def ^:icon mail (icon-xref :mail))
-(def ^:icon mask (icon-xref :mask))
-(def ^:icon minus (icon-xref :minus))
-(def ^:icon move (icon-xref :move))
-(def ^:icon msg-error (icon-xref :msg-error))
-(def ^:icon msg-info (icon-xref :msg-info))
-(def ^:icon msg-success (icon-xref :msg-success))
-(def ^:icon msg-warning (icon-xref :msg-warning))
-(def ^:icon navigate (icon-xref :navigate))
-(def ^:icon nodes-add (icon-xref :nodes-add))
-(def ^:icon nodes-corner (icon-xref :nodes-corner))
-(def ^:icon nodes-curve (icon-xref :nodes-curve))
-(def ^:icon nodes-join (icon-xref :nodes-join))
-(def ^:icon nodes-merge (icon-xref :nodes-merge))
-(def ^:icon nodes-remove (icon-xref :nodes-remove))
-(def ^:icon nodes-separate (icon-xref :nodes-separate))
-(def ^:icon nodes-snap (icon-xref :nodes-snap))
-(def ^:icon organize (icon-xref :organize))
-(def ^:icon palette (icon-xref :palette))
-(def ^:icon pen (icon-xref :pen))
-(def ^:icon pencil (icon-xref :pencil))
-(def ^:icon picker (icon-xref :picker))
-(def ^:icon picker-harmony (icon-xref :picker-harmony))
-(def ^:icon picker-hsv (icon-xref :picker-hsv))
-(def ^:icon picker-ramp (icon-xref :picker-ramp))
-(def ^:icon pin (icon-xref :pin))
-(def ^:icon pin-fill (icon-xref :pin-fill))
-(def ^:icon play (icon-xref :play))
-(def ^:icon plus (icon-xref :plus))
-(def ^:icon pointer-inner (icon-xref :pointer-inner))
-(def ^:icon position-absolute (icon-xref :position-absolute))
-(def ^:icon position-bottom-center (icon-xref :position-bottom-center))
-(def ^:icon position-bottom-left (icon-xref :position-bottom-left))
-(def ^:icon position-bottom-right (icon-xref :position-bottom-right))
-(def ^:icon position-center (icon-xref :position-center))
-(def ^:icon position-top-center (icon-xref :position-top-center))
-(def ^:icon position-top-left (icon-xref :position-top-left))
-(def ^:icon position-top-right (icon-xref :position-top-right))
-(def ^:icon radius (icon-xref :radius))
-(def ^:icon radius-1 (icon-xref :radius-1))
-(def ^:icon radius-4 (icon-xref :radius-4))
-(def ^:icon recent (icon-xref :recent))
-(def ^:icon redo (icon-xref :redo))
-(def ^:icon reset (icon-xref :reset))
-(def ^:icon rotate (icon-xref :rotate))
-(def ^:icon ruler (icon-xref :ruler))
-(def ^:icon ruler-tool (icon-xref :ruler-tool))
-(def ^:icon search (icon-xref :search))
-(def ^:icon set-thumbnail (icon-xref :set-thumbnail))
-(def ^:icon shape-halign-center (icon-xref :shape-halign-center))
-(def ^:icon shape-halign-left (icon-xref :shape-halign-left))
-(def ^:icon shape-halign-right (icon-xref :shape-halign-right))
-(def ^:icon shape-hdistribute (icon-xref :shape-hdistribute))
-(def ^:icon shape-valign-bottom (icon-xref :shape-valign-bottom))
-(def ^:icon shape-valign-center (icon-xref :shape-valign-center))
-(def ^:icon shape-valign-top (icon-xref :shape-valign-top))
-(def ^:icon shape-vdistribute (icon-xref :shape-vdistribute))
-(def ^:icon shortcut (icon-xref :shortcut))
-(def ^:icon size-horiz (icon-xref :size-horiz))
-(def ^:icon size-vert (icon-xref :size-vert))
-(def ^:icon sort-ascending (icon-xref :sort-ascending))
-(def ^:icon sort-descending (icon-xref :sort-descending))
-(def ^:icon space-around (icon-xref :space-around))
-(def ^:icon space-between (icon-xref :space-between))
-(def ^:icon strikethrough (icon-xref :strikethrough))
-(def ^:icon stroke (icon-xref :stroke))
-(def ^:icon switch (icon-xref :switch))
-(def ^:icon text (icon-xref :text))
-(def ^:icon text-align-center (icon-xref :text-align-center))
-(def ^:icon text-align-justify (icon-xref :text-align-justify))
-(def ^:icon text-align-left (icon-xref :text-align-left))
-(def ^:icon text-align-right (icon-xref :text-align-right))
-(def ^:icon text-direction-ltr (icon-xref :text-direction-ltr))
-(def ^:icon text-direction-rtl (icon-xref :text-direction-rtl))
-(def ^:icon tick (icon-xref :tick))
-(def ^:icon titlecase (icon-xref :titlecase))
-(def ^:icon toggle (icon-xref :toggle))
-(def ^:icon trash (icon-xref :trash))
-(def ^:icon tree (icon-xref :tree))
-(def ^:icon unchain (icon-xref :unchain))
-(def ^:icon underline (icon-xref :underline))
-(def ^:icon undo (icon-xref :undo))
-(def ^:icon ungroup (icon-xref :ungroup))
-(def ^:icon unlock (icon-xref :unlock))
-(def ^:icon uppercase (icon-xref :uppercase))
-(def ^:icon user (icon-xref :user))
(def ^:icon brand-openid (icon-xref :brand-openid))
(def ^:icon brand-github (icon-xref :brand-github))
(def ^:icon brand-gitlab (icon-xref :brand-gitlab))
(def ^:icon brand-google (icon-xref :brand-google))
-(def ^:icon add-refactor (icon-xref :add-refactor))
-(def ^:icon arrow-refactor (icon-xref :arrow-refactor))
-(def ^:icon asc-sort-refactor (icon-xref :asc-sort-refactor))
-(def ^:icon absolute-refactor (icon-xref :absolute-refactor))
-(def ^:icon align-bottom-refactor (icon-xref :align-bottom-refactor))
-(def ^:icon align-content-row-center-refactor (icon-xref :align-content-row-center-refactor))
-(def ^:icon align-content-column-around-refactor (icon-xref :align-content-column-around-refactor))
-(def ^:icon align-content-column-between-refactor (icon-xref :align-content-column-between-refactor))
-(def ^:icon align-content-column-center-refactor (icon-xref :align-content-column-center-refactor))
-(def ^:icon align-content-column-evenly-refactor (icon-xref :align-content-column-evenly-refactor))
-(def ^:icon align-content-column-start-refactor (icon-xref :align-content-column-start-refactor))
-(def ^:icon align-content-column-end-refactor (icon-xref :align-content-column-end-refactor))
-(def ^:icon align-content-column-stretch-refactor (icon-xref :align-content-column-stretch-refactor))
-(def ^:icon align-content-row-end-refactor (icon-xref :align-content-row-end-refactor))
-(def ^:icon align-content-row-around-refactor (icon-xref :align-content-row-around-refactor))
-(def ^:icon align-content-row-between-refactor (icon-xref :align-content-row-between-refactor))
-(def ^:icon align-content-row-evenly-refactor (icon-xref :align-content-row-evenly-refactor))
-(def ^:icon align-content-row-start-refactor (icon-xref :align-content-row-start-refactor))
-(def ^:icon align-content-row-stretch-refactor (icon-xref :align-content-row-stretch-refactor))
-(def ^:icon align-horizontal-center-refactor (icon-xref :align-horizontal-center-refactor))
-(def ^:icon align-vertical-center-refactor (icon-xref :align-vertical-center-refactor))
-(def ^:icon align-items-row-center-refactor (icon-xref :align-items-row-center-refactor))
-(def ^:icon align-items-row-end-refactor (icon-xref :align-items-row-end-refactor))
-(def ^:icon align-items-row-start-refactor (icon-xref :align-items-row-start-refactor))
-(def ^:icon align-items-column-start-refactor (icon-xref :align-items-column-start-refactor))
-(def ^:icon align-items-column-end-refactor (icon-xref :align-items-column-end-refactor))
-(def ^:icon align-items-column-center-refactor (icon-xref :align-items-column-center-refactor))
-(def ^:icon align-left-refactor (icon-xref :align-left-refactor))
-(def ^:icon align-right-refactor (icon-xref :align-right-refactor))
-(def ^:icon align-top-refactor (icon-xref :align-top-refactor))
-(def ^:icon align-self-column-bottom-refactor (icon-xref :align-self-column-bottom-refactor))
-(def ^:icon align-self-column-center-refactor (icon-xref :align-self-column-center-refactor))
-(def ^:icon align-self-column-top-refactor (icon-xref :align-self-column-top-refactor))
-(def ^:icon align-self-row-center-refactor (icon-xref :align-self-row-center-refactor))
-(def ^:icon align-self-row-left-refactor (icon-xref :align-self-row-left-refactor))
-(def ^:icon align-self-row-right-refactor (icon-xref :align-self-row-right-refactor))
-(def ^:icon align-self-column-stretch-refactor (icon-xref :align-self-column-stretch-refactor))
-(def ^:icon align-self-row-stretch-refactor (icon-xref :align-self-row-stretch-refactor))
-(def ^:icon board-refactor (icon-xref :board-refactor))
-(def ^:icon boards-thumbnail-refactor (icon-xref :boards-thumbnail-refactor))
-(def ^:icon boolean-difference-refactor (icon-xref :boolean-difference-refactor))
-(def ^:icon boolean-exclude-refactor (icon-xref :boolean-exclude-refactor))
-(def ^:icon boolean-flatten-refactor (icon-xref :boolean-flatten-refactor))
-(def ^:icon boolean-intersection-refactor (icon-xref :boolean-intersection-refactor))
-(def ^:icon boolean-union-refactor (icon-xref :boolean-union-refactor))
-(def ^:icon bug-refactor (icon-xref :bug-refactor))
-(def ^:icon clip-content-refactor (icon-xref :clip-content-refactor))
-(def ^:icon clipboard-refactor (icon-xref :clipboard-refactor))
-(def ^:icon close-refactor (icon-xref :close-refactor))
-(def ^:icon close-small-refactor (icon-xref :close-small-refactor))
-(def ^:icon code-refactor (icon-xref :code-refactor))
-(def ^:icon component-refactor (icon-xref :component-refactor))
-(def ^:icon comments-refactor (icon-xref :comments-refactor))
-(def ^:icon copy-refactor (icon-xref :copy-refactor))
-(def ^:icon column-refactor (icon-xref :column-refactor))
-(def ^:icon column-reverse-refactor (icon-xref :column-reverse-refactor))
-(def ^:icon constraint-horizontal-refactor (icon-xref :constraint-horizontal-refactor))
-(def ^:icon constraint-vertical-refactor (icon-xref :constraint-vertical-refactor))
-(def ^:icon corner-bottom-refactor (icon-xref :corner-bottom-refactor))
-(def ^:icon corner-bottomleft-refactor (icon-xref :corner-bottomleft-refactor))
-(def ^:icon corner-bottomright-refactor (icon-xref :corner-bottom-refactor))
-(def ^:icon corner-center-refactor (icon-xref :corner-center-refactor))
-(def ^:icon corner-top-refactor (icon-xref :corner-top-refactor))
-(def ^:icon corner-topleft-refactor (icon-xref :corner-topleft-refactor))
-(def ^:icon corner-topright-refactor (icon-xref :corner-topright-refactor))
-(def ^:icon corner-radius-refactor (icon-xref :corner-radius-refactor))
-(def ^:icon curve-refactor (icon-xref :curve-refactor))
-(def ^:icon distribute-vertical-spacing-refactor (icon-xref :distribute-vertical-spacing-refactor))
-(def ^:icon distribute-horizontally-refactor (icon-xref :distribute-horizontally-refactor))
-(def ^:icon delete-refactor (icon-xref :delete-refactor))
-(def ^:icon delete-text-refactor (icon-xref :delete-text-refactor))
-(def ^:icon desc-sort-refactor (icon-xref :desc-sort-refactor))
-(def ^:icon detach-refactor (icon-xref :detach-refactor))
-(def ^:icon detached-refactor (icon-xref :detached-refactor))
-(def ^:icon document-refactor (icon-xref :document-refactor))
-(def ^:icon download-refactor (icon-xref :download-refactor))
-(def ^:icon drop-refactor (icon-xref :drop-refactor))
-(def ^:icon easing-linear-refactor (icon-xref :easing-linear-refactor))
-(def ^:icon easing-ease-refactor (icon-xref :easing-ease-refactor))
-(def ^:icon easing-ease-in-refactor (icon-xref :easing-ease-in-refactor))
-(def ^:icon easing-ease-out-refactor (icon-xref :easing-ease-out-refactor))
-(def ^:icon easing-ease-in-out-refactor (icon-xref :easing-ease-in-out-refactor))
-(def ^:icon effects-refactor (icon-xref :effects-refactor))
-(def ^:icon elipse-refactor (icon-xref :elipse-refactor))
-(def ^:icon exit-refactor (icon-xref :exit-refactor))
-(def ^:icon expand-refactor (icon-xref :expand-refactor))
-(def ^:icon feedback-refactor (icon-xref :feedback-refactor))
-(def ^:icon fill-content-refactor (icon-xref :fill-content-refactor))
-(def ^:icon filter-refactor (icon-xref :filter-refactor))
-(def ^:icon fixed-width-refactor (icon-xref :fixed-width-refactor))
-(def ^:icon flex-refactor (icon-xref :flex-refactor))
-(def ^:icon flex-horizontal-refactor (icon-xref :flex-horizontal-refactor))
-(def ^:icon flex-grid-refactor (icon-xref :flex-grid-refactor))
-(def ^:icon flex-vertical-refactor (icon-xref :flex-vertical-refactor))
-(def ^:icon flip-horizontal-refactor (icon-xref :flip-horizontal-refactor))
-(def ^:icon grid-column-refactor (icon-xref :grid-column-refactor))
-(def ^:icon grid-columns-refactor (icon-xref :grid-columns-refactor))
-(def ^:icon grid-gutter-refactor (icon-xref :grid-gutter-refactor))
-(def ^:icon grid-margin-refactor (icon-xref :grid-margin-refactor))
-(def ^:icon grid-row-refactor (icon-xref :grid-row-refactor))
-(def ^:icon grid-rows-refactor (icon-xref :grid-rows-refactor))
-(def ^:icon grid-square-refactor (icon-xref :grid-square-refactor))
-(def ^:icon grid-refactor (icon-xref :grid-refactor))
-(def ^:icon group-refactor (icon-xref :group-refactor))
-(def ^:icon graphics-refactor (icon-xref :graphics-refactor))
-(def ^:icon gap-horizontal-refactor (icon-xref :gap-horizontal-refactor))
-(def ^:icon gap-vertical-refactor (icon-xref :gap-vertical-refactor))
-(def ^:icon help-refactor (icon-xref :help-refactor))
-(def ^:icon hide-refactor (icon-xref :hide-refactor))
-(def ^:icon history-refactor (icon-xref :history-refactor))
-(def ^:icon hsva-refactor (icon-xref :hsva-refactor))
-(def ^:icon hug-content-refactor (icon-xref :hug-content-refactor))
-(def ^:icon img-refactor (icon-xref :img-refactor))
-(def ^:icon icon-refactor (icon-xref :icon-refactor))
-(def ^:icon interaction-refactor (icon-xref :interaction-refactor))
-(def ^:icon join-nodes-refactor (icon-xref :join-nodes-refactor))
-(def ^:icon justify-content-column-around-refactor (icon-xref :justify-content-column-around-refactor))
-(def ^:icon justify-content-column-between-refactor (icon-xref :justify-content-column-between-refactor))
-(def ^:icon justify-content-column-center-refactor (icon-xref :justify-content-column-center-refactor))
-(def ^:icon justify-content-column-end-refactor (icon-xref :justify-content-column-end-refactor))
-(def ^:icon justify-content-column-evenly-refactor (icon-xref :justify-content-column-evenly-refactor))
-(def ^:icon justify-content-column-start-refactor (icon-xref :justify-content-column-start-refactor))
-(def ^:icon justify-content-row-center-refactor (icon-xref :justify-content-row-center-refactor))
-(def ^:icon justify-content-row-end-refactor (icon-xref :justify-content-row-end-refactor))
-(def ^:icon justify-content-row-start-refactor (icon-xref :justify-content-row-start-refactor))
-(def ^:icon justify-content-row-between-refactor (icon-xref :justify-content-row-between-refactor))
-(def ^:icon justify-content-row-around-refactor (icon-xref :justify-content-row-around-refactor))
-(def ^:icon justify-content-row-evenly-refactor (icon-xref :justify-content-row-evenly-refactor))
-(def ^:icon layers-refactor (icon-xref :layers-refactor))
-(def ^:icon locate-refactor (icon-xref :locate-refactor))
-(def ^:icon lock-refactor (icon-xref :lock-refactor))
-(def ^:icon logo-refactor (icon-xref :penpot-logo-icon)) ;; This icon will not change
-(def ^:icon library-refactor (icon-xref :library-refactor))
-(def ^:icon margin-bottom-refactor (icon-xref :margin-bottom-refactor))
-(def ^:icon margin-left-refactor (icon-xref :margin-left-refactor))
-(def ^:icon margin-left-right-refactor (icon-xref :margin-left-right-refactor))
-(def ^:icon margin-refactor (icon-xref :margin-refactor))
-(def ^:icon margin-right-refactor (icon-xref :margin-right-refactor))
-(def ^:icon margin-top-refactor (icon-xref :margin-top-refactor))
-(def ^:icon margin-top-bottom-refactor (icon-xref :margin-top-bottom-refactor))
-(def ^:icon mask-refactor (icon-xref :mask-refactor))
-(def ^:icon masked-refactor (icon-xref :masked-refactor))
-(def ^:icon menu-refactor (icon-xref :menu-refactor))
-(def ^:icon merge-nodes-refactor (icon-xref :merge-nodes-refactor))
-(def ^:icon msg-error-refactor (icon-xref :msg-error-refactor))
-(def ^:icon msg-neutral-refactor (icon-xref :msg-neutral-refactor))
-(def ^:icon msg-success-refactor (icon-xref :msg-success-refactor))
-(def ^:icon msg-warning-refactor (icon-xref :msg-warning-refactor))
-(def ^:icon move-refactor (icon-xref :move-refactor))
-(def ^:icon open-link-refactor (icon-xref :open-link-refactor))
-(def ^:icon padding-bottom-refactor (icon-xref :padding-bottom-refactor))
-(def ^:icon padding-top-refactor (icon-xref :padding-top-refactor))
-(def ^:icon padding-top-bottom-refactor (icon-xref :padding-top-bottom-refactor))
-(def ^:icon padding-left-refactor (icon-xref :padding-left-refactor))
-(def ^:icon padding-left-right-refactor (icon-xref :padding-left-right-refactor))
-(def ^:icon padding-right-refactor (icon-xref :padding-right-refactor))
-(def ^:icon padding-extended-refactor (icon-xref :padding-extended-refactor))
-(def ^:icon path-refactor (icon-xref :path-refactor))
-(def ^:icon pentool-refactor (icon-xref :pentool-refactor))
-(def ^:icon picker-refactor (icon-xref :picker-refactor))
-(def ^:icon pin-refactor (icon-xref :pin-refactor))
-(def ^:icon play-refactor (icon-xref :play-refactor))
-(def ^:icon rectangle-refactor (icon-xref :rectangle-refactor))
-(def ^:icon reload-refactor (icon-xref :reload-refactor))
-(def ^:icon remove-refactor (icon-xref :remove-refactor))
-(def ^:icon rgba-refactor (icon-xref :rgba-refactor))
-(def ^:icon rgba-complementary-refactor (icon-xref :rgba-complementary-refactor))
-(def ^:icon rotation-refactor (icon-xref :rotation-refactor))
-(def ^:icon row-reverse-refactor (icon-xref :row-reverse-refactor))
-(def ^:icon search-refactor (icon-xref :search-refactor))
-(def ^:icon separate-nodes-refactor (icon-xref :separate-nodes-refactor))
-(def ^:icon size-horizontal-refactor (icon-xref :size-horizontal-refactor))
-(def ^:icon size-vertical-refactor (icon-xref :size-vertical-refactor))
-(def ^:icon shown-refactor (icon-xref :shown-refactor))
-(def ^:icon snap-nodes-refactor (icon-xref :snap-nodes-refactor))
-(def ^:icon status-alert-refactor (icon-xref :status-alert-refactor))
-(def ^:icon status-update-refactor (icon-xref :status-update-refactor))
-(def ^:icon status-tick-refactor (icon-xref :status-tick-refactor))
-(def ^:icon status-wrong-refactor (icon-xref :status-wrong-refactor))
-(def ^:icon stroke-arrow-refactor (icon-xref :stroke-arrow-refactor))
-(def ^:icon stroke-circle-refactor (icon-xref :stroke-circle-refactor))
-(def ^:icon stroke-diamond-refactor (icon-xref :stroke-diamond-refactor))
-(def ^:icon stroke-rectangle-refactor (icon-xref :stroke-rectangle-refactor))
-(def ^:icon stroke-rounded-refactor (icon-xref :stroke-rounded-refactor))
-(def ^:icon stroke-squared-refactor (icon-xref :stroke-squared-refactor))
-(def ^:icon stroke-triangle-refactor (icon-xref :stroke-triangle-refactor))
-(def ^:icon stroke-size-refactor (icon-xref :stroke-size-refactor))
-(def ^:icon svg-refactor (icon-xref :svg-refactor))
-(def ^:icon swatches-refactor (icon-xref :swatches-refactor))
-(def ^:icon switch-refactor (icon-xref :switch-refactor))
-(def ^:icon text-align-center-refactor (icon-xref :text-align-center-refactor))
-(def ^:icon text-align-left-refactor (icon-xref :text-align-left-refactor))
-(def ^:icon text-align-right-refactor (icon-xref :text-align-right-refactor))
-(def ^:icon text-auto-height-refactor (icon-xref :text-auto-height-refactor))
-(def ^:icon text-auto-width-refactor (icon-xref :text-auto-width-refactor))
-(def ^:icon text-fixed-refactor (icon-xref :text-fixed-refactor))
-(def ^:icon text-justify-refactor (icon-xref :text-justify-refactor))
-(def ^:icon text-letterspacing-refactor (icon-xref :text-letterspacing-refactor))
-(def ^:icon text-lineheight-refactor (icon-xref :text-lineheight-refactor))
-(def ^:icon text-lowercase-refactor (icon-xref :text-lowercase-refactor))
-(def ^:icon text-palette-refactor (icon-xref :text-palette-refactor))
-(def ^:icon text-paragraph-refactor (icon-xref :text-paragraph-refactor))
-(def ^:icon text-refactor (icon-xref :text-refactor))
-(def ^:icon text-bottom-refactor (icon-xref :text-bottom-refactor))
-(def ^:icon text-ltr-refactor (icon-xref :text-ltr-refactor))
-(def ^:icon text-rtl-refactor (icon-xref :text-rtl-refactor))
-(def ^:icon text-middle-refactor (icon-xref :text-middle-refactor))
-(def ^:icon text-mixed-refactor (icon-xref :text-mixed-refactor))
-(def ^:icon text-stroked-refactor (icon-xref :text-stroked-refactor))
-(def ^:icon text-top-refactor (icon-xref :text-top-refactor))
-(def ^:icon text-underlined-refactor (icon-xref :text-underlined-refactor))
-(def ^:icon text-uppercase-refactor (icon-xref :text-uppercase-refactor))
-(def ^:icon tick-refactor (icon-xref :tick-refactor))
-(def ^:icon tree-refactor (icon-xref :tree-refactor))
-(def ^:icon to-corner-refactor (icon-xref :to-corner-refactor))
-(def ^:icon to-curve-refactor (icon-xref :to-curve-refactor))
-(def ^:icon unlock-refactor (icon-xref :unlock-refactor))
-(def ^:icon user-refactor (icon-xref :user-refactor))
-(def ^:icon vertical-align-items-center-refactor (icon-xref :vertical-align-items-center-refactor))
-(def ^:icon vertical-align-items-end-refactor (icon-xref :vertical-align-items-end-refactor))
-(def ^:icon vertical-align-items-start-refactor (icon-xref :vertical-align-items-start-refactor))
-(def ^:icon view-as-icons-refactor (icon-xref :view-as-icons-refactor))
-(def ^:icon wrap-refactor (icon-xref :wrap-refactor))
-(def ^:icon view-as-list-refactor (icon-xref :view-as-list-refactor))
-(def ^:icon cap-line-arrow (icon-xref :cap-line-arrow))
-(def ^:icon cap-triangle-arrow (icon-xref :cap-triangle-arrow))
-(def ^:icon cap-square-marker (icon-xref :cap-square-marker))
-(def ^:icon cap-circle-marker (icon-xref :cap-circle-marker))
-(def ^:icon cap-diamond-marker (icon-xref :cap-diamond-marker))
-(def ^:icon cap-round (icon-xref :cap-round))
-(def ^:icon cap-square (icon-xref :cap-square))
-
+(def ^:icon absolute (icon-xref :absolute))
+(def ^:icon add (icon-xref :add))
+(def ^:icon align-bottom (icon-xref :align-bottom))
+(def ^:icon align-content-column-around (icon-xref :align-content-column-around))
+(def ^:icon align-content-column-between (icon-xref :align-content-column-between))
+(def ^:icon align-content-column-center (icon-xref :align-content-column-center))
+(def ^:icon align-content-column-end (icon-xref :align-content-column-end))
+(def ^:icon align-content-column-evenly (icon-xref :align-content-column-evenly))
+(def ^:icon align-content-column-start (icon-xref :align-content-column-start))
+(def ^:icon align-content-column-stretch (icon-xref :align-content-column-stretch))
+(def ^:icon align-content-row-around (icon-xref :align-content-row-around))
+(def ^:icon align-content-row-between (icon-xref :align-content-row-between))
+(def ^:icon align-content-row-center (icon-xref :align-content-row-center))
+(def ^:icon align-content-row-end (icon-xref :align-content-row-end))
+(def ^:icon align-content-row-evenly (icon-xref :align-content-row-evenly))
+(def ^:icon align-content-row-start (icon-xref :align-content-row-start))
+(def ^:icon align-content-row-stretch (icon-xref :align-content-row-stretch))
+(def ^:icon align-horizontal-center (icon-xref :align-horizontal-center))
+(def ^:icon align-items-column-center (icon-xref :align-items-column-center))
+(def ^:icon align-items-column-end (icon-xref :align-items-column-end))
+(def ^:icon align-items-column-start (icon-xref :align-items-column-start))
+(def ^:icon align-items-row-center (icon-xref :align-items-row-center))
+(def ^:icon align-items-row-end (icon-xref :align-items-row-end))
+(def ^:icon align-items-row-start (icon-xref :align-items-row-start))
+(def ^:icon align-left (icon-xref :align-left))
+(def ^:icon align-right (icon-xref :align-right))
+(def ^:icon align-self-column-bottom (icon-xref :align-self-column-bottom))
+(def ^:icon align-self-column-center (icon-xref :align-self-column-center))
+(def ^:icon align-self-column-stretch (icon-xref :align-self-column-stretch))
+(def ^:icon align-self-column-top (icon-xref :align-self-column-top))
+(def ^:icon align-self-row-center (icon-xref :align-self-row-center))
+(def ^:icon align-self-row-left (icon-xref :align-self-row-left))
+(def ^:icon align-self-row-right (icon-xref :align-self-row-right))
+(def ^:icon align-self-row-stretch (icon-xref :align-self-row-stretch))
+(def ^:icon align-top (icon-xref :align-top))
+(def ^:icon align-vertical-center (icon-xref :align-vertical-center))
+(def ^:icon arrow (icon-xref :arrow))
+(def ^:icon asc-sort (icon-xref :asc-sort))
+(def ^:icon board (icon-xref :board))
+(def ^:icon boards-thumbnail (icon-xref :boards-thumbnail))
+(def ^:icon boolean-difference (icon-xref :boolean-difference))
+(def ^:icon boolean-exclude (icon-xref :boolean-exclude))
+(def ^:icon boolean-flatten (icon-xref :boolean-flatten))
+(def ^:icon boolean-intersection (icon-xref :boolean-intersection))
+(def ^:icon boolean-union (icon-xref :boolean-union))
+(def ^:icon bug (icon-xref :bug))
+(def ^:icon clip-content (icon-xref :clip-content))
+(def ^:icon clipboard (icon-xref :clipboard))
+(def ^:icon close-small (icon-xref :close-small))
+(def ^:icon close (icon-xref :close))
+(def ^:icon code (icon-xref :code))
+(def ^:icon column-reverse (icon-xref :column-reverse))
+(def ^:icon column (icon-xref :column))
+(def ^:icon comments (icon-xref :comments))
+(def ^:icon component-copy (icon-xref :component-copy))
+(def ^:icon component (icon-xref :component))
+(def ^:icon constraint-horizontal (icon-xref :constraint-horizontal))
+(def ^:icon constraint-vertical (icon-xref :constraint-vertical))
+(def ^:icon corner-bottom-left (icon-xref :corner-bottom-left))
+(def ^:icon corner-bottom-right (icon-xref :corner-bottom-right))
+(def ^:icon corner-bottom (icon-xref :corner-bottom))
+(def ^:icon corner-center (icon-xref :corner-center))
+(def ^:icon corner-radius (icon-xref :corner-radius))
+(def ^:icon corner-top (icon-xref :corner-top))
+(def ^:icon corner-top-left (icon-xref :corner-top-left))
+(def ^:icon corner-top-right (icon-xref :corner-top-right))
+(def ^:icon curve (icon-xref :curve))
+(def ^:icon delete-text (icon-xref :delete-text))
+(def ^:icon delete (icon-xref :delete))
+(def ^:icon desc-sort (icon-xref :desc-sort))
+(def ^:icon detach (icon-xref :detach))
+(def ^:icon detached (icon-xref :detached))
+(def ^:icon distribute-horizontally (icon-xref :distribute-horizontally))
+(def ^:icon distribute-vertical-spacing (icon-xref :distribute-vertical-spacing))
+(def ^:icon document (icon-xref :document))
+(def ^:icon download (icon-xref :download))
+(def ^:icon drop-icon (icon-xref :drop))
+(def ^:icon easing-ease-in-out (icon-xref :easing-ease-in-out))
+(def ^:icon easing-ease-in (icon-xref :easing-ease-in))
+(def ^:icon easing-ease-out (icon-xref :easing-ease-out))
+(def ^:icon easing-ease (icon-xref :easing-ease))
+(def ^:icon easing-linear (icon-xref :easing-linear))
+(def ^:icon effects (icon-xref :effects))
+(def ^:icon elipse (icon-xref :elipse))
+(def ^:icon exit (icon-xref :exit))
+(def ^:icon expand (icon-xref :expand))
+(def ^:icon feedback (icon-xref :feedback))
+(def ^:icon fill-content (icon-xref :fill-content))
+(def ^:icon filter-icon (icon-xref :filter))
+(def ^:icon fixed-width (icon-xref :fixed-width))
+(def ^:icon flex-grid (icon-xref :flex-grid))
+(def ^:icon flex-horizontal (icon-xref :flex-horizontal))
+(def ^:icon flex-vertical (icon-xref :flex-vertical))
+(def ^:icon flex (icon-xref :flex))
+(def ^:icon flip-horizontal (icon-xref :flip-horizontal))
+(def ^:icon flip-vertical (icon-xref :flip-vertical))
+(def ^:icon gap-horizontal (icon-xref :gap-horizontal))
+(def ^:icon gap-vertical (icon-xref :gap-vertical))
+(def ^:icon graphics (icon-xref :graphics))
+(def ^:icon grid-column (icon-xref :grid-column))
+(def ^:icon grid-columns (icon-xref :grid-columns))
+(def ^:icon grid-gutter (icon-xref :grid-gutter))
+(def ^:icon grid-margin (icon-xref :grid-margin))
+(def ^:icon grid (icon-xref :grid))
+(def ^:icon grid-row (icon-xref :grid-row))
+(def ^:icon grid-rows (icon-xref :grid-rows))
+(def ^:icon grid-square (icon-xref :grid-square))
+(def ^:icon group (icon-xref :group))
+(def ^:icon gutter-horizontal (icon-xref :gutter-horizontal))
+(def ^:icon gutter-vertical (icon-xref :gutter-vertical))
+(def ^:icon help (icon-xref :help))
+(def ^:icon hide (icon-xref :hide))
+(def ^:icon history (icon-xref :history))
+(def ^:icon hsva (icon-xref :hsva))
+(def ^:icon hug-content (icon-xref :hug-content))
+(def ^:icon icon (icon-xref :icon))
+(def ^:icon img (icon-xref :img))
+(def ^:icon interaction (icon-xref :interaction))
+(def ^:icon join-nodes (icon-xref :join-nodes))
+(def ^:icon justify-content-column-around (icon-xref :justify-content-column-around))
+(def ^:icon justify-content-column-between (icon-xref :justify-content-column-between))
+(def ^:icon justify-content-column-center (icon-xref :justify-content-column-center))
+(def ^:icon justify-content-column-end (icon-xref :justify-content-column-end))
+(def ^:icon justify-content-column-evenly (icon-xref :justify-content-column-evenly))
+(def ^:icon justify-content-column-start (icon-xref :justify-content-column-start))
+(def ^:icon justify-content-row-around (icon-xref :justify-content-row-around))
+(def ^:icon justify-content-row-between (icon-xref :justify-content-row-between))
+(def ^:icon justify-content-row-center (icon-xref :justify-content-row-center))
+(def ^:icon justify-content-row-end (icon-xref :justify-content-row-end))
+(def ^:icon justify-content-row-evenly (icon-xref :justify-content-row-evenly))
+(def ^:icon justify-content-row-start (icon-xref :justify-content-row-start))
+(def ^:icon layers (icon-xref :layers))
+(def ^:icon library (icon-xref :library))
+(def ^:icon locate (icon-xref :locate))
+(def ^:icon lock (icon-xref :lock))
+(def ^:icon margin-bottom (icon-xref :margin-bottom))
+(def ^:icon margin-left (icon-xref :margin-left))
+(def ^:icon margin-left-right (icon-xref :margin-left-right))
+(def ^:icon margin-right (icon-xref :margin-right))
+(def ^:icon margin-top-bottom (icon-xref :margin-top-bottom))
+(def ^:icon margin-top (icon-xref :margin-top))
+(def ^:icon margin (icon-xref :margin))
+(def ^:icon mask (icon-xref :mask))
+(def ^:icon masked (icon-xref :masked))
+(def ^:icon menu (icon-xref :menu))
+(def ^:icon merge-nodes (icon-xref :merge-nodes))
+(def ^:icon move (icon-xref :move))
+(def ^:icon msg-error (icon-xref :msg-error))
+(def ^:icon msg-neutral (icon-xref :msg-neutral))
+(def ^:icon msg-success (icon-xref :msg-success))
+(def ^:icon msg-warning (icon-xref :msg-warning))
+(def ^:icon open-link (icon-xref :open-link))
+(def ^:icon padding-bottom (icon-xref :padding-bottom))
+(def ^:icon padding-extended (icon-xref :padding-extended))
+(def ^:icon padding-left-right (icon-xref :padding-left-right))
+(def ^:icon padding-left (icon-xref :padding-left))
+(def ^:icon padding-right (icon-xref :padding-right))
+(def ^:icon padding-top-bottom (icon-xref :padding-top-bottom))
+(def ^:icon padding-top (icon-xref :padding-top))
+(def ^:icon path (icon-xref :path))
+(def ^:icon pentool (icon-xref :pentool))
+(def ^:icon picker (icon-xref :picker))
+(def ^:icon pin (icon-xref :pin))
+(def ^:icon play (icon-xref :play))
+(def ^:icon rectangle (icon-xref :rectangle))
+(def ^:icon reload (icon-xref :reload))
+(def ^:icon remove-icon (icon-xref :remove))
+(def ^:icon rgba-complementary (icon-xref :rgba-complementary))
+(def ^:icon rgba (icon-xref :rgba))
+(def ^:icon rotation (icon-xref :rotation))
+(def ^:icon row-reverse (icon-xref :row-reverse))
+(def ^:icon row (icon-xref :row))
+(def ^:icon search (icon-xref :search))
+(def ^:icon separate-nodes (icon-xref :separate-nodes))
+(def ^:icon shown (icon-xref :shown))
+(def ^:icon size-horizontal (icon-xref :size-horizontal))
+(def ^:icon size-vertical (icon-xref :size-vertical))
+(def ^:icon snap-nodes (icon-xref :snap-nodes))
+(def ^:icon status-alert (icon-xref :status-alert))
+(def ^:icon status-tick (icon-xref :status-tick))
+(def ^:icon status-update (icon-xref :status-update))
+(def ^:icon status-wrong (icon-xref :status-wrong))
+(def ^:icon stroke-arrow (icon-xref :stroke-arrow))
+(def ^:icon stroke-circle (icon-xref :stroke-circle))
+(def ^:icon stroke-diamond (icon-xref :stroke-diamond))
+(def ^:icon stroke-rectangle (icon-xref :stroke-rectangle))
+(def ^:icon stroke-rounded (icon-xref :stroke-rounded))
+(def ^:icon stroke-size (icon-xref :stroke-size))
+(def ^:icon stroke-squared (icon-xref :stroke-squared))
+(def ^:icon stroke-triangle (icon-xref :stroke-triangle))
+(def ^:icon svg (icon-xref :svg))
+(def ^:icon swatches (icon-xref :swatches))
+(def ^:icon switch (icon-xref :switch))
+(def ^:icon text-align-center (icon-xref :text-align-center))
+(def ^:icon text-align-left (icon-xref :text-align-left))
+(def ^:icon text-align-right (icon-xref :text-align-right))
+(def ^:icon text-auto-height (icon-xref :text-auto-height))
+(def ^:icon text-auto-width (icon-xref :text-auto-width))
+(def ^:icon text-bottom (icon-xref :text-bottom))
+(def ^:icon text-fixed (icon-xref :text-fixed))
+(def ^:icon text-justify (icon-xref :text-justify))
+(def ^:icon text-letterspacing (icon-xref :text-letterspacing))
+(def ^:icon text-lineheight (icon-xref :text-lineheight))
+(def ^:icon text-lowercase (icon-xref :text-lowercase))
+(def ^:icon text-ltr (icon-xref :text-ltr))
+(def ^:icon text-middle (icon-xref :text-middle))
+(def ^:icon text-mixed (icon-xref :text-mixed))
+(def ^:icon text-palette (icon-xref :text-palette))
+(def ^:icon text-paragraph (icon-xref :text-paragraph))
+(def ^:icon text-rtl (icon-xref :text-rtl))
+(def ^:icon text-stroked (icon-xref :text-stroked))
+(def ^:icon text-top (icon-xref :text-top))
+(def ^:icon text-underlined (icon-xref :text-underlined))
+(def ^:icon text-uppercase (icon-xref :text-uppercase))
+(def ^:icon text (icon-xref :text))
+(def ^:icon thumbnail (icon-xref :thumbnail))
+(def ^:icon tick (icon-xref :tick))
+(def ^:icon to-corner (icon-xref :to-corner))
+(def ^:icon to-curve (icon-xref :to-curve))
+(def ^:icon tree (icon-xref :tree))
+(def ^:icon unlock (icon-xref :unlock))
+(def ^:icon user (icon-xref :user))
(def ^:icon v2-icon-1 (icon-xref :v2-icon-1))
(def ^:icon v2-icon-2 (icon-xref :v2-icon-2))
(def ^:icon v2-icon-3 (icon-xref :v2-icon-3))
(def ^:icon v2-icon-4 (icon-xref :v2-icon-4))
+(def ^:icon vertical-align-items-center (icon-xref :vertical-align-items-center))
+(def ^:icon vertical-align-items-end (icon-xref :vertical-align-items-end))
+(def ^:icon vertical-align-items-start (icon-xref :vertical-align-items-start))
+(def ^:icon view-as-icons (icon-xref :view-as-icons))
+(def ^:icon view-as-list (icon-xref :view-as-list))
+(def ^:icon wrap (icon-xref :wrap))
(def ^:icon loader-pencil
@@ -527,24 +284,14 @@
{::mf/wrap-props false}
[]
(let [entries (->> (seq (js/Object.entries default))
- (sort-by first))
- refactor? (fn [[key]] (str/ends-with? key "Refactor"))]
- [:*
- [:section.debug-icons-preview
- [:h2.subtitle-old "Classic (Deprecated)"]
- (for [[key val] (remove refactor? entries)]
- [:div.icon-item-old {:key key
- :title key}
- val
- [:span key]])]
-
- [:section.debug-icons-preview
- [:h2 "Refactor"]
- (for [[key val] (filter refactor? entries)]
- [:div.icon-item {:key key
- :title key}
- val
- [:span key]])]]))
+ (sort-by first))]
+ [:section.debug-icons-preview
+ [:h2 "icons"]
+ (for [[key val] entries]
+ [:div.icon-item-old {:key key
+ :title key}
+ val
+ [:span key]])]))
(defn key->icon
[icon-key]
diff --git a/frontend/src/app/main/ui/notifications/badge.cljs b/frontend/src/app/main/ui/notifications/badge.cljs
new file mode 100644
index 000000000..e6e6c449e
--- /dev/null
+++ b/frontend/src/app/main/ui/notifications/badge.cljs
@@ -0,0 +1,27 @@
+;; This Source Code Form is subject to the terms of the Mozilla Public
+;; License, v. 2.0. If a copy of the MPL was not distributed with this
+;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
+;;
+;; Copyright (c) KALEIDOS INC
+
+(ns app.main.ui.notifications.badge
+ (:require-macros [app.main.style :as stl])
+ (:require
+ [rumext.v2 :as mf]))
+
+(mf/defc badge-notification
+ "They are persistent, informative and non-actionable.
+ They are small messages in specific areas off the app"
+
+ {::mf/props :obj}
+ [{:keys [type content size is-focus] :as props}]
+
+ [:aside {:class (stl/css-case :badge-notification true
+ :warning (= type :warning)
+ :error (= type :error)
+ :success (= type :success)
+ :info (= type :info)
+ :small (= size :small)
+ :focus is-focus)}
+ content])
+
diff --git a/frontend/src/app/main/ui/notifications/badge.scss b/frontend/src/app/main/ui/notifications/badge.scss
new file mode 100644
index 000000000..b98a5ee88
--- /dev/null
+++ b/frontend/src/app/main/ui/notifications/badge.scss
@@ -0,0 +1,64 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+//
+// Copyright (c) KALEIDOS INC
+
+@import "refactor/common-refactor.scss";
+
+.badge-notification {
+ @include smallTitleTipography;
+ --badge-notification-bg-color: var(--alert-background-color-default);
+ --badge-notification-fg-color: var(--alert-text-foreground-color-default);
+ --badge-notification-border-color: var(--alert-border-color-default);
+ box-sizing: border-box;
+ display: grid;
+ place-items: center;
+ grid-template-columns: 1fr;
+ min-height: $s-32;
+ height: fit-content;
+ min-width: $s-80;
+ width: fit-content;
+ padding: 0;
+ margin: 0;
+ border: $s-1 solid var(--badge-notification-border-color);
+ border-radius: $br-8;
+ background-color: var(--badge-notification-bg-color);
+ color: var(--badge-notification-fg-color);
+}
+
+.small {
+ @include bodySmallTypography;
+ min-height: $s-20;
+ border-radius: $br-6;
+}
+
+.warning {
+ --badge-notification-bg-color: var(--alert-background-color-warning);
+ --badge-notification-fg-color: var(--alert-text-foreground-color-warning);
+ --badge-notification-border-color: var(--alert-border-color-warning);
+}
+
+.success {
+ --badge-notification-bg-color: var(--alert-background-color-success);
+ --badge-notification-fg-color: var(--alert-text-foreground-color-success);
+ --badge-notification-border-color: var(--alert-border-color-success);
+}
+
+.info {
+ --badge-notification-bg-color: var(--alert-background-color-info);
+ --badge-notification-fg-color: var(--alert-text-foreground-color-info);
+ --badge-notification-border-color: var(--alert-border-color-info);
+}
+
+.error {
+ --badge-notification-bg-color: var(--alert-background-color-error);
+ --badge-notification-fg-color: var(--alert-text-foreground-color-error);
+ --badge-notification-border-color: var(--alert-border-color-error);
+}
+
+.focus {
+ --badge-notification-bg-color: transparent;
+ --badge-notification-fg-color: var(--alert-text-foreground-color-focus);
+ --badge-notification-border-color: var(--alert-border-color-focus);
+}
diff --git a/frontend/src/app/main/ui/notifications/context_notification.cljs b/frontend/src/app/main/ui/notifications/context_notification.cljs
index cdd9a1d10..19a68ad26 100644
--- a/frontend/src/app/main/ui/notifications/context_notification.cljs
+++ b/frontend/src/app/main/ui/notifications/context_notification.cljs
@@ -14,16 +14,16 @@
[rumext.v2 :as mf]))
(def ^:private neutral-icon
- (i/icon-xref :msg-neutral-refactor (stl/css :icon)))
+ (i/icon-xref :msg-neutral (stl/css :icon)))
(def ^:private error-icon
- (i/icon-xref :delete-text-refactor (stl/css :icon)))
+ (i/icon-xref :delete-text (stl/css :icon)))
(def ^:private success-icon
- (i/icon-xref :status-tick-refactor (stl/css :icon)))
+ (i/icon-xref :status-tick (stl/css :icon)))
(def ^:private info-icon
- (i/icon-xref :help-refactor (stl/css :icon)))
+ (i/icon-xref :help (stl/css :icon)))
(defn get-icon-by-type
[type]
diff --git a/frontend/src/app/main/ui/notifications/toast_notification.cljs b/frontend/src/app/main/ui/notifications/toast_notification.cljs
index a43e5d5af..c4583c901 100644
--- a/frontend/src/app/main/ui/notifications/toast_notification.cljs
+++ b/frontend/src/app/main/ui/notifications/toast_notification.cljs
@@ -14,19 +14,19 @@
[rumext.v2 :as mf]))
(def ^:private neutral-icon
- (i/icon-xref :msg-neutral-refactor (stl/css :icon)))
+ (i/icon-xref :msg-neutral (stl/css :icon)))
(def ^:private error-icon
- (i/icon-xref :delete-text-refactor (stl/css :icon)))
+ (i/icon-xref :delete-text (stl/css :icon)))
(def ^:private success-icon
- (i/icon-xref :status-tick-refactor (stl/css :icon)))
+ (i/icon-xref :status-tick (stl/css :icon)))
(def ^:private info-icon
- (i/icon-xref :help-refactor (stl/css :icon)))
+ (i/icon-xref :help (stl/css :icon)))
(def ^:private close-icon
- (i/icon-xref :close-refactor (stl/css :close-icon)))
+ (i/icon-xref :close (stl/css :close-icon)))
(defn get-icon-by-type
[type]
diff --git a/frontend/src/app/main/ui/onboarding/newsletter.cljs b/frontend/src/app/main/ui/onboarding/newsletter.cljs
index 0d027d607..e0336641e 100644
--- a/frontend/src/app/main/ui/onboarding/newsletter.cljs
+++ b/frontend/src/app/main/ui/onboarding/newsletter.cljs
@@ -56,7 +56,7 @@
[:label {:for "newsletter-updates"}
[:span {:class (stl/css-case :global/checked @newsletter-updates)}
(when @newsletter-updates
- i/status-tick-refactor)]
+ i/status-tick)]
(tr "onboarding-v2.newsletter.updates")
[:input {:type "checkbox"
:id "newsletter-updates"
@@ -66,7 +66,7 @@
[:label {:for "newsletter-news"}
[:span {:class (stl/css-case :global/checked @newsletter-news)}
(when @newsletter-news
- i/status-tick-refactor)]
+ i/status-tick)]
(tr "onboarding-v2.newsletter.news")
[:input {:type "checkbox"
:id "newsletter-news"
diff --git a/frontend/src/app/main/ui/onboarding/questions.cljs b/frontend/src/app/main/ui/onboarding/questions.cljs
index c509ca987..f7d96dca4 100644
--- a/frontend/src/app/main/ui/onboarding/questions.cljs
+++ b/frontend/src/app/main/ui/onboarding/questions.cljs
@@ -164,7 +164,7 @@
{:label (tr "questions.adobe-xd") :value "adobe-xd" :image "images/form/adobe-xd.png" :area "image3"}
{:label (tr "questions.canva") :value "canva" :image "images/form/canva.png" :area "image4"}
{:label (tr "questions.invision") :value "invision" :image "images/form/invision.png" :area "image5"}
- {:label (tr "questions.never-used-one") :area "image6" :value "never-used-a-tool" :icon i/curve-refactor}
+ {:label (tr "questions.never-used-one") :area "image6" :value "never-used-a-tool" :icon i/curve}
{:label (tr "questions.other") :value "other" :area "other"}]
:name :experience-design-tool
:class (stl/css :image-radio)
diff --git a/frontend/src/app/main/ui/onboarding/team_choice.cljs b/frontend/src/app/main/ui/onboarding/team_choice.cljs
index 646184e6f..a3a007c38 100644
--- a/frontend/src/app/main/ui/onboarding/team_choice.cljs
+++ b/frontend/src/app/main/ui/onboarding/team_choice.cljs
@@ -40,23 +40,23 @@
(tr "onboarding.team-modal.create-team-desc")]
[:ul {:class (stl/css :team-features)}
[:li {:class (stl/css :feature)}
- [:span {:class (stl/css :icon)} i/document-refactor]
+ [:span {:class (stl/css :icon)} i/document]
[:p {:class (stl/css :modal-desc)}
(tr "onboarding.team-modal.create-team-feature-1")]]
[:li {:class (stl/css :feature)}
- [:span {:class (stl/css :icon)} i/move-refactor]
+ [:span {:class (stl/css :icon)} i/move]
[:p {:class (stl/css :modal-desc)}
(tr "onboarding.team-modal.create-team-feature-2")]]
[:li {:class (stl/css :feature)}
- [:span {:class (stl/css :icon)} i/tree-refactor]
+ [:span {:class (stl/css :icon)} i/tree]
[:p {:class (stl/css :modal-desc)}
(tr "onboarding.team-modal.create-team-feature-3")]]
[:li {:class (stl/css :feature)}
- [:span {:class (stl/css :icon)} i/user-refactor]
+ [:span {:class (stl/css :icon)} i/user]
[:p {:class (stl/css :modal-desc)}
(tr "onboarding.team-modal.create-team-feature-4")]]
[:li {:class (stl/css :feature)}
- [:span {:class (stl/css :icon)} i/tick-refactor]
+ [:span {:class (stl/css :icon)} i/tick]
[:p {:class (stl/css :modal-desc)}
(tr "onboarding.team-modal.create-team-feature-5")]]]])
diff --git a/frontend/src/app/main/ui/releases.cljs b/frontend/src/app/main/ui/releases.cljs
index 562c1eab2..50f87648f 100644
--- a/frontend/src/app/main/ui/releases.cljs
+++ b/frontend/src/app/main/ui/releases.cljs
@@ -91,4 +91,4 @@
(defmethod rc/render-release-notes "0.0"
[params]
- (rc/render-release-notes (assoc params :version "2.0")))
+ (rc/render-release-notes (assoc params :version "1.21")))
diff --git a/frontend/src/app/main/ui/releases/v2_0.cljs b/frontend/src/app/main/ui/releases/v2_0.cljs
index 67ae75e17..116a4c172 100644
--- a/frontend/src/app/main/ui/releases/v2_0.cljs
+++ b/frontend/src/app/main/ui/releases/v2_0.cljs
@@ -11,6 +11,10 @@
[app.main.ui.releases.common :as c]
[rumext.v2 :as mf]))
+(defmethod c/render-release-notes "1.21"
+ [data]
+ (c/render-release-notes (assoc data :version "2.0")))
+
;; TODO: Review all copies and alt text
(defmethod c/render-release-notes "2.0"
[{:keys [slide klass next finish navigate version]}]
@@ -20,41 +24,41 @@
[:div {:class (stl/css :modal-overlay)}
[:div.animated {:class klass}
[:div {:class (stl/css :modal-container)}
- ;; TODO: Review alt
[:img {:src "images/features/2.0-intro-image.png"
:class (stl/css :start-image)
:border "0"
- :alt "Community code contributions"}]
+ :alt "A graphic illustration with Penpot style"}]
[:div {:class (stl/css :modal-content)}
[:div {:class (stl/css :modal-header)}
[:h1 {:class (stl/css :modal-title)}
- "What's new?"]
+ "Welcome to Penpot 2.0! "]
- [:div {:class (stl/css :verstion-tag)}
+ [:div {:class (stl/css :version-tag)}
(dm/str "Version " version)]]
[:div {:class (stl/css :features-block)}
- [:div {:class (stl/css :feature)}
- [:h2 {:class (stl/css :feature-title)}
- "CSS Grid Layout"]
- [:p {:class (stl/css :feature-content)}
- "Crea una estructura flexible para componer
- los elementos de tu diseño y obten el código html/css."]]
+ [:p {:class (stl/css :feature-content)}
+ [:spam {:class (stl/css :feature-title)}
+ "CSS Grid Layout: "]
+ "Bring your designs to life, knowing that what you create is what developers code."]
- [:div {:class (stl/css :feature)}
- [:h2 {:class (stl/css :feature-title)}
- "New Components"]
- [:p {:class (stl/css :feature-content)}
- "Ahora tus main components estarán en un espacio
- físico, para que los puedas ver y gestionar fácilmente."]]
+ [:p {:class (stl/css :feature-content)}
+ [:spam {:class (stl/css :feature-title)}
+ "Sleeker UI: "]
+ "We’ve polished Penpot to make your experience smoother and more enjoyable."]
- [:div {:class (stl/css :feature)}
- [:h2 {:class (stl/css :feature-title)}
- "New User Interface"]
- [:p {:class (stl/css :feature-content)}
- "Hemos hecho Penpot aún más bonito, y además
- ahora puedes elegir entre tema oscuro y claro."]]]
+ [:p {:class (stl/css :feature-content)}
+ [:spam {:class (stl/css :feature-title)}
+ "New Components System: "]
+ "Managing and using your design components got a whole lot better."]
+
+ [:p {:class (stl/css :feature-content)}
+ "And that’s not all - we’ve fined tuned performance and "
+ "accessibility to give you a better and more fluid design experience."]
+
+ [:p {:class (stl/css :feature-content)}
+ " Ready to dive in? Let 's get started!"]]
[:div {:class (stl/css :navigation)}
[:button {:class (stl/css :next-btn)
@@ -64,32 +68,38 @@
[:div {:class (stl/css :modal-overlay)}
[:div.animated {:class klass}
[:div {:class (stl/css :modal-container)}
- ;; TODO: Review alt
[:img {:src "images/features/2.0-css-grid.gif"
:class (stl/css :start-image)
:border "0"
- :alt "Community code contributions"}]
+ :alt "Penpot's CSS Grid Layout"}]
[:div {:class (stl/css :modal-content)}
[:div {:class (stl/css :modal-header)}
[:h1 {:class (stl/css :modal-title)}
- "css grid layout"]]
+ "CSS Grid Layout - Design Meets Development"]]
+
[:div {:class (stl/css :feature)}
[:p {:class (stl/css :feature-content)}
- "¿Querías más flexibilidad para componer tus diseños?
- Selecciona GridLayout para crear una estructura con los
- márgenes y espacios que necesites. Los elementos de tu diseño
- se adaptarán como un guante. Además tendrás en el momento el
- código html y css con estándares web."]
+ "The much-awaited Grid Layout introduces 2-dimensional"
+ " layout capabilities to Penpot, allowing for the creation"
+ " of adaptive layouts by leveraging the power of CSS properties."]
[:p {:class (stl/css :feature-content)}
- "Elige entre FlexLayout o GridLayout en tu panel lateral derecho."]]
+ "It’s a host of new features, including columns and"
+ " rows management, flexible units such as FR (fractions),"
+ " the ability to create and name areas, and tons of new "
+ "and unique possibilities within a design tool."]
+
+ [:p {:class (stl/css :feature-content)}
+ "Designers will learn CSS basics while working, "
+ "and as always with Penpot, developers can pick"
+ " up the design as code to take it from there."]]
[:div {:class (stl/css :navigation)}
[:& c/navigation-bullets
{:slide slide
:navigate navigate
- :total 3}]
+ :total 4}]
[:button {:on-click next
:class (stl/css :next-btn)} "Continue"]]]]]]
@@ -98,30 +108,32 @@
[:div {:class (stl/css :modal-overlay)}
[:div.animated {:class klass}
[:div {:class (stl/css :modal-container)}
- [:img {:src "images/features/2.0-components.gif"
+ [:img {:src "images/features/2.0-new-ui.gif"
:class (stl/css :start-image)
:border "0"
- :alt "Community code contributions"}]
+ :alt "Penpot's UI Makeover"}]
[:div {:class (stl/css :modal-content)}
[:div {:class (stl/css :modal-header)}
[:h1 {:class (stl/css :modal-title)}
- "New components"]]
+ "UI Makeover - Smoother, Sharper, and Simply More Fun"]]
+
[:div {:class (stl/css :feature)}
[:p {:class (stl/css :feature-content)}
- "Os hemos escuchado y ahora los main components están
- disponibles en el archivo para gestionarlos más cómodamente."]
+ "We've completely overhauled Penpot's user interface. "
+ "The improvements in consistency, the introduction of "
+ "new microinteractions, and attention to countless details"
+ " will significantly enhance the productivity and enjoyment of using Penpot."]
[:p {:class (stl/css :feature-content)}
- "No te preocupes por tus archivos con main componentes v1,
- al abrirlos con la nueva versión los encontrarás agrupados
- en una página nueva, sanos y salvos."]]
+ "Furthermore, we’ve made several accessibility improvements, "
+ "with better color contrast, keyboard navigation,"
+ " and adherence to other best practices."]]
[:div {:class (stl/css :navigation)}
-
[:& c/navigation-bullets
{:slide slide
:navigate navigate
- :total 3}]
+ :total 4}]
[:button {:on-click next
:class (stl/css :next-btn)} "Continue"]]]]]]
@@ -130,36 +142,65 @@
[:div {:class (stl/css :modal-overlay)}
[:div.animated {:class klass}
[:div {:class (stl/css :modal-container)}
- [:img {:src "images/features/2.0-new-ui.gif"
+ [:img {:src "images/features/2.0-components.gif"
:class (stl/css :start-image)
:border "0"
- :alt "Community code contributions"}]
+ :alt "Penpot's new components system"}]
[:div {:class (stl/css :modal-content)}
[:div {:class (stl/css :modal-header)}
[:h1 {:class (stl/css :modal-title)}
- "REDISEÑO Y MEJORAS DE RENDIMIENTO"]]
-
+ "New Components System"]]
[:div {:class (stl/css :feature)}
[:p {:class (stl/css :feature-content)}
- "Le hemos dado una vuelta al interface y añadido
- pequeñas mejoras de usabilidad.
- Además, ahora puedes elegir entre tema oscuro y tema claro,
- dignos de Dark Vader y Luke Skywalker."]
+ "The new Penpot components system improves"
+ " control over instances, including their "
+ "inheritances and properties overrides. "
+ "Main components are now accessible as design"
+ " elements, allowing a better updating "
+ "workflow through instant changes synchronization."]
[:p {:class (stl/css :feature-content)}
- "Aunque siempre estamos puliendo el rendimiento
- y la estabilidad, en esta versión hemos
- conseguido grandes mejoras en ese sentido."]
+ "And that’s not all, there are new capabilities "
+ "such as component swapping and annotations "
+ "that will help you to better manage your design systems."]]
+ [:div {:class (stl/css :navigation)}
+ [:& c/navigation-bullets
+ {:slide slide
+ :navigate navigate
+ :total 4}]
+
+ [:button {:on-click next
+ :class (stl/css :next-btn)} "Continue"]]]]]]
+
+ 3
+ [:div {:class (stl/css :modal-overlay)}
+ [:div.animated {:class klass}
+ [:div {:class (stl/css :modal-container)}
+ [:img {:src "images/features/2.0-html.gif"
+ :class (stl/css :start-image)
+ :border "0"
+ :alt " Penpot's HTML code generator"}]
+
+ [:div {:class (stl/css :modal-content)}
+ [:div {:class (stl/css :modal-header)}
+ [:h1 {:class (stl/css :modal-title)}
+ "And much more"]]
+ [:div {:class (stl/css :feature)}
[:p {:class (stl/css :feature-content)}
- "Que lo disfrutes!"]]
+ "In addition to all of this, we’ve included several other requested improvements:"]
+ [:ul {:class (stl/css :feature-list)}
+ [:li "Access HTML markup code directly in inspect mode"]
+ [:li "Images are now treated as element fills, maintaining their aspect ratio on resize, ideal for flexible designs"]
+ [:li "Enjoy new color themes with options for both dark and light modes"]
+ [:li "Feel the speed boost! Enjoy a smoother experience with a bunch of performance improvements"]]]
[:div {:class (stl/css :navigation)}
[:& c/navigation-bullets
{:slide slide
:navigate navigate
- :total 3}]
+ :total 4}]
[:button {:on-click finish
:class (stl/css :next-btn)} "Let's go"]]]]]])))
diff --git a/frontend/src/app/main/ui/releases/v2_0.scss b/frontend/src/app/main/ui/releases/v2_0.scss
index 60848a6f0..0108877b0 100644
--- a/frontend/src/app/main/ui/releases/v2_0.scss
+++ b/frontend/src/app/main/ui/releases/v2_0.scss
@@ -37,7 +37,7 @@
gap: $s-8;
}
-.verstion-tag {
+.version-tag {
@include flexCenter;
@include headlineSmallTypography;
height: $s-32;
@@ -76,6 +76,14 @@
color: var(--modal-text-foreground-color);
}
+.feature-list {
+ @include bodyMediumTypography;
+ color: var(--modal-text-foreground-color);
+ list-style: disc;
+ display: grid;
+ gap: $s-8;
+}
+
.navigation {
width: 100%;
display: grid;
diff --git a/frontend/src/app/main/ui/settings/access_tokens.cljs b/frontend/src/app/main/ui/settings/access_tokens.cljs
index 8f8f4e6f4..663c9a09d 100644
--- a/frontend/src/app/main/ui/settings/access_tokens.cljs
+++ b/frontend/src/app/main/ui/settings/access_tokens.cljs
@@ -25,6 +25,15 @@
[okulary.core :as l]
[rumext.v2 :as mf]))
+(def ^:private clipboard-icon
+ (i/icon-xref :clipboard (stl/css :clipboard-icon)))
+
+(def ^:private close-icon
+ (i/icon-xref :close (stl/css :close-icon)))
+
+(def ^:private menu-icon
+ (i/icon-xref :menu (stl/css :menu-icon)))
+
(def tokens-ref
(l/derived :access-tokens st/state))
@@ -114,7 +123,8 @@
[:h2 {:class (stl/css :modal-title)} (tr "modals.create-access-token.title")]
[:button {:class (stl/css :modal-close-btn)
- :on-click on-close} i/close-refactor]]
+ :on-click on-close}
+ close-icon]]
[:div {:class (stl/css :modal-content)}
[:div {:class (stl/css :fields-row)}
@@ -128,7 +138,8 @@
:placeholder (tr "modals.create-access-token.name.placeholder")}]]
[:div {:class (stl/css :fields-row)}
- [:div {:class (stl/css :select-title)} (tr "modals.create-access-token.expiration-date.label")]
+ [:div {:class (stl/css :select-title)}
+ (tr "modals.create-access-token.expiration-date.label")]
[:& fm/select {:options [{:label (tr "dashboard.access-tokens.expiration-never") :value "never" :key "never"}
{:label (tr "dashboard.access-tokens.expiration-30-days") :value "720h" :key "720h"}
{:label (tr "dashboard.access-tokens.expiration-60-days") :value "1440h" :key "1440h"}
@@ -154,14 +165,14 @@
[:button {:title (tr "modals.create-access-token.copy-token")
:class (stl/css :copy-btn)
:on-click copy-token}
- i/clipboard-refactor]])
+ clipboard-icon]])
#_(when @created?
[:button {:class (stl/css :copy-btn)
:title (tr "modals.create-access-token.copy-token")
:on-click copy-token}
[:span {:class (stl/css :token-value)} (:token created "")]
[:span {:class (stl/css :icon)}
- i/clipboard-refactor]])]]
+ i/clipboard]])]]
[:div {:class (stl/css :modal-footer)}
[:div {:class (stl/css :action-buttons)}
@@ -182,16 +193,13 @@
(mf/defc access-tokens-hero
[]
(let [on-click (mf/use-fn #(st/emit! (modal/show :access-token {})))]
- [:div {:class (stl/css :access-tokens-hero-container)}
- [:div {:class (stl/css :access-tokens-hero)}
- [:div {:class (stl/css :desc)}
- [:h2 (tr "dashboard.access-tokens.personal")]
- [:p (tr "dashboard.access-tokens.personal.description")]]
+ [:div {:class (stl/css :access-tokens-hero)}
+ [:h2 {:class (stl/css :hero-title)} (tr "dashboard.access-tokens.personal")]
+ [:p {:class (stl/css :hero-desc)} (tr "dashboard.access-tokens.personal.description")]
- [:button
- {:class (stl/css :btn-primary)
- :on-click on-click}
- [:span (tr "dashboard.access-tokens.create")]]]]))
+ [:button {:class (stl/css :hero-btn)
+ :on-click on-click}
+ (tr "dashboard.access-tokens.create")]]))
(mf/defc access-token-actions
[{:keys [on-delete]}]
@@ -221,12 +229,12 @@
(dom/stop-propagation event)
(on-menu-click event))))]
- [:div {:class (stl/css :icon)
- :tab-index "0"
- :ref menu-ref
- :on-click on-menu-click
- :on-key-down on-keydown}
- i/actions
+ [:button {:class (stl/css :menu-btn)
+ :tab-index "0"
+ :ref menu-ref
+ :on-click on-menu-click
+ :on-key-down on-keydown}
+ menu-icon
[:& context-menu-a11y
{:on-close on-menu-close
:show show?
@@ -264,15 +272,15 @@
:on-accept delete-fn}))))]
[:div {:class (stl/css :table-row)}
- [:div {:class (stl/css :table-field :name)}
+ [:div {:class (stl/css :table-field :field-name)}
(str (:name token))]
- [:div {:class (stl/css :table-field :expiration-date)}
- [:span {:class (stl/css-case :expired expired? :content true)}
- (cond
- (nil? expires-at) (tr "dashboard.access-tokens.no-expiration")
- expired? (tr "dashboard.access-tokens.expired-on" expires-txt)
- :else (tr "dashboard.access-tokens.expires-on" expires-txt))]]
+ [:div {:class (stl/css-case :expiration-date true
+ :expired expired?)}
+ (cond
+ (nil? expires-at) (tr "dashboard.access-tokens.no-expiration")
+ expired? (tr "dashboard.access-tokens.expired-on" expires-txt)
+ :else (tr "dashboard.access-tokens.expires-on" expires-txt))]
[:div {:class (stl/css :table-field :actions)}
[:& access-token-actions
{:on-delete on-delete}]]]))
@@ -285,14 +293,13 @@
(st/emit! (du/fetch-access-tokens)))
[:div {:class (stl/css :dashboard-access-tokens)}
- [:div
- [:& access-tokens-hero]
- (if (empty? tokens)
- [:div {:class (stl/css :access-tokens-empty)}
- [:div (tr "dashboard.access-tokens.empty.no-access-tokens")]
- [:div (tr "dashboard.access-tokens.empty.add-one")]]
- [:div {:class (stl/css :dashboard-table)}
- [:div {:class (stl/css :table-rows)}
- (for [token tokens]
- [:& access-token-item {:token token :key (:id token)}])]])]]))
+ [:& access-tokens-hero]
+ (if (empty? tokens)
+ [:div {:class (stl/css :access-tokens-empty)}
+ [:div (tr "dashboard.access-tokens.empty.no-access-tokens")]
+ [:div (tr "dashboard.access-tokens.empty.add-one")]]
+ [:div {:class (stl/css :dashboard-table)}
+ [:div {:class (stl/css :table-rows)}
+ (for [token tokens]
+ [:& access-token-item {:token token :key (:id token)}])]])]))
diff --git a/frontend/src/app/main/ui/settings/access_tokens.scss b/frontend/src/app/main/ui/settings/access_tokens.scss
index b3273c9c8..50239c61b 100644
--- a/frontend/src/app/main/ui/settings/access_tokens.scss
+++ b/frontend/src/app/main/ui/settings/access_tokens.scss
@@ -6,168 +6,118 @@
@use "common/refactor/common-refactor.scss" as *;
-.dashboard-table {
- display: flex;
- flex-direction: column;
- font-size: $fs-16;
- margin-top: $s-20;
+// ACCESS TOKENS PAGE
+.dashboard-access-tokens {
+ display: grid;
+ grid-template-rows: auto 1fr;
+ margin: $s-80 auto $s-120 auto;
+ gap: $s-32;
width: $s-800;
- svg {
- width: $s-12;
- height: $s-12;
- fill: $df-primary;
- }
}
-.table-header {
- color: $df-secondary;
+// hero
+.access-tokens-hero {
display: grid;
- font-size: $fs-12;
- grid-template-columns: 43% 1fr $s-108 $s-12;
- height: $s-40;
+ grid-template-rows: auto auto 1fr;
+ gap: $s-32;
+ width: $s-500;
+ font-size: $fs-14;
+ margin: $s-16 auto 0 auto;
+}
+
+.hero-title {
+ @include bigTitleTipography;
+ color: var(--title-foreground-color-hover);
+}
+
+.hero-desc {
+ color: var(--title-foreground-color);
+ margin-bottom: 0;
+ font-size: $fs-14;
+}
+
+.hero-btn {
+ @extend .button-primary;
+}
+
+// table empty
+.access-tokens-empty {
+ display: grid;
+ place-items: center;
+ align-content: center;
+ height: $s-156;
max-width: $s-1000;
- padding: 0 $s-16;
- text-transform: uppercase;
width: 100%;
+ padding: $s-32;
+ border: $s-1 solid var(--panel-border-color);
+ border-radius: $br-8;
+ color: var(--dashboard-list-text-foreground-color);
+}
+
+// Access tokens table
+.dashboard-table {
+ height: fit-content;
}
.table-rows {
- color: $db-secondary;
- display: flex;
- flex-direction: column;
- margin-top: $s-16;
- max-width: $s-1000;
- padding-top: 0;
+ display: grid;
+ grid-auto-rows: $s-64;
+ gap: $s-16;
width: 100%;
+ height: 100%;
+ max-width: $s-1000;
+ margin-top: $s-16;
+ color: var(--title-foreground-color);
}
.table-row {
- align-items: center;
- background-color: $db-tertiary;
- border-radius: $br-8;
- color: $df-primary;
display: grid;
- font-size: $fs-14;
- grid-template-columns: 1fr 43% $s-12;
- height: fit-content;
- min-height: $s-40;
+ grid-template-columns: 43% 1fr auto;
+ align-items: center;
+ height: $s-64;
+ width: 100%;
padding: 0 $s-16;
- width: 100%;
-
- &:not(:first-child) {
- margin-top: $s-8;
- }
-}
-
-.table-field {
- display: flex;
- align-items: center;
-
- .icon {
- padding-left: $s-12;
- cursor: pointer;
- }
-
- &.name {
- -webkit-box-orient: vertical;
- -webkit-line-clamp: 2;
- color: $df-primary;
- display: -webkit-box;
- max-width: $s-480;
- overflow: hidden;
- text-overflow: ellipsis;
- }
-
- &.expiration-date {
- color: $df-secondary;
- font-size: $fs-14;
-
- .content {
- padding: $s-2 $s-6;
- &.expired {
- background-color: var(--status-color-warning-500);
- border-radius: $br-4;
- color: $db-secondary;
- }
- }
- }
- &.access-token-created {
- word-break: break-all;
- }
-
- &.actions {
- position: relative;
- }
-}
-
-.dashboard-access-tokens {
- display: flex;
- flex-direction: column;
- margin-left: $s-120;
- margin-top: $s-80;
- width: $s-800;
-}
-
-.access-tokens-hero-container {
- background-color: transparent;
- display: flex;
- flex-direction: column;
- max-width: $s-1000;
- width: 100%;
-}
-
-.access-tokens-hero {
- display: flex;
- flex-direction: column;
- font-size: $fs-14;
- gap: $s-32;
- justify-content: space-between;
- width: $s-468;
-
- .desc {
- background-color: transparent;
- color: $df-secondary;
- width: 100%;
-
- h2 {
- color: $df-primary;
- font-size: $fs-24;
- font-weight: regular;
- margin-bottom: $s-32;
- }
- p {
- color: $df-secondary;
- margin-bottom: 0;
- font-size: $fs-14;
- }
- }
- .btn-primary {
- flex-shrink: 0;
- }
-}
-
-.access-tokens-empty {
- align-items: center;
border-radius: $br-8;
- border: $s-1 solid $db-quaternary;
- color: $df-secondary;
- display: flex;
- flex-direction: column;
- font-size: $fs-14;
- justify-content: center;
- margin-top: $s-32;
- max-width: $s-1000;
- min-height: $s-136;
- padding: $s-32;
- text-align: center;
- width: $s-468;
+ background-color: var(--dashboard-list-background-color);
+ color: var(--dashboard-list-foreground-color);
}
-.btn-primary {
- @extend .button-primary;
- height: $s-32;
+.field-name {
+ @include textEllipsis;
+ display: grid;
+ width: 43%;
+ min-width: $s-300;
}
+.expiration-date {
+ @include flexCenter;
+ min-width: $s-76;
+ width: fit-content;
+ height: $s-24;
+ border-radius: $br-8;
+ color: var(--dashboard-list-text-foreground-color);
+}
+
+.expired {
+ @include headlineSmallTypography;
+ padding: 0 $s-6;
+ color: var(--pill-foreground-color);
+ background-color: var(--status-widget-background-color-warning);
+}
+
+.actions {
+ position: relative;
+}
+.menu-icon {
+ @extend .button-icon;
+ stroke: var(--icon-foreground);
+}
+
+.menu-btn {
+ @include buttonStyle;
+}
+
+// Create access token modal
.modal-overlay {
@extend .modal-overlay-base;
}
@@ -179,13 +129,14 @@
.modal-header {
margin-bottom: $s-24;
- .modal-title {
- @include uppercaseTitleTipography;
- color: var(--modal-title-foreground-color);
- }
- .modal-close-btn {
- @extend .modal-close-btn-base;
- }
+}
+
+.modal-title {
+ @include uppercaseTitleTipography;
+ color: var(--modal-title-foreground-color);
+}
+.modal-close-btn {
+ @extend .modal-close-btn-base;
}
.modal-content {
@@ -195,10 +146,6 @@
margin-bottom: $s-24;
}
-.fields-row {
- @include flexColumn;
-}
-
.select-title {
@include bodySmallTypography;
color: var(--modal-title-foreground-color);
@@ -232,9 +179,10 @@
@extend .button-secondary;
height: $s-28;
width: $s-28;
- svg {
- @extend .button-icon-small;
- }
+}
+
+.clipboard-icon {
+ @extend .button-icon-small;
}
.token-created-info {
diff --git a/frontend/src/app/main/ui/settings/change_email.cljs b/frontend/src/app/main/ui/settings/change_email.cljs
index 64805a1b7..5543f7d18 100644
--- a/frontend/src/app/main/ui/settings/change_email.cljs
+++ b/frontend/src/app/main/ui/settings/change_email.cljs
@@ -107,7 +107,7 @@
:data-test "change-email-title"}
(tr "modals.change-email.title")]
[:button {:class (stl/css :modal-close-btn)
- :on-click on-close} i/close-refactor]]
+ :on-click on-close} i/close]]
[:div {:class (stl/css :modal-content)}
[:& context-notification
diff --git a/frontend/src/app/main/ui/settings/delete_account.cljs b/frontend/src/app/main/ui/settings/delete_account.cljs
index d6803b215..384907dfe 100644
--- a/frontend/src/app/main/ui/settings/delete_account.cljs
+++ b/frontend/src/app/main/ui/settings/delete_account.cljs
@@ -44,7 +44,7 @@
[:h2 {:class (stl/css :modal-title)} (tr "modals.delete-account.title")]
[:button {:class (stl/css :modal-close-btn)
- :on-click on-close} i/close-refactor]]
+ :on-click on-close} i/close]]
[:div {:class (stl/css :modal-content)}
[:& context-notification
diff --git a/frontend/src/app/main/ui/settings/options.cljs b/frontend/src/app/main/ui/settings/options.cljs
index efef14923..2586559bd 100644
--- a/frontend/src/app/main/ui/settings/options.cljs
+++ b/frontend/src/app/main/ui/settings/options.cljs
@@ -24,12 +24,16 @@
(s/def ::options-form
(s/keys :opt-un [::lang ::theme]))
+(defn- on-success
+ [profile]
+ (st/emit! (msg/success (tr "notifications.profile-saved"))
+ (du/profile-fetched profile)))
+
(defn- on-submit
[form _event]
(let [data (:clean-data @form)]
(st/emit! (du/update-profile data)
- (du/persist-profile)
- (msg/success (tr "notifications.profile-saved")))))
+ (du/persist-profile {:on-success on-success}))))
(mf/defc options-form
{::mf/wrap-props false}
diff --git a/frontend/src/app/main/ui/settings/sidebar.cljs b/frontend/src/app/main/ui/settings/sidebar.cljs
index 366a0df9a..c878c7b4b 100644
--- a/frontend/src/app/main/ui/settings/sidebar.cljs
+++ b/frontend/src/app/main/ui/settings/sidebar.cljs
@@ -20,6 +20,12 @@
[potok.v2.core :as ptk]
[rumext.v2 :as mf]))
+(def ^:private arrow-icon
+ (i/icon-xref :arrow (stl/css :arrow-icon)))
+
+(def ^:private feedback-icon
+ (i/icon-xref :feedback (stl/css :feedback-icon)))
+
(def ^:private go-settings-profile
#(st/emit! (rt/nav :settings-profile)))
@@ -61,43 +67,49 @@
[:div {:class (stl/css :sidebar-content)}
[:div {:class (stl/css :sidebar-content-section)}
- [:div {:class (stl/css :back-to-dashboard)
- :on-click go-dashboard}
- [:span {:class (stl/css :icon)} i/arrow-down]
- [:span {:class (stl/css :text)} (tr "labels.dashboard")]]]
+ [:button {:class (stl/css :back-to-dashboard)
+ :on-click go-dashboard}
+ arrow-icon
+ [:span {:class (stl/css :back-text)} (tr "labels.dashboard")]]]
- [:hr]
+ [:hr {:class (stl/css :sidebar-separator)}]
[:div {:class (stl/css :sidebar-content-section)}
- [:ul {:class (stl/css :sidebar-nav :no-overflow)}
- [:li {:class (when profile? (stl/css :current))
+ [:ul {:class (stl/css :sidebar-nav-settings)}
+ [:li {:class (stl/css-case :current profile?
+ :settings-item true)
:on-click go-settings-profile}
[:span {:class (stl/css :element-title)} (tr "labels.profile")]]
- [:li {:class (when password? (stl/css :current))
+ [:li {:class (stl/css-case :current password?
+ :settings-item true)
:on-click go-settings-password}
[:span {:class (stl/css :element-title)} (tr "labels.password")]]
- [:li {:class (when options? (stl/css :current))
+ [:li {:class (stl/css-case :current options?
+ :settings-item true)
:on-click go-settings-options
:data-test "settings-profile"}
[:span {:class (stl/css :element-title)} (tr "labels.settings")]]
(when (contains? cf/flags :access-tokens)
- [:li {:class (when access-tokens? (stl/css :current))
+ [:li {:class (stl/css-case :current access-tokens?
+ :settings-item true)
:on-click go-settings-access-tokens
:data-test "settings-access-tokens"}
[:span {:class (stl/css :element-title)} (tr "labels.access-tokens")]])
- [:hr]
+ [:hr {:class (stl/css :sidebar-separator)}]
- [:li {:on-click show-release-notes :data-test "release-notes"}
+ [:li {:on-click show-release-notes :data-test "release-notes"
+ :class (stl/css :settings-item)}
[:span {:class (stl/css :element-title)} (tr "labels.release-notes")]]
(when (contains? cf/flags :user-feedback)
- [:li {:class (when feedback? (stl/css :current))
+ [:li {:class (stl/css-case :current feedback?
+ :settings-item true)
:on-click go-settings-feedback}
- i/feedback-refactor
+ feedback-icon
[:span {:class (stl/css :element-title)} (tr "labels.give-feedback")]])]]]))
(mf/defc sidebar
diff --git a/frontend/src/app/main/ui/settings/sidebar.scss b/frontend/src/app/main/ui/settings/sidebar.scss
index afb7cb38f..a02745892 100644
--- a/frontend/src/app/main/ui/settings/sidebar.scss
+++ b/frontend/src/app/main/ui/settings/sidebar.scss
@@ -7,153 +7,85 @@
@use "common/refactor/common-refactor.scss" as *;
.dashboard-sidebar {
- background-color: var(--panel-background-color);
- border-right: $s-1 solid $db-quaternary;
- display: flex;
- flex-direction: column;
grid-column: 1 / span 2;
grid-row: 1 / span 2;
+ display: grid;
+ grid-template-rows: 1fr auto;
height: 100%;
- margin: 0 $s-16 0 0;
- padding: $s-16 0 0 0;
+ padding-block-start: $s-16;
+ border-right: $s-1 solid var(--panel-border-color);
z-index: $z-index-1;
+ background-color: var(--panel-background-color);
}
.sidebar-content {
- display: flex;
- flex-direction: column;
+ display: grid;
+ grid-template-rows: auto auto 1fr;
height: 100%;
- overflow-y: auto;
padding: 0;
+ overflow-y: auto;
+}
- hr {
- border-color: transparent;
- margin: $s-12 $s-16;
+.sidebar-separator {
+ border-color: transparent;
+ margin: $s-12 $s-16;
+}
+
+.sidebar-nav-settings {
+ display: grid;
+ grid-auto-rows: auto;
+ margin: 0;
+ overflow: unset;
+ user-select: none;
+}
+
+.settings-item {
+ --settings-foreground-color: var(--menu-foreground-color-rest);
+ --settings-background-color: transparent;
+ display: flex;
+ align-items: center;
+ padding: $s-8 $s-8 $s-8 $s-24;
+ color: var(--settings-foreground-color);
+ background-color: var(--settings-background-color);
+ cursor: pointer;
+
+ &:hover {
+ --settings-foreground-color: var(--sidebar-element-foreground-color-hover);
+ --settings-background-color: var(--sidebar-element-background-color-hover);
+ }
+
+ &.current {
+ --settings-foreground-color: var(--sidebar-element-foreground-color-selected);
+ --settings-background-color: var(--sidebar-element-background-color-selected);
}
}
-.sidebar-nav {
- display: flex;
- flex-direction: column;
- margin: 0;
- overflow-y: auto;
- user-select: none;
+.feedback-icon {
+ @extend .button-icon-small;
+ stroke: var(--settings-foreground-color);
+ margin-right: $s-8;
+}
- &.no-overflow {
- overflow: unset;
- }
-
- li {
- align-items: center;
- cursor: pointer;
- display: flex;
- flex-shrink: 0;
- padding: $s-8 $s-8 $s-8 $s-24;
- color: $df-secondary;
-
- a {
- font-weight: $fw400;
- width: 100%;
- &:hover {
- text-decoration: none;
- }
- }
-
- svg {
- stroke: currentColor;
- fill: none;
- margin-right: $s-8;
- height: $s-12;
- width: $s-12;
- }
-
- span {
- font-size: $fs-14;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- }
-
- &::before {
- display: none;
- background-color: transparent;
- border-radius: $br-4;
- content: "";
- height: $s-24;
- margin-right: $s-8;
- width: $s-4;
- }
-
- &.recent-projects {
- svg {
- fill: $df-primary;
- }
- }
-
- & .edit-wrapper {
- border: $s-1 solid $df-primary;
- border-radius: $br-4;
- display: flex;
- width: 100%;
- }
-
- input.element-title {
- border: 0;
- height: $s-32;
- padding: $s-6;
- margin: 0;
- width: 100%;
- background-color: $df-primary;
- }
-
- .element-subtitle {
- color: $df-secondary;
- font-style: italic;
- }
-
- &:hover {
- background-color: $db-quaternary;
- &::before {
- background-color: $df-primary;
- }
- }
-
- &.current {
- background-color: $db-quaternary;
- color: $da-primary;
-
- a {
- font-weight: $fw400;
- color: currentColor;
- }
-
- &::before {
- background-color: $da-tertiary;
- }
- }
- }
+.element-title {
+ @include textEllipsis;
+ @include bodyMediumTypography;
}
.back-to-dashboard {
+ @include buttonStyle;
+ display: flex;
+ align-items: center;
padding: $s-12 $s-16;
font-size: $fs-14;
- cursor: pointer;
- display: flex;
-
- .icon {
- display: flex;
- align-items: center;
- margin-right: $s-12;
- }
-
- .text {
- color: $df-primary;
- }
-
- svg {
- fill: $df-secondary;
- transform: rotate(90deg);
- width: $s-12;
- height: $s-12;
- }
+}
+
+.back-text {
+ color: $df-primary;
+}
+
+.arrow-icon {
+ @extend .button-icon;
+ stroke: var(--icon-foreground);
+ transform: rotate(180deg);
+ margin-right: $s-12;
}
diff --git a/frontend/src/app/main/ui/shapes/attrs.cljs b/frontend/src/app/main/ui/shapes/attrs.cljs
index 43fb21123..5c148d26d 100644
--- a/frontend/src/app/main/ui/shapes/attrs.cljs
+++ b/frontend/src/app/main/ui/shapes/attrs.cljs
@@ -148,17 +148,6 @@
attrs))
-(defn add-layer-styles!
- [props shape]
- (let [opacity (:opacity shape)]
- (if (some? opacity)
- (obj/set! props "opacity" opacity)
- props)))
-
-(defn get-layer-styles
- [shape]
- (add-layer-styles! #js {} shape))
-
(defn get-svg-props
[shape render-id]
(let [attrs (get shape :svg-attrs {})
@@ -195,8 +184,7 @@
style (-> (obj/get props "style")
(obj/clone)
- (obj/merge! svg-styles)
- (add-layer-styles! shape))
+ (obj/merge! svg-styles))
url-fill? (or ^boolean (some? (:fill-image shape))
^boolean (cfh/image-shape? shape)
diff --git a/frontend/src/app/main/ui/shapes/custom_stroke.cljs b/frontend/src/app/main/ui/shapes/custom_stroke.cljs
index e855405a1..43c9d607a 100644
--- a/frontend/src/app/main/ui/shapes/custom_stroke.cljs
+++ b/frontend/src/app/main/ui/shapes/custom_stroke.cljs
@@ -476,8 +476,7 @@
svg-attrs (attrs/get-svg-props shape render-id)
style (-> (obj/get props "style")
- (obj/clone)
- (attrs/add-layer-styles! shape))
+ (obj/clone))
props (mf/spread-props svg-attrs
{:id stroke-id
diff --git a/frontend/src/app/main/ui/shapes/filters.cljs b/frontend/src/app/main/ui/shapes/filters.cljs
index 8ac7a15af..f7ff505db 100644
--- a/frontend/src/app/main/ui/shapes/filters.cljs
+++ b/frontend/src/app/main/ui/shapes/filters.cljs
@@ -45,6 +45,12 @@
:in "SourceAlpha"
:result filter-id}])
+ (when (< spread 0)
+ [:feMorphology {:radius (- spread)
+ :operator "erode"
+ :in "SourceAlpha"
+ :result filter-id}])
+
[:feOffset {:dx offset-x :dy offset-y}]
[:feGaussianBlur {:stdDeviation (/ blur 2)}]
[:& color-matrix {:color color}]
diff --git a/frontend/src/app/main/ui/shapes/frame.cljs b/frontend/src/app/main/ui/shapes/frame.cljs
index 705ce3233..970e1ce7f 100644
--- a/frontend/src/app/main/ui/shapes/frame.cljs
+++ b/frontend/src/app/main/ui/shapes/frame.cljs
@@ -69,6 +69,7 @@
y (dm/get-prop shape :y)
w (dm/get-prop shape :width)
h (dm/get-prop shape :height)
+ opacity (dm/get-prop shape :opacity)
transform (gsh/transform-str shape)
show-content? (get shape :show-content)
@@ -92,7 +93,8 @@
;; transparent). It may have been changed to default black
;; if a shape coming from an imported SVG file is
;; rendered. See main.ui.shapes.attrs/add-style-attrs.
- :fill "none"}
+ :fill "none"
+ :opacity opacity}
[:& shape-fills {:shape shape}
(if ^boolean path?
@@ -168,10 +170,10 @@
childs (unchecked-get props "childs")
childs (cond-> childs
(ctl/any-layout? shape)
- (cfh/sort-layout-children-z-index))]
+ (ctl/sort-layout-children-z-index))]
[:> frame-container props
- [:g.frame-children {:opacity (:opacity shape)}
+ [:g.frame-children
(for [item childs]
(let [id (dm/get-prop item :id)]
(when (some? id)
diff --git a/frontend/src/app/main/ui/shapes/shape.cljs b/frontend/src/app/main/ui/shapes/shape.cljs
index 39e13482d..47b32bf52 100644
--- a/frontend/src/app/main/ui/shapes/shape.cljs
+++ b/frontend/src/app/main/ui/shapes/shape.cljs
@@ -70,6 +70,8 @@
filter-id (dm/str "filter-" render-id)
styles (-> (obj/create)
(obj/set! "pointerEvents" pointer-events)
+ (cond-> (not (cfh/frame-shape? shape))
+ (obj/set! "opacity" (:opacity shape)))
(cond-> (and blend-mode (not= blend-mode :normal))
(obj/set! "mixBlendMode" (d/name blend-mode))))
diff --git a/frontend/src/app/main/ui/shapes/text/fo_text.cljs b/frontend/src/app/main/ui/shapes/text/fo_text.cljs
index 8e2b1e528..1f7836cc0 100644
--- a/frontend/src/app/main/ui/shapes/text/fo_text.cljs
+++ b/frontend/src/app/main/ui/shapes/text/fo_text.cljs
@@ -8,8 +8,8 @@
(:require
[app.common.colors :as cc]
[app.common.data :as d]
+ [app.common.data.macros :as dm]
[app.common.geom.shapes :as gsh]
- [app.main.ui.shapes.attrs :as attrs]
[app.main.ui.shapes.text.styles :as sts]
[app.util.object :as obj]
[cuerdas.core :as str]
@@ -169,16 +169,16 @@
[colors color-mapping color-mapping-inverse]))
(mf/defc text-shape
- {::mf/wrap-props false
+ {::mf/props :obj
::mf/forward-ref true}
- [props ref]
- (let [shape (obj/get props "shape")
- transform (gsh/transform-str shape)
-
- {:keys [id x y width height content]} shape
- grow-type (obj/get props "grow-type") ;; This is only needed in workspace
- ;; We add 8px to add a padding for the exporter
- ;; width (+ width 8)
+ [{:keys [shape grow-type]} ref]
+ (let [transform (gsh/transform-str shape)
+ id (dm/get-prop shape :id)
+ x (dm/get-prop shape :x)
+ y (dm/get-prop shape :y)
+ width (dm/get-prop shape :width)
+ height (dm/get-prop shape :height)
+ content (get shape :content)
[colors _color-mapping color-mapping-inverse] (retrieve-colors shape)]
@@ -186,12 +186,11 @@
{:x x
:y y
:id id
- :data-colors (->> colors (str/join ","))
+ :data-colors (str/join "," colors)
:data-mapping (-> color-mapping-inverse clj->js js/JSON.stringify)
:transform transform
:width (if (#{:auto-width} grow-type) 100000 width)
:height (if (#{:auto-height :auto-width} grow-type) 100000 height)
- :style (attrs/get-layer-styles shape)
:ref ref}
;; We use a class here because react has a bug that won't use the appropriate selector for
;; `background-clip`
diff --git a/frontend/src/app/main/ui/viewer.cljs b/frontend/src/app/main/ui/viewer.cljs
index 22137758a..60480d5f6 100644
--- a/frontend/src/app/main/ui/viewer.cljs
+++ b/frontend/src/app/main/ui/viewer.cljs
@@ -100,18 +100,18 @@
[:button {:class (stl/css-case :viewer-go-prev true
:left-bar left-bar)
:on-click go-prev-frame}
- i/arrow-refactor])
+ i/arrow])
(when (< (+ index 1) num-frames)
[:button {:class (stl/css-case :viewer-go-next true
:comment-sidebar comment-sidebar
:right-bar right-bar)
:on-click go-next-frame}
- i/arrow-refactor])
+ i/arrow])
[:div {:class (stl/css-case :viewer-bottom true
:left-bar left-bar)}
[:button {:on-click go-first-frame
:class (stl/css :reset-button)}
- i/reload-refactor]
+ i/reload]
[:span {:class (stl/css :counter)}
(str/join " / " [(+ index 1) num-frames])]
[:span]]]))
diff --git a/frontend/src/app/main/ui/viewer/comments.cljs b/frontend/src/app/main/ui/viewer/comments.cljs
index 55b59e40d..c5677e0fb 100644
--- a/frontend/src/app/main/ui/viewer/comments.cljs
+++ b/frontend/src/app/main/ui/viewer/comments.cljs
@@ -67,7 +67,7 @@
[:div {:class (stl/css :view-options)
:on-click toggle-dropdown}
[:span {:class (stl/css :dropdown-title)} (tr "labels.comments")]
- [:span {:class (stl/css :icon-dropdown)} i/arrow-refactor]
+ [:span {:class (stl/css :icon-dropdown)} i/arrow]
[:& dropdown {:show @show-dropdown?
:on-close hide-dropdown}
@@ -80,7 +80,7 @@
:on-click update-mode}
[:span {:class (stl/css :label)} (tr "labels.show-all-comments")]
(when (or (= :all cmode) (nil? cmode))
- [:span {:class (stl/css :icon)} i/tick-refactor])]
+ [:span {:class (stl/css :icon)} i/tick])]
[:li {:class (stl/css-case
:dropdown-element true
@@ -90,7 +90,7 @@
[:span {:class (stl/css :label)} (tr "labels.show-your-comments")]
(when (= :yours cmode)
[:span {:class (stl/css :icon)}
- i/tick-refactor])]
+ i/tick])]
[:li {:class (stl/css :separator)}]
@@ -102,7 +102,7 @@
[:span {:class (stl/css :label)} (tr "labels.hide-resolved-comments")]
(when (= :pending cshow)
[:span {:class (stl/css :icon)}
- i/tick-refactor])]
+ i/tick])]
[:li {:class (stl/css :separator)}]
@@ -113,7 +113,7 @@
:on-click update-options}
[:span {:class (stl/css :label)} (tr "labels.show-comments-list")]
(when show-sidebar?
- [:span {:class (stl/css :icon)} i/tick-refactor])]]]]))
+ [:span {:class (stl/css :icon)} i/tick])]]]]))
(defn- update-thread-position
diff --git a/frontend/src/app/main/ui/viewer/header.cljs b/frontend/src/app/main/ui/viewer/header.cljs
index e37f0e3b9..1b1734dca 100644
--- a/frontend/src/app/main/ui/viewer/header.cljs
+++ b/frontend/src/app/main/ui/viewer/header.cljs
@@ -86,13 +86,13 @@
[:button {:class (stl/css :zoom-btn)
:on-click on-decrease}
[:span {:class (stl/css :zoom-icon)}
- i/remove-refactor]]
+ i/remove-icon]]
[:p {:class (stl/css :zoom-text)}
(fmt/format-percent zoom)]
[:button {:class (stl/css :zoom-btn)
:on-click on-increase}
[:span {:class (stl/css :zoom-icon)}
- i/add-refactor]]]
+ i/add]]]
[:button {:class (stl/css :reset-btn)
:on-click on-zoom-reset}
(tr "workspace.header.reset-zoom")]]
@@ -183,13 +183,13 @@
(when (:can-edit permissions)
[:span {:on-click go-to-workspace
:class (stl/css :edit-btn)}
- i/curve-refactor])
+ i/curve])
[:span {:title (tr "viewer.header.fullscreen")
:class (stl/css-case :fullscreen-btn true
:selected fullscreen?)
:on-click toggle-fullscreen}
- i/expand-refactor]
+ i/expand]
(when (:is-admin permissions)
[:button {:on-click open-share-dialog
@@ -238,7 +238,7 @@
:on-click open-dropdown}
[:span {:class (stl/css :breadcrumb-text)}
(dm/str file-name " / " page-name)]
- [:span {:class (stl/css :icon)} i/arrow-refactor]
+ [:span {:class (stl/css :icon)} i/arrow]
[:span "/"]
[:& dropdown {:show @show-dropdown?
:on-close close-dropdown}
@@ -252,11 +252,11 @@
[:span {:class (stl/css :label)}
(get-in file [:data :pages-index id :name])]
(when (= page-id id)
- [:span {:class (stl/css :icon-check)} i/tick-refactor])])]]]
+ [:span {:class (stl/css :icon-check)} i/tick])])]]]
[:div {:class (stl/css :current-frame)
:on-click toggle-thumbnails}
[:span {:class (stl/css :frame-name)} frame-name]
- [:span {:class (stl/css :icon)} i/arrow-refactor]]]]))
+ [:span {:class (stl/css :icon)} i/arrow]]]]))
(mf/defc header
[{:keys [project file page frame zoom section permissions index interactions-mode]}]
@@ -308,7 +308,7 @@
:class (stl/css-case :mode-zone-btn true
:selected (= section :interactions))
:title (tr "viewer.header.interactions-section" (sc/get-tooltip :open-interactions))}
- i/play-refactor]
+ i/play]
(when (or (:can-edit permissions)
(= (:who-comment permissions) "all"))
@@ -317,7 +317,7 @@
:class (stl/css-case :mode-zone-btn true
:selected (= section :comments))
:title (tr "viewer.header.comments-section" (sc/get-tooltip :open-comments))}
- i/comments-refactor])
+ i/comments])
(when (or (= (:type permissions) :membership)
(and (= (:type permissions) :share-link)
@@ -326,7 +326,7 @@
:class (stl/css-case :mode-zone-btn true
:selected (= section :inspect))
:title (tr "viewer.header.inspect-section" (sc/get-tooltip :open-inspect))}
- i/code-refactor])]
+ i/code])]
[:& header-options {:section section
:permissions permissions
diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/common.cljs b/frontend/src/app/main/ui/viewer/inspect/attributes/common.cljs
index bbf5148f3..b5c26b07f 100644
--- a/frontend/src/app/main/ui/viewer/inspect/attributes/common.cljs
+++ b/frontend/src/app/main/ui/viewer/inspect/attributes/common.cljs
@@ -14,7 +14,7 @@
[app.config :as cf]
[app.main.refs :as refs]
[app.main.store :as st]
- [app.main.ui.components.color-bullet-new :as cbn]
+ [app.main.ui.components.color-bullet :as cb]
[app.main.ui.components.copy-button :refer [copy-button]]
[app.main.ui.components.select :refer [select]]
[app.main.ui.formats :as fmt]
@@ -69,8 +69,8 @@
[:div {:class (stl/css :attributes-color-row)}
[:div {:class (stl/css :bullet-wrapper)
:style #js {"--bullet-size" "16px"}}
- [:& cbn/color-bullet {:color color
- :mini? true}]]
+ [:& cb/color-bullet {:color color
+ :mini? true}]]
[:div {:class (stl/css :format-wrapper)}
[:div {:class (stl/css :image-format)}
@@ -101,8 +101,8 @@
[:div {:class (stl/css :attributes-color-row)}
[:div {:class (stl/css :bullet-wrapper)
:style #js {"--bullet-size" "16px"}}
- [:& cbn/color-bullet {:color color
- :mini? true}]]
+ [:& cb/color-bullet {:color color
+ :mini? true}]]
[:div {:class (stl/css :format-wrapper)}
(when-not (and on-change-format (or (:gradient color) image))
@@ -125,9 +125,9 @@
[:span {:class (stl/css-case :color-value-wrapper true
:gradient-name (:gradient color))}
(if (:gradient color)
- [:& cbn/color-name {:color color :size 90}]
+ [:& cb/color-name {:color color :size 90}]
(case format
- :hex [:& cbn/color-name {:color color}]
+ :hex [:& cb/color-name {:color color}]
:rgba (let [[r g b a] (cc/hex->rgba (:color color) (:opacity color))]
(str/ffmt "%, %, %, %" r g b a))
:hsla (let [[h s l a] (cc/hex->hsla (:color color) (:opacity color))
diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/stroke.cljs b/frontend/src/app/main/ui/viewer/inspect/attributes/stroke.cljs
index e8e1ebcd3..5d5567160 100644
--- a/frontend/src/app/main/ui/viewer/inspect/attributes/stroke.cljs
+++ b/frontend/src/app/main/ui/viewer/inspect/attributes/stroke.cljs
@@ -7,18 +7,14 @@
(ns app.main.ui.viewer.inspect.attributes.stroke
(:require-macros [app.main.style :as stl])
(:require
- [app.common.data :as d]
- [app.common.data.macros :as dm]
- [app.main.ui.components.copy-button :refer [copy-button]]
[app.main.ui.components.title-bar :refer [inspect-title-bar]]
- [app.main.ui.formats :as fmt]
[app.main.ui.viewer.inspect.attributes.common :refer [color-row]]
- [app.util.code-gen.style-css-formats :as cssf]
- [app.util.code-gen.style-css-values :as cssv]
- [app.util.color :as uc]
+ [app.util.code-gen.style-css :as css]
[app.util.i18n :refer [tr]]
[rumext.v2 :as mf]))
+(def properties [:border])
+
(defn stroke->color [shape]
{:color (:stroke-color shape)
:opacity (:stroke-opacity shape)
@@ -31,30 +27,21 @@
(seq (:strokes shape)))
(mf/defc stroke-block
- [{:keys [stroke]}]
- (let [color-format (mf/use-state :hex)
- color (stroke->color stroke)]
- [:div {:class (stl/css :attributes-stroke-block)}
- (let [{:keys [stroke-style stroke-alignment]} stroke
- stroke-style (if (= stroke-style :svg) :solid stroke-style)
- stroke-alignment (or stroke-alignment :center)
- stroke-def (dm/str (fmt/format-pixels (:stroke-width stroke)) " "
- (tr (dm/str "inspect.attributes.stroke.style." (or (d/name stroke-style) "none"))) " "
- (tr (dm/str "inspect.attributes.stroke.alignment." (d/name stroke-alignment))))]
-
- [:*
- [:& color-row {:color color
- :format @color-format
- :copy-data (uc/color->background color)
- :on-change-format #(reset! color-format %)}]
-
- [:div {:class (stl/css :stroke-row)}
- [:div {:class (stl/css :global/attr-label)}
- "Border"]
- [:div {:class (stl/css :global/attr-value)}
-
- [:& copy-button {:data (cssf/format-value :border (cssv/get-stroke-data stroke))}
- [:div {:class (stl/css :button-children)} stroke-def]]]]])]))
+ {::mf/wrap-props false}
+ [{:keys [objects shape]}]
+ (let [format* (mf/use-state :hex)
+ format (deref format*)
+ color (stroke->color shape)
+ on-change
+ (mf/use-fn
+ (fn [format]
+ (reset! format* format)))]
+ [:div {:class (stl/css :attributes-fill-block)}
+ [:& color-row
+ {:color color
+ :format format
+ :on-change-format on-change
+ :copy-data (css/get-shape-properties-css objects {:strokes [shape]} properties)}]]))
(mf/defc stroke-panel
[{:keys [shapes]}]
@@ -69,4 +56,4 @@
(for [shape shapes]
(for [value (:strokes shape)]
[:& stroke-block {:key (str "stroke-color-" (:id shape) value)
- :stroke value}]))]])))
+ :shape value}]))]])))
diff --git a/frontend/src/app/main/ui/viewer/inspect/code.cljs b/frontend/src/app/main/ui/viewer/inspect/code.cljs
index 06dcdbe80..c1e5ebcd2 100644
--- a/frontend/src/app/main/ui/viewer/inspect/code.cljs
+++ b/frontend/src/app/main/ui/viewer/inspect/code.cljs
@@ -124,11 +124,11 @@
style-code
(mf/use-memo
- (mf/deps fontfaces-css style-type all-children cg/generate-style-code)
+ (mf/deps fontfaces-css style-type shapes all-children cg/generate-style-code)
(fn []
(dm/str
fontfaces-css "\n"
- (-> (cg/generate-style-code objects style-type all-children)
+ (-> (cg/generate-style-code objects style-type shapes all-children)
(cb/format-code style-type)))))
markup-code
@@ -256,7 +256,7 @@
[:span {:class (stl/css-case
:collapsabled-icon true
:rotated collapsed-css?)}
- i/arrow-refactor]]
+ i/arrow]]
[:div {:class (stl/css :code-lang-option)}
"CSS"]
@@ -269,7 +269,7 @@
[:div {:class (stl/css :action-btns)}
[:button {:class (stl/css :expand-button)
:on-click on-expand}
- i/code-refactor]
+ i/code]
[:& copy-button {:data copy-css-fn
:class (stl/css :css-copy-btn)
@@ -295,7 +295,7 @@
[:span {:class (stl/css-case
:collapsabled-icon true
:rotated collapsed-markup?)}
- i/arrow-refactor]]
+ i/arrow]]
[:& radio-buttons {:selected markup-type
:on-change set-markup
@@ -310,7 +310,7 @@
[:div {:class (stl/css :action-btns)}
[:button {:class (stl/css :expand-button)
:on-click on-expand}
- i/code-refactor]
+ i/code]
[:& copy-button {:data copy-html-fn
:class (stl/css :html-copy-btn)
diff --git a/frontend/src/app/main/ui/viewer/inspect/exports.cljs b/frontend/src/app/main/ui/viewer/inspect/exports.cljs
index 8e41f4a2f..392b6d8cd 100644
--- a/frontend/src/app/main/ui/viewer/inspect/exports.cljs
+++ b/frontend/src/app/main/ui/viewer/inspect/exports.cljs
@@ -139,7 +139,7 @@
:title (tr "workspace.options.export")
:class (stl/css :title-spacing-export-viewer)}
[:button {:class (stl/css :add-export)
- :on-click add-export} i/add-refactor]]]
+ :on-click add-export} i/add]]]
(cond
(= :multiple exports)
@@ -148,7 +148,7 @@
[:div {:class (stl/css :actions)}
[:button {:class (stl/css :action-btn)
:on-click ()}
- i/remove-refactor]]]
+ i/remove-icon]]]
(seq @exports)
[:div {:class (stl/css :element-set-content)}
@@ -182,7 +182,7 @@
[:button {:class (stl/css :action-btn)
:on-click (partial delete-export index)}
- i/remove-refactor]])])
+ i/remove-icon]])])
(when (or (= :multiple exports) (seq @exports))
[:button
{:on-click (when-not in-progress? on-download)
diff --git a/frontend/src/app/main/ui/viewer/inspect/right_sidebar.cljs b/frontend/src/app/main/ui/viewer/inspect/right_sidebar.cljs
index 1ab908b04..c90ab718a 100644
--- a/frontend/src/app/main/ui/viewer/inspect/right_sidebar.cljs
+++ b/frontend/src/app/main/ui/viewer/inspect/right_sidebar.cljs
@@ -10,7 +10,7 @@
[app.common.data.macros :as dm]
[app.common.types.component :as ctk]
[app.main.refs :as refs]
- [app.main.ui.components.shape-icon-refactor :as sir]
+ [app.main.ui.components.shape-icon :as sir]
[app.main.ui.components.tab-container :refer [tab-container tab-element]]
[app.main.ui.icons :as i]
[app.main.ui.viewer.inspect.attributes :refer [attributes]]
@@ -89,11 +89,11 @@
[:div {:class (stl/css :shape-row)}
(if (> (count shapes) 1)
[:*
- [:span {:class (stl/css :layers-icon)} i/layers-refactor]
+ [:span {:class (stl/css :layers-icon)} i/layers]
[:span {:class (stl/css :layer-title)} (tr "inspect.tabs.code.selected.multiple" (count shapes))]]
[:*
[:span {:class (stl/css :shape-icon)}
- [:& sir/element-icon-refactor {:shape first-shape :main-instance? main-instance?}]]
+ [:& sir/element-icon {:shape first-shape :main-instance? main-instance?}]]
;; Execution time translation strings:
;; inspect.tabs.code.selected.circle
;; inspect.tabs.code.selected.component
@@ -130,12 +130,12 @@
[:div {:class (stl/css :empty)}
[:div {:class (stl/css :code-info)}
[:span {:class (stl/css :placeholder-icon)}
- i/code-refactor]
+ i/code]
[:span {:class (stl/css :placeholder-label)}
(tr "inspect.empty.select")]]
[:div {:class (stl/css :help-info)}
[:span {:class (stl/css :placeholder-icon)}
- i/help-refactor]
+ i/help]
[:span {:class (stl/css :placeholder-label)}
(tr "inspect.empty.help")]]
[:button {:class (stl/css :more-info-btn)
diff --git a/frontend/src/app/main/ui/viewer/interactions.cljs b/frontend/src/app/main/ui/viewer/interactions.cljs
index dc4f30ef1..9fc794f60 100644
--- a/frontend/src/app/main/ui/viewer/interactions.cljs
+++ b/frontend/src/app/main/ui/viewer/interactions.cljs
@@ -41,7 +41,7 @@
(defn get-fixed-ids
[objects]
- (let [fixed-ids (filter :fixed-scroll (vals objects))
+ (let [fixed-ids (filter cfh/fixed-scroll? (vals objects))
;; we have to consider the children if the fixed element is a group
fixed-children-ids
@@ -246,9 +246,9 @@
(when (seq flows)
[:div {:on-click toggle-dropdown
:class (stl/css :view-options)}
- [:span {:class (stl/css :icon)} i/play-refactor]
+ [:span {:class (stl/css :icon)} i/play]
[:span {:class (stl/css :dropdown-title)} (:name current-flow)]
- [:span {:class (stl/css :icon-dropdown)} i/arrow-refactor]
+ [:span {:class (stl/css :icon-dropdown)} i/arrow]
[:& dropdown {:show show-dropdown?
:on-close hide-dropdown}
[:ul {:class (stl/css :dropdown)}
@@ -261,7 +261,7 @@
:on-click select-flow}
[:span {:class (stl/css :label)} (:name flow)]
(when (= (:id flow) (:id current-flow))
- [:span {:class (stl/css :icon)} i/tick-refactor])])]]])))
+ [:span {:class (stl/css :icon)} i/tick])])]]])))
(mf/defc interactions-menu
[{:keys [interactions-mode]}]
@@ -280,7 +280,7 @@
[:div {:on-click toggle-dropdown
:class (stl/css :view-options)}
[:span {:class (stl/css :dropdown-title)} (tr "viewer.header.interactions")]
- [:span {:class (stl/css :icon-dropdown)} i/arrow-refactor]
+ [:span {:class (stl/css :icon-dropdown)} i/arrow]
[:& dropdown {:show @show-dropdown?
:on-close hide-dropdown}
[:ul {:class (stl/css :dropdown)}
@@ -291,7 +291,7 @@
[:span {:class (stl/css :label)} (tr "viewer.header.dont-show-interactions")]
(when (= interactions-mode :hide)
- [:span {:class (stl/css :icon)} i/tick-refactor])]
+ [:span {:class (stl/css :icon)} i/tick])]
[:li {:class (stl/css-case :dropdown-element true
:selected (= interactions-mode :show))
@@ -299,7 +299,7 @@
:data-mode "show"}
[:span {:class (stl/css :label)} (tr "viewer.header.show-interactions")]
(when (= interactions-mode :show)
- [:span {:class (stl/css :icon)} i/tick-refactor])]
+ [:span {:class (stl/css :icon)} i/tick])]
@@ -310,24 +310,43 @@
[:span {:class (stl/css :label)} (tr "viewer.header.show-interactions-on-click")]
(when (= interactions-mode :show-on-click)
- [:span {:class (stl/css :icon)} i/tick-refactor])]]]]))
+ [:span {:class (stl/css :icon)} i/tick])]]]]))
(defn animate-go-to-frame
[animation current-viewport orig-viewport current-size orig-size wrapper-size]
(case (:animation-type animation)
+ ;; Why use three keyframes instead of two?
+ ;; If we use two keyframes, the first frame
+ ;; will disappear while the second frame
+ ;; is still appearing.
+ ;; ___ ___
+ ;; \/
+ ;; ___/\___
+ ;; ^ in here we have 50% opacity of both frames so the background
+ ;; is visible.
+ ;;
+ ;; This solution waits until the second frame
+ ;; has appeared to disappear the first one.
+ ;; ________
+ ;; /\
+ ;; _/ \___
+ ;; ^ in here we have 100% opacity of the first frame and 0% opacity.
:dissolve
(do (dom/animate! orig-viewport
[#js {:opacity "100%"}
- #js {:opacity "0"}]
- #js {:duration (:duration animation)
- :easing (name (:easing animation))}
- #(st/emit! (dv/complete-animation)))
+ #js {:opacity "0%"}
+ #js {:opacity "0%"}]
+ #js {:delay (/ (:duration animation) 3)
+ :duration (/ (* 2 (:duration animation)) 3)
+ :easing (name (:easing animation))})
(dom/animate! current-viewport
- [#js {:opacity "0"}
+ [#js {:opacity "0%"}
+ #js {:opacity "100%"}
#js {:opacity "100%"}]
#js {:duration (:duration animation)
- :easing (name (:easing animation))}))
+ :easing (name (:easing animation))}
+ #(st/emit! (dv/complete-animation))))
:slide
(case (:way animation)
diff --git a/frontend/src/app/main/ui/viewer/login.cljs b/frontend/src/app/main/ui/viewer/login.cljs
index afec5e502..a4f2c2f65 100644
--- a/frontend/src/app/main/ui/viewer/login.cljs
+++ b/frontend/src/app/main/ui/viewer/login.cljs
@@ -75,7 +75,7 @@
[:h2 {:class (stl/css :modal-title)} (tr "labels.continue-with-penpot")]
[:button {:class (stl/css :modal-close-btn)
:title (tr "labels.close")
- :on-click close} i/close-refactor]]
+ :on-click close} i/close]]
[:div {:class (stl/css :modal-content)}
diff --git a/frontend/src/app/main/ui/viewer/shapes.cljs b/frontend/src/app/main/ui/viewer/shapes.cljs
index 6a739d320..5832f28ce 100644
--- a/frontend/src/app/main/ui/viewer/shapes.cljs
+++ b/frontend/src/app/main/ui/viewer/shapes.cljs
@@ -265,8 +265,7 @@
(mf/defc interaction
[{:keys [shape interactions interactions-show?]}]
- (let [{:keys [x y width height]} (:selrect shape)
- frame? (= :frame (:type shape))]
+ (let [{:keys [x y width height]} (:selrect shape)]
(when-not (empty? interactions)
[:rect {:x (- x 1)
:y (- y 1)
@@ -276,7 +275,6 @@
:stroke "var(--color-accent-tertiary)"
:stroke-width (if interactions-show? 1 0)
:fill-opacity (if interactions-show? 0.2 0)
- :style {:pointer-events (when frame? "none")}
:transform (gsh/transform-str shape)}])))
diff --git a/frontend/src/app/main/ui/viewer/share_link.cljs b/frontend/src/app/main/ui/viewer/share_link.cljs
index a937eada3..8b08ba935 100644
--- a/frontend/src/app/main/ui/viewer/share_link.cljs
+++ b/frontend/src/app/main/ui/viewer/share_link.cljs
@@ -172,7 +172,7 @@
[:button {:class (stl/css :modal-close-button)
:on-click on-close
:title (tr "labels.close")}
- i/close-refactor]]
+ i/close]]
[:div {:class (stl/css :modal-content)}
[:div {:class (stl/css :share-link-section)}
(when (and (not confirm?) (some? current-link))
@@ -186,7 +186,7 @@
[:button {:class (stl/css :copy-button)
:title (tr "viewer.header.share.copy-link")
:on-click copy-link}
- i/clipboard-refactor]])
+ i/clipboard]])
[:div {:class (stl/css :hint-wrapper)}
(when (not ^boolean confirm?)
@@ -227,7 +227,7 @@
:on-click toggle-perms-visibility}
[:span {:class (stl/css-case :icon true
:rotated perms-visible?)}
- i/arrow-refactor]
+ i/arrow]
(tr "common.share-link.manage-ops")]
(when ^boolean perms-visible?
@@ -247,7 +247,7 @@
:class (stl/css-case :global/checked true)}
[:span {:class (stl/css :checked)}
- i/status-tick-refactor]
+ i/status-tick]
(:name current-page)]
@@ -265,7 +265,7 @@
:class (stl/css :select-all-label)}
[:span {:class (stl/css-case :global/checked all-selected?)}
(when all-selected?
- i/status-tick-refactor)]
+ i/status-tick)]
(tr "common.share-link.view-all")
[:input {:type "checkbox"
:id "view-all"
@@ -283,7 +283,7 @@
[:label {:for (dm/str "page-" id)}
[:span {:class (stl/css-case :global/checked (contains? selected id))}
(when (contains? selected id)
- i/status-tick-refactor)]
+ i/status-tick)]
name
(when (= current-page-id id)
[:div {:class (stl/css :current-tag)} (dm/str " " (tr "common.share-link.current-tag"))])
diff --git a/frontend/src/app/main/ui/viewer/thumbnails.cljs b/frontend/src/app/main/ui/viewer/thumbnails.cljs
index 22cead07f..7da49dfab 100644
--- a/frontend/src/app/main/ui/viewer/thumbnails.cljs
+++ b/frontend/src/app/main/ui/viewer/thumbnails.cljs
@@ -62,9 +62,9 @@
[:div {:class (stl/css :thumbnails-content)}
[:button {:class (stl/css :left-scroll-handler)
- :on-click on-left-arrow-click} i/arrow-refactor]
+ :on-click on-left-arrow-click} i/arrow]
[:button {:class (stl/css :right-scroll-handler)
- :on-click on-right-arrow-click} i/arrow-refactor]
+ :on-click on-right-arrow-click} i/arrow]
[:div {:class (stl/css :thumbnails-list)
:ref container
@@ -80,9 +80,9 @@
(tr "labels.num-of-frames" (i18n/c total))]
[:span {:class (stl/css :actions)}
[:button {:class (stl/css :expand-btn)
- :on-click on-toggle-expand} i/arrow-refactor]
+ :on-click on-toggle-expand} i/arrow]
[:button {:class (stl/css :close-btn)
- :on-click on-close} i/close-refactor]]])
+ :on-click on-close} i/close]]])
(mf/defc thumbnail-item
{::mf/wrap [mf/memo
diff --git a/frontend/src/app/main/ui/workspace/color_palette.cljs b/frontend/src/app/main/ui/workspace/color_palette.cljs
index b07848671..b48eb89dc 100644
--- a/frontend/src/app/main/ui/workspace/color_palette.cljs
+++ b/frontend/src/app/main/ui/workspace/color_palette.cljs
@@ -11,7 +11,7 @@
[app.main.data.workspace.colors :as mdc]
[app.main.refs :as refs]
[app.main.store :as st]
- [app.main.ui.components.color-bullet-new :as cb]
+ [app.main.ui.components.color-bullet :as cb]
[app.main.ui.hooks :as h]
[app.main.ui.icons :as i]
[app.util.color :as uc]
@@ -108,7 +108,7 @@
(when show-arrows?
[:button {:class (stl/css :left-arrow)
:disabled (= offset 0)
- :on-click on-left-arrow-click} i/arrow-refactor])
+ :on-click on-left-arrow-click} i/arrow])
[:div {:class (stl/css :color-palette-content)
:ref container
:on-wheel on-scroll}
@@ -128,7 +128,7 @@
(when show-arrows?
[:button {:class (stl/css :right-arrow)
:disabled (= offset max-offset)
- :on-click on-right-arrow-click} i/arrow-refactor])]))
+ :on-click on-right-arrow-click} i/arrow])]))
(defn library->colors [shared-libs selected]
(map #(merge % {:file-id selected})
diff --git a/frontend/src/app/main/ui/workspace/color_palette.scss b/frontend/src/app/main/ui/workspace/color_palette.scss
index dfe3e8229..4815dee3e 100644
--- a/frontend/src/app/main/ui/workspace/color_palette.scss
+++ b/frontend/src/app/main/ui/workspace/color_palette.scss
@@ -19,7 +19,7 @@
height: 100%;
width: $s-24;
padding: 0;
- z-index: $z-index-4;
+ z-index: $z-index-5;
svg {
@extend .button-icon;
stroke: var(--icon-foreground);
diff --git a/frontend/src/app/main/ui/workspace/color_palette_ctx_menu.cljs b/frontend/src/app/main/ui/workspace/color_palette_ctx_menu.cljs
index 72be7f0a8..17dbb9450 100644
--- a/frontend/src/app/main/ui/workspace/color_palette_ctx_menu.cljs
+++ b/frontend/src/app/main/ui/workspace/color_palette_ctx_menu.cljs
@@ -9,7 +9,7 @@
(:require
[app.common.data.macros :as dm]
[app.main.refs :as refs]
- [app.main.ui.components.color-bullet-new :as cb]
+ [app.main.ui.components.color-bullet :as cb]
[app.main.ui.components.dropdown :refer [dropdown]]
[app.main.ui.icons :as i]
[app.util.i18n :refer [tr]]
@@ -39,7 +39,7 @@
(dm/str "(" (count colors) ")")]]
(when (= selected id)
[:span {:class (stl/css :icon-wrapper)}
- i/tick-refactor])]
+ i/tick])]
[:div {:class (stl/css :color-sample)
:style #js {"--bullet-size" "20px"}}
(for [[i {:keys [color id gradient]}] (map-indexed vector (take 7 colors))]
@@ -63,7 +63,7 @@
(when (= selected :file)
[:span {:class (stl/css :icon-wrapper)}
- i/tick-refactor])]
+ i/tick])]
[:div {:class (stl/css :color-sample)
:style #js {"--bullet-size" "20px"}}
(for [[i color] (map-indexed vector (take 7 (vals file-colors)))]
@@ -85,7 +85,7 @@
(when (= selected :recent)
[:span {:class (stl/css :icon-wrapper)}
- i/tick-refactor])]
+ i/tick])]
[:div {:class (stl/css :color-sample)
:style #js {"--bullet-size" "20px"}}
(for [[idx color] (map-indexed vector (take 7 (reverse recent-colors)))]
diff --git a/frontend/src/app/main/ui/workspace/color_palette_ctx_menu.scss b/frontend/src/app/main/ui/workspace/color_palette_ctx_menu.scss
index 7b09a1ab6..920d6031b 100644
--- a/frontend/src/app/main/ui/workspace/color_palette_ctx_menu.scss
+++ b/frontend/src/app/main/ui/workspace/color_palette_ctx_menu.scss
@@ -13,7 +13,7 @@
max-width: $s-480;
padding: $s-4;
margin: 0 0 $s-4 0;
- z-index: $z-index-3;
+ z-index: $z-index-4;
border-radius: $br-10;
background-color: var(--context-menu-background-color);
diff --git a/frontend/src/app/main/ui/workspace/colorpicker.cljs b/frontend/src/app/main/ui/workspace/colorpicker.cljs
index 59af137eb..bfcb839db 100644
--- a/frontend/src/app/main/ui/workspace/colorpicker.cljs
+++ b/frontend/src/app/main/ui/workspace/colorpicker.cljs
@@ -264,7 +264,7 @@
[:button {:class (stl/css-case :picker-btn true
:selected picking-color?)
:on-click handle-click-picker}
- i/picker-refactor])]
+ i/picker])]
(when (or (= selected-mode :linear-gradient)
(= selected-mode :radial-gradient))
@@ -287,7 +287,7 @@
:class (stl/css-case :global/checked keep-aspect-ratio?)}
[:span {:class (stl/css-case :global/checked keep-aspect-ratio?)}
(when keep-aspect-ratio?
- i/status-tick-refactor)]
+ i/status-tick)]
(tr "media.keep-aspect-ratio")
[:input {:type "checkbox"
:id "keep-aspect-ratio"
@@ -312,11 +312,11 @@
:selected @active-color-tab
:collapsable false}
- [:& tab-element {:id :ramp :title i/rgba-refactor}
+ [:& tab-element {:id :ramp :title i/rgba}
(if picking-color?
[:div {:class (stl/css :picker-detail-wrapper)}
[:div {:class (stl/css :center-circle)}]
- [:canvas#picker-detail {:width 256 :height 140}]]
+ [:canvas#picker-detail {:class (stl/css :picker-detail) :width 256 :height 140}]]
[:& ramp-selector
{:color current-color
:disable-opacity disable-opacity
@@ -324,11 +324,11 @@
:on-start-drag on-start-drag
:on-finish-drag on-finish-drag}])]
- [:& tab-element {:id :harmony :title i/rgba-complementary-refactor}
+ [:& tab-element {:id :harmony :title i/rgba-complementary}
(if picking-color?
[:div {:class (stl/css :picker-detail-wrapper)}
[:div {:class (stl/css :center-circle)}]
- [:canvas#picker-detail {:width 256 :height 140}]]
+ [:canvas#picker-detail {:class (stl/css :picker-detail) :width 256 :height 140}]]
[:& harmony-selector
{:color current-color
:disable-opacity disable-opacity
@@ -336,11 +336,11 @@
:on-start-drag on-start-drag
:on-finish-drag on-finish-drag}])]
- [:& tab-element {:id :hsva :title i/hsva-refactor}
+ [:& tab-element {:id :hsva :title i/hsva}
(if picking-color?
[:div {:class (stl/css :picker-detail-wrapper)}
[:div {:class (stl/css :center-circle)}]
- [:canvas#picker-detail {:width 256 :height 140}]]
+ [:canvas#picker-detail {:class (stl/css :picker-detail) :width 256 :height 140}]]
[:& hsva-selector
{:color current-color
:disable-opacity disable-opacity
diff --git a/frontend/src/app/main/ui/workspace/colorpicker.scss b/frontend/src/app/main/ui/workspace/colorpicker.scss
index 7865e349f..cc739678d 100644
--- a/frontend/src/app/main/ui/workspace/colorpicker.scss
+++ b/frontend/src/app/main/ui/workspace/colorpicker.scss
@@ -132,6 +132,11 @@
transform: translate(calc(-1 * $s-12), calc(-1 * $s-12));
}
+.picker-detail {
+ image-rendering: crisp-edges;
+ image-rendering: pixelated;
+}
+
.select {
width: $s-116;
}
diff --git a/frontend/src/app/main/ui/workspace/colorpicker/gradients.scss b/frontend/src/app/main/ui/workspace/colorpicker/gradients.scss
index 0fe9529f2..374edaaa7 100644
--- a/frontend/src/app/main/ui/workspace/colorpicker/gradients.scss
+++ b/frontend/src/app/main/ui/workspace/colorpicker/gradients.scss
@@ -19,7 +19,7 @@
height: 100%;
width: 100%;
border-radius: $br-6;
- background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAADFJREFUOE9jZGBgEAFifOANPknGUQMYhkkYEEgG+NMJKAwIAbwJbdQABnBCIgRoG4gAIF8IsXB/Rs4AAAAASUVORK5CYII=")
+ background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAExJREFUSIljvHnz5n8GLEBNTQ2bMMOtW7ewiuNSz4RVlIpg1IKBt4Dx////WFMRqakFl/qhH0SjFhAELNRKLaNl0Qi2YLQsGrWAcgAA0gAgQPhT2rAAAAAASUVORK5CYII=")
left center;
}
diff --git a/frontend/src/app/main/ui/workspace/colorpicker/harmony.cljs b/frontend/src/app/main/ui/workspace/colorpicker/harmony.cljs
index 7ca720bd2..361a51f7e 100644
--- a/frontend/src/app/main/ui/workspace/colorpicker/harmony.cljs
+++ b/frontend/src/app/main/ui/workspace/colorpicker/harmony.cljs
@@ -8,6 +8,7 @@
(:require-macros [app.main.style :as stl])
(:require
[app.common.colors :as cc]
+ [app.common.data.macros :as dm]
[app.common.geom.point :as gpt]
[app.common.math :as mth]
[app.main.ui.workspace.colorpicker.slider-selector :refer [slider-selector]]
@@ -118,17 +119,24 @@
:h new-hue
:s saturation})))
- on-change-opacity (fn [new-alpha] (on-change {:alpha new-alpha}))]
+ on-change-opacity (fn [new-alpha] (on-change {:alpha new-alpha}))
+
+ ;; This colors are to display the value slider
+ [h1 s1 l1] (cc/hsv->hsl [hue saturation 0])
+ [h2 s2 l2] (cc/hsv->hsl [hue saturation 255])]
(mf/use-effect
(mf/deps canvas-ref)
(fn [] (when canvas-ref
(create-color-wheel (mf/ref-val canvas-ref)))))
- [:div {:class (stl/css :harmony-selector)}
+
+ [:div {:class (stl/css :harmony-selector)
+ :style {"--hue-from" (dm/str "hsl(" h1 ", " (* s1 100) "%, " (* l1 100) "%)")
+ "--hue-to" (dm/str "hsl(" h2 ", " (* s2 100) "%, " (* l2 100) "%)")}}
[:div {:class (stl/css :handlers-wrapper)}
[:& slider-selector {:type :value
:vertical? true
- :reverse? true
+ :reverse? false
:value value
:max-value 255
:vertical true
diff --git a/frontend/src/app/main/ui/workspace/colorpicker/libraries.cljs b/frontend/src/app/main/ui/workspace/colorpicker/libraries.cljs
index fe52c2e92..14e851d31 100644
--- a/frontend/src/app/main/ui/workspace/colorpicker/libraries.cljs
+++ b/frontend/src/app/main/ui/workspace/colorpicker/libraries.cljs
@@ -14,14 +14,13 @@
[app.main.data.workspace.colors :as mdc]
[app.main.refs :as refs]
[app.main.store :as st]
- [app.main.ui.components.color-bullet-new :as cb]
+ [app.main.ui.components.color-bullet :as cb]
[app.main.ui.components.select :refer [select]]
[app.main.ui.hooks :as h]
[app.main.ui.hooks.resize :as r]
[app.main.ui.icons :as i]
[app.util.dom :as dom]
[app.util.i18n :as i18n :refer [tr]]
- [app.util.timers :as ts]
[rumext.v2 :as mf]))
(mf/defc libraries
@@ -51,12 +50,13 @@
toggle-palette
(mf/use-fn
+ (mf/deps @selected)
(fn []
(r/set-resize-type! :bottom)
(dom/add-class! (dom/get-element-by-class "color-palette") "fade-out-down")
- (ts/schedule 300 #(st/emit! (dw/remove-layout-flag :textpalette)
- (-> (dw/toggle-layout-flag :colorpalette)
- (vary-meta assoc ::ev/origin "workspace-colorpicker"))))))
+ (st/emit! (dw/remove-layout-flag :textpalette)
+ (-> (mdc/show-palette @selected)
+ (vary-meta assoc ::ev/origin "workspace-colorpicker")))))
shared-libs-options (mapv (fn [lib] {:value (d/name (:id lib)) :label (:name lib)}) (vals shared-libs))
@@ -109,11 +109,11 @@
(when (= @selected :file)
[:button {:class (stl/css :add-color-btn)
:on-click on-add-library-color}
- i/add-refactor])
+ i/add])
[:button {:class (stl/css :palette-btn)
:on-click toggle-palette}
- i/swatches-refactor]
+ i/swatches]
(for [[idx color] (map-indexed vector @current-colors)]
[:& cb/color-bullet
diff --git a/frontend/src/app/main/ui/workspace/colorpicker/ramp.cljs b/frontend/src/app/main/ui/workspace/colorpicker/ramp.cljs
index 8b5ee82a3..970525d3c 100644
--- a/frontend/src/app/main/ui/workspace/colorpicker/ramp.cljs
+++ b/frontend/src/app/main/ui/workspace/colorpicker/ramp.cljs
@@ -9,7 +9,7 @@
(:require
[app.common.colors :as cc]
[app.common.math :as mth]
- [app.main.ui.components.color-bullet-new :as cb]
+ [app.main.ui.components.color-bullet :as cb]
[app.main.ui.workspace.colorpicker.slider-selector :refer [slider-selector]]
[app.util.dom :as dom]
[rumext.v2 :as mf]))
diff --git a/frontend/src/app/main/ui/workspace/colorpicker/slider_selector.scss b/frontend/src/app/main/ui/workspace/colorpicker/slider_selector.scss
index aef415df5..7de62cbef 100644
--- a/frontend/src/app/main/ui/workspace/colorpicker/slider_selector.scss
+++ b/frontend/src/app/main/ui/workspace/colorpicker/slider_selector.scss
@@ -54,12 +54,13 @@
}
&.opacity {
- background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAADFJREFUOE9jZGBgEAFifOANPknGUQMYhkkYEEgG+NMJKAwIAbwJbdQABnBCIgRoG4gAIF8IsXB/Rs4AAAAASUVORK5CYII=")
+ background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAExJREFUSIljvHnz5n8GLEBNTQ2bMMOtW7ewiuNSz4RVlIpg1IKBt4Dx////WFMRqakFl/qhH0SjFhAELNRKLaNl0Qi2YLQsGrWAcgAA0gAgQPhT2rAAAAAASUVORK5CYII=")
var(--background-repeat) center;
&::after {
content: "";
position: absolute;
+ border-radius: $br-6;
width: 100%;
height: 100%;
background: linear-gradient(
@@ -106,7 +107,7 @@
}
.slider-selector.value {
- background: linear-gradient(var(--gradient-direction), #000 0%, #fff 100%);
+ background: linear-gradient(var(--gradient-direction), var(--hue-from, #000) 0%, var(--hue-to, #fff) 100%);
}
.slider-selector.saturation {
background: linear-gradient(
diff --git a/frontend/src/app/main/ui/workspace/comments.cljs b/frontend/src/app/main/ui/workspace/comments.cljs
index d74fa287b..4ff0e1842 100644
--- a/frontend/src/app/main/ui/workspace/comments.cljs
+++ b/frontend/src/app/main/ui/workspace/comments.cljs
@@ -27,6 +27,7 @@
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
(mf/defc sidebar-options
+ {::mf/props :obj}
[{:keys [from-viewer]}]
(let [{cmode :mode cshow :show} (mf/deref refs/comments-local)
update-mode
@@ -52,21 +53,22 @@
:on-click update-mode}
[:span {:class (stl/css :label)} (tr "labels.show-all-comments")]
- [:span {:class (stl/css :icon)} i/tick-refactor]]
+ [:span {:class (stl/css :icon)} i/tick]]
[:li {:class (stl/css-case :dropdown-item true
:selected (= :yours cmode))
:data-value "yours"
:on-click update-mode}
[:span {:class (stl/css :label)} (tr "labels.show-your-comments")]
- [:span {:class (stl/css :icon)} i/tick-refactor]]
+ [:span {:class (stl/css :icon)} i/tick]]
[:li {:class (stl/css :separator)}]
[:li {:class (stl/css-case :dropdown-item true
:selected (= :pending cshow))
:on-click update-show}
[:span {:class (stl/css :label)} (tr "labels.hide-resolved-comments")]
- [:span {:class (stl/css :icon)} i/tick-refactor]]]))
+ [:span {:class (stl/css :icon)} i/tick]]]))
(mf/defc comments-sidebar
+ {::mf/props :obj}
[{:keys [users threads page-id from-viewer]}]
(let [threads-map (mf/deref refs/threads-ref)
profile (mf/deref refs/profile)
@@ -123,7 +125,7 @@
[:span (tr "labels.comments")]
[:button {:class (stl/css :close-button)
:on-click close-section}
- i/close-refactor]]
+ i/close]]
[:button {:class (stl/css :mode-dropdown-wrapper)
:on-click toggle-mode-selector}
@@ -131,7 +133,7 @@
[:span {:class (stl/css :mode-label)} (case (:mode local)
(nil :all) (tr "labels.show-all-comments")
:yours (tr "labels.show-your-comments"))]
- [:div {:class (stl/css :arrow-icon)} i/arrow-refactor]]
+ [:div {:class (stl/css :arrow-icon)} i/arrow]]
[:& dropdown {:show options?
:on-close #(reset! state* false)}
@@ -153,6 +155,6 @@
:key (:page-id tgroup)}])]
[:div {:class (stl/css :thread-group-placeholder)}
- [:span {:class (stl/css :placeholder-icon)} i/comments-refactor]
+ [:span {:class (stl/css :placeholder-icon)} i/comments]
[:span {:class (stl/css :placeholder-label)}
(tr "labels.no-comments-available")]])]]))
diff --git a/frontend/src/app/main/ui/workspace/context_menu.cljs b/frontend/src/app/main/ui/workspace/context_menu.cljs
index cf566b7af..987052774 100644
--- a/frontend/src/app/main/ui/workspace/context_menu.cljs
+++ b/frontend/src/app/main/ui/workspace/context_menu.cljs
@@ -30,7 +30,7 @@
[app.main.refs :as refs]
[app.main.store :as st]
[app.main.ui.components.dropdown :refer [dropdown]]
- [app.main.ui.components.shape-icon-refactor :as sic]
+ [app.main.ui.components.shape-icon :as sic]
[app.main.ui.icons :as i]
[app.main.ui.workspace.sidebar.assets.common :as cmm]
[app.util.dom :as dom]
@@ -96,7 +96,7 @@
[:span
{:class (stl/css :icon-wrapper)}
(if selected? [:span {:class (stl/css :selected-icon)}
- i/tick-refactor]
+ i/tick]
[:span {:class (stl/css :selected-icon)}])
[:span {:class (stl/css :shape-icon)} icon]]
[:span {:class (stl/css :title)} title]]
@@ -115,7 +115,7 @@
:class (stl/css :shortcut-key)} sc])])
(when (> (count children) 1)
- [:span {:class (stl/css :submenu-icon)} i/arrow-refactor])
+ [:span {:class (stl/css :submenu-icon)} i/arrow])
(when (> (count children) 1)
[:ul {:class (stl/css :workspace-context-submenu)
@@ -180,7 +180,7 @@
:on-pointer-enter (on-pointer-enter (:id object))
:on-pointer-leave (on-pointer-leave (:id object))
:on-unmount (on-unmount (:id object))
- :icon (sic/element-icon-refactor {:shape object})}])])
+ :icon (sic/element-icon {:shape object})}])])
[:& menu-entry {:title (tr "workspace.shape.menu.forward")
:shortcut (sc/get-tooltip :bring-forward)
:on-click do-bring-forward}]
@@ -652,17 +652,15 @@
[:& dropdown {:show (boolean mdata)
:on-close #(st/emit! dw/hide-context-menu)}
- [:ul
- {:class (stl/css :workspace-context-menu)
- :ref dropdown-ref
- :style {:top top :left left}
- :on-context-menu prevent-default}
-
- (case (:kind mdata)
- :shape [:& shape-context-menu {:mdata mdata}]
- :page [:& page-item-context-menu {:mdata mdata}]
- :grid-track [:& grid-track-context-menu {:mdata mdata}]
- :grid-cells [:& grid-cells-context-menu {:mdata mdata}]
- [:& viewport-context-menu {:mdata mdata}])]]))
-
+ [:div {:class (stl/css :workspace-context-menu)
+ :ref dropdown-ref
+ :style {:top top :left left}
+ :on-context-menu prevent-default}
+ [:ul {:class (stl/css :context-list)}
+ (case (:kind mdata)
+ :shape [:& shape-context-menu {:mdata mdata}]
+ :page [:& page-item-context-menu {:mdata mdata}]
+ :grid-track [:& grid-track-context-menu {:mdata mdata}]
+ :grid-cells [:& grid-cells-context-menu {:mdata mdata}]
+ [:& viewport-context-menu {:mdata mdata}])]]]))
diff --git a/frontend/src/app/main/ui/workspace/context_menu.scss b/frontend/src/app/main/ui/workspace/context_menu.scss
index f6d10a8ec..b7ea96aa4 100644
--- a/frontend/src/app/main/ui/workspace/context_menu.scss
+++ b/frontend/src/app/main/ui/workspace/context_menu.scss
@@ -6,20 +6,28 @@
@import "refactor/common-refactor.scss";
-.workspace-context-menu,
-.workspace-context-submenu {
- @include menuShadow;
+.workspace-context-menu {
position: absolute;
top: $s-40;
left: $s-736;
- display: flex;
- flex-direction: column;
+ z-index: $z-index-4;
+}
+
+.context-list,
+.workspace-context-submenu {
+ @include menuShadow;
+ display: grid;
width: $s-240;
padding: $s-4;
border-radius: $br-8;
border: $s-2 solid var(--panel-border-color);
background-color: var(--menu-background-color);
- z-index: $z-index-3;
+ max-height: 100vh;
+ overflow-y: auto;
+}
+
+.workspace-context-submenu {
+ position: absolute;
}
.separator {
diff --git a/frontend/src/app/main/ui/workspace/left_header.cljs b/frontend/src/app/main/ui/workspace/left_header.cljs
index 0c1cd4930..64d8e068d 100644
--- a/frontend/src/app/main/ui/workspace/left_header.cljs
+++ b/frontend/src/app/main/ui/workspace/left_header.cljs
@@ -108,7 +108,7 @@
:on-double-click start-editing-name}
file-name])]
(when ^boolean shared?
- [:span {:class (stl/css :shared-badge)} i/library-refactor])
+ [:span {:class (stl/css :shared-badge)} i/library])
[:div {:class (stl/css :menu-section)}
[:& main-menu/menu
{:layout layout
diff --git a/frontend/src/app/main/ui/workspace/left_header.scss b/frontend/src/app/main/ui/workspace/left_header.scss
index c6ebf454a..207101743 100644
--- a/frontend/src/app/main/ui/workspace/left_header.scss
+++ b/frontend/src/app/main/ui/workspace/left_header.scss
@@ -41,7 +41,6 @@
height: $s-16;
width: 100%;
padding-bottom: $s-2;
- margin-top: calc(-1 * $s-2);
color: var(--title-foreground-color);
cursor: pointer;
}
@@ -54,10 +53,10 @@
.file-name-input {
@include flexCenter;
- height: 100%;
width: 100%;
margin: 0;
border: 0;
+ padding: 0;
border-radius: $br-4;
background-color: var(--input-background-color);
font-size: $fs-14;
diff --git a/frontend/src/app/main/ui/workspace/libraries.cljs b/frontend/src/app/main/ui/workspace/libraries.cljs
index cd9032a85..564093850 100644
--- a/frontend/src/app/main/ui/workspace/libraries.cljs
+++ b/frontend/src/app/main/ui/workspace/libraries.cljs
@@ -20,7 +20,7 @@
[app.main.refs :as refs]
[app.main.render :refer [component-svg]]
[app.main.store :as st]
- [app.main.ui.components.color-bullet :as bc]
+ [app.main.ui.components.color-bullet :as cb]
[app.main.ui.components.link-button :as lb]
[app.main.ui.components.search-bar :refer [search-bar]]
[app.main.ui.components.tab-container :refer [tab-container tab-element]]
@@ -34,6 +34,18 @@
[okulary.core :as l]
[rumext.v2 :as mf]))
+(def ^:private close-icon
+ (i/icon-xref :close (stl/css :close-icon)))
+
+(def ^:private add-icon
+ (i/icon-xref :add (stl/css :add-icon)))
+
+(def ^:private detach-icon
+ (i/icon-xref :detach (stl/css :detach-icon)))
+
+(def ^:private library-icon
+ (i/icon-xref :library (stl/css :library-icon)))
+
(def ref:workspace-file
(l/derived :workspace-file st/state))
@@ -185,36 +197,35 @@
:on-cancel on-delete-cancel
:count-libraries 1}))))]
- [:*
- [:div {:class (stl/css :section)}
+ [:div {:class (stl/css :libraries-content)}
+ [:div {:class (stl/css :lib-section)}
[:& title-bar {:collapsable false
:title (tr "workspace.libraries.in-this-file")
:class (stl/css :title-spacing-lib)}]
[:div {:class (stl/css :section-list)}
[:div {:class (stl/css :section-list-item)}
- [:div
+ [:div {:class (stl/css :item-content)}
[:div {:class (stl/css :item-name)} (tr "workspace.libraries.file-library")]
[:ul {:class (stl/css :item-contents)}
[:& describe-library-blocks {:components-count (count components)
:graphics-count (count media)
:colors-count (count colors)
:typography-count (count typographies)}]]]
- [:div
- (if ^boolean shared?
- [:input {:class (stl/css :item-unpublish)
- :type "button"
- :value (tr "common.unpublish")
- :on-click unpublish}]
- [:input {:class (stl/css :item-publish)
- :type "button"
- :value (tr "common.publish")
- :on-click publish}])]]
+ (if ^boolean shared?
+ [:input {:class (stl/css :item-unpublish)
+ :type "button"
+ :value (tr "common.unpublish")
+ :on-click unpublish}]
+ [:input {:class (stl/css :item-publish)
+ :type "button"
+ :value (tr "common.publish")
+ :on-click publish}])]
(for [{:keys [id name] :as library} linked-libraries]
[:div {:class (stl/css :section-list-item)
:key (dm/str id)}
- [:div
+ [:div {:class (stl/css :item-content)}
[:div {:class (stl/css :item-name)} name]
[:ul {:class (stl/css :item-contents)}
(let [components-count (count (or (ctkl/components-seq (:data library)) []))
@@ -230,24 +241,23 @@
:type "button"
:data-library-id (dm/str id)
:on-click unlink-library}
- i/detach-refactor]])]]
+ detach-icon]])]]
- [:div {:class (stl/css :section)}
+ [:div {:class (stl/css :shared-section)}
[:& title-bar {:collapsable false
:title (tr "workspace.libraries.shared-libraries")
:class (stl/css :title-spacing-lib)}]
- [:div {:class (stl/css :libraries-search)}
- [:& search-bar {:on-change change-search-term
- :value search-term
- :placeholder (tr "workspace.libraries.search-shared-libraries")
- :icon (mf/html [:span {:class (stl/css :search-icon)} i/search-refactor])}]]
+ [:& search-bar {:on-change change-search-term
+ :value search-term
+ :placeholder (tr "workspace.libraries.search-shared-libraries")
+ :icon (mf/html [:span {:class (stl/css :search-icon)} i/search])}]
(if (seq shared-libraries)
[:div {:class (stl/css :section-list-shared)}
(for [{:keys [id name] :as library} shared-libraries]
[:div {:class (stl/css :section-list-item)
:key (dm/str id)}
- [:div
+ [:div {:class (stl/css :item-content)}
[:div {:class (stl/css :item-name)} name]
[:ul {:class (stl/css :item-contents)}
(let [components-count (dm/get-in library [:library-summary :components :count] 0)
@@ -261,7 +271,7 @@
[:button {:class (stl/css :item-button-shared)
:data-library-id (dm/str id)
:on-click link-library}
- i/add-refactor]])]
+ add-icon]])]
(when (empty? shared-libraries)
[:div {:class (stl/css :section-list-empty)}
@@ -270,7 +280,10 @@
(tr "workspace.libraries.loading")
(str/empty? search-term)
- (tr "workspace.libraries.no-shared-libraries-available")
+ [:*
+ [:span {:class (stl/css :empty-state-icon)}
+ library-icon]
+ (tr "workspace.libraries.no-shared-libraries-available")]
:else
(tr "workspace.libraries.no-matches-for" search-term))]))]]))
@@ -348,106 +361,110 @@
(dwl/set-updating-library true)
(dwl/sync-file file-id library-id))))))]
- [:div {:class (stl/css :section)}
- (if (empty? libs-assets)
- [:div {:class (stl/css :section-list-empty)}
- (tr "workspace.libraries.no-libraries-need-sync")]
- [:*
- [:div {:class (stl/css :section-title)} (tr "workspace.libraries.library-updates")]
+ [:div {:class (stl/css :updates-content)}
+ [:div {:class (stl/css :update-section)}
+ (if (empty? libs-assets)
+ [:div {:class (stl/css :section-list-empty)}
+ [:span {:class (stl/css :empty-state-icon)}
+ library-icon]
+ (tr "workspace.libraries.no-libraries-need-sync")]
+ [:*
+ [:div {:class (stl/css :section-title)} (tr "workspace.libraries.library-updates")]
- [:div {:class (stl/css :section-list)}
- (for [[{:keys [id name] :as library}
- exceeded
- {:keys [components colors typographies]}] libs-assets]
- [:div {:class (stl/css :section-list-item)
- :key (dm/str id)}
- [:div
- [:div {:class (stl/css :item-name)} name]
- [:ul {:class (stl/css :item-contents)} (describe-library
- (count components)
- 0
- (count colors)
- (count typographies))]]
- [:button {:type "button"
- :class (stl/css :item-update)
- :disabled updating?
- :data-library-id (dm/str id)
- :on-click update}
- (tr "workspace.libraries.update")]
+ [:div {:class (stl/css :section-list)}
+ (for [[{:keys [id name] :as library}
+ exceeded
+ {:keys [components colors typographies]}] libs-assets]
+ [:div {:class (stl/css :section-list-item)
+ :key (dm/str id)}
+ [:div {:class (stl/css :item-content)}
+ [:div {:class (stl/css :item-name)} name]
+ [:ul {:class (stl/css :item-contents)} (describe-library
+ (count components)
+ 0
+ (count colors)
+ (count typographies))]]
+ [:button {:type "button"
+ :class (stl/css :item-update)
+ :disabled updating?
+ :data-library-id (dm/str id)
+ :on-click update}
+ (tr "workspace.libraries.update")]
- [:div {:class (stl/css :libraries-updates)}
- (when-not (empty? components)
- [:div {:class (stl/css :libraries-updates-column)}
- (for [component components]
- [:div {:class (stl/css :libraries-updates-item)
- :key (dm/str (:id component))}
- (let [component (ctf/load-component-objects (:data library) component)
- root-shape (ctf/get-component-root (:data library) component)]
- [:*
- [:& component-svg {:root-shape root-shape
- :objects (:objects component)}]
- [:div {:class (stl/css :name-block)}
- [:span {:class (stl/css :item-name)
- :title (:name component)}
- (:name component)]]])])
- (when (:components exceeded)
- [:div {:class (stl/css :libraries-updates-item)
- :key (uuid/next)}
- [:div {:class (stl/css :name-block.ellipsis)}
- [:span {:class (stl/css :item-name)} "(...)"]]])])
+ [:div {:class (stl/css :libraries-updates)}
+ (when-not (empty? components)
+ [:div {:class (stl/css :libraries-updates-column)}
+ (for [component components]
+ [:div {:class (stl/css :libraries-updates-item)
+ :key (dm/str (:id component))}
+ (let [component (ctf/load-component-objects (:data library) component)
+ root-shape (ctf/get-component-root (:data library) component)]
+ [:*
+ [:& component-svg {:root-shape root-shape
+ :class (stl/css :component-svg)
+ :objects (:objects component)}]
+ [:div {:class (stl/css :name-block)}
+ [:span {:class (stl/css :item-name)
+ :title (:name component)}
+ (:name component)]]])])
+ (when (:components exceeded)
+ [:div {:class (stl/css :libraries-updates-item)
+ :key (uuid/next)}
+ [:div {:class (stl/css :name-block :ellipsis)}
+ [:span {:class (stl/css :item-name)} "(...)"]]])])
- (when-not (empty? colors)
- [:div {:class (stl/css :libraries-updates-column)
- :style #js {"--bullet-size" "24px"}}
- (for [color colors]
- (let [default-name (cond
- (:gradient color) (uc/gradient-type->string (get-in color [:gradient :type]))
- (:color color) (:color color)
- :else (:value color))]
- [:div {:class (stl/css :libraries-updates-item)
- :key (dm/str (:id color))}
- [:*
- [:& bc/color-bullet {:color {:color (:color color)
- :opacity (:opacity color)}}]
- [:div {:class (stl/css :name-block)}
- [:span {:class (stl/css :item-name)
- :title (:name color)}
- (:name color)]
- (when-not (= (:name color) default-name)
- [:span.color-value (:color color)])]]]))
- (when (:colors exceeded)
- [:div {:class (stl/css :libraries-updates-item)
- :key (uuid/next)}
- [:div {:class (stl/css :name-block.ellipsis)}
- [:span {:class (stl/css :item-name)} "(...)"]]])])
+ (when-not (empty? colors)
+ [:div {:class (stl/css :libraries-updates-column)
+ :style #js {"--bullet-size" "24px"}}
+ (for [color colors]
+ (let [default-name (cond
+ (:gradient color) (uc/gradient-type->string (get-in color [:gradient :type]))
+ (:color color) (:color color)
+ :else (:value color))]
+ [:div {:class (stl/css :libraries-updates-item)
+ :key (dm/str (:id color))}
+ [:*
+ [:& cb/color-bullet {:color {:color (:color color)
+ :id (:id color)
+ :opacity (:opacity color)}}]
+ [:div {:class (stl/css :name-block)}
+ [:span {:class (stl/css :item-name)
+ :title (:name color)}
+ (:name color)]
+ (when-not (= (:name color) default-name)
+ [:span.color-value (:color color)])]]]))
+ (when (:colors exceeded)
+ [:div {:class (stl/css :libraries-updates-item)
+ :key (uuid/next)}
+ [:div {:class (stl/css :name-block.ellipsis)}
+ [:span {:class (stl/css :item-name)} "(...)"]]])])
- (when-not (empty? typographies)
- [:div {:class (stl/css :libraries-updates-column)}
- (for [typography typographies]
- [:div {:class (stl/css :libraries-updates-item)
- :key (dm/str (:id typography))}
- [:*
- [:div {:style {:font-family (:font-family typography)
- :font-weight (:font-weight typography)
- :font-style (:font-style typography)}}
- (tr "workspace.assets.typography.sample")]
- [:div {:class (stl/css :name-block)}
- [:span {:class (stl/css :item-name)
- :title (:name typography)}
- (:name typography)]]]])
- (when (:typographies exceeded)
- [:div {:class (stl/css :libraries-updates-item)
- :key (uuid/next)}
- [:div {:class (stl/css :name-block.ellipsis)}
- [:span {:class (stl/css :item-name)} "(...)"]]])])]
+ (when-not (empty? typographies)
+ [:div {:class (stl/css :libraries-updates-column)}
+ (for [typography typographies]
+ [:div {:class (stl/css :libraries-updates-item)
+ :key (dm/str (:id typography))}
+ [:*
+ [:div {:style {:font-family (:font-family typography)
+ :font-weight (:font-weight typography)
+ :font-style (:font-style typography)}}
+ (tr "workspace.assets.typography.sample")]
+ [:div {:class (stl/css :name-block)}
+ [:span {:class (stl/css :item-name)
+ :title (:name typography)}
+ (:name typography)]]]])
+ (when (:typographies exceeded)
+ [:div {:class (stl/css :libraries-updates-item)
+ :key (uuid/next)}
+ [:div {:class (stl/css :name-block.ellipsis)}
+ [:span {:class (stl/css :item-name)} "(...)"]]])])]
- (when (or (pos? (:components exceeded))
- (pos? (:colors exceeded))
- (pos? (:typographies exceeded)))
- [:div {:class (stl/css :libraries-updates-see-all)}
+ (when (or (pos? (:components exceeded))
+ (pos? (:colors exceeded))
+ (pos? (:typographies exceeded)))
[:& lb/link-button {:on-click see-all-assets
- :value (str "(" (tr "workspace.libraries.update.see-all-changes") ")")}]])])]])]))
-
+ :class (stl/css :libraries-updates-see-all)
+ :value (str "(" (tr "workspace.libraries.update.see-all-changes") ")")}])])]])]]))
(mf/defc libraries-dialog
{::mf/register modal/components
::mf/register-as :libraries-dialog}
@@ -490,28 +507,24 @@
[:div {:class (stl/css :modal-overlay) :on-click close-dialog-outside}
[:div {:class (stl/css :modal-dialog)}
- [:button {:class (stl/css :close)
+ [:button {:class (stl/css :close-btn)
:on-click close-dialog}
- i/close-refactor]
+ close-icon]
[:div {:class (stl/css :modal-title)}
- "Libraries"]
- [:div {:class (stl/css :modal-content)}
- [:div {:class (stl/css :libraries-header)}
- [:& tab-container
- {:on-change-tab on-tab-change
- :selected selected-tab
- :collapsable false}
- [:& tab-element {:id :libraries :title (tr "workspace.libraries.libraries")}
- [:div {:class (stl/css :libraries-content)}
- [:& libraries-tab {:file-id file-id
- :shared? shared?
- :linked-libraries libraries
- :shared-libraries shared-libraries}]]]
- [:& tab-element {:id :updates :title (tr "workspace.libraries.updates")}
- [:div {:class (stl/css :updates-content)}
- [:& updates-tab {:file-id file-id
- :file-data file-data
- :libraries libraries}]]]]]]]]))
+ (tr "workspace.libraries.libraries")]
+ [:& tab-container
+ {:on-change-tab on-tab-change
+ :selected selected-tab
+ :collapsable false}
+ [:& tab-element {:id :libraries :title (tr "workspace.libraries.libraries")}
+ [:& libraries-tab {:file-id file-id
+ :shared? shared?
+ :linked-libraries libraries
+ :shared-libraries shared-libraries}]]
+ [:& tab-element {:id :updates :title (tr "workspace.libraries.updates")}
+ [:& updates-tab {:file-id file-id
+ :file-data file-data
+ :libraries libraries}]]]]]))
(mf/defc v2-info-dialog
{::mf/register modal/components
@@ -525,7 +538,8 @@
[:div {:class (stl/css :modal-overlay)}
[:div {:class (stl/css :modal-dialog :modal-v2-info)}
- [:div {:class (stl/css :modal-title)} "IMPORTANT INFORMATION ABOUT NEW COMPONENTS"]
+ [:div {:class (stl/css :modal-v2-title)}
+ "IMPORTANT INFORMATION ABOUT NEW COMPONENTS"]
[:div {:class (stl/css :modal-content)}
[:div {:class (stl/css :info-content)}
[:div {:class (stl/css :info-block)}
diff --git a/frontend/src/app/main/ui/workspace/libraries.scss b/frontend/src/app/main/ui/workspace/libraries.scss
index ec759217e..6c430b0d8 100644
--- a/frontend/src/app/main/ui/workspace/libraries.scss
+++ b/frontend/src/app/main/ui/workspace/libraries.scss
@@ -6,248 +6,239 @@
@import "refactor/common-refactor.scss";
+// Library modal
.modal-overlay {
- @include flexCenter;
- position: fixed;
- left: 0;
- top: 0;
- height: 100%;
- width: 100%;
- z-index: $z-index-modal;
- background-color: var(--overlay-color);
+ @extend .modal-overlay-base;
}
.modal-dialog {
- position: relative;
+ @extend .modal-container-base;
+ display: grid;
+ grid-template-rows: auto 1fr;
height: $s-520;
- max-height: 100%;
+ max-height: $s-520;
width: $s-712;
- padding: $s-32;
- border-radius: $br-10;
- background-color: var(--modal-background-color);
- .close {
- @extend .button-tertiary;
- position: absolute;
- top: $s-8;
- right: $s-8;
- width: $s-28;
- height: $s-32;
- border-radius: $br-8;
- svg {
- @extend .button-icon;
- stroke: var(--icon-foreground);
- }
- }
+ max-width: $s-712;
+}
- .modal-title {
- @include headlineMediumTypography;
- margin-bottom: $s-16;
- color: var(--modal-title-foreground-color);
+.close-btn {
+ @extend .modal-close-btn-base;
+}
+
+.close-icon {
+ @extend .button-icon;
+ stroke: var(--icon-foreground);
+}
+
+.modal-title {
+ @include headlineMediumTypography;
+ margin-block-end: $s-16;
+ color: var(--modal-title-foreground-color);
+}
+
+// Tabs content
+.libraries-content,
+.updates-content {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: $s-32;
+ max-height: $s-400;
+ padding-block-start: $s-16;
+}
+
+.lib-section,
+.update-section,
+.shared-section {
+ display: grid;
+ grid-template-rows: auto 1fr;
+ gap: $s-8;
+}
+
+.shared-section {
+ grid-template-rows: auto auto 1fr;
+}
+
+.title-spacing-lib {
+ margin: 0 0 0 calc(-1 * $s-8);
+}
+
+.section-list,
+.section-list-shared {
+ display: grid;
+ grid-auto-rows: min-content;
+ gap: $s-8;
+ max-height: $s-320;
+ overflow-y: auto;
+}
+
+.section-list-item {
+ display: grid;
+ grid-template-columns: 1fr auto;
+ gap: $s-8;
+}
+
+.item-content {
+ height: fit-content;
+}
+
+.item-name {
+ @include bodyLargeTypography;
+ color: var(--library-name-foreground-color);
+}
+
+.item-publish,
+.item-unpublish {
+ @extend .button-primary;
+ @include uppercaseTitleTipography;
+ height: $s-32;
+ min-width: $s-92;
+ padding: $s-8 $s-24;
+ margin: 0;
+ border-radius: $br-8;
+}
+
+.item-unpublish {
+ @extend .button-secondary;
+}
+
+.item-button,
+.item-button-shared {
+ @extend .button-secondary;
+ height: $s-32;
+ width: $s-32;
+ margin-inline-start: $s-2;
+ margin-inline-end: $s-8;
+ padding: $s-8;
+}
+
+.detach-icon,
+.add-icon {
+ @extend .button-icon;
+ stroke: var(--icon-foreground);
+}
+
+.section-list-shared {
+ max-height: $s-272;
+}
+
+.section-title {
+ @include headlineSmallTypography;
+ margin-block-end: $s-12;
+ color: var(--title-foreground-color);
+}
+
+.search-icon {
+ @include flexCenter;
+ width: $s-20;
+ padding: 0 0 0 $s-8;
+ svg {
+ @extend .button-icon-small;
+ stroke: var(--icon-foreground);
}
}
-.modal-content {
- height: 100%;
- .libraries-header {
- height: 100%;
- }
- .libraries-content,
- .updates-content {
- display: grid;
- grid-template-columns: 1fr 1fr;
- gap: $s-32;
- padding-top: $s-24;
- height: 100%;
- max-height: $s-400;
- .section {
- display: flex;
- flex-direction: column;
- height: calc(100% - $s-12);
- .title-spacing-lib {
- margin: 0 0 0 calc(-1 * $s-8);
- }
- .section-list,
- .section-list-shared {
- height: 100%;
- max-height: $s-320;
- margin-top: $s-12;
- overflow: auto;
- .section-list-item {
- display: grid;
- grid-template-columns: 1fr auto;
- column-gap: $s-12;
- margin-bottom: $s-24;
- &:last-child {
- margin-bottom: $s-8;
- }
- .item-name {
- @include bodyLargeTypography;
- color: var(--library-name-foreground-color);
- }
- .item-publish,
- .item-unpublish {
- @extend .button-primary;
- @include uppercaseTitleTipography;
- height: $s-32;
- min-width: $s-92;
- padding: $s-8 $s-24;
- border-radius: $br-8;
- }
+// empty state
+.section-list-empty {
+ @include bodyMediumTypography;
+ display: grid;
+ grid-template-rows: auto 1fr;
+ justify-items: center;
+ gap: $s-8;
+ text-align: center;
+ height: fit-content;
+ margin-block: $s-16;
+ color: var(--modal-title-foreground-color);
+}
- .item-unpublish {
- @extend .button-secondary;
- }
- .item-button,
- .item-button-shared {
- @extend .button-secondary;
- padding: $s-8 $s-24;
- height: $s-32;
- border-radius: $br-8;
- margin-right: $s-2;
- padding: $s-8;
- width: $s-32;
- margin-left: $s-8;
- svg {
- @extend .button-icon;
- stroke: var(--icon-foreground);
- }
- }
+.empty-state-icon {
+ @include flexCenter;
+ width: $s-48;
+ height: $s-48;
+ border-radius: $br-circle;
+ background-color: var(--pill-background-color);
+}
- .item-button-icon {
- width: $s-28;
- height: $s-28;
- svg {
- @extend .button-icon;
- stroke: var(--icon-foreground);
- }
- }
- }
- }
- .section-list-shared {
- max-height: $s-272;
- }
+.library-icon {
+ @extend .button-icon;
+ stroke: var(--icon-foreground);
+ height: $s-32;
+ width: $s-32;
+}
- .section-title {
- @include bodyLargeTypography;
- color: var(--modal-title-foreground-color);
- margin-bottom: $s-12;
- }
+// Update library tab
+.libraries-updates-see-all {
+ @extend .link;
+ direction: rtl;
+ grid-column: span 3;
+ margin-block-start: $s-8;
+ margin-inline-start: $s-8;
+ margin: 0;
+}
- .libraries-search {
- margin: $s-12 0;
- .search-icon {
- @include flexCenter;
- padding: 0 0 0 $s-8;
- width: $s-20;
- svg {
- @extend .button-icon-small;
- stroke: var(--icon-foreground);
- }
- }
- }
- .section-list-empty {
- @include bodyLargeTypography;
- @include flexCenter;
- color: var(--empty-message-foreground-color);
-
- svg {
- @extend .button-icon-small;
- stroke: var(--icon-foreground);
- width: $s-16;
- height: $s-16;
- }
- }
- }
-
- .libraries-updates-see-all {
- direction: rtl;
- grid-column: span 3;
- margin-top: $s-8;
- margin-right: $s-8;
- & input {
- @extend .link;
- margin: 0;
- }
- }
- }
- .updates-content {
- grid-template-columns: 1fr;
- }
+.updates-content {
+ grid-template-columns: 1fr;
}
.libraries-updates {
display: grid;
grid-column: span 3;
grid-template-columns: repeat(auto-fill, minmax($s-160, 1fr));
- grid-gap: $s-24;
- font-size: $fs-12;
- margin-top: $s-16;
-
- .libraries-updates-item {
- display: flex;
- align-items: center;
- color: var(--library-content-foreground-color);
-
- &:not(:first-child) {
- margin-top: $s-8;
- }
-
- & svg {
- background-color: var(--color-canvas);
- border-radius: $br-4;
- border: $s-2 solid transparent;
- height: $s-24;
- width: $s-24;
- min-height: $s-24;
- min-width: $s-24;
- }
-
- & .name-block {
- color: var(--gray-20-color);
- margin-left: $s-8;
- width: $s-168;
-
- &.ellipsis {
- padding-left: calc($s-24 + #{$s-8});
- }
- }
-
- & .item-name {
- display: block;
- margin: 0;
- text-overflow: ellipsis;
- overflow: hidden;
- white-space: nowrap;
- }
- }
+ gap: $s-24;
+ margin-block-start: $s-16;
}
-.modal-v2-info {
- width: $s-664;
- height: fit-content;
- .modal-title {
- font-size: $fs-18;
- }
+.libraries-updates-item {
+ @include bodyLargeTypography;
+ display: grid;
+ grid-template-columns: auto 1fr;
+ align-items: start;
+ gap: $s-8;
+ color: var(--library-content-foreground-color);
+}
+
+.component-svg {
+ background-color: var(--color-canvas);
+ border-radius: $br-4;
+ border: $s-2 solid transparent;
+ height: $s-24;
+ width: $s-24;
+ min-height: $s-24;
+ min-width: $s-24;
+}
+
+.name-block {
+ color: var(--library-content-foreground-color);
+ width: $s-168;
+}
+
+.ellipsis {
+ padding-inline-start: calc($s-24 + #{$s-8});
+}
+
+.item-name {
+ @include textEllipsis;
+ margin: 0;
}
.item-update {
@extend .button-primary;
- @include uppercaseTitleTipography;
+ @include headlineSmallTypography;
height: $s-32;
min-width: $s-92;
padding: $s-8 $s-24;
+ margin-inline-end: $s-2;
border-radius: $br-8;
- margin-right: $s-2;
&:disabled {
@extend .button-disabled;
}
}
.item-contents {
- @include bodyLargeTypography;
+ @include bodyMediumTypography;
color: var(--library-content-foreground-color);
display: flex;
flex-wrap: wrap;
+ margin: 0;
}
.element-count {
@@ -259,60 +250,72 @@
}
}
+// Modal Component v2 update
+.modal-v2-info {
+ width: $s-664;
+ height: fit-content;
+}
+
+.modal-v2-title {
+ @include headlineMediumTypography;
+ color: var(--modal-title-foreground-color);
+}
+
.info-content {
+ display: grid;
+ grid-template-rows: repeat(4, 1fr);
margin-top: $s-32;
- display: flex;
- flex-direction: column;
gap: $s-24;
+}
- .info-block {
- display: grid;
- grid-template-columns: auto 1fr;
- column-gap: $s-20;
- grid-template:
- "icon title"
- "icon content";
- }
+.info-block {
+ display: grid;
+ grid-template-columns: auto 1fr;
+ column-gap: $s-20;
+ grid-template:
+ "icon title"
+ "icon content";
+}
- .info-icon {
- grid-area: icon;
- width: $s-52;
- height: $s-52;
- margin-top: $s-8;
- border-radius: $br-circle;
- background: $db-quaternary;
+.info-icon {
+ grid-area: icon;
+ width: $s-52;
+ height: $s-52;
+ margin-top: $s-8;
+ border-radius: $br-circle;
+ background: $db-quaternary;
+ display: flex;
+ justify-content: center;
+ align-items: center;
- display: flex;
- justify-content: center;
- align-items: center;
+ svg {
+ width: $s-32;
+ height: $s-32;
+ fill: var(--icon-foreground-active);
+ }
+}
- svg {
- width: $s-32;
- height: $s-32;
- fill: $da-primary;
- }
- }
- .info-block-title {
- grid-area: title;
- font-size: $fs-16;
- color: $df-primary;
- }
- .info-block-content {
- grid-area: content;
- font-size: $fs-14;
- color: $df-secondary;
- line-height: 1.2;
- }
+.info-block-title {
+ @include bodyLargeTypography;
+ grid-area: title;
+ color: var(--modal-title-foreground-color);
+}
+
+.info-block-content {
+ @include bodyMediumTypography;
+ grid-area: content;
+ color: var(--library-content-foreground-color);
}
.info-bottom {
- margin-top: $s-24;
- margin-right: $s-8;
display: flex;
justify-content: flex-end;
- .primary-button {
- @extend .button-primary;
- @include uppercaseTitleTipography;
- padding: $s-0 $s-16;
- }
+ margin-block-start: $s-24;
+ margin-inline-end: $s-8;
+}
+
+.primary-button {
+ @extend .button-primary;
+ @include headlineSmallTypography;
+ padding: $s-0 $s-16;
}
diff --git a/frontend/src/app/main/ui/workspace/main_menu.cljs b/frontend/src/app/main/ui/workspace/main_menu.cljs
index 8255202d8..d144706c3 100644
--- a/frontend/src/app/main/ui/workspace/main_menu.cljs
+++ b/frontend/src/app/main/ui/workspace/main_menu.cljs
@@ -192,15 +192,15 @@
:on-key-down (fn [event]
(when (kbd/enter? event)
(toggle-flag event)))
- :data-test "snap-guides"
- :id "file-menu-snap-guides"}
+ :data-test "snap-ruler-guides"
+ :id "file-menu-snap-ruler-guides"}
[:span {:class (stl/css :item-name)}
- (if (contains? layout :snap-guides)
- (tr "workspace.header.menu.disable-snap-guides")
- (tr "workspace.header.menu.enable-snap-guides"))]
+ (if (contains? layout :snap-ruler-guides)
+ (tr "workspace.header.menu.disable-snap-ruler-guides")
+ (tr "workspace.header.menu.enable-snap-ruler-guides"))]
[:span {:class (stl/css :shortcut)}
- (for [sc (scd/split-sc (sc/get-tooltip :toggle-snap-guide))]
+ (for [sc (scd/split-sc (sc/get-tooltip :toggle-snap-ruler-guide))]
[:span {:class (stl/css :shortcut-key) :key sc} sc])]]
[:> dropdown-menu-item* {:on-click toggle-flag
@@ -208,14 +208,14 @@
:on-key-down (fn [event]
(when (kbd/enter? event)
(toggle-flag event)))
- :data-test "snap-grid"
- :id "file-menu-snap-grid"}
+ :data-test "snap-guides"
+ :id "file-menu-snap-guides"}
[:span {:class (stl/css :item-name)}
- (if (contains? layout :snap-grid)
- (tr "workspace.header.menu.disable-snap-grid")
- (tr "workspace.header.menu.enable-snap-grid"))]
+ (if (contains? layout :snap-guides)
+ (tr "workspace.header.menu.disable-snap-guides")
+ (tr "workspace.header.menu.enable-snap-guides"))]
[:span {:class (stl/css :shortcut)}
- (for [sc (scd/split-sc (sc/get-tooltip :toggle-snap-grid))]
+ (for [sc (scd/split-sc (sc/get-tooltip :toggle-snap-guides))]
[:span {:class (stl/css :shortcut-key) :key sc} sc])]]
[:> dropdown-menu-item* {:on-click toggle-flag
@@ -321,14 +321,14 @@
:on-key-down (fn [event]
(when (kbd/enter? event)
(toggle-flag event)))
- :data-test "display-grid"
- :id "file-menu-grid"}
+ :data-test "display-guides"
+ :id "file-menu-guides"}
[:span {:class (stl/css :item-name)}
- (if (contains? layout :display-grid)
- (tr "workspace.header.menu.hide-grid")
- (tr "workspace.header.menu.show-grid"))]
+ (if (contains? layout :display-guides)
+ (tr "workspace.header.menu.hide-guides")
+ (tr "workspace.header.menu.show-guides"))]
[:span {:class (stl/css :shortcut)}
- (for [sc (scd/split-sc (sc/get-tooltip :toggle-grid))]
+ (for [sc (scd/split-sc (sc/get-tooltip :toggle-guides))]
[:span {:class (stl/css :shortcut-key) :key sc} sc])]]
@@ -654,7 +654,7 @@
[:*
[:div {:on-click open-menu
- :class (stl/css :menu-btn)} i/menu-refactor]
+ :class (stl/css :menu-btn)} i/menu]
[:& dropdown-menu {:show show-menu?
:on-close close-menu
@@ -669,7 +669,7 @@
:data-test "file"
:id "file-menu-file"}
[:span {:class (stl/css :item-name)} (tr "workspace.header.menu.option.file")]
- [:span {:class (stl/css :open-arrow)} i/arrow-refactor]]
+ [:span {:class (stl/css :open-arrow)} i/arrow]]
[:> dropdown-menu-item* {:class (stl/css :menu-item)
:on-click on-menu-click
@@ -680,7 +680,7 @@
:data-test "edit"
:id "file-menu-edit"}
[:span {:class (stl/css :item-name)} (tr "workspace.header.menu.option.edit")]
- [:span {:class (stl/css :open-arrow)} i/arrow-refactor]]
+ [:span {:class (stl/css :open-arrow)} i/arrow]]
[:> dropdown-menu-item* {:class (stl/css :menu-item)
:on-click on-menu-click
@@ -691,7 +691,7 @@
:data-test "view"
:id "file-menu-view"}
[:span {:class (stl/css :item-name)} (tr "workspace.header.menu.option.view")]
- [:span {:class (stl/css :open-arrow)} i/arrow-refactor]]
+ [:span {:class (stl/css :open-arrow)} i/arrow]]
[:> dropdown-menu-item* {:class (stl/css :menu-item)
:on-click on-menu-click
@@ -702,7 +702,7 @@
:data-test "preferences"
:id "file-menu-preferences"}
[:span {:class (stl/css :item-name)} (tr "workspace.header.menu.option.preferences")]
- [:span {:class (stl/css :open-arrow)} i/arrow-refactor]]
+ [:span {:class (stl/css :open-arrow)} i/arrow]]
[:div {:class (stl/css :separator)}]
[:> dropdown-menu-item* {:class (stl/css-case :menu-item true)
:on-click on-menu-click
@@ -713,7 +713,7 @@
:data-test "help-info"
:id "file-menu-help-info"}
[:span {:class (stl/css :item-name)} (tr "workspace.header.menu.option.help-info")]
- [:span {:class (stl/css :open-arrow)} i/arrow-refactor]]]
+ [:span {:class (stl/css :open-arrow)} i/arrow]]]
(case sub-menu
:file
diff --git a/frontend/src/app/main/ui/workspace/nudge.cljs b/frontend/src/app/main/ui/workspace/nudge.cljs
index 868e294fd..28e567611 100644
--- a/frontend/src/app/main/ui/workspace/nudge.cljs
+++ b/frontend/src/app/main/ui/workspace/nudge.cljs
@@ -46,7 +46,7 @@
[:div {:class (stl/css :modal-header)}
[:h2 {:class (stl/css :modal-title)} (tr "modals.nudge-title")]
[:button {:class (stl/css :modal-close-btn)
- :on-click on-close} i/close-refactor]]
+ :on-click on-close} i/close]]
[:div {:class (stl/css :modal-content)}
[:div {:class (stl/css :input-wrapper)}
[:label {:class (stl/css :modal-msg)
diff --git a/frontend/src/app/main/ui/workspace/palette.cljs b/frontend/src/app/main/ui/workspace/palette.cljs
index 8eb2ac84a..eab23c77b 100644
--- a/frontend/src/app/main/ui/workspace/palette.cljs
+++ b/frontend/src/app/main/ui/workspace/palette.cljs
@@ -162,7 +162,7 @@
:class (stl/css-case :palette-btn true
:selected color-palette?)
:on-click on-select-color-palette}
- i/drop-refactor]]
+ i/drop-icon]]
[:li {:class (stl/css :palette-item)}
[:button {:title (tr "workspace.toolbar.text-palette" (sc/get-tooltip :toggle-textpalette))
@@ -170,14 +170,14 @@
:class (stl/css-case :palette-btn true
:selected text-palette?)
:on-click on-select-text-palette}
- i/text-palette-refactor]]]
+ i/text-palette]]]
(if any-palette?
[:*
[:button {:class (stl/css :palette-actions)
:on-click #(swap! state* update :show-menu not)}
- i/menu-refactor]
+ i/menu]
[:div {:class (stl/css :palette)
:ref container}
(when text-palette?
diff --git a/frontend/src/app/main/ui/workspace/palette.scss b/frontend/src/app/main/ui/workspace/palette.scss
index 70f0639e0..9474a7909 100644
--- a/frontend/src/app/main/ui/workspace/palette.scss
+++ b/frontend/src/app/main/ui/workspace/palette.scss
@@ -43,7 +43,7 @@
.resize-area {
grid-area: resize;
height: $s-8;
- z-index: $z-index-3;
+ z-index: $z-index-4;
width: calc(100% - $s-8);
border-radius: $br-circle;
cursor: ns-resize;
diff --git a/frontend/src/app/main/ui/workspace/presence.scss b/frontend/src/app/main/ui/workspace/presence.scss
index 07c883950..22c76e3b0 100644
--- a/frontend/src/app/main/ui/workspace/presence.scss
+++ b/frontend/src/app/main/ui/workspace/presence.scss
@@ -42,7 +42,7 @@
padding: $s-8;
margin: calc(-1 * $s-2) calc(-1 * $s-4) 0 0;
background-color: var(--menu-background-color);
- z-index: $z-index-3;
+ z-index: $z-index-4;
.active-users-list {
gap: $s-4;
.users-num,
diff --git a/frontend/src/app/main/ui/workspace/right_header.cljs b/frontend/src/app/main/ui/workspace/right_header.cljs
index dd9598e30..1fae7d76c 100644
--- a/frontend/src/app/main/ui/workspace/right_header.cljs
+++ b/frontend/src/app/main/ui/workspace/right_header.cljs
@@ -40,25 +40,25 @@
[:div {:class (stl/css-case :status-icon true
:pending-status true)
:title (tr "workspace.header.unsaved")}
- i/status-alert-refactor]
+ i/status-alert]
:saving
[:div {:class (stl/css-case :status-icon true
:saving-status true)
:title (tr "workspace.header.saving")}
- i/status-update-refactor]
+ i/status-update]
:saved
[:div {:class (stl/css-case :status-icon true
:saved-status true)
:title (tr "workspace.header.saved")}
- i/status-tick-refactor]
+ i/status-tick]
:error
[:div {:class (stl/css-case :status-icon true
:error-status true)
:title "There was an error saving the data. Please refresh if this persists."}
- i/status-wrong-refactor]
+ i/status-wrong]
nil)]))
@@ -112,12 +112,12 @@
[:button {:class (stl/css :zoom-btn)
:on-click on-decrease}
[:span {:class (stl/css :zoom-icon)}
- i/remove-refactor]]
+ i/remove-icon]]
[:p {:class (stl/css :zoom-text)} zoom]
[:button {:class (stl/css :zoom-btn)
:on-click on-increase}
[:span {:class (stl/css :zoom-icon)}
- i/add-refactor]]]
+ i/add]]]
[:button {:class (stl/css :reset-btn)
:on-click on-zoom-reset}
(tr "workspace.header.reset-zoom")]]
@@ -223,7 +223,7 @@
:selected (= selected-drawtool :comments))
:on-click toggle-comments
:data-tool "comments"}
- i/comments-refactor]]
+ i/comments]]
(when-not ^boolean read-only?
[:div {:class (stl/css :history-section)}
@@ -233,10 +233,10 @@
:class (stl/css-case :selected (contains? layout :document-history)
:history-button true)
:on-click toggle-history}
- i/history-refactor]])
+ i/history]])
[:a {:class (stl/css :viewer-btn)
:title (tr "workspace.header.viewer" (sc/get-tooltip :open-viewer))
:on-click nav-to-viewer}
- i/play-refactor]]))
+ i/play]]))
diff --git a/frontend/src/app/main/ui/workspace/sidebar.scss b/frontend/src/app/main/ui/workspace/sidebar.scss
index b14ca1253..192a8416e 100644
--- a/frontend/src/app/main/ui/workspace/sidebar.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar.scss
@@ -47,7 +47,7 @@ $width-settings-bar-max: $s-500;
position: absolute;
top: 0;
left: unset;
- z-index: $z-index-3;
+ z-index: $z-index-4;
width: $s-8;
cursor: ew-resize;
height: 100%;
diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets.cljs
index f43724ca1..da7ed67fe 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/assets.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/assets.cljs
@@ -159,7 +159,7 @@
[:button {:class (stl/css :libraries-button)
:on-click show-libraries-dialog}
[:span {:class (stl/css :libraries-icon)}
- i/library-refactor]
+ i/library]
(tr "workspace.assets.libraries")])
[:div {:class (stl/css :search-wrapper)}
@@ -170,7 +170,7 @@
{:on-click on-open-menu
:class (stl/css-case :section-button true
:opened menu-open?)}
- i/filter-refactor]]
+ i/filter-icon]]
[:& context-menu-a11y
{:on-close on-menu-close
:selectable true
@@ -186,8 +186,8 @@
[:button {:class (stl/css :sort-button)
:on-click toggle-ordering}
(if reverse-sort?
- i/asc-sort-refactor
- i/desc-sort-refactor)]]]
+ i/asc-sort
+ i/desc-sort)]]]
[:& (mf/provider cmm/assets-filters) {:value filters}
[:& (mf/provider cmm/assets-toggle-ordering) {:value toggle-ordering}
diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/colors.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets/colors.cljs
index 5dc91dba6..1f0004462 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/assets/colors.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/assets/colors.cljs
@@ -18,7 +18,7 @@
[app.main.data.workspace.undo :as dwu]
[app.main.refs :as refs]
[app.main.store :as st]
- [app.main.ui.components.color-bullet-new :as cb]
+ [app.main.ui.components.color-bullet :as cb]
[app.main.ui.context :as ctx]
[app.main.ui.icons :as i]
[app.main.ui.workspace.sidebar.assets.common :as cmm]
@@ -485,7 +485,7 @@
(when-not read-only?
[:button {:class (stl/css :assets-btn)
:on-click add-color-clicked}
- i/add-refactor])])
+ i/add])])
[:& cmm/asset-section-block {:role :content}
diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/common.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets/common.cljs
index f8f7bb6c5..4c6fa807c 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/assets/common.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/assets/common.cljs
@@ -123,10 +123,10 @@
{::mf/wrap-props false}
[{:keys [section]}]
(case section
- :colors i/drop-refactor
- :components i/component-refactor
- :typographies i/text-palette-refactor
- i/add-refactor))
+ :colors i/drop-icon
+ :components i/component
+ :typographies i/text-palette
+ i/add))
(mf/defc asset-section
{::mf/wrap-props false}
@@ -142,7 +142,7 @@
on-collapsed
(mf/use-fn
- (mf/deps file-id section open?)
+ (mf/deps file-id section open? assets-count)
(fn [_]
(when (< 0 assets-count)
(st/emit! (dw/set-assets-section-open file-id section (not open?))))))
diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/components.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets/components.cljs
index 65b87340c..65a109333 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/assets/components.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/assets/components.cljs
@@ -517,17 +517,17 @@
[:& radio-buttons {:selected (if listing-thumbs? "grid" "list")
:on-change toggle-list-style
:name "listing-style"}
- [:& radio-button {:icon i/view-as-list-refactor
+ [:& radio-button {:icon i/view-as-list
:value "list"
:id "opt-list"}]
- [:& radio-button {:icon i/flex-grid-refactor
+ [:& radio-button {:icon i/flex-grid
:value "grid"
:id "opt-grid"}]]])
(when (and components-v2 (not read-only?) local?)
[:div {:on-click add-component
:class (stl/css :add-component)}
- i/add-refactor
+ i/add
[:& file-uploader {:accept cm/str-image-types
:multi true
:ref input-ref
diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.cljs
index 257418869..f822fb5f8 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.cljs
@@ -70,7 +70,7 @@
:href (str "#" url)
:target "_blank"
:on-click dom/stop-propagation}
- i/open-link-refactor]])]]))
+ i/open-link]])]]))
(mf/defc file-library-content
{::mf/wrap-props false}
@@ -290,7 +290,7 @@
(not ^boolean show-typography?))
[:div {:class (stl/css :asset-title)}
[:span {:class (stl/css :no-found-icon)}
- i/search-refactor]
+ i/search]
[:span {:class (stl/css :no-found-text)}
(tr "workspace.assets.not-found")]])]))
diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/graphics.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets/graphics.cljs
index 45d2a1535..f8c7e2b8a 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/assets/graphics.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/assets/graphics.cljs
@@ -390,7 +390,7 @@
(when (and (not components-v2) (not read-only?))
[:button {:class (stl/css :assets-btn)
:on-click add-graphic}
- i/add-refactor
+ i/add
[:& file-uploader {:accept cm/str-image-types
:multi true
:ref input-ref
diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/groups.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets/groups.cljs
index 2431c88b7..dc882483e 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/assets/groups.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/assets/groups.cljs
@@ -131,7 +131,7 @@
(tr "workspace.assets.create-group")
(tr "workspace.assets.rename-group"))]
[:button {:class (stl/css :modal-close-btn)
- :on-click on-close} i/close-refactor]]
+ :on-click on-close} i/close]]
[:div {:class (stl/css :modal-content)}
[:& fm/form {:form form :on-submit on-accept}
diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/groups.scss b/frontend/src/app/main/ui/workspace/sidebar/assets/groups.scss
index 52634fee3..aeafdfeca 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/assets/groups.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/assets/groups.scss
@@ -18,7 +18,6 @@
.path {
@include textEllipsis;
- max-width: 90%;
margin-left: $s-2;
text-transform: initial;
color: var(--title-foreground-color-hover);
diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/typographies.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets/typographies.cljs
index 34ae000a6..6c5ae2fd2 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/assets/typographies.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/assets/typographies.cljs
@@ -403,7 +403,7 @@
(when-not read-only?
[:button {:class (stl/css :assets-btn)
:on-click add-typography}
- i/add-refactor])])
+ i/add])])
[:& cmm/asset-section-block {:role :content}
[:& typographies-group {:file-id file-id
diff --git a/frontend/src/app/main/ui/workspace/sidebar/collapsable_button.cljs b/frontend/src/app/main/ui/workspace/sidebar/collapsable_button.cljs
index 349ea74bd..31c9b0af5 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/collapsable_button.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/collapsable_button.cljs
@@ -24,4 +24,4 @@
[:button {:class (stl/css :collapsed-button)
:on-click on-click
:aria-label (tr "workspace.sidebar.expand")}
- i/arrow-refactor]]]))
+ i/arrow]]]))
diff --git a/frontend/src/app/main/ui/workspace/sidebar/debug.cljs b/frontend/src/app/main/ui/workspace/sidebar/debug.cljs
index b49371e5f..56f4f6119 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/debug.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/debug.cljs
@@ -35,14 +35,14 @@
[:div {:class (stl/css :panel-title)}
[:span "Debugging tools"]
[:div {:class (stl/css :close-button) :on-click handle-close}
- i/close-refactor]]
+ i/close]]
[:div {:class (stl/css :debug-panel-inner)}
(for [option (sort-by d/name dbg/options)]
[:div {:class (stl/css :checkbox-wrapper)}
[:span {:class (stl/css-case :checkbox-icon true :global/checked (dbg/enabled? option))
:on-click #(on-toggle-enabled % option)}
- (when (dbg/enabled? option) i/status-tick-refactor)]
+ (when (dbg/enabled? option) i/status-tick)]
[:input {:type "checkbox"
:id (d/name option)
diff --git a/frontend/src/app/main/ui/workspace/sidebar/debug_shape_info.cljs b/frontend/src/app/main/ui/workspace/sidebar/debug_shape_info.cljs
index 663f84b3e..12745448f 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/debug_shape_info.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/debug_shape_info.cljs
@@ -129,7 +129,7 @@
[:span "Debug"]
[:div {:class (stl/css :close-button)
:on-click #(dbg/disable! :shape-panel)}
- i/close-refactor]]
+ i/close]]
(if (empty? selected)
[:div {:class (stl/css :attrs-container)} "No shapes selected"]
diff --git a/frontend/src/app/main/ui/workspace/sidebar/history.cljs b/frontend/src/app/main/ui/workspace/sidebar/history.cljs
index d592efe4f..38b83de94 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/history.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/history.cljs
@@ -150,20 +150,20 @@
(defn entry->icon [{:keys [type]}]
(case type
- :page i/document-refactor
- :shape i/svg-refactor
- :rect i/rectangle-refactor
- :circle i/elipse-refactor
- :text i/text-refactor
- :path i/path-refactor
- :frame i/board-refactor
- :group i/group-refactor
- :color i/drop-refactor
- :typography i/text-palette-refactor
- :component i/component-refactor
- :media i/img-refactor
- :image i/img-refactor
- i/svg-refactor))
+ :page i/document
+ :shape i/svg
+ :rect i/rectangle
+ :circle i/elipse
+ :text i/text
+ :path i/path
+ :frame i/board
+ :group i/group
+ :color i/drop-icon
+ :typography i/text-palette
+ :component i/component
+ :media i/img
+ :image i/img
+ i/svg))
(defn is-shape? [type]
(contains? #{:shape :rect :circle :text :path :frame :group} type))
@@ -315,7 +315,7 @@
:button-opened @show-detail?)
:on-click toggle-show-detail
:data-has-entry (dm/str (not (nil? (:detail entry))))}
- i/arrow-refactor])]
+ i/arrow])]
(when @show-detail?
[:& history-entry-details {:entry entry}])]))
@@ -334,10 +334,10 @@
[:span (t locale "workspace.undo.title")]
[:div {:class (stl/css :close-button)
:on-click toggle-history}
- i/close-refactor]]
+ i/close]]
(if (empty? entries)
[:div {:class (stl/css :history-entry-empty)}
- [:div {:class (stl/css :history-entry-empty-icon)} i/history-refactor]
+ [:div {:class (stl/css :history-entry-empty-icon)} i/history]
[:div {:class (stl/css :history-entry-empty-msg)} (t locale "workspace.undo.empty")]]
[:ul {:class (stl/css :history-entries)}
(for [[idx-entry entry] (->> entries (map-indexed vector) reverse)] #_[i (range 0 10)]
diff --git a/frontend/src/app/main/ui/workspace/sidebar/layer_item.cljs b/frontend/src/app/main/ui/workspace/sidebar/layer_item.cljs
index 6cc0ba1b0..be6a1fffb 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/layer_item.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/layer_item.cljs
@@ -17,7 +17,7 @@
[app.main.data.workspace.collapse :as dwc]
[app.main.refs :as refs]
[app.main.store :as st]
- [app.main.ui.components.shape-icon-refactor :as sic]
+ [app.main.ui.components.shape-icon :as sic]
[app.main.ui.context :as ctx]
[app.main.ui.hooks :as hooks]
[app.main.ui.icons :as i]
@@ -93,14 +93,14 @@
:toggle-content true
:inverse expanded?)
:on-click on-toggle-collapse}
- i/arrow-refactor])
+ i/arrow])
[:div {:class (stl/css :icon-shape)
:on-double-click on-zoom-to-selected}
(when absolute?
[:div {:class (stl/css :absolute)}])
- [:& sic/element-icon-refactor
+ [:& sic/element-icon
{:shape item
:main-instance? main-instance?}]]]
@@ -111,7 +111,7 @@
:on-double-click on-zoom-to-selected}
(when ^boolean absolute?
[:div {:class (stl/css :absolute)}])
- [:& sic/element-icon-refactor
+ [:& sic/element-icon
{:shape item
:main-instance? main-instance?}]]])
@@ -142,7 +142,7 @@
(tr "workspace.shape.menu.show")
(tr "workspace.shape.menu.hide"))
:on-click on-toggle-visibility}
- (if ^boolean hidden? i/hide-refactor i/shown-refactor)]
+ (if ^boolean hidden? i/hide i/shown)]
[:button {:class (stl/css-case
:block-element true
:selected blocked?)
@@ -150,7 +150,7 @@
(tr "workspace.shape.menu.unlock")
(tr "workspace.shape.menu.lock"))
:on-click on-toggle-blocking}
- (if ^boolean blocked? i/lock-refactor i/unlock-refactor)]])]]
+ (if ^boolean blocked? i/lock i/unlock)]])]]
children]))
@@ -262,29 +262,32 @@
(mf/use-fn
(mf/deps id index objects expanded? selected)
(fn [side _data]
- (let [shape (get objects id)
+ (let [single? (= (count selected) 1)
+ same? (and single? (= (first selected) id))]
+ (when-not same?
+ (let [shape (get objects id)
- parent-id
- (cond
- (= side :center)
- id
+ parent-id
+ (cond
+ (= side :center)
+ id
- (and expanded? (= side :bot) (d/not-empty? (:shapes shape)))
- id
+ (and expanded? (= side :bot) (d/not-empty? (:shapes shape)))
+ id
- :else
- (cfh/get-parent-id objects id))
+ :else
+ (cfh/get-parent-id objects id))
- [parent-id _] (ctn/find-valid-parent-and-frame-ids parent-id objects (map #(get objects %) selected))
+ [parent-id _] (ctn/find-valid-parent-and-frame-ids parent-id objects (map #(get objects %) selected))
- parent (get objects parent-id)
+ parent (get objects parent-id)
- to-index (cond
- (= side :center) 0
- (and expanded? (= side :bot) (d/not-empty? (:shapes shape))) (count (:shapes parent))
- (= side :top) (inc index)
- :else index)]
- (st/emit! (dw/relocate-selected-shapes parent-id to-index)))))
+ to-index (cond
+ (= side :center) 0
+ (and expanded? (= side :bot) (d/not-empty? (:shapes shape))) (count (:shapes parent))
+ (= side :top) (inc index)
+ :else index)]
+ (st/emit! (dw/relocate-selected-shapes parent-id to-index)))))))
on-hold
(mf/use-fn
diff --git a/frontend/src/app/main/ui/workspace/sidebar/layer_item.scss b/frontend/src/app/main/ui/workspace/sidebar/layer_item.scss
index 68779f911..124ee6f48 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/layer_item.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/layer_item.scss
@@ -249,7 +249,7 @@
:global(.sticky) {
position: sticky;
top: $s-0;
- z-index: $z-index-3;
+ z-index: $z-index-4;
}
.tab-indentation {
diff --git a/frontend/src/app/main/ui/workspace/sidebar/layers.cljs b/frontend/src/app/main/ui/workspace/sidebar/layers.cljs
index b2d460d44..4ab174a38 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/layers.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/layers.cljs
@@ -15,16 +15,17 @@
[app.main.refs :as refs]
[app.main.store :as st]
[app.main.ui.components.search-bar :refer [search-bar]]
- [app.main.ui.components.shape-icon-refactor :as sic]
+ [app.main.ui.components.shape-icon :as sic]
[app.main.ui.components.title-bar :refer [title-bar]]
[app.main.ui.hooks :as hooks]
[app.main.ui.icons :as i]
+ [app.main.ui.notifications.badge :refer [badge-notification]]
[app.main.ui.workspace.sidebar.layer-item :refer [layer-item]]
[app.util.dom :as dom]
[app.util.globals :as globals]
[app.util.i18n :as i18n :refer [tr]]
[app.util.keyboard :as kbd]
- [app.util.timers :as ts]
+ [app.util.rxops :refer [throttle-fn]]
[beicon.v2.core :as rx]
[cuerdas.core :as str]
[goog.events :as events]
@@ -37,22 +38,24 @@
(mf/defc frame-wrapper
{::mf/props :obj}
[{:keys [selected] :as props}]
- (let [disposable (mf/use-var nil)
- pending-selected (mf/use-var selected)
+ (let [pending-selected (mf/use-var selected)
current-selected (mf/use-state selected)
- props (mf/spread props :selected @current-selected)]
+ props (mf/spread props :selected @current-selected)
- (mf/with-effect [selected]
+ set-selected
+ (mf/use-memo
+ (fn []
+ (throttle-fn
+ 50
+ #(when-let [pending-selected @pending-selected]
+ (reset! current-selected pending-selected)))))]
+
+ (mf/with-effect [selected set-selected]
(reset! pending-selected selected)
- (swap! disposable (fn [value]
- (when (some? value)
- (rx/dispose! value))
- (ts/idle-then-raf
- (fn []
- (reset! current-selected @pending-selected)
- (reset! disposable nil)))))
+ (set-selected)
(fn []
- (some-> @disposable rx/dispose!)))
+ (reset! pending-selected nil)
+ #(rx/dispose! set-selected)))
[:> layer-item props]))
@@ -283,11 +286,11 @@
:filter-button true
:opened show-menu?
:active active?)}
- i/filter-refactor]]
+ i/filter-icon]]
[:button {:class (stl/css :close-search)
:on-click toggle-search}
- i/close-refactor]]
+ i/close]]
[:div {:class (stl/css :active-filters)}
(for [fkey current-filters]
@@ -308,13 +311,13 @@
:on-click remove-filter}
[:span {:class (stl/css :layer-filter-icon)}
- [:& sic/element-icon-refactor-by-type
+ [:& sic/element-icon-by-type
{:type fkey
:main-instance? (= fkey :component)}]]
[:span {:class (stl/css :layer-filter-name)}
name]
[:span {:class (stl/css :layer-filter-close)}
- i/close-small-refactor]]))]
+ i/close-small]]))]
(when ^boolean show-menu?
[:ul {:class (stl/css :filters-container)}
@@ -324,13 +327,13 @@
:on-click add-filter}
[:div {:class (stl/css :filter-menu-item-name-wrapper)}
[:span {:class (stl/css :filter-menu-item-icon)}
- i/board-refactor]
+ i/board]
[:span {:class (stl/css :filter-menu-item-name)}
(tr "workspace.sidebar.layers.frames")]]
(when (contains? current-filters :frame)
[:span {:class (stl/css :filter-menu-item-tick)}
- i/tick-refactor])]
+ i/tick])]
[:li {:class (stl/css-case :filter-menu-item true
:selected (contains? current-filters :group))
@@ -338,13 +341,13 @@
:on-click add-filter}
[:div {:class (stl/css :filter-menu-item-name-wrapper)}
[:span {:class (stl/css :filter-menu-item-icon)}
- i/group-refactor]
+ i/group]
[:span {:class (stl/css :filter-menu-item-name)}
(tr "workspace.sidebar.layers.groups")]]
(when (contains? current-filters :group)
[:span {:class (stl/css :filter-menu-item-tick)}
- i/tick-refactor])]
+ i/tick])]
[:li {:class (stl/css-case :filter-menu-item true
:selected (contains? current-filters :mask))
@@ -352,13 +355,13 @@
:on-click add-filter}
[:div {:class (stl/css :filter-menu-item-name-wrapper)}
[:span {:class (stl/css :filter-menu-item-icon)}
- i/mask-refactor]
+ i/mask]
[:span {:class (stl/css :filter-menu-item-name)}
(tr "workspace.sidebar.layers.masks")]]
(when (contains? current-filters :mask)
[:span {:class (stl/css :filter-menu-item-tick)}
- i/tick-refactor])]
+ i/tick])]
[:li {:class (stl/css-case :filter-menu-item true
:selected (contains? current-filters :component))
@@ -366,13 +369,13 @@
:on-click add-filter}
[:div {:class (stl/css :filter-menu-item-name-wrapper)}
[:span {:class (stl/css :filter-menu-item-icon)}
- i/component-refactor]
+ i/component]
[:span {:class (stl/css :filter-menu-item-name)}
(tr "workspace.sidebar.layers.components")]]
(when (contains? current-filters :component)
[:span {:class (stl/css :filter-menu-item-tick)}
- i/tick-refactor])]
+ i/tick])]
[:li {:class (stl/css-case :filter-menu-item true
:selected (contains? current-filters :text))
@@ -380,13 +383,13 @@
:on-click add-filter}
[:div {:class (stl/css :filter-menu-item-name-wrapper)}
[:span {:class (stl/css :filter-menu-item-icon)}
- i/text-refactor]
+ i/text]
[:span {:class (stl/css :filter-menu-item-name)}
(tr "workspace.sidebar.layers.texts")]]
(when (contains? current-filters :text)
[:span {:class (stl/css :filter-menu-item-tick)}
- i/tick-refactor])]
+ i/tick])]
[:li {:class (stl/css-case :filter-menu-item true
:selected (contains? current-filters :image))
@@ -394,13 +397,13 @@
:on-click add-filter}
[:div {:class (stl/css :filter-menu-item-name-wrapper)}
[:span {:class (stl/css :filter-menu-item-icon)}
- i/img-refactor]
+ i/img]
[:span {:class (stl/css :filter-menu-item-name)}
(tr "workspace.sidebar.layers.images")]]
(when (contains? current-filters :image)
[:span {:class (stl/css :filter-menu-item-tick)}
- i/tick-refactor])]
+ i/tick])]
[:li {:class (stl/css-case :filter-menu-item true
:selected (contains? current-filters :shape))
@@ -408,19 +411,19 @@
:on-click add-filter}
[:div {:class (stl/css :filter-menu-item-name-wrapper)}
[:span {:class (stl/css :filter-menu-item-icon)}
- i/path-refactor]
+ i/path]
[:span {:class (stl/css :filter-menu-item-name)}
(tr "workspace.sidebar.layers.shapes")]]
(when (contains? current-filters :shape)
[:span {:class (stl/css :filter-menu-item-tick)}
- i/tick-refactor])]])]
+ i/tick])]])]
[:div {:class (stl/css :tool-window-bar)}
[:& title-bar {:collapsable false
:title (:name page)
:on-btn-click toggle-search
- :btn-children i/search-refactor}]]))]))
+ :btn-children i/search}]]))]))
(defn- on-scroll
@@ -507,14 +510,13 @@
[:button {:class (stl/css :focus-title)
:on-click toogle-focus-mode}
[:span {:class (stl/css :back-button)}
- i/arrow-refactor]
+ i/arrow]
[:div {:class (stl/css :focus-name)}
(or title (tr "workspace.sidebar.layers"))]
[:div {:class (stl/css :focus-mode-tag-wrapper)}
- [:div {:class (stl/css :focus-mode-tag)}
- (tr "workspace.focus.focus-mode")]]]]
+ [:& badge-notification {:content (tr "workspace.focus.focus-mode") :size :small :is-focus true}]]]]
(filter-component))
diff --git a/frontend/src/app/main/ui/workspace/sidebar/layers.scss b/frontend/src/app/main/ui/workspace/sidebar/layers.scss
index 422f72c19..4c0823ddf 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/layers.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/layers.scss
@@ -122,16 +122,6 @@
margin-right: $s-12;
}
-.focus-mode-tag {
- @include flexCenter;
- @include bodySmallTypography;
- height: $s-20;
- padding: $s-4 $s-6;
- border: $s-1 solid var(--tag-background-color);
- border-radius: $br-6;
- color: var(--tag-background-color);
-}
-
.active-filters {
@include flexRow;
flex-wrap: wrap;
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/align.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/align.cljs
index f6dc8e634..d91fc9757 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/align.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/align.cljs
@@ -50,7 +50,7 @@
:title (tr "workspace.align.hleft" (sc/get-tooltip :align-left))
:data-value "hleft"
:on-click align-objects}
- i/align-left-refactor]
+ i/align-left]
[:button {:class (stl/css-case :align-button true
:disabled disabled-align)
@@ -58,7 +58,7 @@
:title (tr "workspace.align.hcenter" (sc/get-tooltip :align-hcenter))
:data-value "hcenter"
:on-click align-objects}
- i/align-horizontal-center-refactor]
+ i/align-horizontal-center]
[:button {:class (stl/css-case :align-button true
:disabled disabled-align)
@@ -66,7 +66,7 @@
:title (tr "workspace.align.hright" (sc/get-tooltip :align-right))
:data-value "hright"
:on-click align-objects}
- i/align-right-refactor]
+ i/align-right]
[:button {:class (stl/css-case :align-button true
:disabled disabled-distribute)
@@ -74,7 +74,7 @@
:title (tr "workspace.align.hdistribute" (sc/get-tooltip :h-distribute))
:data-value "horizontal"
:on-click distribute-objects}
- i/distribute-horizontally-refactor]]
+ i/distribute-horizontally]]
[:div {:class (stl/css :align-group)}
[:button {:class (stl/css-case :align-button true
@@ -83,7 +83,7 @@
:title (tr "workspace.align.vtop" (sc/get-tooltip :align-top))
:data-value "vtop"
:on-click align-objects}
- i/align-top-refactor]
+ i/align-top]
[:button {:class (stl/css-case :align-button true
:disabled disabled-align)
@@ -91,7 +91,7 @@
:title (tr "workspace.align.vcenter" (sc/get-tooltip :align-vcenter))
:data-value "vcenter"
:on-click align-objects}
- i/align-vertical-center-refactor]
+ i/align-vertical-center]
[:button {:class (stl/css-case :align-button true
:disabled disabled-align)
@@ -99,7 +99,7 @@
:title (tr "workspace.align.vbottom" (sc/get-tooltip :align-bottom))
:data-value "vbottom"
:on-click align-objects}
- i/align-bottom-refactor]
+ i/align-bottom]
[:button {:title (tr "workspace.align.vdistribute" (sc/get-tooltip :v-distribute))
:class (stl/css-case :align-button true
@@ -107,5 +107,5 @@
:disabled disabled-distribute
:data-value "vertical"
:on-click distribute-objects}
- i/distribute-vertical-spacing-refactor]]])))
+ i/distribute-vertical-spacing]]])))
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.cljs
index 102c9e68c..89ecb0bc9 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.cljs
@@ -87,7 +87,7 @@
:class (stl/css-case :title-spacing-blur (not has-value?))}
(when-not has-value?
[:button {:class (stl/css :add-blur)
- :on-click handle-add} i/add-refactor])]]
+ :on-click handle-add} i/add])]]
(when (and open? has-value?)
[:div {:class (stl/css :element-set-content)}
[:div {:class (stl/css-case :first-row true
@@ -96,17 +96,17 @@
[:button {:class (stl/css-case :show-more true
:selected more-options?)
:on-click toggle-more-options}
- i/menu-refactor]
+ i/menu]
[:span {:class (stl/css :label)}
(tr "workspace.options.blur-options.title")]]
[:div {:class (stl/css :actions)}
[:button {:class (stl/css :action-btn)
:on-click handle-toggle-visibility}
(if hidden?
- i/hide-refactor
- i/shown-refactor)]
+ i/hide
+ i/shown)]
[:button {:class (stl/css :action-btn)
- :on-click handle-delete} i/remove-refactor]]]
+ :on-click handle-delete} i/remove-icon]]]
(when more-options?
[:div {:class (stl/css :second-row)}
[:label {:class (stl/css :label)
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/bool.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/bool.cljs
index 882cd276d..e223622b8 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/bool.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/bool.cljs
@@ -18,7 +18,7 @@
[rumext.v2 :as mf]))
(def ^:private flatten-icon
- (i/icon-xref :boolean-flatten-refactor (stl/css :flatten-icon)))
+ (i/icon-xref :boolean-flatten (stl/css :flatten-icon)))
(mf/defc bool-options
[]
@@ -64,22 +64,22 @@
:class (stl/css :boolean-radio-btn)
:on-change set-bool
:name "bool-options"}
- [:& radio-button {:icon i/boolean-union-refactor
+ [:& radio-button {:icon i/boolean-union
:value "union"
:disabled disabled-bool-btns
:title (str (tr "workspace.shape.menu.union") " (" (sc/get-tooltip :bool-union) ")")
:id "bool-opt-union"}]
- [:& radio-button {:icon i/boolean-difference-refactor
+ [:& radio-button {:icon i/boolean-difference
:value "difference"
:disabled disabled-bool-btns
:title (str (tr "workspace.shape.menu.difference") " (" (sc/get-tooltip :bool-difference) ")")
:id "bool-opt-differente"}]
- [:& radio-button {:icon i/boolean-intersection-refactor
+ [:& radio-button {:icon i/boolean-intersection
:value "intersection"
:disabled disabled-bool-btns
:title (str (tr "intersection") " (" (sc/get-tooltip :bool-intersection) ")")
:id "bool-opt-intersection"}]
- [:& radio-button {:icon i/boolean-exclude-refactor
+ [:& radio-button {:icon i/boolean-exclude
:value "exclude"
:disabled disabled-bool-btns
:title (str (tr "exclude") " (" (sc/get-tooltip :bool-exclude) ")")
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.cljs
index a016f99f3..49c077daa 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.cljs
@@ -7,12 +7,10 @@
(ns app.main.ui.workspace.sidebar.options.menus.component
(:require-macros [app.main.style :as stl])
(:require
- [app.common.data :as d]
[app.common.data.macros :as dm]
[app.common.files.helpers :as cfh]
[app.common.types.component :as ctk]
[app.common.types.file :as ctf]
- [app.common.uuid :as uuid]
[app.main.data.modal :as modal]
[app.main.data.workspace :as dw]
[app.main.data.workspace.libraries :as dwl]
@@ -110,9 +108,10 @@
(let [text (dom/get-value textarea)]
(when-not (str/blank? text)
(reset! editing* false)
+ (st/emit! (dw/update-component-annotation component-id text))
(when ^boolean creating?
- (st/emit! (dw/set-annotations-id-for-create nil)))
- (dw/update-component-annotation component-id text))))))
+ (st/emit! (dw/set-annotations-id-for-create nil))))))))
+
on-delete-annotation
(mf/use-fn
@@ -167,7 +166,7 @@
[:span {:class (stl/css-case
:icon-arrow true
:expanded expanded?)}
- i/arrow-refactor]
+ i/arrow]
[:span {:class (stl/css :annotation-text)}
(tr "workspace.options.component.annotation")]])
@@ -185,21 +184,21 @@
:icon true
:icon-tick true
:hidden invalid-text?)}
- i/tick-refactor]
+ i/tick]
[:div {:class (stl/css :icon :icon-cross)
:title (tr "labels.discard")
:on-click on-discard}
- i/close-refactor]]
+ i/close]]
[:*
[:div {:class (stl/css :icon :icon-edit)
:title (tr "labels.edit")
:on-click on-edit}
- i/curve-refactor]
+ i/curve]
[:div {:class (stl/css :icon :icon-trash)
:title (tr "labels.delete")
:on-click on-delete-annotation}
- i/delete-refactor]]))]]
+ i/delete]]))]]
[:div {:class (stl/css-case :hidden (not expanded?))}
[:div {:class (stl/css :grow-wrap)}
@@ -262,7 +261,7 @@
(cfh/last-path group-name)]]
[:span {:class (stl/css :arrow-icon)}
- i/arrow-refactor]]))
+ i/arrow]]))
(def ^:private ref:swap-libraries
(letfn [(get-libraries [state]
@@ -276,7 +275,7 @@
(defn- find-common-path
([components]
- (let [paths (map (comp cfh/last-path :path) components)]
+ (let [paths (map (comp cfh/split-path :path) components)]
(find-common-path paths [] 0)))
([paths path n]
(let [current (nth (first paths) n nil)]
@@ -295,16 +294,6 @@
(= (:component-id shape-a)
(:component-id shape-b)))
-;; Get the ids of the components and its root-shapes that are parents of the current shape, to avoid loops
-(defn get-parent-component-ids
- [objects shape ids]
- (let [shape-id (:id shape)]
- (if (uuid/zero? shape-id)
- ids
- (let [ids (if (ctk/instance-head? shape)
- (conj ids shape-id (:component-id shape))
- ids)]
- (get-parent-component-ids objects (get objects (:parent-id shape)) ids)))))
(mf/defc component-swap
{::mf/props :obj}
@@ -385,13 +374,17 @@
(->> (concat groups components)
(sort-by :name)))
- parent-components (mf/with-memo [shapes objects]
- (into #{}
- (comp
- (map :parent-id)
- (map (d/getf objects))
- (mapcat #(get-parent-component-ids objects % [])))
- shapes))
+ find-parent-components
+ (mf/use-fn
+ (mf/deps objects)
+ (fn [shape]
+ (->> (cfh/get-parents objects (:id shape))
+ (map :component-id)
+ (remove nil?))))
+
+ ;; Get the ids of the components that are parents of the shapes, to avoid loops
+ parent-components (mapcat find-parent-components shapes)
+
libraries-options (map (fn [library] {:value (:id library) :label (:name library)})
(vals libraries))
@@ -439,7 +432,8 @@
:id "swap-component-search-filter"
:value (:term filters)
:placeholder (str (tr "labels.search") " " (get-in libraries [current-library-id :name]))
- :icon (mf/html [:span {:class (stl/css :search-icon)} i/search-refactor])}]]
+ :icon (mf/html [:span {:class (stl/css :search-icon)}
+ i/search])}]]
[:& select {:class (stl/css :select-library)
:default-value current-library-id
@@ -455,10 +449,10 @@
:selected (if (:listing-thumbs? filters) "grid" "list")
:on-change toggle-list-style
:name "swap-listing-style"}
- [:& radio-button {:icon i/view-as-list-refactor
+ [:& radio-button {:icon i/view-as-list
:value "list"
:id "swap-opt-list"}]
- [:& radio-button {:icon i/flex-grid-refactor
+ [:& radio-button {:icon i/flex-grid
:value "grid"
:id "swap-opt-grid"}]]]]
@@ -466,7 +460,7 @@
[:button {:class (stl/css :component-path)
:on-click on-go-back
:title filter-path-with-dots}
- [:span {:class (stl/css :back-arrow)} i/arrow-refactor]
+ [:span {:class (stl/css :back-arrow)} i/arrow]
(when-not (= "" filter-path-with-dots)
[:span {:class (stl/css :path-name)}
(dm/str "\u00A0\u2022\u00A0" filter-path-with-dots)])
@@ -488,8 +482,10 @@
(let [data (dm/get-in libraries [current-library-id :data])
container (ctf/get-component-page data item)
root-shape (ctf/get-component-root data item)
- loop? (or (contains? parent-components (:main-instance-id item))
- (contains? parent-components (:id item)))]
+ components (->> (cfh/get-children-with-self (:objects container) (:id root-shape))
+ (keep :component-id)
+ set)
+ loop? (some #(contains? components %) parent-components)]
[:& component-swap-item {:key (dm/str (:id item))
:item item
:loop loop?
@@ -589,7 +585,7 @@
(if swap-opened?
[:button {:class (stl/css :title-back)
:on-click on-component-back}
- [:span {:class (stl/css :icon-back)} i/arrow-refactor]
+ [:span {:class (stl/css :icon-back)} i/arrow]
[:span (tr "workspace.options.component")]]
[:& title-bar {:collapsable true
@@ -614,8 +610,8 @@
[:span {:class (stl/css :component-icon)}
(if main-instance?
- i/component-refactor
- i/copy-refactor)]
+ i/component
+ i/component-copy)]
[:div {:class (stl/css :name-wrapper)}
[:div {:class (stl/css :component-name)}
@@ -632,7 +628,7 @@
[:button {:class (stl/css-case :menu-btn true
:selected menu-open?)
:on-click on-menu-click}
- i/menu-refactor]
+ i/menu]
[:& component-ctx-menu {:show menu-open?
:on-close on-menu-close
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/constraints.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/constraints.cljs
index 44d5182ec..ce3bdedca 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/constraints.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/constraints.cljs
@@ -209,12 +209,12 @@
[:div {:class (stl/css :contraints-selects)}
[:div {:class (stl/css :horizontal-select)}
[:& select
- {:default-value (d/name constraints-h "scale")
+ {:default-value (d/nilv (d/name constraints-h) "scale")
:options options-h
:on-change on-constraint-h-select-changed}]]
[:div {:class (stl/css :vertical-select)}
[:& select
- {:default-value (d/name constraints-v "scale")
+ {:default-value (d/nilv (d/name constraints-v) "scale")
:options options-v
:on-change on-constraint-v-select-changed}]]
(when first-level?
@@ -225,7 +225,7 @@
[:span {:class (stl/css-case :check-mark true
:checked (:fixed-scroll values))}
(when (:fixed-scroll values)
- i/status-tick-refactor)]
+ i/status-tick)]
(tr "workspace.options.constraints.fix-when-scrolling")
[:input {:type "checkbox"
:id "fixed-on-scroll"
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.cljs
index da7b371a5..216ad4231 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.cljs
@@ -177,7 +177,8 @@
:title (tr (if (> (count ids) 1) "workspace.options.export-multiple" "workspace.options.export"))
:class (stl/css-case :title-spacing-export (not has-exports?))}
[:button {:class (stl/css :add-export)
- :on-click add-export} i/add-refactor]]]
+ :on-click add-export}
+ i/add]]]
(when open?
[:div {:class (stl/css :element-set-content)}
@@ -188,7 +189,7 @@
[:div {:class (stl/css :actions)}
[:button {:class (stl/css :action-btn)
:on-click on-remove-all}
- i/remove-refactor]]]
+ i/remove-icon]]]
(seq exports)
[:*
@@ -222,7 +223,7 @@
[:button {:class (stl/css :action-btn)
:on-click (partial delete-export index)}
- i/remove-refactor]])])
+ i/remove-icon]])])
(when (or (= :multiple exports) (seq exports))
[:button
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.cljs
index eb6eff7f2..82e8fe530 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.cljs
@@ -145,7 +145,7 @@
(when (and (not disable-remove?) (not (= :multiple fills)))
[:button {:class (stl/css :add-fill)
- :on-click on-add} i/add-refactor])]]
+ :on-click on-add} i/add])]]
(when open?
[:div {:class (stl/css :element-content)}
@@ -156,7 +156,7 @@
(tr "settings.multiple")]
[:button {:on-click on-remove-all
:class (stl/css :remove-btn)}
- i/remove-refactor]]
+ i/remove-icon]]
(seq fills)
[:& h/sortable-container {}
@@ -187,7 +187,7 @@
[:span {:class (stl/css-case :check-mark true
:checked (not hide-fill-on-export?))}
(when (not hide-fill-on-export?)
- i/status-tick-refactor)]
+ i/status-tick)]
(tr "workspace.options.show-fill-on-export")
[:input {:type "checkbox"
:id "show-fill-on-export"
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs
index 3859a60bd..7b7e69aed 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs
@@ -148,7 +148,7 @@
[:button {:class (stl/css-case :show-options true
:selected open?)
:on-click toggle-advanced-options}
- i/menu-refactor]
+ i/menu]
[:div {:class (stl/css :type-select-wrapper)}
[:& select
{:class (stl/css :grid-type-select)
@@ -179,10 +179,10 @@
[:div {:class (stl/css :actions)}
[:button {:class (stl/css :action-btn)
:on-click handle-toggle-visibility}
- (if display i/shown-refactor i/hide-refactor)]
+ (if display i/shown i/hide)]
[:button {:class (stl/css :action-btn)
:on-click on-remove}
- i/remove-refactor]]]
+ i/remove-icon]]]
(when (:display grid)
[:& advanced-options {:class (stl/css :grid-advanced-options)
@@ -201,7 +201,7 @@
[:button {:class (stl/css-case :show-more-options true
:selected show-more-options?)
:on-click toggle-more-options}
- i/menu-refactor]]
+ i/menu]]
(when show-more-options?
[:div {:class (stl/css :second-row)}
[:button {:class (stl/css-case :btn-options true
@@ -258,7 +258,8 @@
[:div {:class (stl/css :gutter)
:title (tr "workspace.options.grid.params.gutter")}
[:span {:class (stl/css-case :icon true
- :rotated (= type :row))} i/gap-horizontal-refactor]
+ :rotated (= type :row))}
+ i/gap-horizontal]
[:> numeric-input* {:placeholder "0"
:on-change (handle-change :params :gutter)
:nillable true
@@ -268,7 +269,8 @@
[:div {:class (stl/css :margin)
:title (tr "workspace.options.grid.params.margin")}
[:span {:class (stl/css-case :icon true
- :rotated (= type :column))} i/grid-margin-refactor]
+ :rotated (= type :column))}
+ i/grid-margin]
[:> numeric-input* {:placeholder "0"
:on-change (handle-change :params :margin)
:nillable true
@@ -279,7 +281,7 @@
:selected show-more-options?)
:on-click toggle-more-options
:disabled is-default}
- i/menu-refactor]
+ i/menu]
(when show-more-options?
[:div {:class (stl/css :more-options)}
[:button {:class (stl/css :option-btn)
@@ -309,7 +311,7 @@
[:button {:on-click handle-create-grid
:class (stl/css :add-grid)}
- i/add-refactor]]
+ i/add]]
(when (and open? (seq frame-grids))
[:div {:class (stl/css :element-set-content)}
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.scss
index d1bb3aa4c..bf1a29c77 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.scss
@@ -224,7 +224,7 @@
margin: 0 0 $s-40 0;
margin-top: $s-4;
border-radius: $br-8;
- z-index: $z-index-3;
+ z-index: $z-index-4;
overflow-y: auto;
background-color: var(--menu-background-color);
.option-btn {
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/grid_cell.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/grid_cell.cljs
index c818dc826..db5de12bd 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/grid_cell.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/grid_cell.cljs
@@ -51,22 +51,30 @@
:allow-empty true
:name (dm/str "flex-align-items-" type)}
[:& radio-button {:value "start"
- :icon (if is-col? i/align-self-row-left-refactor i/align-self-column-top-refactor)
+ :icon (if is-col?
+ i/align-self-row-left
+ i/align-self-column-top)
:title "Align self start"
:id (dm/str "align-self-start-" type)}]
[:& radio-button {:value "center"
- :icon (if is-col? i/align-self-row-center-refactor i/align-self-column-center-refactor)
+ :icon (if is-col?
+ i/align-self-row-center
+ i/align-self-column-center)
:title "Align self center"
:id (dm/str "align-self-center-" type)}]
[:& radio-button {:value "end"
- :icon (if is-col? i/align-self-row-right-refactor i/align-self-column-bottom-refactor)
+ :icon (if is-col?
+ i/align-self-row-right
+ i/align-self-column-bottom)
:title "Align self end"
:id (dm/str "align-self-end-" type)}]
[:& radio-button {:value "stretch"
- :icon (if is-col? i/align-self-row-stretch-refactor i/align-self-column-stretch-refactor)
+ :icon (if is-col?
+ i/align-self-row-stretch
+ i/align-self-column-stretch)
:title "Align self stretch"
:id (dm/str "align-self-stretch-" type)}]]]))
@@ -200,7 +208,7 @@
(when (and (not multiple?) (= :auto cell-mode))
[:div {:class (stl/css :row)}
[:div {:class (stl/css :grid-coord-group)}
- [:span {:class (stl/css :icon)} i/flex-vertical-refactor]
+ [:span {:class (stl/css :icon)} i/flex-vertical]
[:div {:class (stl/css :coord-input)}
[:> numeric-input*
{:placeholder "--"
@@ -210,7 +218,7 @@
:value column}]]]
[:div {:class (stl/css :grid-coord-group)}
- [:span {:class (stl/css :icon)} i/flex-horizontal-refactor]
+ [:span {:class (stl/css :icon)} i/flex-horizontal]
[:div {:class (stl/css :coord-input)}
[:> numeric-input*
{:placeholder "--"
@@ -222,7 +230,7 @@
(when (and (not multiple?) (or (= :manual cell-mode) (= :area cell-mode)))
[:div {:class (stl/css :row)}
[:div {:class (stl/css :grid-coord-group)}
- [:span {:class (stl/css :icon)} i/flex-vertical-refactor]
+ [:span {:class (stl/css :icon)} i/flex-vertical]
[:div {:class (stl/css :coord-input)}
[:> numeric-input*
{:placeholder "--"
@@ -237,7 +245,7 @@
:value column-end}]]]
[:div {:class (stl/css :grid-coord-group)}
- [:span {:class (stl/css :icon)} i/flex-horizontal-refactor]
+ [:span {:class (stl/css :icon)} i/flex-horizontal]
[:div {:class (stl/css :coord-input :double)}
[:> numeric-input*
{:placeholder "--"
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
index d9e543d19..515c109eb 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
@@ -86,7 +86,7 @@
accept-edit (fn []
(let [name-input (mf/ref-val name-ref)
- name (dom/get-value name-input)]
+ name (str/trim (dom/get-value name-input))]
(reset! editing? false)
(st/emit! (dwi/end-rename-flow)
(when-not (str/empty? name)
@@ -139,7 +139,7 @@
[:button {:class (stl/css :start-flow-btn)
:on-click start-flow}
[:span {:class (stl/css :button-icon)}
- i/play-refactor]]
+ i/play]]
[:span {:class (stl/css :flow-input-wrapper)}
[:input
{:class (stl/css :flow-input)
@@ -151,7 +151,7 @@
[:button {:class (stl/css :remove-flow-btn)
:on-click remove-flow}
- i/remove-refactor]]))
+ i/remove-icon]]))
(mf/defc page-flows
[{:keys [flows]}]
@@ -177,25 +177,25 @@
[:button {:class (stl/css :add-flow-btn)
:title (tr "workspace.options.flows.add-flow-start")
:on-click add-flow}
- i/add-refactor])]
+ i/add])]
(when flow
[:& flow-item {:flow flow :key (str (:id flow))}])])))
(def ^:private corner-center-icon
- (i/icon-xref :corner-center-refactor (stl/css :corner-icon)))
+ (i/icon-xref :corner-center (stl/css :corner-icon)))
(def ^:private corner-bottom-icon
- (i/icon-xref :corner-bottom-refactor (stl/css :corner-icon)))
+ (i/icon-xref :corner-bottom (stl/css :corner-icon)))
(def ^:private corner-bottomleft-icon
- (i/icon-xref :corner-bottomleft-refactor (stl/css :corner-icon)))
+ (i/icon-xref :corner-bottomleft (stl/css :corner-icon)))
(def ^:private corner-bottomright-icon
- (i/icon-xref :corner-bottomright-refactor (stl/css :corner-icon)))
+ (i/icon-xref :corner-bottomright (stl/css :corner-icon)))
(def ^:private corner-top-icon
- (i/icon-xref :corner-top-refactor (stl/css :corner-icon)))
+ (i/icon-xref :corner-top (stl/css :corner-icon)))
(def ^:private corner-topleft-icon
- (i/icon-xref :corner-topleft-refactor (stl/css :corner-icon)))
+ (i/icon-xref :corner-topleft (stl/css :corner-icon)))
(def ^:private corner-topright-icon
- (i/icon-xref :corner-topright-refactor (stl/css :corner-icon)))
+ (i/icon-xref :corner-topright (stl/css :corner-icon)))
(mf/defc interaction-entry
[{:keys [index shape interaction update-interaction remove-interaction]}]
@@ -412,11 +412,11 @@
(d/concat-vec basic-animation-opts [{:value :push :label (tr "workspace.options.interaction-animation-push")}])
basic-animation-opts))
- easing-options [{:icon :easing-linear-refactor :value :linear :label (tr "workspace.options.interaction-easing-linear")}
- {:icon :easing-ease-refactor :value :ease :label (tr "workspace.options.interaction-easing-ease")}
- {:icon :easing-ease-in-refactor :value :ease-in :label (tr "workspace.options.interaction-easing-ease-in")}
- {:icon :easing-ease-out-refactor :value :ease-out :label (tr "workspace.options.interaction-easing-ease-out")}
- {:icon :easing-ease-in-out-refactor :value :ease-in-out :label (tr "workspace.options.interaction-easing-ease-in-out")}]]
+ easing-options [{:icon :easing-linear :value :linear :label (tr "workspace.options.interaction-easing-linear")}
+ {:icon :easing-ease :value :ease :label (tr "workspace.options.interaction-easing-ease")}
+ {:icon :easing-ease-in :value :ease-in :label (tr "workspace.options.interaction-easing-ease-in")}
+ {:icon :easing-ease-out :value :ease-out :label (tr "workspace.options.interaction-easing-ease-out")}
+ {:icon :easing-ease-in-out :value :ease-in-out :label (tr "workspace.options.interaction-easing-ease-in-out")}]]
[:div {:class (stl/css-case :element-set-options-group true
@@ -426,7 +426,7 @@
[:button {:class (stl/css-case :extend-btn true
:extended extended-open?)
:on-click toggle-extended}
- i/menu-refactor]
+ i/menu]
[:div {:class (stl/css :interactions-info)
:on-click toggle-extended}
@@ -435,7 +435,7 @@
[:button {:class (stl/css :remove-btn)
:data-value index
:on-click #(remove-interaction index)}
- i/remove-refactor]]
+ i/remove-icon]]
(when extended-open?
[:div {:class (stl/css :extended-options)}
@@ -490,7 +490,7 @@
:class (stl/css-case :global/checked preserve-scroll?)}
[:span {:class (stl/css-case :global/checked preserve-scroll?)}
(when preserve-scroll?
- i/status-tick-refactor)]
+ i/status-tick)]
(tr "workspace.options.interaction-preserve-scroll")
[:input {:type "checkbox"
:id (str "preserve-" index)
@@ -586,7 +586,7 @@
:class (stl/css-case :global/checked close-click-outside?)}
[:span {:class (stl/css-case :global/checked close-click-outside?)}
(when close-click-outside?
- i/status-tick-refactor)]
+ i/status-tick)]
(tr "workspace.options.interaction-close-outside")
[:input {:type "checkbox"
:id (str "close-" index)
@@ -600,7 +600,7 @@
:class (stl/css-case :global/checked background-overlay?)}
[:span {:class (stl/css-case :global/checked background-overlay?)}
(when background-overlay?
- i/status-tick-refactor)]
+ i/status-tick)]
(tr "workspace.options.interaction-background")
[:input {:type "checkbox"
:id (str "background-" index)
@@ -638,19 +638,19 @@
[:& radio-buttons {:selected (d/name direction)
:on-change change-direction
:name "animation-direction"}
- [:& radio-button {:icon i/column-refactor
+ [:& radio-button {:icon i/column
:icon-class (stl/css :right)
:value "right"
:id "animation-right"}]
- [:& radio-button {:icon i/column-refactor
+ [:& radio-button {:icon i/column
:icon-class (stl/css :left)
:id "animation-left"
:value "left"}]
- [:& radio-button {:icon i/column-refactor
+ [:& radio-button {:icon i/column
:icon-class (stl/css :down)
:id "animation-down"
:value "down"}]
- [:& radio-button {:icon i/column-refactor
+ [:& radio-button {:icon i/column
:icon-class (stl/css :up)
:id "animation-up"
:value "up"}]]]])
@@ -687,7 +687,7 @@
:class (stl/css-case :global/checked (-> interaction :animation :offset-effect))}
[:span {:class (stl/css-case :global/checked (-> interaction :animation :offset-effect))}
(when (-> interaction :animation :offset-effect)
- i/status-tick-refactor)]
+ i/status-tick)]
(tr "workspace.options.interaction-offset-effect")
[:input {:type "checkbox"
:id (str "offset-effect-" index)
@@ -726,21 +726,21 @@
[:button {:class (stl/css :add-interaction-btn)
:on-click add-interaction}
- i/add-refactor]]])
+ i/add]]])
(when (= (count interactions) 0)
[:div {:class (stl/css :help-content)}
(when (and shape (not (cfh/unframed-shape? shape)))
[:div {:class (stl/css :help-group)}
- [:div {:class (stl/css :interactions-help-icon)} i/add-refactor]
+ [:div {:class (stl/css :interactions-help-icon)} i/add]
[:div {:class (stl/css :interactions-help)}
(tr "workspace.options.add-interaction")]])
[:div {:class (stl/css :help-group)}
- [:div {:class (stl/css :interactions-help-icon)} i/interaction-refactor]
+ [:div {:class (stl/css :interactions-help-icon)} i/interaction]
[:div {:class (stl/css :interactions-help)}
(tr "workspace.options.select-a-shape")]]
[:div {:class (stl/css :help-group)}
- [:div {:class (stl/css :interactions-help-icon)} i/play-refactor]
+ [:div {:class (stl/css :interactions-help-icon)} i/play]
[:div {:class (stl/css :interactions-help)}
(tr "workspace.options.use-play-button")]]])
[:div {:class (stl/css :groups)}
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.cljs
index eea27c06c..938d2d878 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.cljs
@@ -173,18 +173,18 @@
(cond
(or (= :multiple hidden?) (not hidden?))
[:button {:on-click handle-set-hidden
- :class (stl/css :hidden-btn)} i/shown-refactor]
+ :class (stl/css :hidden-btn)} i/shown]
:else
[:button {:on-click handle-set-visible
- :class (stl/css :hidden-btn)} i/hide-refactor])
+ :class (stl/css :hidden-btn)} i/hide])
(cond
(or (= :multiple blocked?) (not blocked?))
[:button {:on-click handle-set-blocked
- :class (stl/css :lock-btn)} i/unlock-refactor]
+ :class (stl/css :lock-btn)} i/unlock]
:else
[:button {:on-click handle-set-unblocked
:class (stl/css-case :lock-btn true
- :locked blocked?)} i/lock-refactor])]]]))
+ :locked blocked?)} i/lock])]]]))
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs
index 894d92074..b7a5dde44 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs
@@ -36,10 +36,10 @@
(defn- dir-icons-refactor
[val]
(case val
- :row i/grid-row-refactor
- :row-reverse i/row-reverse-refactor
- :column i/column-refactor
- :column-reverse i/column-reverse-refactor))
+ :row i/grid-row
+ :row-reverse i/row-reverse
+ :column i/column
+ :column-reverse i/column-reverse))
;; FLEX COMPONENTS
@@ -67,71 +67,63 @@
:align-items
(if column?
(case val
- :start i/align-items-column-start-refactor
- :end i/align-items-column-end-refactor
- :center i/align-items-column-center-refactor
- :stretch i/align-items-column-strech
- :baseline i/align-items-column-baseline)
- (case val ;; TODO Check strech and baseline icons
- :start i/align-items-row-start-refactor
- :end i/align-items-row-end-refactor
- :center i/align-items-row-center-refactor
- :stretch i/align-items-row-strech
- :baseline i/align-items-row-baseline))
+ :start i/align-items-column-start
+ :end i/align-items-column-end
+ :center i/align-items-column-center)
+ (case val
+ :start i/align-items-row-start
+ :end i/align-items-row-end
+ :center i/align-items-row-center))
:justify-content
(if column?
(case val
- :start i/justify-content-column-start-refactor
- :end i/justify-content-column-end-refactor
- :center i/justify-content-column-center-refactor
- :space-around i/justify-content-column-around-refactor
- :space-evenly i/justify-content-column-evenly-refactor
- :space-between i/justify-content-column-between-refactor)
+ :start i/justify-content-column-start
+ :end i/justify-content-column-end
+ :center i/justify-content-column-center
+ :space-around i/justify-content-column-around
+ :space-evenly i/justify-content-column-evenly
+ :space-between i/justify-content-column-between)
(case val
- :start i/justify-content-row-start-refactor
- :end i/justify-content-row-end-refactor
- :center i/justify-content-row-center-refactor
- :space-around i/justify-content-row-around-refactor
- :space-evenly i/justify-content-row-evenly-refactor
- :space-between i/justify-content-row-between-refactor))
+ :start i/justify-content-row-start
+ :end i/justify-content-row-end
+ :center i/justify-content-row-center
+ :space-around i/justify-content-row-around
+ :space-evenly i/justify-content-row-evenly
+ :space-between i/justify-content-row-between))
:align-content
(if column?
(case val
- :start i/align-content-column-start-refactor
- :end i/align-content-column-end-refactor
- :center i/align-content-column-center-refactor
- :space-around i/align-content-column-around-refactor
- :space-evenly i/align-content-column-evenly-refactor
- :space-between i/align-content-column-between-refactor
+ :start i/align-content-column-start
+ :end i/align-content-column-end
+ :center i/align-content-column-center
+ :space-around i/align-content-column-around
+ :space-evenly i/align-content-column-evenly
+ :space-between i/align-content-column-between
:stretch nil)
(case val
- :start i/align-content-row-start-refactor
- :end i/align-content-row-end-refactor
- :center i/align-content-row-center-refactor
- :space-around i/align-content-row-around-refactor
- :space-evenly i/align-content-row-evenly-refactor
- :space-between i/align-content-row-between-refactor
+ :start i/align-content-row-start
+ :end i/align-content-row-end
+ :center i/align-content-row-center
+ :space-around i/align-content-row-around
+ :space-evenly i/align-content-row-evenly
+ :space-between i/align-content-row-between
:stretch nil))
:align-self
(if column?
(case val
- :auto i/remove-refactor
- :start i/align-self-row-left-refactor
- :end i/align-self-row-right-refactor
- :center i/align-self-row-center-refactor
- :stretch i/align-self-row-strech
- :baseline i/align-self-row-baseline)
+ :auto i/remove-icon
+ :start i/align-self-row-left
+ :end i/align-self-row-right
+ :center i/align-self-row-center)
(case val
- :auto i/remove-refactor
- :start i/align-self-column-top-refactor
- :end i/align-self-column-bottom-refactor
- :center i/align-self-column-center-refactor
- :stretch i/align-self-column-strech
- :baseline i/align-self-column-baseline))))
+ :auto i/remove-icon
+ :start i/align-self-column-top
+ :end i/align-self-column-bottom
+ :center i/align-self-column-center))))
(defn get-layout-grid-icon
[type val ^boolean column?]
@@ -139,36 +131,32 @@
:align-items
(if column?
(case val
- :auto i/remove-refactor
- :start i/align-self-row-left-refactor
- :end i/align-self-row-right-refactor
- :center i/align-self-row-center-refactor
- :stretch i/align-self-row-strech
- :baseline i/align-self-row-baseline)
+ :auto i/remove-icon
+ :start i/align-self-row-left
+ :end i/align-self-row-right
+ :center i/align-self-row-center)
(case val
- :auto i/remove-refactor
- :start i/align-self-column-top-refactor
- :end i/align-self-column-bottom-refactor
- :center i/align-self-column-center-refactor
- :stretch i/align-self-column-strech
- :baseline i/align-self-column-baseline))
+ :auto i/remove-icon
+ :start i/align-self-column-top
+ :end i/align-self-column-bottom
+ :center i/align-self-column-center))
:justify-items
(if (not column?)
(case val
- :start i/align-content-column-start-refactor
- :center i/align-content-column-center-refactor
- :end i/align-content-column-end-refactor
- :space-around i/align-content-column-around-refactor
- :space-between i/align-content-column-between-refactor
- :stretch i/align-content-column-stretch-refactor)
+ :start i/align-content-column-start
+ :center i/align-content-column-center
+ :end i/align-content-column-end
+ :space-around i/align-content-column-around
+ :space-between i/align-content-column-between
+ :stretch i/align-content-column-stretch)
(case val
- :start i/align-content-row-start-refactor
- :center i/align-content-row-center-refactor
- :end i/align-content-row-end-refactor
- :space-around i/align-content-row-around-refactor
- :space-between i/align-content-row-between-refactor
- :stretch i/align-content-row-stretch-refactor))))
+ :start i/align-content-row-start
+ :center i/align-content-row-center
+ :end i/align-content-row-end
+ :space-around i/align-content-row-around
+ :space-between i/align-content-row-between
+ :stretch i/align-content-row-stretch))))
(mf/defc direction-row-flex
{::mf/props :obj
@@ -204,7 +192,7 @@
"No wrap"
"Wrap")
:on-click on-click}
- i/wrap-refactor])
+ i/wrap])
(mf/defc align-row
{::mf/props :obj}
@@ -347,7 +335,7 @@
[:div {:class (stl/css :padding-simple)
:title "Vertical padding"}
[:span {:class (stl/css :icon)}
- i/padding-top-bottom-refactor]
+ i/padding-top-bottom]
[:> numeric-input*
{:class (stl/css :numeric-input)
:placeholder "--"
@@ -361,7 +349,7 @@
:title "Horizontal padding"}
[:span {:class (stl/css :icon)}
- i/padding-left-right-refactor]
+ i/padding-left-right]
[:> numeric-input*
{:className (stl/css :numeric-input)
:placeholder "--"
@@ -404,7 +392,7 @@
[:div {:class (stl/css :padding-multiple)
:title "Top padding"}
[:span {:class (stl/css :icon)}
- i/padding-top-refactor]
+ i/padding-top]
[:> numeric-input*
{:class (stl/css :numeric-input)
:placeholder "--"
@@ -419,7 +407,7 @@
[:div {:class (stl/css :padding-multiple)
:title "Right padding"}
[:span {:class (stl/css :icon)}
- i/padding-right-refactor]
+ i/padding-right]
[:> numeric-input*
{:class (stl/css :numeric-input)
:placeholder "--"
@@ -434,7 +422,7 @@
[:div {:class (stl/css :padding-multiple)
:title "Bottom padding"}
[:span {:class (stl/css :icon)}
- i/padding-bottom-refactor]
+ i/padding-bottom]
[:> numeric-input*
{:class (stl/css :numeric-input)
:placeholder "--"
@@ -449,7 +437,7 @@
[:div {:class (stl/css :padding-multiple)
:title "Left padding"}
[:span {:class (stl/css :icon)}
- i/padding-left-refactor]
+ i/padding-left]
[:> numeric-input*
{:class (stl/css :numeric-input)
:placeholder "--"
@@ -492,9 +480,10 @@
[:button {:class (stl/css-case
:padding-toggle true
:selected (= type :multiple))
+ :title (tr "workspace.layout_grid.editor.padding.expand")
:data-type (d/name type)
:on-click on-type-change'}
- i/padding-extended-refactor]]))
+ i/padding-extended]]))
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; GAP
@@ -551,7 +540,7 @@
:row-gap true
:disabled row-gap-disabled?)
:title "Row gap"}
- [:span {:class (stl/css :icon)} i/gap-vertical-refactor]
+ [:span {:class (stl/css :icon)} i/gap-vertical]
[:> numeric-input*
{:class (stl/css :numeric-input true)
:no-validate true
@@ -570,7 +559,7 @@
:column-gap true
:disabled col-gap-disabled?)
:title "Column gap"}
- [:span {:class (stl/css :icon)} i/gap-horizontal-refactor]
+ [:span {:class (stl/css :icon)} i/gap-horizontal]
[:> numeric-input*
{:class (stl/css :numeric-input true)
:no-validate true
@@ -757,7 +746,7 @@
[:div {:class (stl/css :track-info-container)}
[:div {:class (stl/css :track-info-dir-icon)
:on-click handle-select-track}
- (if is-column i/flex-vertical-refactor i/flex-horizontal-refactor)]
+ (if is-column i/flex-vertical i/flex-horizontal)]
[:div {:class (stl/css :track-info-value)}
[:> numeric-input* {:no-validate true
@@ -778,7 +767,7 @@
[:button {:class (stl/css :remove-track-btn)
:on-click #(remove-element type index)}
- i/remove-refactor]]))
+ i/remove-icon]]))
(mf/defc grid-columns-row
{::mf/props :obj}
@@ -801,11 +790,11 @@
[:div {:class (stl/css :grid-tracks)}
[:div {:class (stl/css :grid-track-header)}
- [:button {:class (stl/css :expand-icon) :on-click toggle} i/menu-refactor]
+ [:button {:class (stl/css :expand-icon) :on-click toggle} i/menu]
[:div {:class (stl/css :track-title) :on-click toggle}
[:div {:class (stl/css :track-name) :title track-name} track-name]
[:div {:class (stl/css :track-detail) :title track-detail} track-detail]]
- [:button {:class (stl/css :add-column) :on-click add-track} i/add-refactor]]
+ [:button {:class (stl/css :add-column) :on-click add-track} i/add]]
(when expanded?
[:& h/sortable-container {}
@@ -1014,7 +1003,7 @@
[:*
[:button {:class (stl/css :add-layout)
:on-click on-toggle-dropdown-visibility}
- i/menu-refactor]
+ i/menu]
[:& dropdown {:show show-dropdown?
:on-close on-hide-dropdown}
@@ -1031,14 +1020,14 @@
(when has-layout?
[:button {:class (stl/css :remove-layout)
:on-click on-remove-layout}
- i/remove-refactor])]
+ i/remove-icon])]
[:div {:class (stl/css :title-actions)}
(if ^boolean grid-enabled?
[:*
[:button {:class (stl/css :add-layout)
:on-click on-toggle-dropdown-visibility}
- i/add-refactor]
+ i/add]
[:& dropdown {:show show-dropdown?
:on-close on-hide-dropdown}
@@ -1055,11 +1044,11 @@
[:button {:class (stl/css :add-layout)
:data-type "flex"
:on-click on-add-layout}
- i/add-refactor])
+ i/add])
(when has-layout?
[:button {:class (stl/css :remove-layout)
:on-click on-remove-layout}
- i/remove-refactor])])]]
+ i/remove-icon])])]]
(when (and ^boolean open?
^boolean has-layout?
@@ -1085,7 +1074,7 @@
[:button {:on-click open-flex-help
:class (stl/css :help-button)}
- i/help-refactor]]
+ i/help]]
(when (= :wrap wrap-type)
[:div {:class (stl/css :third-row)}
[:& align-content-row {:is-column is-column
@@ -1108,7 +1097,7 @@
[:div {:class (stl/css :edit-grid-wrapper)}
[:& grid-edit-mode {:id (first ids)}]
[:button {:on-click open-grid-help
- :class (stl/css :help-button)} i/help-refactor]])
+ :class (stl/css :help-button)} i/help]])
[:div {:class (stl/css :row :first-row)}
[:div {:class (stl/css :direction-edit)}
@@ -1285,7 +1274,7 @@
[:div {:class (stl/css :row)}
[:div {:class (stl/css :grid-layout-menu-title)} "GRID LAYOUT"]
[:button {:on-click open-grid-help
- :class (stl/css :help-button)} i/help-refactor]
+ :class (stl/css :help-button)} i/help]
[:button {:class (stl/css :exit-btn)
:on-click #(st/emit! (udw/clear-edition-mode))}
(tr "workspace.layout_grid.editor.options.exit")]]
@@ -1315,7 +1304,7 @@
[:button {:on-click handle-locate-grid
:class (stl/css :locate-button)
:title (tr "workspace.layout_grid.editor.top-bar.locate.tooltip")}
- i/locate-refactor]]
+ i/locate]]
[:div {:class (stl/css :row)}
[:& gap-section {:on-change on-gap-change
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.scss
index 62ce26e4f..a51118e29 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.scss
@@ -113,7 +113,7 @@
.padding-simple {
@extend .input-element;
- width: $s-108;
+ max-width: $s-108;
}
}
@@ -124,7 +124,7 @@
.padding-multiple {
@extend .input-element;
- width: $s-108;
+ max-width: $s-108;
}
}
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs
index 6f23f9ae2..5092d025b 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs
@@ -80,7 +80,7 @@
[:div {:class (stl/css :vertical-margin)
:title "Vertical margin"}
[:span {:class (stl/css :icon)}
- i/margin-top-bottom-refactor]
+ i/margin-top-bottom]
[:> numeric-input* {:class (stl/css :numeric-input)
:placeholder "--"
:data-name "m1"
@@ -93,7 +93,7 @@
[:div {:class (stl/css :horizontal-margin)
:title "Horizontal margin"}
[:span {:class (stl/css :icon)}
- i/margin-left-right-refactor]
+ i/margin-left-right]
[:> numeric-input* {:class (stl/css :numeric-input)
:placeholder "--"
:data-name "m2"
@@ -133,7 +133,7 @@
[:div {:class (stl/css :top-margin)
:title "Top margin"}
[:span {:class (stl/css :icon)}
- i/margin-top-refactor]
+ i/margin-top]
[:> numeric-input* {:class (stl/css :numeric-input)
:placeholder "--"
:data-name "m1"
@@ -145,7 +145,7 @@
[:div {:class (stl/css :right-margin)
:title "Right margin"}
[:span {:class (stl/css :icon)}
- i/margin-right-refactor]
+ i/margin-right]
[:> numeric-input* {:class (stl/css :numeric-input)
:placeholder "--"
:data-name "m2"
@@ -158,7 +158,7 @@
[:div {:class (stl/css :bottom-margin)
:title "Bottom margin"}
[:span {:class (stl/css :icon)}
- i/margin-bottom-refactor]
+ i/margin-bottom]
[:> numeric-input* {:class (stl/css :numeric-input)
:placeholder "--"
:data-name "m3"
@@ -171,7 +171,7 @@
[:div {:class (stl/css :left-margin)
:title "Left margin"}
[:span {:class (stl/css :icon)}
- i/margin-left-refactor]
+ i/margin-left]
[:> numeric-input* {:class (stl/css :numeric-input)
:placeholder "--"
:data-name "m4"
@@ -216,7 +216,7 @@
:selected (= type :multiple))
:title "Margin - multiple"
:on-click on-type-change'}
- i/margin-refactor]]))
+ i/margin]]))
(mf/defc element-behaviour-horizontal
{::mf/props :obj
@@ -236,20 +236,20 @@
[:& radio-button
{:value "fix"
- :icon i/fixed-width-refactor
+ :icon i/fixed-width
:title "Fix width"
:id "behaviour-h-fix"}]
(when has-fill
[:& radio-button
{:value "fill"
- :icon i/fill-content-refactor
+ :icon i/fill-content
:title "Width 100%"
:id "behaviour-h-fill"}])
(when is-auto
[:& radio-button
{:value "auto"
- :icon i/hug-content-refactor
+ :icon i/hug-content
:title "Fit content"
:id "behaviour-h-auto"}])]])
@@ -271,7 +271,7 @@
[:& radio-button
{:value "fix"
- :icon i/fixed-width-refactor
+ :icon i/fixed-width
:icon-class (stl/css :rotated)
:title "Fix height"
:id "behaviour-v-fix"}]
@@ -279,14 +279,14 @@
(when has-fill
[:& radio-button
{:value "fill"
- :icon i/fill-content-refactor
+ :icon i/fill-content
:icon-class (stl/css :rotated)
:title "Height 100%"
:id "behaviour-v-fill"}])
(when is-auto
[:& radio-button
{:value "auto"
- :icon i/hug-content-refactor
+ :icon i/hug-content
:icon-class (stl/css :rotated)
:title "Fit content"
:id "behaviour-v-auto"}])]])
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs
index a3aaf2422..13c4ffe53 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs
@@ -52,10 +52,10 @@
:svg-raw #{:size :position :rotation}
:text #{:size :position :rotation}})
-(def ^:private clip-content-icon (i/icon-xref :clip-content-refactor (stl/css :checkbox-button)))
-(def ^:private play-icon (i/icon-xref :play-refactor (stl/css :checkbox-button)))
-(def ^:private locked-icon (i/icon-xref :detach-refactor (stl/css :lock-ratio-icon)))
-(def ^:private unlocked-icon (i/icon-xref :detached-refactor (stl/css :lock-ratio-icon)))
+(def ^:private clip-content-icon (i/icon-xref :clip-content (stl/css :checkbox-button)))
+(def ^:private play-icon (i/icon-xref :play (stl/css :checkbox-button)))
+(def ^:private locked-icon (i/icon-xref :detach (stl/css :lock-ratio-icon)))
+(def ^:private unlocked-icon (i/icon-xref :detached (stl/css :lock-ratio-icon)))
(defn select-measure-keys
"Consider some shapes can be drawn from bottom to top or from left to right"
@@ -353,7 +353,7 @@
:opened show-presets-dropdown?)
:on-click open-presets}
[:span {:class (stl/css :select-name)} (tr "workspace.options.size-presets")]
- [:span {:class (stl/css :collapsed-icon)} i/arrow-refactor]
+ [:span {:class (stl/css :collapsed-icon)} i/arrow]
[:& dropdown {:show show-presets-dropdown?
:on-close close-presets}
@@ -377,15 +377,15 @@
[:span {:class (stl/css :preset-name)} (:name size-preset)]
[:span {:class (stl/css :preset-size)} (:width size-preset) " x " (:height size-preset)]]
(when preset-match
- [:span {:class (stl/css :check-icon)} i/tick-refactor])])))]]]
+ [:span {:class (stl/css :check-icon)} i/tick])])))]]]
[:& radio-buttons {:selected (or (d/name orientation) "")
:on-change on-orientation-change
:name "frame-otientation"}
- [:& radio-button {:icon i/size-vertical-refactor
+ [:& radio-button {:icon i/size-vertical
:value "vert"
:id "size-vertical"}]
- [:& radio-button {:icon i/size-horizontal-refactor
+ [:& radio-button {:icon i/size-horizontal
:value "horiz"
:id "size-horizontal"}]]])
(when (options :size)
@@ -449,7 +449,7 @@
(when (options :rotation)
[:div {:class (stl/css :rotation)
:title (tr "workspace.options.rotation")}
- [:span {:class (stl/css :icon)} i/rotation-refactor]
+ [:span {:class (stl/css :icon)} i/rotation]
[:> numeric-input*
{:no-validate true
:min -359
@@ -467,7 +467,7 @@
(= radius-mode :radius-1)
[:div {:class (stl/css :radius-1)
:title (tr "workspace.options.radius")}
- [:span {:class (stl/css :icon)} i/corner-radius-refactor]
+ [:span {:class (stl/css :icon)} i/corner-radius]
[:> numeric-input*
{:placeholder (if (= :multiple (:rx values)) (tr "settings.multiple") "--")
:ref radius-input-ref
@@ -479,7 +479,7 @@
@radius-multi?
[:div {:class (stl/css :radius-1)
:title (tr "workspace.options.radius")}
- [:span {:class (stl/css :icon)} i/corner-radius-refactor]
+ [:span {:class (stl/css :icon)} i/corner-radius]
[:input.input-text
{:type "number"
:placeholder "Mixed"
@@ -532,7 +532,7 @@
(tr "workspace.options.radius.all-corners")
(tr "workspace.options.radius.single-corners"))
:on-click toggle-radius-mode}
- i/corner-radius-refactor]])])
+ i/corner-radius]])])
(when (or (options :clip-content) (options :show-in-viewer))
[:div {:class (stl/css :clip-show)}
(when (options :clip-content)
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs
index 23881b43d..b3a8072a0 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs
@@ -160,7 +160,7 @@
[:button {:class (stl/css-case :more-options true
:selected open-shadow)
:on-click on-toggle-open-shadow}
- i/menu-refactor]
+ i/menu]
[:div {:class (stl/css :type-select)}
[:& select
{:class (stl/css :shadow-type-select)
@@ -171,11 +171,11 @@
[:button {:class (stl/css :action-btn)
:on-click toggle-visibility}
(if hidden?
- i/hide-refactor
- i/shown-refactor)]
+ i/hide
+ i/shown)]
[:button {:class (stl/css :action-btn)
:on-click on-remove-shadow}
- i/remove-refactor]]]
+ i/remove-icon]]]
(when open-shadow
[:& advanced-options {:class (stl/css :shadow-advanced-options)
:visible? open-shadow
@@ -298,7 +298,7 @@
(when-not (= :multiple shadows)
[:button {:class (stl/css :add-shadow)
- :on-click on-add-shadow} i/add-refactor])]]
+ :on-click on-add-shadow} i/add])]]
(when open?
(cond
@@ -309,7 +309,7 @@
[:div {:class (stl/css :actions)}
[:button {:class (stl/css :action-btn)
:on-click on-remove-all}
- i/remove-refactor]]]]
+ i/remove-icon]]]]
(seq shadows)
[:& h/sortable-container {}
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs
index 13a2984a4..3539f693f 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs
@@ -171,7 +171,7 @@
:class (stl/css-case :title-spacing-stroke (not has-strokes?))}
[:button {:class (stl/css :add-stroke)
- :on-click on-add-stroke} i/add-refactor]]]
+ :on-click on-add-stroke} i/add]]]
(when open?
[:div {:class (stl/css-case :element-content true
:empty-content (not has-strokes?))}
@@ -182,7 +182,7 @@
(tr "settings.multiple")]
[:button {:on-click handle-remove-all
:class (stl/css :remove-btn)}
- i/remove-refactor]]
+ i/remove-icon]]
(seq strokes)
[:& h/sortable-container {}
(for [[index value] (d/enumerate (:strokes values []))]
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/svg_attrs.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/svg_attrs.cljs
index 3891f5556..11f126428 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/svg_attrs.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/svg_attrs.cljs
@@ -41,7 +41,7 @@
[:div {:class (stl/css :attr-actions)}
[:button {:class (stl/css :attr-action-btn)
:on-click handle-delete}
- i/remove-refactor]]]
+ i/remove-icon]]]
[:div {:class (stl/css :attr-nested-content)}
[:div {:class (stl/css :attr-title)}
(str (d/name (last attr)))]
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.cljs
index 058421aab..5fbb3b840 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.cljs
@@ -45,19 +45,19 @@
[:& radio-button {:value "left"
:id "text-align-left"
:title (tr "workspace.options.text-options.text-align-left" (sc/get-tooltip :text-align-left))
- :icon i/text-align-left-refactor}]
+ :icon i/text-align-left}]
[:& radio-button {:value "center"
:id "text-align-center"
:title (tr "workspace.options.text-options.text-align-center" (sc/get-tooltip :text-align-center))
- :icon i/text-align-center-refactor}]
+ :icon i/text-align-center}]
[:& radio-button {:value "right"
:id "text-align-right"
:title (tr "workspace.options.text-options.text-align-right" (sc/get-tooltip :text-align-right))
- :icon i/text-align-right-refactor}]
+ :icon i/text-align-right}]
[:& radio-button {:value "justify"
:id "text-align-justify"
:title (tr "workspace.options.text-options.text-align-justify" (sc/get-tooltip :text-align-justify))
- :icon i/text-justify-refactor}]]]))
+ :icon i/text-justify}]]]))
(mf/defc text-direction-options
[{:keys [values on-change on-blur] :as props}]
@@ -80,12 +80,12 @@
:type "checkbox"
:id "ltr-text-direction"
:title (tr "workspace.options.text-options.direction-ltr")
- :icon i/text-ltr-refactor}]
+ :icon i/text-ltr}]
[:& radio-button {:value "rtl"
:type "checkbox"
:id "rtl-text-direction"
:title (tr "workspace.options.text-options.direction-rtl")
- :icon i/text-rtl-refactor}]]]))
+ :icon i/text-rtl}]]]))
(mf/defc vertical-align
[{:keys [values on-change on-blur] :as props}]
@@ -105,15 +105,15 @@
[:& radio-button {:value "top"
:id "vertical-text-align-top"
:title (tr "workspace.options.text-options.align-top")
- :icon i/text-top-refactor}]
+ :icon i/text-top}]
[:& radio-button {:value "center"
:id "vertical-text-align-center"
:title (tr "workspace.options.text-options.align-middle")
- :icon i/text-middle-refactor}]
+ :icon i/text-middle}]
[:& radio-button {:value "bottom"
:id "vertical-text-align-bottom"
:title (tr "workspace.options.text-options.align-bottom")
- :icon i/text-bottom-refactor}]]]))
+ :icon i/text-bottom}]]]))
(mf/defc grow-options
[{:keys [ids values on-blur] :as props}]
@@ -139,15 +139,15 @@
[:& radio-button {:value "fixed"
:id "text-fixed-grow"
:title (tr "workspace.options.text-options.grow-fixed")
- :icon i/text-fixed-refactor}]
+ :icon i/text-fixed}]
[:& radio-button {:value "auto-width"
:id "text-auto-width-grow"
:title (tr "workspace.options.text-options.grow-auto-width")
- :icon i/text-auto-width-refactor}]
+ :icon i/text-auto-width}]
[:& radio-button {:value "auto-height"
:id "text-auto-height-grow"
:title (tr "workspace.options.text-options.grow-auto-height")
- :icon i/text-auto-height-refactor}]]]))
+ :icon i/text-auto-height}]]]))
(mf/defc text-decoration-options
[{:keys [values on-change on-blur] :as props}]
@@ -169,12 +169,12 @@
:type "checkbox"
:id "underline-text-decoration"
:title (tr "workspace.options.text-options.underline" (sc/get-tooltip :underline))
- :icon i/text-underlined-refactor}]
+ :icon i/text-underlined}]
[:& radio-button {:value "line-through"
:type "checkbox"
:id "line-through-text-decoration"
:title (tr "workspace.options.text-options.strikethrough" (sc/get-tooltip :line-through))
- :icon i/text-stroked-refactor}]]]))
+ :icon i/text-stroked}]]]))
(mf/defc text-menu
{::mf/wrap [mf/memo]}
@@ -291,7 +291,7 @@
(when (and (not typography) (not multiple?))
[:button {:class (stl/css :add-typography)
:on-click on-convert-to-typography}
- i/add-refactor])]]
+ i/add])]]
(when main-menu-open?
[:div {:class (stl/css :element-content)}
@@ -309,7 +309,7 @@
[:div {:class (stl/css :multiple-typography-button)
:on-click handle-detach-typography
:title (tr "workspace.libraries.text.multiple-typography-tooltip")}
- i/detach-refactor]]
+ i/detach]]
:else
[:> text-options opts])
@@ -319,7 +319,7 @@
[:> grow-options opts]
[:button {:class (stl/css :more-options)
:on-click toggle-more-options}
- i/menu-refactor]]
+ i/menu]]
(when more-options-open?
[:div {:class (stl/css :text-decoration-options)}
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs
index 5f945a406..44d3de561 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs
@@ -77,7 +77,7 @@
[:div {:class (stl/css-case :font-item true
:selected current?)}
[:span {:class (stl/css :label)} (:name font)]
- [:span {:class (stl/css :icon)} (when current? i/tick-refactor)]]]))
+ [:span {:class (stl/css :icon)} (when current? i/tick)]]]))
(declare row-renderer)
@@ -144,8 +144,8 @@
(on-select font)
(on-close)))]
- (mf/with-effect []
- (st/emit! (fts/load-recent-fonts)))
+ (mf/with-effect [fonts]
+ (st/emit! (fts/load-recent-fonts fonts)))
(mf/with-effect [fonts]
(let [key (events/listen js/document "keydown" on-key-down)]
@@ -303,7 +303,7 @@
[:span {:class (stl/css :name)}
(:name font)]
[:span {:class (stl/css :icon)}
- i/arrow-refactor]]
+ i/arrow]]
:else
(tr "dashboard.fonts.deleted-placeholder"))]
@@ -362,7 +362,7 @@
[:div {:class (stl/css :line-height)}
[:span {:class (stl/css :icon)
:alt (tr "workspace.options.text-options.line-height")}
- i/text-lineheight-refactor]
+ i/text-lineheight]
[:> numeric-input*
{:min -200
:max 200
@@ -379,7 +379,7 @@
[:span
{:class (stl/css :icon)
:alt (tr "workspace.options.text-options.letter-spacing")}
- i/text-letterspacing-refactor]
+ i/text-letterspacing]
[:> numeric-input*
{:min -200
:max 200
@@ -405,15 +405,15 @@
[:& radio-buttons {:selected text-transform
:on-change handle-change
:name "text-transform"}
- [:& radio-button {:icon i/text-uppercase-refactor
+ [:& radio-button {:icon i/text-uppercase
:type "checkbox"
:value "uppercase"
:id "text-transform-uppercase"}]
- [:& radio-button {:icon i/text-mixed-refactor
+ [:& radio-button {:icon i/text-mixed
:type "checkbox"
:value "capitalize"
:id "text-transform-capitalize"}]
- [:& radio-button {:icon i/text-lowercase-refactor
+ [:& radio-button {:icon i/text-lowercase
:type "checkbox"
:value "lowercase"
:id "text-transform-lowercase"}]]]))
@@ -441,6 +441,7 @@
[{:keys [visible? typography editable? name-input-ref on-close on-change on-name-blur local? navigate-to-library on-key-down]}]
(let [ref (mf/use-ref nil)
font-data (fonts/get-font-data (:font-id typography))]
+ (fonts/ensure-loaded! (:font-id typography))
(mf/use-effect
(mf/deps visible?)
@@ -472,7 +473,7 @@
[:div {:class (stl/css :action-btn)
:on-click on-close}
- i/tick-refactor]]
+ i/tick]]
[:& text-options {:values typography
:on-change on-change
@@ -494,7 +495,7 @@
(:name font-data)]
[:div {:class (stl/css :action-btn)
:on-click on-close}
- i/menu-refactor]]
+ i/menu]]
[:div {:class (stl/css :info-row)}
[:span {:class (stl/css :info-label)} (tr "workspace.assets.typography.font-variant-id")]
@@ -624,10 +625,10 @@
(when ^boolean on-detach
[:button {:class (stl/css :element-set-actions-button)
:on-click on-detach}
- i/detach-refactor])
+ i/detach])
[:button {:class (stl/css :menu-btn)
:on-click on-open}
- i/menu-refactor]]]
+ i/menu]]]
[:& typography-advanced-options
{:visible? open?
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.scss
index 1106ea3c1..b5c417a41 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.scss
@@ -351,7 +351,7 @@
right: 0;
height: 100%;
width: 100%;
- z-index: $z-index-3;
+ z-index: $z-index-4;
}
.show-recent {
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs
index 121efb9d7..31dd285cb 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs
@@ -15,7 +15,7 @@
[app.main.data.workspace.libraries :as dwl]
[app.main.refs :as refs]
[app.main.store :as st]
- [app.main.ui.components.color-bullet-new :as cbn]
+ [app.main.ui.components.color-bullet :as cb]
[app.main.ui.components.color-input :refer [color-input*]]
[app.main.ui.components.numeric-input :refer [numeric-input*]]
[app.main.ui.context :as ctx]
@@ -29,7 +29,7 @@
(def ^:private detach-icon
- (i/icon-xref :detach-refactor (stl/css :detach-icon)))
+ (i/icon-xref :detach (stl/css :detach-icon)))
(defn opacity->string
[opacity]
@@ -201,12 +201,12 @@
:editing editing-text?
:gradient-name-wrapper gradient-color?)}
[:div {:class (stl/css :color-bullet-wrapper)}
- [:& cbn/color-bullet {:color (cond-> color
- (nil? color-name) (assoc
- :id nil
- :file-id nil))
- :mini? true
- :on-click handle-click-color}]]
+ [:& cb/color-bullet {:color (cond-> color
+ (nil? color-name) (assoc
+ :id nil
+ :file-id nil))
+ :mini? true
+ :on-click handle-click-color}]]
(cond
;; Rendering a color with ID
library-color?
@@ -265,9 +265,9 @@
(when (some? on-remove)
[:button {:class (stl/css :remove-btn)
- :on-click on-remove} i/remove-refactor])
+ :on-click on-remove} i/remove-icon])
(when select-only
[:button {:class (stl/css :select-btn)
:on-click handle-select}
- i/move-refactor])]))
+ i/move])]))
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.cljs
index 9548d8b28..9f545aed7 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.cljs
@@ -59,13 +59,13 @@
(fn [color]
(on-color-change index color)))
- on-color-detach-refactor
+ on-color-detach
(mf/use-callback
(mf/deps index on-color-detach)
(fn [color]
(on-color-detach index color)))
- on-remove-refactor
+ on-remove
(mf/use-callback
(mf/deps index on-remove)
#(on-remove index))
@@ -123,14 +123,14 @@
stroke-caps-options
[{:value nil :label (tr "workspace.options.stroke-cap.none")}
:separator
- {:value :line-arrow :label (tr "workspace.options.stroke-cap.line-arrow-short") :icon :stroke-arrow-refactor}
- {:value :triangle-arrow :label (tr "workspace.options.stroke-cap.triangle-arrow-short") :icon :stroke-triangle-refactor}
- {:value :square-marker :label (tr "workspace.options.stroke-cap.square-marker-short") :icon :stroke-rectangle-refactor}
- {:value :circle-marker :label (tr "workspace.options.stroke-cap.circle-marker-short") :icon :stroke-circle-refactor}
- {:value :diamond-marker :label (tr "workspace.options.stroke-cap.diamond-marker-short") :icon :stroke-diamond-refactor}
+ {:value :line-arrow :label (tr "workspace.options.stroke-cap.line-arrow-short") :icon :stroke-arrow}
+ {:value :triangle-arrow :label (tr "workspace.options.stroke-cap.triangle-arrow-short") :icon :stroke-triangle}
+ {:value :square-marker :label (tr "workspace.options.stroke-cap.square-marker-short") :icon :stroke-rectangle}
+ {:value :circle-marker :label (tr "workspace.options.stroke-cap.circle-marker-short") :icon :stroke-circle}
+ {:value :diamond-marker :label (tr "workspace.options.stroke-cap.diamond-marker-short") :icon :stroke-diamond}
:separator
- {:value :round :label (tr "workspace.options.stroke-cap.round") :icon :stroke-rounded-refactor}
- {:value :square :label (tr "workspace.options.stroke-cap.square") :icon :stroke-squared-refactor}]
+ {:value :round :label (tr "workspace.options.stroke-cap.round") :icon :stroke-rounded}
+ {:value :square :label (tr "workspace.options.stroke-cap.square") :icon :stroke-squared}]
on-cap-switch
(mf/use-callback
@@ -152,8 +152,8 @@
:index index
:title title
:on-change on-color-change-refactor
- :on-detach on-color-detach-refactor
- :on-remove on-remove-refactor
+ :on-detach on-color-detach
+ :on-remove on-remove
:disable-drag disable-drag
:on-focus on-focus
:select-on-focus select-on-focus
@@ -164,7 +164,7 @@
[:div {:class (stl/css :stroke-width-input-element)
:title (tr "workspace.options.stroke-width")}
[:span {:class (stl/css :icon)}
- i/stroke-size-refactor]
+ i/stroke-size]
[:> numeric-input*
{:min 0
:className (stl/css :stroke-width-input)
@@ -201,7 +201,7 @@
[:button {:class (stl/css :swap-caps-btn)
:on-click on-cap-switch}
- i/switch-refactor]
+ i/switch]
[:div {:class (stl/css :cap-select)}
[:& select
diff --git a/frontend/src/app/main/ui/workspace/sidebar/shortcuts.cljs b/frontend/src/app/main/ui/workspace/sidebar/shortcuts.cljs
index 8f0a2bbad..4fde27d0c 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/shortcuts.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/shortcuts.cljs
@@ -171,15 +171,15 @@
;; shortcuts.toggle-assets
;; shortcuts.toggle-colorpalette
;; shortcuts.toggle-focus-mode
- ;; shortcuts.toggle-grid
+ ;; shortcuts.toggle-guides
;; shortcuts.toggle-history
;; shortcuts.toggle-layers
;; shortcuts.toggle-lock
;; shortcuts.toggle-lock-size
;; shortcuts.toggle-rules
;; shortcuts.scale
- ;; shortcuts.toggle-snap-grid
- ;; shortcuts.toggle-snap-guide
+ ;; shortcuts.toggle-snap-guides
+ ;; shortcuts.toggle-snap-ruler-guide
;; shortcuts.toggle-textpalette
;; shortcuts.toggle-visibility
;; shortcuts.toggle-zoom-style
@@ -268,7 +268,7 @@
(stl/css :subsection-title)
(stl/css :section-title))}
[:span {:class (stl/css-case :open is-visible?
- :collapsed-shortcuts true)} i/arrow-refactor]
+ :collapsed-shortcuts true)} i/arrow]
[:span {:class (if is-sub?
(stl/css :subsection-name)
(stl/css :section-name))} name]])
@@ -473,14 +473,14 @@
[:div {:class (stl/css :shortcuts-title)} (tr "shortcuts.title")]
[:div {:class (stl/css :shortcuts-close-button)
:on-click close-fn}
- i/close-refactor]]
+ i/close]]
[:div {:class (stl/css :search-field)}
[:& search-bar {:on-change on-search-term-change-2
:clear-action on-search-clear-click
:value @filter-term
:placeholder (tr "shortcuts.title")
- :icon (mf/html [:span {:class (stl/css :search-icon)} i/search-refactor])}]]
+ :icon (mf/html [:span {:class (stl/css :search-icon)} i/search])}]]
(if match-any?
[:div {:class (stl/css :shortcuts-list)}
diff --git a/frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs b/frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs
index f40719327..975615048 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs
@@ -17,6 +17,7 @@
[app.main.ui.context :as ctx]
[app.main.ui.hooks :as hooks]
[app.main.ui.icons :as i]
+ [app.main.ui.notifications.badge :refer [badge-notification]]
[app.util.dom :as dom]
[app.util.i18n :as i18n :refer [tr]]
[app.util.keyboard :as kbd]
@@ -131,7 +132,7 @@
:on-double-click on-double-click
:on-context-menu on-context-menu}
[:div {:class (stl/css :page-icon)}
- i/document-refactor]
+ i/document]
(if editing?
[:*
@@ -148,7 +149,7 @@
[:div {:class (stl/css :page-actions)}
(when (and deletable? (not workspace-read-only?))
[:button {:on-click on-delete}
- i/delete-refactor])]])]]))
+ i/delete])]])]]))
;; --- Page Item Wrapper
@@ -218,11 +219,12 @@
:class (stl/css :title-spacing-sitemap)}
(if ^boolean read-only?
- [:div {:class (stl/css :view-only-mode)}
- (tr "labels.view-only")]
+ [:& badge-notification {:is-focus true
+ :size :small
+ :content (tr "labels.view-only")}]
[:button {:class (stl/css :add-page)
:on-click on-create}
- i/add-refactor])]
+ i/add])]
[:div {:class (stl/css :tool-window-content)}
[:& pages-list {:file file :key (:id file)}]]]))
diff --git a/frontend/src/app/main/ui/workspace/sidebar/sitemap.scss b/frontend/src/app/main/ui/workspace/sidebar/sitemap.scss
index a02e38df3..1363ea1c5 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/sitemap.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/sitemap.scss
@@ -33,17 +33,6 @@
}
}
-.view-only-mode {
- @include flexCenter;
- @include bodySmallTypography;
- height: $s-20;
- padding: $s-4 $s-6;
- margin-right: $s-12;
- border: $s-1 solid var(--tag-background-color);
- border-radius: $br-6;
- color: var(--tag-background-color);
-}
-
.resize-area {
position: absolute;
bottom: calc(-1 * $s-8);
@@ -236,6 +225,7 @@
}
.title-spacing-sitemap {
- padding-left: $s-8;
- margin-top: $s-8;
+ padding-inline-start: $s-8;
+ margin-block-start: $s-8;
+ padding-inline-end: $s-20;
}
diff --git a/frontend/src/app/main/ui/workspace/text_palette.cljs b/frontend/src/app/main/ui/workspace/text_palette.cljs
index da432d528..3869a3ec3 100644
--- a/frontend/src/app/main/ui/workspace/text_palette.cljs
+++ b/frontend/src/app/main/ui/workspace/text_palette.cljs
@@ -136,7 +136,7 @@
(when show-arrows?
[:button {:class (stl/css :left-arrow)
:disabled (= offset 0)
- :on-click on-left-arrow-click} i/arrow-refactor])
+ :on-click on-left-arrow-click} i/arrow])
[:div {:class (stl/css :text-palette-content)
:ref container
@@ -164,7 +164,7 @@
(when show-arrows?
[:button {:class (stl/css :right-arrow)
:disabled (= offset max-offset)
- :on-click on-right-arrow-click} i/arrow-refactor])]))
+ :on-click on-right-arrow-click} i/arrow])]))
(mf/defc text-palette
{::mf/wrap [mf/memo]}
diff --git a/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.cljs b/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.cljs
index 8e4988a09..3f1b573df 100644
--- a/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.cljs
+++ b/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.cljs
@@ -21,7 +21,7 @@
shared-libs (mf/deref refs/workspace-libraries)]
[:& dropdown {:show show-menu?
:on-close close-menu}
- [:ul {:class (stl/css :workspace-context-menu)}
+ [:ul {:class (stl/css :text-context-menu)}
(for [[idx cur-library] (map-indexed vector (vals shared-libs))]
(let [typographies (-> cur-library (get-in [:data :typographies]) vals)]
[:li
@@ -38,7 +38,7 @@
(when (= selected (:id cur-library))
[:span {:class (stl/css :icon-wrapper)}
- i/tick-refactor])]))
+ i/tick])]))
[:li
{:class (stl/css-case :file-library true
@@ -52,4 +52,4 @@
(dm/str "(" (count file-typographies) ")")]]
(when (= selected :file)
[:span {:class (stl/css :icon-wrapper)}
- i/tick-refactor])]]]))
+ i/tick])]]]))
diff --git a/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.scss b/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.scss
index e1b2bb08d..664738562 100644
--- a/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.scss
+++ b/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.scss
@@ -6,14 +6,14 @@
@import "refactor/common-refactor.scss";
-.workspace-context-menu {
+.text-context-menu {
position: absolute;
left: auto;
bottom: var(--height);
max-width: $s-480;
padding: $s-4;
margin: 0 0 $s-4 0;
- z-index: $z-index-3;
+ z-index: $z-index-4;
border-radius: $br-10;
background-color: var(--context-menu-background-color);
diff --git a/frontend/src/app/main/ui/workspace/top_toolbar.cljs b/frontend/src/app/main/ui/workspace/top_toolbar.cljs
index e0160222d..979c84e19 100644
--- a/frontend/src/app/main/ui/workspace/top_toolbar.cljs
+++ b/frontend/src/app/main/ui/workspace/top_toolbar.cljs
@@ -58,7 +58,7 @@
:aria-label (tr "workspace.toolbar.image" (sc/get-tooltip :insert-image))
:on-click on-click
:class (stl/css :main-toolbar-options-button)}
- i/img-refactor
+ i/img
[:& file-uploader
{:input-id "image-upload"
:accept cm/str-image-types
@@ -119,7 +119,7 @@
(when-not ^boolean read-only?
[:aside {:class (stl/css-case :main-toolbar true
- :not-rulers-present (not rulers?)
+ :main-toolbar-no-rulers (not rulers?)
:main-toolbar-hidden hide-toolbar?)}
[:ul {:class (stl/css :main-toolbar-options)}
[:li
@@ -130,7 +130,7 @@
:selected (and (nil? selected-drawtool)
(not edition)))
:on-click interrupt}
- i/move-refactor]]
+ i/move]]
[:*
[:li
[:button
@@ -140,7 +140,7 @@
:on-click select-drawtool
:data-tool "frame"
:data-test "artboard-btn"}
- i/board-refactor]]
+ i/board]]
[:li
[:button
{:title (tr "workspace.toolbar.rect" (sc/get-tooltip :draw-rect))
@@ -149,7 +149,7 @@
:on-click select-drawtool
:data-tool "rect"
:data-test "rect-btn"}
- i/rectangle-refactor]]
+ i/rectangle]]
[:li
[:button
{:title (tr "workspace.toolbar.ellipse" (sc/get-tooltip :draw-ellipse))
@@ -158,7 +158,7 @@
:on-click select-drawtool
:data-tool "circle"
:data-test "ellipse-btn"}
- i/elipse-refactor]]
+ i/elipse]]
[:li
[:button
{:title (tr "workspace.toolbar.text" (sc/get-tooltip :draw-text))
@@ -166,7 +166,7 @@
:class (stl/css-case :main-toolbar-options-button true :selected (= selected-drawtool :text))
:on-click select-drawtool
:data-tool "text"}
- i/text-refactor]]
+ i/text]]
[:& image-upload]
@@ -178,7 +178,7 @@
:on-click select-drawtool
:data-tool "curve"
:data-test "curve-btn"}
- i/curve-refactor]]
+ i/curve]]
[:li
[:button
{:title (tr "workspace.toolbar.path" (sc/get-tooltip :draw-path))
@@ -187,7 +187,7 @@
:on-click select-drawtool
:data-tool "path"
:data-test "path-btn"}
- i/path-refactor]]
+ i/path]]
(when *assert*
[:li
@@ -195,7 +195,7 @@
{:title "Debugging tool"
:class (stl/css-case :main-toolbar-options-button true :selected (contains? layout :debug-panel))
:on-click toggle-debug-panel}
- i/bug-refactor]])]]
+ i/bug]])]]
[:button {:class (stl/css :toolbar-handler)
:on-click toggle-toolbar}
diff --git a/frontend/src/app/main/ui/workspace/top_toolbar.scss b/frontend/src/app/main/ui/workspace/top_toolbar.scss
index 293956c6c..625e5384e 100644
--- a/frontend/src/app/main/ui/workspace/top_toolbar.scss
+++ b/frontend/src/app/main/ui/workspace/top_toolbar.scss
@@ -9,7 +9,8 @@
.main-toolbar {
cursor: initial;
position: absolute;
- left: calc(50% - $s-160);
+ left: 50%;
+ transform: translateX(-50%);
display: flex;
align-items: center;
flex-direction: column;
@@ -17,19 +18,25 @@
padding: $s-8 $s-16;
border-radius: $s-8;
border: $s-2 solid var(--panel-border-color);
- z-index: $z-index-10;
+ z-index: $z-index-3;
background-color: var(--color-background-primary);
transition:
top 0.3s,
height 0.3s,
opacity 0.3s;
- &:not(.main-toolbar-hidden) {
- top: $s-28;
- }
+
+ --toolbar-position-y: #{$s-28};
+ --toolbar-offset-y: 0px;
+ top: calc(var(--toolbar-position-y) + var(--toolbar-offset-y));
+}
+
+.main-toolbar-no-rulers {
+ --toolbar-position-y: 0px;
+ --toolbar-offset-y: #{$s-8};
}
.main-toolbar-hidden {
- top: $s-24;
+ --toolbar-offset-y: -#{$s-4};
height: $s-16;
z-index: $z-index-1;
border-radius: 0 0 $s-8 $s-8;
@@ -88,13 +95,6 @@
}
}
-.main-toolbar.not-rulers-present {
- top: $s-8;
- &.hidden-toolbar {
- top: $s-0;
- }
-}
-
ul.main-toolbar-panels {
display: none;
}
diff --git a/frontend/src/app/main/ui/workspace/viewport.cljs b/frontend/src/app/main/ui/workspace/viewport.cljs
index 0894f0b84..2a808e627 100644
--- a/frontend/src/app/main/ui/workspace/viewport.cljs
+++ b/frontend/src/app/main/ui/workspace/viewport.cljs
@@ -200,7 +200,7 @@
show-cursor-tooltip? tooltip
show-draw-area? drawing-obj
show-gradient-handlers? (= (count selected) 1)
- show-grids? (contains? layout :display-grid)
+ show-grids? (contains? layout :display-guides)
show-frame-outline? (= transform :move)
show-outlines? (and (nil? transform)
@@ -223,7 +223,7 @@
(= transform :move)
(seq selected))
show-snap-points? (and (or (contains? layout :dynamic-alignment)
- (contains? layout :snap-grid))
+ (contains? layout :snap-guides))
(or drawing-obj transform))
show-selrect? (and selrect (empty? drawing) (not text-editing?))
show-measures? (and (not transform)
diff --git a/frontend/src/app/main/ui/workspace/viewport/comments.cljs b/frontend/src/app/main/ui/workspace/viewport/comments.cljs
index ce44c0292..f75559b5e 100644
--- a/frontend/src/app/main/ui/workspace/viewport/comments.cljs
+++ b/frontend/src/app/main/ui/workspace/viewport/comments.cljs
@@ -7,61 +7,72 @@
(ns app.main.ui.workspace.viewport.comments
(:require-macros [app.main.style :as stl])
(:require
+ [app.common.data.macros :as dm]
[app.main.data.comments :as dcm]
[app.main.data.workspace.comments :as dwcm]
[app.main.refs :as refs]
[app.main.store :as st]
[app.main.ui.comments :as cmt]
- [cuerdas.core :as str]
[okulary.core :as l]
[rumext.v2 :as mf]))
+(defn- update-position
+ [positions {:keys [id] :as thread}]
+ (if (contains? positions id)
+ (-> thread
+ (assoc :position (dm/get-in positions [id :position]))
+ (assoc :frame-id (dm/get-in positions [id :frame-id])))
+ thread))
+
(mf/defc comments-layer
+ {::mf/props :obj}
[{:keys [vbox vport zoom file-id page-id drawing] :as props}]
- (let [pos-x (* (- (:x vbox)) zoom)
- pos-y (* (- (:y vbox)) zoom)
+ (let [vbox-x (dm/get-prop vbox :x)
+ vbox-y (dm/get-prop vbox :y)
+ vport-w (dm/get-prop vport :width)
+ vport-h (dm/get-prop vport :height)
- profile (mf/deref refs/profile)
- users (mf/deref refs/current-file-comments-users)
- local (mf/deref refs/comments-local)
- threads-position-ref (l/derived (l/in [:workspace-data :pages-index page-id :options :comment-threads-position]) st/state)
- threads-position-map (mf/deref threads-position-ref)
- threads-map (mf/deref refs/threads-ref)
+ pos-x (* (- vbox-x) zoom)
+ pos-y (* (- vbox-y) zoom)
- update-thread-position (fn update-thread-position [thread]
- (if (contains? threads-position-map (:id thread))
- (-> thread
- (assoc :position (get-in threads-position-map [(:id thread) :position]))
- (assoc :frame-id (get-in threads-position-map [(:id thread) :frame-id])))
- thread))
+ profile (mf/deref refs/profile)
+ users (mf/deref refs/current-file-comments-users)
+ local (mf/deref refs/comments-local)
- threads (->> (vals threads-map)
- (filter #(= (:page-id %) page-id))
- (mapv update-thread-position)
- (dcm/apply-filters local profile))
+ positions-ref
+ (mf/with-memo [page-id]
+ (-> (l/in [:workspace-data :pages-index page-id :options :comment-threads-position])
+ (l/derived st/state)))
+
+ positions (mf/deref positions-ref)
+ threads-map (mf/deref refs/threads-ref)
+
+ threads
+ (mf/with-memo [threads-map positions local profile]
+ (->> (vals threads-map)
+ (filter #(= (:page-id %) page-id))
+ (mapv (partial update-position positions))
+ (dcm/apply-filters local profile)))
on-draft-cancel
- (mf/use-callback
- #(st/emit! :interrupt))
+ (mf/use-fn #(st/emit! :interrupt))
on-draft-submit
- (mf/use-callback
+ (mf/use-fn
(fn [draft]
(st/emit! (dcm/create-thread-on-workspace draft))))]
- (mf/use-effect
- (mf/deps file-id)
- (fn []
- (st/emit! (dwcm/initialize-comments file-id))
- (fn []
- (st/emit! ::dwcm/finalize))))
+ (mf/with-effect [file-id]
+ (st/emit! (dwcm/initialize-comments file-id))
+ (fn [] (st/emit! ::dwcm/finalize)))
+
[:div {:class (stl/css :comments-section)}
[:div
{:class (stl/css :workspace-comments-container)
- :style {:width (str (:width vport) "px")
- :height (str (:height vport) "px")}}
+ :style {:width (dm/str vport-w "px")
+ :height (dm/str vport-h "px")}}
[:div {:class (stl/css :threads)
- :style {:transform (str/format "translate(%spx, %spx)" pos-x pos-y)}}
+ :style {:transform (dm/fmt "translate(%px, %px)" pos-x pos-y)}}
(for [item threads]
[:& cmt/thread-bubble {:thread item
:zoom zoom
@@ -70,12 +81,15 @@
(when-let [id (:open local)]
(when-let [thread (get threads-map id)]
- [:& cmt/thread-comments {:thread (update-thread-position thread)
- :users users
- :zoom zoom}]))
+ (when (seq (dcm/apply-filters local profile [thread]))
+ [:& cmt/thread-comments {:thread (update-position positions thread)
+ :users users
+ :viewport {:offset-x pos-x :offset-y pos-y :width (:width vport) :height (:height vport)}
+ :zoom zoom}])))
(when-let [draft (:comment drawing)]
[:& cmt/draft-thread {:draft draft
:on-cancel on-draft-cancel
:on-submit on-draft-submit
:zoom zoom}])]]]))
+
diff --git a/frontend/src/app/main/ui/workspace/viewport/comments.scss b/frontend/src/app/main/ui/workspace/viewport/comments.scss
index ee56bc948..9c587d596 100644
--- a/frontend/src/app/main/ui/workspace/viewport/comments.scss
+++ b/frontend/src/app/main/ui/workspace/viewport/comments.scss
@@ -15,10 +15,13 @@
pointer-events: none;
overflow: hidden;
user-select: text;
+ position: absolute;
}
.threads {
position: absolute;
- top: $s-0;
- left: $s-0;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
}
diff --git a/frontend/src/app/main/ui/workspace/viewport/grid_layout_editor.cljs b/frontend/src/app/main/ui/workspace/viewport/grid_layout_editor.cljs
index 4621560a7..572c1068d 100644
--- a/frontend/src/app/main/ui/workspace/viewport/grid_layout_editor.cljs
+++ b/frontend/src/app/main/ui/workspace/viewport/grid_layout_editor.cljs
@@ -133,7 +133,7 @@
:y icon-y
:width (/ 22 zoom)
:height (/ 22 zoom)
- :href "#icon-add-refactor"}]]))
+ :href "#icon-add"}]]))
(defn use-drag
[{:keys [on-drag-start on-drag-end on-drag-delta on-drag-position]}]
@@ -864,7 +864,7 @@
:on-blur handle-blur-track-input}]
(when (and hovering? (not medium?) (not small?))
[:button {:class (stl/css :grid-editor-button)
- :on-click handle-show-track-menu} i/menu-refactor])]])]
+ :on-click handle-show-track-menu} i/menu])]])]
[:g {:transform (when (= type :row) (dm/fmt "rotate(-90 % %)" (:x marker-p) (:y marker-p)))}
[:& track-marker
diff --git a/frontend/src/app/main/ui/workspace/viewport/hooks.cljs b/frontend/src/app/main/ui/workspace/viewport/hooks.cljs
index 1a8c45567..c2d4ab55b 100644
--- a/frontend/src/app/main/ui/workspace/viewport/hooks.cljs
+++ b/frontend/src/app/main/ui/workspace/viewport/hooks.cljs
@@ -32,6 +32,7 @@
[app.util.dom :as dom]
[app.util.globals :as globals]
[app.util.keyboard :as kbd]
+ [app.util.mouse :as mse]
[beicon.v2.core :as rx]
[beicon.v2.operators :as rxo]
[goog.events :as events]
@@ -42,7 +43,8 @@
(let [on-key-down (actions/on-key-down)
on-key-up (actions/on-key-up)
on-mouse-wheel (actions/on-mouse-wheel zoom)
- on-paste (actions/on-paste disable-paste in-viewport? workspace-read-only?)]
+ on-paste (actions/on-paste disable-paste in-viewport? workspace-read-only?)
+ on-blur (mf/use-fn #(st/emit! (mse/->BlurEvent)))]
(mf/use-layout-effect
(mf/deps on-key-down on-key-up on-mouse-wheel on-paste workspace-read-only?)
@@ -52,7 +54,8 @@
;; bind with passive=false to allow the event to be cancelled
;; https://stackoverflow.com/a/57582286/3219895
(events/listen js/window EventType.WHEEL on-mouse-wheel #js {:passive false})
- (events/listen js/window EventType.PASTE on-paste)]]
+ (events/listen js/window EventType.PASTE on-paste)
+ (events/listen js/window EventType.BLUR on-blur)]]
(fn []
(doseq [key keys]
(events/unlistenByKey key))))))))
diff --git a/frontend/src/app/main/ui/workspace/viewport/path_actions.cljs b/frontend/src/app/main/ui/workspace/viewport/path_actions.cljs
index 3f2c7558b..69597f5a1 100644
--- a/frontend/src/app/main/ui/workspace/viewport/path_actions.cljs
+++ b/frontend/src/app/main/ui/workspace/viewport/path_actions.cljs
@@ -16,6 +16,38 @@
[app.util.path.tools :as upt]
[rumext.v2 :as mf]))
+
+(def ^:private pentool-icon
+ (i/icon-xref :pentool (stl/css :pentool-icon :pathbar-icon)))
+
+(def ^:private move-icon
+ (i/icon-xref :move (stl/css :move-icon :pathbar-icon)))
+
+(def ^:private add-icon
+ (i/icon-xref :add (stl/css :add-icon :pathbar-icon)))
+
+(def ^:private remove-icon
+ (i/icon-xref :remove-icon (stl/css :remove-icon :pathbar-icon)))
+
+(def ^:private merge-nodes-icon
+ (i/icon-xref :merge-nodes (stl/css :merge-nodes-icon :pathbar-icon)))
+
+(def ^:private join-nodes-icon
+ (i/icon-xref :join-nodes (stl/css :join-nodes-icon :pathbar-icon)))
+
+(def ^:private separate-nodes-icon
+ (i/icon-xref :separate-nodes (stl/css :separate-nodes-icon :pathbar-icon)))
+
+(def ^:private to-corner-icon
+ (i/icon-xref :to-corner (stl/css :to-corner-icon :pathbar-icon)))
+
+(def ^:private to-curve-icon
+ (i/icon-xref :to-curve (stl/css :to-curve-icon :pathbar-icon)))
+
+(def ^:private snap-nodes-icon
+ (i/icon-xref :snap-nodes (stl/css :snap-nodes-icon :pathbar-icon)))
+
+
(defn check-enabled [content selected-points]
(let [segments (upt/get-segments content selected-points)
num-segments (count segments)
@@ -36,6 +68,7 @@
:join-nodes (and points-selected? (>= num-points 2) (< num-segments max-segments))
:separate-nodes segments-selected?}))
+
(mf/defc path-actions [{:keys [shape]}]
(let [{:keys [edit-mode selected-points snap-toggled] :as all} (mf/deref pc/current-edit-path-ref)
content (:content shape)
@@ -112,77 +145,76 @@
[:div {:class (stl/css :sub-actions)}
[:div {:class (stl/css :sub-actions-group)}
- ;; Draw Mode
- [:button
- {:class (stl/css-case :is-toggled (= edit-mode :draw))
- :title (tr "workspace.path.actions.draw-nodes" (sc/get-tooltip :draw-nodes))
- :on-click on-select-draw-mode}
- i/pentool-refactor]
+ ;; Draw Mode
+ [:button {:class (stl/css-case :is-toggled (= edit-mode :draw)
+ :topbar-btn true)
+ :title (tr "workspace.path.actions.draw-nodes" (sc/get-tooltip :draw-nodes))
+ :on-click on-select-draw-mode}
+ pentool-icon]
- ;; Edit mode
- [:button
- {:class (stl/css-case :is-toggled (= edit-mode :move))
- :title (tr "workspace.path.actions.move-nodes" (sc/get-tooltip :move-nodes))
- :on-click on-select-edit-mode}
- i/move-refactor]]
+ ;; Edit mode
+ [:button {:class (stl/css-case :is-toggled (= edit-mode :move)
+ :topbar-btn true)
+ :title (tr "workspace.path.actions.move-nodes" (sc/get-tooltip :move-nodes))
+ :on-click on-select-edit-mode}
+ move-icon]]
[:div {:class (stl/css :sub-actions-group)}
- ;; Add Node
- [:button
- {:disabled (not (:add-node enabled-buttons))
- :title (tr "workspace.path.actions.add-node" (sc/get-tooltip :add-node))
- :on-click on-add-node}
- i/add-refactor]
+ ;; Add Node
+ [:button {:disabled (not (:add-node enabled-buttons))
+ :class (stl/css :topbar-btn)
+ :title (tr "workspace.path.actions.add-node" (sc/get-tooltip :add-node))
+ :on-click on-add-node}
+ add-icon]
- ;; Remove node
- [:button
- {:disabled (not (:remove-node enabled-buttons))
- :title (tr "workspace.path.actions.delete-node" (sc/get-tooltip :delete-node))
- :on-click on-remove-node}
- i/remove-refactor]]
+ ;; Remove node
+ [:button {:disabled (not (:remove-node enabled-buttons))
+ :class (stl/css :topbar-btn)
+ :title (tr "workspace.path.actions.delete-node" (sc/get-tooltip :delete-node))
+ :on-click on-remove-node}
+ remove-icon]]
[:div {:class (stl/css :sub-actions-group)}
- ;; Merge Nodes
- [:button
- {:disabled (not (:merge-nodes enabled-buttons))
- :title (tr "workspace.path.actions.merge-nodes" (sc/get-tooltip :merge-nodes))
- :on-click on-merge-nodes}
- i/merge-nodes-refactor]
+ ;; Merge Nodes
+ [:button {:disabled (not (:merge-nodes enabled-buttons))
+ :class (stl/css :topbar-btn)
+ :title (tr "workspace.path.actions.merge-nodes" (sc/get-tooltip :merge-nodes))
+ :on-click on-merge-nodes}
+ merge-nodes-icon]
- ;; Join Nodes
- [:button
- {:disabled (not (:join-nodes enabled-buttons))
- :title (tr "workspace.path.actions.join-nodes" (sc/get-tooltip :join-nodes))
- :on-click on-join-nodes}
- i/join-nodes-refactor]
+ ;; Join Nodes
+ [:button {:disabled (not (:join-nodes enabled-buttons))
+ :class (stl/css :topbar-btn)
+ :title (tr "workspace.path.actions.join-nodes" (sc/get-tooltip :join-nodes))
+ :on-click on-join-nodes}
+ join-nodes-icon]
- ;; Separate Nodes
- [:button
- {:disabled (not (:separate-nodes enabled-buttons))
- :title (tr "workspace.path.actions.separate-nodes" (sc/get-tooltip :separate-nodes))
- :on-click on-separate-nodes}
- i/separate-nodes-refactor]]
+ ;; Separate Nodes
+ [:button {:disabled (not (:separate-nodes enabled-buttons))
+ :class (stl/css :topbar-btn)
+ :title (tr "workspace.path.actions.separate-nodes" (sc/get-tooltip :separate-nodes))
+ :on-click on-separate-nodes}
+ separate-nodes-icon]]
- ;; Make Corner
[:div {:class (stl/css :sub-actions-group)}
- [:button
- {:disabled (not (:make-corner enabled-buttons))
- :title (tr "workspace.path.actions.make-corner" (sc/get-tooltip :make-corner))
- :on-click on-make-corner}
- i/to-corner-refactor]
+ ; Make Corner
+ [:button {:disabled (not (:make-corner enabled-buttons))
+ :class (stl/css :topbar-btn)
+ :title (tr "workspace.path.actions.make-corner" (sc/get-tooltip :make-corner))
+ :on-click on-make-corner}
+ to-corner-icon]
- ;; Make Curve
- [:button
- {:disabled (not (:make-curve enabled-buttons))
- :title (tr "workspace.path.actions.make-curve" (sc/get-tooltip :make-curve))
- :on-click on-make-curve}
- i/to-curve-refactor]]
-
- ;; Toggle snap
+ ;; Make Curve
+ [:button {:disabled (not (:make-curve enabled-buttons))
+ :class (stl/css :topbar-btn)
+ :title (tr "workspace.path.actions.make-curve" (sc/get-tooltip :make-curve))
+ :on-click on-make-curve}
+ to-curve-icon]]
[:div {:class (stl/css :sub-actions-group)}
- [:button
- {:class (stl/css-case :is-toggled snap-toggled)
- :title (tr "workspace.path.actions.snap-nodes" (sc/get-tooltip :snap-nodes))
- :on-click on-toggle-snap}
- i/snap-nodes-refactor]]]))
+ ;; Toggle snap
+ [:button {:class (stl/css-case :is-toggled snap-toggled
+ :topbar-btn true)
+ :title (tr "workspace.path.actions.snap-nodes" (sc/get-tooltip :snap-nodes))
+ :on-click on-toggle-snap}
+ snap-nodes-icon]]]))
diff --git a/frontend/src/app/main/ui/workspace/viewport/path_actions.scss b/frontend/src/app/main/ui/workspace/viewport/path_actions.scss
index c4d346603..c5e5ecc1b 100644
--- a/frontend/src/app/main/ui/workspace/viewport/path_actions.scss
+++ b/frontend/src/app/main/ui/workspace/viewport/path_actions.scss
@@ -11,48 +11,50 @@
pointer-events: initial;
position: absolute;
top: $s-12;
- left: calc(50% - 240px);
+ left: 50%;
+ transform: translateX(-50%);
display: flex;
align-items: center;
height: $s-56;
padding: $s-8 $s-16;
border-radius: $s-8;
gap: $s-16;
- z-index: $z-index-10;
+ border: $s-2 solid var(--panel-border-color);
+ z-index: $z-index-3;
background-color: var(--color-background-primary);
transition:
top 0.3s,
height 0.3s,
opacity 0.3s;
+}
- .sub-actions-group {
- position: relative;
- display: flex;
- align-items: center;
- margin: 0;
- opacity: $op-10;
- transition: opacity 0.3s ease;
+.sub-actions-group {
+ position: relative;
+ display: flex;
+ align-items: center;
+ margin: 0;
+ opacity: $op-10;
+ transition: opacity 0.3s ease;
+}
- button {
- @extend .button-tertiary;
- height: $s-36;
- width: $s-36;
- flex-shrink: 0;
- background-color: transparent;
- border-radius: $s-8;
- border: none;
- margin: 0 $s-2;
- &.is-toggled {
- background-color: var(--button-radio-background-color-active);
- svg {
- stroke: var(--button-radio-foreground-color-active);
- }
- }
+.topbar-btn {
+ --pathbar-icon-color: var(--color-foreground-secondary);
+ @extend .button-tertiary;
+ height: $s-36;
+ width: $s-36;
+ flex-shrink: 0;
+ background-color: transparent;
+ border-radius: $s-8;
+ border: none;
+ margin: 0 $s-2;
- svg {
- @extend .button-icon;
- stroke: var(--color-foreground-secondary);
- }
- }
+ &.is-toggled {
+ --pathbar-icon-color: var(--button-radio-foreground-color-active);
+ background-color: var(--button-radio-background-color-active);
+ }
+
+ .pathbar-icon {
+ @extend .button-icon;
+ stroke: var(--pathbar-icon-color);
}
}
diff --git a/frontend/src/app/main/ui/workspace/viewport/top_bar.cljs b/frontend/src/app/main/ui/workspace/viewport/top_bar.cljs
index a7937e670..1cbd37d1c 100644
--- a/frontend/src/app/main/ui/workspace/viewport/top_bar.cljs
+++ b/frontend/src/app/main/ui/workspace/viewport/top_bar.cljs
@@ -31,9 +31,10 @@
[:div {:class (stl/css :viewport-actions-container)}
[:div {:class (stl/css :viewport-actions-title)}
[:& i18n/tr-html {:tag-name "span"
- :label "workspace.top-bar.read-only"}]]
+ :label "workspace.top-bar.view-only"}]]
[:button {:class (stl/css :done-btn)
- :on-click handle-close-view-mode} (tr "workspace.top-bar.read-only.done")]]]))
+ :on-click handle-close-view-mode}
+ (tr "workspace.top-bar.read-only.done")]]]))
(mf/defc top-bar
{::mf/wrap [mf/memo]}
@@ -41,6 +42,7 @@
(let [edition (mf/deref refs/selected-edition)
selected (mf/deref refs/selected-objects)
drawing (mf/deref refs/workspace-drawing)
+ rulers? (mf/deref refs/rulers?)
drawing-obj (:object drawing)
shape (or drawing-obj (-> selected first))
@@ -69,7 +71,7 @@
[:& view-only-actions]
path-edition?
- [:div {:class (stl/css :viewport-actions)}
+ [:div {:class (stl/css-case :viewport-actions-path true :viewport-actions-no-rulers (not rulers?))}
[:& path-actions {:shape shape}]]
grid-edition?
diff --git a/frontend/src/app/main/ui/workspace/viewport/top_bar.scss b/frontend/src/app/main/ui/workspace/viewport/top_bar.scss
index b83e795d6..9109d8e8b 100644
--- a/frontend/src/app/main/ui/workspace/viewport/top_bar.scss
+++ b/frontend/src/app/main/ui/workspace/viewport/top_bar.scss
@@ -6,44 +6,51 @@
@import "refactor/common-refactor.scss";
-.viewport-actions {
+.viewport-actions,
+.viewport-actions-path {
pointer-events: none;
position: absolute;
- top: $s-44;
+ --actions-toolbar-position-y: #{$s-28};
+ --actions-toolbar-offset-y: #{$s-6};
+
+ top: calc(var(--actions-toolbar-position-y) + var(--actions-toolbar-offset-y));
left: 50%;
z-index: $z-index-20;
-
- .viewport-actions-container {
- @include flexRow;
- background: var(--panel-background-color);
- border-radius: $br-12;
- box-shadow: 0 0 $s-12 0 var(--menu-shadow-color);
- gap: $s-8;
- height: $s-48;
- margin-left: -50%;
- padding: $s-8;
- cursor: initial;
- pointer-events: initial;
- width: $s-400;
- }
-
- .viewport-actions-title {
- flex: 1;
- font-size: $fs-12;
- color: var(--color-foreground-secondary);
- padding-left: $s-8;
- }
-
- .done-btn {
- @extend .button-primary;
- text-transform: uppercase;
- padding: $s-8 $s-20;
- font-size: $fs-11;
- }
- .close-btn {
- @extend .button-tertiary;
- svg {
- @extend .button-icon;
- }
- }
+}
+
+.viewport-actions-path {
+ z-index: $z-index-3;
+}
+
+.viewport-actions-container {
+ @include flexRow;
+ background: var(--panel-background-color);
+ border-radius: $br-12;
+ box-shadow: 0 0 $s-12 0 var(--menu-shadow-color);
+ gap: $s-8;
+ height: $s-48;
+ margin-left: -50%;
+ padding: $s-8;
+ cursor: initial;
+ pointer-events: initial;
+ width: $s-400;
+ border: $s-2 solid var(--panel-border-color);
+}
+
+.viewport-actions-title {
+ flex: 1;
+ font-size: $fs-12;
+ color: var(--color-foreground-secondary);
+ padding-left: $s-8;
+}
+
+.done-btn {
+ @extend .button-primary;
+ text-transform: uppercase;
+ padding: $s-8 $s-20;
+ font-size: $fs-11;
+}
+
+.viewport-actions-no-rulers {
+ --actions-toolbar-position-y: 0px;
}
diff --git a/frontend/src/app/main/ui/workspace/viewport/widgets.cljs b/frontend/src/app/main/ui/workspace/viewport/widgets.cljs
index ab0b10777..6674446fc 100644
--- a/frontend/src/app/main/ui/workspace/viewport/widgets.cljs
+++ b/frontend/src/app/main/ui/workspace/viewport/widgets.cljs
@@ -153,13 +153,13 @@
:visibility (if show-artboard-names? "visible" "hidden")}
(cond
(:use-for-thumbnail frame)
- [:use {:href "#icon-boards-thumbnail-refactor"}]
+ [:use {:href "#icon-boards-thumbnail"}]
grid-edition?
- [:use {:href "#icon-grid-refactor"}]
+ [:use {:href "#icon-grid"}]
main-instance?
- [:use {:href "#icon-component-refactor"}])])
+ [:use {:href "#icon-component"}])])
[:foreignObject {:x text-pos-x
@@ -266,7 +266,7 @@
:on-double-click on-double-click
:on-pointer-enter on-pointer-enter
:on-pointer-leave on-pointer-leave}
- i/play-refactor
+ i/play
[:span (:name flow)]]]]))
(mf/defc frame-flows
diff --git a/frontend/src/app/rasterizer.cljs b/frontend/src/app/rasterizer.cljs
index b8eff2336..e2bf9ede6 100644
--- a/frontend/src/app/rasterizer.cljs
+++ b/frontend/src/app/rasterizer.cljs
@@ -58,7 +58,7 @@
"Returns the adjusted size of an SVG."
[width height max]
(let [ratio (/ width height)]
- (if (> width height)
+ (if (< width height)
[max (* max (/ 1 ratio))]
[(* max ratio) max])))
diff --git a/frontend/src/app/util/code_gen.cljs b/frontend/src/app/util/code_gen.cljs
index e1c35d169..1c8e255b9 100644
--- a/frontend/src/app/util/code_gen.cljs
+++ b/frontend/src/app/util/code_gen.cljs
@@ -19,8 +19,8 @@
(generate-markup objects shapes)))
(defn generate-style-code
- [objects type shapes]
+ [objects type root-shapes all-shapes]
(let [generate-style
(case type
"css" css/generate-style)]
- (generate-style objects shapes)))
+ (generate-style objects root-shapes all-shapes)))
diff --git a/frontend/src/app/util/code_gen/style_css.cljs b/frontend/src/app/util/code_gen/style_css.cljs
index 197e883ff..5f1776044 100644
--- a/frontend/src/app/util/code_gen/style_css.cljs
+++ b/frontend/src/app/util/code_gen/style_css.cljs
@@ -35,8 +35,8 @@ body {
display: flex;
flex-direction: column;
align-items: center;
- padding: 2rem;
- gap: 2rem;
+ width: 100vw;
+ min-height: 100vh;
}
* {
@@ -94,6 +94,7 @@ body {
:flex-direction
:flex-wrap
:flex
+ :flex-grow
;; Grid related properties
:grid-template-rows
@@ -117,8 +118,8 @@ body {
:grid-area])
(defn shape->css-property
- [shape objects property]
- (when-let [value (get-value property shape objects)]
+ [shape objects property options]
+ (when-let [value (get-value property shape objects options)]
[property value]))
(defn shape->wrapper-css-properties
@@ -155,10 +156,10 @@ body {
(defn shape->css-properties
"Given a shape extract the CSS properties in the format of list [property value]"
- [shape objects properties]
+ [shape objects properties options]
(->> properties
(keep (fn [property]
- (when-let [value (get-value property shape objects)]
+ (when-let [value (get-value property shape objects options)]
[property value])))))
(defn format-css-value
@@ -189,7 +190,7 @@ body {
([objects shape properties options]
(-> shape
- (shape->css-properties objects properties)
+ (shape->css-properties objects properties options)
(format-css-properties options))))
(defn format-js-styles
@@ -248,13 +249,13 @@ body {
properties
(-> shape
- (shape->css-properties objects css-properties)
+ (shape->css-properties objects css-properties options)
(format-css-properties options))
wrapper-properties
(when wrapper?
(-> (d/concat-vec
- (shape->css-properties shape objects shape-wrapper-css-properties)
+ (shape->css-properties shape objects shape-wrapper-css-properties options)
(shape->wrapper-css-properties shape objects))
(format-css-properties options)))
@@ -285,7 +286,7 @@ body {
([objects shape property options]
(-> shape
- (shape->css-property objects property)
+ (shape->css-property objects property options)
(format-css-property options))))
(defn get-css-value
@@ -293,18 +294,19 @@ body {
(get-css-value objects shape property nil))
([objects shape property options]
- (when-let [prop (shape->css-property shape objects property)]
+ (when-let [prop (shape->css-property shape objects property options)]
(format-css-value prop options))))
(defn generate-style
- ([objects shapes]
- (generate-style objects shapes nil))
- ([objects shapes options]
- (dm/str
- prelude
- (->> shapes
- (keep #(get-shape-css-selector % objects options))
- (str/join "\n\n")))))
+ ([objects root-shapes all-shapes]
+ (generate-style objects root-shapes all-shapes nil))
+ ([objects root-shapes all-shapes options]
+ (let [options (assoc options :root-shapes (into #{} (map :id) root-shapes))]
+ (dm/str
+ prelude
+ (->> all-shapes
+ (keep #(get-shape-css-selector % objects options))
+ (str/join "\n\n"))))))
(defn shadow->css
[shadow]
diff --git a/frontend/src/app/util/code_gen/style_css_values.cljs b/frontend/src/app/util/code_gen/style_css_values.cljs
index 3659d33a2..fe2179c8d 100644
--- a/frontend/src/app/util/code_gen/style_css_values.cljs
+++ b/frontend/src/app/util/code_gen/style_css_values.cljs
@@ -25,10 +25,10 @@
:image fill-image})
(defmulti get-value
- (fn [property _shape _objects] property))
+ (fn [property _shape _objects _options] property))
(defmethod get-value :position
- [_ shape objects]
+ [_ shape objects _]
(cond
(or (and (ctl/any-layout-immediate-child? objects shape)
(not (ctl/position-absolute? shape))
@@ -65,15 +65,15 @@
(- shape-value parent-value))))
(defmethod get-value :left
- [_ shape objects]
+ [_ shape objects _]
(get-shape-position shape objects :x))
(defmethod get-value :top
- [_ shape objects]
+ [_ shape objects _]
(get-shape-position shape objects :y))
(defmethod get-value :flex
- [_ shape objects]
+ [_ shape objects _]
(let [parent (cfh/get-parent objects (:id shape))]
(when (and (ctl/flex-layout-immediate-child? objects shape)
(or (and (contains? #{:row :row-reverse} (:layout-flex-dir parent))
@@ -112,15 +112,26 @@
(get shape type))))
(defmethod get-value :width
- [_ shape objects]
- (get-shape-size shape objects :width))
+ [_ shape objects options]
+ (let [root? (contains? (:root-shapes options) (:id shape))]
+ (if (and root? (ctl/any-layout? shape))
+ :fill
+ (get-shape-size shape objects :width))))
(defmethod get-value :height
- [_ shape objects]
- (get-shape-size shape objects :height))
+ [_ shape objects options]
+ (let [root? (contains? (:root-shapes options) (:id shape))]
+ (when-not (and root? (ctl/any-layout? shape))
+ (get-shape-size shape objects :height))))
+
+(defmethod get-value :flex-grow
+ [_ shape _ options]
+ (let [root? (contains? (:root-shapes options) (:id shape))]
+ (when (and root? (ctl/any-layout? shape))
+ 1)))
(defmethod get-value :transform
- [_ shape objects]
+ [_ shape objects _]
(if (cgc/svg-markup? shape)
(let [parent (get objects (:parent-id shape))
transform
@@ -145,7 +156,7 @@
transform-str))))
(defmethod get-value :background
- [_ {:keys [fills] :as shape} _]
+ [_ {:keys [fills] :as shape} _ _]
(let [single-fill? (= (count fills) 1)]
(when (and (not (cgc/svg-markup? shape)) (not (cfh/group-shape? shape)) single-fill?)
(fill->color (first fills)))))
@@ -164,12 +175,12 @@
:width width})))
(defmethod get-value :border
- [_ shape _]
+ [_ shape _ _]
(when-not (cgc/svg-markup? shape)
(get-stroke-data (first (:strokes shape)))))
(defmethod get-value :border-radius
- [_ {:keys [rx r1 r2 r3 r4] :as shape} _]
+ [_ {:keys [rx r1 r2 r3 r4] :as shape} _ _]
(cond
(cfh/circle-shape? shape)
"50%"
@@ -181,76 +192,76 @@
[r1 r2 r3 r4]))
(defmethod get-value :box-shadow
- [_ shape _]
+ [_ shape _ _]
(when-not (cgc/svg-markup? shape)
(:shadow shape)))
(defmethod get-value :filter
- [_ shape _]
+ [_ shape _ _]
(when-not (cgc/svg-markup? shape)
(get-in shape [:blur :value])))
(defmethod get-value :display
- [_ shape _]
+ [_ shape _ _]
(cond
(:hidden shape) "none"
(ctl/flex-layout? shape) "flex"
(ctl/grid-layout? shape) "grid"))
(defmethod get-value :opacity
- [_ shape _]
+ [_ shape _ _]
(when (< (:opacity shape) 1)
(:opacity shape)))
(defmethod get-value :overflow
- [_ shape _]
+ [_ shape _ _]
(when (and (cfh/frame-shape? shape)
(not (cgc/svg-markup? shape))
(not (:show-content shape)))
"hidden"))
(defmethod get-value :flex-direction
- [_ shape _]
+ [_ shape _ _]
(:layout-flex-dir shape))
(defmethod get-value :align-items
- [_ shape _]
+ [_ shape _ _]
(:layout-align-items shape))
(defmethod get-value :align-content
- [_ shape _]
+ [_ shape _ _]
(:layout-align-content shape))
(defmethod get-value :justify-items
- [_ shape _]
+ [_ shape _ _]
(:layout-justify-items shape))
(defmethod get-value :justify-content
- [_ shape _]
+ [_ shape _ _]
(:layout-justify-content shape))
(defmethod get-value :flex-wrap
- [_ shape _]
+ [_ shape _ _]
(:layout-wrap-type shape))
(defmethod get-value :gap
- [_ shape _]
+ [_ shape _ _]
(let [[g1 g2] (ctl/gaps shape)]
(when (and (= g1 g2) (or (not= g1 0) (not= g2 0)))
[g1])))
(defmethod get-value :row-gap
- [_ shape _]
+ [_ shape _ _]
(let [[g1 g2] (ctl/gaps shape)]
(when (and (not= g1 g2) (not= g1 0)) [g1])))
(defmethod get-value :column-gap
- [_ shape _]
+ [_ shape _ _]
(let [[g1 g2] (ctl/gaps shape)]
(when (and (not= g1 g2) (not= g2 0)) [g2])))
(defmethod get-value :padding
- [_ {:keys [layout-padding]} _]
+ [_ {:keys [layout-padding]} _ _]
(when (some? layout-padding)
(let [default-padding {:p1 0 :p2 0 :p3 0 :p4 0}
{:keys [p1 p2 p3 p4]} (merge default-padding layout-padding)]
@@ -258,11 +269,11 @@
[p1 p2 p3 p4]))))
(defmethod get-value :grid-template-rows
- [_ shape _]
+ [_ shape _ _]
(:layout-grid-rows shape))
(defmethod get-value :grid-template-columns
- [_ shape _]
+ [_ shape _ _]
(:layout-grid-columns shape))
(defn area-cell?
@@ -270,7 +281,7 @@
(and (= position :area) (d/not-empty? area-name)))
(defmethod get-value :grid-template-areas
- [_ shape _]
+ [_ shape _ _]
(when (and (ctl/grid-layout? shape)
(some area-cell? (vals (:layout-grid-cells shape))))
(let [result
@@ -304,15 +315,15 @@
(get cell prop))))))
(defmethod get-value :grid-column
- [_ shape objects]
+ [_ shape objects _]
(get-grid-coord shape objects :column :column-span))
(defmethod get-value :grid-row
- [_ shape objects]
+ [_ shape objects _]
(get-grid-coord shape objects :row :row-span))
(defmethod get-value :grid-area
- [_ shape objects]
+ [_ shape objects _]
(when (and (ctl/grid-layout-immediate-child? objects shape)
(not (ctl/position-absolute? shape)))
(let [parent (get objects (:parent-id shape))
@@ -321,7 +332,7 @@
(str/replace (:area-name cell) " " "-")))))
(defmethod get-value :flex-shrink
- [_ shape objects]
+ [_ shape objects _]
(when (and (ctl/flex-layout-immediate-child? objects shape)
(not (and (contains? #{:row :reverse-row} (:layout-flex-dir shape))
@@ -337,7 +348,7 @@
0))
(defmethod get-value :margin
- [_ {:keys [layout-item-margin] :as shape} objects]
+ [_ {:keys [layout-item-margin] :as shape} objects _]
(when (ctl/any-layout-immediate-child? objects shape)
(let [default-margin {:m1 0 :m2 0 :m3 0 :m4 0}
@@ -346,7 +357,7 @@
[m1 m2 m3 m4]))))
(defmethod get-value :z-index
- [_ {:keys [layout-item-z-index] :as shape} objects]
+ [_ {:keys [layout-item-z-index] :as shape} objects _]
(cond
(cfh/root-frame? shape)
0
@@ -355,13 +366,13 @@
layout-item-z-index))
(defmethod get-value :max-height
- [_ shape objects]
+ [_ shape objects _]
(cond
(ctl/any-layout-immediate-child? objects shape)
(:layout-item-max-h shape)))
(defmethod get-value :min-height
- [_ shape objects]
+ [_ shape objects _]
(cond
(and (ctl/any-layout-immediate-child? objects shape) (some? (:layout-item-min-h shape)))
(:layout-item-min-h shape)
@@ -370,13 +381,13 @@
(-> shape :selrect :height)))
(defmethod get-value :max-width
- [_ shape objects]
+ [_ shape objects _]
(cond
(ctl/any-layout-immediate-child? objects shape)
(:layout-item-max-w shape)))
(defmethod get-value :min-width
- [_ shape objects]
+ [_ shape objects _]
(cond
(and (ctl/any-layout-immediate-child? objects shape) (some? (:layout-item-min-w shape)))
(:layout-item-min-w shape)
@@ -385,7 +396,7 @@
(-> shape :selrect :width)))
(defmethod get-value :align-self
- [_ shape objects]
+ [_ shape objects _]
(cond
(ctl/flex-layout-immediate-child? objects shape)
(:layout-item-align-self shape)
@@ -397,7 +408,7 @@
(when (not= align-self :auto) align-self))))
(defmethod get-value :justify-self
- [_ shape objects]
+ [_ shape objects _]
(cond
(ctl/grid-layout-immediate-child? objects shape)
(let [parent (get objects (:parent-id shape))
@@ -406,10 +417,10 @@
(when (not= justify-self :auto) justify-self))))
(defmethod get-value :grid-auto-flow
- [_ shape _]
+ [_ shape _ _]
(when (and (ctl/grid-layout? shape) (= (:layout-grid-dir shape) :column))
"column"))
(defmethod get-value :default
- [property shape _]
+ [property shape _ _]
(get shape property))
diff --git a/frontend/src/app/util/i18n.cljs b/frontend/src/app/util/i18n.cljs
index acb581697..39575d601 100644
--- a/frontend/src/app/util/i18n.cljs
+++ b/frontend/src/app/util/i18n.cljs
@@ -177,10 +177,12 @@
{::mf/wrap-props false}
[props]
(let [label (obj/get props "label")
+ class (obj/get props "class")
tag-name (obj/get props "tag-name" "p")
params (obj/get props "params" [])
html (apply tr (d/concat-vec [label] params))]
- [:> tag-name {:dangerouslySetInnerHTML #js {:__html html}}]))
+ [:> tag-name {:dangerouslySetInnerHTML #js {:__html html}
+ :className class}]))
;; DEPRECATED
(defn use-locale
diff --git a/frontend/src/app/util/mouse.cljs b/frontend/src/app/util/mouse.cljs
index b7771eba2..4576ed325 100644
--- a/frontend/src/app/util/mouse.cljs
+++ b/frontend/src/app/util/mouse.cljs
@@ -4,11 +4,14 @@
;;
;; Copyright (c) KALEIDOS INC
-(ns app.util.mouse)
+(ns app.util.mouse
+ (:require
+ [beicon.v2.core :as rx]))
(defrecord MouseEvent [type ctrl shift alt meta])
(defrecord PointerEvent [source pt ctrl shift alt meta])
(defrecord ScrollEvent [point])
+(defrecord BlurEvent [])
(defn mouse-event?
[v]
@@ -22,6 +25,10 @@
[v]
(instance? ScrollEvent v))
+(defn blur-event?
+ [v]
+ (instance? BlurEvent v))
+
(defn mouse-down-event?
[^MouseEvent v]
(= :down (.-type v)))
@@ -61,3 +68,16 @@
(defn get-pointer-shift-mod
[^PointerEvent ev]
(.-shift ev))
+
+(defn drag-stopper
+ "Creates a stream to stop drag events. Takes into account the mouse and also
+ if the window loses focus or the esc key is pressed."
+ [stream]
+ (rx/merge
+ (->> stream
+ (rx/filter blur-event?))
+ (->> stream
+ (rx/filter mouse-event?)
+ (rx/filter mouse-up-event?))
+ (->> stream
+ (rx/filter #(= % :interrupt)))))
diff --git a/frontend/src/app/util/router.cljs b/frontend/src/app/util/router.cljs
index 50a9bb0fd..c4d541cfd 100644
--- a/frontend/src/app/util/router.cljs
+++ b/frontend/src/app/util/router.cljs
@@ -7,8 +7,10 @@
(ns app.util.router
(:refer-clojure :exclude [resolve])
(:require
+ [app.common.data.macros :as dm]
[app.common.uri :as u]
[app.config :as cf]
+ [app.main.data.events :as ev]
[app.util.browser-history :as bhistory]
[app.util.dom :as dom]
[app.util.timers :as ts]
@@ -59,8 +61,13 @@
(defn navigated
[match]
(ptk/reify ::navigated
- IDeref
- (-deref [_] match)
+ ev/Event
+ (-data [_]
+ (let [route (dm/get-in match [:data :name])
+ params (get match :path-params)]
+ (assoc params
+ ::ev/name "navigate"
+ :route (name route))))
ptk/UpdateEvent
(update [_ state]
diff --git a/frontend/src/app/util/rxops.cljs b/frontend/src/app/util/rxops.cljs
index 05732f3d0..7a36a8c3e 100644
--- a/frontend/src/app/util/rxops.cljs
+++ b/frontend/src/app/util/rxops.cljs
@@ -44,7 +44,7 @@
(when-not ^boolean timeout-id
(set! (.-timeoutId state)
- (js/setTimeout execute-fn (- delay ctime ltime))))))))]
+ (js/setTimeout execute-fn (- delay (- ctime ltime)))))))))]
(specify! wrapped-fn
rx/IDisposable
diff --git a/frontend/src/app/worker/snaps.cljs b/frontend/src/app/worker/snaps.cljs
index ceecc5b89..77bf5d8f5 100644
--- a/frontend/src/app/worker/snaps.cljs
+++ b/frontend/src/app/worker/snaps.cljs
@@ -29,6 +29,7 @@
(let [match-bounds?
(fn [[_ data]]
(some #(or (= :guide (:type %))
+ (= :layout (:type %))
(grc/contains-point? bounds (:pt %))) data))]
(->> (into []
(comp (mapcat #(sd/query @state page-id frame-id axis %))
diff --git a/frontend/test/frontend_tests/helpers/libraries.cljs b/frontend/test/frontend_tests/helpers/libraries.cljs
index 8519ec81c..1d9137f56 100644
--- a/frontend/test/frontend_tests/helpers/libraries.cljs
+++ b/frontend/test/frontend_tests/helpers/libraries.cljs
@@ -112,7 +112,7 @@
main-instance? (:main-instance root-inst)
libs (wsh/get-libraries state)
- component (ctf/find-component libs (:component-id root-inst))
+ component (ctf/get-component libs (:component-file root-inst) (:component-id root-inst))
library (ctf/get-component-library libs root-inst)
shapes-inst (cfh/get-children-with-self (:objects page) root-inst-id)
@@ -152,7 +152,7 @@
root-inst (ctn/get-shape page root-inst-id)
libs (wsh/get-libraries state)
- component (ctf/find-component libs (:component-id root-inst))
+ component (ctf/get-component libs (:component-file root-inst) (:component-id root-inst))
library (ctf/get-component-library libs root-inst)
shapes-inst (cfh/get-children-with-self (:objects page) root-inst-id)
@@ -165,9 +165,9 @@
(defn resolve-component
"Get the component with the given id and all its shapes."
- [state component-id]
+ [state component-file component-id]
(let [libs (wsh/get-libraries state)
- component (ctf/find-component libs component-id)
+ component (ctf/get-component libs component-file component-id)
library (ctf/get-component-library libs component)
shapes-main (ctf/get-component-shapes (:data library) component)]
diff --git a/frontend/test/frontend_tests/state_components_test.cljs b/frontend/test/frontend_tests/state_components_test.cljs
index 7cb62b212..3a8751019 100644
--- a/frontend/test/frontend_tests/state_components_test.cljs
+++ b/frontend/test/frontend_tests/state_components_test.cljs
@@ -186,9 +186,9 @@
;; Expected shape tree:
;;
;; [Page: Page]
- ;; Root Frame
+ ;; Root Frame
;; Rect 1 #
- ;; Rect 1
+ ;; Rect 1
;; Rect 1 #
;; Rect 1* @--> Rect 1
;; Rect 1 ---> Rect 1
@@ -362,6 +362,7 @@
component2]
(thl/resolve-component
new-state
+ (:current-file-id new-state)
new-component-id)]
(t/is (= (:name component2) "Rect 1")))))]
@@ -657,7 +658,7 @@
;;
;; [Board]
;; page1 / Board
- ;;
+ ;;
(let [instance1 (thp/get-shape new-state :instance1)
[[group shape1 shape2]
diff --git a/frontend/translations/ar.po b/frontend/translations/ar.po
index b455dde95..9bc152ac5 100644
--- a/frontend/translations/ar.po
+++ b/frontend/translations/ar.po
@@ -2534,10 +2534,6 @@ msgstr "إبطال المحاذاة الدينماكية"
msgid "workspace.header.menu.disable-scale-text"
msgstr "إبطال المقياس النسبي"
-#: src/app/main/ui/workspace/header.cljs
-msgid "workspace.header.menu.disable-snap-grid"
-msgstr "إبطال الفرقعة للتشبيك"
-
#: src/app/main/ui/workspace/header.cljs
msgid "workspace.header.menu.enable-dynamic-alignment"
msgstr "تككين المحاذاة الدينماكية"
@@ -2546,14 +2542,6 @@ msgstr "تككين المحاذاة الدينماكية"
msgid "workspace.header.menu.enable-scale-text"
msgstr "تمكين نص المقياس"
-#: src/app/main/ui/workspace/header.cljs
-msgid "workspace.header.menu.enable-snap-grid"
-msgstr "الفرقعة للتشبيك"
-
-#: src/app/main/ui/workspace/header.cljs
-msgid "workspace.header.menu.hide-grid"
-msgstr "إخفاء التشبيك"
-
#: src/app/main/ui/workspace/header.cljs
msgid "workspace.header.menu.hide-palette"
msgstr "إخفاء لون اللوحة"
@@ -2566,10 +2554,6 @@ msgstr "إخفاء المسطرات"
msgid "workspace.header.menu.select-all"
msgstr "حدد الجميع"
-#: src/app/main/ui/workspace/header.cljs
-msgid "workspace.header.menu.show-grid"
-msgstr "أظهر التشبيك"
-
#: src/app/main/ui/workspace/header.cljs
msgid "workspace.header.menu.show-palette"
msgstr "أظهر لون اللوحة"
@@ -3742,9 +3726,6 @@ msgstr "أصل الرسومات"
msgid "workspace.options.layout.packed"
msgstr "معباة"
-msgid "shortcuts.toggle-snap-guide"
-msgstr "تبديل الفرقعة للمرشد"
-
msgid "workspace.header.menu.enable-snap-pixel-grid"
msgstr "تمكين الفرقعة للبكسل"
@@ -4198,9 +4179,6 @@ msgstr "أقصى ارتفاع"
msgid "workspace.shape.menu.restore-main"
msgstr "استعادة العنصر الرئيسي"
-msgid "shortcuts.toggle-snap-grid"
-msgstr "تبديل الفرقعة للتشبيك"
-
#: src/app/main/ui/workspace/sidebar/options/menus/layer.cljs
msgid "workspace.options.layer-options.blend-mode.saturation"
msgstr "التشبع"
diff --git a/frontend/translations/ca.po b/frontend/translations/ca.po
index a71c294e8..b75496da4 100644
--- a/frontend/translations/ca.po
+++ b/frontend/translations/ca.po
@@ -2242,9 +2242,6 @@ msgstr "Activa/desactiva el mode de concentració"
msgid "shortcuts.toggle-fullscreen"
msgstr "Activa/desactiva la pantalla completa"
-msgid "shortcuts.toggle-grid"
-msgstr "Mostra/Amaga la graella"
-
msgid "shortcuts.toggle-history"
msgstr "Mostra/Amaga l'historial"
@@ -2260,12 +2257,6 @@ msgstr "Bloqueja les proporcions"
msgid "shortcuts.toggle-rules"
msgstr "Mostra/Amaga les regles"
-msgid "shortcuts.toggle-snap-grid"
-msgstr "Ajusta a la graella"
-
-msgid "shortcuts.toggle-snap-guide"
-msgstr "Ajusta a les guies"
-
msgid "shortcuts.toggle-textpalette"
msgstr "Mostra/amaga la paleta de text"
@@ -2594,10 +2585,6 @@ msgstr "Desactiva l'alineació dinàmica"
msgid "workspace.header.menu.disable-scale-text"
msgstr "Desactiva l'escalat del text"
-#: src/app/main/ui/workspace/header.cljs
-msgid "workspace.header.menu.disable-snap-grid"
-msgstr "No ajustis a la quadrícula"
-
#: src/app/main/ui/workspace/header.cljs
msgid "workspace.header.menu.disable-snap-guides"
msgstr "No ajustis a les guies"
@@ -2613,10 +2600,6 @@ msgstr "Activa l'alineació dinàmica"
msgid "workspace.header.menu.enable-scale-text"
msgstr "Activa l'escalat del text"
-#: src/app/main/ui/workspace/header.cljs
-msgid "workspace.header.menu.enable-snap-grid"
-msgstr "Ajusta a la quadrícula"
-
#: src/app/main/ui/workspace/header.cljs
msgid "workspace.header.menu.enable-snap-guides"
msgstr "Ajusta a les guies"
@@ -2628,10 +2611,6 @@ msgstr "Ajusta als píxels"
msgid "workspace.header.menu.hide-artboard-names"
msgstr "Amaga els noms dels taulers"
-#: src/app/main/ui/workspace/header.cljs
-msgid "workspace.header.menu.hide-grid"
-msgstr "Amaga la quadrícula"
-
#: src/app/main/ui/workspace/header.cljs
msgid "workspace.header.menu.hide-palette"
msgstr "Amaga la paleta de colors"
@@ -2675,10 +2654,6 @@ msgstr "Selecciona-ho tot"
msgid "workspace.header.menu.show-artboard-names"
msgstr "Mostra els noms dels taulers"
-#: src/app/main/ui/workspace/header.cljs
-msgid "workspace.header.menu.show-grid"
-msgstr "Mostra la quadrícula"
-
#: src/app/main/ui/workspace/header.cljs
msgid "workspace.header.menu.show-palette"
msgstr "Mostra la paleta de colors"
diff --git a/frontend/translations/cs.po b/frontend/translations/cs.po
index 8fd299f42..b2f2225f4 100644
--- a/frontend/translations/cs.po
+++ b/frontend/translations/cs.po
@@ -2556,9 +2556,6 @@ msgstr "Přepnout režim soustředění"
msgid "shortcuts.toggle-fullscreen"
msgstr "Přepnout zobrazení na celou obrazovku"
-msgid "shortcuts.toggle-grid"
-msgstr "Zobrazit/skrýt mřížku"
-
msgid "shortcuts.toggle-history"
msgstr "Přepnout historii"
@@ -2577,12 +2574,6 @@ msgstr "Uzamknout proporce"
msgid "shortcuts.toggle-rules"
msgstr "Zobrazit/skrýt pravítka"
-msgid "shortcuts.toggle-snap-grid"
-msgstr "Přichytit k mřížce"
-
-msgid "shortcuts.toggle-snap-guide"
-msgstr "Přichytit k vodicím lištám"
-
msgid "shortcuts.toggle-textpalette"
msgstr "Přepnout paletu textu"
@@ -2940,10 +2931,6 @@ msgstr "Zakázat proporcionální měřítko"
msgid "workspace.header.menu.disable-scale-text"
msgstr "Zakázat měřítko textu"
-#: src/app/main/ui/workspace/header.cljs
-msgid "workspace.header.menu.disable-snap-grid"
-msgstr "Zakázat přichycení k mřížce"
-
#: src/app/main/ui/workspace/header.cljs
msgid "workspace.header.menu.disable-snap-guides"
msgstr "Zakázat přichycení k vodicím lištám"
@@ -2962,10 +2949,6 @@ msgstr "Povolit proporcionální měřítko"
msgid "workspace.header.menu.enable-scale-text"
msgstr "Povolit měřítko textu"
-#: src/app/main/ui/workspace/header.cljs
-msgid "workspace.header.menu.enable-snap-grid"
-msgstr "Přichytit k mřížce"
-
#: src/app/main/ui/workspace/header.cljs
msgid "workspace.header.menu.enable-snap-guides"
msgstr "Přichytit k vodicím lištám"
@@ -2977,10 +2960,6 @@ msgstr "Povolit přichycení k pixelu"
msgid "workspace.header.menu.hide-artboard-names"
msgstr "Skrýt názvy tabulí"
-#: src/app/main/ui/workspace/header.cljs
-msgid "workspace.header.menu.hide-grid"
-msgstr "Skrýt mřížky"
-
#: src/app/main/ui/workspace/header.cljs
msgid "workspace.header.menu.hide-palette"
msgstr "Skrýt paletu barev"
@@ -3027,10 +3006,6 @@ msgstr "Vybrat vše"
msgid "workspace.header.menu.show-artboard-names"
msgstr "Zobrazit názvy tabulí"
-#: src/app/main/ui/workspace/header.cljs
-msgid "workspace.header.menu.show-grid"
-msgstr "Zobrazit mřížku"
-
#: src/app/main/ui/workspace/header.cljs
msgid "workspace.header.menu.show-palette"
msgstr "Zobrazit paletu barev"
diff --git a/frontend/translations/de.po b/frontend/translations/de.po
index 3a5d167b0..fe563da32 100644
--- a/frontend/translations/de.po
+++ b/frontend/translations/de.po
@@ -2777,9 +2777,6 @@ msgstr "Fokusmodus umschalten"
msgid "shortcuts.toggle-fullscreen"
msgstr "Vollbild aktivieren/deaktivieren"
-msgid "shortcuts.toggle-grid"
-msgstr "Raster ein-/ausblenden"
-
msgid "shortcuts.toggle-history"
msgstr "Verlauf ein-/ausblenden"
@@ -2798,12 +2795,6 @@ msgstr "Seitenverhältnis sperren/entsperren"
msgid "shortcuts.toggle-rules"
msgstr "Lineale ein-/ausblenden"
-msgid "shortcuts.toggle-snap-grid"
-msgstr "Am Raster ausrichten"
-
-msgid "shortcuts.toggle-snap-guide"
-msgstr "An Hilfslinien ausrichten"
-
msgid "shortcuts.toggle-textpalette"
msgstr "Textpalette ein-/ausblenden"
@@ -3173,10 +3164,6 @@ msgstr "Proportionale Skalierung deaktivieren"
msgid "workspace.header.menu.disable-scale-text"
msgstr "Textskalierung deaktivieren"
-#: src/app/main/ui/workspace/header.cljs
-msgid "workspace.header.menu.disable-snap-grid"
-msgstr "Am Raster ausrichten deaktivieren"
-
#: src/app/main/ui/workspace/header.cljs
msgid "workspace.header.menu.disable-snap-guides"
msgstr "Ausrichten an Hilfslinien deaktivieren"
@@ -3195,10 +3182,6 @@ msgstr "Proportionale Skalierung aktivieren"
msgid "workspace.header.menu.enable-scale-text"
msgstr "Textskalierung aktivieren"
-#: src/app/main/ui/workspace/header.cljs
-msgid "workspace.header.menu.enable-snap-grid"
-msgstr "Am Raster ausrichten"
-
#: src/app/main/ui/workspace/header.cljs
msgid "workspace.header.menu.enable-snap-guides"
msgstr "An Hilfslinien ausrichten"
@@ -3210,10 +3193,6 @@ msgstr "Ausrichten am Pixel aktivieren"
msgid "workspace.header.menu.hide-artboard-names"
msgstr "Namen von Zeichenflächen ausblenden"
-#: src/app/main/ui/workspace/header.cljs
-msgid "workspace.header.menu.hide-grid"
-msgstr "Raster ausblenden"
-
#: src/app/main/ui/workspace/header.cljs
msgid "workspace.header.menu.hide-palette"
msgstr "Farbpalette ausblenden"
@@ -3260,10 +3239,6 @@ msgstr "Alles auswählen"
msgid "workspace.header.menu.show-artboard-names"
msgstr "Namen der Zeichenflächen anzeigen"
-#: src/app/main/ui/workspace/header.cljs
-msgid "workspace.header.menu.show-grid"
-msgstr "Raster einblenden"
-
#: src/app/main/ui/workspace/header.cljs
msgid "workspace.header.menu.show-palette"
msgstr "Farbpalette einblenden"
diff --git a/frontend/translations/el.po b/frontend/translations/el.po
index d8c1acc11..cc62a2301 100644
--- a/frontend/translations/el.po
+++ b/frontend/translations/el.po
@@ -1348,22 +1348,10 @@ msgstr "Ακτινική κλίση"
msgid "workspace.header.menu.disable-dynamic-alignment"
msgstr "Απενεργοποίηση δυναμικής ευθυγράμμισης"
-#: src/app/main/ui/workspace/header.cljs
-msgid "workspace.header.menu.disable-snap-grid"
-msgstr "Απενεργοποιήστε τη σύνδεση στο πλέγμα"
-
#: src/app/main/ui/workspace/header.cljs
msgid "workspace.header.menu.enable-dynamic-alignment"
msgstr "Ενεργοποίηση δυναμικής ευθυγράμμισης"
-#: src/app/main/ui/workspace/header.cljs
-msgid "workspace.header.menu.enable-snap-grid"
-msgstr "Σύνδεση στο πλέγμα"
-
-#: src/app/main/ui/workspace/header.cljs
-msgid "workspace.header.menu.hide-grid"
-msgstr "Απόκρυψη πλεγμάτων"
-
#: src/app/main/ui/workspace/header.cljs
msgid "workspace.header.menu.hide-palette"
msgstr "Απόκρυψη παλέτας χρωμάτων"
@@ -1376,10 +1364,6 @@ msgstr "Απόκρυψη κανόνες"
msgid "workspace.header.menu.select-all"
msgstr "Επιλογή όλων"
-#: src/app/main/ui/workspace/header.cljs
-msgid "workspace.header.menu.show-grid"
-msgstr "Εμφάνιση πλέγματος"
-
#: src/app/main/ui/workspace/header.cljs
msgid "workspace.header.menu.show-palette"
msgstr "Εμφάνιση παλέτας χρωμάτων"
diff --git a/frontend/translations/en.po b/frontend/translations/en.po
index b1a01bb1a..fa989a0c7 100644
--- a/frontend/translations/en.po
+++ b/frontend/translations/en.po
@@ -988,7 +988,7 @@ msgid "errors.webhooks.invalid-uri"
msgstr "URL does not pass validation."
msgid "errors.webhooks.last-delivery"
-msgstr "Last delivery was not successfull."
+msgstr "Last delivery was not successful."
msgid "errors.webhooks.ssl-validation"
msgstr "Error on SSL validation."
@@ -2949,8 +2949,8 @@ msgstr "Toggle focus mode"
msgid "shortcuts.toggle-fullscreen"
msgstr "Toggle fullscreen"
-msgid "shortcuts.toggle-grid"
-msgstr "Show / Hide grid"
+msgid "shortcuts.toggle-guides"
+msgstr "Show / Hide guides"
msgid "shortcuts.toggle-history"
msgstr "Toggle history"
@@ -2967,18 +2967,18 @@ msgstr "Lock / Unlock"
msgid "shortcuts.toggle-lock-size"
msgstr "Lock proportions"
-msgid "shortcuts.toggle-rules"
+msgid "shortcuts.toggle-rulers"
msgstr "Show / Hide rulers"
msgid "shortcuts.scale"
msgstr "Scale"
-msgid "shortcuts.toggle-snap-grid"
-msgstr "Snap to grid"
-
-msgid "shortcuts.toggle-snap-guide"
+msgid "shortcuts.toggle-snap-guides"
msgstr "Snap to guides"
+msgid "shortcuts.toggle-snap-ruler-guide"
+msgstr "Snap to ruler guides"
+
msgid "shortcuts.toggle-textpalette"
msgstr "Toggle text palette"
@@ -3144,7 +3144,7 @@ msgid "viewer.header.sitemap"
msgstr "Sitemap"
msgid "webhooks.last-delivery.success"
-msgstr "Last delivery was successfull."
+msgstr "Last delivery was successful."
#: src/app/main/ui/workspace/sidebar/align.cljs
msgid "workspace.align.hcenter"
@@ -3339,14 +3339,14 @@ msgstr "Disable proportional scale"
msgid "workspace.header.menu.disable-scale-text"
msgstr "Disable scale text"
-#: src/app/main/ui/workspace/header.cljs
-msgid "workspace.header.menu.disable-snap-grid"
-msgstr "Disable snap to grid"
-
#: src/app/main/ui/workspace/header.cljs
msgid "workspace.header.menu.disable-snap-guides"
msgstr "Disable snap to guides"
+#: src/app/main/ui/workspace/header.cljs
+msgid "workspace.header.menu.disable-snap-ruler-guides"
+msgstr "Disable snap to ruler guides"
+
msgid "workspace.header.menu.disable-snap-pixel-grid"
msgstr "Disable snap to pixel"
@@ -3361,14 +3361,14 @@ msgstr "Enable proportional scale"
msgid "workspace.header.menu.enable-scale-text"
msgstr "Enable scale text"
-#: src/app/main/ui/workspace/header.cljs
-msgid "workspace.header.menu.enable-snap-grid"
-msgstr "Snap to grid"
-
#: src/app/main/ui/workspace/header.cljs
msgid "workspace.header.menu.enable-snap-guides"
msgstr "Snap to guides"
+#: src/app/main/ui/workspace/header.cljs
+msgid "workspace.header.menu.enable-snap-ruler-guides"
+msgstr "Snap to ruler guides"
+
msgid "workspace.header.menu.enable-snap-pixel-grid"
msgstr "Enable snap to pixel"
@@ -3377,8 +3377,8 @@ msgid "workspace.header.menu.hide-artboard-names"
msgstr "Hide board names"
#: src/app/main/ui/workspace/header.cljs
-msgid "workspace.header.menu.hide-grid"
-msgstr "Hide grids"
+msgid "workspace.header.menu.hide-guides"
+msgstr "Hide guides"
#: src/app/main/ui/workspace/header.cljs
msgid "workspace.header.menu.hide-palette"
@@ -3427,8 +3427,8 @@ msgid "workspace.header.menu.show-artboard-names"
msgstr "Show boards names"
#: src/app/main/ui/workspace/header.cljs
-msgid "workspace.header.menu.show-grid"
-msgstr "Show grid"
+msgid "workspace.header.menu.show-guides"
+msgstr "Show guides"
#: src/app/main/ui/workspace/header.cljs
msgid "workspace.header.menu.show-palette"
@@ -3520,6 +3520,9 @@ msgstr "Edit grid"
msgid "workspace.layout_grid.editor.options.exit"
msgstr "Exit"
+msgid "workspace.layout_grid.editor.padding.expand"
+msgstr "Show 4 sided padding options"
+
#: src/app/main/ui/workspace/libraries.cljs
msgid "workspace.libraries.add"
msgstr "Add"
@@ -5060,8 +5063,8 @@ msgid "workspace.viewport.click-to-close-path"
msgstr "Click to close the path"
#, markdown
-msgid "workspace.top-bar.read-only"
-msgstr "**Inspect mode** (View Only)"
+msgid "workspace.top-bar.view-only"
+msgstr "**Inspecting mode** (View Only)"
msgid "workspace.top-bar.read-only.done"
msgstr "Done"
diff --git a/frontend/translations/es.po b/frontend/translations/es.po
index 5ce93d9b9..73140e72c 100644
--- a/frontend/translations/es.po
+++ b/frontend/translations/es.po
@@ -2995,8 +2995,8 @@ msgstr "Mostrar/ocultar focus mode"
msgid "shortcuts.toggle-fullscreen"
msgstr "Activar/desactivar pantalla completa"
-msgid "shortcuts.toggle-grid"
-msgstr "Mostrar/ocultar rejilla"
+msgid "shortcuts.toggle-guides"
+msgstr "Mostrar/ocultar guías"
msgid "shortcuts.toggle-history"
msgstr "Mostrar/ocultar histórico"
@@ -3013,17 +3013,17 @@ msgstr "Bloquear/Desbloquear"
msgid "shortcuts.toggle-lock-size"
msgstr "Bloquear/Desbloquear proporciones"
-msgid "shortcuts.toggle-rules"
+msgid "shortcuts.toggle-rulers"
msgstr "Mostrar/ocultar reglas"
msgid "shortcuts.scale"
msgstr "Escalado"
-msgid "shortcuts.toggle-snap-grid"
-msgstr "Alinear a la rejilla"
+msgid "shortcuts.toggle-snap-guides"
+msgstr "Alinear a las guías"
-msgid "shortcuts.toggle-snap-guide"
-msgstr "Alinear a las guias"
+msgid "shortcuts.toggle-snap-ruler-guide"
+msgstr "Alinear a las guías de reglas"
msgid "shortcuts.toggle-textpalette"
msgstr "Mostrar/ocultar paleta de textos"
@@ -3401,14 +3401,14 @@ msgstr "Desactivar escala proporcional"
msgid "workspace.header.menu.disable-scale-text"
msgstr "Desactivar escalar texto"
-#: src/app/main/ui/workspace/header.cljs
-msgid "workspace.header.menu.disable-snap-grid"
-msgstr "Desactivar alinear a la rejilla"
-
#: src/app/main/ui/workspace/header.cljs
msgid "workspace.header.menu.disable-snap-guides"
msgstr "Desactivar alinear a las guias"
+#: src/app/main/ui/workspace/header.cljs
+msgid "workspace.header.menu.disable-snap-ruler-guides"
+msgstr "Desactivar alinear a las guias de reglas"
+
msgid "workspace.header.menu.disable-snap-pixel-grid"
msgstr "Desactivar ajuste al pixel"
@@ -3423,14 +3423,14 @@ msgstr "Activar escala proporcional"
msgid "workspace.header.menu.enable-scale-text"
msgstr "Activar escalar texto"
-#: src/app/main/ui/workspace/header.cljs
-msgid "workspace.header.menu.enable-snap-grid"
-msgstr "Alinear a la rejilla"
-
#: src/app/main/ui/workspace/header.cljs
msgid "workspace.header.menu.enable-snap-guides"
msgstr "Alinear a las guias"
+#: src/app/main/ui/workspace/header.cljs
+msgid "workspace.header.menu.enable-snap-ruler-guides"
+msgstr "Alinear a las guias de reglas"
+
msgid "workspace.header.menu.enable-snap-pixel-grid"
msgstr "Activar ajuste al pixel"
@@ -3439,8 +3439,8 @@ msgid "workspace.header.menu.hide-artboard-names"
msgstr "Ocultar nombres de tableros"
#: src/app/main/ui/workspace/header.cljs
-msgid "workspace.header.menu.hide-grid"
-msgstr "Ocultar rejillas"
+msgid "workspace.header.menu.hide-guides"
+msgstr "Ocultar guías"
#: src/app/main/ui/workspace/header.cljs
msgid "workspace.header.menu.hide-palette"
@@ -3489,7 +3489,7 @@ msgid "workspace.header.menu.show-artboard-names"
msgstr "Mostrar nombres de tableros"
#: src/app/main/ui/workspace/header.cljs
-msgid "workspace.header.menu.show-grid"
+msgid "workspace.header.menu.show-g"
msgstr "Mostrar rejilla"
#: src/app/main/ui/workspace/header.cljs
@@ -3582,6 +3582,9 @@ msgstr "Editar rejilla"
msgid "workspace.layout_grid.editor.options.exit"
msgstr "Salir"
+msgid "workspace.layout_grid.editor.padding.expand"
+msgstr "Mostrar el padding a 4 lados"
+
#: src/app/main/ui/workspace/libraries.cljs
msgid "workspace.libraries.add"
msgstr "Añadir"
@@ -3630,7 +3633,7 @@ msgstr "%s componentes"
#: src/app/main/ui/workspace/libraries.cljs
msgid "workspace.libraries.file-library"
-msgstr "Biblioteca de este archivo"
+msgstr "Biblioteca del archivo"
#: src/app/main/ui/workspace/libraries.cljs
msgid "workspace.libraries.graphics"
@@ -5145,7 +5148,7 @@ msgid "workspace.viewport.click-to-close-path"
msgstr "Pulsar para cerrar la ruta"
#, markdown
-msgid "workspace.top-bar.read-only"
+msgid "workspace.top-bar.view-only"
msgstr "**Modo inspección** (View only)"
msgid "workspace.top-bar.read-only.done"
diff --git a/frontend/translations/eu.po b/frontend/translations/eu.po
index 5be03e1d3..9436e9d85 100644
--- a/frontend/translations/eu.po
+++ b/frontend/translations/eu.po
@@ -2553,9 +2553,6 @@ msgstr "Erakutsi/ezkutatu foko-modua"
msgid "shortcuts.toggle-fullscreen"
msgstr "Aktibatu/desaktibatu pantaila osoa"
-msgid "shortcuts.toggle-grid"
-msgstr "Erakutsi/ezkutatu sarea"
-
msgid "shortcuts.toggle-history"
msgstr "Erakutsi/Ezkutatu historikoa"
@@ -2574,12 +2571,6 @@ msgstr "Blokeatu/Desblokeatu proportzioak"
msgid "shortcuts.toggle-rules"
msgstr "Erakutsi/ezkutatu erregelak"
-msgid "shortcuts.toggle-snap-grid"
-msgstr "Lerrokatu sarera"
-
-msgid "shortcuts.toggle-snap-guide"
-msgstr "Lerroatu gidetara"
-
msgid "shortcuts.toggle-textpalette"
msgstr "Erakutsi/Ezkutatu testuen paleta"
@@ -2938,10 +2929,6 @@ msgstr "Desaktibatu eskala proportzionala"
msgid "workspace.header.menu.disable-scale-text"
msgstr "Desaktibatu testu eskala"
-#: src/app/main/ui/workspace/header.cljs
-msgid "workspace.header.menu.disable-snap-grid"
-msgstr "Desaktibatu sarera atxikitzea"
-
#: src/app/main/ui/workspace/header.cljs
msgid "workspace.header.menu.disable-snap-guides"
msgstr "Desaktibatu gidetara atxikitzea"
@@ -2960,10 +2947,6 @@ msgstr "Aktibatu eskala proportzionala"
msgid "workspace.header.menu.enable-scale-text"
msgstr "Aktibatu testua eskalatzea"
-#: src/app/main/ui/workspace/header.cljs
-msgid "workspace.header.menu.enable-snap-grid"
-msgstr "Atxikitu sarera"
-
#: src/app/main/ui/workspace/header.cljs
msgid "workspace.header.menu.enable-snap-guides"
msgstr "Atxikitu gidetara"
@@ -2975,10 +2958,6 @@ msgstr "Aktibatu pixelera atxikitzea"
msgid "workspace.header.menu.hide-artboard-names"
msgstr "Ezkutatu arbelen izenak"
-#: src/app/main/ui/workspace/header.cljs
-msgid "workspace.header.menu.hide-grid"
-msgstr "Ezkutatu saretak"
-
#: src/app/main/ui/workspace/header.cljs
msgid "workspace.header.menu.hide-palette"
msgstr "Ezkutatu kolore-paleta"
@@ -3025,17 +3004,10 @@ msgstr "Guztiak aukeratu"
msgid "workspace.header.menu.show-artboard-names"
msgstr "Erakutsi arbelen izenak"
-#: src/app/main/ui/workspace/header.cljs
-msgid "workspace.header.menu.show-grid"
-msgstr "Erakutsi sareta"
-
#: src/app/main/ui/workspace/header.cljs
msgid "workspace.header.menu.show-palette"
msgstr "Erakutsi kolore-paleta"
-msgid "workspace.header.menu.show-pixel-grid"
-msgstr "Erakutsi pixelen sarea"
-
#: src/app/main/ui/workspace/header.cljs
msgid "workspace.header.menu.show-rules"
msgstr "Erakutsi erregelak"
diff --git a/frontend/translations/fa.po b/frontend/translations/fa.po
index e93886d64..f010b9a74 100644
--- a/frontend/translations/fa.po
+++ b/frontend/translations/fa.po
@@ -1876,10 +1876,6 @@ msgstr "انتقال"
msgid "shortcuts.paste"
msgstr "چسباندن"
-#, fuzzy
-msgid "shortcuts.toggle-grid"
-msgstr "نمایش/پنهان کردن شبکهبندی"
-
msgid "shortcuts.toggle-rules"
msgstr "نمایش/پنهان کردن خطکشها"
diff --git a/frontend/translations/fr.po b/frontend/translations/fr.po
index 9c0f87d06..87d06e573 100644
--- a/frontend/translations/fr.po
+++ b/frontend/translations/fr.po
@@ -2771,9 +2771,6 @@ msgstr "Activer/désactiver le mode focus"
msgid "shortcuts.toggle-fullscreen"
msgstr "Activer/désactiver le plein écran"
-msgid "shortcuts.toggle-grid"
-msgstr "Afficher/masquer la grille"
-
msgid "shortcuts.toggle-history"
msgstr "Activer/désactiver l'historique"
@@ -2792,12 +2789,6 @@ msgstr "Verrouiller les proportions"
msgid "shortcuts.toggle-rules"
msgstr "Afficher/masquer les règles"
-msgid "shortcuts.toggle-snap-grid"
-msgstr "Aligner sur la grille"
-
-msgid "shortcuts.toggle-snap-guide"
-msgstr "Aligner sur les guides"
-
msgid "shortcuts.toggle-textpalette"
msgstr "Afficher/masquer la palette de texte"
@@ -3136,10 +3127,6 @@ msgstr "Désactiver l’alignement dynamique"
msgid "workspace.header.menu.disable-scale-text"
msgstr "Désactiver la mise à l'échelle du texte"
-#: src/app/main/ui/workspace/header.cljs
-msgid "workspace.header.menu.disable-snap-grid"
-msgstr "Désactiver l’alignement sur la grille"
-
#: src/app/main/ui/workspace/header.cljs
msgid "workspace.header.menu.disable-snap-guides"
msgstr "Désactiver l’alignement sur les guides"
@@ -3155,10 +3142,6 @@ msgstr "Activer l’alignement dynamique"
msgid "workspace.header.menu.enable-scale-text"
msgstr "Activer le redimensionnement du texte"
-#: src/app/main/ui/workspace/header.cljs
-msgid "workspace.header.menu.enable-snap-grid"
-msgstr "Aligner sur la grille"
-
#: src/app/main/ui/workspace/header.cljs
msgid "workspace.header.menu.enable-snap-guides"
msgstr "Aligner sur les guides"
@@ -3170,10 +3153,6 @@ msgstr "Activer l’alignement au pixel"
msgid "workspace.header.menu.hide-artboard-names"
msgstr "Masquer le nom des plans de travail"
-#: src/app/main/ui/workspace/header.cljs
-msgid "workspace.header.menu.hide-grid"
-msgstr "Masquer la grille"
-
#: src/app/main/ui/workspace/header.cljs
msgid "workspace.header.menu.hide-palette"
msgstr "Masquer la palette de couleurs"
@@ -3217,10 +3196,6 @@ msgstr "Tout sélectionner"
msgid "workspace.header.menu.show-artboard-names"
msgstr "Afficher le nom des plans de travail"
-#: src/app/main/ui/workspace/header.cljs
-msgid "workspace.header.menu.show-grid"
-msgstr "Montrer la grille"
-
#: src/app/main/ui/workspace/header.cljs
msgid "workspace.header.menu.show-palette"
msgstr "Montrer la palette de couleurs"
diff --git a/frontend/translations/ha.po b/frontend/translations/ha.po
index 5f2773ae9..27661a3aa 100644
--- a/frontend/translations/ha.po
+++ b/frontend/translations/ha.po
@@ -1908,10 +1908,6 @@ msgstr "kulle"
msgid "labels.help-center"
msgstr "sashen taimako"
-#: src/app/main/ui/workspace/header.cljs
-msgid "workspace.header.menu.hide-grid"
-msgstr "Boye akwati"
-
#: src/app/main/ui/workspace/sidebar/history.cljs
msgid "workspace.undo.entry.modify"
msgstr "gyaggyarawa %s"
@@ -1946,10 +1942,6 @@ msgstr ""
msgid "errors.email-has-permanent-bounces"
msgstr "imel «%s» na da bayanan matsaloli na dindindin."
-#: src/app/main/ui/workspace/header.cljs
-msgid "workspace.header.menu.disable-snap-grid"
-msgstr "kashe tsinkewa zuwa akwati"
-
msgid "errors.webhooks.unexpected-status"
msgstr "matsayin da ba zato %s"
@@ -2966,9 +2958,6 @@ msgstr "tsarin salo"
msgid "dashboard.import.analyze-error"
msgstr "kash! mun gaza shigo da kundinka"
-msgid "shortcuts.toggle-snap-guide"
-msgstr "Tsinke zuwa mai jagora"
-
#: src/app/main/ui/auth/recovery_request.cljs
msgid "auth.recovery-request-subtitle"
msgstr "za mu aika maka da saqon qa'idoji ta imel"
@@ -3307,10 +3296,6 @@ msgstr "kammala aiki"
msgid "ds.confirm-ok"
msgstr "haka"
-#: src/app/main/ui/workspace/header.cljs
-msgid "workspace.header.menu.show-grid"
-msgstr "nuna akwati"
-
#: src/app/main/ui/settings/team-form.cljs, src/app/main/ui/auth/register.cljs, src/app/main/ui/dashboard/team_form.cljs, src/app/main/ui/onboarding/team_choice.cljs, src/app/main/ui/settings/access_tokens.cljs, src/app/main/ui/settings/feedback.cljs, src/app/main/ui/settings/profile.cljs, src/app/main/ui/workspace/sidebar/assets.cljs
msgid "auth.name.not-all-space"
msgstr "dole suna ya qumshi waxansu alamimon rubutu, sannan tazara."
@@ -3722,9 +3707,6 @@ msgstr "fadi"
msgid "inspect.empty.select"
msgstr "zabar zubi, hukumar masu sa ido akan bangarorinsu da lambobinsu"
-msgid "shortcuts.toggle-grid"
-msgstr "Nuna/boye akwati"
-
#: src/app/main/ui/settings/access-tokens.cljs
msgid "dashboard.access-tokens.expires-on"
msgstr "gama aiki kan %s"
@@ -4023,10 +4005,6 @@ msgstr "yanayin kallo (%s)"
msgid "workspace.path.actions.make-curve"
msgstr "Ta lankwasa (%s)"
-#: src/app/main/ui/workspace/header.cljs
-msgid "workspace.header.menu.enable-snap-grid"
-msgstr "Tsinke zuwa akwati"
-
msgid "workspace.options.search-font"
msgstr "nemo jerin harufa"
@@ -4501,9 +4479,6 @@ msgstr "Upload custom fonts"
msgid "shortcuts.flip-horizontal"
msgstr "kifa shi dai dai"
-msgid "shortcuts.toggle-snap-grid"
-msgstr "Tsinke akwati"
-
msgid "dashboard.import.progress.process-components"
msgstr "aikin sassa"
diff --git a/frontend/translations/he.po b/frontend/translations/he.po
index 7f75d5c40..eafd1cd44 100644
--- a/frontend/translations/he.po
+++ b/frontend/translations/he.po
@@ -2802,9 +2802,6 @@ msgstr "החלפת מצב מיקוד"
msgid "shortcuts.toggle-fullscreen"
msgstr "החלפת מילוי מסך"
-msgid "shortcuts.toggle-grid"
-msgstr "הצגת/הסתרת רשת"
-
msgid "shortcuts.toggle-history"
msgstr "החלפת הצגת היסטוריה"
@@ -2823,12 +2820,6 @@ msgstr "נעילת יחס"
msgid "shortcuts.toggle-rules"
msgstr "הצגת/הסתרת סרגלים"
-msgid "shortcuts.toggle-snap-grid"
-msgstr "הצמדה לרשת"
-
-msgid "shortcuts.toggle-snap-guide"
-msgstr "הצמדה לקווים מנחים"
-
msgid "shortcuts.toggle-textpalette"
msgstr "החלפת לוח טקסט"
@@ -3202,10 +3193,6 @@ msgstr "השבתת קנה מידה יחסי"
msgid "workspace.header.menu.disable-scale-text"
msgstr "השבתת שינוי גודל טקסט"
-#: src/app/main/ui/workspace/header.cljs
-msgid "workspace.header.menu.disable-snap-grid"
-msgstr "השבתת הצמדה לרשת"
-
#: src/app/main/ui/workspace/header.cljs
msgid "workspace.header.menu.disable-snap-guides"
msgstr "השבתת הצמדה לקווים המנחים"
@@ -3224,10 +3211,6 @@ msgstr "הפעלת קנה מידה יחסי"
msgid "workspace.header.menu.enable-scale-text"
msgstr "הפעלת שינוי גודל טקסט"
-#: src/app/main/ui/workspace/header.cljs
-msgid "workspace.header.menu.enable-snap-grid"
-msgstr "הצמדה לרשת"
-
#: src/app/main/ui/workspace/header.cljs
msgid "workspace.header.menu.enable-snap-guides"
msgstr "הצמדה לקווים מנחים"
@@ -3239,10 +3222,6 @@ msgstr "הפעלת הצמדה לפיקסל"
msgid "workspace.header.menu.hide-artboard-names"
msgstr "הסתרת שמות לוחות"
-#: src/app/main/ui/workspace/header.cljs
-msgid "workspace.header.menu.hide-grid"
-msgstr "הסתרת רשתות"
-
#: src/app/main/ui/workspace/header.cljs
msgid "workspace.header.menu.hide-palette"
msgstr "הסתרת ערכת צבעים"
@@ -3289,10 +3268,6 @@ msgstr "לבחור הכול"
msgid "workspace.header.menu.show-artboard-names"
msgstr "הצגת שמות לוחות"
-#: src/app/main/ui/workspace/header.cljs
-msgid "workspace.header.menu.show-grid"
-msgstr "הצגת רשת"
-
#: src/app/main/ui/workspace/header.cljs
msgid "workspace.header.menu.show-palette"
msgstr "הצגת ערכת צבעים"
diff --git a/frontend/translations/hr.po b/frontend/translations/hr.po
index 7fc04586d..a0e38637e 100644
--- a/frontend/translations/hr.po
+++ b/frontend/translations/hr.po
@@ -2333,10 +2333,6 @@ msgstr "Promijena fokus moda"
msgid "shortcuts.toggle-fullscreen"
msgstr "Promijeni cijeli zaslon"
-#, fuzzy
-msgid "shortcuts.toggle-grid"
-msgstr "Promijena \"grida\""
-
msgid "shortcuts.toggle-history"
msgstr "Promijena povijesti"
@@ -2353,14 +2349,6 @@ msgstr "Zaključaj proporcije"
msgid "shortcuts.toggle-rules"
msgstr "Prikaži/sakrij \"rules\""
-#, fuzzy
-msgid "shortcuts.toggle-snap-grid"
-msgstr "Poravnanje s \"gridom\""
-
-#, fuzzy
-msgid "shortcuts.toggle-snap-guide"
-msgstr "Pričvrsti na guides"
-
msgid "shortcuts.toggle-textpalette"
msgstr "Promijeni paletu teksta"
@@ -2692,10 +2680,6 @@ msgstr "Onemogući dinamičko poravnanje"
msgid "workspace.header.menu.disable-scale-text"
msgstr "Onemogući skaliranje teksta"
-#: src/app/main/ui/workspace/header.cljs
-msgid "workspace.header.menu.disable-snap-grid"
-msgstr "Onemogući \"snap to grid\""
-
#: src/app/main/ui/workspace/header.cljs
#, fuzzy
msgid "workspace.header.menu.disable-snap-guides"
@@ -2713,10 +2697,6 @@ msgstr "Omogući dinamičko poravnanje"
msgid "workspace.header.menu.enable-scale-text"
msgstr "Omogući skaliranje teksta"
-#: src/app/main/ui/workspace/header.cljs
-#, fuzzy
-msgid "workspace.header.menu.enable-snap-grid"
-msgstr "Poravnanje s \"gridom\""
#: src/app/main/ui/workspace/header.cljs
#, fuzzy
@@ -2731,11 +2711,6 @@ msgstr "Omogući \"snap to pixel\""
msgid "workspace.header.menu.hide-artboard-names"
msgstr "Sakrij nazive ploča"
-#: src/app/main/ui/workspace/header.cljs
-#, fuzzy
-msgid "workspace.header.menu.hide-grid"
-msgstr "Sakrij \"grid\""
-
#: src/app/main/ui/workspace/header.cljs
msgid "workspace.header.menu.hide-palette"
msgstr "Sakrij paletu boja"
@@ -2780,10 +2755,6 @@ msgstr "Odaberi sve"
msgid "workspace.header.menu.show-artboard-names"
msgstr "Prikaži nazive ploča"
-#: src/app/main/ui/workspace/header.cljs
-msgid "workspace.header.menu.show-grid"
-msgstr "Prikaži \"grid\""
-
#: src/app/main/ui/workspace/header.cljs
msgid "workspace.header.menu.show-palette"
msgstr "Prikaži paletu boja"
diff --git a/frontend/translations/id.po b/frontend/translations/id.po
index 551cd6091..037737bdd 100644
--- a/frontend/translations/id.po
+++ b/frontend/translations/id.po
@@ -2910,9 +2910,6 @@ msgstr "Alih mode fokus"
msgid "shortcuts.toggle-fullscreen"
msgstr "Alih layar penuh"
-msgid "shortcuts.toggle-grid"
-msgstr "Tampilkan/sembunyikan kisi"
-
msgid "shortcuts.toggle-history"
msgstr "Alih riwayat"
@@ -2931,12 +2928,6 @@ msgstr "Kunci proporsi"
msgid "shortcuts.toggle-rules"
msgstr "Tampilkan/sembunyikan penggaris"
-msgid "shortcuts.toggle-snap-grid"
-msgstr "Tancap ke kisi"
-
-msgid "shortcuts.toggle-snap-guide"
-msgstr "Tancap ke pemandu"
-
msgid "shortcuts.toggle-textpalette"
msgstr "Alih palet teks"
@@ -3307,10 +3298,6 @@ msgstr "Nonaktifkan skala proporsional"
msgid "workspace.header.menu.disable-scale-text"
msgstr "Nonaktifkan skala teks"
-#: src/app/main/ui/workspace/header.cljs
-msgid "workspace.header.menu.disable-snap-grid"
-msgstr "Nonaktifkan tancapan ke kisi"
-
#: src/app/main/ui/workspace/header.cljs
msgid "workspace.header.menu.disable-snap-guides"
msgstr "Nonaktifkan tancapan ke pemandu"
@@ -3329,10 +3316,6 @@ msgstr "Aktifkan skala proporsional"
msgid "workspace.header.menu.enable-scale-text"
msgstr "Aktifkan skala teks"
-#: src/app/main/ui/workspace/header.cljs
-msgid "workspace.header.menu.enable-snap-grid"
-msgstr "Tancapkan ke kisi"
-
#: src/app/main/ui/workspace/header.cljs
msgid "workspace.header.menu.enable-snap-guides"
msgstr "Tancapkan ke pemandu"
@@ -3344,10 +3327,6 @@ msgstr "Aktifkan tancapkan ke piksel"
msgid "workspace.header.menu.hide-artboard-names"
msgstr "Sembunyikan nama papan"
-#: src/app/main/ui/workspace/header.cljs
-msgid "workspace.header.menu.hide-grid"
-msgstr "Sembunyikan kisi"
-
#: src/app/main/ui/workspace/header.cljs
msgid "workspace.header.menu.hide-palette"
msgstr "Sembunyikan palet warna"
@@ -3394,10 +3373,6 @@ msgstr "Pilih semua"
msgid "workspace.header.menu.show-artboard-names"
msgstr "Tampilkan nama papan"
-#: src/app/main/ui/workspace/header.cljs
-msgid "workspace.header.menu.show-grid"
-msgstr "Tampilkan kisi"
-
#: src/app/main/ui/workspace/header.cljs
msgid "workspace.header.menu.show-palette"
msgstr "Tampilkan palet warna"
diff --git a/frontend/translations/lv.po b/frontend/translations/lv.po
index e786756ee..72c325638 100644
--- a/frontend/translations/lv.po
+++ b/frontend/translations/lv.po
@@ -2897,9 +2897,6 @@ msgstr "Pārslēgt fokusa režīmu"
msgid "shortcuts.toggle-fullscreen"
msgstr "Pārslēgt pilnekrāna režīmu"
-msgid "shortcuts.toggle-grid"
-msgstr "Rādīt/paslēpt režģi"
-
msgid "shortcuts.toggle-history"
msgstr "Pārslēgt vēsturi"
@@ -2918,12 +2915,6 @@ msgstr "Slēgt proporcijas"
msgid "shortcuts.toggle-rules"
msgstr "Rādīt/paslēpt mērjoslas"
-msgid "shortcuts.toggle-snap-grid"
-msgstr "Pieķerties režģim"
-
-msgid "shortcuts.toggle-snap-guide"
-msgstr "Pieķerties vadotnēm"
-
msgid "shortcuts.toggle-textpalette"
msgstr "Pārslēgt teksta paleti"
@@ -3293,10 +3284,6 @@ msgstr "Atspējot proporcionālo mērogu"
msgid "workspace.header.menu.disable-scale-text"
msgstr "Deaktivizēt teksta mērogošanu"
-#: src/app/main/ui/workspace/header.cljs
-msgid "workspace.header.menu.disable-snap-grid"
-msgstr "Atspējot pieķeršanos režģim"
-
#: src/app/main/ui/workspace/header.cljs
msgid "workspace.header.menu.disable-snap-guides"
msgstr "Atspējot pieķeršanos vadotnēm"
@@ -3315,10 +3302,6 @@ msgstr "Iespējot proporcionālo mērogu"
msgid "workspace.header.menu.enable-scale-text"
msgstr "Aktivizēt teksta mērogošanu"
-#: src/app/main/ui/workspace/header.cljs
-msgid "workspace.header.menu.enable-snap-grid"
-msgstr "Pieķerties režģim"
-
#: src/app/main/ui/workspace/header.cljs
msgid "workspace.header.menu.enable-snap-guides"
msgstr "Pieķerties vadotnēm"
@@ -3330,10 +3313,6 @@ msgstr "Iespējot pieķeršanos pikselim"
msgid "workspace.header.menu.hide-artboard-names"
msgstr "Paslēpt plātņu nosaukumus"
-#: src/app/main/ui/workspace/header.cljs
-msgid "workspace.header.menu.hide-grid"
-msgstr "Paslēpt režģus"
-
#: src/app/main/ui/workspace/header.cljs
msgid "workspace.header.menu.hide-palette"
msgstr "Paslēpt krāsu paleti"
@@ -3380,10 +3359,6 @@ msgstr "Atlasīt visu"
msgid "workspace.header.menu.show-artboard-names"
msgstr "Rādīt plātņu nosaukumus"
-#: src/app/main/ui/workspace/header.cljs
-msgid "workspace.header.menu.show-grid"
-msgstr "Rādīt režģi"
-
#: src/app/main/ui/workspace/header.cljs
msgid "workspace.header.menu.show-palette"
msgstr "Rādīt krāsu paleti"
diff --git a/frontend/translations/nb_NO.po b/frontend/translations/nb_NO.po
index 0d8307fa2..33b0e4b1d 100644
--- a/frontend/translations/nb_NO.po
+++ b/frontend/translations/nb_NO.po
@@ -602,14 +602,6 @@ msgstr "Størrelse"
msgid "workspace.assets.typography.font-variant-id"
msgstr "Variant"
-#: src/app/main/ui/workspace/header.cljs
-msgid "workspace.header.menu.enable-snap-grid"
-msgstr "Fest til rutenett"
-
-#: src/app/main/ui/workspace/header.cljs
-msgid "workspace.header.menu.show-grid"
-msgstr "Vis rutenett"
-
#: src/app/main/ui/workspace/header.cljs
msgid "workspace.header.menu.show-rules"
msgstr "Vis regler"
diff --git a/frontend/translations/nl.po b/frontend/translations/nl.po
index ad9b4beff..3e7a9bc04 100644
--- a/frontend/translations/nl.po
+++ b/frontend/translations/nl.po
@@ -2959,9 +2959,6 @@ msgstr "Focusmodus in/uitschakelen"
msgid "shortcuts.toggle-fullscreen"
msgstr "Volledig scherm in/uitschakelen"
-msgid "shortcuts.toggle-grid"
-msgstr "Raster tonen/verbergen"
-
msgid "shortcuts.toggle-history"
msgstr "Geschiedenis in/uitschakelen"
@@ -2980,12 +2977,6 @@ msgstr "Proporties vergrendelen"
msgid "shortcuts.toggle-rules"
msgstr "Linialen tonen/verbergen"
-msgid "shortcuts.toggle-snap-grid"
-msgstr "Uitlijnen op raster"
-
-msgid "shortcuts.toggle-snap-guide"
-msgstr "Uitlijnen op hulplijnen"
-
msgid "shortcuts.toggle-textpalette"
msgstr "Tekstpalet in/uitschakelen"
@@ -3357,10 +3348,6 @@ msgstr "Proportionele schaal uitschakelen"
msgid "workspace.header.menu.disable-scale-text"
msgstr "Tekstschaal uitschakelen"
-#: src/app/main/ui/workspace/header.cljs
-msgid "workspace.header.menu.disable-snap-grid"
-msgstr "Uitlijnen op raster uitschakelen"
-
#: src/app/main/ui/workspace/header.cljs
msgid "workspace.header.menu.disable-snap-guides"
msgstr "Uitlijnen op hulplijnen uitschakelen"
@@ -3379,10 +3366,6 @@ msgstr "Proportionele schaal inschakelen"
msgid "workspace.header.menu.enable-scale-text"
msgstr "Tekstschaal inschakelen"
-#: src/app/main/ui/workspace/header.cljs
-msgid "workspace.header.menu.enable-snap-grid"
-msgstr "Uitlijnen op raster"
-
#: src/app/main/ui/workspace/header.cljs
msgid "workspace.header.menu.enable-snap-guides"
msgstr "Uitlijnen op hulplijnen"
@@ -3394,10 +3377,6 @@ msgstr "Uitlijnen op pixel"
msgid "workspace.header.menu.hide-artboard-names"
msgstr "Bordnamen verbergen"
-#: src/app/main/ui/workspace/header.cljs
-msgid "workspace.header.menu.hide-grid"
-msgstr "Rasters verbergen"
-
#: src/app/main/ui/workspace/header.cljs
msgid "workspace.header.menu.hide-palette"
msgstr "Kleurenpalet verbergen"
@@ -3444,10 +3423,6 @@ msgstr "Alles selecteren"
msgid "workspace.header.menu.show-artboard-names"
msgstr "Bordnamen tonen"
-#: src/app/main/ui/workspace/header.cljs
-msgid "workspace.header.menu.show-grid"
-msgstr "Raster tonen"
-
#: src/app/main/ui/workspace/header.cljs
msgid "workspace.header.menu.show-palette"
msgstr "Kleurenpalet tonen"
diff --git a/frontend/translations/pl.po b/frontend/translations/pl.po
index b460b8b14..839c34218 100644
--- a/frontend/translations/pl.po
+++ b/frontend/translations/pl.po
@@ -2451,9 +2451,6 @@ msgstr "Przełącz tryb skupienia"
msgid "shortcuts.toggle-fullscreen"
msgstr "Przełącz tryb pełnoekranowy"
-msgid "shortcuts.toggle-grid"
-msgstr "Pokaż/ukryj siatkę"
-
msgid "shortcuts.toggle-history"
msgstr "Przełącz historię"
@@ -2472,12 +2469,6 @@ msgstr "Zablokuj proporcje"
msgid "shortcuts.toggle-rules"
msgstr "Pokaż/ukryj linijki"
-msgid "shortcuts.toggle-snap-grid"
-msgstr "Przyciągaj do siatki"
-
-msgid "shortcuts.toggle-snap-guide"
-msgstr "Przyciągaj do prowadnic"
-
msgid "shortcuts.toggle-textpalette"
msgstr "Przełącz paletę tekstu"
@@ -2805,10 +2796,6 @@ msgstr "Wyłącz wyrównanie dynamiczne"
msgid "workspace.header.menu.disable-scale-text"
msgstr "Wyłącz skalowanie tekstu"
-#: src/app/main/ui/workspace/header.cljs
-msgid "workspace.header.menu.disable-snap-grid"
-msgstr "Wyłącz przyciąganie do siatki"
-
#: src/app/main/ui/workspace/header.cljs
msgid "workspace.header.menu.disable-snap-guides"
msgstr "Wyłącz przyciąganie do prowadnic"
@@ -2824,10 +2811,6 @@ msgstr "Włącz dynamiczne wyrównanie"
msgid "workspace.header.menu.enable-scale-text"
msgstr "Włącz skalowanie tekstu"
-#: src/app/main/ui/workspace/header.cljs
-msgid "workspace.header.menu.enable-snap-grid"
-msgstr "Przyciągaj do siatki"
-
#: src/app/main/ui/workspace/header.cljs
msgid "workspace.header.menu.enable-snap-guides"
msgstr "Przyciągaj do prowadnic"
@@ -2839,10 +2822,6 @@ msgstr "Włącz przyciąganie do piksela"
msgid "workspace.header.menu.hide-artboard-names"
msgstr "Ukryj nazwy obszarów kompozycji"
-#: src/app/main/ui/workspace/header.cljs
-msgid "workspace.header.menu.hide-grid"
-msgstr "Ukryj siatki"
-
#: src/app/main/ui/workspace/header.cljs
msgid "workspace.header.menu.hide-palette"
msgstr "Ukryj paletę kolorów"
@@ -2886,10 +2865,6 @@ msgstr "Zaznacz wszystko"
msgid "workspace.header.menu.show-artboard-names"
msgstr "Pokaz nazwy obszarów kompozycji"
-#: src/app/main/ui/workspace/header.cljs
-msgid "workspace.header.menu.show-grid"
-msgstr "Pokaż siatkę"
-
#: src/app/main/ui/workspace/header.cljs
msgid "workspace.header.menu.show-palette"
msgstr "Pokaż paletę kolorów"
diff --git a/frontend/translations/pt_BR.po b/frontend/translations/pt_BR.po
index 91ff93e5d..9610c9f4f 100644
--- a/frontend/translations/pt_BR.po
+++ b/frontend/translations/pt_BR.po
@@ -2442,9 +2442,6 @@ msgstr "Entrar/Sair do modo de foco"
msgid "shortcuts.toggle-fullscreen"
msgstr "Entrar/Sair da tela cheia"
-msgid "shortcuts.toggle-grid"
-msgstr "Mostrar/Esconder grade"
-
msgid "shortcuts.toggle-history"
msgstr "Mostrar/Esconder histórico"
@@ -2463,12 +2460,6 @@ msgstr "Fixar proporções"
msgid "shortcuts.toggle-rules"
msgstr "Mostrar/ocultar réguas"
-msgid "shortcuts.toggle-snap-grid"
-msgstr "Aderir a grade"
-
-msgid "shortcuts.toggle-snap-guide"
-msgstr "Aderir as réguas"
-
msgid "shortcuts.toggle-textpalette"
msgstr "Mostrar/Esconder paleta de tipografias"
@@ -2795,10 +2786,6 @@ msgstr "Desabilitar alinhamento dinâmico"
msgid "workspace.header.menu.disable-scale-text"
msgstr "Desativar escalonamento de texto"
-#: src/app/main/ui/workspace/header.cljs
-msgid "workspace.header.menu.disable-snap-grid"
-msgstr "Desativar aderência a grade"
-
#: src/app/main/ui/workspace/header.cljs
msgid "workspace.header.menu.disable-snap-guides"
msgstr "Desativar aderência as réguas"
@@ -2814,10 +2801,6 @@ msgstr "Habilitar alinhamento dinâmico"
msgid "workspace.header.menu.enable-scale-text"
msgstr "Ativar escalonamento de texto"
-#: src/app/main/ui/workspace/header.cljs
-msgid "workspace.header.menu.enable-snap-grid"
-msgstr "Aderir a grade de pixels"
-
#: src/app/main/ui/workspace/header.cljs
msgid "workspace.header.menu.enable-snap-guides"
msgstr "Aderir as réguas"
@@ -2829,10 +2812,6 @@ msgstr "Habilitar aderência a grade de pixels"
msgid "workspace.header.menu.hide-artboard-names"
msgstr "Esconder nomes das telas"
-#: src/app/main/ui/workspace/header.cljs
-msgid "workspace.header.menu.hide-grid"
-msgstr "Ocultar grades"
-
#: src/app/main/ui/workspace/header.cljs
msgid "workspace.header.menu.hide-palette"
msgstr "Esconder paleta de cores"
@@ -2876,10 +2855,6 @@ msgstr "Selecionar tudo"
msgid "workspace.header.menu.show-artboard-names"
msgstr "Mostrar nomes das telas"
-#: src/app/main/ui/workspace/header.cljs
-msgid "workspace.header.menu.show-grid"
-msgstr "Mostrar grade"
-
#: src/app/main/ui/workspace/header.cljs
msgid "workspace.header.menu.show-palette"
msgstr "Mostrar paleta de cores"
diff --git a/frontend/translations/pt_PT.po b/frontend/translations/pt_PT.po
index 7e7c16ffc..3bd8735be 100644
--- a/frontend/translations/pt_PT.po
+++ b/frontend/translations/pt_PT.po
@@ -2903,9 +2903,6 @@ msgstr "Alternar modo de foco"
msgid "shortcuts.toggle-fullscreen"
msgstr "Alternar tela cheia"
-msgid "shortcuts.toggle-grid"
-msgstr "Mostrar/ocultar grade"
-
msgid "shortcuts.toggle-history"
msgstr "Alternar histórico"
@@ -2924,12 +2921,6 @@ msgstr "Bloquear proporções"
msgid "shortcuts.toggle-rules"
msgstr "Mostrar/ocultar regras"
-msgid "shortcuts.toggle-snap-grid"
-msgstr "Ajustar à grade"
-
-msgid "shortcuts.toggle-snap-guide"
-msgstr "Ajustar às guias"
-
msgid "shortcuts.toggle-textpalette"
msgstr "Alternar paleta de texto"
@@ -3303,10 +3294,6 @@ msgstr "Desativar escala proporcional"
msgid "workspace.header.menu.disable-scale-text"
msgstr "Desativar escala de texto"
-#: src/app/main/ui/workspace/header.cljs
-msgid "workspace.header.menu.disable-snap-grid"
-msgstr "Desativar ajuste à grade"
-
#: src/app/main/ui/workspace/header.cljs
msgid "workspace.header.menu.disable-snap-guides"
msgstr "Desativar ajuste às guias"
@@ -3325,10 +3312,6 @@ msgstr "Ativar escala proporcional"
msgid "workspace.header.menu.enable-scale-text"
msgstr "Ativar escalar texto"
-#: src/app/main/ui/workspace/header.cljs
-msgid "workspace.header.menu.enable-snap-grid"
-msgstr "Ajustar à grade"
-
#: src/app/main/ui/workspace/header.cljs
msgid "workspace.header.menu.enable-snap-guides"
msgstr "Ajustar às guias"
@@ -3340,10 +3323,6 @@ msgstr "Ativar ajuste ao pixel"
msgid "workspace.header.menu.hide-artboard-names"
msgstr "Ocultar nome das pranchetas"
-#: src/app/main/ui/workspace/header.cljs
-msgid "workspace.header.menu.hide-grid"
-msgstr "Ocultar grades"
-
#: src/app/main/ui/workspace/header.cljs
msgid "workspace.header.menu.hide-palette"
msgstr "Ocultar paleta de cor"
@@ -3390,10 +3369,6 @@ msgstr "Selecionar tudo"
msgid "workspace.header.menu.show-artboard-names"
msgstr "Mostrar nomes das pranchetas"
-#: src/app/main/ui/workspace/header.cljs
-msgid "workspace.header.menu.show-grid"
-msgstr "Mostrar grade"
-
#: src/app/main/ui/workspace/header.cljs
msgid "workspace.header.menu.show-palette"
msgstr "Mostrar paleta de cor"
diff --git a/frontend/translations/ro.po b/frontend/translations/ro.po
index 82698e7ef..232fc9a6c 100644
--- a/frontend/translations/ro.po
+++ b/frontend/translations/ro.po
@@ -2943,9 +2943,6 @@ msgstr "Comutați modul de focus"
msgid "shortcuts.toggle-fullscreen"
msgstr "Comutați la ecran complet"
-msgid "shortcuts.toggle-grid"
-msgstr "Afișați/ascundeți grila"
-
msgid "shortcuts.toggle-history"
msgstr "Comutați istoricul"
@@ -2964,12 +2961,6 @@ msgstr "Blocați proporțiile"
msgid "shortcuts.toggle-rules"
msgstr "Afișați/ascundeți rigle"
-msgid "shortcuts.toggle-snap-grid"
-msgstr "Fixare la grilă"
-
-msgid "shortcuts.toggle-snap-guide"
-msgstr "Fixare la ghiduri"
-
msgid "shortcuts.toggle-textpalette"
msgstr "Comutați paleta de text"
@@ -3342,10 +3333,6 @@ msgstr "Dezactivare scară proporțională"
msgid "workspace.header.menu.disable-scale-text"
msgstr "Dezactivează dimensionarea textului"
-#: src/app/main/ui/workspace/header.cljs
-msgid "workspace.header.menu.disable-snap-grid"
-msgstr "Dezactivați snap-ul la grilă"
-
#: src/app/main/ui/workspace/header.cljs
msgid "workspace.header.menu.disable-snap-guides"
msgstr "Dezactivați fixarea la ghiduri"
@@ -3364,10 +3351,6 @@ msgstr "Activare scară proporțională"
msgid "workspace.header.menu.enable-scale-text"
msgstr "Activează scalarea textului"
-#: src/app/main/ui/workspace/header.cljs
-msgid "workspace.header.menu.enable-snap-grid"
-msgstr "Aliniază per grilă"
-
#: src/app/main/ui/workspace/header.cljs
msgid "workspace.header.menu.enable-snap-guides"
msgstr "Fixare la ghiduri"
@@ -3379,10 +3362,6 @@ msgstr "Activați fixarea la pixel"
msgid "workspace.header.menu.hide-artboard-names"
msgstr "Ascundeți numele tablelor"
-#: src/app/main/ui/workspace/header.cljs
-msgid "workspace.header.menu.hide-grid"
-msgstr "Ascunde grila de ghidaj"
-
#: src/app/main/ui/workspace/header.cljs
msgid "workspace.header.menu.hide-palette"
msgstr "Ascunde paleta de culori"
@@ -3429,10 +3408,6 @@ msgstr "Selectează tot"
msgid "workspace.header.menu.show-artboard-names"
msgstr "Afișați numele tablelor"
-#: src/app/main/ui/workspace/header.cljs
-msgid "workspace.header.menu.show-grid"
-msgstr "Afişează sistemul grid"
-
#: src/app/main/ui/workspace/header.cljs
msgid "workspace.header.menu.show-palette"
msgstr "Afişează paleta de culori"
diff --git a/frontend/translations/ru.po b/frontend/translations/ru.po
index 9bbb8f993..5a68e36df 100644
--- a/frontend/translations/ru.po
+++ b/frontend/translations/ru.po
@@ -1973,9 +1973,6 @@ msgstr "Переключить палитру цветов"
msgid "shortcuts.toggle-focus-mode"
msgstr "Переключить режим фокуса"
-msgid "shortcuts.toggle-grid"
-msgstr "Показать/скрыть сетку"
-
msgid "shortcuts.toggle-history"
msgstr "Переключить историю"
@@ -2251,26 +2248,14 @@ msgstr "Разгруппировать"
msgid "workspace.header.menu.disable-dynamic-alignment"
msgstr "Отключить активное выравнивание"
-#: src/app/main/ui/workspace/header.cljs
-msgid "workspace.header.menu.disable-snap-grid"
-msgstr "Отключить привязку к сетке"
-
#: src/app/main/ui/workspace/header.cljs
msgid "workspace.header.menu.enable-dynamic-alignment"
msgstr "Включить активное выравнивание"
-#: src/app/main/ui/workspace/header.cljs
-msgid "workspace.header.menu.enable-snap-grid"
-msgstr "Привяка к сетке"
-
#: src/app/main/ui/workspace/header.cljs
msgid "workspace.header.menu.hide-artboard-names"
msgstr "Скрыть имена кадров"
-#: src/app/main/ui/workspace/header.cljs
-msgid "workspace.header.menu.hide-grid"
-msgstr "Скрыть сетки"
-
#: src/app/main/ui/workspace/header.cljs
msgid "workspace.header.menu.hide-palette"
msgstr "Скрыть палитру цветов"
@@ -2302,10 +2287,6 @@ msgstr ""
msgid "workspace.header.menu.show-artboard-names"
msgstr "Показать имена кадров"
-#: src/app/main/ui/workspace/header.cljs
-msgid "workspace.header.menu.show-grid"
-msgstr "Показать сетку"
-
#: src/app/main/ui/workspace/header.cljs
msgid "workspace.header.menu.show-palette"
msgstr "Показать палитру цветов"
diff --git a/frontend/translations/tr.po b/frontend/translations/tr.po
index 717b1bda0..f1ef022f9 100644
--- a/frontend/translations/tr.po
+++ b/frontend/translations/tr.po
@@ -2482,9 +2482,6 @@ msgstr "Odak modunu değiştir"
msgid "shortcuts.toggle-fullscreen"
msgstr "Tam ekranı değiştir"
-msgid "shortcuts.toggle-grid"
-msgstr "Izgarayı göster/gizle"
-
msgid "shortcuts.toggle-history"
msgstr "Geçmişi değiştir"
@@ -2503,12 +2500,6 @@ msgstr "Oranları kilitle"
msgid "shortcuts.toggle-rules"
msgstr "Cetvelleri göster/gizle"
-msgid "shortcuts.toggle-snap-grid"
-msgstr "Izgaraya tuttur"
-
-msgid "shortcuts.toggle-snap-guide"
-msgstr "Kılavuzlara tuttur"
-
msgid "shortcuts.toggle-textpalette"
msgstr "Metin paletini değiştir"
@@ -2847,10 +2838,6 @@ msgstr "Dinamik hizalamayı devre dışı bırak"
msgid "workspace.header.menu.disable-scale-text"
msgstr "Metin ölçeklendirmeyi devre dışı bırak"
-#: src/app/main/ui/workspace/header.cljs
-msgid "workspace.header.menu.disable-snap-grid"
-msgstr "Izgaraya tutturmayı devre dışı bırak"
-
#: src/app/main/ui/workspace/header.cljs
msgid "workspace.header.menu.disable-snap-guides"
msgstr "Kılavuzlara tutturmayı devre dışı bırak"
@@ -2866,10 +2853,6 @@ msgstr "Dinamik hizalamayı etkinleştir"
msgid "workspace.header.menu.enable-scale-text"
msgstr "Metin ölçeklendirmeyi etkinleştir"
-#: src/app/main/ui/workspace/header.cljs
-msgid "workspace.header.menu.enable-snap-grid"
-msgstr "Izgaraya tuttur"
-
#: src/app/main/ui/workspace/header.cljs
msgid "workspace.header.menu.enable-snap-guides"
msgstr "Kılavuzlara tuttur"
@@ -2881,10 +2864,6 @@ msgstr "Piksele tutturmayı etkinleştir"
msgid "workspace.header.menu.hide-artboard-names"
msgstr "Çalışma yüzeyi adlarını gizle"
-#: src/app/main/ui/workspace/header.cljs
-msgid "workspace.header.menu.hide-grid"
-msgstr "Izgaraları gizle"
-
#: src/app/main/ui/workspace/header.cljs
msgid "workspace.header.menu.hide-palette"
msgstr "Renk paletini gizle"
@@ -2928,10 +2907,6 @@ msgstr "Tümünü seç"
msgid "workspace.header.menu.show-artboard-names"
msgstr "Çalışma yüzeylerinin adlarını göster"
-#: src/app/main/ui/workspace/header.cljs
-msgid "workspace.header.menu.show-grid"
-msgstr "Izgarayı göster"
-
#: src/app/main/ui/workspace/header.cljs
msgid "workspace.header.menu.show-palette"
msgstr "Renk paletini göster"
diff --git a/frontend/translations/zh_CN.po b/frontend/translations/zh_CN.po
index ebb12eca6..c7f736a1f 100644
--- a/frontend/translations/zh_CN.po
+++ b/frontend/translations/zh_CN.po
@@ -2456,9 +2456,6 @@ msgstr "切换焦点模式"
msgid "shortcuts.toggle-fullscreen"
msgstr "切换全屏"
-msgid "shortcuts.toggle-grid"
-msgstr "显示/隐藏网格"
-
msgid "shortcuts.toggle-history"
msgstr "切换历史"
@@ -2477,12 +2474,6 @@ msgstr "锁定比例"
msgid "shortcuts.toggle-rules"
msgstr "显示/隐藏规则"
-msgid "shortcuts.toggle-snap-grid"
-msgstr "网络对齐"
-
-msgid "shortcuts.toggle-snap-guide"
-msgstr "辅助线对齐"
-
msgid "shortcuts.toggle-textpalette"
msgstr "切换文本调色板"
@@ -2837,10 +2828,6 @@ msgstr "禁用比例尺"
msgid "workspace.header.menu.disable-scale-text"
msgstr "禁用缩放文本"
-#: src/app/main/ui/workspace/header.cljs
-msgid "workspace.header.menu.disable-snap-grid"
-msgstr "禁用吸附到网格"
-
#: src/app/main/ui/workspace/header.cljs
msgid "workspace.header.menu.disable-snap-guides"
msgstr "禁用与参考线对齐"
@@ -2859,10 +2846,6 @@ msgstr "启用比例尺"
msgid "workspace.header.menu.enable-scale-text"
msgstr "启用缩放文本"
-#: src/app/main/ui/workspace/header.cljs
-msgid "workspace.header.menu.enable-snap-grid"
-msgstr "吸附到网格"
-
#: src/app/main/ui/workspace/header.cljs
msgid "workspace.header.menu.enable-snap-guides"
msgstr "与参考线对齐"
@@ -2874,10 +2857,6 @@ msgstr "启用像素对齐"
msgid "workspace.header.menu.hide-artboard-names"
msgstr "隐藏画板名称"
-#: src/app/main/ui/workspace/header.cljs
-msgid "workspace.header.menu.hide-grid"
-msgstr "隐藏网格"
-
#: src/app/main/ui/workspace/header.cljs
msgid "workspace.header.menu.hide-palette"
msgstr "隐藏调色盘"
@@ -2924,10 +2903,6 @@ msgstr "全选"
msgid "workspace.header.menu.show-artboard-names"
msgstr "显示画板名称"
-#: src/app/main/ui/workspace/header.cljs
-msgid "workspace.header.menu.show-grid"
-msgstr "显示网格"
-
#: src/app/main/ui/workspace/header.cljs
msgid "workspace.header.menu.show-palette"
msgstr "显示调色盘"
diff --git a/frontend/translations/zh_Hant.po b/frontend/translations/zh_Hant.po
index c6151391e..ad1fe9a14 100644
--- a/frontend/translations/zh_Hant.po
+++ b/frontend/translations/zh_Hant.po
@@ -1584,9 +1584,6 @@ msgstr "切換調色板"
msgid "shortcuts.toggle-focus-mode"
msgstr "切換專注模式"
-msgid "shortcuts.toggle-grid"
-msgstr "顯示/隱藏網格"
-
msgid "shortcuts.toggle-history"
msgstr "切換歷史記錄"