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:
parent
397cd6c37c
commit
3a912bd89e
5 changed files with 20 additions and 12 deletions
|
@ -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;
|
||||
|
|
5
core/client/components/activating-list-item.js
Normal file
5
core/client/components/activating-list-item.js
Normal file
|
@ -0,0 +1,5 @@
|
|||
export default Ember.Component.extend({
|
||||
tagName: 'li',
|
||||
classNameBindings: ['active'],
|
||||
active: false
|
||||
});
|
|
@ -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">
|
||||
|
|
|
@ -0,0 +1 @@
|
|||
{{#link-to route alternateActive=active}}{{title}}{{yield}}{{/link-to}}
|
9
core/client/utils/link-view.js
Normal file
9
core/client/utils/link-view.js
Normal 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;
|
||||
})
|
||||
});
|
Loading…
Add table
Reference in a new issue