Merge pull request #5414 from novaugust/zelda-menu-continued

Zelda menu z-index and viewport transition finishes

ghost/admin/app/components/gh-autonav-toggle.js

@@ -1,13 +0,0 @@
-import Ember from 'ember';
-
-export default Ember.Component.extend({
-    classNames: ['gh-autonav-toggle'],
-
-    maximise: false,
-
-    click: function () {
-        this.toggleProperty('maximise');
-
-        this.sendAction('onClick');
-    }
-});

ghost/admin/app/components/gh-menu-toggle.js

@@ -0,0 +1,49 @@
+/*
+This cute little component has two jobs.
+
+On desktop, it toggles autoNav behaviour. It tracks
+that state via the maximise property, and uses the
+state to render the appropriate icon.
+
+On mobile, it renders a closing icon, and clicking it
+closes the mobile menu
+*/
+
+import Ember from 'ember';
+import mobileQuery from 'ghost/utils/mobile';
+
+export default Ember.Component.extend({
+    classNames: ['gh-menu-toggle'],
+
+    isMobile: false,
+    maximise: false,
+
+    iconClass: Ember.computed('maximise', 'isMobile', function () {
+        if (this.get('maximise') && !this.get('isMobile')) {
+            return 'icon-maximise';
+        } else {
+            return 'icon-minimise';
+        }
+    }),
+
+    didInsertElement () {
+        this.set('isMobile', mobileQuery.matches);
+        this.set('mqListener', Ember.run.bind(this, function (mql) {
+            this.set('isMobile', mql.matches);
+        }));
+        mobileQuery.addListener(this.get('mqListener'));
+    },
+
+    willDestroyElement () {
+        mobileQuery.removeListener(this.get('mqListener'));
+    },
+
+    click: function () {
+        if (this.get('isMobile')) {
+            this.sendAction('mobileAction');
+        } else {
+            this.toggleProperty('maximise');
+            this.sendAction('desktopAction');
+        }
+    }
+});

ghost/admin/app/components/gh-nav-menu.js

@@ -9,17 +9,21 @@ export default Ember.Component.extend({
 
     open: false,
 
-    mouseEnter: function () {
+    mouseEnter () {
         this.sendAction('onMouseEnter');
     },
 
     actions: {
-        toggleMaximise: function () {
-            this.sendAction('toggleMaximise');
+        toggleAutoNav () {
+            this.sendAction('toggleAutoNav');
         },
 
-        openModal: function (modal) {
+        openModal (modal) {
             this.sendAction('openModal', modal);
+        },
+
+        closeMobileMenu () {
+            this.sendAction('closeMobileMenu');
         }
     }
 });

ghost/admin/app/components/gh-view-title.js

@@ -1,6 +1,8 @@
 import Ember from 'ember';
 
 export default Ember.Component.extend({
+    tagName: 'h2',
+    classNames: ['view-title'],
     actions: {
         openMobileMenu () {
             this.sendAction('openMobileMenu');

ghost/admin/app/controllers/application.js

@@ -39,6 +39,10 @@ export default Ember.Controller.extend({
 
         closeAutoNav () {
             this.set('autoNavOpen', false);
+        },
+
+        closeMobileMenu () {
+            this.set('showMobileMenu', false);
         }
     }
 });

ghost/admin/app/mixins/editor-base-route.js

@@ -48,8 +48,6 @@ var EditorBaseRoute = Ember.Mixin.create(styleBody, ShortcutsRoute, {
             deletedWithoutChanges = state.isDeleted &&
                 (state.isSaving || !state.isDirty);
 
-            this.send('closeMenus');
-
             if (!fromNewToEdit && !deletedWithoutChanges && controllerIsDirty) {
                 transition.abort();
                 this.send('openModal', 'leave-editor', [controller, transition]);

ghost/admin/app/routes/settings/tags.js

@@ -43,12 +43,6 @@ TagsRoute = AuthenticatedRoute.extend(CurrentUserSettings, PaginationRouteMixin,
 
     deactivate: function () {
         this.controller.send('resetPagination');
-    },
-
-    actions: {
-        willTransition: function () {
-            this.send('closeMenus');
-        }
     }
 });
 

ghost/admin/app/styles/components/settings-menu.css

@@ -170,3 +170,8 @@
 .mobile-menu-expanded .content-cover {
     transform: translate3d(235px, 0px, 0px);
 }
+@media (max-width: 500px) {
+    .mobile-menu-expanded .content-cover {
+        transform: translate3d(75vw, 0, 0);
+    }
+}

ghost/admin/app/styles/layouts/main.css

@@ -28,7 +28,7 @@
 
 .gh-nav {
     position: relative;
-    z-index: 1000;
+    z-index: 800;
     flex: 0 0 235px;
     display: flex;
     flex-direction: column;
@@ -233,67 +233,55 @@
         position: absolute;
         top: 0;
         left: 0;
-        z-index: 500;
         width: 235px;
         height: 100%;
+        transition: transform 0.4s cubic-bezier(0.1, 0.7, 0.1, 1);
+        transform: translate3d(-235px, 0px, 0px);
     }
-
-    .gh-main {
-        z-index: 1000;
-        transition: transform 0.15s;
-        /* translate3d for GPU accelerated animation - http://bit.ly/1EY1Xhx */
+    .mobile-menu-expanded .gh-nav {
         transform: translate3d(0,0,0);
     }
-
-    /* Bring it back on toggle */
-    .mobile-menu-expanded .gh-main {
-        transition: transform 0.10s;
-        transform: translate3d(235px,0,0);
-    }
 }
 
 @media (max-width: 500px) {
     .gh-nav {
         width: 75vw;
+        transform: translate3d(-75vw, 0px, 0px);
     }
-    .mobile-menu-expanded .gh-main {
-        transform: translate3d(75vw,0,0);
+    .mobile-menu-expanded .gh-nav {
+        transform: translate3d(0,0,0);
     }
 }
 
 
 /* Auto Nav - Opens and closes like OSX dock
 /* ---------------------------------------------------------- */
-/* Autonav is hidden on mobile */
-.gh-autonav-toggle {
-    display: none;
+
+.gh-menu-toggle {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 5px 10px;
+    width: 45px;
+    height: 27px;
+    border-right: #e1e1e1 1px solid;
+    line-height: 1;
+    cursor: pointer;
+}
+
+.gh-menu-toggle:hover {
+    cursor: pointer;
+}
+
+.gh-menu-toggle i {
+    transition: all 0.2s ease;
+}
+
+.gh-menu-toggle:hover i {
+    color: var(--blue);
 }
 
 @media (min-width: 801px) {
-    .gh-autonav-toggle {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        padding: 5px 10px;
-        width: 45px;
-        height: 27px;
-        border-right: #e1e1e1 1px solid;
-        line-height: 1;
-        cursor: pointer;
-    }
-
-    .gh-autonav-toggle:hover {
-        cursor: pointer;
-    }
-
-    .gh-autonav-toggle i {
-        transition: all 0.2s ease;
-    }
-
-    .gh-autonav-toggle:hover i {
-        color: var(--blue);
-    }
-
     /* Hide the nav */
     .gh-autonav .gh-nav {
         position: absolute;

ghost/admin/app/templates/application.hbs

@@ -5,7 +5,7 @@
 <div class="gh-viewport {{if autoNav 'gh-autonav'}} {{if showSettingsMenu 'settings-menu-expanded'}} {{if showMobileMenu 'mobile-menu-expanded'}}">
 
     {{#unless signedOut}}
-        {{gh-nav-menu open=autoNavOpen onMouseEnter="openAutoNav" toggleMaximise="toggleAutoNav" openModal="openModal"}}
+        {{gh-nav-menu open=autoNavOpen onMouseEnter="openAutoNav" toggleAutoNav="toggleAutoNav" closeMobileMenu="closeMobileMenu" openModal="openModal"}}
     {{/unless}}
 
     {{#gh-main onMouseEnter="closeAutoNav" data-notification-count=topNotificationCount}}

ghost/admin/app/templates/components/gh-autonav-toggle.hbs

@@ -1 +0,0 @@
-<i class="{{if maximise 'icon-maximise' 'icon-minimise'}}"></i>

ghost/admin/app/templates/components/gh-menu-toggle.hbs

@@ -0,0 +1 @@
+<i class="{{iconClass}}"></i>

ghost/admin/app/templates/components/gh-nav-menu.hbs

@@ -38,7 +38,7 @@
     </ul>
 </section>
 <footer class="gh-nav-footer">
-    {{gh-autonav-toggle onClick="toggleMaximise"}}
+    {{gh-menu-toggle desktopAction="toggleAutoNav" mobileAction="closeMobileMenu"}}
     <a class="gh-nav-footer-sitelink" href="{{config.blogUrl}}/" target="_blank">View blog</a>
     <div class="gh-help-menu">
         {{#gh-dropdown-button dropdownName="help-menu" tagName="div"}}

ghost/admin/app/templates/components/gh-view-title.hbs

@@ -1 +1,2 @@
-<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>
+<button {{action "openMobileMenu"}} class="gh-mobilemenu-button" role="presentation"><i class="icon-gh"><span class="sr-only">Menu</span></i></button> 
+{{yield}}

ghost/admin/app/templates/editor/edit.hbs

@@ -1,6 +1,8 @@
 <header class="view-header">
-    <h2 class="view-title gh-editor-title">{{gh-trim-focus-input type="text" id="entry-title" class="gh-input" placeholder="Your Post Title" value=model.titleScratch
-    tabindex="1" focus=shouldFocusTitle}}</h2>
+    {{#gh-view-title classNames="gh-editor-title" openMobileMenu="openMobileMenu"}}
+        {{gh-trim-focus-input type="text" id="entry-title" class="gh-input" placeholder="Your Post Title" value=model.titleScratch
+    tabindex="1" focus=shouldFocusTitle}}
+    {{/gh-view-title}}
     <section class="view-actions">
         <button type="button" class="post-settings" {{action "openSettingsMenu"}}>
             <i class="icon-settings"></i>

ghost/admin/app/templates/posts.hbs

@@ -1,5 +1,5 @@
 <header class="view-header">
-    <h2 class="view-title">Content</h2>
+    {{#gh-view-title openMobileMenu="openMobileMenu"}}Content{{/gh-view-title}}
     <section class="view-actions">
         {{#link-to "editor.new" class="btn btn-green" title="New Post"}}New Post{{/link-to}}
     </section>

ghost/admin/app/utils/mobile.js

@@ -1,3 +1,3 @@
-var mobileQuery = matchMedia('(max-width: 900px)');
+var mobileQuery = matchMedia('(max-width: 800px)');
 
 export default mobileQuery;