Andreas/wekan
1
0
Fork 0
mirror of https://github.com/wekan/wekan.git synced 2025-12-16 15:30:13 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

Implement multi-selection

Browse source 
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.
This commit is contained in:
Maxime Quandalle 2015-05-29 23:35:30 +02:00
parent 6457615e6a
commit 2c0030da62
45 changed files with 883 additions and 933 deletions
Download patch file Download diff file Expand all files Collapse all files

17
client/components/sidebar/events.js
View file

@ -1,20 +1,3 @@
Template.filterSidebar.events({
'click .js-toggle-label-filter': function(event) {
Filter.labelIds.toogle(this._id);
Filter.resetExceptions();
event.preventDefault();
},
'click .js-toogle-member-filter': function(event) {
Filter.members.toogle(this._id);
Filter.resetExceptions();
event.preventDefault();
},
'click .js-clear-all': function(event) {
Filter.reset();
event.preventDefault();
}
});
var getMemberIndex = function(board, searchId) {
for (var i = 0; i < board.members.length; i++) {
if (board.members[i].userId === searchId)

14
client/components/sidebar/helpers.js
View file

@ -1,17 +1,3 @@
var widgetTitles = {
filter: 'filter-cards',
background: 'change-background'
};
Template.sidebar.helpers({
currentWidget: function() {
return Session.get('currentWidget') + 'Sidebar';
},
currentWidgetTitle: function() {
return TAPi18n.__(widgetTitles[Session.get('currentWidget')]);
}
});
// Template.addMemberPopup.helpers({
// isBoardMember: function() {
// var user = Users.findOne(this._id);

39
client/components/sidebar/sidebar.jade
View file

@ -4,49 +4,22 @@ template(name="sidebar")
class="{{#if isTongueHidden}}is-hidden{{/if}}")
i.fa.fa-chevron-left
.sidebar-content.js-board-sidebar-content.js-perfect-scrollbar
unless isDefaultView
h2
a.fa.fa-chevron-left.js-back-home
= getViewTitle
+Template.dynamic(template=getViewTemplate)
template(name='homeSidebar')
+membersWidget
hr.clear
hr
+labelsWidget
hr.clear
hr
h3
i.fa.fa-comments-o
| {{_ 'activities'}}
+activities(mode="board")
template(name="filterSidebar")
ul.pop-over-label-list.checkable
each currentBoard.labels
li.item.matches-filter
a.name.js-toggle-label-filter
span.card-label(class="card-label-{{color}}")
span.full-name
if name
= name
else
span.quiet {{_ "label-default" color}}
if Filter.labelIds.isSelected _id}}
span.icon-sm.fa.fa-check
hr
ul.pop-over-member-list.checkable
each currentBoard.members
if isActive
with getUser userId
li.item.js-member-item(
class="{{#if Filter.members.isSelected _id}}active{{/if}}")
a.name.js-toogle-member-filter
+userAvatar(user=this size="small")
span.full-name
= profile.name
| (<span class="username">{{ username }}</span>)
if Filter.members.isSelected _id
span.icon-sm.fa.fa-check
hr
a.js-clear-all(class="{{#unless Filter.isActive}}disabled{{/unless}}")
| {{_ 'filter-clear'}}
template(name="membersWidget")
.board-widget.board-widget-members
h3

25
client/components/sidebar/sidebar.js
View file

@ -1,6 +1,11 @@
Sidebar = null;
var defaultView = 'home';
Sidebar = null;
var viewTitles = {
filter: 'filter-cards',
multiselection: 'multi-selection'
};
BlazeComponent.extendComponent({
template: function() {
@ -60,14 +65,23 @@ BlazeComponent.extendComponent({
},
setView: function(view) {
view = view || defaultView;
view = _.isString(view) ? view : defaultView;
this._view.set(view);
this.open();
},
isDefaultView: function() {
return this.getView() === defaultView;
},
getViewTemplate: function() {
return this.getView() + 'Sidebar';
},
getViewTitle: function() {
return TAPi18n.__(viewTitles[this.getView()]);
},
// Board members can assign people or labels by drag-dropping elements from
// the sidebar to the cards on the board. In order to re-initialize the
// jquery-ui plugin any time a draggable member or label is modified or
@ -108,12 +122,13 @@ BlazeComponent.extendComponent({
// XXX Hacky, we need some kind of `super`
var mixinEvents = this.getMixin(Mixins.InfiniteScrolling).events();
return mixinEvents.concat([{
'click .js-toogle-sidebar': this.toogle
'click .js-toogle-sidebar': this.toogle,
'click .js-back-home': this.setView
}]);
}
}).register('sidebar');
EscapeActions.register('sidebarView',
function() { return Sidebar && Sidebar.getView() !== defaultView; },
function() { Sidebar.setView(defaultView); }
function() { Sidebar.setView(defaultView); },
function() { return Sidebar && Sidebar.getView() !== defaultView; }
);

30
client/components/sidebar/sidebar.styl
View file

@ -7,7 +7,7 @@
right: 0
.sidebar-content
padding: 10px 20px
padding: 12px
background: white
box-shadow: -10px 0px 5px -10px darken(white, 30%)
z-index: 10
@ -23,7 +23,33 @@
color: darken(white, 50%)
hr
margin: 8px 0
margin: 13px 0
ul.sidebar-list
display: flex
flex-direction: column
li a
display: flex
height: 30px
margin: 0
padding: 4px
border-radius: 3px
align-items: center
&:hover
&, i, .quiet
color white
.member, .card-label
margin-right: 7px
.sidebar-list-item-description
flex: 1
overflow: ellipsis
.fa.fa-check
margin: 0 4px
.board-sidebar
width: 248px

57
client/components/sidebar/sidebarFilters.jade Normal file
View file

@ -0,0 +1,57 @@
//-
XXX There is a *lot* of code duplication in the above templates and in the
corresponding JavaScript components. We will probably need the upcoming #let
and #each x in y constructors.
template(name="filterSidebar")
ul.sidebar-list
each currentBoard.labels
li
a.name.js-toggle-label-filter
span.card-label.square(class="card-label-{{color}}")
span.sidebar-list-item-description
if name
= name
else
span.quiet {{_ "label-default" color}}
if Filter.labelIds.isSelected _id
i.fa.fa-check
hr
ul.sidebar-list
each currentBoard.members
if isActive
with getUser userId
li(class="{{#if Filter.members.isSelected _id}}active{{/if}}")
a.name.js-toogle-member-filter
+userAvatar(user=this size="small")
span.sidebar-list-item-description
= profile.name
| (<span class="username">{{ username }}</span>)
if Filter.members.isSelected _id
i.fa.fa-check
hr
a.js-clear-all(class="{{#unless Filter.isActive}}disabled{{/unless}}")
| {{_ 'filter-clear'}}
template(name="multiselectionSidebar")
ul.sidebar-list
each currentBoard.labels
li
a.name.js-toggle-label-multiselection
span.card-label.square(class="card-label-{{color}}")
span.sidebar-list-item-description
if name
= name
else
span.quiet {{_ "label-default" color}}
if allSelectedElementHave 'label' _id
i.fa.fa-check
else if someSelectedElementHave 'label' _id
i.fa.fa-ellipsis-h
//-
XXX We should be able to assign a member to the list of selected cards.
template(name="disambiguateMultiLabelPopup")
p What do you want to do?
button.wide.js-remove-label Remove the label
button.wide.js-add-label Add the label

94
client/components/sidebar/sidebarFilters.js Normal file
View file

@ -0,0 +1,94 @@
BlazeComponent.extendComponent({
template: function() {
return 'filterSidebar';
},
events: function() {
return [{
'click .js-toggle-label-filter': function(event) {
Filter.labelIds.toogle(this._id);
Filter.resetExceptions();
event.preventDefault();
},
'click .js-toogle-member-filter': function(event) {
Filter.members.toogle(this._id);
Filter.resetExceptions();
event.preventDefault();
},
'click .js-clear-all': function(event) {
Filter.reset();
event.preventDefault();
}
}];
}
}).register('filterSidebar');
var updateSelectedCards = function(query) {
Cards.find(MultiSelection.getMongoSelector()).forEach(function(card) {
Cards.update(card._id, query);
});
};
BlazeComponent.extendComponent({
template: function() {
return 'multiselectionSidebar';
},
mapSelection: function(kind, _id) {
return Cards.find(MultiSelection.getMongoSelector()).map(function(card) {
var methodName = kind === 'label' ? 'hasLabel' : 'isAssigned';
return card[methodName](_id);
});
},
allSelectedElementHave: function(kind, _id) {
if (MultiSelection.isEmpty())
return false;
else
return _.every(this.mapSelection(kind, _id));
},
someSelectedElementHave: function(kind, _id) {
if (MultiSelection.isEmpty())
return false;
else
return _.some(this.mapSelection(kind, _id));
},
events: function() {
return [{
'click .js-toggle-label-multiselection': function(evt, tpl) {
var labelId = this.currentData()._id;
var mappedSelection = this.mapSelection('label', labelId);
var operation;
if (_.every(mappedSelection))
operation = '$pull';
else if (_.every(mappedSelection, function(bool) { return ! bool; }))
operation = '$addToSet';
else {
var popup = Popup.open('disambiguateMultiLabel');
// XXX We need to have a better integration between the popup and the
// UI components systems.
return popup.call(this.currentData(), evt, tpl);
}
var query = {};
query[operation] = {
labelIds: labelId
};
updateSelectedCards(query);
}
}];
}
}).register('multiselectionSidebar');
Template.disambiguateMultiLabelPopup.events({
'click .js-remove-label': function() {
updateSelectedCards({$pull: {labelIds: this._id}});
Popup.close();
},
'click .js-add-label': function() {
updateSelectedCards({$addToSet: {labelIds: this._id}});
Popup.close();
}
});

77
client/components/sidebar/templates.html Normal file
View file

@ -0,0 +1,77 @@
<!-- XXX Translate these template into jade -->
<template name="closeBoardPopup">
<p>{{_ 'close-board-pop'}}</p>
<input type="submit" class="js-confirm negate full" value="{{_ 'close'}}">
</template>
<template name="removeMemberPopup">
<p>{{_ 'remove-member-pop'
name=user.profile.name
username=user.username
boardTitle=board.title}}</p>
<input type="submit" class="js-confirm negate full" value="{{_ 'remove-member'}}">
</template>
<template name="addMemberPopup">
<div class="search-with-spinner">
{{> esInput index="users" }}
</div>
<div class="manage-member-section hide js-search-results" style="display: block;">
<ul class="pop-over-member-list options js-list">
{{# esEach index="users"}}
<li class="item js-member-item {{# if isBoardMember }}disabled{{/if}}">
<a href="#" class="name js-select-member {{# if isBoardMember }}multi-line{{/if}}" title="{{ profile.name }} ({{ username }})">
{{> userAvatar user=this size="small" }}
<span class="full-name">
{{ profile.name }} (<span class="username">{{ username }}</span>)
</span>
{{# if isBoardMember }}
<div class="extra-text quiet">({{_ 'joined'}})</div>
{{/if}}
<span class="icon-sm fa fa-chevron-right light option js-open-option"></span>
</a>
</li>
{{/esEach }}
</ul>
</div>
{{# ifEsIsSearching index='users' }}
<div class="tac">
<span class="tabbed-pane-main-col-loading-spinner spinner"></span>
</div>
{{ /ifEsIsSearching }}
{{# ifEsHasNoResults index="users" }}
<div class="manage-member-section js-no-results">
<p class="quiet center" style="padding: 16px 4px;">{{_ 'no-results'}}</p>
</div>
{{ /ifEsHasNoResults }}
<div class="manage-member-section js-helper">
<p class="bottom quiet" style="padding: 6px;">{{_ 'search-member-desc'}}</p>
</div>
</template>
<template name="changePermissionsPopup">
<ul class="pop-over-list">
<li>
<a class="{{#if isLastAdmin}}disabled{{else}}js-set-admin{{/if}}">
{{_ 'admin'}}
{{#if isAdmin}}<span class="icon-sm fa fa-check"></span>{{/if}}
<span class="sub-name">{{_ 'admin-desc'}}</span>
</a>
</li>
<li>
<a class="{{#if isLastAdmin}}disabled{{else}}js-set-normal{{/if}}">
{{_ 'normal'}}
{{#unless isAdmin}}<span class="icon-sm fa fa-check"></span>{{/unless}}
<span class="sub-name">{{_ 'normal-desc'}}</span>
</a>
</li>
</ul>
{{#if isLastAdmin}}
<hr>
<p class="quiet bottom">{{_ 'last-admin-desc'}}</p>
{{/if}}
</template>

307
client/components/sidebar/templates.html.old
View file

@ -1,307 +0,0 @@
<template name="boardWidgets">
<a href="#" class="sidebar-show-btn dark-hover js-show-sidebar">
<span class="icon-sm fa fa-chevron-left"></span>
<span class="text">{{_ 'show-sidebar'}}</span>
</a>
<div class="board-widgets {{#if session 'sidebarIsOpen'}}show{{else}}hide{{/if}}">
<div>
<a href="#" class="sidebar-hide-btn dark-hover js-hide-sidebar" title="{{_ 'close-sidebar-title'}}">
<span class="icon-sm fa fa-chevron-right"></span>
</a>
{{#unless isTrue currentWidget "homeWidget"}}
<div class="board-widgets-title clearfix">
<a href="#" class="board-sidebar-back-btn js-pop-widget-view">
<span class="left-arrow"></span>{{_ 'back'}}
</a>
<h3 class="text">{{currentWidgetTitle}}</h3>
<hr>
</div>
{{/unless}}
<div class="board-widgets-content-wrapper">
<div class="board-widgets-content default fancy-scrollbar short{{#unless session 'menuWidgetIsOpen'}} short{{/unless}}">
{{> UI.dynamic template=currentWidget data=this }}
</div>
</div>
</div>
</div>
</template>
<template name="homeWidget">
{{ > menuWidget }}
{{ > membersWidget }}
{{ > activityWidget }}
</template>
<template name="menuWidget">
<div class="board-widget board-widget-nav clearfix{{#unless session 'menuWidgetIsOpen'}} collapsed{{/unless}}">
<h3 class="dark-hover toggle-widget-nav js-toggle-widget-nav">{{_ 'menu'}}
<span class="icon-sm fa fa-chevron-circle-down toggle-menu-icon"></span>
</h3>
<ul class="nav-list">
<hr style="margin-top: 0;">
<li>
<a href="#" class="nav-list-item js-open-archive">
<span class="icon-sm fa fa-archive icon-type"></span>
{{_ 'archived-items'}}
</a>
</li>
<li>
<a href="#" class="nav-list-item js-open-card-filter">
<span class="icon-sm fa fa-filter icon-type"></span>
{{_ 'filter-cards'}}
</a>
</li>
{{#if currentUser.isBoardAdmin}}
<hr>
<li>
<a class="nav-list-item nav-list-sub-item board-settings-background js-change-background">
<span class="board-settings-background-preview" style="background-color:{{board.background.color}}"></span>
{{_ 'change-background'}}…
</a>
</li>
{{#unless isSandstorm }}
<li>
<a class="nav-list-item nav-list-sub-item js-close-board" href="#">{{_ 'close-board'}}</a>
</li>
{{/unless}}
{{/if}}
{{!
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}}
<hr>
<li>
<a class="nav-list-item nav-list-sub-item js-language">{{_ 'language'}}</a>
</li>
{{/if}}
</ul>
</div>
</template>
<template name="membersWidget">
<hr>
<div class="board-widget board-widget-members clearfix">
<div class="board-widget-title">
<h3>{{_ 'members'}}</h3>
</div>
<div class="board-widget-content">
<div class="board-widget-members js-list-board-members clearfix js-list-draggable-board-members">
{{# each board.members }}
{{> userAvatar userId=this.userId draggable=true size="small" showBadges=true}}
{{/ each }}
</div>
{{# unless isSandstrom }}
{{# if currentUser.isBoardAdmin }}
<a href="#" class="button-link js-open-manage-board-members">
<span class="icon-sm fa fa-user"></span> {{_ 'add-members'}}
</a>
{{/ if }}
{{/ unless }}
</div>
</div>
</template>
<template name="activityWidget">
{{# if board.activities.count }}
<hr>
<div class="board-widget board-widget-activity bottom clearfix">
<div class="board-widget-title">
<h3>{{_ 'activity'}}</h3>
</div>
<div class="board-widget-content">
<div class="activity-gradient-t"></div>
<div class="activity-gradient-b"></div>
<div class="board-actions-list fancy-scrollbar">
{{ > activities }}
</div>
</div>
</div>
{{/if}}
</template>
<template name="memberPopup">
<div class="board-member-menu">
<div class="mini-profile-info">
{{> userAvatar user=user}}
<div class="info">
<h3 class="bottom" style="margin-right: 40px;">
<a class="js-profile" href="{{ pathFor route='Profile' username=user.username }}">{{ user.profile.name }}</a>
</h3>
<p class="quiet bottom">@{{ user.username }}</p>
</div>
</div>
{{# if currentUser.isBoardMember }}
<ul class="pop-over-list">
{{# if currentUser.isBoardAdmin }}
<li>
<a class="js-change-role" href="#">
{{_ 'change-permissions'}} <span class="quiet" style="font-weight: normal;">({{ memberType }})</span>
</a>
</li>
{{/ if }}
<li>
{{# if currentUser.isBoardAdmin }}
<a class="js-remove-member">{{_ 'remove-from-board'}}</a>
{{ else }}
<a class="js-leave-member">{{_ 'leave-board'}}</a>
{{/ if }}
</li>
</ul>
{{/ if }}
</div>
</template>
<template name="filterWidget">
<ul class="pop-over-label-list checkable">
{{#each board.labels}}
<li class="item matches-filter">
<a class="name js-toggle-label-filter">
<span class="card-label card-label-{{color}}"></span>
<span class="full-name">
{{#if name}}
{{name}}
{{else}}
<span class="quiet">{{_ "label-default" color}}</span>
{{/if}}
</span>
{{#if Filter.labelIds.isSelected _id}}
<span class="icon-sm fa fa-check"></span>
{{/if}}
</a>
</li>
{{/each}}
</ul>
<hr>
<ul class="pop-over-member-list checkable">
{{#each board.members}}
{{#with getUser userId}}
<li class="item js-member-item {{#if Filter.members.isSelected _id}}active{{/if}}">
<a href="#" class="name js-toogle-member-filter">
{{> userAvatar user=this size="small" }}
<span class="full-name">
{{ profile.name }}
(<span class="username">{{ username }}</span>)
</span>
{{#if Filter.members.isSelected _id}}
<span class="icon-sm fa fa-check checked-icon"></span>
{{/if}}
</a>
</li>
{{/with}}
{{/each}}
</ul>
<hr>
<ul class="pop-over-list inset normal-weight">
<li>
<a class="js-clear-all {{#unless Filter.isActive}}disabled{{/unless}}" style="padding-left: 40px;">
{{_ 'filter-clear'}}
</a>
</li>
</ul>
</template>
<template name="backgroundWidget">
<div class="board-widgets-content-wrapper fancy-scrollbar">
<div class="board-widgets-content">
<div class="board-backgrounds-list clearfix">
{{#each backgroundColors}}
<div class="board-background-select js-select-background">
<span class="background-box " style="background-color: {{this}}; "></span>
</div>
{{/each}}
</div>
{{!--
<h2 class="clear">Photos</h2>
<div class="board-backgrounds-list relative clearfix js-gold-photos-list disabled">
<div class="board-background-select js-select-background">
<span class="background-box " style="background-image: url(&quot;{{url}}&quot;);">
<a class="background-option js-background-attribution" href={{href}} target="_blank" title={{title}}>
<img src="https://d78fikflryjgj.cloudfront.net/images/d906fe5c1274c56c5571d49705547587/cc.png" style="height: 14px; width: 14px; vertical-align: text-top;" title="http://creativecommons.org/licenses/by/2.0/deed.en">
<span class="text" style="margin-left: 2px;">{{author}}</span>
</a>
</span>
</div>
</div>
--}}
</div>
</div>
</template>
<template name="closeBoardPopup">
<p>{{_ 'close-board-pop'}}</p>
<input type="submit" class="js-confirm negate full" value="{{_ 'close'}}">
</template>
<template name="removeMemberPopup">
<p>{{_ 'remove-member-pop'
name=user.profile.name
username=user.username
boardTitle=board.title}}</p>
<input type="submit" class="js-confirm negate full" value="{{_ 'remove-member'}}">
</template>
<template name="addMemberPopup">
<div class="search-with-spinner">
{{> esInput index="users" }}
</div>
<div class="manage-member-section hide js-search-results" style="display: block;">
<ul class="pop-over-member-list options js-list">
{{# esEach index="users"}}
<li class="item js-member-item {{# if isBoardMember }}disabled{{/if}}">
<a href="#" class="name js-select-member {{# if isBoardMember }}multi-line{{/if}}" title="{{ profile.name }} ({{ username }})">
{{> userAvatar user=this size="small" }}
<span class="full-name">
{{ profile.name }} (<span class="username">{{ username }}</span>)
</span>
{{# if isBoardMember }}
<div class="extra-text quiet">({{_ 'joined'}})</div>
{{/if}}
<span class="icon-sm fa fa-chevron-right light option js-open-option"></span>
</a>
</li>
{{/esEach }}
</ul>
</div>
{{# ifEsIsSearching index='users' }}
<div class="tac">
<span class="tabbed-pane-main-col-loading-spinner spinner"></span>
</div>
{{ /ifEsIsSearching }}
{{# ifEsHasNoResults index="users" }}
<div class="manage-member-section js-no-results">
<p class="quiet center" style="padding: 16px 4px;">{{_ 'no-results'}}</p>
</div>
{{ /ifEsHasNoResults }}
<div class="manage-member-section js-helper">
<p class="bottom quiet" style="padding: 6px;">{{_ 'search-member-desc'}}</p>
</div>
</template>
<template name="changePermissionsPopup">
<ul class="pop-over-list">
<li>
<a class="{{#if isLastAdmin}}disabled{{else}}js-set-admin{{/if}}">
{{_ 'admin'}}
{{#if isAdmin}}<span class="icon-sm fa fa-check"></span>{{/if}}
<span class="sub-name">{{_ 'admin-desc'}}</span>
</a>
</li>
<li>
<a class="{{#if isLastAdmin}}disabled{{else}}js-set-normal{{/if}}">
{{_ 'normal'}}
{{#unless isAdmin}}<span class="icon-sm fa fa-check"></span>{{/unless}}
<span class="sub-name">{{_ 'normal-desc'}}</span>
</a>
</li>
</ul>
{{#if isLastAdmin}}
<hr>
<p class="quiet bottom">{{_ 'last-admin-desc'}}</p>
{{/if}}
</template>