diff options
24 files changed, 305 insertions, 850 deletions
diff --git a/client/components/boards/boardBody.jade b/client/components/boards/boardBody.jade index c3043327..12fc0e36 100644 --- a/client/components/boards/boardBody.jade +++ b/client/components/boards/boardBody.jade @@ -12,6 +12,8 @@ template(name="boardComponent") class=sidebarSize class="{{#if MultiSelection.isActive}}is-multiselection-active{{/if}}" class="{{#if draggingActive.get}}is-dragging-active{{/if}}") + if showOverlay.get + .board-overlay .lists.js-lists each lists +list(this) @@ -28,10 +30,10 @@ template(name="addListForm") +inlinedForm(autoclose=false) input.list-name-input(type="text" placeholder="{{_ 'add-list'}}" autocomplete="off" autofocus) - div.edit-controls.clearfix - button.primary.confirm.js-save-edit(type="submit") {{_ 'save'}} + .edit-controls.clearfix + button.primary.confirm(type="submit") {{_ 'save'}} a.fa.fa-times-thin.js-close-inlined-form else - .js-open-inlined-form + a.js-open-inlined-form i.fa.fa-plus | {{_ 'add-list'}} diff --git a/client/components/boards/boardBody.js b/client/components/boards/boardBody.js index b5e4154a..6de7fba6 100644 --- a/client/components/boards/boardBody.js +++ b/client/components/boards/boardBody.js @@ -14,12 +14,16 @@ BlazeComponent.extendComponent({ onCreated: function() { this.draggingActive = new ReactiveVar(false); + this.showOverlay = new ReactiveVar(false); }, openNewListForm: function() { this.componentChildren('addListForm')[0].open(); }, + // XXX Flow components allow us to avoid creating these two setter methods by + // exposing a public API to modify the component state. We need to investigate + // best practices here. setIsDragging: function(bool) { this.draggingActive.set(bool); }, @@ -60,9 +64,9 @@ BlazeComponent.extendComponent({ var removeNode = _.once(function() { node.parentNode.removeChild(node); }); - if ($(node).hasClass('js-card-detail')) { + if ($(node).hasClass('js-card-details')) { $(node).css({ - flex: '0 0 0', + flexBasis: 0, padding: 0 }); $(lists).one(endTransitionEvents, removeNode); diff --git a/client/components/boards/boardBody.styl b/client/components/boards/boardBody.styl index 281199e2..68034a16 100644 --- a/client/components/boards/boardBody.styl +++ b/client/components/boards/boardBody.styl @@ -1,21 +1,29 @@ @import 'nib' -.board-wrapper - left: 0 - top: 0 - bottom: 0 - right: 0 - position: absolute - overflow: hidden - - .board-canvas +position() + if arguments[0] == cover position: absolute left: 0 right: 0 top: 0 bottom: 0 + else + position: arguments + +.board-wrapper + position: cover + + .board-canvas + position: cover transition: margin .1s + .board-overlay + position: cover + background: black + opacity: 0.33 + animation: fadeIn 0.2s + z-index: 10 + &.next-sidebar margin-right: 248px @@ -25,16 +33,18 @@ .open-minicard-composer display: none -.lists - align-items: flex-start - display: flex - flex-direction: row - margin-bottom: 10px - overflow-x: auto - overflow-y: hidden - padding-bottom: 10px - position: absolute - top: 0 - right: 0 - bottom: 0 - left: 0 + .lists + align-items: flex-start + display: flex + flex-direction: row + margin-bottom: 10px + overflow: auto + padding-bottom: 5px + position: cover + + // In order for the card details pane to overlap the header we need to + // virtually increase this container size with the below hack. (Note that it + // is not possible to set overflow-x: auto, overflow-y: hidden as I + // originally tried). + padding-top: 10px + top: -10px diff --git a/client/components/boards/boardList.styl b/client/components/boards/boardList.styl index c068dbb0..61095d5b 100644 --- a/client/components/boards/boardList.styl +++ b/client/components/boards/boardList.styl @@ -30,17 +30,6 @@ background-size: auto background-repeat: repeat - .details - height: 84px - padding-right: 36px - bottom: 0 - left: 0 - overflow: hidden - padding: 9px 12px - position: absolute - right: 0 - top: 0 - .board-list-item-sub-name color: rgba(255, 255, 255, .5) display: block diff --git a/client/components/boards/colors.styl b/client/components/boards/colors.styl index 1097b20a..ff351880 100644 --- a/client/components/boards/colors.styl +++ b/client/components/boards/colors.styl @@ -2,9 +2,9 @@ // http://flatuicolors.com // // XXX Centralizing all these properties in a single file just because their -// value is derivedform the same color, doesn't make any sense. We should create -// a macro that would generate 6 version of a given propertie and dispatch this -// list in the other stylus files. +// value is derived from the same color, doesn't make any sense. We should +// create a mixin/macro that would generate 6 versions of a given property and +// dispatch this list in the other stylus files. setBoardColor(color) &#header, &.sk-spinner div, diff --git a/client/components/cards/details.jade b/client/components/cards/details.jade index 4e8fd8c0..46929f56 100644 --- a/client/components/cards/details.jade +++ b/client/components/cards/details.jade @@ -1,47 +1,105 @@ template(name="cardDetails") - .card-detail.js-card-detail: .card-detail-canvas + section.card-details.js-card-details: .card-details-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-thin - 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 + .card-details-cover(style="background-image: url({{ cover.url }})") + + .card-details-header + +inlinedForm(classNames="js-card-details-title") + input.field.single-line(type="text" value=title autofocus) + .edit-controls.clearfix + button.primary.confirm(type="submit") {{_ 'save'}} + a.fa.fa-times-thin.js-close-inlined-form + else + a.fa.fa-angle-left.close-card-details.js-close-card-details + a.fa.fa-bars.card-details-menu.js-open-card-details-menu + h2.card-details-title.js-card-title( + class="{{#if currentUser.isBoardMember}}js-open-inlined-form is-editable{{/if}}") + = title + p.card-details-list + | {{_ 'in-list'}} + a.card-details-list-title( + class="{{#if currentUser.isBoardMember}}js-move-card is-editable{{/if}}") + = list.title + if currentUser.isBoardMember + i.fa.fa-chevron-down + + .card-details-items + .card-details-item.card-details-item-members + h3 {{_ 'members'}} each members +userAvatar(userId=this size="small" cardId=../_id) - a.card-detail-item-add-button.dark-hover.js-details-edit-members + a.member.add-member.card-details-item-add-button.js-add-members i.fa.fa-plus - //- We should use "editable" to avoide repetiting ourselves - .clearfix + + .card-details-item.card-details-item-labels + h3 {{_ 'labels'}} + .js-add-labels + each labels + span.card-label(class="card-label-{{color}}" title=name)= name + a.card-label.add-label.js-add-labels + i.fa.fa-plus + + //- XXX We should use "editable" to avoide repetiting ourselves if currentUser.isBoardMember h3 Description +inlinedForm(classNames="js-card-description") - a.fa.fa-times-thin.js-close-inlined-form +editor(autofocus=true) = description - button(type="submit") {{_ 'edit'}} + .edit-controls.clearfix + button.primary(type="submit") {{_ 'edit'}} + a.fa.fa-times-thin.js-close-inlined-form else - .js-open-inlined-form - a {{_ 'edit'}} - +viewer - = description + a.js-open-inlined-form + if description + +viewer + = description + else + | {{_ 'edit'}} else if description h3 Description +viewer = description - hr if attachments.count + hr +WindowAttachmentsModule(card=this) - +WindowActivityModule(card=this) + if isLoaded + hr + +WindowActivityModule(card=this) + +template(name="cardDetailsActionsPopup") + if currentUser.isBoardMember + ul.pop-over-list + li: a.js-members Edit Members… + li: a.js-labels Edit Labels… + li: a.js-attachments Edit Attachments… + hr + ul.pop-over-list + li: a.js-copy Copy card + li: a.js-archive Archive Card template(name="moveCardPopup") +boardLists + +template(name="cardMembersPopup") + ul.pop-over-member-list + each board.members + li.item(class="{{#if isCardMember}}active{{/if}}") + a.name.js-select-member(href="#") + +userAvatar(user=user size="small") + span.full-name + = user.profile.name + | (<span class="username">{{ user.username }}</span>) + if isCardMember + i.fa.fa-check + +template(name="cardLabelsPopup") + ul.edit-labels-pop-over + each board.labels + li + a.card-label-edit-button.fa.fa-pencil.js-edit-label + span.card-label.card-label-selectable.js-select-label(class="card-label-{{color}}" + class="{{# if isLabelSelected ../_id }}active{{/ if }}") + = name + if currentUser.isBoardAdmin + span.card-label-selectable-icon.fa.fa-check + a.quiet-button.full.js-add-label {{_ 'label-create'}} diff --git a/client/components/cards/details.js b/client/components/cards/details.js index 385310bb..d44adb67 100644 --- a/client/components/cards/details.js +++ b/client/components/cards/details.js @@ -8,7 +8,7 @@ BlazeComponent.extendComponent({ }, calculateNextPeak: function() { - var altitude = this.find('.js-card-detail').scrollHeight; + var altitude = this.find('.js-card-details').scrollHeight; this.callFirstWith(this, 'setNextPeak', altitude); }, @@ -25,77 +25,67 @@ BlazeComponent.extendComponent({ bodyBoardComponent.scrollLeft(scollLeft); }, + onDestroyed: function() { + this.componentParent().showOverlay.set(false); + }, + + updateCard: function(modifier) { + Cards.update(this.data()._id, { + $set: modifier + }); + }, + events: function() { return [{ + 'click .js-close-card-details': function() { + Utils.goBoardId(this.data().boardId); + }, 'click .js-move-card': Popup.open('moveCard'), + 'click .js-open-card-details-menu': Popup.open('cardDetailsActions'), 'submit .js-card-description': function(evt) { evt.preventDefault(); - var cardId = Session.get('currentCard'); - var form = this.componentChildren('inlinedForm')[0]; - var newDescription = form.getValue(); - Cards.update(cardId, { - $set: { - description: newDescription - } - }); - form.close(); - }, - 'click .js-close-card-detail': function() { - Utils.goBoardId(Session.get('currentBoard')); - }, - 'click .editable .js-card-title': function(event, t) { - var editable = t.$('.card-detail-title'); - - // add class editing and focus - $('.editing').removeClass('editing'); - editable.addClass('editing'); - editable.find('#title').focus(); - }, - 'click .js-edit-desc': function(event, t) { - var editable = t.$('.card-detail-item'); - - // editing remove based and add current editing. - $('.editing').removeClass('editing'); - editable.addClass('editing'); - editable.find('#desc').focus(); - - event.preventDefault(); - }, - 'click .js-cancel-edit': function() { - // remove editing hide. - $('.editing').removeClass('editing'); + var description = this.currentComponent().getValue(); + this.updateCard({ description: description }); }, - 'submit #WindowTitleEdit': function(event, t) { - var title = t.find('#title').value; + 'submit .js-card-details-title': function(evt) { + evt.preventDefault(); + var title = this.currentComponent().getValue(); if ($.trim(title)) { - Cards.update(this.card._id, { - $set: { - title: title - } - }, function(err) { - if (! err) $('.editing').removeClass('editing'); - }); + this.updateCard({ title: title }); } - - event.preventDefault(); }, - 'submit #WindowDescEdit': function(event, t) { - Cards.update(this.card._id, { - $set: { - description: t.find('#desc').value - } - }, function(err) { - if (! err) $('.editing').removeClass('editing'); - }); - event.preventDefault(); + 'click .js-member': Popup.open('cardMember'), + 'click .js-add-members': Popup.open('cardMembers'), + 'click .js-add-labels': Popup.open('cardLabels'), + 'mouseenter .js-card-details': function() { + this.componentParent().showOverlay.set(true); }, - 'click .member': Popup.open('cardMember'), - 'click .js-details-edit-members': Popup.open('cardMembers'), - 'click .js-details-edit-labels': Popup.open('cardLabels') + 'mouseleave .js-card-details': function(evt) { + // We don't want to hide the overlay if the mouse is entering a pop-over + var $pointedElement = $(evt.toElement || evt.relatedTarget); + if ($pointedElement.closest('.pop-over').length === 0) + this.componentParent().showOverlay.set(false); + } }]; } }).register('cardDetails'); +Template.cardDetailsActionsPopup.events({ + 'click .js-members': Popup.open('cardMembers'), + 'click .js-labels': Popup.open('cardLabels'), + 'click .js-attachments': Popup.open('cardAttachments'), + // 'click .js-copy': Popup.open(), + 'click .js-archive': function(evt) { + evt.preventDefault(); + Cards.update(this._id, { + $set: { + archived: true + } + }); + Popup.close(); + } +}); + Template.moveCardPopup.events({ 'click .js-select-list': function() { // XXX We should *not* get the currentCard from the global state, but @@ -107,5 +97,6 @@ Template.moveCardPopup.events({ listId: newListId } }); + Popup.close(); } }); diff --git a/client/components/cards/details.styl b/client/components/cards/details.styl index 6b1a4cd4..4da8a371 100644 --- a/client/components/cards/details.styl +++ b/client/components/cards/details.styl @@ -1,57 +1,73 @@ @import 'nib' -.card-detail +.card-details padding: 0 20px height: 100% - flex: 0 0 470px + flex-shrink: 0 + flex-basis: 470px + will-change: flex-basis overflow: hidden background: white border-radius: 3px z-index: 20 !important - animation: growIn 0.2s + animation: flexGrowIn 0.2s box-shadow: 0 0 7px 0 darken(white, 30%) - transition: flex 0.2s, padding 0.2s + transition: flex-basis 0.2s, padding 0.2s + margin-top: -9px - .card-detail-canvas + .card-details-canvas width: 470px - .card-detail-header + .card-details-header margin: 0 -20px 5px padding 7px 20px 0 background: #F7F7F7 border-bottom: 1px solid darken(white, 10%) min-height: 38px + position: relative - i.fa + .close-card-details + float: left + font-size: 24px + padding: 8px + padding-right: 11px + margin-left: -18px + + .card-details-menu float: right - font-size: 1.3em - color: darken(white, 35%) - margin-top: 7px + position: absolute + bottom: 6px + right: 15px - .card-detail-title + .card-details-title font-weight: bold - font-size: 1.7em - margin: 3px 0 0 + font-size: 1.33em + margin: 3px 0 padding: 0 - .card-detail-list - font-size: 0.85em - margin-bottom: 3px + .card-details-list + font-size: 0.85em + margin-bottom: 3px - a.card-detail-list-title - font-weight: bold + a.card-details-list-title + font-weight: bold + + &.is-editable + display: inline-block + background: darken(white, 10%) + border-radius: 3px + padding: 0px 5px - &.is-editable - display: inline-block - background: darken(white, 10%) - border-radius: 3px - padding: 0px 5px + .card-details-items + display: flex + margin: 15px 0 -@keyframes growIn - from - flex: 0 0 0 - to - flex: 0 0 470px + .card-details-item + flex-grow: 1 + + h3 + font-size: 14px + color: darken(white, 45%) .new-comment position: relative @@ -107,30 +123,6 @@ &:focus cursor: auto -.list-voters.compact .voter - position: relative - min-height: 36px - - .member - left: 0 - position: absolute - top: 0 - - .title - display: block - line-height: 30px - left: 0 - overflow: hidden - padding-left: 38px - position: absolute - text-overflow: ellipsis - top: 0 - white-space: nowrap - width: 230px - -.list-voters .title - display: none - .card-composer padding-bottom: 8px diff --git a/client/components/cards/labels.styl b/client/components/cards/labels.styl index 9514ce45..c93ecd12 100644 --- a/client/components/cards/labels.styl +++ b/client/components/cards/labels.styl @@ -24,6 +24,10 @@ width: @height padding: 0 + &.add-label + box-shadow: 0 0 0 2px darken(white, 25%) inset + background: darken(white, 5%) + .card-label-green background-color: #3cb500 @@ -84,31 +88,6 @@ left: 0 width: 260px -.minicard-labels - position: relative - z-index: 30 - top: -6px - - .card-label - border-radius: 0 - float: left - height: 4px - margin-bottom: 1px - padding: 0 - width: 40px - line-height: 100px - -.card-detail-item-labels .card-label - border-radius: 3px - display: block - float: left - height: 20px - line-height: 20px - margin: 0 4px 4px 0 - min-width: 30px - padding: 5px 10px - width: auto - .editable-labels .card-label:hover cursor: pointer opacity: .75 @@ -170,19 +149,3 @@ &:hover background: #dbdbdb -.card-label-color-select-icon - left: 14px - position: absolute - top: 9px - -.phenom .card-label - display: inline-block - font-size: 12px - height: 14px - line-height: 13px - padding: 0 4px - min-width: 16px - overflow: ellipsis - -.board-widget .phenom .card-label - max-width: 130px diff --git a/client/components/cards/minicard.js b/client/components/cards/minicard.js index 81d8c0d4..8f229be8 100644 --- a/client/components/cards/minicard.js +++ b/client/components/cards/minicard.js @@ -23,6 +23,14 @@ BlazeComponent.extendComponent({ evt.preventDefault(); var methodName = evt.shiftKey ? 'toogleRange' : 'toogle'; MultiSelection[methodName](this.currentData()._id); + + // If the card is already selected, we want to de-select it. + // XXX We should probably modify the minicard href attribute instead of + // overwriting the event in case the card is already selected. + } else if (Session.equals('currentCard', this.currentData()._id)) { + evt.stopImmediatePropagation(); + evt.preventDefault(); + Utils.goBoardId(Session.get('currentBoard')); } }, diff --git a/client/components/cards/minicard.styl b/client/components/cards/minicard.styl index a5110584..ebad8dec 100644 --- a/client/components/cards/minicard.styl +++ b/client/components/cards/minicard.styl @@ -43,14 +43,13 @@ color: #4d4d4d overflow: hidden transition: transform 0.2s, - border-radius 0.2s, - border-left 0.2s + border-radius 0.2s .is-selected & transform: translateX(11px) border-bottom-right-radius: 0 border-top-right-radius: 0 - z-index: 100 + z-index: 25 box-shadow: -2px 1px 2px rgba(0,0,0,.2) .minicard-cover @@ -66,56 +65,33 @@ background-size: auto background-position: center - .minicard-details-overlay - background: transparent - bottom: 0 - left: 0 - position: absolute - right: 0 - top: 0 - .minicard-dropzone display: none .minicard.drophover .minicard-dropzone background: rgba(255, 255, 255, .8) - // border-radius: 3px - // bottom: 0 - // display: block - // font-weight: 700 - // line-height: 100% - // left: 0 - // margin: 0 - // opacity: 1 - // padding: 0 - // position: absolute - // right: 0 - // text-align: center - // top: 0 - // z-index: 40 .minicard-title display: block font-weight: 400 - margin: 0 0 4px overflow: hidden + margin-bottom: 2px text-decoration: none word-wrap: break-word + clear: both &::selection background: transparent .minicard-labels - padding-top: 3px - margin-top: 4px float: right .minicard-label float: right - width: 8px + width: 11px height: @width border-radius: 2px - margin-left: 4px + margin-right: 3px .minicard-members float: right diff --git a/client/components/cards/popups.jade b/client/components/cards/popups.jade deleted file mode 100644 index 0d10c147..00000000 --- a/client/components/cards/popups.jade +++ /dev/null @@ -1,11 +0,0 @@ -template(name="cardMembersPopup") - ul.pop-over-member-list.js-mem-list - each board.members - li.item(class="{{#if isCardMember}}active{{/if}}") - a.name.js-select-member(href="#") - +userAvatar(user=user size="small") - span.full-name - = user.profile.name - | (<span class="username">{{ user.username }}</span>) - if isCardMember - i.fa.fa-check diff --git a/client/components/cards/templates.html b/client/components/cards/templates.html index 4c65e429..23f9ce4f 100644 --- a/client/components/cards/templates.html +++ b/client/components/cards/templates.html @@ -33,26 +33,6 @@ </p> </template> -<template name="cardLabelsPopup"> - <div> - {{! <input id="labelSearch" name="search" class="js-autofocus js-label-search" placeholder="Search labels…" value="" type="text"> }} - <ul class="edit-labels-pop-over js-labels-list"> - {{# each card.board.labels }} - <li> - <a href="#" class="card-label-edit-button icon-sm fa fa-pencil js-edit-label"></a> - <span class="card-label card-label-selectable card-label-{{color}} js-select-label {{# if isLabelSelected ../card._id }}active{{/ if }}"> - {{name}} - {{# if currentUser.isBoardAdmin }} - <span class="card-label-selectable-icon icon-sm fa fa-check light"></span> - {{/ if }} - </span> - </li> - {{/ each}} - </ul> - <a class="quiet-button full js-add-label">{{_ 'label-create'}}</a> - </div> -</template> - <template name="cardAttachmentsPopup"> <div> <ul class="pop-over-list"> @@ -114,7 +94,7 @@ </template> <template name="cardDetailSidebarOld"> - <div class="card-detail-window clearfix"> + <div class="card-details-window clearfix"> {{# if card.cover }} <div class="window-cover js-card-cover-box js-open-card-cover-in-viewer has-cover" style="background-image: url({{ card.cover.url }}); background-color: rgb(119, 119, 119); background-size: contain;"> </div> @@ -127,7 +107,7 @@ {{ /if }} <div class="window-header clearfix"> <span class="window-header-icon icon-lg fa fa-calendar-o"></span> - <div class="window-title card-detail-title non-empty inline {{# if currentUser.isBoardMember }}editable{{/ if }}"> + <div class="window-title card-details-title non-empty inline {{# if currentUser.isBoardMember }}editable{{/ if }}"> <h2 class="window-title-text current hide-on-edit js-card-title">{{ card.title }}</h2> <div class="edit edit-heavy"> <form id="WindowTitleEdit"> @@ -147,39 +127,39 @@ </div> </div> <div class="window-main-col clearfix"> - <div class="card-detail-data gutter clearfix"> - <div class="card-detail-item card-detail-item-block clear clearfix editable"> + <div class="card-details-data gutter clearfix"> + <div class="card-details-item card-details-item-block clear clearfix editable"> {{# if card.members }} - <div class="card-detail-item card-detail-item-members clearfix js-card-detail-members"> - <h3 class="card-detail-item-header">{{_ 'members'}}</h3> - <div class="js-card-detail-members-list clearfix"> + <div class="card-details-item card-details-item-members clearfix js-card-details-members"> + <h3 class="card-details-item-header">{{_ 'members'}}</h3> + <div class="js-card-details-members-list clearfix"> {{# each card.members }} {{> userAvatar userId=this size="small" cardId=../card._id }} {{/ each }} - <a class="card-detail-item-add-button dark-hover js-details-edit-members"> + <a class="card-details-item-add-button dark-hover js-details-edit-members"> <span class="icon-sm fa fa-plus"></span> </a> </div> </div> {{/ if }} {{# if card.labels }} - <div class="card-detail-item card-detail-item-labels clearfix js-card-detail-labels"> - <h3 class="card-detail-item-header">{{_ 'labels'}}</h3> - <div class="js-card-detail-labels-list clearfix editable-labels js-edit-label"> + <div class="card-details-item card-details-item-labels clearfix js-card-details-labels"> + <h3 class="card-details-item-header">{{_ 'labels'}}</h3> + <div class="js-card-details-labels-list clearfix editable-labels js-edit-label"> {{# each card.labels }} <span class="card-label card-label-{{color}}" title="{{name}}">{{ name }}</span> {{/ each }} - <a class="card-detail-item-add-button dark-hover js-details-edit-labels"> + <a class="card-details-item-add-button dark-hover js-details-edit-labels"> <span class="icon-sm fa fa-plus"></span> </a> </div> </div> {{/ if }} - <div class="card-detail-item card-detail-item-block clear clearfix editable" attr="desc"> + <div class="card-details-item card-details-item-block clear clearfix editable" attr="desc"> {{# if card.description }} - <h3 class="card-detail-item-header js-show-with-desc">{{_ 'description'}}</h3> + <h3 class="card-details-item-header js-show-with-desc">{{_ 'description'}}</h3> {{# if currentUser.isBoardMember }} - <a href="#" class="card-detail-item-header-edit hide-on-edit js-show-with-desc js-edit-desc">{{_ 'edit'}}</a> + <a href="#" class="card-details-item-header-edit hide-on-edit js-show-with-desc js-edit-desc">{{_ 'edit'}}</a> {{/ if }} <div class="current markeddown hide-on-edit js-card-desc js-show-with-desc"> {{#viewer}}{{ card.description }}{{/viewer}} @@ -194,7 +174,7 @@ </p> {{/ if }} {{/ if }} - <div class="card-detail-edit edit"> + <div class="card-details-edit edit"> <form id="WindowDescEdit"> {{#editor class="field single-line2" id="desc"}}{{ card.description }}{{/editor}} <div class="edit-controls clearfix"> @@ -218,7 +198,7 @@ </template> <template name="WindowActivityModule"> - <div class="card-detailwindow-module"> + <div class="card-detailswindow-module"> <div class="window-module-title window-module-title-no-divider"> <span class="window-module-title-icon icon-lg fa fa-comments-o"></span> <h3>{{ _ 'activity'}}</h3> diff --git a/client/components/forms/forms.styl b/client/components/forms/forms.styl index 06796170..1f62ca34 100644 --- a/client/components/forms/forms.styl +++ b/client/components/forms/forms.styl @@ -479,6 +479,9 @@ button color: #53492d background: #e1cc93 +.is-editable + cursor: pointer + .big-link border-radius: 3px display: block diff --git a/client/components/forms/inlinedform.js b/client/components/forms/inlinedform.js index b8442a28..e4331892 100644 --- a/client/components/forms/inlinedform.js +++ b/client/components/forms/inlinedform.js @@ -76,7 +76,7 @@ BlazeComponent.extendComponent({ // Pressing Ctrl+Enter should submit the form 'keydown form textarea': function(evt) { if (evt.keyCode === 13 && (evt.metaKey || evt.ctrlKey)) { - $(evt.currentTarget).parents('form:first').submit(); + this.find('button[type=submit]').click(); } }, diff --git a/client/components/lists/body.jade b/client/components/lists/body.jade index 9f9d04ad..f1159ce5 100644 --- a/client/components/lists/body.jade +++ b/client/components/lists/body.jade @@ -16,8 +16,7 @@ template(name="listBody") template(name="addCardForm") .minicard.minicard-composer.js-composer - .minicard-labels.js-minicard-composer-labels - .minicard-details.clearfix + .minicard-detailss.clearfix textarea.minicard-composer-textarea.js-card-title(autofocus) .minicard-members.js-minicard-composer-members .add-controls.clearfix diff --git a/client/components/lists/header.jade b/client/components/lists/header.jade index b8548278..e319aa93 100644 --- a/client/components/lists/header.jade +++ b/client/components/lists/header.jade @@ -3,11 +3,14 @@ template(name="listHeader") +inlinedForm +editListTitleForm else - h2.list-header-name.js-open-inlined-form= title + h2.list-header-name( + class="{{#if currentUser.isBoardMember}}js-open-inlined-form is-editable{{/if}}") + = title a.list-header-menu-icon.fa.fa-bars.js-open-list-menu template(name="editListTitleForm") - input.field.single-line(type="text" value=title autofocus) - .edit-controls.clearfix - button.primary.confirm(type="submit") {{_ 'save'}} - a.fa.fa-times-thin.js-close-inlined-form + .list-composer + input.field.single-line(type="text" value=title autofocus) + .edit-controls.clearfix + button.primary.confirm(type="submit") {{_ 'save'}} + a.fa.fa-times-thin.js-close-inlined-form diff --git a/client/components/lists/main.styl b/client/components/lists/main.styl index 98b4abf4..bfa0f348 100644 --- a/client/components/lists/main.styl +++ b/client/components/lists/main.styl @@ -8,7 +8,7 @@ position: relative // Even if this background color is the same as the body we can't leave it // transparent, because that won't work during a list drag. - background: darken(white, 10%) + background: darken(white, 13%) height: 100% border-left: 1px solid darken(white, 20%) padding: 0 @@ -17,7 +17,7 @@ margin-left: 5px border-left: none - .card-detail + & + .card-details + & border-left: none &.ui-sortable-helper @@ -32,13 +32,15 @@ box-shadow: none height: 100px - &.list-composer + &.list-composer, & list-composer padding: 17px + form + margin-top: -5px + .list-name-input - background: rgba(0, 0, 0, .05) + background: rgba(255, 255, 255, .4) border-color: #aaa - box-shadow: inset 0 1px 8px rgba(0, 0, 0, .15) display: block margin: 0 transition: margin 85ms ease-in, @@ -52,14 +54,9 @@ overflow: hidden margin: 4px 0 0 - input[type=submit] - margin-top: 0 - min-height: 30px - height: 30px - .list-header flex: 0 0 auto - margin: 20px 15px 4px + margin: 20px 12px 4px position: relative min-height: 20px @@ -76,17 +73,9 @@ word-wrap: break-word .list-header-menu-icon - background-clip: content-box - background-origin: content-box - // padding: 6px 8px position: absolute top: 0 right: 0 - color: #a6a6a6 - - .list-header-num-cards - color: #8c8c8c - margin: 0 .list-body flex: 1 @@ -119,9 +108,3 @@ background: #fafafa color: #222 box-shadow: 0 1px 2px rgba(0,0,0,.2) - -@keyframes fadeIn - from - opacity: 0 - to - opacity: 1 diff --git a/client/components/sidebar/sidebar.jade b/client/components/sidebar/sidebar.jade index 40e0dae3..7e237233 100644 --- a/client/components/sidebar/sidebar.jade +++ b/client/components/sidebar/sidebar.jade @@ -2,7 +2,7 @@ template(name="sidebar") .board-sidebar.sidebar(class="{{#if isOpen}}is-open{{/if}}") a.sidebar-tongue.js-toogle-sidebar( class="{{#if isTongueHidden}}is-hidden{{/if}}") - i.fa.fa-chevron-left + i.fa.fa-angle-left .sidebar-content.js-board-sidebar-content.js-perfect-scrollbar unless isDefaultView h2 @@ -44,9 +44,9 @@ template(name="labelsWidget") | {{_ 'labels'}} .board-widget-content each currentBoard.labels - a.card-label(class="card-label-{{color}}").js-label - span.card-label-name= name - a.card-label.js-add-label + a.card-label(class="card-label-{{color}}").js-label + span.card-label-name= name + a.card-label.add-label.js-add-label i.fa.fa-plus template(name="memberPopup") diff --git a/client/components/sidebar/sidebar.styl b/client/components/sidebar/sidebar.styl index e24b7de2..57cc85fd 100644 --- a/client/components/sidebar/sidebar.styl +++ b/client/components/sidebar/sidebar.styl @@ -59,88 +59,6 @@ &.is-open right: 0 -.board-widget-nav - border-radius: 3px - background: #dcdcdc - overflow: hidden - padding: 0 - position: relative - - .toggle-widget-nav - border-radius: 3px - color: #8c8c8c - margin: 0 - padding: 7px 10px - position: relative - cursor: pointer - - .toggle-menu-icon - position: absolute - top: 8px - right: 8px - - &:hover - background: #ccc - color: #4d4d4d - - .nav-list - display: block - opacity: 1 - max-height: 400px - - hr - margin: 2px 0 - color: #ccc - background: #ccc - - .nav-list-item - display: block - font-weight: 700 - line-height: 30px - overflow: hidden - padding: 0 8px 0 36px - position: relative - text-decoration: none - - .icon-type - left: 10px - position: absolute - top: 6px - - &:hover - background: #ccc - - .icon-type - color: #686868 - - .nav-list-sub-item - font-weight: 400 - color: #666 - - &:hover - color: #4d4d4d - - &.collapsed - - .nav-list - max-height: 0 - opacity: 0 - - hr - margin: 0 - - .toggle-widget-nav - color: #4d4d4d - -.board-widget-title - display: block - min-height: 20px - margin-bottom: 6px - -.board-widget-content - position: relative - z-index: 1 - .board-widget h4 margin: 5px 0 @@ -162,7 +80,8 @@ transition: left .1s i.fa - margin: 9px + padding: 3px 9px + font-size: 24px transition: transform 0.5s .board-sidebar.is-open & diff --git a/client/components/users/userAvatar.jade b/client/components/users/userAvatar.jade index a76c4617..98682eb5 100644 --- a/client/components/users/userAvatar.jade +++ b/client/components/users/userAvatar.jade @@ -1,6 +1,5 @@ template(name="userAvatar") - .member(class="{{class}} {{# if draggable }}js-member{{else}}js-member-on-card-menu{{/if}}" - title="{{userData.profile.name}} ({{userData.username}})") + .member.js-member(class="{{class}}" title="{{userData.profile.name}} ({{userData.username}})") +avatar(user=userData size=size) if showStatus span.member-presence-status(class=presenceStatusClassName) diff --git a/client/components/users/userAvatar.styl b/client/components/users/userAvatar.styl index dfe59143..1f249fcd 100644 --- a/client/components/users/userAvatar.styl +++ b/client/components/users/userAvatar.styl @@ -96,6 +96,13 @@ avatar-radius = 50% line-height: 85px width: 85px + &.add-member + display: flex + align-items: center + justify-content: center + box-shadow: 0 0 0 2px darken(white, 25%) inset + background: darken(white, 5%) + .atMention background: #dbdbdb border-radius: 3px diff --git a/client/styles/main.styl b/client/styles/main.styl index 4b78b9ec..cc66576b 100644 --- a/client/styles/main.styl +++ b/client/styles/main.styl @@ -13,7 +13,7 @@ html -webkit-text-size-adjust: 100% body - background: darken(white, 10%) + background: darken(white, 13%) margin: 0 position: relative z-index: 0 @@ -23,6 +23,7 @@ body display: flex flex-direction: column min-height: 100vh + overflow: hidden #content position: relative @@ -216,12 +217,6 @@ dd top: 1px left: -38px - .helper - bottom: 0 - display: none - position: absolute - right: 9px - &.focus .member opacity: 1 @@ -259,368 +254,6 @@ dd &:focus cursor: auto -.editing-members - float: right - - .edit-in-progress - display: inline-block - border: 1px solid #ccc - background: #ddd - margin: 0 4px - border-radius: 2px - - .inline-member - cursor: default - - .inline-member-av - width: 18px - height: 18px - margin: 0 0 -4px 0 - - .initials - margin-left: 3px - - .icon - animation: pulsate 1s ease-in alternate - animation-iteration-count: infinite - -@keyframes pulsate - 0% - opacity: 1 - - to - opacity: .4 - -.list-voters.compact .voter - position: relative - min-height: 36px - - .member - left: 0 - position: absolute - top: 0 - - .title - display: block - line-height: 30px - left: 0 - overflow: hidden - padding-left: 38px - position: absolute - text-overflow: ellipsis - top: 0 - white-space: nowrap - width: 230px - -.list-voters .title - display: none - -.card-composer - padding-bottom: 8px - -.card-detail-badge - background-color: #dbdbdb - border-radius: 3px - color: #737373 - cursor: default - display: block - height: 20px - line-height: 20px - margin: 0 4px 4px 0 - padding: 5px 10px - text-align: center - text-decoration: none - - &:hover - color: #737373 - - &.badge-state-clickable - text-decoration: underline - -.badge-state-clickable:hover - color: #262626 - cursor: pointer - text-decoration: underline - -.card-detail-badge-aging:first-letter - text-transform: uppercase - -.badge - color: #8c8c8c - float: left - height: 18px - margin: 0 3px 3px 0 - padding: 0 4px 0 0 - position: relative - text-decoration: none - -.badge-icon - float: left - -.badge-text - float: left - font-size: 12px - -.badge-state-image-only - padding: 0 - - .badge-icon - margin-right: 0 - -.badge-state-clickable - cursor: pointer - - .badge-text - text-decoration: underline - -.badge-state-complete - background-color: #4aba12 - border-radius: 3px - color: #fff - - .badge-icon - color: #fff - -.badge-state-unread-notification - background-color: #990f0f - border-radius: 3px - color: #fff - - .badge-icon - color: #fff - -.badge-state-voted - background-color: #dbdbdb - border-radius: 3px - color: #8c8c8c - - .badge-icon - color: #999 - -.badge-state-due-soon, .badge-state-due-soon:hover - background-color: #e6bf00 - border-radius: 3px - color: #fff - - .badge-icon - color: #fff - -.badge-state-due-now, .badge-state-due-now:hover - background-color: #990f0f - border-radius: 3px - color: #fff - - .badge-icon - color: #fff - -.badge-state-due-past, .badge-state-due-past:hover - background-color: #ad8585 - border-radius: 3px - color: #fff - - .badge-icon - color: #fff - -.checklist-list:empty - display: none - -.checklist - margin-bottom: 16px - -.checklist.placeholder - background: #dcdcdc - border-radius: 3px - -.checklist.ui-sortable-helper - background: rgba(240, 240, 240, .85) - border-radius: 3px - - .checklist-title, - .current, - .window-module-title - cursor: grabbing - - .icon-menu - visibility: hidden - -.checklist-items-list - min-height: 2px - -.checklist-item - clear: both - margin: 0 0 6px - padding: 0 0 4px 38px - position: relative - transform-origin: left bottom - transition-property: transform, opacity, height, padding, margin - transition-duration: .14s - transition-timing-function: ease-in - - &.placeholder - background: #dcdcdc - border-radius: 3px - margin: -5px -5px 5px 5px - padding: 5px 0 - - &.ui-sortable-helper - background: rgba(240, 240, 240, .85) - border-radius: 3px - margin: -3px -3px -3px 7px - padding: 3px 3px 3px 33px - - .checklist-item-checkbox - top: 2px - left: 2px - -.hide-completed-items .checklist-item-fade-out - height: 0 - margin: 0 - opacity: 0 - padding: 0 - transform: rotate(-5deg) translateX(-10px) translateY(-10px) - -.checklist-item-checkbox - background: #fff - border-radius: 3px - box-shadow: 0 2px 3px rgba(0, 0, 0, .1) - border: 1px solid #ccc - border-bottom-color: #b3b3b3 - font-weight: 700 - position: absolute - left: 6px - line-height: 18px - overflow: hidden - text-align: center - text-indent: 100% - top: -2px - height: 18px - width: 18px - white-space: nowrap - - &.enabled:hover - background-color: #f0f0f0 - border-color: #ccc - box-shadow: 0 1px 2px rgba(0, 0, 0, .1) - color: #8c8c8c - cursor: pointer - text-indent: 0 - - &.enabled:active - background-color: #e3e3e3 - border-color: #ccc - box-shadow: inset 0 3px 6px rgba(0, 0, 0, .1) - color: #4d4d4d - text-indent: 0 - -.checklist-item-details-text - min-height: 18px - margin-bottom: 0 - - &.enabled:hover - color: #4d4d4d - cursor: pointer - - &:empty - content: "No name" - color: #8c8c8c - -.checklist-item-state-complete - - .checklist-item-details-text - color: #8c8c8c - font-style: italic - text-decoration: line-through - - img - opacity: .3 - - .checklist-item-checkbox - background-color: #f0f0f0 - border-color: #dbdbdb - border-bottom-color: #ccc - box-shadow: none - text-indent: 0 - - &.enabled:hover - background-color: #e6e6e6 - border-color: #ccc - box-shadow: none - - &.enabled:active - background-color: #dbdbdb - box-shadow: inset 0 3px 6px rgba(0, 0, 0, .1) - -.hide-completed-items .checklist-item-state-complete - display: none - -.checklist-new-item-text, -.checklist-new-item-text:hover - background: transparent - border-color: transparent - box-shadow: none - color: #8c8c8c - cursor: pointer - margin-bottom: 4px - max-height: 32px - overflow: hidden - resize: none - text-decoration: none - - .checklist-new-item.focus & - background: #fff - border-color: #2b7cab - box-shadow: 0 0 3px #2b7cab - color: #4d4d4d - cursor: text - max-height: none - resize: vertical - -.checklist-progress - margin-bottom: 12px - position: relative - -.checklist-progress-percentage - color: #8c8c8c - font-size: 11px - line-height: 10px - position: absolute - left: 0 - top: -1px - text-align: center - width: 38px - -.checklist-progress-bar - background: #dbdbdb - border-radius: 3px - clear: both - height: 8px - margin: 0 0 0 38px - overflow: hidden - position: relative - -.checklist-progress-bar-current - background: #479fd1 - background: linear-gradient(to bottom, #479fd1 0, #2288c3 100%) - bottom: 0 - left: 0 - position: absolute - top: 0 - transition: width .14s ease-in, background .14s ease-in - -.checklist-progress-bar-current-complete - background: #24a828 - -.checklist-completed-text - display: block - margin: 8px 0 0 38px - -.checklist .edit - clear: both - margin-top: -5px - -.explorer .av-btn - background: url(about:blank) - .atMention background: #dbdbdb border-radius: 3px @@ -631,45 +264,6 @@ dd &.me background: #cfdfe8 -.helper - background-color: #e6e6e6 - border-radius: 3px - color: #8c8c8c - font-size: 13px - line-height: 15px - margin: 4px 0 0 - padding: 6px 8px - width: auto - - a - color: #8c8c8c - - &:hover - color: #666 - -.empty-list, .empty - background: #e6e6e6 - border: 1px dashed #ccc - border-radius: 3px - color: #8c8c8c - display: block - padding: 6px - text-align: center - -.empty-list - border-radius: 6px - padding: 25px 6px - -.search-results-page-contents .empty-list - margin: 12px 0 0 52px - -.window-module .empty-list - margin: 8px 0 0 38px - -.loading - margin: 19px auto - text-align: center - .big-message display: block margin: 75px auto @@ -684,28 +278,13 @@ dd font-size: 18px line-height: 22px - &.with-picture - margin-top: 35px - - h1 - margin-top: 20px - - .callout - margin: 20px 0 - -.callout - background: #e3e3e3 - border-radius: 5px - padding: 20px - - ol - text-align: left - list-style-type: decimal - margin-left: 25px - font-size: 16px - - li - margin: 10px 0 - .gutter margin-left: 38px + +@keyframes fadeIn + from + opacity: 0 + +@keyframes flexGrowIn + from + flex-basis: 0 diff --git a/i18n/en.i18n.json b/i18n/en.i18n.json index 4733eca6..bf7293dd 100644 --- a/i18n/en.i18n.json +++ b/i18n/en.i18n.json @@ -188,5 +188,6 @@ "editProfilePopup-title": "Edit Profile", "changeAvatarPopup-title": "Change Avatar", "changePasswordPopup-title": "Change Password", + "cardDetailsActionsPopup-title": "Card Actions", "disambiguateMultiLabelPopup-title": "Disambiguate Label Action" } |