From b03aa5f255b32e87c33ac2d8dc449f50e73e8d57 Mon Sep 17 00:00:00 2001
From: Kevin Ansfield <kevin@lookingsideways.co.uk>
Date: Thu, 19 May 2022 12:19:49 +0100
Subject: [PATCH] Added reverse animation to publish/preview modal contents
 when closing modal

refs https://github.com/TryGhost/Admin/commit/2fb62708a84dd58c13c063012dff2dd0f651c68e

- use modal's own `.epm-out` class that's added when closing to trigger the reverse of the fade-in animation
- added `.publish-modal` class to the three publish modals so we can alter the default modal animations/timing if required
---
 .../components/editor-labs/modals/preview.js  |  2 +-
 .../editor-labs/modals/publish-flow.js        |  2 +-
 .../editor-labs/modals/update-flow.js         |  2 +-
 .../app/styles/components/browser-preview.css |  6 +++-
 .../app/styles/components/publishmenu.css     | 32 +++++++++++++++++--
 5 files changed, 38 insertions(+), 6 deletions(-)

diff --git a/ghost/admin/app/components/editor-labs/modals/preview.js b/ghost/admin/app/components/editor-labs/modals/preview.js
index d94d337cc2..4d2e4bd071 100644
--- a/ghost/admin/app/components/editor-labs/modals/preview.js
+++ b/ghost/admin/app/components/editor-labs/modals/preview.js
@@ -9,7 +9,7 @@ export default class EditorPostPreviewModal extends Component {
     @service session;
 
     static modalOptions = {
-        className: 'fullscreen-modal-total-overlay',
+        className: 'fullscreen-modal-total-overlay publish-modal',
         omitBackdrop: true,
         ignoreBackdropClick: true
     };
diff --git a/ghost/admin/app/components/editor-labs/modals/publish-flow.js b/ghost/admin/app/components/editor-labs/modals/publish-flow.js
index 5b7136bb21..5e72fed6f8 100644
--- a/ghost/admin/app/components/editor-labs/modals/publish-flow.js
+++ b/ghost/admin/app/components/editor-labs/modals/publish-flow.js
@@ -6,7 +6,7 @@ import {tracked} from '@glimmer/tracking';
 
 export default class PublishModalComponent extends Component {
     static modalOptions = {
-        className: 'fullscreen-modal-total-overlay',
+        className: 'fullscreen-modal-total-overlay publish-modal',
         omitBackdrop: true,
         ignoreBackdropClick: true
     };
diff --git a/ghost/admin/app/components/editor-labs/modals/update-flow.js b/ghost/admin/app/components/editor-labs/modals/update-flow.js
index 5a833caf22..b1a1223724 100644
--- a/ghost/admin/app/components/editor-labs/modals/update-flow.js
+++ b/ghost/admin/app/components/editor-labs/modals/update-flow.js
@@ -3,7 +3,7 @@ import {task} from 'ember-concurrency';
 
 export default class UpdateFlowModalComponent extends Component {
     static modalOptions = {
-        className: 'fullscreen-modal-total-overlay',
+        className: 'fullscreen-modal-total-overlay publish-modal',
         omitBackdrop: true,
         ignoreBackdropClick: true
     };
diff --git a/ghost/admin/app/styles/components/browser-preview.css b/ghost/admin/app/styles/components/browser-preview.css
index c40e2162af..855cee8662 100644
--- a/ghost/admin/app/styles/components/browser-preview.css
+++ b/ghost/admin/app/styles/components/browser-preview.css
@@ -19,6 +19,10 @@
     transform-origin: center;
     animation: fade-in-pulse .35s forwards cubic-bezier(.8,.02,.45,.91);
 }
+.epm-out .gh-browserpreview-previewcontainer.fade-in {
+    transform-origin: center;
+    animation: fade-out-pulse .35s forwards cubic-bezier(.8,.02,.45,.91);
+}
 
 .gh-browserpreview-iframecontainer {
     flex-grow: 1;
@@ -95,4 +99,4 @@
 .gh-browserpreview-browser .favicon.default svg {
     width: 16px;
     height: 16px;
-}
\ No newline at end of file
+}
diff --git a/ghost/admin/app/styles/components/publishmenu.css b/ghost/admin/app/styles/components/publishmenu.css
index 0f0ec19384..db49c43b4c 100644
--- a/ghost/admin/app/styles/components/publishmenu.css
+++ b/ghost/admin/app/styles/components/publishmenu.css
@@ -291,6 +291,16 @@
     animation: fade-in-pulse .25s forwards cubic-bezier(.8,.02,.45,.91);
 }
 
+.epm-out .gh-publish-settings-container.fade-in {
+    transform-origin: center;
+    animation: fade-out-pulse .25s forwards cubic-bezier(.8,.02,.45,.91);
+}
+
+/* wait for fade-out-pulse to finish before fading out modal */
+/* .publish-modal.epm-out {
+    animation-delay: .25s;
+} */
+
 @keyframes fade-in-pulse {
     0% {
         opacity:0;
@@ -309,6 +319,24 @@
     }
 }
 
+@keyframes fade-out-pulse {
+    0% {
+        -webkit-transform:scale(1);
+        transform:scale(1)
+    }
+
+    50% {
+        opacity:1
+    }
+
+    100%,
+    70% {
+        opacity:0;
+        -webkit-transform:scale(.85);
+        transform:scale(.85)
+    }
+}
+
 @media (max-width: 1024px) {
     .gh-publish-settings-container {
         padding-top: 10vh;
@@ -741,7 +769,7 @@
     font-weight: 600;
     line-height: 1.4em;line-clamp: 2;
     -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;  
+    -webkit-box-orient: vertical;
     overflow: hidden;
 }
 
@@ -778,4 +806,4 @@
     width: 20px;
     height: 20px;
     margin-right: 6px;
-}
\ No newline at end of file
+}