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

Experiment new ergonomics to interact with card details

Browse source 
The idea is that by displaying card details in a sidebar stuck on the
right of the screen, the mouse had to travel too much before
interacting with it. I also don’t want to use the Trello solution
(modal) on big screens, because I like the ability to interact with
the selected card and with the board at the same time (like in a
e-mail client).

The solution introduced in this commit consist of opening the card
detail in a column next to the minicard list.

This commit also fix right sidebar members and labels drag and drop.
This commit is contained in:
Maxime Quandalle 2015-05-24 12:30:58 +02:00
parent 40b605f7d8
commit 781577db04
22 changed files with 225 additions and 203 deletions
Download patch file Download diff file Expand all files Collapse all files

27
client/components/lists/main.js
View file

@ -25,13 +25,14 @@ BlazeComponent.extendComponent({
onRendered: function() {
if (Meteor.user().isBoardMember()) {
var boardComponent = this.componentParent();
var itemsSelector = '.js-minicard:not(.placeholder, .hide, .js-composer)';
var $cards = this.$('.js-minicards');
$cards.sortable({
connectWith: '.js-minicards',
tolerance: 'pointer',
appendTo: '.js-lists',
helper: 'clone',
items: '.js-minicard:not(.placeholder, .hide, .js-composer)',
items: itemsSelector,
placeholder: 'minicard placeholder',
start: function(event, ui) {
$('.minicard.placeholder').height(ui.item.height());
@ -57,24 +58,20 @@ BlazeComponent.extendComponent({
}
}).disableSelection();
Utils.liveEvent('mouseover', function($el) {
$el.find('.js-member-droppable').droppable({
$(document).on('mouseover', function() {
$cards.find(itemsSelector).droppable({
hoverClass: 'draggable-hover-card',
accept: '.js-member',
accept: '.js-member,.js-label',
drop: function(event, ui) {
var memberId = Blaze.getData(ui.draggable.get(0)).userId;
var cardId = Blaze.getData(this)._id;
Cards.update(cardId, {$addToSet: {members: memberId}});
}
});
$el.find('.js-member-droppable').droppable({
hoverClass: 'draggable-hover-card',
accept: '.js-label',
drop: function(event, ui) {
var labelId = Blaze.getData(ui.draggable.get(0))._id;
var cardId = Blaze.getData(this)._id;
Cards.update(cardId, {$addToSet: {labelIds: labelId}});
if (ui.draggable.hasClass('js-member')) {
var memberId = Blaze.getData(ui.draggable.get(0)).userId;
Cards.update(cardId, {$addToSet: {members: memberId}});
} else {
var labelId = Blaze.getData(ui.draggable.get(0))._id;
Cards.update(cardId, {$addToSet: {labelIds: labelId}});
}
}
});
});