0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-01-20 22:42:53 -05:00

Refactor navbar to eliminate nested {{link-to}}.

no related issue

This is essentially setting up a binding from the `LinkView`'s `active`
status and whatever is set as `alternativeActive` in the `{{link-to}}`
(in our case the `activating-list-item` component.

Screenshots showing that the proper CSS classes are given:

![screenshot](http://monosnap.com/image/tzOH6n82rIVGNEFAUWVOLN52QuASQ4.png)

![screenshot](http://monosnap.com/image/5gmcwJcj0kgEXt8lnET4OKgIZ8KRpH.png)

![screenshot](http://monosnap.com/image/UCVNukTXLMNfVneLhzwVyhkrVlGSBt.png)
This commit is contained in:
Robert Jackson 2014-04-01 22:09:28 -04:00
parent 397cd6c37c
commit 3a912bd89e
5 changed files with 20 additions and 12 deletions

View file

@ -1,6 +1,7 @@
import Resolver from 'ember/resolver';
import initFixtures from 'ghost/fixtures/init';
import {currentUser, injectCurrentUser} from 'ghost/initializers/current-user';
import 'ghost/utils/link-view';
var App = Ember.Application.extend({
/**
@ -20,4 +21,4 @@ initFixtures();
App.initializer(currentUser);
App.initializer(injectCurrentUser);
export default App;
export default App;

View file

@ -0,0 +1,5 @@
export default Ember.Component.extend({
tagName: 'li',
classNameBindings: ['active'],
active: false
});

View file

@ -4,17 +4,9 @@
</a>
<nav id="global-nav" role="navigation">
<ul id="main-menu" >
{{!-- @TODO: don't nest link-to attributes
currently required to get proper class styling --}}
{{#link-to "posts" class="content" tagName="li" disabled=true}}
{{#link-to "posts"}}Content{{/link-to}}
{{/link-to}}
{{#link-to "new" class="editor" tagName="li" disabled=true}}
{{#link-to "new"}}New post{{/link-to}}
{{/link-to}}
{{#link-to "settings" class="settings" tagName="li" disabled=true}}
{{#link-to "settings"}}Settings{{/link-to}}
{{/link-to}}
{{activating-list-item route="posts" title="Content" classNames="content"}}
{{activating-list-item route="new" title="New post" classNames="content"}}
{{activating-list-item route="settings" title="Settings" classNames="content"}}
<li id="usermenu" class="usermenu subnav">
<a href="#" class="dropdown">

View file

@ -0,0 +1 @@
{{#link-to route alternateActive=active}}{{title}}{{yield}}{{/link-to}}

View file

@ -0,0 +1,9 @@
Ember.LinkView.reopen({
active: Ember.computed('resolvedParams', 'routeArgs', function () {
var isActive = this._super();
Ember.set(this, 'alternateActive', isActive);
return isActive;
})
});