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

core/client/assets/css/ember-hacks.css

@@ -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 */

core/client/components/ghost-popover.js

@@ -0,0 +1,8 @@
+
+var GhostPopover = Ember.Component.extend({
+    classNames: 'ghost-popover',
+    classNameBindings: ['open'],
+    open: false
+});
+
+export default GhostPopover;

core/client/controllers/application.js

@@ -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;

core/client/templates/-navbar.hbs

@@ -9,13 +9,14 @@
             {{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 --}}
+                {{#ghost-popover open=showMenu}}
                     <ul class="overlay">
                         <li class="usermenu-profile"><a href="#">Your Profile</a></li>
                         <li class="divider"></li>
@@ -23,6 +24,7 @@
                         <li class="divider"></li>
                         <li class="usermenu-signout"><a href="#">Sign Out</a></li>
                     </ul>
+                {{/ghost-popover}}
             </li>
         </ul>
     </nav>