summaryrefslogtreecommitdiffstats
path: root/client/components/cards
diff options
context:
space:
mode:
Diffstat (limited to 'client/components/cards')
-rw-r--r--client/components/cards/checklists.jade23
-rw-r--r--client/components/cards/checklists.js90
-rw-r--r--client/components/cards/checklists.styl39
3 files changed, 132 insertions, 20 deletions
diff --git a/client/components/cards/checklists.jade b/client/components/cards/checklists.jade
index 7ecc5dd3..74da5863 100644
--- a/client/components/cards/checklists.jade
+++ b/client/components/cards/checklists.jade
@@ -1,8 +1,14 @@
template(name="checklists")
h2 {{_ 'checklists'}}
+ if deleteDialog
+ .board-overlay#card-details-overlay
+ +checklistDeleteDialog(checklist = checklistToDelete)
+
+
.card-checklist-items
each checklist in currentCard.checklists
- +checklistDetail(checklist = checklist)
+ +checklistDetail(checklist=checklist)
+
if canModifyCard
+inlinedForm(autoclose=false classNames="js-add-checklist" cardId = cardId)
+addChecklistItemForm
@@ -18,7 +24,8 @@ template(name="checklistDetail")
.checklist-title
.checkbox.fa.fa-check-square-o
if canModifyCard
- a.js-delete-checklist {{_ "delete"}}...
+ a.js-delete-checklist.toggle-delete-checklist-dialog {{_ "delete"}}...
+
span.checklist-stat(class="{{#if checklist.isFinished}}is-finished{{/if}}") {{checklist.finishedCount}}/{{checklist.itemCount}}
if canModifyCard
h2.title.js-open-inlined-form.is-editable {{checklist.title}}
@@ -26,6 +33,18 @@ template(name="checklistDetail")
h2.title {{checklist.title}}
+checklistItems(checklist = checklist)
+template(name="checklistDeleteDialog")
+ .js-confirm-checklist-delete
+ p
+ i(class="fa fa-exclamation-triangle" aria-hidden="true")
+ p
+ | Are you sure you want to delete
+ span {{checklist.title}}
+ | ?
+ .js-checklist-delete-buttons
+ button.confirm-checklist-delete(type="button") {{_ 'delete'}}
+ button.toggle-delete-checklist-dialog(type="button") {{_ 'cancel'}}
+
template(name="addChecklistItemForm")
textarea.js-add-checklist-item(rows='1' autofocus)
.edit-controls.clearfix
diff --git a/client/components/cards/checklists.js b/client/components/cards/checklists.js
index bd9d275a..257f1ec8 100644
--- a/client/components/cards/checklists.js
+++ b/client/components/cards/checklists.js
@@ -64,6 +64,7 @@ Template.checklists.onRendered(function () {
});
BlazeComponent.extendComponent({
+
addChecklist(event) {
event.preventDefault();
const textarea = this.find('textarea.js-add-checklist-item');
@@ -99,6 +100,30 @@ BlazeComponent.extendComponent({
textarea.focus();
},
+ canModifyCard() {
+ return Meteor.user() && Meteor.user().isBoardMember() && !Meteor.user().isCommentOnly();
+ },
+
+ deleteChecklist() {
+ const checklist = this.currentData().checklist;
+ if (checklist && checklist._id) {
+ Checklists.remove(checklist._id);
+ this.toggleDeleteDialog.set(false);
+ }
+ },
+
+ deleteDialog() {
+ return this.toggleDeleteDialog.get();
+ },
+
+ deleteItem() {
+ const checklist = this.currentData().checklist;
+ const item = this.currentData().item;
+ if (checklist && item && item._id) {
+ checklist.removeItem(item._id);
+ }
+ },
+
editChecklist(event) {
event.preventDefault();
const textarea = this.find('textarea.js-edit-checklist-item');
@@ -107,10 +132,6 @@ BlazeComponent.extendComponent({
checklist.setTitle(title);
},
- canModifyCard() {
- return Meteor.user() && Meteor.user().isBoardMember() && !Meteor.user().isCommentOnly();
- },
-
editChecklistItem(event) {
event.preventDefault();
@@ -121,19 +142,9 @@ BlazeComponent.extendComponent({
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);
- }
+ onCreated() {
+ this.toggleDeleteDialog = new ReactiveVar(false);
+ this.checklistToDelete = null; //Store data context to pass to checklistDeleteDialog template
},
pressKey(event) {
@@ -146,18 +157,61 @@ BlazeComponent.extendComponent({
},
events() {
+ const events = {
+ 'click .toggle-delete-checklist-dialog'(event) {
+ if($(event.target).hasClass('js-delete-checklist')){
+ this.checklistToDelete = this.currentData().checklist; //Store data context
+ }
+ this.toggleDeleteDialog.set(!this.toggleDeleteDialog.get());
+ },
+ };
+
return [{
+ ...events,
'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,
+ 'click .confirm-checklist-delete': this.deleteChecklist,
keydown: this.pressKey,
}];
},
}).register('checklists');
+Template.checklistDeleteDialog.onCreated(() => {
+ const $cardDetails = this.$('.card-details');
+ this.scrollState = { position: $cardDetails.scrollTop(), //save current scroll position
+ top: false //required for smooth scroll animation
+ };
+ //Callback's purpose is to only prevent scrolling after animation is complete
+ $cardDetails.animate({ scrollTop: 0 }, 500, () => { this.scrollState.top = true; });
+
+ //Prevent scrolling while dialog is open
+ $cardDetails.on('scroll', () => {
+ if(this.scrollState.top) { //If it's already in position, keep it there. Otherwise let animation scroll
+ $cardDetails.scrollTop(0);
+ }
+ });
+});
+
+Template.checklistDeleteDialog.onDestroyed(() => {
+ const $cardDetails = this.$('.card-details');
+ $cardDetails.off('scroll'); //Reactivate scrolling
+ $cardDetails.animate( { scrollTop: this.scrollState.position });
+});
+
+BlazeComponent.extendComponent({
+ events() {
+ const handlers = {
+ 'click .confirm-checklist-delete'() {
+ console.log(this.scrollState)
+ },
+ }
+
+ return [ handlers ];
+ }
+}).register('checklistDeleteDialog');
Template.itemDetail.helpers({
canModifyCard() {
return Meteor.user() && Meteor.user().isBoardMember() && !Meteor.user().isCommentOnly();
diff --git a/client/components/cards/checklists.styl b/client/components/cards/checklists.styl
index 77668349..d3e8c427 100644
--- a/client/components/cards/checklists.styl
+++ b/client/components/cards/checklists.styl
@@ -38,6 +38,45 @@ textarea.js-add-checklist-item, textarea.js-edit-checklist-item
.js-delete-checklist
@extends .delete-text
+
+.js-confirm-checklist-delete
+ background-color: darken(white, 3%)
+ position: absolute
+ float: left;
+ width: 60%
+ margin-top: 0
+ margin-left: 16%
+ padding-bottom: 2%
+ z-index: 17
+ border-radius: 3px
+
+ p
+ position: relative
+ margin-top: 3%
+ width: 100%
+ text-align: center
+
+ span
+ font-weight: bold
+
+ i
+ font-size: 2em
+
+ .js-checklist-delete-buttons
+ position: relative
+ padding: left 2% right 2%
+ .confirm-checklist-delete
+ margin-left: 16%
+ float: left
+ .toggle-delete-checklist-dialog
+ margin-right: 16%
+ float: right
+
+#card-details-overlay
+ top: 0
+ bottom: -600px
+ right: 0
+
.checklist-items
margin: 0 0 0.5em 1.33em