From 8884d5b7e06b99ce9b88eab3952dbc48d85450b0 Mon Sep 17 00:00:00 2001 From: Martin Filser Date: Sat, 27 Nov 2021 11:55:18 +0100 Subject: [PATCH] Changed delete checklist dialog to a popup - Fixes #4196 - the old "interesting" implementation didn't always show the dialog, especially on long and many checklists + on mobiles too. So changing to a popup should solve all this issues --- client/components/cards/checklists.jade | 19 ++------- client/components/cards/checklists.js | 53 ++++--------------------- client/components/cards/checklists.styl | 35 ---------------- i18n/en.i18n.json | 3 +- 4 files changed, 12 insertions(+), 98 deletions(-) diff --git a/client/components/cards/checklists.jade b/client/components/cards/checklists.jade index 5a6364f07..531ada257 100644 --- a/client/components/cards/checklists.jade +++ b/client/components/cards/checklists.jade @@ -12,11 +12,6 @@ template(name="checklists") input.toggle-switch(type="checkbox" id="toggleHideCheckedItemsButton") label.toggle-label(for="toggleHideCheckedItemsButton") - if toggleDeleteDialog.get - .board-overlay#card-details-overlay - +checklistDeleteDialog(checklist = checklistToDelete) - - .card-checklist-items each checklist in checklists +checklistDetail(checklist = checklist) @@ -50,17 +45,9 @@ template(name="checklistDetail") = checklist.title +checklistItems(checklist = checklist) -template(name="checklistDeleteDialog") - .js-confirm-checklist-delete - p - i(class="fa fa-exclamation-triangle" aria-hidden="true") - p - | {{_ 'confirm-checklist-delete-dialog'}} - span {{checklist.title}} - | ? - .js-checklist-delete-buttons - button.confirm-checklist-delete(type="button") {{_ 'delete'}} - button.toggle-delete-checklist-dialog(type="button") {{_ 'cancel'}} +template(name="checklistDeletePopup") + p {{_ 'confirm-checklist-delete-popup'}} + button.js-confirm.negate.full(type="submit") {{_ 'delete'}} template(name="addChecklistItemForm") a.fa.fa-copy(title="{{_ 'copy-text-to-clipboard'}}") diff --git a/client/components/cards/checklists.js b/client/components/cards/checklists.js index 0d9521635..a1e76cd34 100644 --- a/client/components/cards/checklists.js +++ b/client/components/cards/checklists.js @@ -130,14 +130,6 @@ BlazeComponent.extendComponent({ ); }, - deleteChecklist() { - const checklist = this.currentData().checklist; - if (checklist && checklist._id) { - Checklists.remove(checklist._id); - this.toggleDeleteDialog.set(false); - } - }, - deleteItem() { const checklist = this.currentData().checklist; const item = this.currentData().item; @@ -163,11 +155,6 @@ BlazeComponent.extendComponent({ item.setTitle(title); }, - onCreated() { - this.toggleDeleteDialog = new ReactiveVar(false); - this.checklistToDelete = null; //Store data context to pass to checklistDeleteDialog template - }, - pressKey(event) { //If user press enter key inside a form, submit it //Unless the user is also holding down the 'shift' key @@ -195,12 +182,6 @@ 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()); - }, 'click #toggleHideCheckedItemsButton'() { Meteor.call('toggleHideCheckedItems'); }, @@ -209,13 +190,19 @@ BlazeComponent.extendComponent({ return [ { ...events, + 'click .toggle-delete-checklist-dialog' : Popup.afterConfirm('checklistDelete', function () { + Popup.close(); + const checklist = this.checklist; + if (checklist && checklist._id) { + Checklists.remove(checklist._id); + } + }), '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-convert-checklist-item-to-card': Popup.open('convertChecklistItemToCard'), 'click .js-delete-checklist-item': this.deleteItem, - 'click .confirm-checklist-delete': this.deleteChecklist, 'focus .js-add-checklist-item': this.focusChecklistItem, // add and delete checklist / checklist-item 'click .js-open-inlined-form': this.closeAllInlinedForms, @@ -333,32 +320,6 @@ BlazeComponent.extendComponent({ } }).register('editChecklistItemForm'); -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 }); -}); - Template.checklistItemDetail.helpers({ canModifyCard() { return ( diff --git a/client/components/cards/checklists.styl b/client/components/cards/checklists.styl index 86d999bc0..b78da0600 100644 --- a/client/components/cards/checklists.styl +++ b/client/components/cards/checklists.styl @@ -47,41 +47,6 @@ textarea.js-add-checklist-item, textarea.js-edit-checklist-item padding-top: 3px float: left - -.js-confirm-checklist-delete - background-color: darken(white, 3%) - position: absolute - float: left; - width: 60% - margin-top: 0 - margin-left: 13% - padding-bottom: 2% - padding-left: 3% - padding-right: 3% - 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: 12% - float: left - .toggle-delete-checklist-dialog - margin-right: 12% - float: right - #card-details-overlay top: 0 bottom: -600px diff --git a/i18n/en.i18n.json b/i18n/en.i18n.json index 01aeb8f68..ea57156fa 100644 --- a/i18n/en.i18n.json +++ b/i18n/en.i18n.json @@ -281,7 +281,8 @@ "worker-desc": "Can only move cards, assign itself to card and comment.", "computer": "Computer", "confirm-subtask-delete-dialog": "Are you sure you want to delete subtask?", - "confirm-checklist-delete-dialog": "Are you sure you want to delete checklist?", + "confirm-checklist-delete-popup": "Are you sure you want to delete the checklist?", + "checklistDeletePopup-title": "Checklist delete?", "copy-card-link-to-clipboard": "Copy card link to clipboard", "copy-text-to-clipboard": "Copy text to clipboard", "linkCardPopup-title": "Link Card",