From 6e20d7704e281fdfe608ce42661a7951723a17ee Mon Sep 17 00:00:00 2001
From: Sanne de Vries <sannedv@protonmail.com>
Date: Wed, 19 Apr 2023 13:07:51 +0100
Subject: [PATCH] Updated post settings menu

No ref
---
 .../app/components/gh-post-settings-menu.hbs  | 75 ++++++++++---------
 .../app/components/modal-post-history.hbs     | 44 +++++++----
 .../app/styles/components/settings-menu.css   | 55 ++++++++++----
 .../admin/app/styles/layouts/post-history.css | 60 ++++++++++++++-
 ghost/admin/app/styles/patterns/buttons.css   |  4 +
 ghost/admin/app/styles/patterns/forms.css     |  4 +
 ghost/admin/app/styles/patterns/navlist.css   | 12 ++-
 7 files changed, 183 insertions(+), 71 deletions(-)

diff --git a/ghost/admin/app/components/gh-post-settings-menu.hbs b/ghost/admin/app/components/gh-post-settings-menu.hbs
index 7d41544bdd..deeb6935f0 100644
--- a/ghost/admin/app/components/gh-post-settings-menu.hbs
+++ b/ghost/admin/app/components/gh-post-settings-menu.hbs
@@ -110,7 +110,7 @@
                         </GhFormGroup>
 
                         {{#unless this.session.user.isAuthorOrContributor}}
-                            <GhFormGroup class="for-select" @errors={{this.post.errors}} @hasValidated={{this.post.hasValidated}} @property="authors" data-test-input="authors">
+                            <GhFormGroup class="for-select mb8" @errors={{this.post.errors}} @hasValidated={{this.post.hasValidated}} @property="authors" data-test-input="authors">
                                 <label for="author-list">Authors</label>
                                 <GhPsmAuthorsInput @selectedAuthors={{this.post.authors}} @updateAuthors={{action "changeAuthors"}} @triggerId="author-list" />
                                 <GhErrorMessage @errors={{this.post.errors}} @property="authors" data-test-error="authors" />
@@ -120,42 +120,42 @@
                         <GhPsmTemplateSelect
                             @post={{this.post}}
                             @onTemplateSelect={{action (mut this.post.customTemplate)}} />
-
-                        <div class="settings-menu-post-actions">
-                            {{#unless this.session.user.isAuthorOrContributor}}
-                                <div class="form-group for-checkbox">
-                                    <label class="checkbox" for="featured" {{action "toggleFeatured" bubbles="false"}}>
-                                        <input
-                                            type="checkbox"
-                                            checked={{this.post.featured}}
-                                            class="gh-input post-settings-featured"
-                                            onclick={{action (mut this.post.featured) value="target.checked"}}
-                                            data-test-checkbox="featured"
-                                        >
-                                        <span class="input-toggle-component"></span>
-                                        <p>Feature this {{this.post.displayName}}</p>
-                                    </label>
-                                </div>
-                            {{/unless}}
-
-                            {{#unless this.post.isNew}}
-                                <button type="button" class="settings-menu-delete-button" {{action "deletePostInternal"}}>
-                                    <span>{{svg-jar "trash"}} Delete {{this.post.displayName}}</span>
-                                </button>
-                            {{/unless}}
-                        </div>
                     </section>
 
                     <ul class="nav-list">
-                        {{#if (feature 'postHistory')}}
-                            {{#if this.post.lexical}}
-                                <li class="nav-list-item">
-                                    <button type="button" {{on "click" this.openPostHistory}} data-test-toggle="post-history">
-                                        <span>{{svg-jar "history" class="history"}} Post history</span>
-                                    </button>
-                                    {{svg-jar "arrow-right" class="arrow-right"}}
-                                </li>
-                            {{/if}}
+                        {{#unless this.session.user.isAuthorOrContributor}}
+                            <li class="nav-list-item">
+                                <div class="for-switch x-small">
+                                    <label class="switch" for="featured" {{action "toggleFeatured" bubbles="false"}}>
+                                        <span>
+                                            {{#if this.post.featured}}
+                                                {{svg-jar "star-fill" class="feature"}}
+                                            {{else}}
+                                                {{svg-jar "star" class="feature"}}
+                                            {{/if}}
+                                            Feature this {{this.post.displayName}}
+                                        </span>
+                                        <span class="gh-toggle-featured">
+                                            <input
+                                                type="checkbox"
+                                                checked={{this.post.featured}}
+                                                class="gh-input post-settings-featured"
+                                                onclick={{action (mut this.post.featured) value="target.checked"}}
+                                                data-test-checkbox="featured"
+                                            >
+                                            <span class="input-toggle-component"></span>
+                                        </span>
+                                    </label>
+                                </div>
+                            </li>
+                        {{/unless}}
+                        {{#if (and (feature 'postHistory') this.post.lexical)}}
+                            <li class="nav-list-item">
+                                <button type="button" {{on "click" this.openPostHistory}} data-test-toggle="post-history">
+                                    <span>{{svg-jar "history" class="history"}} Post history</span>
+                                </button>
+                                {{svg-jar "arrow-right" class="arrow-right"}}
+                            </li>
                         {{/if}}
                         <li class="nav-list-item">
                             <button type="button" {{action "showSubview" "codeinjection"}} data-test-button="codeinjection">
@@ -183,6 +183,13 @@
                         </li>
                     </ul>
                 </form>
+                {{#unless this.post.isNew}}
+                    <div class="settings-menu-delete-button">
+                        <button type="button" class="gh-btn gh-btn-outline gh-btn-icon gh-btn-fullwidth" {{action "deletePostInternal"}}>
+                            <span>{{svg-jar "trash"}} Delete {{this.post.displayName}}</span>
+                        </button>
+                    </div>
+                {{/unless}}
             </div>{{! .settings-menu-content }}
         </div>{{! .post-settings-menu }}
 
diff --git a/ghost/admin/app/components/modal-post-history.hbs b/ghost/admin/app/components/modal-post-history.hbs
index a192b79186..61326dbf3d 100644
--- a/ghost/admin/app/components/modal-post-history.hbs
+++ b/ghost/admin/app/components/modal-post-history.hbs
@@ -1,18 +1,29 @@
 {{!-- template-lint-disable no-invalid-interactive --}}
 <div class="gh-post-history">
+    {{!-- <div class="read-only-banner">
+        <span>You are viewing a revision from <strong>17 April 2023, 10:34</strong>.</span>
+        <a href="#">Roll back to this version &rarr;</a>
+    </div> --}}
     <div class="gh-post-history-main">
-        {{#if this.diffHtml}}
-            {{{this.diffHtml}}}
-        {{else}}
-            Loading...
-        {{/if}}
-        <div class="gh-post-history-hidden-lexical previous">
-            <div class="gh-editor-title">{{this.previousTitle}}</div>
-            <KoenigLexicalEditor @lexical={{this.previousLexical}} @cardConfig={{this.cardConfig}} />
-        </div>
-        <div class="gh-post-history-hidden-lexical current">
-            <div class="gh-editor-title">{{this.currentTitle}}</div>
-            <KoenigLexicalEditor @lexical={{this.currentLexical}} @cardConfig={{this.cardConfig}}/>
+        <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>
+            {{#if this.diffHtml}}
+                {{{this.diffHtml}}}
+            {{/if}}
+            <div class="gh-post-history-hidden-lexical previous">
+                <div class="gh-editor-title">{{this.previousTitle}}</div>
+                <KoenigLexicalEditor @lexical={{this.previousLexical}} @cardConfig={{this.cardConfig}} />
+            </div>
+            <div class="gh-post-history-hidden-lexical current">
+                <div class="gh-editor-title">{{this.currentTitle}}</div>
+                <KoenigLexicalEditor @lexical={{this.currentLexical}} @cardConfig={{this.cardConfig}}/>
+            </div>
         </div>
     </div>
     <div class="settings-menu-container">
@@ -36,11 +47,14 @@
                     <li class="nav-list-item">
                         <button type="button">
                             <div class="flex items-center">
-                                <span class="gh-post-history-version">{{moment-from-now revision.createdAt}}</span>
-                                <span class="gh-post-history-version-wordcount">
+                                <span class="gh-post-history-version">{{capitalize-first-letter (moment-from-now revision.createdAt)}}</span>
+                                {{!-- <span class="gh-post-history-version-wordcount">
                                     <span class="added">+275</span>
                                     <span class="subtracted">-73</span>
-                                </span>
+                                </span> --}}
+                                {{!-- <button class="gh-btn gh-btn-text gh-post-history-version-restore">
+                                    <span>Restore</span>
+                                </button> --}}
                             </div>                           
                             <span class="gh-post-history-version-meta">{{revision.author.name}}</span>
                         </button>
diff --git a/ghost/admin/app/styles/components/settings-menu.css b/ghost/admin/app/styles/components/settings-menu.css
index 5ef85dafd7..1dafbc132d 100644
--- a/ghost/admin/app/styles/components/settings-menu.css
+++ b/ghost/admin/app/styles/components/settings-menu.css
@@ -310,32 +310,55 @@
     font-weight: 500;
 }
 
+li.nav-list-item .switch {
+    position: relative;
+    display: flex;
+    justify-content: space-between;
+    width: 100% !important;
+    padding: 2rem 2.4rem;
+}
+
+li.nav-list-item .for-switch.x-small label {
+    width: initial;
+    height: initial !important;
+}
+
+.settings-menu-content .gh-toggle-featured {
+    position: relative;
+    width: 34px;
+    height: 20px;
+}
+
 .settings-menu-delete-button {
-    background: transparent;
-    box-shadow: none;
-    border: none;
+    margin: 3.2rem 2.4rem 2.4rem;
+}
+
+.settings-menu-delete-button button,
+.settings-menu-delete-button button:hover,
+.settings-menu-delete-button button:active,
+.settings-menu-delete-button button:focus {
+    border: 1px solid var(--red);
+}
+
+.settings-menu-delete-button button span {
+    height: 40px;
+    line-height: 40px;
     color: var(--red);
 }
 
-.settings-menu-delete-button:hover {
-    box-shadow: none;
-    background: none;
-    color: color-mod(var(--red) lightness(-10%));
-}
-
-.settings-menu-delete-button span {
-    display: flex;
-    align-items: center;
-    font-size: inherit;
-    padding: 0;
-    font-size: 1.3rem;
-    font-weight: 500;
+.settings-menu-delete-button button:hover span {
+    color: var(--red-d1);
 }
 
 .settings-menu-delete-button svg {
     width: 1.6rem;
     height: 1.6rem;
     margin: 0 .8rem 2px 0;
+    color: var(--red);
+}
+
+.settings-menu-delete-button button:hover svg {
+    color: var(--red-d1);
 }
 
 .post-setting-custom-excerpt {
diff --git a/ghost/admin/app/styles/layouts/post-history.css b/ghost/admin/app/styles/layouts/post-history.css
index b322d52a6a..cf97f339e7 100644
--- a/ghost/admin/app/styles/layouts/post-history.css
+++ b/ghost/admin/app/styles/layouts/post-history.css
@@ -11,6 +11,10 @@
 
 /* Sidebar */
 
+.gh-post-history .nav-list-item.active {
+    background: var(--whitegrey-l2);
+}
+
 .nav-list-item .gh-post-history-version {
     margin-bottom: 2px;
 }
@@ -33,7 +37,7 @@
     border-radius: var(--border-radius);
 }
 
-.nav-list-item .gh-post-history-version-wordcount {
+/* .nav-list-item .gh-post-history-version-wordcount {
     color: var(--green-d1);
     margin-left: auto;
 }
@@ -41,6 +45,17 @@
 .nav-list-item .gh-post-history-version-wordcount .subtracted {
     color: var(--red-d1);
     margin-left: .8rem;
+} */
+
+.nav-list-item .gh-post-history-version-restore {
+    margin-left: auto;
+    padding: 0;
+}
+
+.nav-list-item .gh-post-history-version-restore span {
+    color: var(--red);
+    font-size: 1.35rem;
+    font-weight: 400;
 }
 
 
@@ -53,6 +68,32 @@
     overflow: auto;
 }
 
+/* .gh-post-history .read-only-banner {
+    position: absolute;
+    top: 20px;
+    left: 0;
+    right: 420px;
+    z-index: 999;
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    max-width: 788px;
+    margin: 0 auto;
+    padding: 16px 24px;
+    background: var(--white);
+    border: 1px solid var(--whitegrey-d1);
+    color: var(--black);
+    font-weight: 500;
+    border-radius: var(--border-radius);
+    box-shadow: var(--box-shadow-m);
+}
+
+.gh-post-history .read-only-banner a {
+    margin-left: auto;
+    color: var(--black);
+    text-decoration: underline;
+} */
+
 .gh-post-history .gh-editor-title {
     height: initial;
     max-width: 740px;
@@ -61,12 +102,27 @@
     color: rgba(21, 23, 26, 0.4);
 }
 
+.gh-post-history-main .koenig-lexical h1,
+.gh-post-history-main .koenig-lexical h2,
+.gh-post-history-main .koenig-lexical h3,
+.gh-post-history-main .koenig-lexical h4,
+.gh-post-history-main .koenig-lexical h5,
 .gh-post-history-main .koenig-lexical p {
     color: rgba(21, 23, 26, 0.4);
 }
 
+.gh-post-history-main .koenig-lexical a:not(.gh-post-history-main .koenig-lexical del a):not(.gh-post-history-main .koenig-lexical ins a) {
+    opacity: .4;
+}
+
 .gh-post-history-main .koenig-lexical del {
-    color: var(--red) !important;
+    color: var(--red-d1) !important;
+}
+
+.gh-post-history-main .koenig-lexical ins {
+    color: var(--black) !important;
+    text-decoration: none !important;
+    background-color: rgba(48, 207, 67, 0.15) !important;
 }
 
 .gh-post-history-hidden-lexical {
diff --git a/ghost/admin/app/styles/patterns/buttons.css b/ghost/admin/app/styles/patterns/buttons.css
index 0e1b047481..0eabe23a54 100644
--- a/ghost/admin/app/styles/patterns/buttons.css
+++ b/ghost/admin/app/styles/patterns/buttons.css
@@ -373,6 +373,10 @@ svg.gh-btn-icon-right {
     color: var(--green);
 }
 
+.gh-btn-fullwidth {
+    width: 100%;
+}
+
 
 /*
 /* Button Variations
diff --git a/ghost/admin/app/styles/patterns/forms.css b/ghost/admin/app/styles/patterns/forms.css
index bbae3f0e5f..82e216964b 100644
--- a/ghost/admin/app/styles/patterns/forms.css
+++ b/ghost/admin/app/styles/patterns/forms.css
@@ -132,6 +132,10 @@ input[type=number] {
     margin-bottom: 0;
 }
 
+.form-group.mb8 {
+    margin-bottom: 3.2rem;
+}
+
 @media (max-width: 550px) {
     .form-group {
         max-width: 100%;
diff --git a/ghost/admin/app/styles/patterns/navlist.css b/ghost/admin/app/styles/patterns/navlist.css
index 5aa9ca4b01..a84a4f4b96 100644
--- a/ghost/admin/app/styles/patterns/navlist.css
+++ b/ghost/admin/app/styles/patterns/navlist.css
@@ -42,8 +42,8 @@
 
 li.nav-list-item svg {
     margin: 0 1rem 0 0;
-    height: 1.4rem;
-    width: 1.4rem;
+    height: 1.6rem;
+    width: 1.6rem;
 }
 
 li.nav-list-item svg path:not(li.nav-list-item .history path) {
@@ -51,8 +51,12 @@ li.nav-list-item svg path:not(li.nav-list-item .history path) {
 }
 
 li.nav-list-item .history {
-    width: 1.6rem;
-    height: 1.6rem;
+    width: 1.8rem;
+    height: 1.8rem;
+}
+
+li.nav-list-item.delete {
+    color: var(--red);
 }
 
 li.nav-list-item .arrow-right {