From bbe37cfad83f261e2c24cca3b4f31baa0e818f58 Mon Sep 17 00:00:00 2001 From: amadilsons Date: Wed, 27 Sep 2017 14:29:52 +0200 Subject: [PATCH 1/5] sugested fix for issue #881 --- client/components/cards/checklists.jade | 23 ++++++- client/components/cards/checklists.js | 90 ++++++++++++++++++++----- client/components/cards/checklists.styl | 39 +++++++++++ 3 files changed, 132 insertions(+), 20 deletions(-) diff --git a/client/components/cards/checklists.jade b/client/components/cards/checklists.jade index 7ecc5dd39..74da58639 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 bd9d275a0..257f1ec8a 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 776683496..d3e8c4275 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 From dcd4a2f1e35eccf056b12de05add8d6ec1707887 Mon Sep 17 00:00:00 2001 From: amadilsons Date: Wed, 27 Sep 2017 14:50:00 +0200 Subject: [PATCH 2/5] code clean up --- client/components/cards/checklists.js | 11 ----------- 1 file changed, 11 deletions(-) diff --git a/client/components/cards/checklists.js b/client/components/cards/checklists.js index 0596d7eb3..eccd05510 100644 --- a/client/components/cards/checklists.js +++ b/client/components/cards/checklists.js @@ -203,17 +203,6 @@ Template.checklistDeleteDialog.onDestroyed(() => { $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(); From 9940d635b447d98f60d31181e2fc15610d05b969 Mon Sep 17 00:00:00 2001 From: amadilsons Date: Wed, 27 Sep 2017 15:42:48 +0200 Subject: [PATCH 3/5] removed linting errors --- client/components/cards/checklists.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/components/cards/checklists.js b/client/components/cards/checklists.js index eccd05510..014b72a41 100644 --- a/client/components/cards/checklists.js +++ b/client/components/cards/checklists.js @@ -184,7 +184,7 @@ BlazeComponent.extendComponent({ Template.checklistDeleteDialog.onCreated(() => { const $cardDetails = this.$('.card-details'); this.scrollState = { position: $cardDetails.scrollTop(), //save current scroll position - top: false //required for smooth scroll animation + 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; }); From 4a20208d95134ba26d2e9fdba3d1e7a4329eb451 Mon Sep 17 00:00:00 2001 From: amadilsons Date: Fri, 29 Sep 2017 14:13:36 +0200 Subject: [PATCH 4/5] removed unnecessary deleteDialog helper, delete dialog now uses tap-i18n --- client/components/cards/checklists.jade | 4 ++-- client/components/cards/checklists.js | 6 +----- client/components/cards/checklists.styl | 9 +++++---- i18n/en-GB.i18n.json | 3 ++- i18n/en.i18n.json | 1 + i18n/pt-BR.i18n.json | 3 ++- 6 files changed, 13 insertions(+), 13 deletions(-) diff --git a/client/components/cards/checklists.jade b/client/components/cards/checklists.jade index 559dd83ec..d6e6d7361 100644 --- a/client/components/cards/checklists.jade +++ b/client/components/cards/checklists.jade @@ -1,6 +1,6 @@ template(name="checklists") h2 {{_ 'checklists'}} - if deleteDialog + if toggleDeleteDialog.get .board-overlay#card-details-overlay +checklistDeleteDialog(checklist = checklistToDelete) @@ -38,7 +38,7 @@ template(name="checklistDeleteDialog") p i(class="fa fa-exclamation-triangle" aria-hidden="true") p - | Are you sure you want to delete + | {{_ 'confirm-checklist-delete-dialog'}} span {{checklist.title}} | ? .js-checklist-delete-buttons diff --git a/client/components/cards/checklists.js b/client/components/cards/checklists.js index 014b72a41..030711bc6 100644 --- a/client/components/cards/checklists.js +++ b/client/components/cards/checklists.js @@ -113,11 +113,7 @@ BlazeComponent.extendComponent({ this.toggleDeleteDialog.set(false); } }, - - deleteDialog() { - return this.toggleDeleteDialog.get(); - }, - + deleteItem() { const checklist = this.currentData().checklist; const item = this.currentData().item; diff --git a/client/components/cards/checklists.styl b/client/components/cards/checklists.styl index d3e8c4275..d47763971 100644 --- a/client/components/cards/checklists.styl +++ b/client/components/cards/checklists.styl @@ -45,8 +45,10 @@ textarea.js-add-checklist-item, textarea.js-edit-checklist-item float: left; width: 60% margin-top: 0 - margin-left: 16% + margin-left: 13% padding-bottom: 2% + padding-left: 3% + padding-right: 3% z-index: 17 border-radius: 3px @@ -55,7 +57,6 @@ textarea.js-add-checklist-item, textarea.js-edit-checklist-item margin-top: 3% width: 100% text-align: center - span font-weight: bold @@ -66,10 +67,10 @@ textarea.js-add-checklist-item, textarea.js-edit-checklist-item position: relative padding: left 2% right 2% .confirm-checklist-delete - margin-left: 16% + margin-left: 12% float: left .toggle-delete-checklist-dialog - margin-right: 16% + margin-right: 12% float: right #card-details-overlay diff --git a/i18n/en-GB.i18n.json b/i18n/en-GB.i18n.json index 8db041a5a..e9f679330 100644 --- a/i18n/en-GB.i18n.json +++ b/i18n/en-GB.i18n.json @@ -146,6 +146,7 @@ "comment-only": "Comment only", "comment-only-desc": "Can comment on cards only.", "computer": "Computer", + "confirm-checklist-delete-dialog": "Are you sure you want to delete", "copy-card-link-to-clipboard": "Copy card link to clipboard", "copyCardPopup-title": "Copy Card", "create": "Create", @@ -391,4 +392,4 @@ "no": "No", "accounts": "Accounts", "accounts-allowEmailChange": "Allow Email Change" -} \ No newline at end of file +} diff --git a/i18n/en.i18n.json b/i18n/en.i18n.json index 64a720db0..7c94e9fb0 100644 --- a/i18n/en.i18n.json +++ b/i18n/en.i18n.json @@ -146,6 +146,7 @@ "comment-only": "Comment only", "comment-only-desc": "Can comment on cards only.", "computer": "Computer", + "confirm-checklist-delete-dialog": "Are you sure you want to delete", "copy-card-link-to-clipboard": "Copy card link to clipboard", "copyCardPopup-title": "Copy Card", "create": "Create", diff --git a/i18n/pt-BR.i18n.json b/i18n/pt-BR.i18n.json index 1ea99b76c..981e272da 100644 --- a/i18n/pt-BR.i18n.json +++ b/i18n/pt-BR.i18n.json @@ -146,6 +146,7 @@ "comment-only": "Somente comentários", "comment-only-desc": "Pode comentar apenas em cartões.", "computer": "Computador", + "confirm-checklist-delete-dialog": "Tem a certeza de que pretende eliminar", "copy-card-link-to-clipboard": "Copiar link do cartão para a área de transferência", "copyCardPopup-title": "Copy Card", "create": "Criar", @@ -391,4 +392,4 @@ "no": "Não", "accounts": "Contas", "accounts-allowEmailChange": "Permitir Mudança de Email" -} \ No newline at end of file +} From e03f2102de5d5e47c997058d4f2c86c3ff2a1373 Mon Sep 17 00:00:00 2001 From: amadilsons Date: Fri, 29 Sep 2017 14:23:54 +0200 Subject: [PATCH 5/5] fixed linting error --- client/components/cards/checklists.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/components/cards/checklists.js b/client/components/cards/checklists.js index 030711bc6..1cd77c9ff 100644 --- a/client/components/cards/checklists.js +++ b/client/components/cards/checklists.js @@ -113,7 +113,7 @@ BlazeComponent.extendComponent({ this.toggleDeleteDialog.set(false); } }, - + deleteItem() { const checklist = this.currentData().checklist; const item = this.currentData().item;