mirror of
https://github.com/penpot/penpot.git
synced 2025-01-22 14:39:45 -05:00
🐛 Fix mouse leave in handoff close overlay animation breaks
This commit is contained in:
Pablo Alba
Andrés Moya
parent
d18c96360f
commit
658e3b7aee
2 changed files with 79 additions and 76 deletions
|
|
@ -46,6 +46,7 @@
|
|||
### :bug: Bugs fixed
|
||||
|
||||
- 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 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)
|
||||
|
|
|
|||
|
|
@ -406,101 +406,103 @@
|
|||
(defn animate-open-overlay
|
||||
[animation overlay-viewport
|
||||
wrapper-size overlay-size overlay-position]
|
||||
(case (:animation-type animation)
|
||||
(when (some? overlay-viewport)
|
||||
(case (:animation-type animation)
|
||||
|
||||
: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
|
||||
:dissolve
|
||||
(dom/animate! overlay-viewport
|
||||
[#js {:left (str "-" (:width overlay-size) "px")}
|
||||
#js {:left (str (:x overlay-position) "px")}]
|
||||
[#js {:opacity "0"}
|
||||
#js {:opacity "100"}]
|
||||
#js {:duration (:duration animation)
|
||||
:easing (name (:easing animation))}
|
||||
#(st/emit! (dv/complete-animation)))
|
||||
|
||||
:left
|
||||
(dom/animate! overlay-viewport
|
||||
[#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)))
|
||||
:slide
|
||||
(case (:direction animation) ;; way and offset-effect are ignored
|
||||
|
||||
: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)))
|
||||
:right
|
||||
(dom/animate! overlay-viewport
|
||||
[#js {:left (str "-" (:width overlay-size) "px")}
|
||||
#js {:left (str (:x 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))))))
|
||||
:left
|
||||
(dom/animate! overlay-viewport
|
||||
[#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
|
||||
(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
|
||||
[animation overlay-viewport
|
||||
wrapper-size overlay-size overlay-position overlay-id]
|
||||
(case (:animation-type animation)
|
||||
(when (some? overlay-viewport)
|
||||
(case (:animation-type animation)
|
||||
|
||||
: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
|
||||
:dissolve
|
||||
(dom/animate! overlay-viewport
|
||||
[#js {:left (str (:x overlay-position) "px")}
|
||||
#js {:left (str (:width wrapper-size) "px")}]
|
||||
[#js {:opacity "100"}
|
||||
#js {:opacity "0"}]
|
||||
#js {:duration (:duration animation)
|
||||
:easing (name (:easing animation))}
|
||||
#(st/emit! (dv/complete-animation)
|
||||
(dv/close-overlay overlay-id)))
|
||||
|
||||
:left
|
||||
(dom/animate! overlay-viewport
|
||||
[#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)))
|
||||
:slide
|
||||
(case (:direction animation) ;; way and offset-effect are ignored
|
||||
|
||||
: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)))
|
||||
:right
|
||||
(dom/animate! overlay-viewport
|
||||
[#js {:left (str (:x overlay-position) "px")}
|
||||
#js {:left (str (:width wrapper-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))))))
|
||||
:left
|
||||
(dom/animate! overlay-viewport
|
||||
[#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
|
||||
(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)))))))
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue