From 71524bf7dab82bd960413805dc4bd7e89dada000 Mon Sep 17 00:00:00 2001
From: Sanne de Vries <sannedv@protonmail.com>
Date: Tue, 18 Apr 2023 12:10:51 +0100
Subject: [PATCH] Updated post history modal to resemble editor

No ref
---
 .../app/components/modal-post-history.hbs     | 83 +++++++++++++++----
 .../admin/app/styles/layouts/post-history.css | 40 ++++-----
 2 files changed, 82 insertions(+), 41 deletions(-)

diff --git a/ghost/admin/app/components/modal-post-history.hbs b/ghost/admin/app/components/modal-post-history.hbs
index 7d880fda24..99b4d7b6a4 100644
--- a/ghost/admin/app/components/modal-post-history.hbs
+++ b/ghost/admin/app/components/modal-post-history.hbs
@@ -1,24 +1,71 @@
 {{!-- template-lint-disable no-invalid-interactive --}}
 <div class="gh-post-history">
-    <div class="modal-fullsettings-sidebar-labs">
-        <div class="modal-fullsettings-sidebar-header">
-            <h2 class="modal-fullsettings-heading-labs">Post history</h2>
-            <button
-                type="button" {{action "closeModal"}}
-                class="gh-btn-icon"
-                {{!-- disable mouseDown so it doesn't trigger focus-out validations --}}
-                {{on "mousedown" (optional this.noop)}}
-            >
-                        {{svg-jar "close"}}
-            </button>
-        </div>
-        {{!-- {{#each this.post.post_revisions as |revision|}}
-            <div>{{revision.lexical}}</div>
-        {{/each}} --}}
-    </div>
     <div class="gh-post-history-main">
-          <div>
-              {{{this.postDiff}}}
+          <div class="gh-koenig-editor-pane flex flex-column mih-100">
+            <div class="gh-editor-feature-image-container">
+                <div class="gh-editor-feature-image-dropzone"></div>
+                <div class="flex flex-row items-center invisible">
+                    <button type="button" class="gh-editor-feature-image-add-button">{{svg-jar "plus"}}<span>Add feature image</span></button>
+                    <button type="button" class="gh-editor-feature-image-unsplash">{{svg-jar "unsplash"}}</button>
+                </div>
+            </div>
+            <div class="gh-editor-title ember-text-area gh-input ember-view">Old-school excess, star power and spectacle: Royal Opera’s Tosca reviewed</div>
+            {{{this.postDiff}}}
           </div>
     </div>
+    <div class="settings-menu-container">
+        <div class="settings-menu settings-menu-pane settings-menu-pane-main">
+            <div class="settings-menu-header subview">
+                <button 
+                    aria-label="Close meta data panel" 
+                    class="back settings-menu-header-action" 
+                    data-test-button="close-psm-subview" 
+                    type="button" {{action "closeModal"}}
+                    {{!-- disable mouseDown so it doesn't trigger focus-out validations --}}
+                    {{on "mousedown" (optional this.noop)}}
+                >   
+                    {{svg-jar "arrow-left"}}
+                    <span class="hidden">Back</span>
+                </button>
+                <h4>Post history</h4>
+            </div>
+            <div class="settings-menu-content">
+                <ul class="nav-list">
+                    <li class="nav-list-item">
+                        <button type="button">
+                            <span class="gh-post-history-version">17 April 2023, 10:34</span>
+                            <span class="gh-post-history-version-meta">Jamie Larson</span>
+                        </button>
+                    </li>
+                    <li class="nav-list-item">
+                        <button type="button">
+                            <span class="gh-post-history-version">17 April 2023, 10:34</span>
+                            <span class="gh-post-history-version-meta">Jamie Larson</span>
+                        </button>
+                    </li>
+                    <li class="nav-list-item">
+                        <button type="button">
+                            <span class="gh-post-history-version">17 April 2023, 10:34</span>
+                            <span class="gh-post-history-version-meta">Jamie Larson</span>
+                        </button>
+                    </li>
+                    <li class="nav-list-item">
+                        <button type="button">
+                            <span class="gh-post-history-version">17 April 2023, 10:34</span>
+                            <span class="gh-post-history-version-meta">Jamie Larson</span>
+                        </button>
+                    </li>
+                    <li class="nav-list-item">
+                        <button type="button">
+                            <span class="gh-post-history-version">17 April 2023, 10:34</span>
+                            <span class="gh-post-history-version-meta">Jamie Larson</span>
+                        </button>
+                    </li>
+                </ul>
+            </div>
+            {{!-- {{#each this.post.post_revisions as |revision|}}
+                <div>{{revision.lexical}}</div>
+            {{/each}} --}}
+        </div>
+    </div>
 </div>
diff --git a/ghost/admin/app/styles/layouts/post-history.css b/ghost/admin/app/styles/layouts/post-history.css
index a3247e5eae..51f8ee5ee1 100644
--- a/ghost/admin/app/styles/layouts/post-history.css
+++ b/ghost/admin/app/styles/layouts/post-history.css
@@ -1,3 +1,5 @@
+/* Modal */
+
 .gh-post-history {
     display: flex;
     height: 100%;
@@ -7,35 +9,27 @@
     padding: 0;
 }
 
-.gh-post-history .modal-fullsettings-sidebar-labs {
-    height: 100%;
-    border-right: 1px solid var(--whitegrey-d1);
+/* Sidebar */
+
+.nav-list-item .gh-post-history-version-meta {
+    color: var(--midgrey);
+    font-weight: 400;
 }
 
-.modal-fullsettings-sidebar-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 3.2rem;
-    border-bottom: 1px solid var(--whitegrey-d1);
-}
-
-.modal-fullsettings-sidebar-header h2 {
-    margin: 0;
-    padding: 0;
-    font-size: 1.75rem;
-    line-height: 1.375;
-    font-weight: 600;
-}
-
-.modal-fullsettings-sidebar-header .gh-btn-icon svg {
-    margin: 0;
-}
+/* Main content */
 
 .gh-post-history-main {
+    position: relative;
     width: 100%;
+    height: 100vh;
+    overflow: auto;
+}
+
+.gh-post-history .gh-editor-title {
+    height: initial;
     max-width: 740px;
-    margin: 16rem auto 0;
+    margin-left: auto;
+    margin-right: auto;
 }
 
 .gh-post-history-main .koenig-lexical del {