summaryrefslogtreecommitdiffstats
path: root/client/components/cards
diff options
context:
space:
mode:
authorLauri Ojansivu <x@xet7.org>2017-02-03 01:39:31 +0200
committerLauri Ojansivu <x@xet7.org>2017-02-03 01:39:31 +0200
commit1cf9b1be4e11e276e344088a63e5e0986da70250 (patch)
tree58bed7ea87109a9a733e09813bc81d4f5ad96989 /client/components/cards
parent70f92c6e0e3e15444cdb20987ce0544ec691d606 (diff)
parent59731af139b73f4b9cd8bd0bd0602ac272538b4f (diff)
downloadwekan-1cf9b1be4e11e276e344088a63e5e0986da70250.tar.gz
wekan-1cf9b1be4e11e276e344088a63e5e0986da70250.tar.bz2
wekan-1cf9b1be4e11e276e344088a63e5e0986da70250.zip
Merge branch 'ckls' of https://github.com/lkisme/wekan into lkisme-ckls
Diffstat (limited to 'client/components/cards')
-rw-r--r--client/components/cards/cardDetails.jade4
-rw-r--r--client/components/cards/checklists.jade61
-rw-r--r--client/components/cards/checklists.js74
-rw-r--r--client/components/cards/checklists.styl68
-rw-r--r--client/components/cards/minicard.jade7
-rw-r--r--client/components/cards/minicard.styl16
6 files changed, 229 insertions, 1 deletions
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