Merge pull request #3965 from halfdan/3936-psm-1

PSM Step 1

core/client/assets/sass/components/navigation.scss

@@ -19,7 +19,7 @@
         width: 16px;
     }
 
-    &.right-outlet-expanded {
+    body.right-outlet-expanded & {
         transform: translate3d(-350px, 0px, 0px);
     }
 
@@ -162,6 +162,23 @@
 
 }//.user-menu
 
+body.right-outlet-expanded & {
+    .global-nav {
+        z-index: 700;
+    }
+
+    .nav-cover {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        z-index: 700;
+        transition: transform $side-outlet-transition-duration cubic-bezier(0.1, 0.7, 0.1, 1);
+        transform: translate3d(-350px, 0px, 0px);
+    }
+}
+
 
 //
 // Mobile
@@ -285,5 +302,4 @@
         }
 
     }//.user-menu
-
 }

core/client/assets/sass/components/notifications.scss

@@ -11,6 +11,9 @@
         left: 0;
         z-index: 980;
         width: 300px;
+        body.right-outlet-expanded & {
+            transform: translate3d(360px, 0px, 0px);
+        }
     }
 
     @media (max-width: 400px) {
@@ -19,6 +22,9 @@
         left: 0;
         right: 0;
         z-index: 9999;
+        body.right-outlet-expanded & {
+            transform: translate3d(100%, 0px, 0px);
+        }
     }
 }
 

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

@@ -34,7 +34,7 @@
         transform: translate3d(260px, 0px, 0px);
     }
 
-    &.right-outlet-expanded {
+    body.right-outlet-expanded & {
         @media (max-width: 350px) {
             transform: translate3d(-100%, 0px, 0px);
         }
@@ -66,7 +66,7 @@
     -webkit-overflow-scrolling: touch;
     transition: transform $side-outlet-transition-duration cubic-bezier(0.1, 0.7, 0.1, 1);
     transform: translate3d(60px, 0px, 0px);
-    &.right-outlet-expanded {
+    body.right-outlet-expanded & {
         transform: translate3d(0, 0px, 0px);
     }
     .outlet-pane {

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

@@ -628,11 +628,6 @@ body.zen {
 }
 
 #entry-controls {
-    display: inline-block;
-    position: relative;
-    padding: 0;
-    z-index: 9000;
-
     &.unsaved {
         .post-settings-menu {
             padding-bottom: 0;
@@ -646,7 +641,6 @@ body.zen {
             }
         }
     }
-
 }
 
 #entry-actions {
@@ -839,4 +833,4 @@ body.zen {
 
 .modal-markdown-help-table {
     margin-top: 0;
-}
+}

core/client/controllers/post-settings-menu.js

@@ -6,23 +6,25 @@ import boundOneWay from 'ghost/utils/bound-one-way';
 var PostSettingsMenuController = Ember.ObjectController.extend({
     init: function () {
         this._super();
+    },
 
+    initializeObserver: function () {
         // when creating a new post we want to observe the title
         // to generate the post's slug
         if (this.get('isNew')) {
             this.addObserver('titleScratch', this, 'titleObserver');
         }
-    },
+    }.observes('model'),
 
     selectedAuthor: null,
-    initializeSelectedAuthor: Ember.observer('model', function () {
+    initializeSelectedAuthor: function () {
         var self = this;
-
+        
         return this.get('author').then(function (author) {
             self.set('selectedAuthor', author);
             return author;
         });
-    }).on('init'),
+    }.observes('model'),
 
     changeAuthor: function () {
         var author = this.get('author'),

core/client/mixins/editor-route-base.js

@@ -4,6 +4,7 @@ import loadingIndicator from 'ghost/mixins/loading-indicator';
 import editorShortcuts from 'ghost/utils/editor-shortcuts';
 
 var EditorRouteBase = Ember.Mixin.create(styleBody, ShortcutsRoute, loadingIndicator, {
+
     actions: {
         save: function () {
             this.get('controller').send('save');
@@ -19,9 +20,25 @@ var EditorRouteBase = Ember.Mixin.create(styleBody, ShortcutsRoute, loadingIndic
         //The actual functionality is implemented in utils/codemirror-shortcuts
         codeMirrorShortcut: function (options) {
             this.get('controller.codemirror').shortcut(options.type);
+        },
+        togglePostSettings: function () {
+            Ember.$('body').toggleClass('right-outlet-expanded');
+        },
+        closePostSettings: function () {
+            Ember.$('body').removeClass('right-outlet-expanded');
         }
     },
 
+    renderTemplate: function (controller, model) {
+        this._super();
+
+        this.render('post-settings-menu', {
+            into: 'application',
+            outlet: 'settings-menu',
+            model: model
+        });
+    },
+
     shortcuts: editorShortcuts,
 
     attachModelHooks: function (controller, model) {

core/client/routes/application.js

@@ -29,6 +29,9 @@ var ApplicationRoute = Ember.Route.extend(SimpleAuth.ApplicationRouteMixin, Shor
             this.get('popover').closePopovers();
             this.get('notifications').closeAll();
 
+            // Close PSM if open
+            Ember.$('body').removeClass('right-outlet-expanded');
+
             this.send('closeModal');
         },
 
@@ -83,7 +86,7 @@ var ApplicationRoute = Ember.Route.extend(SimpleAuth.ApplicationRouteMixin, Shor
         },
 
         closeModal: function () {
-            return this.disconnectOutlet({
+            this.disconnectOutlet({
                 outlet: 'modal',
                 parentView: 'application'
             });

core/client/templates/-publish-bar.hbs

@@ -2,17 +2,7 @@
     {{render 'post-tags-input'}}
 
     <div class="right">
-
-        <section id="entry-controls" {{bind-attr class="isNew:unsaved"}}>
-            {{#gh-popover-button popoverName="post-settings-menu" classNames="post-settings" title="Post Settings"}}
-                <span class="hidden">Post Settings</span>
-            {{/gh-popover-button}}
-            {{#gh-popover name="post-settings-menu" classNames="dropdown post-settings-menu"}}
-                <div class="dropdown-menu dropdown-triangle-bottom-right">
-                    {{render "post-settings-menu" model}}
-                </div>
-            {{/gh-popover}}
-        </section>
+        <button type="button" class='post-settings' {{action "togglePostSettings"}}></button> 
 
         {{view "editor-save-button" id="entry-actions"}}
     </div>

core/client/templates/application.hbs

@@ -13,4 +13,6 @@
 
 {{outlet modal}}
 
+{{outlet settings-menu}}
+
 </div>

core/client/templates/post-settings-menu.hbs

@@ -1,52 +1,118 @@
-<form>
-    <table class="plain">
-        <tbody>
-        <tr class="post-setting">
-            <td class="post-setting-label">
-                <label for="url">URL</label>
-            </td>
-            <td class="post-setting-field">
-                {{gh-blur-input class="post-setting-slug" id="url" value=slugValue name="post-setting-slug" action="updateSlug" placeholder=slugPlaceholder selectOnClick="true" stopEnterKeyDownPropagation="true"}}
-            </td>
-        </tr>
-        <tr class="post-setting">
-            <td class="post-setting-label">
-                <label for="pub-date">Pub Date</label>
-            </td>
-            <td class="post-setting-field">
-                {{gh-blur-input class="post-setting-date" value=publishedAtValue name="post-setting-date" action="setPublishedAt" placeholder=publishedAtPlaceholder stopEnterKeyDownPropagation="true"}}
-            </td>
-        </tr>
-        {{#unless session.user.isAuthor}}
-        <tr class="post-setting">
-            <td class="post-setting-label">
-                <label for="post-setting-author">Author</label>
-            </td>
-
-            <td class="post-setting-field">
-                <span class="gh-select">
-                    {{view Ember.Select
-                    name="post-setting-author"
-                    content=authors
-                    optionValuePath="content.id"
-                    optionLabelPath="content.name"
-                    selection=selectedAuthor}}
+<div class="nav-cover" {{action "closePostSettings"}}></div>
+<div id="entry-controls" {{bind-attr class=":right-outlet isNew:unsaved"}}>
+    <div class="post-settings-menu outlet-pane outlet-pane-in">
+        <div class="post-settings-header">
+            <h4>Post Settings</h4>
+            <button class="close icon-x post-settings-header-action" {{action "closePostSettings"}}><span class="hidden">Close</span></button>
+        </div>
+        <div class="post-settings-content">
+            <!--
+            <section class="image-uploader">
+                <span class="media">
+                    <span class="hidden">Image Upload</span>
                 </span>
-            </td>
-        {{/unless}}
-        </tr>
-        <tr class="post-setting">
-            <td class="post-setting-label">
-                <label for="static-page" {{action "togglePage" bubbles="false"}}>Static Page</label>
-            </td>
-            <td class="post-setting-item">
+                <img class="js-upload-target" style="display: none;" src="">
+                <div class="description">Add image of <strong></strong></div>
+            </section>
+            -->
+            <form>
+            <div class="form-group">
+                <label for="blog-title">Post URL</label>
+                <span class="input-icon icon-link">
+                    {{gh-blur-input class="post-setting-slug" id="url" value=slugValue name="post-setting-slug" action="updateSlug" placeholder=slugPlaceholder selectOnClick="true" stopEnterKeyDownPropagation="true"}}
+                </span>
+            </div>
+
+            <div class="form-group">
+                <label for="blog-title">Publish Date</label>
+                <span class="input-icon icon-calendar">
+                    {{gh-blur-input class="post-setting-date" value=publishedAtValue name="post-setting-date" action="setPublishedAt" placeholder=publishedAtPlaceholder stopEnterKeyDownPropagation="true"}}
+                </span>
+            </div>
+
+            <div class="form-group for-select">
+                <label for="activeTheme">Author</label>
+                <span class="input-icon icon-user">
+                    <span class="gh-select">
+                    {{view Ember.Select
+                        name="post-setting-author"
+                        content=authors
+                        optionValuePath="content.id"
+                        optionLabelPath="content.name"
+                        selection=selectedAuthor}}
+                    </span>
+                </span>
+            </div>
+
+            <div class="form-group for-checkbox">
                 <label class="checkbox" for="static-page" {{action "togglePage" bubbles="false"}}>
                     {{input type="checkbox" name="static-page" id="static-page" class="post-setting-static-page" checked=page}}
                     <span class="input-toggle-component"></span>
+                    <p>Static Page</p>
                 </label>
-            </td>
-        </tr>
-        </tbody>
-    </table>
-</form>
-<button type="button" class="delete" {{action "openModal" "delete-post" this}}>Delete This Post</button>
+            </div>
+            <!--
+            <ul class="nav-list nav-list-block">
+                <li class="nav-list-item">
+                    <a href="#">
+                        <b>Revision History</b>
+                        <span>12 versions of this post by 3 people.</span>
+                    </a>
+                </li>
+                <li class="nav-list-item">
+                    <a href="#">
+                        <b>Advanced Settings</b>
+                        <span>Convert to a page, mark as featured.</span>
+                    </a>
+                </li>
+                <li class="nav-list-item">
+                    <a href="#">
+                        <b>Meta Data</b>
+                        <span>Extra content for SEO and social media.</span>
+                    </a>
+                </li>
+                <li class="nav-list-item">
+                    <a href="#">
+                        <b>Custom App</b>
+                        <span>Registered an advanced setting panel.</span>
+                    </a>
+                </li>
+            </ul>
+            -->
+            <button type="button" class="btn btn-red icon-trash delete" {{action "openModal" "delete-post" this}}>Delete This Post</button>
+            </form>
+        </div><!-- .post-settings-content -->
+    </div><!-- .post-settings-menu -->
+    <!--
+    <div class="post-settings-menu outlet-pane outlet-pane-out-right">
+
+        <div class="post-settings-header subview">
+            <button class="back icon-chevron-left post-settings-header-action"><span class="hidden">Back</span></button>
+            <h4>Meta Data</h4>
+        </div>
+
+        <div class="post-settings-content">
+            <div class="form-group">
+                <label for="blog-title">Meta Title</label>
+                <input type="text" value="My Post is Super SEO Friendly" />
+                <p>Recommended: <b>70</b> characters. You’ve used <b class="green">43</b></p>
+            </div>
+
+            <div class="form-group">
+                <label for="blog-title">Meta Description</label>
+                <textarea>In this fascinating posts I explore the value of SEO meta descriptions and their impact on blogging. Don’t miss my stunning insights!</textarea>
+                <p>Recommended: <b>156</b> characters. You’ve used <b class="green">133</b></p>
+            </div>
+
+            <div class="form-group">
+                <label>Search Engine Result Preview</label>
+                <div class="seo-preview">
+                    <div class="seo-preview-title">My Post is Super SEO Friendly</div>
+                    <div class="seo-preview-link">myblog.com/this-is-my-post/</div>
+                    <div class="seo-preview-description">In this fascinating posts I explore the value of SEO meta descriptions and their impact on blogging. Don’t miss my stunning insights!</div>
+                </div>
+            </div>
+        </div>
+    </div>
+    -->
+</div>

core/client/views/post-settings-menu.js

@@ -7,7 +7,11 @@ var PostSettingsMenuView = Ember.View.extend({
     publishedAtBinding: Ember.Binding.oneWay('controller.publishedAt'),
     datePlaceholder: Ember.computed('controller.publishedAt', function () {
         return formatDate(moment());
-    })
+    }),
+
+    animateOut: function () {
+        $('body').removeClass('right-outlet-expanded');
+    }.on('willDestroyElement')
 });
 
 export default PostSettingsMenuView;

core/test/functional/client/editor_test.js

@@ -570,7 +570,6 @@ CasperTest.begin('Title input is set correctly after using the Post-Settings-Men
     // change a post attribute via the post-settings-menu
 
     casper.thenClick('.post-settings');
-    casper.waitForOpaque('.post-settings-menu.open');
 
     casper.then(function () {
         this.fillSelectors('.post-settings-menu form', {
@@ -618,7 +617,6 @@ CasperTest.begin('Editor content is set correctly after using the Post-Settings-
     // change a post attribute via the post-settings-menu
 
     casper.thenClick('.post-settings');
-    casper.waitForOpaque('.post-settings-menu.open');
 
     casper.then(function () {
         this.fillSelectors('.post-settings-menu form', {

core/test/functional/client/psm_test.js

@@ -4,7 +4,7 @@
 /*globals CasperTest, casper, __utils__ */
 
 
-CasperTest.begin('Post settings menu', 15, function suite(test) {
+CasperTest.begin('Post settings menu', 14, function suite(test) {
     casper.thenOpenAndWaitForPageLoad('editor', function testTitleAndUrl() {
         test.assertTitle('Ghost Admin', 'Ghost admin has no title');
         test.assertUrlMatch(/ghost\/editor\/$/, 'Landed on the correct URL');
@@ -12,7 +12,7 @@ CasperTest.begin('Post settings menu', 15, function suite(test) {
 
     casper.then(function () {
         test.assertExists('.post-settings', 'icon toggle should exist');
-        test.assertNotVisible('.post-settings-menu', 'popup menu should not be visible at startup');
+        test.assertExists('.post-settings-menu', 'popup menu should be rendered at startup');
         test.assertExists('.post-settings-menu #url', 'url field exists');
         test.assertExists('.post-settings-menu .post-setting-date', 'publication date field exists');
         test.assertExists('.post-settings-menu .post-setting-static-page', 'static page checkbox field exists');
@@ -30,10 +30,6 @@ CasperTest.begin('Post settings menu', 15, function suite(test) {
 
     casper.thenClick('.post-settings');
 
-    casper.waitWhileVisible('.post-settings-menu', function onSuccess() {
-        test.assert(true, 'popup menu should not be visible after clicking post-settings icon');
-    });
-
     // Enter a title and save draft so converting to/from static post
     // will result in notifications and 'Delete This Post' button appears
     casper.then(function () {
@@ -79,7 +75,6 @@ CasperTest.begin('Delete post modal', 7, function testDeleteModal(test) {
 
     // Open post settings menu
     casper.thenClick('.post-settings');
-    casper.waitForOpaque('.post-settings-menu.open');
     casper.thenClick('.post-settings-menu button.delete');
 
     casper.waitUntilVisible('#modal-container', function onSuccess() {
@@ -97,7 +92,6 @@ CasperTest.begin('Delete post modal', 7, function testDeleteModal(test) {
 
     // Test delete
     casper.thenClick('.post-settings');
-    casper.waitForOpaque('.post-settings-menu.open');
     casper.thenClick('.post-settings-menu button.delete');
 
     casper.waitForSelector('#modal-container .modal-content', function onSuccess() {
@@ -130,7 +124,6 @@ CasperTest.begin('Post url can be changed', 4, function suite(test) {
     casper.waitForSelector('#entry-title');
 
     casper.thenClick('.post-settings');
-    casper.waitForOpaque('.post-settings-menu.open');
 
     // Test change permalink
     casper.then(function () {
@@ -169,7 +162,6 @@ CasperTest.begin('Post published date can be changed', 4, function suite(test) {
     casper.waitForSelector('#entry-title');
 
     casper.thenClick('.post-settings');
-    casper.waitForOpaque('.post-settings-menu.open');
 
     // Test change published date
     casper.then(function () {
@@ -208,7 +200,6 @@ CasperTest.begin('Post can be changed to static page', 6, function suite(test) {
     casper.waitForSelector('#entry-title');
 
     casper.thenClick('.post-settings');
-    casper.waitForOpaque('.post-settings-menu.open');
 
     casper.thenClick('label[for=static-page]');
 
@@ -242,7 +233,6 @@ CasperTest.begin('Post url input is reset from all whitespace back to original v
     casper.waitForSelector('#entry-title');
 
     casper.thenClick('.post-settings');
-    casper.waitForOpaque('.post-settings-menu.open');
 
     var originalSlug;
     casper.then(function () {