Skip to content
Permalink
Browse files

Create GhostPopover component

issue #2418

- create ghost-popover component and template
- use it for the navigation popover
- still needs to handle global click event on the document
to close the popover
  • Loading branch information...
hswolff committed Apr 6, 2014
1 parent 0965d82 commit 4378895a3032bf1f975dc77009ae67ec43ae082b
@@ -19,6 +19,25 @@
transition: none;
}

/*
By default nav menu should be displayed as it's visibility is controllerd
by GhostPopover
*/
.navbar .subnav ul {
display: block;
}

/*
Styles for GhostPopoverComponent
*/

.ghost-popover {
display: none;
}

.ghost-popover.open {
display: block;
}
.fade-in {
animation: fadein 0.5s;
-moz-animation: fadein 0.5s; /* Firefox */
@@ -0,0 +1,8 @@

var GhostPopover = Ember.Component.extend({
classNames: 'ghost-popover',
classNameBindings: ['open'],
open: false
});

export default GhostPopover;
@@ -1,5 +1,10 @@
var ApplicationController = Ember.Controller.extend({
isLoggedOut: Ember.computed.match('currentPath', /(signin|signup|forgotten|reset)/)
isLoggedOut: Ember.computed.match('currentPath', /(signin|signup|forgotten|reset)/),
actions: {
toggleMenu: function () {
this.toggleProperty('showMenu');
}
}
});

export default ApplicationController;
@@ -9,20 +9,22 @@
{{activating-list-item route="settings" title="Settings" classNames="content"}}

<li id="usermenu" class="usermenu subnav">
<a href="#" class="dropdown">
<a href="" {{action 'toggleMenu'}} class="dropdown">
{{!-- @TODO: show avatar of logged in user --}}
<img class="avatar" src="/shared/img/user-image.png" alt="Avatar" />
{{!-- @TODO: show logged in user name or email --}}
<span class="name">Fake Ghost</span>
</a>
{{!-- @TODO: add functionality to allow for dropdown to work --}}
<ul class="overlay">
<li class="usermenu-profile"><a href="#">Your Profile</a></li>
<li class="divider"></li>
<li class="usermenu-help"><a href="http://ghost.org/forum/">Help / Support</a></li>
<li class="divider"></li>
<li class="usermenu-signout"><a href="#">Sign Out</a></li>
</ul>
{{#ghost-popover open=showMenu}}
<ul class="overlay">
<li class="usermenu-profile"><a href="#">Your Profile</a></li>
<li class="divider"></li>
<li class="usermenu-help"><a href="http://ghost.org/forum/">Help / Support</a></li>
<li class="divider"></li>
<li class="usermenu-signout"><a href="#">Sign Out</a></li>
</ul>
{{/ghost-popover}}
</li>
</ul>
</nav>

0 comments on commit 4378895

Please sign in to comment.
You can’t perform that action at this time.