From b5dabfe88695a8f8211b29fea0dc16131c9a1829 Mon Sep 17 00:00:00 2001 From: Maxime Quandalle Date: Fri, 28 Aug 2015 02:21:42 +0200 Subject: More explicit file names --- client/components/cards/cardDetails.jade | 120 ++++++++++++++++++++++++++++++ client/components/cards/cardDetails.js | 123 +++++++++++++++++++++++++++++++ client/components/cards/cardDetails.styl | 98 ++++++++++++++++++++++++ client/components/cards/details.jade | 120 ------------------------------ client/components/cards/details.js | 123 ------------------------------- client/components/cards/details.styl | 98 ------------------------ 6 files changed, 341 insertions(+), 341 deletions(-) create mode 100644 client/components/cards/cardDetails.jade create mode 100644 client/components/cards/cardDetails.js create mode 100644 client/components/cards/cardDetails.styl delete mode 100644 client/components/cards/details.jade delete mode 100644 client/components/cards/details.js delete mode 100644 client/components/cards/details.styl (limited to 'client/components/cards') diff --git a/client/components/cards/cardDetails.jade b/client/components/cards/cardDetails.jade new file mode 100644 index 00000000..56c32e84 --- /dev/null +++ b/client/components/cards/cardDetails.jade @@ -0,0 +1,120 @@ +template(name="cardDetails") + section.card-details.js-card-details.js-perfect-scrollbar: .card-details-canvas + if cover + .card-details-cover(style="background-image: url({{ cover.url }})") + + .card-details-header + +inlinedForm(classNames="js-card-details-title") + input.full-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.card-details-item-title {{_ 'members'}} + each members + +userAvatar(userId=this cardId=../_id) + a.member.add-member.card-details-item-add-button.js-add-members + i.fa.fa-plus + + .card-details-item.card-details-item-labels + h3.card-details-item-title {{_ 'labels'}} + a.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 avoid repetiting ourselves + if currentUser.isBoardMember + h3.card-details-item-title Description + +inlinedForm(classNames="card-description js-card-description") + +editor(autofocus=true) + = description + .edit-controls.clearfix + button.primary(type="submit") {{_ 'edit'}} + a.fa.fa-times-thin.js-close-inlined-form + else + a.js-open-inlined-form + if description + +viewer + = description + else + | {{_ 'edit'}} + else if description + h3.card-details-item-title Description + +viewer + = description + if attachments.count + hr + h2 + i.fa.fa-paperclip + | {{_ 'attachments'}} + + +attachmentsGalery + + hr + h2 {{ _ 'activity'}} + if currentUser.isBoardMember + +commentForm + if isLoaded.get + +activities(card=this mode="card") + +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 + unless archived + li: a.js-archive Archive Card + li: a.js-more More + +template(name="moveCardPopup") + +boardLists + +template(name="cardMembersPopup") + ul.pop-over-list.pop-over-member-list + each board.members + li.item(class="{{#if isCardMember}}active{{/if}}") + a.name.js-select-member(href="#") + +userAvatar(userId=user._id) + span.full-name + = user.profile.fullname + | ({{ user.username }}) + if isCardMember + i.fa.fa-check + +template(name="cardMorePopup") + p.quiet + span.clearfix + span {{_ 'link-card'}} + = ' ' + i.fa.colorful(class="{{#if board.isPublic}}fa-globe{{else}}fa-lock{{/if}}") + input.inline-input(type="text" readonly value="{{ rootUrl }}") + | {{_ 'added'}} + span.date(title=card.createdAt) {{ moment createdAt 'LLL' }} + a.js-delete(title="{{_ 'card-delete-notice'}}") {{_ 'delete'}} + +template(name="cardDeletePopup") + p {{_ "card-delete-pop"}} + unless archived + p {{_ "card-delete-suggest-archive"}} + button.js-confirm.negate.full(type="submit") {{_ 'delete'}} diff --git a/client/components/cards/cardDetails.js b/client/components/cards/cardDetails.js new file mode 100644 index 00000000..4fa90bf7 --- /dev/null +++ b/client/components/cards/cardDetails.js @@ -0,0 +1,123 @@ +BlazeComponent.extendComponent({ + template: function() { + return 'cardDetails'; + }, + + mixins: function() { + return [Mixins.InfiniteScrolling, Mixins.PerfectScrollbar]; + }, + + calculateNextPeak: function() { + var altitude = this.find('.js-card-details').scrollHeight; + this.callFirstWith(this, 'setNextPeak', altitude); + }, + + reachNextPeak: function() { + var activitiesComponent = this.componentChildren('activities')[0]; + activitiesComponent.loadNextPage(); + }, + + onRendered: function() { + var bodyBoardComponent = this.componentParent(); + var additionalMargin = 550; + var $cardDetails = this.$(this.firstNode()); + var scollLeft = $cardDetails.offset().left + additionalMargin; + bodyBoardComponent.scrollLeft(scollLeft); + }, + + onDestroyed: function() { + this.componentParent().showOverlay.set(false); + }, + + updateCard: function(modifier) { + Cards.update(this.data()._id, { + $set: modifier + }); + }, + + onCreated: function() { + this.isLoaded = new ReactiveVar(false); + }, + + events: function() { + var events = { + [CSSEvents.animationend + ' .js-card-details']: function() { + this.isLoaded.set(true); + } + }; + + return [_.extend(events, { + '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 description = this.currentComponent().getValue(); + this.updateCard({ description: description }); + }, + 'submit .js-card-details-title': function(evt) { + evt.preventDefault(); + var title = this.currentComponent().getValue(); + if ($.trim(title)) { + this.updateCard({ title: title }); + } + }, + '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); + } + })]; + } +}).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(); + }, + 'click .js-more': Popup.open('cardMore') +}); + +Template.moveCardPopup.events({ + 'click .js-select-list': function() { + // XXX We should *not* get the currentCard from the global state, but + // instead from a “component” state. + var cardId = Session.get('currentCard'); + var newListId = this._id; + Cards.update(cardId, { + $set: { + listId: newListId + } + }); + Popup.close(); + } +}); + +Template.cardMorePopup.events({ + 'click .js-delete': Popup.afterConfirm('cardDelete', function() { + Popup.close(); + Cards.remove(this._id); + Utils.goBoardId(this.board()._id); + }) +}); + +// Close the card details pane by pressing escape +EscapeActions.register('detailsPane', + function() { Utils.goBoardId(Session.get('currentBoard')); }, + function() { return ! Session.equals('currentCard', null); }, { + noClickEscapeOn: '.js-card-details,.board-sidebar,#header' + } +); diff --git a/client/components/cards/cardDetails.styl b/client/components/cards/cardDetails.styl new file mode 100644 index 00000000..72e8c7c9 --- /dev/null +++ b/client/components/cards/cardDetails.styl @@ -0,0 +1,98 @@ +@import 'nib' + +.card-details + padding: 0 20px + height: 100% + flex-shrink: 0 + flex-basis: 470px + will-change: flex-basis + overflow: hidden + background: white + border-radius: 3px + z-index: 20 !important + animation: flexGrowIn 0.1s + box-shadow: 0 0 7px 0 darken(white, 30%) + transition: flex-basis 0.1s + margin-top: -9px + + .card-details-canvas + width: 470px + + .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 + + .close-card-details + float: left + font-size: 24px + padding: 8px + padding-right: 11px + margin-left: -18px + + .card-details-menu + float: right + position: absolute + bottom: 6px + right: 15px + + .card-details-title + font-weight: bold + font-size: 1.33em + margin: 3px 0 + padding: 0 + + form.inlined-form + margin-top: 5px + margin-bottom: 10px + + .card-details-list + font-size: 0.85em + margin-bottom: 3px + + a.card-details-list-title + font-weight: bold + + &.is-editable + display: inline-block + background: darken(white, 10%) + border-radius: 3px + padding: 0px 5px + + .card-description textarea + min-height: 100px + + .card-details-items + display: flex + margin: 15px 0 + + .card-details-item + &.card-details-item-labels, + &.card-details-item-members + width: 50% + flex-shrink: 1 + + .card-details-item-title + font-size: 14px + color: darken(white, 45%) + + .card-label + padding-top: 5px + padding-bottom: 5px + + .activities + padding-top: 10px + +input[type="text"].attachment-add-link-input + float: left + margin: 0 0 8px + width: 80% + +input[type="submit"].attachment-add-link-submit + float: left + margin: 0 0 8px 4px + padding: 6px 12px + width: 18% diff --git a/client/components/cards/details.jade b/client/components/cards/details.jade deleted file mode 100644 index 56c32e84..00000000 --- a/client/components/cards/details.jade +++ /dev/null @@ -1,120 +0,0 @@ -template(name="cardDetails") - section.card-details.js-card-details.js-perfect-scrollbar: .card-details-canvas - if cover - .card-details-cover(style="background-image: url({{ cover.url }})") - - .card-details-header - +inlinedForm(classNames="js-card-details-title") - input.full-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.card-details-item-title {{_ 'members'}} - each members - +userAvatar(userId=this cardId=../_id) - a.member.add-member.card-details-item-add-button.js-add-members - i.fa.fa-plus - - .card-details-item.card-details-item-labels - h3.card-details-item-title {{_ 'labels'}} - a.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 avoid repetiting ourselves - if currentUser.isBoardMember - h3.card-details-item-title Description - +inlinedForm(classNames="card-description js-card-description") - +editor(autofocus=true) - = description - .edit-controls.clearfix - button.primary(type="submit") {{_ 'edit'}} - a.fa.fa-times-thin.js-close-inlined-form - else - a.js-open-inlined-form - if description - +viewer - = description - else - | {{_ 'edit'}} - else if description - h3.card-details-item-title Description - +viewer - = description - if attachments.count - hr - h2 - i.fa.fa-paperclip - | {{_ 'attachments'}} - - +attachmentsGalery - - hr - h2 {{ _ 'activity'}} - if currentUser.isBoardMember - +commentForm - if isLoaded.get - +activities(card=this mode="card") - -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 - unless archived - li: a.js-archive Archive Card - li: a.js-more More - -template(name="moveCardPopup") - +boardLists - -template(name="cardMembersPopup") - ul.pop-over-list.pop-over-member-list - each board.members - li.item(class="{{#if isCardMember}}active{{/if}}") - a.name.js-select-member(href="#") - +userAvatar(userId=user._id) - span.full-name - = user.profile.fullname - | ({{ user.username }}) - if isCardMember - i.fa.fa-check - -template(name="cardMorePopup") - p.quiet - span.clearfix - span {{_ 'link-card'}} - = ' ' - i.fa.colorful(class="{{#if board.isPublic}}fa-globe{{else}}fa-lock{{/if}}") - input.inline-input(type="text" readonly value="{{ rootUrl }}") - | {{_ 'added'}} - span.date(title=card.createdAt) {{ moment createdAt 'LLL' }} - a.js-delete(title="{{_ 'card-delete-notice'}}") {{_ 'delete'}} - -template(name="cardDeletePopup") - p {{_ "card-delete-pop"}} - unless archived - p {{_ "card-delete-suggest-archive"}} - button.js-confirm.negate.full(type="submit") {{_ 'delete'}} diff --git a/client/components/cards/details.js b/client/components/cards/details.js deleted file mode 100644 index 4fa90bf7..00000000 --- a/client/components/cards/details.js +++ /dev/null @@ -1,123 +0,0 @@ -BlazeComponent.extendComponent({ - template: function() { - return 'cardDetails'; - }, - - mixins: function() { - return [Mixins.InfiniteScrolling, Mixins.PerfectScrollbar]; - }, - - calculateNextPeak: function() { - var altitude = this.find('.js-card-details').scrollHeight; - this.callFirstWith(this, 'setNextPeak', altitude); - }, - - reachNextPeak: function() { - var activitiesComponent = this.componentChildren('activities')[0]; - activitiesComponent.loadNextPage(); - }, - - onRendered: function() { - var bodyBoardComponent = this.componentParent(); - var additionalMargin = 550; - var $cardDetails = this.$(this.firstNode()); - var scollLeft = $cardDetails.offset().left + additionalMargin; - bodyBoardComponent.scrollLeft(scollLeft); - }, - - onDestroyed: function() { - this.componentParent().showOverlay.set(false); - }, - - updateCard: function(modifier) { - Cards.update(this.data()._id, { - $set: modifier - }); - }, - - onCreated: function() { - this.isLoaded = new ReactiveVar(false); - }, - - events: function() { - var events = { - [CSSEvents.animationend + ' .js-card-details']: function() { - this.isLoaded.set(true); - } - }; - - return [_.extend(events, { - '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 description = this.currentComponent().getValue(); - this.updateCard({ description: description }); - }, - 'submit .js-card-details-title': function(evt) { - evt.preventDefault(); - var title = this.currentComponent().getValue(); - if ($.trim(title)) { - this.updateCard({ title: title }); - } - }, - '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); - } - })]; - } -}).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(); - }, - 'click .js-more': Popup.open('cardMore') -}); - -Template.moveCardPopup.events({ - 'click .js-select-list': function() { - // XXX We should *not* get the currentCard from the global state, but - // instead from a “component” state. - var cardId = Session.get('currentCard'); - var newListId = this._id; - Cards.update(cardId, { - $set: { - listId: newListId - } - }); - Popup.close(); - } -}); - -Template.cardMorePopup.events({ - 'click .js-delete': Popup.afterConfirm('cardDelete', function() { - Popup.close(); - Cards.remove(this._id); - Utils.goBoardId(this.board()._id); - }) -}); - -// Close the card details pane by pressing escape -EscapeActions.register('detailsPane', - function() { Utils.goBoardId(Session.get('currentBoard')); }, - function() { return ! Session.equals('currentCard', null); }, { - noClickEscapeOn: '.js-card-details,.board-sidebar,#header' - } -); diff --git a/client/components/cards/details.styl b/client/components/cards/details.styl deleted file mode 100644 index 72e8c7c9..00000000 --- a/client/components/cards/details.styl +++ /dev/null @@ -1,98 +0,0 @@ -@import 'nib' - -.card-details - padding: 0 20px - height: 100% - flex-shrink: 0 - flex-basis: 470px - will-change: flex-basis - overflow: hidden - background: white - border-radius: 3px - z-index: 20 !important - animation: flexGrowIn 0.1s - box-shadow: 0 0 7px 0 darken(white, 30%) - transition: flex-basis 0.1s - margin-top: -9px - - .card-details-canvas - width: 470px - - .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 - - .close-card-details - float: left - font-size: 24px - padding: 8px - padding-right: 11px - margin-left: -18px - - .card-details-menu - float: right - position: absolute - bottom: 6px - right: 15px - - .card-details-title - font-weight: bold - font-size: 1.33em - margin: 3px 0 - padding: 0 - - form.inlined-form - margin-top: 5px - margin-bottom: 10px - - .card-details-list - font-size: 0.85em - margin-bottom: 3px - - a.card-details-list-title - font-weight: bold - - &.is-editable - display: inline-block - background: darken(white, 10%) - border-radius: 3px - padding: 0px 5px - - .card-description textarea - min-height: 100px - - .card-details-items - display: flex - margin: 15px 0 - - .card-details-item - &.card-details-item-labels, - &.card-details-item-members - width: 50% - flex-shrink: 1 - - .card-details-item-title - font-size: 14px - color: darken(white, 45%) - - .card-label - padding-top: 5px - padding-bottom: 5px - - .activities - padding-top: 10px - -input[type="text"].attachment-add-link-input - float: left - margin: 0 0 8px - width: 80% - -input[type="submit"].attachment-add-link-submit - float: left - margin: 0 0 8px 4px - padding: 6px 12px - width: 18% -- cgit v1.2.3-1-g7c22