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

🐛 Fix mouse leave in handoff close overlay animation breaks

Browse source
This commit is contained in:
Pablo Alba 2022-04-21 13:20:06 +02:00 • committed by Andrés Moya
parent d18c96360f
commit 658e3b7aee
2 changed files with 79 additions and 76 deletions
Download patch file Download diff file Expand all files Collapse all files

1
CHANGES.md
View file

@ -46,6 +46,7 @@
### :bug: Bugs fixed ### :bug: Bugs fixed
- Fix internal error when hoverin over shape [Taiga #3237](https://tree.taiga.io/project/penpot/issue/3237) - Fix internal error when hoverin over shape [Taiga #3237](https://tree.taiga.io/project/penpot/issue/3237)
- Fix mouse leave in handoff close overlay animation breaks [Taiga #3173](https://tree.taiga.io/project/penpot/issue/3173)
- Fix different behaviour during image drag [Taiga #2279](https://tree.taiga.io/project/penpot/issue/2279) - Fix different behaviour during image drag [Taiga #2279](https://tree.taiga.io/project/penpot/issue/2279)
- Fix hidden file name on import [Taiga #3172](https://tree.taiga.io/project/penpot/issue/3172) - Fix hidden file name on import [Taiga #3172](https://tree.taiga.io/project/penpot/issue/3172)
- Fix unneccessary scrollbars at the color list [Taiga #3211](https://tree.taiga.io/project/penpot/issue/3211) - Fix unneccessary scrollbars at the color list [Taiga #3211](https://tree.taiga.io/project/penpot/issue/3211)

154
frontend/src/app/main/ui/viewer/interactions.cljs
View file

@ -406,101 +406,103 @@
(defn animate-open-overlay (defn animate-open-overlay
[animation overlay-viewport [animation overlay-viewport
wrapper-size overlay-size overlay-position] wrapper-size overlay-size overlay-position]
(case (:animation-type animation) (when (some? overlay-viewport)
(case (:animation-type animation)
:dissolve :dissolve
(dom/animate! overlay-viewport
[#js {:opacity "0"}
#js {:opacity "100"}]
#js {:duration (:duration animation)
:easing (name (:easing animation))}
#(st/emit! (dv/complete-animation)))
:slide
(case (:direction animation) ;; way and offset-effect are ignored
:right
(dom/animate! overlay-viewport (dom/animate! overlay-viewport
[#js {:left (str "-" (:width overlay-size) "px")} [#js {:opacity "0"}
#js {:left (str (:x overlay-position) "px")}] #js {:opacity "100"}]
#js {:duration (:duration animation) #js {:duration (:duration animation)
:easing (name (:easing animation))} :easing (name (:easing animation))}
#(st/emit! (dv/complete-animation))) #(st/emit! (dv/complete-animation)))
:left :slide
(dom/animate! overlay-viewport (case (:direction animation) ;; way and offset-effect are ignored
[#js {:left (str (:width wrapper-size) "px")}
#js {:left (str (:x overlay-position) "px")}]
#js {:duration (:duration animation)
:easing (name (:easing animation))}
#(st/emit! (dv/complete-animation)))
:up :right
(dom/animate! overlay-viewport (dom/animate! overlay-viewport
[#js {:top (str (:height wrapper-size) "px")} [#js {:left (str "-" (:width overlay-size) "px")}
#js {:top (str (:y overlay-position) "px")}] #js {:left (str (:x overlay-position) "px")}]
#js {:duration (:duration animation) #js {:duration (:duration animation)
:easing (name (:easing animation))} :easing (name (:easing animation))}
#(st/emit! (dv/complete-animation))) #(st/emit! (dv/complete-animation)))
:down :left
(dom/animate! overlay-viewport (dom/animate! overlay-viewport
[#js {:top (str "-" (:height overlay-size) "px")} [#js {:left (str (:width wrapper-size) "px")}
#js {:top (str (:y overlay-position) "px")}] #js {:left (str (:x overlay-position) "px")}]
#js {:duration (:duration animation) #js {:duration (:duration animation)
:easing (name (:easing animation))} :easing (name (:easing animation))}
#(st/emit! (dv/complete-animation)))))) #(st/emit! (dv/complete-animation)))
:up
(dom/animate! overlay-viewport
[#js {:top (str (:height wrapper-size) "px")}
#js {:top (str (:y overlay-position) "px")}]
#js {:duration (:duration animation)
:easing (name (:easing animation))}
#(st/emit! (dv/complete-animation)))
:down
(dom/animate! overlay-viewport
[#js {:top (str "-" (:height overlay-size) "px")}
#js {:top (str (:y overlay-position) "px")}]
#js {:duration (:duration animation)
:easing (name (:easing animation))}
#(st/emit! (dv/complete-animation)))))))
(defn animate-close-overlay (defn animate-close-overlay
[animation overlay-viewport [animation overlay-viewport
wrapper-size overlay-size overlay-position overlay-id] wrapper-size overlay-size overlay-position overlay-id]
(case (:animation-type animation) (when (some? overlay-viewport)
(case (:animation-type animation)
:dissolve :dissolve
(dom/animate! overlay-viewport
[#js {:opacity "100"}
#js {:opacity "0"}]
#js {:duration (:duration animation)
:easing (name (:easing animation))}
#(st/emit! (dv/complete-animation)
(dv/close-overlay overlay-id)))
:slide
(case (:direction animation) ;; way and offset-effect are ignored
:right
(dom/animate! overlay-viewport (dom/animate! overlay-viewport
[#js {:left (str (:x overlay-position) "px")} [#js {:opacity "100"}
#js {:left (str (:width wrapper-size) "px")}] #js {:opacity "0"}]
#js {:duration (:duration animation) #js {:duration (:duration animation)
:easing (name (:easing animation))} :easing (name (:easing animation))}
#(st/emit! (dv/complete-animation) #(st/emit! (dv/complete-animation)
(dv/close-overlay overlay-id))) (dv/close-overlay overlay-id)))
:left :slide
(dom/animate! overlay-viewport (case (:direction animation) ;; way and offset-effect are ignored
[#js {:left (str (:x overlay-position) "px")}
#js {:left (str "-" (:width overlay-size) "px")}]
#js {:duration (:duration animation)
:easing (name (:easing animation))}
#(st/emit! (dv/complete-animation)
(dv/close-overlay overlay-id)))
:up :right
(dom/animate! overlay-viewport (dom/animate! overlay-viewport
[#js {:top (str (:y overlay-position) "px")} [#js {:left (str (:x overlay-position) "px")}
#js {:top (str "-" (:height overlay-size) "px")}] #js {:left (str (:width wrapper-size) "px")}]
#js {:duration (:duration animation) #js {:duration (:duration animation)
:easing (name (:easing animation))} :easing (name (:easing animation))}
#(st/emit! (dv/complete-animation) #(st/emit! (dv/complete-animation)
(dv/close-overlay overlay-id))) (dv/close-overlay overlay-id)))
:down :left
(dom/animate! overlay-viewport (dom/animate! overlay-viewport
[#js {:top (str (:y overlay-position) "px")} [#js {:left (str (:x overlay-position) "px")}
#js {:top (str (:height wrapper-size) "px")}] #js {:left (str "-" (:width overlay-size) "px")}]
#js {:duration (:duration animation) #js {:duration (:duration animation)
:easing (name (:easing animation))} :easing (name (:easing animation))}
#(st/emit! (dv/complete-animation) #(st/emit! (dv/complete-animation)
(dv/close-overlay overlay-id)))))) (dv/close-overlay overlay-id)))
:up
(dom/animate! overlay-viewport
[#js {:top (str (:y overlay-position) "px")}
#js {:top (str "-" (:height overlay-size) "px")}]
#js {:duration (:duration animation)
:easing (name (:easing animation))}
#(st/emit! (dv/complete-animation)
(dv/close-overlay overlay-id)))
:down
(dom/animate! overlay-viewport
[#js {:top (str (:y overlay-position) "px")}
#js {:top (str (:height wrapper-size) "px")}]
#js {:duration (:duration animation)
:easing (name (:easing animation))}
#(st/emit! (dv/complete-animation)
(dv/close-overlay overlay-id)))))))