diff options
author | Maxime Quandalle <maxime@quandalle.com> | 2015-05-29 23:35:30 +0200 |
---|---|---|
committer | Maxime Quandalle <maxime@quandalle.com> | 2015-05-30 03:50:14 +0200 |
commit | 2c0030da62b9a1e59a55e3429fe514bbd51e1ee3 (patch) | |
tree | b2834702806e59cb05ea02e2c377266eb17d6c8f /client/components/boards | |
parent | 6457615e6ac6717d2175be9483388d4d70ea1c4a (diff) | |
download | wekan-2c0030da62b9a1e59a55e3429fe514bbd51e1ee3.tar.gz wekan-2c0030da62b9a1e59a55e3429fe514bbd51e1ee3.tar.bz2 wekan-2c0030da62b9a1e59a55e3429fe514bbd51e1ee3.zip |
Implement multi-selection
The UI and the internal APIs are still rough around the edges but the
feature is basically working. You can now select multiple cards and
move them together or (un|)assign them a label.
Diffstat (limited to 'client/components/boards')
-rw-r--r-- | client/components/boards/boardBody.jade | 5 | ||||
-rw-r--r-- | client/components/boards/boardBody.js | 19 | ||||
-rw-r--r-- | client/components/boards/boardBody.styl | 5 | ||||
-rw-r--r-- | client/components/boards/boardHeader.jade | 32 | ||||
-rw-r--r-- | client/components/boards/boardHeader.js | 21 | ||||
-rw-r--r-- | client/components/boards/colors.styl | 24 | ||||
-rw-r--r-- | client/components/boards/router.js | 8 |
7 files changed, 94 insertions, 20 deletions
diff --git a/client/components/boards/boardBody.jade b/client/components/boards/boardBody.jade index 672a3860..57970c4f 100644 --- a/client/components/boards/boardBody.jade +++ b/client/components/boards/boardBody.jade @@ -8,7 +8,10 @@ template(name="board") template(name="boardComponent") if this .board-wrapper(class=colorClass) - .board-canvas(class=sidebarSize) + .board-canvas( + class=sidebarSize + class="{{#if MultiSelection.isActive}}is-multiselection-active{{/if}}" + class="{{#if draggingActive.get}}is-dragging-active{{/if}}") .lists.js-lists each lists +list(this) diff --git a/client/components/boards/boardBody.js b/client/components/boards/boardBody.js index cf32f764..b5e4154a 100644 --- a/client/components/boards/boardBody.js +++ b/client/components/boards/boardBody.js @@ -12,14 +12,16 @@ BlazeComponent.extendComponent({ return 'boardComponent'; }, + onCreated: function() { + this.draggingActive = new ReactiveVar(false); + }, + openNewListForm: function() { this.componentChildren('addListForm')[0].open(); }, - showNewCardForms: function(value) { - _.each(this.componentChildren('list'), function(listComponent) { - listComponent.showNewCardForm(value); - }); + setIsDragging: function(bool) { + this.draggingActive.set(bool); }, scrollLeft: function(position) { @@ -79,8 +81,8 @@ BlazeComponent.extendComponent({ helper: 'clone', items: '.js-list:not(.js-list-composer)', placeholder: 'list placeholder', - start: function(event, ui) { - $('.list.placeholder').height(ui.item.height()); + start: function(evt, ui) { + ui.placeholder.height(ui.helper.height()); Popup.close(); }, stop: function() { @@ -97,6 +99,11 @@ BlazeComponent.extendComponent({ } }); + // Disable drag-dropping while in multi-selection mode + self.autorun(function() { + self.$(lists).sortable('option', 'disabled', MultiSelection.isActive()); + }); + // If there is no data in the board (ie, no lists) we autofocus the list // creation form by clicking on the corresponding element. if (self.data().lists().count() === 0) { diff --git a/client/components/boards/boardBody.styl b/client/components/boards/boardBody.styl index de4963ab..70d8f3d6 100644 --- a/client/components/boards/boardBody.styl +++ b/client/components/boards/boardBody.styl @@ -19,6 +19,11 @@ &.next-sidebar margin-right: 248px + &.is-dragging-active + + .open-minicard-composer + display: none + .lists align-items: flex-start display: flex diff --git a/client/components/boards/boardHeader.jade b/client/components/boards/boardHeader.jade index 0ea359fc..f10fcb22 100644 --- a/client/components/boards/boardHeader.jade +++ b/client/components/boards/boardHeader.jade @@ -27,15 +27,43 @@ template(name="headerBoard") i.fa.fa-times-thin else span {{_ 'filter'}} + + if currentUser.isBoardMember + a.board-header-btn.js-multiselection-activate( + title="{{#if MultiSelection.isActive}}{{_ 'filter-on-desc'}}{{/if}}" + class="{{#if MultiSelection.isActive}}emphasis{{/if}}") + i.fa.fa-check-square-o + if MultiSelection.isActive + span Multi-Selection is on + a.board-header-btn-close.js-multiselection-reset(title="{{_ 'filter-clear'}}") + i.fa.fa-times-thin + else + span Multi-Selection + .separator a.board-header-btn.js-open-board-menu i.board-header-btn-icon.fa.fa-cog template(name="boardMenuPopup") + if currentUser.isBoardMember + ul.pop-over-list + li: a Archived elements + li: a.js-change-board-color Change color + li: a Permissions + hr ul.pop-over-list - li: a.js-change-board-color Change color li: a Copy this board - li: a Permissions + //- + XXX Language should be handled by sandstorm, but for now display a + language selection link in the board menu. This link is normally present + in the header bar that is not displayed on sandstorm. + if isSandstorm + li: a.js-change-language {{_ 'language'}} + unless isSandstorm + if currentUser.isBoardAdmin + hr + ul.pop-over-list + li: a Close Board… template(name="boardVisibilityList") ul.pop-over-list diff --git a/client/components/boards/boardHeader.js b/client/components/boards/boardHeader.js index a78012ca..28238d4c 100644 --- a/client/components/boards/boardHeader.js +++ b/client/components/boards/boardHeader.js @@ -1,6 +1,7 @@ Template.boardMenuPopup.events({ 'click .js-rename-board': Popup.open('boardChangeTitle'), - 'click .js-change-board-color': Popup.open('boardChangeColor') + 'click .js-change-board-color': Popup.open('boardChangeColor'), + 'click .js-change-language': Popup.open('setLanguage') }); Template.boardChangeTitlePopup.events({ @@ -24,14 +25,15 @@ BlazeComponent.extendComponent({ }, isStarred: function() { - var boardId = this.currentData()._id; + var currentBoard = this.currentData(); var user = Meteor.user(); - return boardId && user && user.hasStarred(boardId); + return currentBoard && user && user.hasStarred(currentBoard._id); }, // Only show the star counter if the number of star is greater than 2 showStarCounter: function() { - return this.currentData().stars > 2; + var currentBoard = this.currentData(); + return currentBoard && currentBoard.stars > 2; }, events: function() { @@ -49,6 +51,17 @@ BlazeComponent.extendComponent({ evt.stopPropagation(); Sidebar.setView(); Filter.reset(); + }, + 'click .js-multiselection-activate': function() { + var currentCard = Session.get('currentCard'); + MultiSelection.activate(); + if (currentCard) { + MultiSelection.add(currentCard); + } + }, + 'click .js-multiselection-reset': function(evt) { + evt.stopPropagation(); + MultiSelection.disable(); } }]; } diff --git a/client/components/boards/colors.styl b/client/components/boards/colors.styl index 2b60dde3..1097b20a 100644 --- a/client/components/boards/colors.styl +++ b/client/components/boards/colors.styl @@ -1,6 +1,10 @@ // We define a set of six board colors that we took from the FlatUI palette. // http://flatuicolors.com - +// +// XXX Centralizing all these properties in a single file just because their +// value is derivedform the same color, doesn't make any sense. We should create +// a macro that would generate 6 version of a given propertie and dispatch this +// list in the other stylus files. setBoardColor(color) &#header, &.sk-spinner div, @@ -8,13 +12,16 @@ setBoardColor(color) .board-list & a background-color: color - & .minicard.is-selected .minicard-details + .is-selected .minicard border-left: 3px solid color - &.pop-over .pop-over-list li a:hover, button[type=submit].primary, input[type=submit].primary background-color: darken(color, 20%) + &.pop-over .pop-over-list li a:hover, + .sidebar-list li a:hover + background-color: lighten(color, 10%) + &#header #header-quick-access ul li.current border-bottom: 2px solid lighten(color, 10%) @@ -28,6 +35,17 @@ setBoardColor(color) &:hover .board-header-btn-close background: darken(complement(color), 20%) + .materialCheckBox.is-checked + border-bottom: 2px solid color + border-right: 2px solid color + + .is-multiselection-active .multi-selection-checkbox + &.is-checked + .minicard + background: lighten(color, 90%) + + &:not(.is-checked) + .minicard:hover:not(.minicard-composer) + background: lighten(color, 97%) + .board-color-nephritis setBoardColor(#27AE60) diff --git a/client/components/boards/router.js b/client/components/boards/router.js index 81fc3d91..e5ccecdb 100644 --- a/client/components/boards/router.js +++ b/client/components/boards/router.js @@ -19,7 +19,6 @@ Router.route('/boards/:_id/:slug', { onAfterAction: function() { // XXX We probably shouldn't rely on Session Session.set('sidebarIsOpen', true); - Session.set('currentWidget', 'home'); Session.set('menuWidgetIsOpen', false); }, waitOn: function() { @@ -37,6 +36,7 @@ Router.route('/boards/:_id/:slug', { Router.route('/boards/:boardId/:slug/:cardId', { name: 'Card', template: 'board', + noEscapeActions: true, onAfterAction: function() { Tracker.nonreactive(function() { if (! Session.get('currentCard') && Sidebar) { @@ -57,7 +57,7 @@ Router.route('/boards/:boardId/:slug/:cardId', { }); // Close the card details pane by pressing escape -EscapeActions.register('detailedPane', - function() { return ! Session.equals('currentCard', null); }, - function() { Utils.goBoardId(Session.get('currentBoard')); } +EscapeActions.register('detailsPane', + function() { Utils.goBoardId(Session.get('currentBoard')); }, + function() { return ! Session.equals('currentCard', null); } ); |