Updated post list context menu

Refs https://github.com/TryGhost/Team/issues/2923

ghost/admin/app/components/posts-list/context-menu.hbs

@@ -3,7 +3,7 @@
     {{#if this.canUnpublishSelection}}
         <li>
             <button class="mr2" type="button" {{on "click" this.unpublishPosts}}>
-                <span>Unpublish</span>
+                <span>{{svg-jar "undo"}}Unpublish</span>
             </button>
         </li>
     {{/if}}
@@ -11,31 +11,31 @@
         {{#if this.shouldFeatureSelection }}
             <li>
                 <button class="mr2" type="button" {{on "click" this.featurePosts}}>
-                    <span>Feature</span>
+                    <span>{{svg-jar "star" class="mb1"}}Feature</span>
                 </button>
             </li>
         {{else}}
                 <li>
                 <button class="mr2" type="button" {{on "click" this.unfeaturePosts}}>
-                    <span>Unfeature</span>
+                    <span>{{svg-jar "star" class="mb1"}}Unfeature</span>
                 </button>
             </li>
         {{/if}}
     {{/if}}
     <li>
         <button class="mr2" type="button" disabled {{on "click" @menu.close}}>
-            <span>Add tag...</span>
+            <span>{{svg-jar "tag"}}Add a tag</span>
         </button>
     </li>
     <li>
         <button class="mr2" type="button" {{on "click" this.editPostsAccess}}>
-            <span>Post access...</span>
+            <span>{{svg-jar "lock"}}Change access</span>
         </button>
     </li>
     {{#if this.session.user.isAdmin}}
         <li>
             <button class="mr2" type="button" {{on "click" this.deletePosts}}>
-                <span>Delete</span>
+                <span class="red">{{svg-jar "trash"}}Delete</span>
             </button>
         </li>
     {{/if}}

ghost/admin/app/components/posts-list/list-item.hbs

@@ -48,7 +48,7 @@
         <LinkTo @route="editor.edit" @models={{array this.post.displayName this.post.id}} class="permalink gh-list-data gh-post-list-title">
             <h3 class="gh-content-entry-title">
                 {{#if @post.featured}}
-                    {{svg-jar "star" class="gh-featured-post"}}
+                    {{svg-jar "star-fill" class="gh-featured-post"}}
                 {{/if}}
                 {{@post.title}}
                 {{#if @post.lexical}}

ghost/admin/app/components/posts-list/modals/delete-posts.hbs

@@ -1,6 +1,6 @@
 <div class="modal-content" data-test-modal="delete-posts">
     <header class="modal-header">
-        <h1>Are you sure you want to delete {{if @data.selectionList.isSingle 'this post' (concat @data.selectionList.count ' posts')}}?</h1>
+        <h1>Are you sure you want to delete {{if @data.selectionList.isSingle 'this post' 'these posts'}}?</h1>
     </header>
     <button type="button" class="close" title="Close" {{on "click" (fn @close false)}} data-test-button="close">{{svg-jar "close"}}<span class="hidden">Close</span></button>
 

ghost/admin/app/components/posts-list/modals/edit-posts-access.hbs

@@ -6,7 +6,6 @@
 
     <div class="modal-body">
         <GhFormGroup @errors={{this.post.errors}} @hasValidated={{this.post.hasValidated}} @property="visibility">
-            <label for="visibility-input">{{capitalize this.post.displayName}} access</label>
             <GhPsmVisibilityInput @post={{this.post}} @triggerId="visibility-input" />
         </GhFormGroup>
 

ghost/admin/app/components/posts-list/modals/unpublish-posts.hbs

@@ -1,12 +1,12 @@
 <div class="modal-content" data-test-modal="unpublish-posts">
     <header class="modal-header">
-        <h1>Are you sure you want to unpublish {{if @data.selectionList.isSingle 'this post' (concat @data.selectionList.count ' posts')}}?</h1>
+        <h1>Are you sure you want to unpublish {{if @data.selectionList.isSingle 'this post' 'these posts'}}?</h1>
     </header>
     <button type="button" class="close" title="Close" {{on "click" (fn @close false)}} data-test-button="close">{{svg-jar "close"}}<span class="hidden">Close</span></button>
 
     <div class="modal-body">
         <p>
-            You're about to unpublish <strong>{{if @data.selectionList.isSingle (concat '"' @data.selectionList.first.title '"') (concat @data.selectionList.count ' posts')}}</strong>.
+            You're about to revert <strong>{{if @data.selectionList.isSingle (concat '"' @data.selectionList.first.title '"') (concat @data.selectionList.count ' posts')}}</strong> to a private draft.
         </p>
     </div>
 

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

@@ -344,6 +344,35 @@ Post context menu
 
 .gh-context-menu {
     position: fixed;
-    max-width: 200px;
+    max-width: 160px;
     z-index: 1001;
 }
+
+.gh-posts-context-menu {
+    max-width: 160px !important;
+    border-radius: var(--border-radius);
+    box-shadow: 
+    0 0 2.3px rgba(0, 0, 0, 0.028),
+    0 3.8px 7.8px rgba(0, 0, 0, 0.042),
+    0 17px 35px -7px rgba(0, 0, 0, 0.11)
+    ;
+}
+
+.gh-posts-context-menu li > button {
+    padding: 8px 16px;
+}
+
+.gh-posts-context-menu li > button span {
+    display: flex;
+    align-items: center;
+    font-size: 1.35rem;
+}
+
+.gh-posts-context-menu li > button span svg,
+.gh-posts-context-menu li > button:hover span svg {
+    fill: none;
+}
+
+.gh-posts-context-menu li > button span svg path {
+    stroke-width: 2px;
+}

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

@@ -184,11 +184,11 @@
 }
 
 .posts-list[data-ctrl] .gh-posts-list-item-group:hover {
-    background: linear-gradient(315deg, var(--whitegrey-l1) 75%, var(--white) 100%);
+    background: linear-gradient(300deg, var(--whitegrey-l1) 75%, var(--white) 100%);
 }
 
 .gh-posts-list-item-group[data-selected] {
-    background: linear-gradient(315deg, var(--whitegrey-l1) 75%, var(--white) 100%) !important;
+    background: linear-gradient(300deg, var(--whitegrey-l1) 75%, var(--white) 100%) !important;
 }
 
 .gh-posts-list-item-group .gh-posts-list-item:hover .gh-list-data {
@@ -265,9 +265,10 @@
 }
 
 .gh-post-list-title .gh-featured-post {
-    width: 12px;
+    width: 11px;
-    height: 12px;
+    height: 11px;
     margin: -2px 6px 0 0;
+    color: var(--yellow-d2);
 }
 
 .gh-post-list-external {

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

@@ -159,6 +159,11 @@
 
 .gh-badge.locked {
     background: none;
+    color: var(--midgrey);
+}
+
+.gh-badge.locked svg path {
+    fill: none;
 }
 
 /* User invitation modal

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

@@ -89,7 +89,7 @@
     --yellow-l2: color-mod(var(--yellow) l(+10%));
     --yellow-l1: color-mod(var(--yellow) l(+5%));
     --yellow-d1: color-mod(var(--yellow) l(-5%));
-    --yellow-d2: color-mod(var(--yellow) l(-10%));
+    --yellow-d2: color-mod(var(--yellow) l(-7%));
     --yellow-d3: color-mod(var(--yellow) l(-13%));
 
     --red-l3: color-mod(var(--red) l(+15%));

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

@@ -1,5 +1,5 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+<svg xmlns="http://www.w3.org/2000/svg" stroke-width="1.5" viewBox="0 0 24 24">
   <title>lock</title>
-  <path d="M5.25 24A2.252 2.252 0 0 1 3 21.75v-10.5A2.252 2.252 0 0 1 5.25 9H6V6c0-3.308 2.692-6 6-6s6 2.692 6 6v3h.75A2.252 2.252 0 0 1 21 11.25v10.5A2.252 2.252 0 0 1 18.75 24H5.25zm0-13.5a.75.75 0 0 0-.75.75v10.5c0 .414.336.75.75.75h13.5a.75.75 0 0 0 .75-.75v-10.5a.75.75 0 0 0-.75-.75H5.25zM16.5 9V6c0-2.481-2.019-4.5-4.5-4.5A4.505 4.505 0 0 0 7.5 6v3h9z"/>
+  <rect width="16.5" height="13.5" x="3.75" y="9.75" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" rx="1.5" ry="1.5"/>
-  <path d="M12 18.75a.75.75 0 0 1-.75-.75v-3a.75.75 0 0 1 1.5 0v3a.75.75 0 0 1-.75.75z"/>
+  <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M6.75 9.75V6a5.25 5.25 0 0 1 10.5 0v3.75M12 15v3"/>
 </svg>

ghost/admin/public/assets/icons/star-fill.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+  <title>star-fill</title>
+  <path d="M23.56 8.73a1.51 1.51 0 0 0-1.41-1h-6.09a.5.5 0 0 1-.47-.33l-2.18-6.2A1.52 1.52 0 0 0 12 .25a1.49 1.49 0 0 0-1.4 1L8.41 7.42a.5.5 0 0 1-.47.33H1.85a1.5 1.5 0 0 0-1.41 1 1.52 1.52 0 0 0 .45 1.65l5.18 4.3a.5.5 0 0 1 .16.54l-2.18 6.53a1.5 1.5 0 0 0 2.31 1.69l5.34-3.92a.49.49 0 0 1 .59 0l5.35 3.92A1.5 1.5 0 0 0 20 21.77l-2.18-6.53a.5.5 0 0 1 .16-.54l5.19-4.31a1.51 1.51 0 0 0 .39-1.66Z"/>
+</svg>

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

@@ -1,3 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-  <path d="M23.56 8.73a1.51 1.51 0 0 0-1.41-1h-6.09a.5.5 0 0 1-.47-.33l-2.18-6.2A1.52 1.52 0 0 0 12 .25a1.49 1.49 0 0 0-1.4 1L8.41 7.42a.5.5 0 0 1-.47.33H1.85a1.5 1.5 0 0 0-1.41 1 1.52 1.52 0 0 0 .45 1.65l5.18 4.3a.5.5 0 0 1 .16.54l-2.18 6.53a1.5 1.5 0 0 0 2.31 1.69l5.34-3.92a.49.49 0 0 1 .59 0l5.35 3.92A1.5 1.5 0 0 0 20 21.77l-2.18-6.53a.5.5 0 0 1 .16-.54l5.19-4.31a1.51 1.51 0 0 0 .39-1.66Z"/>
+    <title>star</title>
+    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m12.71 1.436 3.272 6.482 6.296.624a.787.787 0 0 1 .489 1.343l-5.182 5.136 1.921 6.98a.796.796 0 0 1-1.125.914l-6.383-3.161-6.375 3.157a.794.794 0 0 1-1.125-.914l1.92-6.98-5.185-5.136a.787.787 0 0 1 .489-1.343l6.296-.624 3.267-6.478a.801.801 0 0 1 1.425 0Z"/>
 </svg>

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

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+    <title>undo</title>
+    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12.833 7.286 9.5 4.143 12.833 1M2.034 12.786a8.894 8.894 0 0 0 .281 3.143M4.34 7.511a9.351 9.351 0 0 0-1.366 1.997m1.39 10.152a9.925 9.925 0 0 0 2.556 2.035"/>
+    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M11.167 22.968c.274.02.555.032.833.032 2.652 0 5.196-.993 7.071-2.762C20.946 18.47 22 16.072 22 13.572c0-2.501-1.054-4.9-2.929-6.668C17.196 5.136 14.652 4.143 12 4.143H9.5"/>
+</svg>