Maintain a visual indication of the popup openerElement

4 files changed, 15 insertions, 6 deletions

diff --git a/client/components/boards/boardHeader.jade b/client/components/boards/boardHeader.jade
index f10fcb22..6f12b8cc 100644
--- a/client/components/boards/boardHeader.jade
+++ b/client/components/boards/boardHeader.jade
@@ -6,7 +6,7 @@ template(name="headerBoard")
   .board-header-btns.left
     unless isSandstorm
       if currentUser
-        a.board-header-btn.js-star-board(class="{{#if isStarred}}is-hovered{{/if}}"
+        a.board-header-btn.js-star-board(class="{{#if isStarred}}is-active{{/if}}"
           title="{{#if isStarred}}{{_ 'click-to-unstar'}}{{else}}{{_ 'click-to-star'}}{{/if}} {{_ 'starred-boards-description'}}")
           i.fa(class="fa-star{{#unless isStarred}}-o{{/unless}}")
           if showStarCounter
diff --git a/client/components/main/header.styl b/client/components/main/header.styl
index e6f13239..eaf391f7 100644
--- a/client/components/main/header.styl
+++ b/client/components/main/header.styl
@@ -120,7 +120,7 @@
 
     .board-header-btn,
     h1.is-clickable
-      &.is-hovered,
+      &.is-active,
       &:hover
         background: rgba(0, 0, 0, .15)
 
diff --git a/client/lib/popup.js b/client/lib/popup.js
index 6ec7dfdb..fe8b581b 100644
--- a/client/lib/popup.js
+++ b/client/lib/popup.js
@@ -19,9 +19,13 @@ Popup = {
     return function(evt) {
       // If a popup is already openened, clicking again on the opener element
       // should close it -- and interupt the current `open` function.
-      if (self.isOpen() &&
-          self._getTopStack().openerElement === evt.currentTarget) {
-        return self.close();
+      if (self.isOpen()) {
+        var previousOpenerElement = self._getTopStack().openerElement;
+        if (previousOpenerElement === evt.currentTarget) {
+          return self.close();
+        } else {
+          $(previousOpenerElement).removeClass('is-active');
+        }
       }
 
       // We determine the `openerElement` (the DOM element that is being clicked
@@ -36,6 +40,7 @@ Popup = {
         self._stack = [];
         openerElement = evt.currentTarget;
       }
+      $(openerElement).addClass('is-active');
 
       // We modify the event to prevent the popup being closed when the event
       // bubble up to the document element.
@@ -122,6 +127,10 @@ Popup = {
     if (this.isOpen()) {
       Blaze.remove(this.current);
       this.current = null;
+
+      var openerElement = this._getTopStack().openerElement;
+      $(openerElement).removeClass('is-active');
+
       this._stack = [];
     }
   },
diff --git a/client/styles/icons.styl b/client/styles/icons.styl
index 8635375a..a8e21bb7 100644
--- a/client/styles/icons.styl
+++ b/client/styles/icons.styl
@@ -25,6 +25,6 @@ a
   &.fa, i.fa
     color: darken(white, 35%)
 
-  &:hover
+  &:hover, &.is-active
     &.fa, i.fa
       color: darken(white, 60%)