Markup & style fixes for post list statuses

fixes #1703, fixes #1712

- featured star appears immediately for both draft and published items
- featured star is never red & alignment /style is updated
- improved markup and styling of statuses in general
- added to feature tests

core/client/assets/sass/layouts/manage.scss

@@ -95,13 +95,21 @@
             }
         }
 
-        .featured .date {
+        .featured .status {
             @include icon($i-featured, 11px) {
-                margin-right:12px;
-                vertical-align: 0;
+                margin-right: 10px;
+                vertical-align: 7%;
             };
         }
 
+        .status .draft {
+            color: $red;
+        }
+        .status .scheduled {
+            color: $orange;
+        }
+
+
       ol {
             list-style: none;
             padding:0;

core/client/assets/sass/modules/global.scss

@@ -1678,11 +1678,3 @@ main {
     }
 
 }
-
-.status-draft {
-    color: $red;
-}
-.status-scheduled {
-    color: $orange;
-}
-

core/client/tpl/list-item.hbs

@@ -1,16 +1,18 @@
 <a class="permalink{{#if featured}} featured{{/if}}{{#if page}} page{{/if}}" href="#" title="Edit this post">
     <h3 class="entry-title">{{{title}}}</h3>
     <section class="entry-meta">
+        <span class="status">
         {{#if published}}
             {{#if page}}
                     <span class="page">Page</span>
             {{else}}
-                <time datetime="{{date published_at format="YYYY-MM-DD hh:mm"}}" class="date">
+                <time datetime="{{date published_at format="YYYY-MM-DD hh:mm"}}" class="date published">
                     Published {{date published_at timeago="True"}}
                 </time>
             {{/if}}
         {{else}}
-            <span class="status-draft">Draft</span>
+            <span class="draft">Draft</span>
         {{/if}}
+        </span>
     </section>
 </a>

core/client/views/blog.js

@@ -138,7 +138,7 @@
 
         initialize: function () {
             this.listenTo(Backbone, 'blog:activeItem', this.checkActive);
-            this.listenTo(this.model, 'change:page', this.render);
+            this.listenTo(this.model, 'change:page change:featured', this.render);
             this.listenTo(this.model, 'destroy', this.removeItem);
         },
 

core/test/functional/admin/content_test.js

@@ -67,7 +67,7 @@ CasperTest.begin('Infinite scrolling', 1, function suite(test) {
     });
 });
 
-CasperTest.begin("Posts can be marked as featured", 6, function suite(test) {
+CasperTest.begin("Posts can be marked as featured", 12, function suite(test) {
     // Create a sample post
     casper.thenOpen(url + 'ghost/editor/', function testTitleAndUrl() {
         test.assertTitle('Ghost Admin', 'Ghost admin has no title');
@@ -80,9 +80,11 @@ CasperTest.begin("Posts can be marked as featured", 6, function suite(test) {
 
     casper.thenClick('.js-publish-button');
 
-    casper.waitForSelector('.notification-success', function () {
+    casper.waitForSelector('.notification-success', function waitForSuccess() {
         test.assert(true, 'got success notification');
         test.assertSelectorHasText('.notification-success', 'Your post has been saved as a draft.');
+    }, function onTimeout() {
+        test.assert(false, 'No success notification :(');
     });
 
     // Begin test
@@ -91,17 +93,40 @@ CasperTest.begin("Posts can be marked as featured", 6, function suite(test) {
     });
 
     // Mark as featured
-    casper.waitForSelector('.unfeatured' , function() {
-       this.click('.unfeatured');
+    casper.waitForSelector('.content-preview .unfeatured', function () {
+        this.click('.content-preview .unfeatured');
+    }, function onTimeOut() {
+        test.assert(false, 'The first post can\'t be marked as featured');
+    });
+
+    casper.waitForSelector('.notification-success', function waitForSuccess() {
+        test.assert(true, 'got success notification');
+        test.assertSelectorHasText('.notification-success', 'Post successfully marked as featured.');
+    }, function onTimeout() {
+        test.assert(false, 'No success notification :(');
+    });
+
+    casper.waitForSelector('.content-list-content li:first-child .featured', function () {
+        test.assertExists('.content-preview .featured');
+        test.assert(true, 'got a featured star');
+        this.click('.notification-success .close');
+    }, function onTimeout() {
+        test.assert(false, 'No featured star appeard in the left pane');
     });
 
     // Mark as not featured
-    casper.waitForSelector('.featured' , function() {
-       this.click('.featured');
+    casper.waitWhileSelector('.notification-success', function waitForNoSuccess() {
+        this.click('.content-preview .featured');
+    }, function onTimeout() {
+        test.assert(false, 'Success notification wont go away:(');
     });
 
-    casper.waitForSelector('.notification-success', function () {
+    casper.waitForSelector('.notification-success', function waitForSuccess() {
         test.assert(true, 'got success notification');
-        test.assertSelectorHasText('.notification-success', 'Post successfully marked as featured.');
+        test.assertSelectorHasText('.notification-success', 'Post successfully marked as not featured.');
+        test.assertDoesntExist('.content-preview .featured');
+        test.assertDoesntExist('.content-list-content li:first-child .featured');
+    }, function onTimeout() {
+        test.assert(false, 'Success notification wont go away:(');
     });
 });