summaryrefslogtreecommitdiffstats
path: root/client/components/lists
diff options
context:
space:
mode:
authorMaxime Quandalle <maxime@quandalle.com>2015-05-24 12:30:58 +0200
committerMaxime Quandalle <maxime@quandalle.com>2015-05-24 22:11:40 +0200
commit781577db041e0008de22f31bcc1cb11ae96670e0 (patch)
treeb45e220039b81149c463ee060dcc03d79e589a77 /client/components/lists
parent40b605f7d897db6eb2697be1748741221378e71c (diff)
downloadwekan-781577db041e0008de22f31bcc1cb11ae96670e0.tar.gz
wekan-781577db041e0008de22f31bcc1cb11ae96670e0.tar.bz2
wekan-781577db041e0008de22f31bcc1cb11ae96670e0.zip
Experiment new ergonomics to interact with card details
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.
Diffstat (limited to 'client/components/lists')
-rw-r--r--client/components/lists/body.jade2
-rw-r--r--client/components/lists/main.js27
-rw-r--r--client/components/lists/main.styl12
3 files changed, 16 insertions, 25 deletions
diff --git a/client/components/lists/body.jade b/client/components/lists/body.jade
index 7bd3392f..dfbe05b7 100644
--- a/client/components/lists/body.jade
+++ b/client/components/lists/body.jade
@@ -4,7 +4,7 @@ template(name="listBody")
+inlinedForm(autoclose=false position="top")
+addCardForm(listId=_id position="top")
each cards
- .minicard.card.js-minicard.js-member-droppable(
+ .minicard.card.js-minicard(
class="{{#if isSelected}}is-selected{{/if}}")
a.minicard-details.clearfix.show(href=absoluteUrl)
if cover
diff --git a/client/components/lists/main.js b/client/components/lists/main.js
index 78aad17c..8a96f5ce 100644
--- a/client/components/lists/main.js
+++ b/client/components/lists/main.js
@@ -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}});
+ }
}
});
});
diff --git a/client/components/lists/main.styl b/client/components/lists/main.styl
index ce408990..60a6ab98 100644
--- a/client/components/lists/main.styl
+++ b/client/components/lists/main.styl
@@ -10,8 +10,7 @@
// transparent, because that won't work during a list drag.
background: darken(white, 10%)
height: 100%
- border-right: 1px solid darken(white, 17%)
- border-left: 1px solid darken(white, 4%)
+ border-left: 1px solid darken(white, 20%)
padding: 12px 7px 5px
overflow-y: auto
@@ -19,9 +18,8 @@
margin-left: 5px
border-left: none
- &:last-child
- margin-right: 5px
- border-right: none
+ .card-detail + &
+ border-left: none
&.editable
cursor: grab
@@ -87,9 +85,6 @@
margin: 0
.minicards
- // flex: 1 1 auto
- overflow-y: auto
- overflow-x: hidden
padding: 4px 4px 1px
z-index: 1
height: 100%
@@ -105,7 +100,6 @@
padding: 7px 10px
position: relative
text-decoration: none
- animation: fadeIn 0.2s
i.fa
margin-right: 7px