mirror of
https://github.com/penpot/penpot.git
synced 2026-01-07 13:58:51 -05:00
Compare commits
1 Commits
hiru-add-v
...
eva-replac
| Author | SHA1 | Date | |
|---|---|---|---|
|
2eab49b273 |
2
.github/workflows/commit-checker.yml
vendored
2
.github/workflows/commit-checker.yml
vendored
@@ -26,7 +26,7 @@ jobs:
|
||||
- name: Check Commit Type
|
||||
uses: gsactions/commit-message-checker@v2
|
||||
with:
|
||||
pattern: '^(((:(lipstick|globe_with_meridians|wrench|books|arrow_up|arrow_down|zap|ambulance|construction|boom|fire|whale|bug|sparkles|paperclip|tada|recycle|rewind|construction_worker):)\s[A-Z].*[^.])|(Merge|Revert|Reapply).+[^.])$'
|
||||
pattern: '^(((:(lipstick|globe_with_meridians|wrench|books|arrow_up|arrow_down|zap|ambulance|construction|boom|fire|whale|bug|sparkles|paperclip|tada|recycle|rewind|construction_worker):)\s[A-Z].*[^.])|(Merge|Revert).+[^.])$'
|
||||
flags: 'gm'
|
||||
error: 'Commit should match CONTRIBUTING.md guideline'
|
||||
checkAllCommitMessages: 'true' # optional: this checks all commits associated with a pull request
|
||||
|
||||
1
.gitignore
vendored
1
.gitignore
vendored
@@ -5,7 +5,6 @@
|
||||
!.yarn/releases
|
||||
!.yarn/sdks
|
||||
!.yarn/versions
|
||||
.pnpm-store
|
||||
*-init.clj
|
||||
*.css.json
|
||||
*.jar
|
||||
|
||||
@@ -35,7 +35,6 @@
|
||||
- Fix problem when pasting elements in reverse flex layout [Taiga #12460](https://tree.taiga.io/project/penpot/issue/12460)
|
||||
- Fix wrong board size presets in Android [Taiga #12339](https://tree.taiga.io/project/penpot/issue/12339)
|
||||
- Fix problem with grid layout components and auto sizing [Github #7797](https://github.com/penpot/penpot/issues/7797)
|
||||
- Fix some alignments on inspect tab [Taiga #12915](https://tree.taiga.io/project/penpot/issue/12915)
|
||||
|
||||
|
||||
## 2.12.1
|
||||
|
||||
@@ -36,6 +36,17 @@
|
||||
[integrant.core :as ig]
|
||||
[yetti.response :as-alias yres]))
|
||||
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
;; HELPERS
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
||||
(defn obfuscate-string
|
||||
[s]
|
||||
(if (< (count s) 10)
|
||||
(apply str (take (count s) (repeat "*")))
|
||||
(str (subs s 0 5)
|
||||
(apply str (take (- (count s) 5) (repeat "*"))))))
|
||||
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
;; OIDC PROVIDER (GENERIC)
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
@@ -166,7 +177,7 @@
|
||||
(l/inf :hint "provider initialized"
|
||||
:provider (:id provider)
|
||||
:client-id (:client-id provider)
|
||||
:client-secret (d/obfuscate-string (:client-secret provider)))
|
||||
:client-secret (obfuscate-string (:client-secret provider)))
|
||||
provider)
|
||||
|
||||
(catch Throwable cause
|
||||
@@ -211,7 +222,7 @@
|
||||
(l/inf :hint "provider initialized"
|
||||
:provider (:id provider)
|
||||
:client-id (:client-id provider)
|
||||
:client-secret (d/obfuscate-string (:client-secret provider)))
|
||||
:client-secret (obfuscate-string (:client-secret provider)))
|
||||
provider)
|
||||
|
||||
(catch Throwable cause
|
||||
@@ -288,7 +299,7 @@
|
||||
(l/inf :hint "provider initialized"
|
||||
:provider (:id provider)
|
||||
:client-id (:client-id provider)
|
||||
:client-secret (d/obfuscate-string (:client-secret provider)))
|
||||
:client-secret (obfuscate-string (:client-secret provider)))
|
||||
provider)
|
||||
|
||||
(catch Throwable cause
|
||||
@@ -330,7 +341,7 @@
|
||||
:provider "gitlab"
|
||||
:base-uri (:base-uri provider)
|
||||
:client-id (:client-id provider)
|
||||
:client-secret (d/obfuscate-string (:client-secret provider)))
|
||||
:client-secret (obfuscate-string (:client-secret provider)))
|
||||
provider)
|
||||
(catch Throwable cause
|
||||
(ex/raise :type ::internal
|
||||
@@ -350,7 +361,7 @@
|
||||
(l/inf :hint "provider initialized"
|
||||
:provider (:id provider)
|
||||
:client-id (:client-id provider)
|
||||
:client-secret (d/obfuscate-string (:client-secret provider)))
|
||||
:client-secret (obfuscate-string (:client-secret provider)))
|
||||
provider)
|
||||
|
||||
(catch Throwable cause
|
||||
@@ -448,7 +459,7 @@
|
||||
(l/trc :hint "fetch access token"
|
||||
:provider (:id provider)
|
||||
:client-id (:client-id provider)
|
||||
:client-secret (d/obfuscate-string (:client-secret provider))
|
||||
:client-secret (obfuscate-string (:client-secret provider))
|
||||
:grant-type (:grant_type params)
|
||||
:redirect-uri (:redirect_uri params))
|
||||
|
||||
@@ -501,7 +512,7 @@
|
||||
[cfg provider tdata]
|
||||
(l/trc :hint "fetch user info"
|
||||
:uri (:user-uri provider)
|
||||
:token (d/obfuscate-string (:token/access tdata)))
|
||||
:token (obfuscate-string (:token/access tdata)))
|
||||
|
||||
(let [params {:uri (:user-uri provider)
|
||||
:headers {"Authorization" (str (:token/type tdata) " " (:token/access tdata))}
|
||||
|
||||
@@ -1024,26 +1024,6 @@
|
||||
:clj
|
||||
(sort comp-fn items))))
|
||||
|
||||
(defn obfuscate-string
|
||||
"Obfuscates potentially sensitive values.
|
||||
|
||||
- One-arg arity:
|
||||
* For strings shorter than 10 characters, all characters are replaced by `*`.
|
||||
* For longer strings, the first 5 characters are preserved and the rest obfuscated.
|
||||
- Two-arg arity accepts a boolean `full?` that, when true, replaces the whole value
|
||||
by `*`, preserving only the length."
|
||||
([v]
|
||||
(obfuscate-string v false))
|
||||
([v full?]
|
||||
(let [s (str v)
|
||||
n (count s)]
|
||||
(cond
|
||||
(zero? n) s
|
||||
full? (apply str (repeat n "*"))
|
||||
(< n 10) (apply str (repeat n "*"))
|
||||
:else (str (subs s 0 5)
|
||||
(apply str (repeat (- n 5) "*")))))))
|
||||
|
||||
(defn reorder
|
||||
"Reorder a vector by moving one of their items from some position to some space between positions.
|
||||
It clamps the position numbers to a valid range."
|
||||
|
||||
@@ -10,7 +10,6 @@
|
||||
(:refer-clojure :exclude [instance?])
|
||||
(:require
|
||||
#?(:clj [clojure.stacktrace :as strace])
|
||||
[app.common.data :refer [obfuscate-string]]
|
||||
[app.common.pprint :as pp]
|
||||
[app.common.schema :as sm]
|
||||
[clojure.core :as c]
|
||||
@@ -20,10 +19,6 @@
|
||||
(:import
|
||||
clojure.lang.IPersistentMap)))
|
||||
|
||||
(def ^:private sensitive-fields
|
||||
"Keys whose values must be obfuscated in validation explains."
|
||||
#{:password :old-password :token :invitation-token})
|
||||
|
||||
#?(:clj (set! *warn-on-reflection* true))
|
||||
|
||||
(def ^:dynamic *data-length* 8)
|
||||
@@ -115,25 +110,7 @@
|
||||
(explain (:explain data) opts)
|
||||
|
||||
(contains? data ::sm/explain)
|
||||
(let [exp (::sm/explain data)
|
||||
sanitize-map (fn sanitize-map [m]
|
||||
(reduce-kv
|
||||
(fn [acc k v]
|
||||
(let [k* (if (string? k) (keyword k) k)]
|
||||
(cond
|
||||
(contains? sensitive-fields k*)
|
||||
(assoc acc k (if (map? v)
|
||||
(sanitize-map v)
|
||||
(obfuscate-string v true)))
|
||||
|
||||
(map? v) (assoc acc k (sanitize-map v))
|
||||
:else (assoc acc k v))))
|
||||
{}
|
||||
m))
|
||||
sanitize-explain (fn [exp]
|
||||
(cond-> exp
|
||||
(:value exp) (update :value sanitize-map)))]
|
||||
(sm/humanize-explain (sanitize-explain exp) opts))))
|
||||
(sm/humanize-explain (::sm/explain data) opts)))
|
||||
|
||||
#?(:clj
|
||||
(defn format-throwable
|
||||
|
||||
@@ -1766,59 +1766,6 @@
|
||||
(update :pages-index d/update-vals update-container)
|
||||
(d/update-when :components d/update-vals update-container))))
|
||||
|
||||
(defmethod migrate-data "0017-remove-unneeded-objects-from-components"
|
||||
[data _]
|
||||
;; Some components have an `:objects` attribute, despite not being
|
||||
;; deleted. This migration removes it.
|
||||
(letfn [(check-component [component]
|
||||
(if (and (not (:deleted component))
|
||||
(contains? component :objects))
|
||||
(dissoc component :objects)
|
||||
component))]
|
||||
(d/update-when data :components d/update-vals check-component)))
|
||||
|
||||
(defmethod migrate-data "0018-sync-component-id-with-near-main"
|
||||
[data _]
|
||||
(let [libs (some-> (:libs data) deref)]
|
||||
(letfn [(fix-shape
|
||||
[data page shape]
|
||||
(if (and (ctk/subcopy-head? shape)
|
||||
(nil? (ctk/get-swap-slot shape)))
|
||||
(let [file {:id (:id data) :data data}
|
||||
ref-shape (ctf/find-ref-shape file page libs shape {:include-deleted? true :with-context? true})]
|
||||
(if (and (some? ref-shape)
|
||||
(or (not= (:component-id shape) (:component-id ref-shape))
|
||||
(not= (:component-file shape) (:component-file ref-shape))))
|
||||
(cond-> shape
|
||||
(some? (:component-id ref-shape))
|
||||
(assoc :component-id (:component-id ref-shape))
|
||||
|
||||
(nil? (:component-id ref-shape))
|
||||
(dissoc :component-id)
|
||||
|
||||
(some? (:component-file ref-shape))
|
||||
(assoc :component-file (:component-file ref-shape))
|
||||
|
||||
(nil? (:component-file ref-shape))
|
||||
(dissoc :component-file))
|
||||
shape))
|
||||
shape))
|
||||
|
||||
(update-page
|
||||
[data page]
|
||||
(d/update-when page :objects d/update-vals (partial fix-shape data page)))
|
||||
|
||||
(fix-data [data]
|
||||
(loop [current-data data
|
||||
iteration 0]
|
||||
(let [next-data (update current-data :pages-index d/update-vals (partial update-page current-data))]
|
||||
(if (or (= current-data next-data)
|
||||
(> iteration 20)) ;; safety bound
|
||||
next-data
|
||||
(recur next-data (inc iteration))))))]
|
||||
(fix-data data))))
|
||||
|
||||
|
||||
(def available-migrations
|
||||
(into (d/ordered-set)
|
||||
["legacy-2"
|
||||
@@ -1892,6 +1839,4 @@
|
||||
"0014-clear-components-nil-objects"
|
||||
"0015-fix-text-attrs-blank-strings"
|
||||
"0015-clean-shadow-color"
|
||||
"0016-copy-fills-from-position-data-to-text-node"
|
||||
"0017-remove-unneeded-objects-from-components"
|
||||
"0018-sync-component-id-with-near-main"]))
|
||||
"0016-copy-fills-from-position-data-to-text-node"]))
|
||||
|
||||
@@ -333,31 +333,6 @@
|
||||
(pcb/with-file-data file-data)
|
||||
(pcb/update-shapes [(:id shape)] repair-shape))))
|
||||
|
||||
(defmethod repair-error :component-id-mismatch
|
||||
[_ {:keys [shape page-id args] :as error} file-data _]
|
||||
(let [repair-shape
|
||||
(fn [shape]
|
||||
; Set the component-id and component-file to the ones of the near main
|
||||
(log/debug :hint (str " -> set component-id to " (:component-id args)))
|
||||
(log/debug :hint (str " -> set component-file to " (:component-file args)))
|
||||
(cond-> shape
|
||||
(some? (:component-id args))
|
||||
(assoc :component-id (:component-id args))
|
||||
|
||||
(nil? (:component-id args))
|
||||
(dissoc :component-id)
|
||||
|
||||
(some? (:component-file args))
|
||||
(assoc :component-file (:component-file args))
|
||||
|
||||
(nil? (:component-file args))
|
||||
(dissoc :component-file)))]
|
||||
|
||||
(log/dbg :hint "repairing shape :component-id-mismatch" :id (:id shape) :name (:name shape) :page-id page-id)
|
||||
(-> (pcb/empty-changes nil page-id)
|
||||
(pcb/with-file-data file-data)
|
||||
(pcb/update-shapes [(:id shape)] repair-shape))))
|
||||
|
||||
(defmethod repair-error :ref-shape-is-head
|
||||
[_ {:keys [shape page-id args] :as error} file-data _]
|
||||
(let [repair-shape
|
||||
@@ -524,7 +499,7 @@
|
||||
(pcb/update-shapes [(:id shape)] repair-shape))))
|
||||
|
||||
(defmethod repair-error :component-nil-objects-not-allowed
|
||||
[_ {component :shape} file-data _] ; in this error the :shape argument is the component
|
||||
[_ {:keys [shape] :as error} file-data _]
|
||||
(let [repair-component
|
||||
(fn [component]
|
||||
; Remove the objects key, or set it to {} if the component is deleted
|
||||
@@ -536,26 +511,10 @@
|
||||
(log/debug :hint " -> remove :objects")
|
||||
(dissoc component :objects))))]
|
||||
|
||||
(log/dbg :hint "repairing component :component-nil-objects-not-allowed" :id (:id component) :name (:name component))
|
||||
(log/dbg :hint "repairing component :component-nil-objects-not-allowed" :id (:id shape) :name (:name shape))
|
||||
(-> (pcb/empty-changes nil)
|
||||
(pcb/with-library-data file-data)
|
||||
(pcb/update-component (:id component) repair-component))))
|
||||
|
||||
(defmethod repair-error :non-deleted-component-cannot-have-objects
|
||||
[_ {component :shape} file-data _] ; in this error the :shape argument is the component
|
||||
(let [repair-component
|
||||
(fn [component]
|
||||
; Remove the :objects field
|
||||
(if-not (:deleted component)
|
||||
(do
|
||||
(log/debug :hint " -> remove :objects")
|
||||
(dissoc component :objects))
|
||||
component))]
|
||||
|
||||
(log/dbg :hint "repairing component :non-deleted-component-cannot-have-objects" :id (:id component) :name (:name component))
|
||||
(-> (pcb/empty-changes nil)
|
||||
(pcb/with-library-data file-data)
|
||||
(pcb/update-component (:id component) repair-component))))
|
||||
(pcb/update-component (:id shape) repair-component))))
|
||||
|
||||
(defmethod repair-error :invalid-text-touched
|
||||
[_ {:keys [shape page-id] :as error} file-data _]
|
||||
|
||||
@@ -51,7 +51,6 @@
|
||||
:ref-shape-is-head
|
||||
:ref-shape-is-not-head
|
||||
:shape-ref-in-main
|
||||
:component-id-mismatch
|
||||
:root-main-not-allowed
|
||||
:nested-main-not-allowed
|
||||
:root-copy-not-allowed
|
||||
@@ -60,7 +59,6 @@
|
||||
:not-head-copy-not-allowed
|
||||
:not-component-not-allowed
|
||||
:component-nil-objects-not-allowed
|
||||
:non-deleted-component-cannot-have-objects
|
||||
:instance-head-not-frame
|
||||
:invalid-text-touched
|
||||
:misplaced-slot
|
||||
@@ -328,20 +326,6 @@
|
||||
:component-file (:component-file ref-shape)
|
||||
:component-id (:component-id ref-shape)))))
|
||||
|
||||
(defn- check-ref-component-id
|
||||
"Validate that if the copy has not been swwpped, the component-id and component-file are
|
||||
the same as in the referenced shape in the near main."
|
||||
[shape file page libraries]
|
||||
(when (nil? (ctk/get-swap-slot shape))
|
||||
(when-let [ref-shape (ctf/find-ref-shape file page libraries shape :include-deleted? true)]
|
||||
(when (or (not= (:component-id shape) (:component-id ref-shape))
|
||||
(not= (:component-file shape) (:component-file ref-shape)))
|
||||
(report-error :component-id-mismatch
|
||||
"Nested copy component-id and component-file must be the same as the near main"
|
||||
shape file page
|
||||
:component-id (:component-id ref-shape)
|
||||
:component-file (:component-file ref-shape))))))
|
||||
|
||||
(defn- check-empty-swap-slot
|
||||
"Validate that this shape does not have any swap slot."
|
||||
[shape file page]
|
||||
@@ -434,7 +418,6 @@
|
||||
(check-component-not-main-head shape file page libraries)
|
||||
(check-component-not-root shape file page)
|
||||
(check-valid-touched shape file page)
|
||||
(check-ref-component-id shape file page libraries)
|
||||
;; We can have situations where the nested copy and the ancestor copy come from different libraries and some of them have been dettached
|
||||
;; so we only validate the shape-ref if the ancestor is from a valid library
|
||||
(when library-exists
|
||||
@@ -665,13 +648,6 @@
|
||||
"Component main not allowed inside other component"
|
||||
main-instance file component-page))))
|
||||
|
||||
(defn- check-not-objects
|
||||
[component file]
|
||||
(when (d/not-empty? (:objects component))
|
||||
(report-error :non-deleted-component-cannot-have-objects
|
||||
"A non-deleted component cannot have shapes inside"
|
||||
component file nil)))
|
||||
|
||||
(defn- check-component
|
||||
"Validate semantic coherence of a component. Report all errors found."
|
||||
[component file]
|
||||
@@ -680,8 +656,7 @@
|
||||
"Objects list cannot be nil"
|
||||
component file nil))
|
||||
(when-not (:deleted component)
|
||||
(check-main-inside-main component file)
|
||||
(check-not-objects component file))
|
||||
(check-main-inside-main component file))
|
||||
(when (:deleted component)
|
||||
(check-component-duplicate-swap-slot component file)
|
||||
(check-ref-cycles component file))
|
||||
|
||||
@@ -1769,23 +1769,6 @@
|
||||
(pcb/update-shapes changes [(:id dest-shape)] ctk/unhead-shape {:ignore-touched true})
|
||||
changes))
|
||||
|
||||
(defn- check-swapped-main
|
||||
[changes dest-shape origin-shape]
|
||||
;; Only for direct updates (from main to copy). Check if the main shape
|
||||
;; has been swapped. If so, the new component-id and component-file must
|
||||
;; be put into the copy.
|
||||
(if (and (= (:shape-ref dest-shape) (:id origin-shape))
|
||||
(ctk/instance-head? dest-shape)
|
||||
(ctk/instance-head? origin-shape)
|
||||
(or (not= (:component-id dest-shape) (:component-id origin-shape))
|
||||
(not= (:component-file dest-shape) (:component-file origin-shape))))
|
||||
(pcb/update-shapes changes [(:id dest-shape)]
|
||||
#(assoc %
|
||||
:component-id (:component-id origin-shape)
|
||||
:component-file (:component-file origin-shape))
|
||||
{:ignore-touched true})
|
||||
changes))
|
||||
|
||||
(defn- update-attrs
|
||||
"The main function that implements the attribute sync algorithm. Copy
|
||||
attributes that have changed in the origin shape to the dest shape.
|
||||
@@ -1828,8 +1811,6 @@
|
||||
:always
|
||||
(check-detached-main dest-shape origin-shape)
|
||||
:always
|
||||
(check-swapped-main dest-shape origin-shape)
|
||||
:always
|
||||
(generate-update-tokens container dest-shape origin-shape touched omit-touched? nil))
|
||||
|
||||
(let [attr-group (get ctk/sync-attrs attr)
|
||||
|
||||
@@ -274,7 +274,7 @@
|
||||
file-id
|
||||
{file-id file}
|
||||
file-id))]
|
||||
(thf/apply-changes file changes :validate? false)))
|
||||
(thf/apply-changes file changes)))
|
||||
|
||||
(defn swap-component
|
||||
"Swap the specified shape by the component specified by component-tag"
|
||||
@@ -305,13 +305,12 @@
|
||||
[changes nil])
|
||||
|
||||
|
||||
file' (thf/apply-changes file changes :validate? (not propagate-fn))]
|
||||
file' (thf/apply-changes file changes)]
|
||||
(when new-shape-label
|
||||
(thi/rm-id! (:id new-shape))
|
||||
(thi/set-id! new-shape-label (:id new-shape)))
|
||||
(if propagate-fn
|
||||
(-> (propagate-fn file')
|
||||
(thf/validate-file!))
|
||||
(propagate-fn file')
|
||||
file')))
|
||||
|
||||
(defn swap-component-in-shape [file shape-tag component-tag & {:keys [page-label propagate-fn]}]
|
||||
@@ -340,10 +339,9 @@
|
||||
(assoc shape :fills (ths/sample-fills-color :fill-color color)))
|
||||
(:objects page)
|
||||
{})
|
||||
file' (thf/apply-changes file changes :validate? (not propagate-fn))]
|
||||
file' (thf/apply-changes file changes)]
|
||||
(if propagate-fn
|
||||
(-> (propagate-fn file')
|
||||
(thf/validate-file!))
|
||||
(propagate-fn file')
|
||||
file')))
|
||||
|
||||
(defn update-bottom-color
|
||||
@@ -359,10 +357,9 @@
|
||||
(assoc shape :fills (ths/sample-fills-color :fill-color color)))
|
||||
(:objects page)
|
||||
{})
|
||||
file' (thf/apply-changes file changes :validate? (not propagate-fn))]
|
||||
file' (thf/apply-changes file changes)]
|
||||
(if propagate-fn
|
||||
(-> (propagate-fn file')
|
||||
(thf/validate-file!))
|
||||
(propagate-fn file')
|
||||
file')))
|
||||
|
||||
(defn reset-overrides [file shape & {:keys [page-label propagate-fn]}]
|
||||
@@ -377,10 +374,9 @@
|
||||
{file-id file}
|
||||
(ctn/make-container container :page)
|
||||
(:id shape)))
|
||||
file' (thf/apply-changes file changes :validate? (not propagate-fn))]
|
||||
file' (thf/apply-changes file changes)]
|
||||
(if propagate-fn
|
||||
(-> (propagate-fn file')
|
||||
(thf/validate-file!))
|
||||
(propagate-fn file')
|
||||
file')))
|
||||
|
||||
(defn reset-overrides-in-first-child [file shape-tag & {:keys [page-label propagate-fn]}]
|
||||
@@ -402,10 +398,9 @@
|
||||
#{(-> (ths/get-shape file shape-tag :page-label page-label)
|
||||
:id)}
|
||||
{})
|
||||
file' (thf/apply-changes file changes :validate? (not propagate-fn))]
|
||||
file' (thf/apply-changes file changes)]
|
||||
(if propagate-fn
|
||||
(-> (propagate-fn file')
|
||||
(thf/validate-file!))
|
||||
(propagate-fn file')
|
||||
file')))
|
||||
|
||||
(defn duplicate-shape [file shape-tag & {:keys [page-label propagate-fn]}]
|
||||
@@ -424,9 +419,8 @@
|
||||
(:id file)) ;; file-id
|
||||
(cll/generate-duplicate-changes-update-indices (:objects page) ;; objects
|
||||
#{(:id shape)}))
|
||||
file' (thf/apply-changes file changes :validate? (not propagate-fn))]
|
||||
file' (thf/apply-changes file changes)]
|
||||
(if propagate-fn
|
||||
(-> (propagate-fn file')
|
||||
(thf/validate-file!))
|
||||
(propagate-fn file')
|
||||
file')))
|
||||
|
||||
|
||||
@@ -54,14 +54,12 @@
|
||||
([file] (validate-file! file {}))
|
||||
([file libraries]
|
||||
(cfv/validate-file-schema! file)
|
||||
(cfv/validate-file! file libraries)
|
||||
file))
|
||||
(cfv/validate-file! file libraries)))
|
||||
|
||||
(defn apply-changes
|
||||
[file changes & {:keys [validate?] :or {validate? true}}]
|
||||
[file changes]
|
||||
(let [file' (ctf/update-file-data file #(cfc/process-changes % (:redo-changes changes) true))]
|
||||
(when validate?
|
||||
(validate-file! file'))
|
||||
(validate-file! file')
|
||||
file'))
|
||||
|
||||
(defn apply-undo-changes
|
||||
|
||||
@@ -146,15 +146,12 @@
|
||||
"Check if some attribute is one that is involved in component syncrhonization.
|
||||
Note that design tokens also are involved, although they go by an alternate
|
||||
route and thus they are not part of :sync-attrs.
|
||||
Also when detaching a nested copy or it also needs to trigger a synchronization,
|
||||
even though :shape-ref or :component-id are not synced attribute per se"
|
||||
Also when detaching a nested copy it also needs to trigger a synchronization,
|
||||
even though :shape-ref is not a synced attribute per se"
|
||||
[attr]
|
||||
(or (get sync-attrs attr)
|
||||
(= :shape-ref attr)
|
||||
(= :applied-tokens attr)
|
||||
(= :component-id attr)
|
||||
(= :component-file attr)
|
||||
(= :component-root attr)))
|
||||
(= :applied-tokens attr)))
|
||||
|
||||
(defn instance-root?
|
||||
"Check if this shape is the head of a top instance."
|
||||
|
||||
@@ -60,9 +60,6 @@
|
||||
(some? objects)
|
||||
(assoc :objects objects)
|
||||
|
||||
(nil? objects)
|
||||
(dissoc :objects)
|
||||
|
||||
(some? modified-at)
|
||||
(assoc :modified-at modified-at)
|
||||
|
||||
|
||||
@@ -112,10 +112,8 @@
|
||||
(:c2y params) (update-in [index :params :c2y] + (:c2y params)))
|
||||
content))]
|
||||
|
||||
(if (some? modifiers)
|
||||
(impl/path-data
|
||||
(reduce apply-to-index (vec content) modifiers))
|
||||
content)))
|
||||
(impl/path-data
|
||||
(reduce apply-to-index (vec content) modifiers))))
|
||||
|
||||
(defn transform-content
|
||||
"Applies a transformation matrix over content and returns a new
|
||||
|
||||
@@ -465,10 +465,9 @@
|
||||
page
|
||||
{(:id file) file}
|
||||
(thi/id :nested-h-ellipse))
|
||||
file' (-> (thf/apply-changes file changes :validate? false)
|
||||
file' (-> (thf/apply-changes file changes)
|
||||
(tho/propagate-component-changes :c-board-with-ellipse)
|
||||
(tho/propagate-component-changes :c-big-board)
|
||||
(thf/validate-file!))
|
||||
(tho/propagate-component-changes :c-big-board))
|
||||
|
||||
;; ==== Get
|
||||
nested2-h-ellipse (ths/get-shape file' :nested-h-ellipse)
|
||||
|
||||
@@ -64,8 +64,9 @@
|
||||
|
||||
(reset-all-overrides [file]
|
||||
(-> file
|
||||
(tho/reset-overrides-in-first-child :frame-board-1 :page-label :page-1 :propagate-fn propagate-all-component-changes)
|
||||
(tho/reset-overrides-in-first-child :copy-board-1 :page-label :page-2 :propagate-fn propagate-all-component-changes)))
|
||||
(tho/reset-overrides-in-first-child :frame-board-1 :page-label :page-1)
|
||||
(tho/reset-overrides-in-first-child :copy-board-1 :page-label :page-2)
|
||||
(propagate-all-component-changes)))
|
||||
|
||||
(fill-colors [file]
|
||||
[(tho/bottom-fill-color file :frame-ellipse-1 :page-label :page-1)
|
||||
|
||||
@@ -56,9 +56,10 @@
|
||||
|
||||
(reset-all-overrides [file]
|
||||
(-> file
|
||||
(tho/reset-overrides (ths/get-shape file :copy-simple-1 :propagate-fn propagate-all-component-changes))
|
||||
(tho/reset-overrides (ths/get-shape file :copy-frame-composed-1 :propagate-fn propagate-all-component-changes))
|
||||
(tho/reset-overrides (ths/get-shape file :composed-1-composed-2-copy :propagate-fn propagate-all-component-changes))))
|
||||
(tho/reset-overrides (ths/get-shape file :copy-simple-1))
|
||||
(tho/reset-overrides (ths/get-shape file :copy-frame-composed-1))
|
||||
(tho/reset-overrides (ths/get-shape file :composed-1-composed-2-copy))
|
||||
(propagate-all-component-changes)))
|
||||
|
||||
(fill-colors [file]
|
||||
[(tho/bottom-fill-color file :frame-simple-1)
|
||||
|
||||
@@ -6,12 +6,20 @@
|
||||
|
||||
(ns common-tests.logic.swap-as-override-test
|
||||
(:require
|
||||
[app.common.data :as d]
|
||||
[app.common.files.changes :as ch]
|
||||
[app.common.files.changes-builder :as pcb]
|
||||
[app.common.logic.libraries :as cll]
|
||||
[app.common.logic.shapes :as cls]
|
||||
[app.common.pprint :as pp]
|
||||
[app.common.test-helpers.components :as thc]
|
||||
[app.common.test-helpers.compositions :as tho]
|
||||
[app.common.test-helpers.files :as thf]
|
||||
[app.common.test-helpers.ids-map :as thi]
|
||||
[app.common.test-helpers.shapes :as ths]
|
||||
[app.common.types.component :as ctk]
|
||||
[app.common.types.container :as ctn]
|
||||
[app.common.types.file :as ctf]
|
||||
[app.common.uuid :as uuid]
|
||||
[clojure.test :as t]))
|
||||
|
||||
(t/use-fixtures :each thi/test-fixture)
|
||||
@@ -19,40 +27,23 @@
|
||||
(defn- setup []
|
||||
(-> (thf/sample-file :file1)
|
||||
|
||||
(tho/add-simple-component :component-1 :frame-component-1 :child-component-1
|
||||
:root-params {:name "component-1"}
|
||||
:child-params {:name "child-component-1"
|
||||
:type :rect
|
||||
:fills (ths/sample-fills-color :fill-color "#111111")})
|
||||
(tho/add-simple-component :component-2 :frame-component-2 :child-component-2
|
||||
:root-params {:name "component-2"}
|
||||
:child-params {:name "child-component-2"
|
||||
:type :rect
|
||||
:fills (ths/sample-fills-color :fill-color "#222222")})
|
||||
(tho/add-simple-component :component-3 :frame-component-3 :child-component-3
|
||||
:root-params {:name "component-3"}
|
||||
:child-params {:name "child-component-3"
|
||||
:type :rect
|
||||
:fills (ths/sample-fills-color :fill-color "#333333")})
|
||||
(tho/add-simple-component :component-1 :frame-component-1 :child-component-1 :child-params {:name "child-component-1" :type :rect :fills (ths/sample-fills-color :fill-color "#111111")})
|
||||
(tho/add-simple-component :component-2 :frame-component-2 :child-component-2 :child-params {:name "child-component-2" :type :rect :fills (ths/sample-fills-color :fill-color "#222222")})
|
||||
(tho/add-simple-component :component-3 :frame-component-3 :child-component-3 :child-params {:name "child-component-3" :type :rect :fills (ths/sample-fills-color :fill-color "#333333")})
|
||||
|
||||
(tho/add-frame :frame-icon-and-text :name "copy-component-1")
|
||||
(thc/instantiate-component :component-1 :copy-component-1
|
||||
:parent-label :frame-icon-and-text
|
||||
:children-labels [:component-1-icon-and-text])
|
||||
(tho/add-frame :frame-icon-and-text)
|
||||
(thc/instantiate-component :component-1 :copy-component-1 :parent-label :frame-icon-and-text :children-labels [:component-1-icon-and-text])
|
||||
(ths/add-sample-shape :text
|
||||
{:type :text
|
||||
:name "icon+text"
|
||||
:parent-label :frame-icon-and-text})
|
||||
(thc/make-component :icon-and-text :frame-icon-and-text)
|
||||
|
||||
(tho/add-frame :frame-panel :name "icon-and-text")
|
||||
(thc/instantiate-component :icon-and-text :copy-icon-and-text
|
||||
:parent-label :frame-panel
|
||||
:children-labels [:icon-and-text-panel])
|
||||
(tho/add-frame :frame-panel)
|
||||
(thc/instantiate-component :icon-and-text :copy-icon-and-text :parent-label :frame-panel :children-labels [:icon-and-text-panel])
|
||||
(thc/make-component :panel :frame-panel)
|
||||
|
||||
(thc/instantiate-component :panel :copy-panel
|
||||
:children-labels [:copy-icon-and-text-panel])))
|
||||
(thc/instantiate-component :panel :copy-panel :children-labels [:copy-icon-and-text-panel])))
|
||||
|
||||
(defn- propagate-all-component-changes [file]
|
||||
(-> file
|
||||
|
||||
@@ -8,10 +8,14 @@ source ~/.bashrc
|
||||
|
||||
echo "[start-tmux.sh] Installing node dependencies"
|
||||
pushd ~/penpot/frontend/
|
||||
./scripts/setup;
|
||||
corepack install;
|
||||
yarn install;
|
||||
yarn playwright install chromium
|
||||
popd
|
||||
pushd ~/penpot/exporter/
|
||||
./scripts/setup;
|
||||
corepack install;
|
||||
yarn install
|
||||
yarn playwright install chromium
|
||||
popd
|
||||
|
||||
tmux -2 new-session -d -s penpot
|
||||
|
||||
@@ -1,8 +0,0 @@
|
||||
#!/usr/bin/env bash
|
||||
|
||||
set -e;
|
||||
|
||||
corepack enable;
|
||||
corepack install;
|
||||
yarn install;
|
||||
yarn playwright install chromium
|
||||
@@ -305,7 +305,7 @@ test.describe("Inspect tab - Styles", () => {
|
||||
);
|
||||
await openInspectTab(workspacePage);
|
||||
|
||||
const panel = await getPanelByTitle(workspacePage, "Size and position");
|
||||
const panel = await getPanelByTitle(workspacePage, "Size & position");
|
||||
await expect(panel).toBeVisible();
|
||||
|
||||
const propertyRow = panel.getByTestId("property-row");
|
||||
@@ -335,7 +335,7 @@ test.describe("Inspect tab - Styles", () => {
|
||||
);
|
||||
await openInspectTab(workspacePage);
|
||||
|
||||
const panel = await getPanelByTitle(workspacePage, "Size and position");
|
||||
const panel = await getPanelByTitle(workspacePage, "Size & position");
|
||||
await expect(panel).toBeVisible();
|
||||
|
||||
const propertyRow = panel.getByTestId("property-row");
|
||||
@@ -375,7 +375,7 @@ test.describe("Inspect tab - Styles", () => {
|
||||
);
|
||||
await openInspectTab(workspacePage);
|
||||
|
||||
const panel = await getPanelByTitle(workspacePage, "Size and position");
|
||||
const panel = await getPanelByTitle(workspacePage, "Size & position");
|
||||
await expect(panel).toBeVisible();
|
||||
|
||||
const propertyRow = panel.getByTestId("property-row");
|
||||
|
||||
@@ -1,6 +0,0 @@
|
||||
#!/usr/bin/env bash
|
||||
|
||||
corepack enable;
|
||||
corepack install;
|
||||
yarn install;
|
||||
yarn playwright install chromium;
|
||||
@@ -1,10 +1,10 @@
|
||||
#!/usr/bin/env bash
|
||||
|
||||
SCRIPT_DIR=$(dirname $0);
|
||||
|
||||
set -ex
|
||||
corepack enable;
|
||||
corepack install;
|
||||
yarn install;
|
||||
|
||||
$SCRIPT_DIR/setup;
|
||||
|
||||
yarn run playwright install chromium --with-deps;
|
||||
yarn run build:storybook
|
||||
yarn run test:storybook
|
||||
|
||||
@@ -1,9 +1,8 @@
|
||||
#!/usr/bin/env bash
|
||||
|
||||
SCRIPT_DIR=$(dirname $0);
|
||||
|
||||
set -ex
|
||||
|
||||
$SCRIPT_DIR/setup;
|
||||
|
||||
corepack enable;
|
||||
corepack install;
|
||||
yarn install;
|
||||
yarn run playwright install chromium --with-deps;
|
||||
yarn run test:e2e -x --workers=2 --reporter=list "$@";
|
||||
|
||||
@@ -47,31 +47,32 @@
|
||||
(ptk/reify ::apply-content-modifiers
|
||||
ptk/WatchEvent
|
||||
(watch [it state _]
|
||||
(let [id (st/get-path-id state)
|
||||
shape (st/get-path state)
|
||||
(let [page-id (get state :current-page-id state)
|
||||
objects (dsh/lookup-page-objects state)
|
||||
|
||||
id (st/get-path-id state)
|
||||
|
||||
shape
|
||||
(st/get-path state)
|
||||
|
||||
content-modifiers
|
||||
(dm/get-in state [:workspace-local :edit-path id :content-modifiers])]
|
||||
(if (or (nil? shape) (nil? content-modifiers))
|
||||
(rx/of (dwe/clear-edition-mode))
|
||||
(let [page-id (get state :current-page-id state)
|
||||
objects (dsh/lookup-page-objects state)
|
||||
(dm/get-in state [:workspace-local :edit-path id :content-modifiers])
|
||||
|
||||
content (get shape :content)
|
||||
new-content (path/apply-content-modifiers content content-modifiers)
|
||||
content (get shape :content)
|
||||
new-content (path/apply-content-modifiers content content-modifiers)
|
||||
|
||||
old-points (path.segment/get-points content)
|
||||
new-points (path.segment/get-points new-content)
|
||||
point-change (->> (map hash-map old-points new-points) (reduce merge))]
|
||||
old-points (path.segment/get-points content)
|
||||
new-points (path.segment/get-points new-content)
|
||||
point-change (->> (map hash-map old-points new-points) (reduce merge))]
|
||||
|
||||
(when (and (some? new-content) (some? shape))
|
||||
(let [changes (changes/generate-path-changes it objects page-id shape (:content shape) new-content)]
|
||||
(if (empty? new-content)
|
||||
(rx/of (dch/commit-changes changes)
|
||||
(dwe/clear-edition-mode))
|
||||
(rx/of (dch/commit-changes changes)
|
||||
(selection/update-selection point-change)
|
||||
(fn [state] (update-in state [:workspace-local :edit-path id] dissoc :content-modifiers :moving-nodes :moving-handler))))))))))))
|
||||
(when (and (some? new-content) (some? shape))
|
||||
(let [changes (changes/generate-path-changes it objects page-id shape (:content shape) new-content)]
|
||||
(if (empty? new-content)
|
||||
(rx/of (dch/commit-changes changes)
|
||||
(dwe/clear-edition-mode))
|
||||
(rx/of (dch/commit-changes changes)
|
||||
(selection/update-selection point-change)
|
||||
(fn [state] (update-in state [:workspace-local :edit-path id] dissoc :content-modifiers :moving-nodes :moving-handler))))))))))
|
||||
|
||||
(defn modify-content-point
|
||||
[content {dx :x dy :y} modifiers point]
|
||||
|
||||
@@ -53,6 +53,6 @@
|
||||
|
||||
|
||||
(mf/defc inspect-title-bar*
|
||||
[{:keys [class title title-class]}]
|
||||
[{:keys [class title]}]
|
||||
[:div {:class [(stl/css :title-bar) class]}
|
||||
[:div {:class [title-class (stl/css :title-only :inspect-title)]} title]])
|
||||
[:div {:class (stl/css :title-only :inspect-title)} title]])
|
||||
|
||||
@@ -32,13 +32,19 @@
|
||||
min-width: var(--sp-l);
|
||||
}
|
||||
|
||||
// TODO: Review if we need other type of button, so we don't need important here
|
||||
.invisible-button {
|
||||
position: absolute;
|
||||
right: 4px;
|
||||
top: 4px;
|
||||
opacity: var(--opacity-button);
|
||||
|
||||
background-color: var(--color-background-quaternary) !important;
|
||||
&:hover {
|
||||
background-color: var(--color-background-quaternary);
|
||||
--opacity-button: 1;
|
||||
}
|
||||
&:focus {
|
||||
background-color: var(--color-background-quaternary);
|
||||
--opacity-button: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -80,7 +80,7 @@
|
||||
[:div {:class (stl/css :pill-dot)}])]]
|
||||
|
||||
(when-not ^boolean disabled
|
||||
[:> icon-button* {:variant "action"
|
||||
[:> icon-button* {:variant "ghost"
|
||||
:class (stl/css :invisible-button)
|
||||
:icon i/broken-link
|
||||
:ref token-detach-btn-ref
|
||||
|
||||
@@ -8,6 +8,7 @@
|
||||
@use "ds/_sizes.scss" as *;
|
||||
@use "ds/typography.scss" as t;
|
||||
@use "ds/colors.scss" as *;
|
||||
@use "ds/mixins.scss" as *;
|
||||
|
||||
.token-field {
|
||||
--token-field-bg-color: var(--color-background-tertiary);
|
||||
@@ -16,9 +17,8 @@
|
||||
--token-field-outline-color: none;
|
||||
--token-field-height: var(--sp-xxxl);
|
||||
--token-field-margin: unset;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
width: inherit;
|
||||
column-gap: var(--sp-xs);
|
||||
align-items: center;
|
||||
position: relative;
|
||||
@@ -27,6 +27,7 @@
|
||||
border-radius: $br-8;
|
||||
padding: var(--sp-xs);
|
||||
outline: $b-1 solid var(--token-field-outline-color);
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
--token-field-bg-color: var(--color-background-quaternary);
|
||||
@@ -39,7 +40,7 @@
|
||||
}
|
||||
|
||||
.with-icon {
|
||||
grid-template-columns: auto 1fr auto;
|
||||
grid-template-columns: auto 1fr;
|
||||
}
|
||||
|
||||
.token-field-disabled {
|
||||
@@ -57,6 +58,8 @@
|
||||
--pill-bg-color: var(--color-background-tertiary);
|
||||
--pill-fg-color: var(--color-token-foreground);
|
||||
@include t.use-typography("code-font");
|
||||
@include textEllipsis;
|
||||
display: block;
|
||||
height: var(--sp-xxl);
|
||||
width: fit-content;
|
||||
background: var(--pill-bg-color);
|
||||
@@ -65,6 +68,7 @@
|
||||
color: var(--pill-fg-color);
|
||||
border-radius: $br-6;
|
||||
padding-inline: $sz-6;
|
||||
max-width: 100%;
|
||||
&:hover {
|
||||
--pill-bg-color: var(--color-token-background);
|
||||
--pill-fg-color: var(--color-foreground-primary);
|
||||
@@ -115,6 +119,9 @@
|
||||
}
|
||||
|
||||
.invisible-button {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
opacity: var(--opacity-button);
|
||||
|
||||
&:hover {
|
||||
|
||||
@@ -159,4 +159,6 @@ $arrow-side: 12px;
|
||||
block-size: fit-content;
|
||||
inline-size: fit-content;
|
||||
line-height: 0;
|
||||
display: grid;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
@@ -12,17 +12,14 @@
|
||||
flex-direction: column;
|
||||
gap: var(--sp-l);
|
||||
width: 100%;
|
||||
max-height: calc(100vh - px2rem(128)); // TODO: Fix this hardcoded value
|
||||
height: calc(100vh - px2rem(128)); // TODO: Fix this hardcoded value
|
||||
padding-top: var(--sp-s);
|
||||
padding-inline: var(--sp-m);
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
scrollbar-gutter: stable;
|
||||
background-color: var(--low-emphasis-background);
|
||||
}
|
||||
|
||||
.workspace-element-options {
|
||||
max-height: calc(100vh - px2rem(180)); // TODO: Fix this hardcoded value
|
||||
height: calc(100vh - px2rem(200)); // TODO: Fix this hardcoded value
|
||||
padding-inline: var(--sp-m);
|
||||
background-color: var(--low-emphasis-background);
|
||||
}
|
||||
|
||||
@@ -24,8 +24,7 @@
|
||||
[:div {:class (stl/css :attributes-block)}
|
||||
[:> inspect-title-bar*
|
||||
{:title (tr "inspect.attributes.blur")
|
||||
:class (stl/css :title-wrapper)
|
||||
:title-class (stl/css :blur-attr-title)}
|
||||
:class (stl/css :title-spacing-blur)}
|
||||
(when (= (count shapes) 1)
|
||||
[:> copy-button* {:data (css/get-css-property objects (first shapes) :filter)
|
||||
:class (stl/css :copy-btn-title)}])]
|
||||
|
||||
@@ -5,28 +5,17 @@
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
@use "ds/_borders.scss" as *;
|
||||
@use "ds/_sizes.scss" as *;
|
||||
|
||||
.attributes-block {
|
||||
--box-border-color: var(--color-background-primary);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-block-end: $b-2 solid var(--box-border-color);
|
||||
@include deprecated.flexColumn;
|
||||
}
|
||||
|
||||
.title-wrapper {
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
|
||||
.blur-attr-title {
|
||||
color: var(--entry-foreground-color-hover);
|
||||
padding-block: var(--sp-s);
|
||||
.title-spacing-blur {
|
||||
@extend .attr-title;
|
||||
}
|
||||
|
||||
.blur-row {
|
||||
@extend .attr-row;
|
||||
block-size: $sz-36;
|
||||
}
|
||||
|
||||
.button-children {
|
||||
@@ -34,5 +23,5 @@
|
||||
}
|
||||
|
||||
.copy-btn-title {
|
||||
max-inline-size: $sz-28;
|
||||
max-width: deprecated.$s-28;
|
||||
}
|
||||
|
||||
@@ -68,8 +68,7 @@
|
||||
[:div {:class (stl/css :attributes-block)}
|
||||
[:> inspect-title-bar*
|
||||
{:title (tr "inspect.attributes.fill")
|
||||
:class (stl/css :title-wrapper)
|
||||
:class-title (stl/css :fill-attr-title)}]
|
||||
:class (stl/css :title-spacing-fill)}]
|
||||
|
||||
[:div {:class (stl/css :attributes-content)}
|
||||
(for [shape shapes]
|
||||
|
||||
@@ -5,30 +5,16 @@
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
@use "ds/_borders.scss" as *;
|
||||
@use "ds/_sizes.scss" as *;
|
||||
|
||||
.attributes-block {
|
||||
--box-border-color: var(--color-background-primary);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-block-end: $b-2 solid var(--box-border-color);
|
||||
@include deprecated.flexColumn;
|
||||
}
|
||||
|
||||
.title-wrapper {
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
|
||||
.fill-attr-title {
|
||||
color: var(--entry-foreground-color-hover);
|
||||
padding-block: var(--sp-s);
|
||||
.title-spacing-fill {
|
||||
@extend .attr-title;
|
||||
}
|
||||
|
||||
.attributes-content {
|
||||
display: grid;
|
||||
gap: deprecated.$s-4;
|
||||
}
|
||||
|
||||
.attributes-fill-block {
|
||||
block-size: $sz-36;
|
||||
}
|
||||
|
||||
@@ -44,8 +44,7 @@
|
||||
[:div {:class (stl/css :attributes-block)}
|
||||
[:> inspect-title-bar*
|
||||
{:title (tr "inspect.attributes.size")
|
||||
:class (stl/css :title-wrapper)
|
||||
:title-class (stl/css :geometry-attr-title)}
|
||||
:class (stl/css :title-spacing-geometry)}
|
||||
|
||||
(when (= (count shapes) 1)
|
||||
[:> copy-button* {:data (css/get-shape-properties-css objects (first shapes) properties)
|
||||
|
||||
@@ -5,28 +5,17 @@
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
@use "ds/_borders.scss" as *;
|
||||
@use "ds/_sizes.scss" as *;
|
||||
|
||||
.attributes-block {
|
||||
--box-border-color: var(--color-background-primary);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-block-end: $b-2 solid var(--box-border-color);
|
||||
@include deprecated.flexColumn;
|
||||
}
|
||||
|
||||
.title-wrapper {
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
|
||||
.geometry-attr-title {
|
||||
color: var(--entry-foreground-color-hover);
|
||||
padding-block: var(--sp-s);
|
||||
.title-spacing-geometry {
|
||||
@extend .attr-title;
|
||||
}
|
||||
|
||||
.geometry-row {
|
||||
@extend .attr-row;
|
||||
block-size: $sz-36;
|
||||
}
|
||||
|
||||
.button-children {
|
||||
@@ -34,5 +23,5 @@
|
||||
}
|
||||
|
||||
.copy-btn-title {
|
||||
max-inline-size: $sz-28;
|
||||
max-width: deprecated.$s-28;
|
||||
}
|
||||
|
||||
@@ -57,8 +57,7 @@
|
||||
[:div {:class (stl/css :attributes-block)}
|
||||
[:> inspect-title-bar*
|
||||
{:title "Layout"
|
||||
:class (stl/css :title-wrapper)
|
||||
:title-class (stl/css :layout-attr-title)}
|
||||
:class (stl/css :title-spacing-layout)}
|
||||
|
||||
(when (= (count shapes) 1)
|
||||
[:> copy-button* {:data (css/get-shape-properties-css objects (first shapes) properties)
|
||||
|
||||
@@ -5,28 +5,17 @@
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
@use "ds/_borders.scss" as *;
|
||||
@use "ds/_sizes.scss" as *;
|
||||
|
||||
.attributes-block {
|
||||
--box-border-color: var(--color-background-primary);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-block-end: $b-2 solid var(--box-border-color);
|
||||
@include deprecated.flexColumn;
|
||||
}
|
||||
|
||||
.title-wrapper {
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
|
||||
.layout-attr-title {
|
||||
color: var(--entry-foreground-color-hover);
|
||||
padding-block: var(--sp-s);
|
||||
.title-spacing-layout {
|
||||
@extend .attr-title;
|
||||
}
|
||||
|
||||
.layout-row {
|
||||
@extend .attr-row;
|
||||
block-size: $sz-36;
|
||||
}
|
||||
|
||||
.button-children {
|
||||
@@ -34,5 +23,5 @@
|
||||
}
|
||||
|
||||
.copy-btn-title {
|
||||
max-inline-size: $sz-28;
|
||||
max-width: deprecated.$s-28;
|
||||
}
|
||||
|
||||
@@ -69,8 +69,7 @@
|
||||
[:div {:class (stl/css :attributes-block)}
|
||||
[:> title-bar* {:collapsable false
|
||||
:title menu-title
|
||||
:class (stl/css :title-wrapper)
|
||||
:title-class (stl/css :layout-element-attr-title)}
|
||||
:class (stl/css :title-spacing-layout-element)}
|
||||
(when (= (count shapes) 1)
|
||||
[:> copy-button* {:data (css/get-shape-properties-css objects (first shapes) properties)
|
||||
:class (stl/css :copy-btn-title)}])]
|
||||
|
||||
@@ -5,28 +5,17 @@
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
@use "ds/_borders.scss" as *;
|
||||
@use "ds/_sizes.scss" as *;
|
||||
|
||||
.attributes-block {
|
||||
--box-border-color: var(--color-background-primary);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-block-end: $b-2 solid var(--box-border-color);
|
||||
@include deprecated.flexColumn;
|
||||
}
|
||||
|
||||
.title-wrapper {
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
|
||||
.layout-element-attr-title {
|
||||
color: var(--entry-foreground-color-hover);
|
||||
padding-block: var(--sp-s);
|
||||
.title-spacing-layout-element {
|
||||
@extend .attr-title;
|
||||
}
|
||||
|
||||
.layout-element-row {
|
||||
@extend .attr-row;
|
||||
block-size: $sz-36;
|
||||
}
|
||||
|
||||
.button-children {
|
||||
@@ -34,6 +23,5 @@
|
||||
}
|
||||
|
||||
.copy-btn-title {
|
||||
max-inline-size: $sz-28;
|
||||
max-inline-size: $sz-28;
|
||||
max-width: deprecated.$s-28;
|
||||
}
|
||||
|
||||
@@ -63,8 +63,7 @@
|
||||
[:div {:class (stl/css :attributes-block)}
|
||||
[:> inspect-title-bar*
|
||||
{:title (tr "inspect.attributes.shadow")
|
||||
:class (stl/css :title-wrapper)
|
||||
:title-class (stl/css :shadow-attr-title)}]
|
||||
:class (stl/css :title-spacing-shadow)}]
|
||||
|
||||
[:div {:class (stl/css :attributes-content)}
|
||||
(for [shape shapes]
|
||||
|
||||
@@ -5,28 +5,17 @@
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
@use "ds/_borders.scss" as *;
|
||||
@use "ds/_sizes.scss" as *;
|
||||
|
||||
.attributes-block {
|
||||
--box-border-color: var(--color-background-primary);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-block-end: $b-2 solid var(--box-border-color);
|
||||
@include deprecated.flexColumn;
|
||||
}
|
||||
|
||||
.title-wrapper {
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
|
||||
.shadow-attr-title {
|
||||
color: var(--entry-foreground-color-hover);
|
||||
padding-block: var(--sp-s);
|
||||
.title-spacing-shadow {
|
||||
@extend .attr-title;
|
||||
}
|
||||
|
||||
.shadow-row {
|
||||
@extend .attr-row;
|
||||
block-size: $sz-36;
|
||||
}
|
||||
|
||||
.button-children {
|
||||
|
||||
@@ -88,8 +88,7 @@
|
||||
[:div {:class (stl/css :attributes-block)}
|
||||
[:> inspect-title-bar*
|
||||
{:title (tr "inspect.attributes.stroke")
|
||||
:class (stl/css :title-wrapper)
|
||||
:title-class (stl/css :stroke-attr-title)}]
|
||||
:class (stl/css :title-spacing-stroke)}]
|
||||
|
||||
[:div {:class (stl/css :attributes-content)}
|
||||
(for [shape shapes]
|
||||
|
||||
@@ -5,34 +5,21 @@
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
@use "ds/_borders.scss" as *;
|
||||
@use "ds/_sizes.scss" as *;
|
||||
|
||||
.attributes-block {
|
||||
--box-border-color: var(--color-background-primary);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-block-end: $b-2 solid var(--box-border-color);
|
||||
@include deprecated.flexColumn;
|
||||
}
|
||||
|
||||
.title-wrapper {
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
|
||||
.stroke-attr-title {
|
||||
color: var(--entry-foreground-color-hover);
|
||||
padding-block: var(--sp-s);
|
||||
.title-spacing-stroke {
|
||||
@extend .attr-title;
|
||||
}
|
||||
|
||||
.attributes-stroke-block {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--sp-xs);
|
||||
@include deprecated.flexColumn;
|
||||
}
|
||||
|
||||
.stroke-row {
|
||||
@extend .attr-row;
|
||||
block-size: $sz-36;
|
||||
}
|
||||
|
||||
.button-children {
|
||||
@@ -41,5 +28,5 @@
|
||||
|
||||
.attributes-content {
|
||||
display: grid;
|
||||
gap: var(--sp-xs);
|
||||
gap: deprecated.$s-4;
|
||||
}
|
||||
|
||||
@@ -54,6 +54,5 @@
|
||||
[:div {:class (stl/css :attributes-block)}
|
||||
[:> inspect-title-bar*
|
||||
{:title (tr "workspace.sidebar.options.svg-attrs.title")
|
||||
:class (stl/css :title-wrapper)
|
||||
:title-class (stl/css :svg-attr-title)}]
|
||||
:class (stl/css :title-spacing-svg)}]
|
||||
[:& svg-block {:shape shape}]])))
|
||||
|
||||
@@ -5,29 +5,17 @@
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
@use "ds/_borders.scss" as *;
|
||||
@use "ds/_sizes.scss" as *;
|
||||
@use "ds/typography.scss" as *;
|
||||
|
||||
.attributes-block {
|
||||
--box-border-color: var(--color-background-primary);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-block-end: $b-2 solid var(--box-border-color);
|
||||
@include deprecated.flexColumn;
|
||||
}
|
||||
|
||||
.title-wrapper {
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
|
||||
.svg-attr-title {
|
||||
color: var(--entry-foreground-color-hover);
|
||||
padding-block: var(--sp-s);
|
||||
.title-spacing-svg {
|
||||
@extend .attr-title;
|
||||
}
|
||||
|
||||
.svg-row {
|
||||
@extend .attr-row;
|
||||
block-size: $sz-36;
|
||||
}
|
||||
|
||||
.button-children {
|
||||
@@ -35,12 +23,12 @@
|
||||
}
|
||||
|
||||
.attributes-subtitle {
|
||||
@include use-typography("headline-small");
|
||||
@include deprecated.uppercaseTitleTipography;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
block-size: $sz-32;
|
||||
height: deprecated.$s-32;
|
||||
span {
|
||||
block-size: $sz-32;
|
||||
height: deprecated.$s-32;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@@ -157,8 +157,7 @@
|
||||
[:div {:class (stl/css :attributes-block)}
|
||||
[:> inspect-title-bar*
|
||||
{:title (tr "inspect.attributes.typography")
|
||||
:class (stl/css :title-wrapper)
|
||||
:title-class (stl/css :text-atrr-title)}]
|
||||
:class (stl/css :title-spacing-text)}]
|
||||
|
||||
(for [shape shapes]
|
||||
[:& text-block {:shape shape
|
||||
|
||||
@@ -5,37 +5,23 @@
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
@use "ds/_borders.scss" as *;
|
||||
@use "ds/_sizes.scss" as *;
|
||||
@use "ds/_utils.scss" as *;
|
||||
@use "ds/typography.scss" as *;
|
||||
|
||||
.attributes-block {
|
||||
--box-border-color: var(--color-background-primary);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-block-end: $b-2 solid var(--box-border-color);
|
||||
@include deprecated.flexColumn;
|
||||
}
|
||||
|
||||
.title-wrapper {
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
|
||||
.text-attr-title {
|
||||
color: var(--entry-foreground-color-hover);
|
||||
padding-block: var(--sp-s);
|
||||
.title-spacing-text {
|
||||
@extend .attr-title;
|
||||
}
|
||||
|
||||
.attributes-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--sp-xs);
|
||||
@include deprecated.flexColumn;
|
||||
}
|
||||
|
||||
.text-row {
|
||||
@extend .attr-row;
|
||||
block-size: unset;
|
||||
min-block-size: $sz-36;
|
||||
height: unset;
|
||||
min-height: deprecated.$s-32;
|
||||
:global(.attr-value) {
|
||||
align-items: center;
|
||||
}
|
||||
@@ -46,20 +32,20 @@
|
||||
}
|
||||
|
||||
.attributes-content-row {
|
||||
max-inline-size: px2rem(240);
|
||||
min-block-size: px2rem(34);
|
||||
border-radius: $br-8;
|
||||
border: $b-1 solid var(--menu-border-color-disabled);
|
||||
margin-block-start: var(--sp-xs);
|
||||
max-width: deprecated.$s-240;
|
||||
min-height: calc(deprecated.$s-2 + deprecated.$s-32);
|
||||
border-radius: deprecated.$br-8;
|
||||
border: deprecated.$s-1 solid var(--menu-border-color-disabled);
|
||||
margin-top: deprecated.$s-4;
|
||||
.content {
|
||||
@include use-typography("body-small");
|
||||
@include deprecated.bodySmallTypography;
|
||||
width: 100%;
|
||||
padding: var(--sp-xs) 0;
|
||||
padding: deprecated.$s-4 0;
|
||||
color: var(--color-foreground-secondary);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border: $b-1 solid var(--color-background-tertiary);
|
||||
border: deprecated.$s-1 solid var(--color-background-tertiary);
|
||||
background-color: var(--menu-background-color);
|
||||
.content {
|
||||
color: var(--menu-foreground-color-hover);
|
||||
|
||||
@@ -42,8 +42,7 @@
|
||||
[:div {:class (stl/css :attributes-block)}
|
||||
[:> inspect-title-bar*
|
||||
{:title (if is-container? (tr "inspect.attributes.variants") (tr "inspect.attributes.variant"))
|
||||
:class (stl/css :title-wrapper)
|
||||
:title-class (stl/css :variant-attr-title)}]
|
||||
:class (stl/css :title-spacing-variant)}]
|
||||
|
||||
(for [[pos property] (map-indexed vector properties)]
|
||||
[:> variant-block* {:key (dm/str "variant-property-" pos) :name (:name property) :value (:value property)}])]))
|
||||
|
||||
@@ -5,29 +5,18 @@
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
@use "ds/_borders.scss" as *;
|
||||
@use "ds/_sizes.scss" as *;
|
||||
|
||||
.attributes-block {
|
||||
--box-border-color: var(--color-background-primary);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-block-end: $b-2 solid var(--box-border-color);
|
||||
@include deprecated.flexColumn;
|
||||
}
|
||||
|
||||
.title-wrapper {
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
|
||||
.variant-attr-title {
|
||||
color: var(--entry-foreground-color-hover);
|
||||
padding-block: var(--sp-s);
|
||||
.title-spacing-variant {
|
||||
@extend .attr-title;
|
||||
}
|
||||
|
||||
.variant-row {
|
||||
@extend .attr-row;
|
||||
block-size: fit-content;
|
||||
min-block-size: $sz-36;
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
.button-children {
|
||||
|
||||
@@ -51,8 +51,7 @@
|
||||
[:div {:class (stl/css :attributes-block)}
|
||||
[:> inspect-title-bar*
|
||||
{:title "Visibility"
|
||||
:class (stl/css :title-wrapper)
|
||||
:title-class (stl/css :visibility-attr-title)}
|
||||
:class (stl/css :title-spacing-visibility)}
|
||||
|
||||
(when (= (count shapes) 1)
|
||||
[:> copy-button* {:data (css/get-shape-properties-css objects (first shapes) properties)
|
||||
|
||||
@@ -5,28 +5,17 @@
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
@use "ds/_borders.scss" as *;
|
||||
@use "ds/_sizes.scss" as *;
|
||||
|
||||
.attributes-block {
|
||||
--box-border-color: var(--color-background-primary);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-block-end: $b-2 solid var(--box-border-color);
|
||||
@include deprecated.flexColumn;
|
||||
}
|
||||
|
||||
.title-wrapper {
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
|
||||
.visibility-attr-title {
|
||||
color: var(--entry-foreground-color-hover);
|
||||
padding-block: var(--sp-s);
|
||||
.title-spacing-visibility {
|
||||
@extend .attr-title;
|
||||
}
|
||||
|
||||
.visibility-row {
|
||||
@extend .attr-row;
|
||||
block-size: $sz-36;
|
||||
}
|
||||
|
||||
.button-children {
|
||||
@@ -34,5 +23,5 @@
|
||||
}
|
||||
|
||||
.copy-btn-title {
|
||||
max-inline-size: $sz-28;
|
||||
max-width: deprecated.$s-28;
|
||||
}
|
||||
|
||||
@@ -186,7 +186,6 @@
|
||||
[:> styles-tab* {:color-space color-space
|
||||
:objects objects
|
||||
:shapes shapes
|
||||
:from from
|
||||
:libraries libraries
|
||||
:file-id file-id}]
|
||||
:computed
|
||||
|
||||
@@ -24,6 +24,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
.viewer-code {
|
||||
padding-inline-start: var(--sp-s);
|
||||
}
|
||||
|
||||
.tool-windows {
|
||||
block-size: 100%;
|
||||
display: grid;
|
||||
|
||||
@@ -90,7 +90,7 @@
|
||||
:multiple))
|
||||
|
||||
(mf/defc styles-tab*
|
||||
[{:keys [color-space shapes libraries objects file-id from]}]
|
||||
[{:keys [color-space shapes libraries objects file-id]}]
|
||||
(let [data (dm/get-in libraries [file-id :data])
|
||||
first-shape (first shapes)
|
||||
first-component (ctkl/get-component data (:component-id first-shape))
|
||||
@@ -131,8 +131,7 @@
|
||||
(mf/deps shorthands*)
|
||||
(fn [shorthand]
|
||||
(swap! shorthands* assoc (:panel shorthand) (:property shorthand))))]
|
||||
[:ol {:class (stl/css-case :styles-tab true
|
||||
:styles-tab-workspace (= from :workspace)) :aria-label (tr "labels.styles")}
|
||||
[:ol {:class (stl/css :styles-tab) :aria-label (tr "labels.styles")}
|
||||
;; TOKENS PANEL
|
||||
(when (or (seq active-themes) (seq active-sets))
|
||||
[:li
|
||||
|
||||
@@ -7,9 +7,5 @@
|
||||
@use "ds/_utils.scss" as *;
|
||||
|
||||
.styles-tab {
|
||||
block-size: calc(100vh - px2rem(140)); // TODO: Fix this hardcoded value
|
||||
}
|
||||
|
||||
.styles-tab-workspace {
|
||||
block-size: calc(100vh - px2rem(180)); // TODO: Fix this hardcoded value
|
||||
block-size: calc(100vh - px2rem(200)); // TODO: Fix this hardcoded value
|
||||
}
|
||||
|
||||
@@ -60,7 +60,6 @@
|
||||
}
|
||||
|
||||
.property-detail-text {
|
||||
@include use-typography("body-small");
|
||||
color: var(--detail-color);
|
||||
}
|
||||
|
||||
|
||||
@@ -19,7 +19,7 @@
|
||||
(case type
|
||||
:variant (tr "inspect.tabs.styles.variants-panel")
|
||||
:token (tr "inspect.tabs.styles.token-panel")
|
||||
:geometry (tr "inspect.attributes.size")
|
||||
:geometry (tr "inspect.tabs.styles.geometry-panel")
|
||||
:fill (tr "labels.fill")
|
||||
:stroke (tr "labels.stroke")
|
||||
:text (tr "labels.text")
|
||||
|
||||
@@ -33,6 +33,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--title-gap);
|
||||
padding-block: var(--title-padding);
|
||||
}
|
||||
|
||||
.disclosure-button {
|
||||
@@ -51,5 +52,4 @@
|
||||
@include use-typography("headline-small");
|
||||
flex: 1;
|
||||
color: var(--title-color);
|
||||
padding-block: var(--title-padding);
|
||||
}
|
||||
|
||||
@@ -148,12 +148,11 @@
|
||||
(mf/use-fn
|
||||
(mf/deps index prefix is-move)
|
||||
(fn [event]
|
||||
(when (dom/left-mouse? event)
|
||||
(dom/stop-propagation event)
|
||||
(dom/prevent-default event)
|
||||
(dom/stop-propagation event)
|
||||
(dom/prevent-default event)
|
||||
|
||||
(when ^boolean is-move
|
||||
(st/emit! (drp/start-move-handler index prefix))))))]
|
||||
(when ^boolean is-move
|
||||
(st/emit! (drp/start-move-handler index prefix)))))]
|
||||
|
||||
[:g.handler {:pointer-events (if ^boolean is-draw "none" "visible")}
|
||||
[:line
|
||||
|
||||
@@ -3,10 +3,15 @@
|
||||
(:require
|
||||
[app.common.data.macros :as dm]
|
||||
[app.common.types.shape.radius :as ctsr]
|
||||
[app.common.types.token :as tk]
|
||||
[app.main.data.workspace.shapes :as dwsh]
|
||||
[app.main.data.workspace.tokens.application :as dwta]
|
||||
[app.main.features :as features]
|
||||
[app.main.store :as st]
|
||||
[app.main.ui.components.numeric-input :as deprecated-input]
|
||||
[app.main.ui.context :as muc]
|
||||
[app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
|
||||
[app.main.ui.ds.controls.numeric-input :refer [numeric-input*]]
|
||||
[app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i]
|
||||
[app.main.ui.hooks :as hooks]
|
||||
[app.util.i18n :as i18n :refer [tr]]
|
||||
@@ -21,11 +26,15 @@
|
||||
(defn- check-border-radius-menu-props
|
||||
[old-props new-props]
|
||||
(let [old-values (unchecked-get old-props "values")
|
||||
new-values (unchecked-get new-props "values")]
|
||||
new-values (unchecked-get new-props "values")
|
||||
old-applied-tokens (unchecked-get old-props "applied-tokens")
|
||||
new-applied-tokens (unchecked-get new-props "applied-tokens")]
|
||||
(and (identical? (unchecked-get old-props "class")
|
||||
(unchecked-get new-props "class"))
|
||||
(identical? (unchecked-get old-props "ids")
|
||||
(unchecked-get new-props "ids"))
|
||||
(identical? old-applied-tokens
|
||||
new-applied-tokens)
|
||||
(identical? (get old-values :r1)
|
||||
(get new-values :r1))
|
||||
(identical? (get old-values :r2)
|
||||
@@ -35,13 +44,64 @@
|
||||
(identical? (get old-values :r4)
|
||||
(get new-values :r4)))))
|
||||
|
||||
(mf/defc numeric-input-wrapper*
|
||||
{::mf/private true}
|
||||
[{:keys [values name applied-tokens align on-detach radius] :rest props}]
|
||||
(let [tokens (mf/use-ctx muc/active-tokens-by-type)
|
||||
tokens (mf/with-memo [tokens name]
|
||||
(delay
|
||||
(-> (deref tokens)
|
||||
(select-keys (get tk/tokens-by-input name))
|
||||
(not-empty))))
|
||||
on-detach-attr
|
||||
(mf/use-fn
|
||||
(mf/deps on-detach name)
|
||||
#(on-detach % name))
|
||||
|
||||
r1-value (get applied-tokens :r1)
|
||||
r2-value (get applied-tokens :r2)
|
||||
r3-value (get applied-tokens :r3)
|
||||
r4-value (get applied-tokens :r4)
|
||||
all-equal? (= r1-value r2-value r3-value r4-value)
|
||||
|
||||
applied-token (if (= :all radius)
|
||||
(if all-equal?
|
||||
r1-value
|
||||
:mixed)
|
||||
:mixed)
|
||||
|
||||
|
||||
props (mf/spread-props props
|
||||
{:placeholder (if (or (= :multiple (:applied-tokens values))
|
||||
(= :multiple (get values name)))
|
||||
(tr "settings.multiple") "--")
|
||||
:class (stl/css :numeric-input-measures)
|
||||
:applied-token applied-token
|
||||
:tokens (if (delay? tokens) @tokens tokens)
|
||||
:align align
|
||||
:on-detach on-detach-attr
|
||||
:value (get values name)})]
|
||||
[:> numeric-input* props]))
|
||||
|
||||
(mf/defc border-radius-menu*
|
||||
{::mf/wrap [#(mf/memo' % check-border-radius-menu-props)]}
|
||||
[{:keys [class ids values]}]
|
||||
(let [all-equal? (all-equal? values)
|
||||
[{:keys [class ids values applied-tokens]}]
|
||||
(let [token-numeric-inputs
|
||||
(features/use-feature "tokens/numeric-input")
|
||||
|
||||
all-equal? (all-equal? values)
|
||||
radius-expanded* (mf/use-state false)
|
||||
radius-expanded (deref radius-expanded*)
|
||||
|
||||
;; DETACH
|
||||
on-detach-token
|
||||
(mf/use-fn
|
||||
(mf/deps ids)
|
||||
(fn [token attr]
|
||||
(st/emit! (dwta/unapply-token {:token (first token)
|
||||
:attributes #{attr}
|
||||
:shape-ids ids}))))
|
||||
|
||||
change-radius
|
||||
(mf/use-fn
|
||||
(mf/deps ids)
|
||||
@@ -94,23 +154,39 @@
|
||||
|
||||
[:div {:class (dm/str class " " (stl/css :radius))}
|
||||
(if (not radius-expanded)
|
||||
[:div {:class (stl/css :radius-1)
|
||||
:title (tr "workspace.options.radius")}
|
||||
[:> icon* {:icon-id i/corner-radius
|
||||
:size "s"
|
||||
:class (stl/css :icon)}]
|
||||
[:> deprecated-input/numeric-input*
|
||||
{:placeholder (cond
|
||||
(not all-equal?)
|
||||
(tr "settings.multiple")
|
||||
(= :multiple (:r1 values))
|
||||
(tr "settings.multiple")
|
||||
:else
|
||||
"--")
|
||||
:min 0
|
||||
:nillable true
|
||||
:on-change on-single-radius-change
|
||||
:value (if all-equal? (:r1 values) nil)}]]
|
||||
(if token-numeric-inputs
|
||||
[:div {:class (stl/css :radius-1)
|
||||
:title (tr "workspace.options.radius")}
|
||||
[:> numeric-input-wrapper*
|
||||
{:on-change on-single-radius-change
|
||||
:on-detach on-detach-token
|
||||
:icon i/corner-radius
|
||||
:min 0
|
||||
:name :border-radius
|
||||
:nillable true
|
||||
:property (tr "workspace.options.width")
|
||||
:applied-tokens applied-tokens
|
||||
:radius :all
|
||||
:values (if all-equal? (:r1 values) nil)}]]
|
||||
|
||||
[:div {:class (stl/css :radius-1)
|
||||
:title (tr "workspace.options.radius")}
|
||||
[:> icon* {:icon-id i/corner-radius
|
||||
:size "s"
|
||||
:class (stl/css :icon)}]
|
||||
[:> deprecated-input/numeric-input*
|
||||
{:placeholder (cond
|
||||
(not all-equal?)
|
||||
(tr "settings.multiple")
|
||||
(= :multiple (:r1 values))
|
||||
(tr "settings.multiple")
|
||||
:else
|
||||
"--")
|
||||
:min 0
|
||||
:nillable true
|
||||
:on-change on-single-radius-change
|
||||
:value (if all-equal? (:r1 values) nil)}]])
|
||||
|
||||
|
||||
[:div {:class (stl/css :radius-4)}
|
||||
[:div {:class (stl/css :small-input)}
|
||||
|
||||
@@ -77,7 +77,7 @@
|
||||
(nil? (get values name)))
|
||||
(tr "settings.multiple")
|
||||
"--")
|
||||
:class (stl/css :numeric-input-measures)
|
||||
:class (stl/css :numeric-input-layout)
|
||||
:applied-token (get applied-tokens name)
|
||||
:tokens tokens
|
||||
:align align
|
||||
|
||||
@@ -433,6 +433,6 @@
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.numeric-input-measures {
|
||||
.numeric-input-layout {
|
||||
--dropdown-width: var(--7-columns-dropdown-width);
|
||||
}
|
||||
|
||||
@@ -6,6 +6,7 @@
|
||||
|
||||
@use "refactor/common-refactor.scss" as deprecated;
|
||||
@use "../../../sidebar/common/sidebar.scss" as sidebar;
|
||||
@use "ds/_utils.scss" as *;
|
||||
|
||||
.element-set {
|
||||
display: grid;
|
||||
@@ -188,7 +189,6 @@
|
||||
@extend .button-icon;
|
||||
}
|
||||
|
||||
// TODO: Add a proper variable to this sizing
|
||||
.numeric-input-measures {
|
||||
--dropdown-width: var(--7-columns-dropdown-width);
|
||||
}
|
||||
|
||||
@@ -37,7 +37,7 @@ This command is going to search for the file located in `frontend/src/app/main/u
|
||||
|
||||
## How it works?
|
||||
|
||||
The text editor divides the content in three elements: `root`, `paragraph` and `textSpan`. In terms of content, a `textSpan` is a styled element displayed on a line within a block. A `textSpan` can only have one child (a Text node). A `paragraph` is a **block** element that can contain multiple `textSpan`s (**textSpan** elements).
|
||||
The text editor divides the content in three elements: `root`, `paragraph` and `inline`. An `inline` in terms of content is a styled element that it is displayed in a line inside a block and an `inline` only can have one child (a Text node). A `paragraph` is a **block** element that can contain multiple `inline`s (**inline** elements).
|
||||
|
||||
```html
|
||||
<div data-itype="root">
|
||||
@@ -53,10 +53,10 @@ This way we only need to deal with a structure like this, where circular nodes a
|
||||
```mermaid
|
||||
flowchart TB
|
||||
root((root)) --> paragraph((paragraph))
|
||||
paragraph --> text_span_1((textSpan))
|
||||
paragraph --> text_span_2((textSpan))
|
||||
text_span_1 --> text_1[Hello, ]
|
||||
text_span_2 --> text_2[World!]
|
||||
paragraph --> inline_1((inline))
|
||||
paragraph --> inline_2((inline))
|
||||
inline_1 --> text_1[Hello, ]
|
||||
inline_2 --> text_2[World!]
|
||||
```
|
||||
|
||||
This is compatible with the way Penpot stores text content.
|
||||
@@ -68,26 +68,6 @@ flowchart TB
|
||||
paragraph --> text((text))
|
||||
```
|
||||
|
||||
## How the TextEditor works?
|
||||
|
||||
```mermaid
|
||||
flowchart TB
|
||||
TextEditor -->|handles `selectionchange` events| SelectionController
|
||||
TextEditor -->|handles how the editor dispatches changes| ChangeController
|
||||
```
|
||||
|
||||
The `TextEditor` contains a series of references to DOM elements, one of them is a `contenteditable` element that keeps the sub-elements explained before (root, paragraphs and textspans).
|
||||
|
||||
`SelectionController` listens to the `document` event called `selectionchange`. This event is triggered everytime the focus/selection of the browser changes.
|
||||
|
||||
`ChangeController` is called by the `TextEditor` instance everytime a change is performed on the content of the `contenteditable` element.
|
||||
|
||||
### Events
|
||||
|
||||
- `change`: This event is dispatched every time a change is made in the editor. All changes are debounced to prevent dispatching too many change events. This event is also dispatched when there are pending change events and the user blurs the textarea element.
|
||||
|
||||
- `stylechange`: This event is dispatched every time the `currentStyle` changes. This normally happens when the user changes the caret position or the selection and the `currentStyle` is re-computed.
|
||||
|
||||
## How the code is organized?
|
||||
|
||||
- `editor`: contains everything related to the TextEditor. Where `TextEditor.js` is the main file where all the basic code of the editor is handled. This has been designed so that in the future, when the Web Components API is more stable and has features such as handling selection events within shadow roots we will be able to update this class with little effort.
|
||||
|
||||
Reference in New Issue
Block a user