From 2c0030da62b9a1e59a55e3429fe514bbd51e1ee3 Mon Sep 17 00:00:00 2001 From: Maxime Quandalle Date: Fri, 29 May 2015 23:35:30 +0200 Subject: 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. --- client/components/cards/details.styl | 27 -------- client/components/cards/labels.styl | 5 ++ client/components/cards/minicard.jade | 16 +++-- client/components/cards/minicard.js | 25 ++++++- client/components/cards/minicard.styl | 119 +++++++++++++++++++--------------- client/components/cards/popups.jade | 5 +- 6 files changed, 107 insertions(+), 90 deletions(-) (limited to 'client/components/cards') diff --git a/client/components/cards/details.styl b/client/components/cards/details.styl index 68a436f9..6b1a4cd4 100644 --- a/client/components/cards/details.styl +++ b/client/components/cards/details.styl @@ -134,33 +134,6 @@ .card-composer padding-bottom: 8px -.cc-controls - margin-top: 1px - - input[type="submit"] - float: left - margin-top: 0 - padding: 5px 18px - - .icon-lg - float: left - - .cc-opt - float: right - -.minicard-placeholder, -.minicard.placeholder - background: silver - border: none - min-height: 18px - - .hook - height: 18px - position: absolute - right: 0 - top: 0 - width: 18px - input[type="text"].attachment-add-link-input float: left margin: 0 0 8px diff --git a/client/components/cards/labels.styl b/client/components/cards/labels.styl index 27058b21..9514ce45 100644 --- a/client/components/cards/labels.styl +++ b/client/components/cards/labels.styl @@ -19,6 +19,11 @@ &:hover color: white + &.square + height: 30px + width: @height + padding: 0 + .card-label-green background-color: #3cb500 diff --git a/client/components/cards/minicard.jade b/client/components/cards/minicard.jade index e1176264..ad51ce22 100644 --- a/client/components/cards/minicard.jade +++ b/client/components/cards/minicard.jade @@ -1,7 +1,11 @@ template(name="minicard") - .minicard.card.js-minicard( - class="{{#if isSelected}}is-selected{{/if}}") - a.minicard-details.clearfix.show(href=absoluteUrl) + a.minicard-wrapper.js-minicard(href=absoluteUrl + class="{{#if isSelected}}is-selected{{/if}}" + class="{{#if MultiSelection.isSelected _id}}is-checked{{/if}}") + if MultiSelection.isActive + .materialCheckBox.multi-selection-checkbox.js-toggle-multi-selection( + class="{{#if MultiSelection.isSelected _id}}is-checked{{/if}}") + .minicard if cover .minicard-cover.js-card-cover(style="background-image: url({{cover.url}});") if labels @@ -16,12 +20,12 @@ template(name="minicard") .badges if comments.count .badge(title="{{_ 'card-comments-title' comments.count }}") - span.badge-icon.icon-sm.fa.fa-comment-o + span.badge-icon.fa.fa-comment-o .badge-text= comments.count if description .badge.badge-state-image-only(title=description) - span.badge-icon.icon-sm.fa.fa-align-left + span.badge-icon.fa.fa-align-left if attachments.count .badge - span.badge-icon.icon-sm.fa.fa-paperclip + span.badge-icon.fa.fa-paperclip span.badge-text= attachments.count diff --git a/client/components/cards/minicard.js b/client/components/cards/minicard.js index b339580b..81d8c0d4 100644 --- a/client/components/cards/minicard.js +++ b/client/components/cards/minicard.js @@ -2,7 +2,6 @@ // 'click .member': Popup.open('cardMember') // }); - BlazeComponent.extendComponent({ template: function() { return 'minicard'; @@ -10,5 +9,29 @@ BlazeComponent.extendComponent({ isSelected: function() { return Session.equals('currentCard', this.currentData()._id); + }, + + toggleMultiSelection: function(evt) { + evt.stopPropagation(); + evt.preventDefault(); + MultiSelection.toogle(this.currentData()._id); + }, + + clickOnMiniCard: function(evt) { + if (MultiSelection.isActive() || evt.shiftKey) { + evt.stopImmediatePropagation(); + evt.preventDefault(); + var methodName = evt.shiftKey ? 'toogleRange' : 'toogle'; + MultiSelection[methodName](this.currentData()._id); + } + }, + + events: function() { + return [{ + submit: this.addCard, + 'click .js-toggle-multi-selection': this.toggleMultiSelection, + 'click .js-minicard': this.clickOnMiniCard, + 'click .open-minicard-composer': this.scrollToBottom + }]; } }).register('minicard'); diff --git a/client/components/cards/minicard.styl b/client/components/cards/minicard.styl index 775d31eb..a5110584 100644 --- a/client/components/cards/minicard.styl +++ b/client/components/cards/minicard.styl @@ -1,30 +1,57 @@ +.minicard-wrapper + cursor: pointer + position: relative + display: flex + align-items: center + margin-bottom: 9px + + &.draggable-hover-card + background-color: #f0f0f0 + border-bottom-color: #c2c2c2 + + &.placeholder + background: darken(white, 20%) + border-radius: 2px + + &.ui-sortable-helper + transform: rotate(4deg) + display: block !important + + .and-n-other + width: 100% + height: 16px + padding: 4px + background-color: darken(white, 5%) + text-align: center + border-radius: 3px + + .multi-selection-checkbox + display: none + + .multi-selection-checkbox + .minicard + margin-left: 8px + .minicard + padding: 6px 8px 2px + position: relative + flex: 1 + flex-wrap: wrap background-color: #fff + min-height: 20px box-shadow: 0 1px 2px rgba(0,0,0,.2) border-radius: 2px - cursor: pointer - margin-bottom: 9px - min-height: 20px - position: relative - z-index: 0 + color: #4d4d4d overflow: hidden transition: transform 0.2s, border-radius 0.2s, border-left 0.2s - a - color: #4d4d4d - - &.active-card - background-color: #f0f0f0 - border-bottom-color: #c2c2c2 - - .minicard-operation - display: block - - &.draggable-hover-card - background-color: #f0f0f0 - border-bottom-color: #c2c2c2 + .is-selected & + transform: translateX(11px) + border-bottom-right-radius: 0 + border-top-right-radius: 0 + z-index: 100 + box-shadow: -2px 1px 2px rgba(0,0,0,.2) .minicard-cover background-position: center @@ -39,21 +66,6 @@ background-size: auto background-position: center - .minicard-details - padding: 6px 8px 2px - position: relative - // z-index: 1 - - &.is-selected - transform: translateX(11px) - border-bottom-right-radius: 0 - border-top-right-radius: 0 - z-index: 100 - box-shadow: -2px 1px 2px rgba(0,0,0,.2) - - a.minicard-details - text-decoration:none - .minicard-details-overlay background: transparent bottom: 0 @@ -121,23 +133,24 @@ .minicard-members:empty display: none - &.ui-sortable-helper - transform: rotate(4deg) - -.badges - float: left - - &:empty - display: none - -textarea.minicard-composer-textarea, -textarea.minicard-composer-textarea:focus - background: none - border: none - box-shadow: none - height: auto - margin-bottom: 4px - padding: 0 - max-height: 162px - min-height: 54px - overflow-y: auto + .badges + float: left + + &:empty + display: none + + &.minicard-composer + margin-bottom: 10px + + textarea.minicard-composer-textarea, + textarea.minicard-composer-textarea:focus + resize: none + background: none + border: none + box-shadow: none + height: auto + margin: 0 + padding: 0 + max-height: 162px + min-height: 54px + overflow-y: auto diff --git a/client/components/cards/popups.jade b/client/components/cards/popups.jade index 0b5aa4c0..0d10c147 100644 --- a/client/components/cards/popups.jade +++ b/client/components/cards/popups.jade @@ -1,8 +1,7 @@ template(name="cardMembersPopup") - //- input.js-search-mem(autofocus placeholder="Search members…" type="text") - ul.pop-over-member-list.checkable.js-mem-list + ul.pop-over-member-list.js-mem-list each board.members - li.item.js-member-item(class="{{#if isCardMember}}active{{/if}}") + li.item(class="{{#if isCardMember}}active{{/if}}") a.name.js-select-member(href="#") +userAvatar(user=user size="small") span.full-name -- cgit v1.2.3-1-g7c22