Andreas/wekan
1
0
Fork 0
mirror of https://github.com/wekan/wekan.git synced 2025-12-24 03:10:12 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

Changed delete checklist dialog to a popup

Browse source 
- 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
This commit is contained in:
Martin Filser 2021-11-27 11:55:18 +01:00
parent a3b99dd02d
commit 8884d5b7e0
4 changed files with 12 additions and 98 deletions
Download patch file Download diff file Expand all files Collapse all files

53
client/components/cards/checklists.js
View file

@ -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 (