Merge pull request #3628 from novaugust/popover-btn-binding#3603

Add open class to popover buttons

ghost/admin/components/gh-popover-button.js

@@ -7,7 +7,7 @@ var PopoverButton = Ember.Component.extend(PopoverMixin, {
     /*Notify popover service this popover should be toggled*/
     click: function (event) {
         this._super(event);
-        this.get('popover').togglePopover(this.get('popoverName'));
+        this.get('popover').togglePopover(this.get('popoverName'), this);
     }
 });
 

ghost/admin/components/gh-popover.js

@@ -2,22 +2,22 @@ import PopoverMixin from 'ghost/mixins/popover-mixin';
 
 var GhostPopover = Ember.Component.extend(PopoverMixin, {
     classNames: 'ghost-popover fade-in',
-    classNameBindings: ['isOpen:open'],
     name: null,
+    closeOnClick: false,
+    //Helps track the user re-opening the menu while it's fading out.
+    closing: false,
 
-    //Don't manipulate isOpen directly! Use open() and close()
-    isOpen: false,
     open: function () {
         this.set('closing', false);
         this.set('isOpen', true);
+        this.set('button.isOpen', true);
     },
-
-    //Helps us track if the menu was opened again right after
-    //  it was closed.
-    closing: false,
     close: function () {
         var self = this;
         this.set('closing', true);
+        if (this.get('button')) {
+            this.set('button.isOpen', false);
+        }
         this.$().fadeOut(200, function () {
             //Make sure this wasn't an aborted fadeout by
             //checking `closing`.
@@ -32,16 +32,20 @@ var GhostPopover = Ember.Component.extend(PopoverMixin, {
         var isClosing = this.get('closing'),
             isOpen = this.get('isOpen'),
             name = this.get('name'),
+            button = this.get('button'),
             targetPopoverName = options.target;
         
         if (name === targetPopoverName && (!isOpen || isClosing)) {
+            if (!button) {
+                button = options.button;
+                this.set('button', button);
+            }
             this.open();
         } else if (isOpen) {
             this.close();
         }
     },
 
-    closeOnClick: false,
     click: function (event) {
         this._super(event);
         if (this.get('closeOnClick')) {

ghost/admin/initializers/popover.js

@@ -8,8 +8,8 @@ var PopoverService = Ember.Object.extend(Ember.Evented, BodyEventListener, {
     closePopovers: function () {
         this.trigger('close');
     },
-    togglePopover: function (popoverName) {
-        this.trigger('toggle', {target: popoverName});
+    togglePopover: function (popoverName, popoverButton) {
+        this.trigger('toggle', {target: popoverName, button: popoverButton});
     }
 });
 

ghost/admin/mixins/popover-mixin.js

@@ -2,6 +2,8 @@
   Popovers and their buttons are evented and do not propagate clicks.
 */
 var PopoverMixin = Ember.Mixin.create(Ember.Evented, {
+    classNameBindings: ['isOpen:open'],
+    isOpen: false,
     click: function (event) {
         this._super(event);
         return event.stopPropagation();

ghost/admin/routes/application.js

@@ -47,6 +47,7 @@ var ApplicationRoute = Ember.Route.extend(SimpleAuth.ApplicationRouteMixin, Shor
         },
 
         openModal: function (modalName, model, type) {
+            this.get('popover').closePopovers();
             modalName = 'modals/' + modalName;
             // We don't always require a modal to have a controller
             // so we're skipping asserting if one exists