From 92dd05d06ddeb2a9434df6038c432e6b167c1c99 Mon Sep 17 00:00:00 2001 From: Maxime Quandalle Date: Sun, 7 Jun 2015 10:30:27 +0200 Subject: 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 | 8 ++++---- client/components/boards/router.js | 7 +------ client/components/cards/details.js | 8 ++++++++ client/components/forms/inlinedform.jade | 2 +- client/components/forms/inlinedform.js | 18 ++++-------------- client/components/lists/main.js | 2 +- client/components/main/header.styl | 12 ++++-------- client/components/main/popup.js | 5 ----- client/components/main/popup.tpl.jade | 2 +- client/components/sidebar/sidebar.js | 2 +- client/components/users/userHeader.jade | 6 +++--- 11 files changed, 28 insertions(+), 44 deletions(-) (limited to 'client/components') diff --git a/client/components/boards/boardHeader.jade b/client/components/boards/boardHeader.jade index 86fbe255..258fe843 100644 --- a/client/components/boards/boardHeader.jade +++ b/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}} diff --git a/client/components/boards/router.js b/client/components/boards/router.js index e5ccecdb..1c485225 100644 --- a/client/components/boards/router.js +++ b/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); } -); diff --git a/client/components/cards/details.js b/client/components/cards/details.js index 6ab7da22..3f141622 100644 --- a/client/components/cards/details.js +++ b/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' + } +); diff --git a/client/components/forms/inlinedform.jade b/client/components/forms/inlinedform.jade index 5ad9039e..40e1c35c 100644 --- a/client/components/forms/inlinedform.jade +++ b/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 diff --git a/client/components/forms/inlinedform.js b/client/components/forms/inlinedform.js index e4331892..2988738c 100644 --- a/client/components/forms/inlinedform.js +++ b/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' + } ); diff --git a/client/components/lists/main.js b/client/components/lists/main.js index bcdba7c4..2b07c3ee 100644 --- a/client/components/lists/main.js +++ b/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) { diff --git a/client/components/main/header.styl b/client/components/main/header.styl index eaf391f7..76a1bc8c 100644 --- a/client/components/main/header.styl +++ b/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 diff --git a/client/components/main/popup.js b/client/components/main/popup.js index 8672d08a..8cb12dd0 100644 --- a/client/components/main/popup.js +++ b/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(); }, diff --git a/client/components/main/popup.tpl.jade b/client/components/main/popup.tpl.jade index be528f46..e6cc982a 100644 --- a/client/components/main/popup.tpl.jade +++ b/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}}" diff --git a/client/components/sidebar/sidebar.js b/client/components/sidebar/sidebar.js index f3844fcd..cfd38c89 100644 --- a/client/components/sidebar/sidebar.js +++ b/client/components/sidebar/sidebar.js @@ -111,7 +111,7 @@ BlazeComponent.extendComponent({ snap: false, snapMode: 'both', start: function() { - EscapeActions.executeLowerThan('popup'); + EscapeActions.executeUpTo('popup'); } }); }); diff --git a/client/components/users/userHeader.jade b/client/components/users/userHeader.jade index b8201cb6..960264a9 100644 --- a/client/components/users/userHeader.jade +++ b/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") -- cgit v1.2.3-1-g7c22