From 2fb62708a84dd58c13c063012dff2dd0f651c68e Mon Sep 17 00:00:00 2001
From: Sanne de Vries <sannedv@protonmail.com>
Date: Thu, 19 May 2022 11:58:51 +0200
Subject: [PATCH] Added fade-in effect when opening publish and preview modals
 in editor

No ref
---
 .../editor-labs/modals/preview/browser.hbs    |  2 +-
 .../editor-labs/modals/publish-flow.hbs       |  2 +-
 .../editor-labs/modals/update-flow.hbs        |  2 +-
 .../app/styles/components/browser-preview.css |  6 +++++
 .../app/styles/components/publishmenu.css     | 24 +++++++++++++++++++
 5 files changed, 33 insertions(+), 3 deletions(-)

diff --git a/ghost/admin/app/components/editor-labs/modals/preview/browser.hbs b/ghost/admin/app/components/editor-labs/modals/preview/browser.hbs
index 37819a8807..00d8592be3 100644
--- a/ghost/admin/app/components/editor-labs/modals/preview/browser.hbs
+++ b/ghost/admin/app/components/editor-labs/modals/preview/browser.hbs
@@ -1,4 +1,4 @@
-<div class="gh-browserpreview-previewcontainer gh-post-preview-browser">
+<div class="gh-browserpreview-previewcontainer gh-post-preview-browser fade-in">
     <div class="gh-browserpreview-browser">
         <div class="tabs">
             <ul><li></li><li></li><li></li></ul>
diff --git a/ghost/admin/app/components/editor-labs/modals/publish-flow.hbs b/ghost/admin/app/components/editor-labs/modals/publish-flow.hbs
index e7c842e20a..8013d29430 100644
--- a/ghost/admin/app/components/editor-labs/modals/publish-flow.hbs
+++ b/ghost/admin/app/components/editor-labs/modals/publish-flow.hbs
@@ -21,7 +21,7 @@
         {{/if}}
     </header>
 
-    <div class="gh-publish-settings-container">
+    <div class="gh-publish-settings-container fade-in">
         {{#if this.emailErrorMessage}}
             <EditorLabs::Modals::PublishFlow::CompleteWithEmailError
                 @emailErrorMessage={{this.emailErrorMessage}}
diff --git a/ghost/admin/app/components/editor-labs/modals/update-flow.hbs b/ghost/admin/app/components/editor-labs/modals/update-flow.hbs
index f5c7d5228e..4b769abacb 100644
--- a/ghost/admin/app/components/editor-labs/modals/update-flow.hbs
+++ b/ghost/admin/app/components/editor-labs/modals/update-flow.hbs
@@ -12,7 +12,7 @@
     </header>
 
     {{#let @data.publishOptions.post as |post|}}
-        <div class="gh-publish-settings-container gh-update-flow">
+        <div class="gh-publish-settings-container gh-update-flow fade-in">
             <div class="gh-publish-title">
                 {{#if (and post.isSent (not post.isPublished))}}
                     This {{post.displayName}} was
diff --git a/ghost/admin/app/styles/components/browser-preview.css b/ghost/admin/app/styles/components/browser-preview.css
index 3cef158550..c40e2162af 100644
--- a/ghost/admin/app/styles/components/browser-preview.css
+++ b/ghost/admin/app/styles/components/browser-preview.css
@@ -12,6 +12,12 @@
         0 41.8px 33.4px rgba(0, 0, 0, 0.05),
         0 100px 80px rgba(0, 0, 0, 0.07);
     ;
+    opacity: 1;
+}
+
+.gh-browserpreview-previewcontainer.fade-in {
+    transform-origin: center;
+    animation: fade-in-pulse .35s forwards cubic-bezier(.8,.02,.45,.91);
 }
 
 .gh-browserpreview-iframecontainer {
diff --git a/ghost/admin/app/styles/components/publishmenu.css b/ghost/admin/app/styles/components/publishmenu.css
index 7cb5e04ee4..0f0ec19384 100644
--- a/ghost/admin/app/styles/components/publishmenu.css
+++ b/ghost/admin/app/styles/components/publishmenu.css
@@ -283,6 +283,30 @@
     margin: 0 auto 8rem;
     margin-bottom: 11vw;
     padding: 11vw 24px 0;
+    opacity: 1;
+}
+
+.gh-publish-settings-container.fade-in {
+    transform-origin: center;
+    animation: fade-in-pulse .25s forwards cubic-bezier(.8,.02,.45,.91);
+}
+
+@keyframes fade-in-pulse {
+    0% {
+        opacity:0;
+        -webkit-transform:scale(.85);
+        transform:scale(.85)
+    }
+
+    50% {
+        opacity:1
+    }
+
+    100%,
+    70% {
+        -webkit-transform:scale(1);
+        transform:scale(1)
+    }
 }
 
 @media (max-width: 1024px) {