Skip to content

Commit

Permalink
[WIP] Wire up new mobile nav
Browse files Browse the repository at this point in the history
References #3810

With GUI2, there's now a number of places to open the mobile navigation menu. This handles those clicks.
  • Loading branch information
PaulAdamDavis committed Sep 10, 2014
1 parent 47a0a71 commit 00abfa6
Show file tree
Hide file tree
Showing 9 changed files with 95 additions and 22 deletions.
29 changes: 26 additions & 3 deletions core/client/assets/sass/components/navigation.scss
Original file line number Diff line number Diff line change
Expand Up @@ -205,7 +205,7 @@ body.right-outlet-expanded & {
display: block;
}

&.global-nav-expanded {
body.global-nav-expanded & {
transform: translate3d(0, 0px, 0px);
}
}
Expand Down Expand Up @@ -257,13 +257,13 @@ body.right-outlet-expanded & {
bottom: 0;
left: 0;
height: auto;
padding: 15px;
padding: 0;
border-bottom: none;
border-top: $darkgrey 1px solid;
transition: color 0.5s, background 0.5s;

.nav-label {
padding: 0;
padding: 15px;
height: auto;
}

Expand Down Expand Up @@ -301,5 +301,28 @@ body.right-outlet-expanded & {
}
}

.dropdown .dropdown-menu {
top: auto;
right: auto;
bottom: calc(100% + 80px);
left: 10px;
}


}//.user-menu

body.global-nav-expanded & {

.nav-cover {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 600;
transition: transform $side-outlet-transition-duration cubic-bezier(0.1, 0.7, 0.1, 1);
transform: translate3d(260px, 0px, 0px); // Not off the screen, to give a parallax effect
}//.nav-cover
}//body.global-nav-expanded

}
2 changes: 1 addition & 1 deletion core/client/assets/sass/layouts/default.scss
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
transition: transform 0.4s cubic-bezier(0.1, 0.7, 0.1, 1);
}

&.global-nav-expanded {
body.global-nav-expanded & {
transform: translate3d(260px, 0px, 0px);
}

Expand Down
1 change: 1 addition & 0 deletions core/client/controllers/application.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ var ApplicationController = Ember.Controller.extend({
hideNav: Ember.computed.match('currentPath', /(error|signin|signup|setup|forgotten|reset)/),

topNotificationCount: 0,
showGlobalMobileNav: false,

actions: {
toggleMenu: function () {
Expand Down
4 changes: 4 additions & 0 deletions core/client/routes/application.js
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,10 @@ var ApplicationRoute = Ember.Route.extend(SimpleAuth.ApplicationRouteMixin, Shor
this._super();
},

toggleGlobalMobileNav: function () {
this.toggleProperty('controller.showGlobalMobileNav');
},

closePopups: function () {
this.get('popover').closePopovers();
this.get('notifications').closeAll();
Expand Down
16 changes: 9 additions & 7 deletions core/client/templates/-navbar.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,16 @@
<div class="nav-label"><i class="icon-ghost"></i> <span>Visit blog</span> </div>
</a>

{{#link-to "posts" classNames="nav-item nav-content"}}
{{#link-to "posts" classNames="nav-item nav-content js-nav-item"}}
<div class="nav-label"><i class="icon-content"></i> Content</div>
{{/link-to}}

{{#link-to "editor.new" classNames="nav-item nav-new"}}
{{#link-to "editor.new" classNames="nav-item nav-new js-nav-item"}}
<div class="nav-label"><i class="icon-add"></i> New Post</div>
{{/link-to}}

{{#unless session.user.isAuthor}}
{{#link-to "settings" classNames="nav-item nav-settings"}}
{{#link-to "settings" classNames="nav-item nav-settings js-nav-item"}}
<div class="nav-label"><i class="icon-settings2"></i> Settings</div>
{{/link-to}}
{{/unless}}
Expand All @@ -30,7 +30,7 @@
}}

<div class="nav-item user-menu" data-href="#">
{{#gh-popover-button popoverName="user-menu" tagName="div" classNames="nav-label"}}
{{#gh-popover-button popoverName="user-menu" tagName="div" classNames="nav-label clearfix"}}
{{#if session.user.image}}
<div class="image"><img {{bind-attr src="session.user.image"}} alt="{{session.user.name}}'s profile picture" /></div>
{{else}}
Expand All @@ -42,13 +42,15 @@
</div>
{{/gh-popover-button}}
{{#gh-popover tagName="div" classNames="dropdown" name="user-menu" closeOnClick="true"}}
<ul class="dropdown-menu dropdown-triangle-top-right" role="menu">
<li role="presentation">{{#link-to "settings.users.user" session.user.slug classNames="dropdown-item user-menu-profile" role="menuitem" tabindex="-1"}}Your Profile{{/link-to}}</li>
<ul class="dropdown-menu dropdown-triangle-top-right js-user-menu-dropdown-menu" role="menu">
<li role="presentation">{{#link-to "settings.users.user" session.user.slug classNames="dropdown-item user-menu-profile js-nav-item" role="menuitem" tabindex="-1"}}Your Profile{{/link-to}}</li>
<li role="presentation"><a class="dropdown-item user-menu-support" role="menuitem" tabindex="-1" href="http://support.ghost.org/">Help / Support</a></li>
<li class="divider"></li>
<li role="presentation">{{#link-to "signout" classNames="dropdown-item user-menu-signout" role="menuitem" tabindex="-1"}}Sign Out{{/link-to}}</li>
</ul>
{{/gh-popover}}
</div>{{! .user-menu }}

</nav>{{! .global-nav }}
</nav>{{! .global-nav }}

<div class="nav-cover js-nav-cover"></div>
2 changes: 1 addition & 1 deletion core/client/templates/editor/edit.hbs
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<header class="page-header">
<a class="menu-button" href="#"><span class="sr-only">Menu</span></a>
<button class="menu-button js-menu-button" {{action "toggleGlobalMobileNav"}}><span class="sr-only">Menu</span></button>
<h2 class="page-title">Editor</h2>
</header>

Expand Down
2 changes: 1 addition & 1 deletion core/client/templates/posts.hbs
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<header class="page-header">
<a class="menu-button" href="#"><span class="sr-only">Menu</span></a>
<button class="menu-button js-menu-button" {{action "toggleGlobalMobileNav"}}><span class="sr-only">Menu</span></button>
<h2 class="page-title">Content</h2>
</header>

Expand Down
2 changes: 1 addition & 1 deletion core/client/templates/settings.hbs
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<header class="page-header">
<a class="menu-button" href="#"><span class="sr-only">Menu</span></a>
<button class="menu-button js-menu-button" {{action "toggleGlobalMobileNav"}}><span class="sr-only">Menu</span></button>
<h2 class="page-title">Settings</h2>
</header>

Expand Down
59 changes: 51 additions & 8 deletions core/client/views/application.js
Original file line number Diff line number Diff line change
@@ -1,18 +1,61 @@
import {mobileQuery} from 'ghost/utils/mobile';

var ApplicationView = Ember.View.extend({
blogRoot: Ember.computed.alias('controller.ghostPaths.blogRoot'),
setupCloseSidebar: function () {

setupGlobalMobileNav: function () {
// #### Navigating within the sidebar closes it.
$(document).on('click', '.js-close-sidebar', function () {
$('body').removeClass('off-canvas');
var self = this;
$('body').on('click', '.js-nav-item', function () {
if (mobileQuery.matches) {
self.set('controller.showGlobalMobileNav', false);
}
});

// #### Close the nav if mobile and clicking outside of the nav or not the burger toggle
$('.js-nav-cover').on('click', function () {
var isOpen = self.get('controller.showGlobalMobileNav');
if (isOpen) {
self.set('controller.showGlobalMobileNav', false);
}
});

// #### Listen to the viewport and change user-menu dropdown triangle classes accordingly
mobileQuery.addListener(this.swapUserMenuPopoverTriangleClasses);
this.swapUserMenuPopoverTriangleClasses(mobileQuery);

}.on('didInsertElement'),

swapUserMenuPopoverTriangleClasses: function (mq) {
if (mq.matches) {
$('.js-user-menu-dropdown-menu').removeClass('dropdown-triangle-top-right ').addClass('dropdown-triangle-bottom');
} else {
$('.js-user-menu-dropdown-menu').removeClass('dropdown-triangle-bottom').addClass('dropdown-triangle-top-right');
}
},

actions: {
toggleSidebar: function () {
$('body').toggleClass('off-canvas');
showGlobalMobileNavObserver: function () {
if (this.get('controller.showGlobalMobileNav')) {
$('body').addClass('global-nav-expanded');
} else {
$('body').removeClass('global-nav-expanded');
}
}
}.observes('controller.showGlobalMobileNav'),

setupCloseNavOnDesktop: function () {
this.set('closeGlobalMobileNavOnDesktop', _.bind(function closeGlobalMobileNavOnDesktop(mq) {
if (!mq.matches) {
// Is desktop sized
this.set('controller.showGlobalMobileNav', false);
}
}, this));
mobileQuery.addListener(this.closeGlobalMobileNavOnDesktop);
}.on('didInsertElement'),

removeCloseNavOnDesktop: function () {
mobileQuery.removeListener(this.closeGlobalMobileNavOnDesktop);
}.on('willDestroyElement'),

});

export default ApplicationView;

0 comments on commit 00abfa6

Please sign in to comment.