From 2c9998be6944c6b58c6381c939a4e1459e2ccc7a Mon Sep 17 00:00:00 2001
From: Sanne de Vries <sannedv@protonmail.com>
Date: Thu, 19 May 2022 14:13:12 +0200
Subject: [PATCH] Added animation to post preview modes and publish button

No ref
---
 .../editor-labs/modals/preview/browser.hbs    |  2 +-
 .../editor-labs/modals/preview/email.hbs      |  2 +-
 .../editor-labs/modals/preview/mobile.hbs     |  2 +-
 .../editor-labs/modals/preview/social.hbs     |  3 +-
 .../app/styles/components/browser-preview.css |  9 ----
 .../app/styles/components/publishmenu.css     | 14 ++++++
 .../admin/app/styles/layouts/post-preview.css | 47 ++++++++++++-------
 7 files changed, 49 insertions(+), 30 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 f881b042a2..69836caa9e 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 {{unless @skipAnimation "fade-in"}}">
+<div class="gh-post-preview-container gh-post-preview-browser-container {{unless @skipAnimation "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/preview/email.hbs b/ghost/admin/app/components/editor-labs/modals/preview/email.hbs
index 2a7395d23d..353d366580 100644
--- a/ghost/admin/app/components/editor-labs/modals/preview/email.hbs
+++ b/ghost/admin/app/components/editor-labs/modals/preview/email.hbs
@@ -1,4 +1,4 @@
-<div class="gh-post-preview-email-container">
+<div class="gh-post-preview-container gh-post-preview-email-container {{unless @skipAnimation "fade-in"}}">
     <div class="gh-post-preview-email-mockup">
         <div class="gh-pe-emailclient-sender">
             <p>
diff --git a/ghost/admin/app/components/editor-labs/modals/preview/mobile.hbs b/ghost/admin/app/components/editor-labs/modals/preview/mobile.hbs
index e0cddcacb6..7fe3c179ef 100644
--- a/ghost/admin/app/components/editor-labs/modals/preview/mobile.hbs
+++ b/ghost/admin/app/components/editor-labs/modals/preview/mobile.hbs
@@ -1,4 +1,4 @@
-<div class="modal-body modal-preview-email-content gh-pe-mobile-container h-auto overflow-auto">
+<div class="modal-body modal-preview-email-content gh-pe-mobile-container gh-post-preview-container h-auto overflow-auto {{unless @skipAnimation "fade-in"}}">
     <div class="gh-pe-mobile-bezel">
         <div class="gh-pe-mobile-screen">
             <iframe class="gh-post-preview-iframe" src={{@post.previewUrl}}></iframe>
diff --git a/ghost/admin/app/components/editor-labs/modals/preview/social.hbs b/ghost/admin/app/components/editor-labs/modals/preview/social.hbs
index 801703c20f..8c697d24fc 100644
--- a/ghost/admin/app/components/editor-labs/modals/preview/social.hbs
+++ b/ghost/admin/app/components/editor-labs/modals/preview/social.hbs
@@ -1,5 +1,4 @@
-
-<div class="gh-post-preview-social-container">
+<div class="gh-post-preview-container gh-post-preview-social-container {{unless @skipAnimation "fade-in"}}">
     <p class="mb8 fw5">This is how your content will look when shared, you can click on any elements you’d like to edit.</p>
     <div class="flex flex-column">
         <div class="flex gh-social-container-responsive">
diff --git a/ghost/admin/app/styles/components/browser-preview.css b/ghost/admin/app/styles/components/browser-preview.css
index 855cee8662..56c1db7158 100644
--- a/ghost/admin/app/styles/components/browser-preview.css
+++ b/ghost/admin/app/styles/components/browser-preview.css
@@ -15,15 +15,6 @@
     opacity: 1;
 }
 
-.gh-browserpreview-previewcontainer.fade-in {
-    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;
     position: relative;
diff --git a/ghost/admin/app/styles/components/publishmenu.css b/ghost/admin/app/styles/components/publishmenu.css
index 67ff1f7608..38bfb2c361 100644
--- a/ghost/admin/app/styles/components/publishmenu.css
+++ b/ghost/admin/app/styles/components/publishmenu.css
@@ -670,6 +670,20 @@
     display: none;
 }
 
+.gh-publish-cta .gh-btn-green {
+    animation: pulse-click 1s;
+}
+
+@keyframes pulse-click {
+	0% {
+		box-shadow: 0 0 0 0 rgba(48, 207, 67, 0.7);
+	}
+
+	100% {
+		box-shadow: 0 0 0 16px rgba(48, 207, 67, 0);
+	}
+}
+
 .gh-publish-cta-secondary {
     display: block;
     overflow: hidden;
diff --git a/ghost/admin/app/styles/layouts/post-preview.css b/ghost/admin/app/styles/layouts/post-preview.css
index cc83e23b9b..0a89b54547 100644
--- a/ghost/admin/app/styles/layouts/post-preview.css
+++ b/ghost/admin/app/styles/layouts/post-preview.css
@@ -80,33 +80,48 @@
     stroke: var(--darkgrey);
 }
 
+/* Preview animation */
+
+.gh-post-preview-container {
+    opacity: 1;
+}
+
+.gh-post-preview-container.fade-in {
+    transform-origin: center;
+    animation: fade-in-pulse .35s forwards cubic-bezier(.8,.02,.45,.91);
+}
+.epm-out .gh-post-preview-container.fade-in {
+    transform-origin: center;
+    animation: fade-out-pulse .35s forwards cubic-bezier(.8,.02,.45,.91);
+}
+
+
 /* Browser preview */
+
 .gh-post-preview-browser-container {
-    position: relative;
     display: flex;
-    flex-grow: 1;
-    overflow: auto;
-    margin: 0;
-    background: var(--whitegrey-l1);
-}
-
-.gh-post-preview-browser-container iframe {
-    width: 100%;
-    /* height: 100%; */
-    border: none;
-}
-
-.gh-post-preview-browser {
+    flex-direction: column;
+    height: 100%;
     margin: 0 40px 40px;
+    border-radius: 3px !important;
+    box-shadow:
+        0 0 0 1px rgba(0,0,0,0.02),
+        0 2.8px 2.2px rgba(0, 0, 0, 0.02),
+        0 6.7px 5.3px rgba(0, 0, 0, 0.028),
+        0 12.5px 10px rgba(0, 0, 0, 0.035),
+        0 22.3px 17.9px rgba(0, 0, 0, 0.042),
+        0 41.8px 33.4px rgba(0, 0, 0, 0.05),
+        0 100px 80px rgba(0, 0, 0, 0.07);
+    ;
 }
 
-.gh-post-preview-browser .gh-pe-iframe {
+.gh-post-preview-browser-container .gh-pe-iframe {
     width: 100%;
     height: 100%;
     border: none;
 }
 
-.gh-post-preview-browser .tabs div {
+.gh-post-preview-browser-container .tabs div {
     width: 360px;
     color: var(--middarkgrey);
     font-weight: 400;