Added post history modal layout

No ref

ghost/admin/app/components/modal-post-history.hbs

@@ -1,18 +1,19 @@
 {{!-- template-lint-disable no-invalid-interactive --}}
-<div class="modal-body gh-ps-modal-body modal-fullsettings modal-fullsettings-body ">
-    <div class="flex pa0 flex-grow-1 gh-post-history">
-        <div class=" modal-fullsettings-sidebar-labs">
-            <h2 class="modal-fullsettings-heading-labs">Post History</h2>
+<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
-                class="gh-btn mr3" type="button" {{action "closeModal"}}
+                type="button" {{action "closeModal"}}
+                class="gh-btn-icon"
                 {{!-- disable mouseDown so it doesn't trigger focus-out validations --}}
                 {{on "mousedown" (optional this.noop)}}
             >
-                        <span>Exit</span>
+                        {{svg-jar "close"}}
             </button>
         </div>
-        <div class="gh-post-history-main">
+    </div>
+    <div class="gh-post-history-main">
 
-        </div>
     </div>
 </div>

ghost/admin/app/styles/app-dark.css

@@ -66,6 +66,7 @@
 @import "layouts/preview-email.css";
 @import "layouts/portal-settings.css";
 @import "layouts/billing.css";
+@import "layouts/post-history.css";
 @import "layouts/post-preview.css";
 @import "layouts/dashboard.css";
 @import "layouts/tiers.css";

ghost/admin/app/styles/app.css

@@ -67,6 +67,7 @@
 @import "layouts/preview-email.css";
 @import "layouts/portal-settings.css";
 @import "layouts/billing.css";
+@import "layouts/post-history.css";
 @import "layouts/post-preview.css";
 @import "layouts/dashboard.css";
 @import "layouts/tiers.css";

ghost/admin/app/styles/components/modals.css

@@ -77,6 +77,7 @@
 
 .fullscreen-modal-total-overlay {
     width: 100vw;
+    max-width: unset;
     height: 100vh;
     margin: 0;
     padding: 0;

ghost/admin/app/styles/layouts/editor.css

@@ -632,6 +632,12 @@ body[data-user-is-dragging] .gh-editor-feature-image-dropzone {
     position: relative;
 }
 
+.gh-editor-post-status svg {
+    width: 18px;
+    height: 18px;
+    margin-left: 1rem;
+}
+
 @media (max-width: 720px) {
     .gh-editor-post-status .newsletter-failed {
         display: none;

ghost/admin/app/styles/layouts/post-history.css

@@ -0,0 +1,32 @@
+.gh-post-history {
+    height: 100%;
+}
+
+.fullscreen-modal-post-history .modal-content {
+    padding: 0;
+}
+
+.gh-post-history .modal-fullsettings-sidebar-labs {
+    height: 100%;
+    border-right: 1px solid var(--whitegrey-d1);
+}
+
+.modal-fullsettings-sidebar-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 32px;
+    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;
+}

ghost/admin/app/templates/lexical-editor.hbs

@@ -43,6 +43,11 @@
                                         @openUpdateFlow={{publishManagement.openUpdateFlow}}
                                     />
                                 </span>
+                                {{#if (feature 'postHistory')}}
+                                    <button type="button" {{on "click" this.openPostHistory}} data-test-toggle="post-history" class="gh-btn-text">
+                                        {{svg-jar "history"}}
+                                    </button>
+                                {{/if}}
                             </div>
                         {{/if}}
                     </div>
@@ -50,13 +55,6 @@
                     <section class="flex items-center pe-auto h-100">
                         {{#unless this.post.isNew}}
                             <Editor::PublishButtons @publishManagement={{publishManagement}} />
-
-                            {{#if (feature 'postHistory')}}
-                                <button type="button" {{on "click" this.openPostHistory}} data-test-toggle="post-history">
-                                    {{svg-jar "clock" class="w4 ml3"}}
-                                </button>
-                            {{/if}}
-
                             {{#unless this.showSettingsMenu}}
                                 <div class="settings-menu-toggle-spacer"></div>
                             {{/unless}}
@@ -138,7 +136,7 @@
             <GhFullscreenModal
                 @modal="post-history"
                 @close={{this.closePostHistory}}
-                @modifier="full-overlay post-history" />
+                @modifier="total-overlay post-history" />
         {{/if}}
     {{/if}}
 {{/if}}

ghost/admin/public/assets/icons/history.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" stroke-width="1.5" viewBox="0 0 24 24">
+    <title>history</title>
+    <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M6.169 5.667A9.5 9.5 0 1 1 3.75 12v-1"/>
+    <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m6.25 14-2.5-3-2.5 3m12-6.5v5h3.5"/>
+</svg>