3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-06-12 03:41:37 +02:00
Code Issues Projects Releases Packages Wiki Activity

🐛 Fix opacity in frame containers (#5858)

Browse source 
* 🐛 Fix opacity in frame containers

* 📎 Improve readability of frame containers by using class names
This commit is contained in:
Elena Torró 2025-02-19 10:44:24 +01:00 • committed by GitHub
parent 6cb1aa24cd
commit 73a52e5395
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 21 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

43
frontend/src/app/main/ui/shapes/frame.cljs
View file

@ -94,33 +94,32 @@
;; We need to separate blur from shadows because the blur is applied to the strokes ;; We need to separate blur from shadows because the blur is applied to the strokes
;; while the shadows have to be placed *under* the stroke (for example, the inner shadows) ;; while the shadows have to be placed *under* the stroke (for example, the inner shadows)
;; and the shadows needs to be applied only to the content (without the stroke) ;; and the shadows needs to be applied only to the content (without the stroke)
[:g {:filter filter-str-blur} [:g.frame-container-wrapper {:opacity opacity}
[:defs [:g.frame-container-blur {:filter filter-str-blur}
[:& filters/filters {:shape (dissoc shape :blur) :filter-id filter-id-shadows}] [:defs
[:& filters/filters {:shape (assoc shape :shadow []) :filter-id filter-id-blur}]] [:& filters/filters {:shape (dissoc shape :blur) :filter-id filter-id-shadows}]
[:& filters/filters {:shape (assoc shape :shadow []) :filter-id filter-id-blur}]]
;; This need to be separated in two layers so the clip doesn't affect the shadow filters ;; This need to be separated in two layers so the clip doesn't affect the shadow filters
;; otherwise the shadow will be clipped and not visible ;; otherwise the shadow will be clipped and not visible
[:g {:filter filter-str-shadows} [:g.frame-container-shadows {:filter filter-str-shadows}
[:g {:clip-path (when-not ^boolean show-content? (frame-clip-url shape render-id)) [:g {:clip-path (when-not ^boolean show-content? (frame-clip-url shape render-id))
;; A frame sets back normal fill behavior (default ;; A frame sets back normal fill behavior (default
;; transparent). It may have been changed to default black ;; transparent). It may have been changed to default black
;; if a shape coming from an imported SVG file is ;; if a shape coming from an imported SVG file is
;; rendered. See main.ui.shapes.attrs/add-style-attrs. ;; rendered. See main.ui.shapes.attrs/add-style-attrs.
:fill "none" :fill "none"}
:opacity opacity}
[:& shape-fills {:shape shape} [:& shape-fills {:shape shape}
(if ^boolean path? (if ^boolean path?
[:> :path props] [:> :path props]
[:> :rect props])] [:> :rect props])]
children]]
children]] [:& shape-strokes {:shape shape}
(if ^boolean path?
[:& shape-strokes {:shape shape} [:> :path props]
(if ^boolean path? [:> :rect props])]]]))
[:> :path props]
[:> :rect props])]]))
(mf/defc frame-thumbnail-image (mf/defc frame-thumbnail-image
{::mf/wrap-props false} {::mf/wrap-props false}

1
frontend/src/app/main/ui/workspace/shapes/frame.cljs
View file

@ -185,7 +185,6 @@
(d/close! task))) (d/close! task)))
(fdm/use-dynamic-modifiers objects (mf/ref-val content-ref) modifiers) (fdm/use-dynamic-modifiers objects (mf/ref-val content-ref) modifiers)
[:& shape-container {:shape shape} [:& shape-container {:shape shape}
[:g.frame-container [:g.frame-container
{:id (dm/str "frame-container-" frame-id) {:id (dm/str "frame-container-" frame-id)