diff options
Diffstat (limited to 'client/components/lists')
| -rw-r--r-- | client/components/lists/body.jade | 79 | ||||
| -rw-r--r-- | client/components/lists/body.js | 14 | ||||
| -rw-r--r-- | client/components/lists/main.jade | 5 | ||||
| -rw-r--r-- | client/components/lists/main.js | 7 | ||||
| -rw-r--r-- | client/components/lists/main.styl | 59 |
5 files changed, 83 insertions, 81 deletions
diff --git a/client/components/lists/body.jade b/client/components/lists/body.jade index dfbe05b7..9d4a903d 100644 --- a/client/components/lists/body.jade +++ b/client/components/lists/body.jade @@ -1,43 +1,44 @@ template(name="listBody") - .minicards.clearfix.js-minicards - if cards.count - +inlinedForm(autoclose=false position="top") - +addCardForm(listId=_id position="top") - each cards - .minicard.card.js-minicard( - class="{{#if isSelected}}is-selected{{/if}}") - a.minicard-details.clearfix.show(href=absoluteUrl) - if cover - .minicard-cover.js-card-cover(style="background-image: url({{cover.url}});") - if labels - .minicard-labels - each labels - .minicard-label(class="card-label-{{color}}" title="{{name}}") - .minicard-title= title - if members - .minicard-members.js-minicard-members - each members - +userAvatar(userId=this size="small" cardId="{{../_id}}") - .badges - if comments.count - .badge(title="{{_ 'card-comments-title' comments.count }}") - span.badge-icon.icon-sm.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 - if attachments.count - .badge - span.badge-icon.icon-sm.fa.fa-paperclip - span.badge-text= attachments.count - if currentUser.isBoardMember - +inlinedForm(autoclose=false position="bottom") - +addCardForm(listId=_id position="bottom") - else - if newCardFormIsVisible.get - a.open-card-composer.js-open-inlined-form - i.fa.fa-plus - | {{_ 'add-card'}} + .list-body.js-perfect-scrollbar + .minicards.clearfix.js-minicards + if cards.count + +inlinedForm(autoclose=false position="top") + +addCardForm(listId=_id position="top") + each cards + .minicard.card.js-minicard( + class="{{#if isSelected}}is-selected{{/if}}") + a.minicard-details.clearfix.show(href=absoluteUrl) + if cover + .minicard-cover.js-card-cover(style="background-image: url({{cover.url}});") + if labels + .minicard-labels + each labels + .minicard-label(class="card-label-{{color}}" title="{{name}}") + .minicard-title= title + if members + .minicard-members.js-minicard-members + each members + +userAvatar(userId=this size="small" cardId="{{../_id}}") + .badges + if comments.count + .badge(title="{{_ 'card-comments-title' comments.count }}") + span.badge-icon.icon-sm.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 + if attachments.count + .badge + span.badge-icon.icon-sm.fa.fa-paperclip + span.badge-text= attachments.count + if currentUser.isBoardMember + +inlinedForm(autoclose=false position="bottom") + +addCardForm(listId=_id position="bottom") + else + if newCardFormIsVisible.get + a.open-card-composer.js-open-inlined-form + i.fa.fa-plus + | {{_ 'add-card'}} template(name="addCardForm") .minicard.js-composer diff --git a/client/components/lists/body.js b/client/components/lists/body.js index 70db42d1..d8238c9a 100644 --- a/client/components/lists/body.js +++ b/client/components/lists/body.js @@ -3,6 +3,10 @@ BlazeComponent.extendComponent({ return 'listBody'; }, + mixins: function() { + return [Mixins.PerfectScrollbar]; + }, + isSelected: function() { return Session.equals('currentCard', this.currentData()._id); }, @@ -62,13 +66,21 @@ BlazeComponent.extendComponent({ this.newCardFormIsVisible.set(value); }, + scrollToBottom: function() { + var $container = $(this.firstNode()); + $container.animate({ + scrollTop: $container.height() + }); + }, + onCreated: function() { this.newCardFormIsVisible = new ReactiveVar(true); }, events: function() { return [{ - submit: this.addCard + submit: this.addCard, + 'click .open-card-composer': this.scrollToBottom }]; } }).register('listBody'); diff --git a/client/components/lists/main.jade b/client/components/lists/main.jade index dd4bb49a..c959b87f 100644 --- a/client/components/lists/main.jade +++ b/client/components/lists/main.jade @@ -1,5 +1,4 @@ template(name='list') .list.js-list(id="js-list-{{_id}}") - .list-wrapper - +listHeader - +listBody + +listHeader + +listBody diff --git a/client/components/lists/main.js b/client/components/lists/main.js index 8a96f5ce..3464865a 100644 --- a/client/components/lists/main.js +++ b/client/components/lists/main.js @@ -19,9 +19,10 @@ BlazeComponent.extendComponent({ // XXX The jQuery UI sortable plugin is far from ideal here. First we include // all jQuery components but only use one. Second, it modifies the DOM itself, // resulting in Blaze abandoning reactive update of the nodes that have been - // moved which result in bugs if multiple users use the board in real time. - // I tried sortable:sortable but that was not better. Should we “simply” write - // the drag&drop code ourselves? + // moved which result in bugs if multiple users use the board in real time. I + // tried sortable:sortable but that was not better. And dragula is not + // powerful enough for our use casesShould we “simply” write the drag&drop + // code ourselves? onRendered: function() { if (Meteor.user().isBoardMember()) { var boardComponent = this.componentParent(); diff --git a/client/components/lists/main.styl b/client/components/lists/main.styl index 60a6ab98..47dfcf28 100644 --- a/client/components/lists/main.styl +++ b/client/components/lists/main.styl @@ -11,8 +11,7 @@ background: darken(white, 10%) height: 100% border-left: 1px solid darken(white, 20%) - padding: 12px 7px 5px - overflow-y: auto + padding: 0 &:first-child margin-left: 5px @@ -21,15 +20,20 @@ .card-detail + & border-left: none - &.editable - cursor: grab + &.ui-sortable-helper + cursor: grabbing + box-shadow: -2px 2px 8px rgba(0, 0, 0, .3), + 0 0 1px rgba(0, 0, 0, .5) + transform: rotate(4deg) - .list-wrapper - cursor: default + &.placeholder + background-color: rgba(0, 0, 0, .2) + border-color: transparent + box-shadow: none + height: 100px - &.add-list - &.fade - opacity: 0 + &.list-composer + padding: 17px .list-name-input background: rgba(0, 0, 0, .05) @@ -55,7 +59,7 @@ .list-header flex: 0 0 auto - padding: 10px 26px 4px 6px + margin: 20px 15px 4px position: relative min-height: 20px @@ -74,24 +78,23 @@ .list-header-menu-icon background-clip: content-box background-origin: content-box - padding: 6px 8px + // padding: 6px 8px position: absolute - top: 3px - right: -5px + top: 0 + right: 0 color: #a6a6a6 .list-header-num-cards color: #8c8c8c margin: 0 -.minicards - padding: 4px 4px 1px - z-index: 1 - height: 100% +.list-body + flex: 1 + overflow-y: auto + padding: 5px 11px - &::-webkit-scrollbar-button - display: block - height: 4px + .ps-scrollbar-y-rail + transform: translateX(2px) .open-card-composer border-radius: 2px @@ -100,6 +103,7 @@ padding: 7px 10px position: relative text-decoration: none + animation: fadeIn 0.3s i.fa margin-right: 7px @@ -117,18 +121,3 @@ opacity: 0 to opacity: 1 - -.list.placeholder - background-color: rgba(0, 0, 0, .2) - border-color: transparent - box-shadow: none - height: 100px - -.list.ui-sortable-helper - cursor: grabbing - box-shadow: -2px 2px 8px rgba(0, 0, 0, .3), 0 0 1px rgba(0, 0, 0, .5) - transform: rotate(4deg) - - -.list.ui-sortable-helper .list-header-menu-icon - display: none |