From 59731af139b73f4b9cd8bd0bd0602ac272538b4f Mon Sep 17 00:00:00 2001 From: lksime Date: Fri, 20 Jan 2017 21:05:48 +0800 Subject: Add checklist feature --- client/components/activities/activities.jade | 11 +++++ client/components/activities/activities.styl | 8 +++ client/components/cards/cardDetails.jade | 4 ++ client/components/cards/checklists.jade | 61 +++++++++++++++++++++++ client/components/cards/checklists.js | 74 ++++++++++++++++++++++++++++ client/components/cards/checklists.styl | 68 +++++++++++++++++++++++++ client/components/cards/minicard.jade | 7 ++- client/components/cards/minicard.styl | 16 ++++++ 8 files changed, 248 insertions(+), 1 deletion(-) create mode 100644 client/components/cards/checklists.jade create mode 100644 client/components/cards/checklists.js create mode 100644 client/components/cards/checklists.styl (limited to 'client') diff --git a/client/components/activities/activities.jade b/client/components/activities/activities.jade index 9ff73864..9bbcd055 100644 --- a/client/components/activities/activities.jade +++ b/client/components/activities/activities.jade @@ -26,6 +26,12 @@ template(name="boardActivities") +viewer = comment.text + if($eq activityType 'addChecklist') + | {{{_ 'activity-checklist-added' cardLink}}}. + .activity-checklist(href="{{ card.absoluteUrl }}") + +viewer + = checklist.title + if($eq activityType 'archivedCard') | {{{_ 'activity-archived' cardLink}}}. @@ -103,6 +109,11 @@ template(name="cardActivities") | {{{_ 'activity-attached' attachmentLink cardLabel}}}. if attachment.isImage img.attachment-image-preview(src=attachment.url) + if($eq activityType 'addChecklist') + | {{{_ 'activity-checklist-added' cardLabel}}}. + .activity-checklist + +viewer + = checklist.title if($eq activityType 'addComment') +inlinedForm(classNames='js-edit-comment') diff --git a/client/components/activities/activities.styl b/client/components/activities/activities.styl index 1f0494c7..2285fc0a 100644 --- a/client/components/activities/activities.styl +++ b/client/components/activities/activities.styl @@ -26,6 +26,14 @@ margin-top: 5px padding: 5px + .activity-checklist + display: block + border-radius: 3px + background: white + text-decoration: none + box-shadow: 0 1px 2px rgba(0,0,0,.2) + margin-top: 5px + padding: 5px .activity-meta font-size: 0.8em color: darken(white, 40%) diff --git a/client/components/cards/cardDetails.jade b/client/components/cards/cardDetails.jade index f4212d83..cf113951 100644 --- a/client/components/cards/cardDetails.jade +++ b/client/components/cards/cardDetails.jade @@ -72,6 +72,10 @@ template(name="cardDetails") h3.card-details-item-title {{_ 'description'}} +viewer = description + + hr + +checklists(cardId = _id) + if attachments.count hr h2 diff --git a/client/components/cards/checklists.jade b/client/components/cards/checklists.jade new file mode 100644 index 00000000..396cb107 --- /dev/null +++ b/client/components/cards/checklists.jade @@ -0,0 +1,61 @@ +template(name="checklists") + h2 {{_ 'checklists'}} + .card-checklist-items + each checklist in currentCard.checklists + +checklistDetail(checklist = checklist) + +inlinedForm(classNames="js-add-checklist" cardId = cardId) + +addChecklistItemForm + else + a.js-open-inlined-form + i.fa.fa-plus + | {{_ 'add-checklist'}}... + +template(name="checklistDetail") + +inlinedForm(classNames="js-edit-checklist-title") + +editChecklistItemForm(checklist = checklist) + else + .checklist-title + .checkbox.fa.fa-check-square-o + a.js-delete-checklist {{_ "delete"}}... + span.checklist-stat(class="{{#if checklist.isFinished}}is-finished{{/if}}") {{checklist.finishedCount}}/{{checklist.itemCount}} + h2.title.js-open-inlined-form.is-editable {{checklist.title}} + +checklistItems(checklist = checklist) + +template(name="addChecklistItemForm") + textarea.js-add-checklist-item(rows='1' autofocus) + .edit-controls.clearfix + button.primary.confirm.js-submit-add-checklist-item-form(type="submit") {{_ 'save'}} + a.fa.fa-times-thin.js-close-inlined-form + +template(name="editChecklistItemForm") + textarea.js-edit-checklist-item(rows='1' autofocus) + if $eq type 'item' + = item.title + else + = checklist.title + .edit-controls.clearfix + button.primary.confirm.js-submit-edit-checklist-item-form(type="submit") {{_ 'save'}} + a.fa.fa-times-thin.js-close-inlined-form + span(title=createdAt) {{ moment createdAt }} + if currentUser.isBoardMember + a.js-delete-checklist-item {{_ "delete"}}... + +template(name="checklistItems") + .checklist-items + each item in checklist.items + +inlinedForm(classNames="js-edit-checklist-item") + +editChecklistItemForm(type = 'item' item = item checklist = checklist) + else + +itemDetail(item = item checklist = checklist) + if currentUser.isBoardMember + +inlinedForm(classNames="js-add-checklist-item" checklist = checklist) + +addChecklistItemForm + else + a.add-checklist-item.js-open-inlined-form + i.fa.fa-plus + | {{_ 'add-checklist-item'}}... + +template(name='itemDetail') + .item + .check-box.materialCheckBox(class="{{#if item.isFinished }}is-checked{{/if}}") + .item-title.js-open-inlined-form.is-editable(class="{{#if item.isFinished }}is-checked{{/if}}") {{item.title}} diff --git a/client/components/cards/checklists.js b/client/components/cards/checklists.js new file mode 100644 index 00000000..b8113a54 --- /dev/null +++ b/client/components/cards/checklists.js @@ -0,0 +1,74 @@ +BlazeComponent.extendComponent({ + addChecklist(event) { + event.preventDefault(); + const textarea = this.find('textarea.js-add-checklist-item'); + const title = textarea.value.trim(); + const cardId = this.currentData().cardId; + Checklists.insert({ + cardId, + title, + }); + }, + + addChecklistItem(event) { + event.preventDefault(); + const textarea = this.find('textarea.js-add-checklist-item'); + const title = textarea.value.trim(); + const checklist = this.currentData().checklist; + checklist.addItem(title); + }, + + editChecklist(event) { + event.preventDefault(); + const textarea = this.find('textarea.js-edit-checklist-item'); + const title = textarea.value.trim(); + const checklist = this.currentData().checklist; + checklist.setTitle(title); + }, + + editChecklistItem(event) { + event.preventDefault(); + + const textarea = this.find('textarea.js-edit-checklist-item'); + const title = textarea.value.trim(); + const itemId = this.currentData().item._id; + const checklist = this.currentData().checklist; + checklist.editItem(itemId, title); + }, + + deleteItem() { + const checklist = this.currentData().checklist; + const item = this.currentData().item; + if (checklist && item && item._id) { + checklist.removeItem(item._id); + } + }, + + deleteChecklist() { + const checklist = this.currentData().checklist; + if (checklist && checklist._id) { + Checklists.remove(checklist._id); + } + }, + + pressKey(event) { + //If user press enter key inside a form, submit it, so user doesn't have to leave keyboard to submit a form. + if (event.keyCode === 13) { + event.preventDefault(); + const $form = $(event.currentTarget).closest('form'); + $form.find('button[type=submit]').click(); + } + }, + + events() { + return [{ + 'submit .js-add-checklist': this.addChecklist, + 'submit .js-edit-checklist-title': this.editChecklist, + 'submit .js-add-checklist-item': this.addChecklistItem, + 'submit .js-edit-checklist-item': this.editChecklistItem, + 'click .js-delete-checklist-item': this.deleteItem, + 'click .js-delete-checklist': this.deleteChecklist, + keydown: this.pressKey, + }]; + }, +}).register('checklists'); diff --git a/client/components/cards/checklists.styl b/client/components/cards/checklists.styl new file mode 100644 index 00000000..885d7528 --- /dev/null +++ b/client/components/cards/checklists.styl @@ -0,0 +1,68 @@ +.js-add-checklist + color: #8c8c8c + +textarea.js-add-checklist-item, textarea.js-edit-checklist-item + overflow: hidden + word-wrap: break-word + resize: none + height: 34px + +.delete-text + color: #8c8c8c + text-decoration: underline + word-wrap: break-word + float: right + padding-top: 6px + &:hover + color: inherit + +.checklist-title + .checkbox + float: left + width: 30px + height 30px + font-size: 18px + line-height: 30px + + .title + font-size: 18px + line-height: 30px + + .checklist-stat + margin: 0 0.5em + float: right + padding-top: 6px + &.is-finished + color: #3cb500 + + .js-delete-checklist + @extends .delete-text + +.checklist-items + margin: 0 0 0.5em 1.33em + + .item + line-height: 25px + font-size: 1.1em + margin-top: 3px + display: flex + + .check-box + margin-top: 5px + &.is-checked + border-bottom: 2px solid #3cb500 + border-right: 2px solid #3cb500 + + .item-title + padding-left: 10px; + &.is-checked + color: #8c8c8c + font-style: italic + + .js-delete-checklist-item + @extends .delete-text + padding: 12px 0 0 0 + + .add-checklist-item + padding-top: 0.5em + display: inline-block diff --git a/client/components/cards/minicard.jade b/client/components/cards/minicard.jade index edc7d2d3..8b46ee74 100644 --- a/client/components/cards/minicard.jade +++ b/client/components/cards/minicard.jade @@ -14,7 +14,7 @@ template(name="minicard") .badges if comments.count .badge(title="{{_ 'card-comments-title' comments.count }}") - span.badge-icon.fa.fa-comment-o + span.badge-icon.fa.fa-comment-o.badge-comment span.badge-text= comments.count if description .badge.badge-state-image-only(title=description) @@ -29,3 +29,8 @@ template(name="minicard") if dueAt .badge +minicardDueDate + if checklists.count + .badge(class="{{#if checklistFinished}}is-finished{{/if}}") + span.badge-icon.fa.fa-check-square-o + span.badge-text.check-list-text {{checklistFinishedCount}}/{{checklistItemCount}} + diff --git a/client/components/cards/minicard.styl b/client/components/cards/minicard.styl index a61f6067..12a89785 100644 --- a/client/components/cards/minicard.styl +++ b/client/components/cards/minicard.styl @@ -99,10 +99,26 @@ .badge-text vertical-align: middle + &.is-finished + background: #3cb500 + padding: 0px 3px + border-radius: 3px + color: white + + .badge-icon, + .badge-text + vertical-align: middle//didn't figure why use top, it'd be easier to fill bg if it's middle. This was introduced in commit "91cfcf7b12b5e7c137c2e765b2c378dde6b82966" & "* Improve the design of the minicards badges" was mentioned. + &.badge-comment + margin-bottom: 0.1rem + .badge-text font-size: 0.9em padding-left: 2px line-height: 14px + .check-list-text + padding-left: 0px + line-height: 12px + .minicard-members float: right -- cgit v1.2.3-1-g7c22 From 335b91f0a48c2c64a96a74e8a2b9866bf590714a Mon Sep 17 00:00:00 2001 From: Lauri Ojansivu Date: Fri, 3 Feb 2017 01:49:58 +0200 Subject: Add remaining of checklist feature code --- client/components/cards/checklists.jade | 4 ++-- client/components/cards/checklists.js | 15 +++++++++++++++ 2 files changed, 17 insertions(+), 2 deletions(-) (limited to 'client') diff --git a/client/components/cards/checklists.jade b/client/components/cards/checklists.jade index 396cb107..987e6cd9 100644 --- a/client/components/cards/checklists.jade +++ b/client/components/cards/checklists.jade @@ -11,7 +11,7 @@ template(name="checklists") | {{_ 'add-checklist'}}... template(name="checklistDetail") - +inlinedForm(classNames="js-edit-checklist-title") + +inlinedForm(classNames="js-edit-checklist-title" checklist = checklist) +editChecklistItemForm(checklist = checklist) else .checklist-title @@ -43,7 +43,7 @@ template(name="editChecklistItemForm") template(name="checklistItems") .checklist-items each item in checklist.items - +inlinedForm(classNames="js-edit-checklist-item") + +inlinedForm(classNames="js-edit-checklist-item" item = item checklist = checklist) +editChecklistItemForm(type = 'item' item = item checklist = checklist) else +itemDetail(item = item checklist = checklist) diff --git a/client/components/cards/checklists.js b/client/components/cards/checklists.js index b8113a54..5dac7bd3 100644 --- a/client/components/cards/checklists.js +++ b/client/components/cards/checklists.js @@ -72,3 +72,18 @@ BlazeComponent.extendComponent({ }]; }, }).register('checklists'); + +BlazeComponent.extendComponent({ + toggleItem() { + const checklist = this.currentData().checklist; + const item = this.currentData().item; + if (checklist && item && item._id) { + checklist.toggleItem(item._id); + } + }, + events() { + return [{ + 'click .item .check-box': this.toggleItem, + }]; + }, +}).register('itemDetail'); -- cgit v1.2.3-1-g7c22