Updated post settings menu

No ref

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,11 +120,22 @@
                         <GhPsmTemplateSelect
                             @post={{this.post}}
                             @onTemplateSelect={{action (mut this.post.customTemplate)}} />
+                    </section>
 
-                        <div class="settings-menu-post-actions">
+                    <ul class="nav-list">
                         {{#unless this.session.user.isAuthorOrContributor}}
-                                <div class="form-group for-checkbox">
+                            <li class="nav-list-item">
-                                    <label class="checkbox" for="featured" {{action "toggleFeatured" bubbles="false"}}>
+                                <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}}
@@ -133,22 +144,12 @@
                                                 data-test-checkbox="featured"
                                             >
                                             <span class="input-toggle-component"></span>
-                                        <p>Feature this {{this.post.displayName}}</p>
+                                        </span>
                                     </label>
                                 </div>
+                            </li>
                         {{/unless}}
-
+                        {{#if (and (feature 'postHistory') this.post.lexical)}}
-                            {{#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>
@@ -156,7 +157,6 @@
                                 {{svg-jar "arrow-right" class="arrow-right"}}
                             </li>
                         {{/if}}
-                        {{/if}}
                         <li class="nav-list-item">
                             <button type="button" {{action "showSubview" "codeinjection"}} data-test-button="codeinjection">
                                 <span>{{svg-jar "brackets"}} Code injection</span>
@@ -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 }}
 

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

@@ -1,10 +1,20 @@
 {{!-- 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">
+        <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}}}
-        {{else}}
-            Loading...
             {{/if}}
             <div class="gh-post-history-hidden-lexical previous">
                 <div class="gh-editor-title">{{this.previousTitle}}</div>
@@ -15,6 +25,7 @@
                 <KoenigLexicalEditor @lexical={{this.currentLexical}} @cardConfig={{this.cardConfig}}/>
             </div>
         </div>
+    </div>
     <div class="settings-menu-container">
         <div class="settings-menu settings-menu-pane settings-menu-pane-main">
             <div class="settings-menu-header subview">
@@ -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">{{capitalize-first-letter (moment-from-now revision.createdAt)}}</span>
-                                <span class="gh-post-history-version-wordcount">
+                                {{!-- <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>

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;
+    margin: 3.2rem 2.4rem 2.4rem;
-    box-shadow: none;
+}
-    border: none;
+
+.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 {
+.settings-menu-delete-button button:hover span {
-    box-shadow: none;
+    color: var(--red-d1);
-    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 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 {

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 {

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

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%;

ghost/admin/app/styles/patterns/navlist.css

@@ -42,8 +42,8 @@
 
 li.nav-list-item svg {
     margin: 0 1rem 0 0;
-    height: 1.4rem;
+    height: 1.6rem;
-    width: 1.4rem;
+    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;
+    width: 1.8rem;
-    height: 1.6rem;
+    height: 1.8rem;
+}
+
+li.nav-list-item.delete {
+    color: var(--red);
 }
 
 li.nav-list-item .arrow-right {