diff options
author | Maxime Quandalle <maxime@quandalle.com> | 2015-05-24 12:30:58 +0200 |
---|---|---|
committer | Maxime Quandalle <maxime@quandalle.com> | 2015-05-24 22:11:40 +0200 |
commit | 781577db041e0008de22f31bcc1cb11ae96670e0 (patch) | |
tree | b45e220039b81149c463ee060dcc03d79e589a77 /client/components/cards | |
parent | 40b605f7d897db6eb2697be1748741221378e71c (diff) | |
download | wekan-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/cards')
-rw-r--r-- | client/components/cards/details.jade | 87 | ||||
-rw-r--r-- | client/components/cards/details.js | 6 | ||||
-rw-r--r-- | client/components/cards/details.styl | 92 | ||||
-rw-r--r-- | client/components/cards/minicard.styl | 11 | ||||
-rw-r--r-- | client/components/cards/router.js | 15 |
5 files changed, 106 insertions, 105 deletions
diff --git a/client/components/cards/details.jade b/client/components/cards/details.jade index 0de59297..55cc4b9e 100644 --- a/client/components/cards/details.jade +++ b/client/components/cards/details.jade @@ -1,47 +1,46 @@ -template(name="cardSidebar") - .card-sidebar.sidebar - .card-detail.sidebar-content.js-card-sidebar-content - if cover - .card-detail-cover(style="background-image: url({{ card.cover.url }})") - .card-detail-header(class="{{#if currentUser.isBoardMember}}editable{{/if}}") - a.js-close-card-detail - i.fa.fa-times - h2.card-detail-title.js-card-title= title - p.card-detail-list.js-move-card - | {{_ 'in-list'}} - a.card-detail-list-title( - class="{{#if currentUser.isBoardMember}}js-open-move-from-header is-editable{{/if}}") - = list.title - hr - //- if card.members - .card-detail-item.card-detail-item-members.clearfix.js-card-detail-members - h3.card-detail-item-header {{_ 'members'}} - .js-card-detail-members-list.clearfix - each members - +userAvatar(userId=this size="small" cardId=../_id) - a.card-detail-item-add-button.dark-hover.js-details-edit-members - i.fa.fa-plus - //- We should use "editable" to avoide repetiting ourselves - .clearfix - if currentUser.isBoardMember - h3 Description - +inlinedForm(classNames="js-card-description") - i.fa.fa-times.js-close-inlined-form - textarea(autofocus)= description - button(type="submit") {{_ 'edit'}} - else - .js-open-inlined-form - a {{_ 'edit'}} - +viewer - = description - else if description - h3 Description - +viewer - = description - hr - if attachments.count - +WindowAttachmentsModule(card=this) - +WindowActivityModule(card=this) +template(name="cardDetails") + .card-detail.js-card-detail: .card-detail-canvas + if cover + .card-detail-cover(style="background-image: url({{ card.cover.url }})") + .card-detail-header(class="{{#if currentUser.isBoardMember}}editable{{/if}}") + a.js-close-card-detail + i.fa.fa-times + h2.card-detail-title.js-card-title= title + p.card-detail-list.js-move-card + | {{_ 'in-list'}} + a.card-detail-list-title( + class="{{#if currentUser.isBoardMember}}js-open-move-from-header is-editable{{/if}}") + = list.title + hr + //- if card.members + .card-detail-item.card-detail-item-members.clearfix.js-card-detail-members + h3.card-detail-item-header {{_ 'members'}} + .js-card-detail-members-list.clearfix + each members + +userAvatar(userId=this size="small" cardId=../_id) + a.card-detail-item-add-button.dark-hover.js-details-edit-members + i.fa.fa-plus + //- We should use "editable" to avoide repetiting ourselves + .clearfix + if currentUser.isBoardMember + h3 Description + +inlinedForm(classNames="js-card-description") + i.fa.fa-times.js-close-inlined-form + textarea(autofocus)= description + button(type="submit") {{_ 'edit'}} + else + .js-open-inlined-form + a {{_ 'edit'}} + +viewer + = description + else if description + h3 Description + +viewer + = description + hr + if attachments.count + +WindowAttachmentsModule(card=this) + +WindowActivityModule(card=this) template(name="moveCardPopup") +boardLists diff --git a/client/components/cards/details.js b/client/components/cards/details.js index cb1a3ef3..d0395129 100644 --- a/client/components/cards/details.js +++ b/client/components/cards/details.js @@ -1,6 +1,6 @@ BlazeComponent.extendComponent({ template: function() { - return 'cardSidebar'; + return 'cardDetails'; }, mixins: function() { @@ -8,7 +8,7 @@ BlazeComponent.extendComponent({ }, calculateNextPeak: function() { - var altitude = this.find('.js-card-sidebar-content').scrollHeight; + var altitude = this.find('.js-card-detail').scrollHeight; this.callFirstWith(this, 'setNextPeak', altitude); }, @@ -86,7 +86,7 @@ BlazeComponent.extendComponent({ 'click .js-details-edit-labels': Popup.open('cardLabels') }]; } -}).register('cardSidebar'); +}).register('cardDetails'); Template.moveCardPopup.events({ 'click .js-select-list': function() { diff --git a/client/components/cards/details.styl b/client/components/cards/details.styl index 106a9cfd..68a436f9 100644 --- a/client/components/cards/details.styl +++ b/client/components/cards/details.styl @@ -1,45 +1,57 @@ @import 'nib' -.card-sidebar.sidebar - width: 496px - top: -46px - - .card-detail.sidebar-content - padding: 0 20px - z-index: 20 !important - // XXX Animate apparition - - .card-detail-header - margin: 0 -20px 5px - padding 7px 20px 0 - background: #F7F7F7 - border-bottom: 1px solid darken(white, 10%) - min-height: 38px - - i.fa - float: right - font-size: 1.3em - color: darken(white, 35%) - margin-top: 7px - - .card-detail-title - font-weight: bold - font-size: 1.7em - margin: 3px 0 0 - padding: 0 - - .card-detail-list - font-size: 0.85em - margin-bottom: 3px - - a.card-detail-list-title - font-weight: bold - - &.is-editable - display: inline-block - background: darken(white, 10%) - border-radius: 3px - padding: 0px 5px +.card-detail + padding: 0 20px + height: 100% + flex: 0 0 470px + overflow: hidden + background: white + border-radius: 3px + z-index: 20 !important + animation: growIn 0.2s + box-shadow: 0 0 7px 0 darken(white, 30%) + transition: flex 0.2s, padding 0.2s + + .card-detail-canvas + width: 470px + + .card-detail-header + margin: 0 -20px 5px + padding 7px 20px 0 + background: #F7F7F7 + border-bottom: 1px solid darken(white, 10%) + min-height: 38px + + i.fa + float: right + font-size: 1.3em + color: darken(white, 35%) + margin-top: 7px + + .card-detail-title + font-weight: bold + font-size: 1.7em + margin: 3px 0 0 + padding: 0 + + .card-detail-list + font-size: 0.85em + margin-bottom: 3px + + a.card-detail-list-title + font-weight: bold + + &.is-editable + display: inline-block + background: darken(white, 10%) + border-radius: 3px + padding: 0px 5px + +@keyframes growIn + from + flex: 0 0 0 + to + flex: 0 0 470px .new-comment position: relative diff --git a/client/components/cards/minicard.styl b/client/components/cards/minicard.styl index a78cd46f..1b9e60b5 100644 --- a/client/components/cards/minicard.styl +++ b/client/components/cards/minicard.styl @@ -4,7 +4,6 @@ border-radius: 2px cursor: pointer margin-bottom: 9px - max-width: 300px min-height: 20px position: relative z-index: 0 @@ -42,10 +41,16 @@ position: relative z-index: 10 - &.is-selected + margin-left: -11px + transform: translateX(- @margin-left) + border-bottom-right-radius: 0 + border-top-right-radius: 0 + z-index: 100 + box-shadow: -2px 1px 2px rgba(0,0,0,.2) + .minicard-details - padding-bottom: 0 + margin-right: 11px a.minicard-details text-decoration:none diff --git a/client/components/cards/router.js b/client/components/cards/router.js deleted file mode 100644 index 48bb9a95..00000000 --- a/client/components/cards/router.js +++ /dev/null @@ -1,15 +0,0 @@ -Router.route('/boards/:boardId/:slug/:cardId', { - name: 'Card', - template: 'board', - waitOn: function() { - var params = this.params; - // XXX We probably shouldn't rely on Session - Session.set('currentBoard', params.boardId); - Session.set('currentCard', params.cardId); - - return BoardSubsManager.subscribe('board', params.boardId, params.slug); - }, - data: function() { - return Boards.findOne(this.params.boardId); - } -}); |