3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-06-11 22:21:38 +02:00
Code Issues Projects Releases Packages Wiki Activity

🐛 Safari compatibility fixes

Browse source
This commit is contained in:
alonso.torres 2020-11-30 17:59:39 +01:00 • committed by Andrey Antukh
parent 9260c59afb
commit 001f90a540
12 changed files with 164 additions and 75 deletions
Download patch file Download diff file Expand all files Collapse all files

16
frontend/src/app/main/ui/shapes/text.cljs
View file

@ -26,7 +26,7 @@
[{:keys [node index shape] :as props}]
(let [embed-resources? (mf/use-ctx muc/embed-ctx)
{:keys [type text children]} node
props #js {:shape shape}
render-node
(fn [index node]
(mf/element text-node {:index index
@ -35,29 +35,31 @@
:shape shape}))]
(if (string? text)
(let [style (sts/generate-text-styles (clj->js node))]
[:span.text-node {:style style} (if (= text "") "\u00A0" text)])
(let [style (sts/generate-text-styles (clj->js node) props)]
[:span {:style style
:className (when (:fill-color-gradient node) "gradient")}
(if (= text "") "\u00A0" text)])
(let [children (map-indexed render-node children)]
(case type
"root"
(let [style (sts/generate-root-styles (clj->js node) #js {:shape shape})]
(let [style (sts/generate-root-styles (clj->js node) props)]
[:div.root.rich-text
{:key index
:style style
:xmlns "http://www.w3.org/1999/xhtml"}
[:*
[:style ".text-node { background: var(--text-color); -webkit-text-fill-color: transparent; -webkit-background-clip: text;"]
[:style ".gradient { background: var(--text-color); -webkit-text-fill-color: transparent; -webkit-background-clip: text;"]
(when embed-resources?
[ste/embed-fontfaces-style {:node node}])]
children])
"paragraph-set"
(let [style (sts/generate-paragraph-set-styles (clj->js node))]
(let [style (sts/generate-paragraph-set-styles (clj->js node) props)]
[:div.paragraph-set {:key index :style style} children])
"paragraph"
(let [style (sts/generate-paragraph-styles (clj->js node))]
(let [style (sts/generate-paragraph-styles (clj->js node) props)]
[:p.paragraph {:key index :style style} children])
nil)))))

22
frontend/src/app/main/ui/shapes/text/styles.cljs
View file

@ -35,27 +35,29 @@
(= talign "justify") (obj/set! "justifyContent" "stretch"))))
(defn generate-paragraph-set-styles
[data]
[data props]
;; The position absolute is used so the paragraph is "outside"
;; the normal layout and can grow outside its parent
;; We use this element to measure the size of the text
(let [base #js {:display "inline-block"
:position "absolute"}]
(let [base #js {:display "inline-block"}]
base))
(defn generate-paragraph-styles
[data]
(let [base #js {:fontSize "14px"
[data props]
(let [shape (obj/get props "shape")
grow-type (:grow-type shape)
base #js {:fontSize "14px"
:margin "inherit"
:lineHeight "1.2"}
lh (obj/get data "line-height")
ta (obj/get data "text-align")]
(cond-> base
ta (obj/set! "textAlign" ta)
lh (obj/set! "lineHeight" lh))))
lh (obj/set! "lineHeight" lh)
(= grow-type :auto-width) (obj/set! "whiteSpace" "pre"))))
(defn generate-text-styles
[data]
[data props]
(let [letter-spacing (obj/get data "letter-spacing")
text-decoration (obj/get data "text-decoration")
text-transform (obj/get data "text-transform")
@ -82,7 +84,7 @@
fill-color-ref-file (obj/get data "fill-color-ref-file")
[r g b a] (uc/hex->rgba fill-color fill-opacity)
background (if fill-color-gradient
text-color (if fill-color-gradient
(uc/gradient->css (js->clj fill-color-gradient))
(str/format "rgba(%s, %s, %s, %s)" r g b a))
@ -91,7 +93,8 @@
base #js {:textDecoration text-decoration
:textTransform text-transform
:lineHeight (or line-height "inherit")
"--text-color" background}]
:color text-color
"--text-color" text-color}]
(when (and (string? letter-spacing)
(pos? (alength letter-spacing)))
@ -117,4 +120,5 @@
(obj/set! base "fontStyle" font-style)
(obj/set! base "fontWeight" font-weight))))
base))