From 05c603ee2c5af0da899c3293953ebcc1804d131f Mon Sep 17 00:00:00 2001
From: Hannah Wolfe <erisds@gmail.com>
Date: Wed, 18 Dec 2013 15:23:35 +0000
Subject: [PATCH] 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 | 16 ++++++--
 core/client/assets/sass/modules/global.scss | 10 +----
 core/client/tpl/list-item.hbs               |  6 ++-
 core/client/views/blog.js                   |  2 +-
 core/test/functional/admin/content_test.js  | 43 ++++++++++++++++-----
 5 files changed, 52 insertions(+), 25 deletions(-)

diff --git a/core/client/assets/sass/layouts/manage.scss b/core/client/assets/sass/layouts/manage.scss
index 58ed17f165..fa6f6d2af1 100644
--- a/core/client/assets/sass/layouts/manage.scss
+++ b/core/client/assets/sass/layouts/manage.scss
@@ -95,14 +95,22 @@
             }
         }
 
-        .featured .date {
+        .featured .status {
             @include icon($i-featured, 11px) {
-                margin-right:12px;
-                vertical-align: 0;
+                margin-right: 10px;
+                vertical-align: 7%;
             };
         }
 
-        ol {
+        .status .draft {
+            color: $red;
+        }
+        .status .scheduled {
+            color: $orange;
+        }
+
+
+      ol {
             list-style: none;
             padding:0;
             margin:0;
diff --git a/core/client/assets/sass/modules/global.scss b/core/client/assets/sass/modules/global.scss
index e43f172141..d099cb84d7 100644
--- a/core/client/assets/sass/modules/global.scss
+++ b/core/client/assets/sass/modules/global.scss
@@ -1677,12 +1677,4 @@ main {
         background:$orange;
     }
 
-}
-
-.status-draft {
-    color: $red;
-}
-.status-scheduled {
-    color: $orange;
-}
-
+}
\ No newline at end of file
diff --git a/core/client/tpl/list-item.hbs b/core/client/tpl/list-item.hbs
index 4edcfb23e7..304dbf8741 100644
--- a/core/client/tpl/list-item.hbs
+++ b/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>
diff --git a/core/client/views/blog.js b/core/client/views/blog.js
index aaebe7fe5d..9370496191 100644
--- a/core/client/views/blog.js
+++ b/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);
         },
 
diff --git a/core/test/functional/admin/content_test.js b/core/test/functional/admin/content_test.js
index b51139dc32..194db5e522 100644
--- a/core/test/functional/admin/content_test.js
+++ b/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:(');
     });
-});
+});
\ No newline at end of file