Allow user to mark a post as static page

- Increased post-settings width to properly display "Static Page"
- Changed templates to display "Static Page" if set
- Added unit test for body_class helper

fixes #969

ghost/admin/assets/sass/modules/global.scss

@@ -856,7 +856,7 @@ nav {
 }
 
 .post-setting {
-    min-width: 260px;
+    min-width: 300px;
     border-bottom: 1px solid #35393b;
 
     &:first-child {

ghost/admin/router.js

@@ -31,7 +31,7 @@
         blog: function () {
             var posts = new Ghost.Collections.Posts();
             NProgress.start();
-            posts.fetch({ data: { status: 'all', orderBy: ['updated_at', 'DESC'] } }).then(function () {
+            posts.fetch({ data: { status: 'all', orderBy: ['updated_at', 'DESC'], where: { page: 'all' } } }).then(function () {
                 Ghost.currentView = new Ghost.Views.Blog({ el: '#main', collection: posts });
                 NProgress.done();
             });

ghost/admin/tpl/list-item.hbs

@@ -1,4 +1,4 @@
-<a class="permalink{{#if featured}} featured{{/if}}" href="#" title="Edit this post">
+<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">
         <time datetime="2013-01-04" class="date">
@@ -8,6 +8,9 @@
                 <span class="status-draft">Draft</span>
             {{/if}}
         </time>
+        {{#if page}}
+        | <span class="page">Static Page</span>
+        {{/if}}
         {{!<span class="views">1,934</span>}}
     </section>
-</a>
+</a>

ghost/admin/tpl/preview.hbs

@@ -27,6 +27,14 @@
                     <input class="post-setting-date" type="text" value="">
                 </div>
             </li>
+            <li class="post-setting">
+                <div class="post-setting-label">
+                    <label for="static-page">Static Page</label>
+                </div>
+                <div class="post-setting-field">
+                    <input id="static-page" class="post-setting-static-page" type="checkbox" value="">
+                </div>
+            </li>                
             <li><a href="#" class="delete hidden">Delete This Post</a></li>
         </ul>
     </section>

ghost/admin/views/blog.js

@@ -93,6 +93,7 @@
                 data: {
                     status: 'all',
                     page: (self.collection.currentPage + 1),
+                    where: { page: 'all' },
                     orderBy: ['updated_at', 'DESC']
                 }
             }).then(function onSuccess(response) {
@@ -135,6 +136,7 @@
 
         initialize: function () {
             this.listenTo(Backbone, 'blog:activeItem', this.checkActive);
+            this.listenTo(this.model, 'change:page', this.render);
             this.listenTo(this.model, 'destroy', this.removeItem);
         },
 

ghost/admin/views/post-settings.js

@@ -11,6 +11,7 @@
             'blur  .post-setting-slug' : 'editSlug',
             'click .post-setting-slug' : 'selectSlug',
             'blur  .post-setting-date' : 'editDate',
+            'click .post-setting-static-page' : 'toggleStaticPage',
             'click .delete' : 'deletePost'
         },
 
@@ -19,6 +20,7 @@
                 this.listenTo(this.model, 'change:id', this.render);
                 this.listenTo(this.model, 'change:status', this.render);
                 this.listenTo(this.model, 'change:published_at', this.render);
+                this.listenTo(this.model, 'change:page', this.render);
             }
         },
 
@@ -29,12 +31,18 @@
 
             $('.post-setting-slug').val(slug);
 
+            // Update page status test if already a page.
+            if (this.model && this.model.get('page')) {
+                $('.post-setting-static-page').prop('checked', this.model.get('page'));
+            }
+
             // Insert the published date, and make it editable if it exists.
             if (this.model && this.model.get('published_at')) {
                 pubDate = moment(pubDate).format('DD MMM YY');
             }
 
             if (this.model && this.model.get('id')) {
+                this.$('.post-setting-page').removeClass('hidden');
                 this.$('.delete').removeClass('hidden');
             }
 
@@ -141,6 +149,32 @@
 
         },
 
+        toggleStaticPage: function (e) {
+            e.preventDefault();
+            var pageEl = $(e.currentTarget),
+                page = this.model ? !this.model.get('page') : false;
+
+            this.model.save({
+                page: page
+            }, {
+                success : function (model, response, options) {
+                    pageEl.prop('checked', page);
+                    Ghost.notifications.addItem({
+                        type: 'success',
+                        message: "Successfully converted " + (page ? "to static page" : "to post") + '.',
+                        status: 'passive'
+                    });
+                },
+                error : function (model, xhr) {
+                    Ghost.notifications.addItem({
+                        type: 'error',
+                        message: Ghost.Views.Utils.getRequestErrorMessage(xhr),
+                        status: 'passive'
+                    });
+                }
+            });
+        },
+
         deletePost: function (e) {
             e.preventDefault();
             var self = this;