Click on the page to escape the last action

This is a generalization of what we had for closing a popup by
clicking outside of it. It now works for inlinedForms and detailsPane
as well.

client/components/boards/boardHeader.jade

@@ -1,7 +1,7 @@
 template(name="headerBoard")
-  h1.header-board-menu(
-    class="{{#if currentUser.isBoardMember}}is-clickable js-edit-board-title{{/if}}")
-    = title
+  h1.header-board-menu
+    a(class="{{#if currentUser.isBoardAdmin}}js-edit-board-title{{else}}is-disabled{{/if}}")
+      = title
 
   .board-header-btns.left
     unless isSandstorm
@@ -12,7 +12,7 @@ template(name="headerBoard")
           if showStarCounter
             span {{_ 'board-nb-stars' stars}}
 
-      a.board-header-btn.js-change-visibility(class="{{#unless currentUser.isBoardAdmin}}no-edit{{/unless}}")
+      a.board-header-btn(class="{{#if currentUser.isBoardAdmin}}js-change-visibility{{else}}is-disabled{{/if}}")
         i.fa(class="{{#if isPublic}}fa-globe{{else}}fa-lock{{/if}}")
         span {{_ permission}}
 

client/components/boards/router.js

@@ -43,6 +43,7 @@ Router.route('/boards/:boardId/:slug/:cardId', {
         Sidebar.hide();
       }
     });
+    EscapeActions.executeUpTo('popup');
     var params = this.params;
     Session.set('currentBoard', params.boardId);
     Session.set('currentCard', params.cardId);
@@ -55,9 +56,3 @@ Router.route('/boards/:boardId/:slug/:cardId', {
     return Boards.findOne(this.params.boardId);
   }
 });
-
-// Close the card details pane by pressing escape
-EscapeActions.register('detailsPane',
-  function() { Utils.goBoardId(Session.get('currentBoard')); },
-  function() { return ! Session.equals('currentCard', null); }
-);

client/components/cards/details.js

@@ -94,3 +94,11 @@ Template.moveCardPopup.events({
     Popup.close();
   }
 });
+
+// Close the card details pane by pressing escape
+EscapeActions.register('detailsPane',
+  function() { Utils.goBoardId(Session.get('currentBoard')); },
+  function() { return ! Session.equals('currentCard', null); }, {
+    noClickEscapeOn: '.js-card-details'
+  }
+);

client/components/forms/inlinedform.jade

@@ -1,6 +1,6 @@
 template(name='inlinedForm')
   if isOpen.get
-    form(id=id class=classNames)
+    form.js-inlined-form(id=id class=classNames)
       +Template.contentBlock
   else
     +Template.elseBlock

client/components/forms/inlinedform.js

@@ -36,7 +36,7 @@ BlazeComponent.extendComponent({
 
   open: function() {
     // Close currently opened form, if any
-    EscapeActions.executeLowerThan('inlinedForm');
+    EscapeActions.executeUpTo('inlinedForm');
     this.isOpen.set(true);
     currentlyOpenedForm.set(this);
   },
@@ -61,18 +61,6 @@ BlazeComponent.extendComponent({
       'click .js-close-inlined-form': this.close,
       'click .js-open-inlined-form': this.open,
 
-      // Close the inlined form by pressing escape.
-      //
-      // Keydown (and not keypress) in necessary here because the `keyCode`
-      // property is consistent in all browsers, (there is not keyCode for the
-      // `keypress` event in firefox)
-      'keydown form input, keydown form textarea': function(evt) {
-        if (evt.keyCode === 27) {
-          evt.preventDefault();
-          EscapeActions.executeLowest();
-        }
-      },
-
       // Pressing Ctrl+Enter should submit the form
       'keydown form textarea': function(evt) {
         if (evt.keyCode === 13 && (evt.metaKey || evt.ctrlKey)) {
@@ -98,5 +86,7 @@ BlazeComponent.extendComponent({
 // Press escape to close the currently opened inlinedForm
 EscapeActions.register('inlinedForm',
   function() { currentlyOpenedForm.get().close(); },
-  function() { return currentlyOpenedForm.get() !== null; }
+  function() { return currentlyOpenedForm.get() !== null; }, {
+    noClickEscapeOn: '.js-inlined-form'
+  }
 );

client/components/lists/main.js

@@ -50,7 +50,7 @@ BlazeComponent.extendComponent({
       placeholder: 'minicard-wrapper placeholder',
       start: function(evt, ui) {
         ui.placeholder.height(ui.helper.height());
-        EscapeActions.executeLowerThan('popup');
+        EscapeActions.executeUpTo('popup');
         boardComponent.setIsDragging(true);
       },
       stop: function(evt, ui) {

client/components/main/header.styl

@@ -12,16 +12,15 @@
     font-size: 12px
     display: flex
 
-    #header-user-bar
+    #header-user-bar,
     ul li
       color: darken(white, 17%)
 
-      a, .fa
+      .fa
         color: inherit
-        text-decoration: none
 
-        &:hover
-          color: white
+      a:hover, a.is-active
+        color: white
 
     ul
       flex: 1
@@ -76,9 +75,6 @@
       float: left
       border-radius: 3px
 
-      &.is-clickable
-        cursor: pointer
-
     .board-header-btns
       display: block
       margin-top: 3px

client/components/main/popup.js

@@ -18,11 +18,6 @@ function whichTransitionEvent() {
 var transitionEvent = whichTransitionEvent();
 
 Popup.template.events({
-  click: function(evt) {
-    if (evt.originalEvent) {
-      evt.originalEvent.clickInPopup = true;
-    }
-  },
   'click .js-back-view': function() {
     Popup.back();
   },

client/components/main/popup.tpl.jade

@@ -1,4 +1,4 @@
-.pop-over(
+.pop-over.js-pop-over(
   class="{{#unless title}}miniprofile{{/unless}}"
   class=currentBoard.colorClass
   class="{{#unless title}}no-title{{/unless}}"

client/components/sidebar/sidebar.js

@@ -111,7 +111,7 @@ BlazeComponent.extendComponent({
           snap: false,
           snapMode: 'both',
           start: function() {
-            EscapeActions.executeLowerThan('popup');
+            EscapeActions.executeUpTo('popup');
           }
         });
       });

client/components/users/userHeader.jade

@@ -1,12 +1,12 @@
 template(name="headerUserBar")
-  a#header-user-bar
-    .header-user-bar-name.js-open-header-member-menu
+  #header-user-bar
+    a.header-user-bar-name.js-open-header-member-menu
       i.fa.fa-chevron-down
       if currentUser.profile.name
         = currentUser.profile.name
       else
         = currentUser.username
-    .header-user-bar-avatar.js-change-avatar
+    a.header-user-bar-avatar.js-change-avatar
       +userAvatar(user=currentUser)
 
 template(name="memberMenuPopup")