diff --git a/core/client/assets/sass/components/navigation.scss b/core/client/assets/sass/components/navigation.scss index 22eb0e26b6..67c6d33cfb 100644 --- a/core/client/assets/sass/components/navigation.scss +++ b/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); } @@ -160,6 +160,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 @@ -283,5 +300,4 @@ } }//.user-menu - } \ No newline at end of file diff --git a/core/client/assets/sass/components/notifications.scss b/core/client/assets/sass/components/notifications.scss index 97d9578849..43cb79ba17 100644 --- a/core/client/assets/sass/components/notifications.scss +++ b/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); + } } } diff --git a/core/client/assets/sass/layouts/default.scss b/core/client/assets/sass/layouts/default.scss index e09198493e..2d9496c1f1 100644 --- a/core/client/assets/sass/layouts/default.scss +++ b/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 { diff --git a/core/client/assets/sass/layouts/editor.scss b/core/client/assets/sass/layouts/editor.scss index a5edcf13ab..6c0d42b79c 100644 --- a/core/client/assets/sass/layouts/editor.scss +++ b/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; -} \ No newline at end of file +} diff --git a/core/client/controllers/post-settings-menu.js b/core/client/controllers/post-settings-menu.js index 894c3540b5..27c87391cc 100644 --- a/core/client/controllers/post-settings-menu.js +++ b/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'), diff --git a/core/client/mixins/editor-route-base.js b/core/client/mixins/editor-route-base.js index 93e4c9da83..73a928ba58 100644 --- a/core/client/mixins/editor-route-base.js +++ b/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) { diff --git a/core/client/routes/application.js b/core/client/routes/application.js index e98c16f009..30800a7e6d 100644 --- a/core/client/routes/application.js +++ b/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' }); diff --git a/core/client/templates/-publish-bar.hbs b/core/client/templates/-publish-bar.hbs index 0d30fc95e3..f1eaf9bad9 100644 --- a/core/client/templates/-publish-bar.hbs +++ b/core/client/templates/-publish-bar.hbs @@ -2,17 +2,7 @@ {{render 'post-tags-input'}}
- -
- {{#gh-popover-button popoverName="post-settings-menu" classNames="post-settings" title="Post Settings"}} - - {{/gh-popover-button}} - {{#gh-popover name="post-settings-menu" classNames="dropdown post-settings-menu"}} -
- {{render "post-settings-menu" model}} -
- {{/gh-popover}} -
+ {{view "editor-save-button" id="entry-actions"}}
diff --git a/core/client/templates/application.hbs b/core/client/templates/application.hbs index 2ec653339c..8bdddb3911 100644 --- a/core/client/templates/application.hbs +++ b/core/client/templates/application.hbs @@ -13,4 +13,6 @@ {{outlet modal}} +{{outlet settings-menu}} + \ No newline at end of file diff --git a/core/client/templates/post-settings-menu.hbs b/core/client/templates/post-settings-menu.hbs index 39791b4fa5..54f7d86c49 100644 --- a/core/client/templates/post-settings-menu.hbs +++ b/core/client/templates/post-settings-menu.hbs @@ -1,52 +1,118 @@ -
- - - - - - - - - - - {{#unless session.user.isAuthor}} - - - - - - -
- - - {{gh-blur-input class="post-setting-slug" id="url" value=slugValue name="post-setting-slug" action="updateSlug" placeholder=slugPlaceholder selectOnClick="true" stopEnterKeyDownPropagation="true"}} -
- - - {{gh-blur-input class="post-setting-date" value=publishedAtValue name="post-setting-date" action="setPublishedAt" placeholder=publishedAtPlaceholder stopEnterKeyDownPropagation="true"}} -
- - - - {{view Ember.Select - name="post-setting-author" - content=authors - optionValuePath="content.id" - optionLabelPath="content.name" - selection=selectedAuthor}} +
+
+
+
+

Post Settings

+ +
+
+ + +
+ + + {{gh-blur-input class="post-setting-slug" id="url" value=slugValue name="post-setting-slug" action="updateSlug" placeholder=slugPlaceholder selectOnClick="true" stopEnterKeyDownPropagation="true"}} + +
+ +
+ + + {{gh-blur-input class="post-setting-date" value=publishedAtValue name="post-setting-date" action="setPublishedAt" placeholder=publishedAtPlaceholder stopEnterKeyDownPropagation="true"}} + +
+ +
+ + + + {{view Ember.Select + name="post-setting-author" + content=authors + optionValuePath="content.id" + optionLabelPath="content.name" + selection=selectedAuthor}} + + +
+ +
-
-
- + + + + + + + + \ No newline at end of file diff --git a/core/client/views/post-settings-menu-view.js b/core/client/views/post-settings-menu.js similarity index 78% rename from core/client/views/post-settings-menu-view.js rename to core/client/views/post-settings-menu.js index 189808dea5..80381ba2ee 100644 --- a/core/client/views/post-settings-menu-view.js +++ b/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; diff --git a/core/test/functional/client/editor_test.js b/core/test/functional/client/editor_test.js index 2d7f9e044b..4863cad2f4 100644 --- a/core/test/functional/client/editor_test.js +++ b/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', { diff --git a/core/test/functional/client/psm_test.js b/core/test/functional/client/psm_test.js index 5973c947f2..3ad2747397 100644 --- a/core/test/functional/client/psm_test.js +++ b/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 () {