3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-10 16:26:37 +02:00
Code Issues Projects Releases Packages Wiki Activity

⚡ Add imposter placeholders

Browse source
This commit is contained in:
Aitor 2023-11-30 09:58:36 +01:00 • committed by Andrey Antukh
parent 4324460b00
commit 4e87341c1e
2 changed files with 30 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -123,9 +123,12 @@
tries-ref (mf/use-ref 0) tries-ref (mf/use-ref 0)
imposter-ref (mf/use-ref nil) imposter-ref (mf/use-ref nil)
imposter-loaded-ref (mf/use-ref false)
task-ref (mf/use-ref nil) task-ref (mf/use-ref nil)
on-load (mf/use-fn #(mf/set-ref-val! tries-ref 0)) on-load (mf/use-fn (fn []
(mf/set-ref-val! tries-ref 0)
(mf/set-ref-val! imposter-loaded-ref true)))
on-error (mf/use-fn on-error (mf/use-fn
(fn [] (fn []
(let [current-tries (mf/ref-val tries-ref) (let [current-tries (mf/ref-val tries-ref)
@ -159,6 +162,15 @@
:key "frame-container" :key "frame-container"
:opacity (when ^boolean hidden? 0)} :opacity (when ^boolean hidden? 0)}
;; When there is no thumbnail, we generate a empty rect.
(when (and (not ^boolean thumbnail-uri) (not (mf/ref-val imposter-loaded-ref)))
[:g.frame-placeholder
[:rect {:x x
:y y
:width width
:height height
:fill "url(#frame-placeholder-gradient)"}]])
[:g.frame-imposter [:g.frame-imposter
[:image.thumbnail-bitmap [:image.thumbnail-bitmap
{:x x {:x x
@ -182,8 +194,7 @@
:stroke-width 2}])] :stroke-width 2}])]
;; When thumbnail is disabled. ;; When thumbnail is disabled.
(when (or (not ^boolean thumbnail?) (when (or (not ^boolean thumbnail?) (not ^boolean thumbnail-uri))
(not ^boolean thumbnail-uri))
[:g.frame-content [:g.frame-content
{:id (dm/str "frame-content-" frame-id) {:id (dm/str "frame-content-" frame-id)
:ref container-ref} :ref container-ref}

13
frontend/src/app/main/ui/workspace/viewport.cljs
View file

@ -316,6 +316,19 @@
:pointer-events "none"} :pointer-events "none"}
:fill "none"} :fill "none"}
[:defs
[:linearGradient {:id "frame-placeholder-gradient"}
[:animateTransform
{:attributeName "gradientTransform"
:type "translate"
:from "-1 0"
:to "1 0"
:dur "2s"
:repeatCount "indefinite"}]
[:stop {:offset "0%" :stop-color (str "color-mix(in srgb-linear, " background " 90%, #777)") :stop-opacity 1}]
[:stop {:offset "50%" :stop-color (str "color-mix(in srgb-linear, " background " 80%, #777)") :stop-opacity 1}]
[:stop {:offset "100%" :stop-color (str "color-mix(in srgb-linear, " background " 90%, #777)") :stop-opacity 1}]]]
(when (dbg/enabled? :show-export-metadata) (when (dbg/enabled? :show-export-metadata)
[:& use/export-page {:options options}]) [:& use/export-page {:options options}])