Add mobile menu open button and close on click outside nav

- Adds gh-view-title component to implement mobile menu button for titles on any page - Refactors the `content-cover` out into the application template - Fix various z-index issues with content-cover and gh-alert - Move `.settings-menu-expanded` application view state from body to `.gh-viewport` - Unify nav menu / mobile menu actions and code
TryGhost · Jun 8, 2015 · c7a9e72 · c7a9e72
1 parent 540a321
commit c7a9e72
Show file tree

Hide file tree

Showing 25 changed files with 97 additions and 60 deletions.
diff --git a/core/client/app/components/gh-content-cover.js b/core/client/app/components/gh-content-cover.js
@@ -1,3 +1,15 @@
+/*
+
+Implements a div for covering the page content
+when in a menu context that, for example,
+should be closed when the user clicks elsewhere.
+
+Example:
+```
+{{gh-content-cover onClick="closeMenus" onMouseEnter="closeAutoNav"}}
+```
+**/
+
 import Ember from 'ember';
 
 export default Ember.Component.extend({

diff --git a/core/client/app/components/gh-nav-menu.js b/core/client/app/components/gh-nav-menu.js
@@ -9,14 +9,8 @@ export default Ember.Component.extend({
 
     open: false,
 
-    autoNav: null,
-
     mouseEnter: function () {
-        if (!this.get('autoNav')) {
-            return;
-        }
-
-        this.set('open', true);
+        this.sendAction('onMouseEnter');
     },
 
     actions: {

diff --git a/core/client/app/components/gh-view-title.js b/core/client/app/components/gh-view-title.js
@@ -0,0 +1,9 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+    actions: {
+        openMobileMenu () {
+            this.sendAction('openMobileMenu');
+        }
+    }
+});
diff --git a/core/client/app/controllers/application.js b/core/client/app/controllers/application.js
@@ -8,23 +8,37 @@ export default Ember.Controller.extend({
     // jscs: enable
 
     topNotificationCount: 0,
-    showNavMenu: false,
+    showMobileMenu: false,
     showSettingsMenu: false,
 
     autoNav: false,
+    autoNavOpen: Ember.computed('autoNav', {
+        get () {
+            return false;
+        },
+        set (key, value) {
+            if (this.get('autoNav')) {
+                return value;
+            }
+            return false;
+        }
+    }),
 
     actions: {
-        topNotificationChange: function (count) {
+        topNotificationChange (count) {
             this.set('topNotificationCount', count);
         },
 
-        closeNavMenu: function () {
-            this.get('dropdown').closeDropdowns();
-            this.set('showNavMenu', false);
+        toggleAutoNav () {
+            this.toggleProperty('autoNav');
+        },
+
+        openAutoNav () {
+            this.set('autoNavOpen', true);
         },
 
-        navMenuToggleMaximise: function () {
-            this.toggleProperty('autoNav');
+        closeAutoNav () {
+            this.set('autoNavOpen', false);
         }
     }
 });
diff --git a/core/client/app/controllers/modals/delete-tag.js b/core/client/app/controllers/modals/delete-tag.js
@@ -13,7 +13,7 @@ export default Ember.Controller.extend({
                 name = tag.get('name'),
                 self = this;
 
-            this.send('closeSettingsMenu');
+            this.send('closeMenus');
 
             tag.destroyRecord().then(function () {
                 self.get('notifications').showSuccess('Deleted ' + name);

diff --git a/core/client/app/mixins/editor-base-route.js b/core/client/app/mixins/editor-base-route.js
@@ -48,7 +48,7 @@ var EditorBaseRoute = Ember.Mixin.create(styleBody, ShortcutsRoute, {
             deletedWithoutChanges = state.isDeleted &&
                 (state.isSaving || !state.isDirty);
 
-            this.send('closeSettingsMenu');
+            this.send('closeMenus');
 
             if (!fromNewToEdit && !deletedWithoutChanges && controllerIsDirty) {
                 transition.abort();

diff --git a/core/client/app/routes/application.js b/core/client/app/routes/application.js
@@ -8,7 +8,7 @@ import ctrlOrCmd from 'ghost/utils/ctrl-or-cmd';
 
 var shortcuts = {};
 
-shortcuts.esc = {action: 'closePopups', scope: 'all'};
+shortcuts.esc = {action: 'closeMenus', scope: 'all'};
 shortcuts.enter = {action: 'confirmModal', scope: 'modal'};
 shortcuts[ctrlOrCmd + '+s'] = {action: 'save', scope: 'all'};
 
@@ -30,30 +30,22 @@ export default Ember.Route.extend(ApplicationRouteMixin, ShortcutsRoute, {
     },
 
     actions: {
-        toggleGlobalMobileNav: function () {
-            this.toggleProperty('controller.showGlobalMobileNav');
+        openMobileMenu () {
+            this.controller.set('showMobileMenu', true);
         },
 
         openSettingsMenu: function () {
-            this.set('controller.showSettingsMenu', true);
+            this.controller.set('showSettingsMenu', true);
         },
 
-        closeSettingsMenu: function () {
-            this.set('controller.showSettingsMenu', false);
-        },
-
-        toggleSettingsMenu: function () {
-            this.toggleProperty('controller.showSettingsMenu');
-        },
-
-        closePopups: function () {
+        closeMenus () {
             this.get('dropdown').closeDropdowns();
             this.get('notifications').closeAll();
-
-            // Close right outlet if open
-            this.send('closeSettingsMenu');
-
             this.send('closeModal');
+            this.controller.setProperties({
+                showSettingsMenu: false,
+                showMobileMenu: false
+            });
         },
 
         signedIn: function () {

diff --git a/core/client/app/routes/settings/tags.js b/core/client/app/routes/settings/tags.js
@@ -47,7 +47,7 @@ TagsRoute = AuthenticatedRoute.extend(CurrentUserSettings, PaginationRouteMixin,
 
     actions: {
         willTransition: function () {
-            this.send('closeSettingsMenu');
+            this.send('closeMenus');
         }
     }
 });

diff --git a/core/client/app/styles/components/notifications.css b/core/client/app/styles/components/notifications.css
@@ -105,6 +105,7 @@
 
 /* Base alert style */
 .gh-alert {
+    z-index: 1000;
     flex-grow: 1;
     display: flex;
     justify-content: space-between;

diff --git a/core/client/app/styles/components/settings-menu.css b/core/client/app/styles/components/settings-menu.css
@@ -19,7 +19,7 @@
     transform: translate3d(350px, 0px, 0px);
 }
 
-body.settings-menu-expanded .settings-menu-container {
+.settings-menu-expanded .settings-menu-container {
     transform: translate3d(0, 0px, 0px);
 }
 
@@ -153,14 +153,20 @@ body.settings-menu-expanded .settings-menu-container {
 /* Background
 /* ---------------------------------------------------------- */
 
-body.settings-menu-expanded .content-cover {
+.settings-menu-expanded .content-cover,
+.mobile-menu-expanded .content-cover {
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
-    z-index: 600;
+    z-index: 900;
     transition: transform 0.4s cubic-bezier(0.1, 0.7, 0.1, 1);
-    transform: translate3d(-350px, 0px, 0px);
     /* Not off the screen, to give a parallax effect */
 }
+.settings-menu-expanded .content-cover {
+    transform: translate3d(-350px, 0px, 0px);
+}
+.mobile-menu-expanded .content-cover {
+    transform: translate3d(235px, 0px, 0px);
+}
diff --git a/core/client/app/styles/layouts/main.css b/core/client/app/styles/layouts/main.css
@@ -246,7 +246,7 @@
     }
 
     /* Bring it back on toggle */
-    .gh-main.open {
+    .mobile-menu-expanded .gh-main {
         transition: transform 0.10s;
         transform: translate3d(235px,0,0);
     }
@@ -256,14 +256,18 @@
     .gh-nav {
         width: 75vw;
     }
-    .gh-main.open {
+    .mobile-menu-expanded .gh-main {
         transform: translate3d(75vw,0,0);
     }
 }
 
 
 /* Auto Nav - Opens and closes like OSX dock
 /* ---------------------------------------------------------- */
+/* Autonav is hidden on mobile */
+.gh-autonav-toggle {
+    display: none;
+}
 
 @media (min-width: 801px) {
     .gh-autonav-toggle {

diff --git a/core/client/app/templates/-publish-bar.hbs b/core/client/app/templates/-publish-bar.hbs
@@ -3,7 +3,7 @@
         {{render 'post-tags-input'}}
 
         <div class="publish-bar-actions">
-            <button type="button" class="post-settings" {{action "toggleSettingsMenu"}}>
+            <button type="button" class="post-settings" {{action "openSettingsMenu"}}>
                 <i class="icon-settings"></i>
             </button>
             {{view "editor-save-button" id="entry-actions" classNameBindings="model.isNew:unsaved"}}

diff --git a/core/client/app/templates/application.hbs b/core/client/app/templates/application.hbs
@@ -2,19 +2,22 @@
 
 {{gh-alerts notify="topNotificationChange"}}
 
-<div class="gh-viewport {{if autoNav 'gh-autonav'}}">
+<div class="gh-viewport {{if autoNav 'gh-autonav'}} {{if showSettingsMenu 'settings-menu-expanded'}} {{if showMobileMenu 'mobile-menu-expanded'}}">
 
     {{#unless signedOut}}
-        {{gh-nav-menu open=showNavMenu autoNav=autoNav toggleMaximise="navMenuToggleMaximise" openModal="openModal"}}
+        {{gh-nav-menu open=autoNavOpen onMouseEnter="openAutoNav" toggleMaximise="toggleAutoNav" openModal="openModal"}}
     {{/unless}}
 
-    {{#gh-main onMouseEnter="closeNavMenu" data-notification-count=topNotificationCount}}
+    {{#gh-main onMouseEnter="closeAutoNav" data-notification-count=topNotificationCount}}
         {{outlet}}
     {{/gh-main}}
 
+
     {{gh-notifications}}
 
+    {{gh-content-cover onClick="closeMenus" onMouseEnter="closeAutoNav"}}
+
     {{outlet "modal"}}
     {{outlet "settings-menu"}}
 
-</div>{{!gh-viewport}}
+</div>{{!gh-viewport}}
diff --git a/core/client/app/templates/components/gh-view-title.hbs b/core/client/app/templates/components/gh-view-title.hbs
@@ -0,0 +1 @@
+<h2 class="view-title"><button {{action "openMobileMenu"}} class="gh-mobilemenu-button" role="presentation"><i class="icon-gh"><span class="sr-only">Menu</span></i></button> {{yield}}</h2>
diff --git a/core/client/app/templates/post-settings-menu.hbs b/core/client/app/templates/post-settings-menu.hbs
@@ -1,11 +1,9 @@
-{{gh-content-cover onClick="closeSettingsMenu" onMouseEnter="closeNavMenu"}}
-
 {{#gh-tabs-manager selected="showSubview" id="entry-controls" class="settings-menu-container"}}
 <div id="entry-controls">
     <div class="{{if isViewingSubview 'settings-menu-pane-out-left' 'settings-menu-pane-in'}} settings-menu settings-menu-pane">
         <div class="settings-menu-header">
             <h4>Post Settings</h4>
-            <button class="close icon-x settings-menu-header-action" {{action "closeSettingsMenu"}}><span class="hidden">Close</span></button>
+            <button class="close icon-x settings-menu-header-action" {{action "closeMenus"}}><span class="hidden">Close</span></button>
         </div>
         <div class="settings-menu-content">
             {{gh-uploader uploaded="setCoverImage" canceled="clearCoverImage" description="Add post image" image=model.image uploaderReference=uploaderReference tagName="section"}}

diff --git a/core/client/app/templates/settings/apps.hbs b/core/client/app/templates/settings/apps.hbs
@@ -1,5 +1,5 @@
 <header class="view-header">
-    <h2 class="view-title">Apps</h2>
+    {{#gh-view-title openMobileMenu="openMobileMenu"}}Apps{{/gh-view-title}}
 </header>
 
 <section class="view-content settings-apps">

diff --git a/core/client/app/templates/settings/code-injection.hbs b/core/client/app/templates/settings/code-injection.hbs
@@ -1,5 +1,5 @@
 <header class="view-header">
-    <h2 class="view-title">Code Injection</h2>
+    {{#gh-view-title openMobileMenu="openMobileMenu"}}Code Injection{{/gh-view-title}}
     <section class="view-actions">
         <button type="button" class="btn btn-blue" {{action "save"}}>Save</button>
     </section>

diff --git a/core/client/app/templates/settings/general.hbs b/core/client/app/templates/settings/general.hbs
@@ -1,5 +1,5 @@
 <header class="view-header">
-    <h2 class="view-title"><button class="gh-mobilemenu-button" role="presentation"><i class="icon-gh"><span class="sr-only">Menu</span></i></button> General</h2>
+    {{#gh-view-title openMobileMenu="openMobileMenu"}}General{{/gh-view-title}}
     <section class="view-actions">
         <button type="button" class="btn btn-blue" {{action "save"}}>Save</button>
     </section>

diff --git a/core/client/app/templates/settings/labs.hbs b/core/client/app/templates/settings/labs.hbs
@@ -1,5 +1,5 @@
 <header class="view-header">
-    <h2 class="view-title">Labs</h2>
+    {{#gh-view-title openMobileMenu="openMobileMenu"}}Labs{{/gh-view-title}}
 </header>
 
 

diff --git a/core/client/app/templates/settings/navigation.hbs b/core/client/app/templates/settings/navigation.hbs
@@ -1,5 +1,5 @@
 <header class="view-header">
-    <h2 class="view-title">Navigation</h2>
+    {{#gh-view-title openMobileMenu="openMobileMenu"}}Navigation{{/gh-view-title}}
     <section class="view-actions">
         <button type="button" class="btn btn-blue" {{action "save"}}>Save</button>
     </section>

diff --git a/core/client/app/templates/settings/tags.hbs b/core/client/app/templates/settings/tags.hbs
@@ -1,5 +1,5 @@
 <header class="view-header">
-    <h2 class="view-title">Tags</h2>
+    {{#gh-view-title openMobileMenu="openMobileMenu"}}Tags{{/gh-view-title}}
     <section class="view-actions">
         <button type="button" class="btn btn-green" {{action "newTag"}}>New Tag</button>
     </section>

diff --git a/core/client/app/templates/settings/tags/settings-menu.hbs b/core/client/app/templates/settings/tags/settings-menu.hbs
@@ -1,10 +1,8 @@
-{{gh-content-cover onClick="closeSettingsMenu" onMouseEnter="closeNavMenu"}}
-
 {{#gh-tabs-manager selected="showSubview" class="settings-menu-container"}}
     <div class="{{if isViewingSubview 'settings-menu-pane-out-left' 'settings-menu-pane-in'}} settings-menu settings-menu-pane">
         <div class="settings-menu-header">
             <h4>Tag Settings</h4>
-            <button class="close icon-x settings-menu-header-action" {{action "closeSettingsMenu"}}>
+            <button class="close icon-x settings-menu-header-action" {{action "closeMenus"}}>
                 <span class="hidden">Close</span>
             </button>
         </div>

diff --git a/core/client/app/templates/settings/users/index.hbs b/core/client/app/templates/settings/users/index.hbs
@@ -1,5 +1,5 @@
     <header class="view-header">
-        <h1 class="view-title">Team</h1>
+        {{#gh-view-title openMobileMenu="openMobileMenu"}}Team{{/gh-view-title}}
         <section class="view-actions">
             <button class="btn btn-green" {{action "openModal" "invite-new-user"}} >Invite People</button>
         </section>

diff --git a/core/client/app/templates/settings/users/user.hbs b/core/client/app/templates/settings/users/user.hbs
@@ -1,5 +1,7 @@
 <header class="view-header">
-    <h2 class="view-title">{{#link-to "settings.users"}}Team{{/link-to}} <i class="icon-arrow-right"></i> {{user.name}}</h2>
+    {{#gh-view-title openMobileMenu="openMobileMenu"}}
+        {{#link-to "settings.users"}}Team{{/link-to}} <i class="icon-arrow-right"></i> {{user.name}}
+    {{/gh-view-title}}
     <section class="view-actions">
         {{#if view.userActionsAreVisible}}
             <span class="dropdown">

diff --git a/core/client/app/views/mobile/content-view.js b/core/client/app/views/mobile/content-view.js
@@ -5,7 +5,10 @@ var MobileContentView = Ember.View.extend({
     // Ensure that loading this view brings it into view on mobile
     showContent: function () {
         if (mobileQuery.matches) {
-            this.get('parentView').showContent();
+            var parent = this.get('parentView');
+            if (parent.showContent) {
+                parent.showContent();
+            }
         }
     }.on('didInsertElement')
 });