diff --git a/client/components/cards/subtasks.jade b/client/components/cards/subtasks.jade index 8a0ef0b32..93e26e90e 100644 --- a/client/components/cards/subtasks.jade +++ b/client/components/cards/subtasks.jade @@ -25,10 +25,26 @@ template(name="subtaskDetail") else .subtask-title span - a.js-view-subtask(title="{{ subtask.title }}") {{_ "view-it"}} + //- a.js-view-subtask(title="{{ subtask.title }}") {{_ "view-it"}} if canModifyCard if currentUser.isBoardAdmin - a.js-delete-subtask.toggle-delete-subtask-dialog {{_ "delete"}}... + //- Formato atual com Janela Modal + //- a.js-delete-subtask.toggle-delete-subtask-dialog {{_ "delete"}}... + + //- FUNFOU + a.fa.fa-navicon.subtask-details-menu.js-open-subtask-details-menu(title="{{_ 'subtaskActionsPopup-title'}}") + + + //- TESTE + //- a.js-delete-subtask2 + //- i.fa.fa-close + //- | {{_ 'delete'}} + + + //- Formato ideal + //- a.js-delete-subtask.delete-subtask + //- i.fa.fa-trash + //- | {{_ "delete"}} ... if canModifyCard h2.title.js-open-inlined-form.is-editable @@ -39,17 +55,17 @@ template(name="subtaskDetail") +viewer = subtask.title -template(name="subtaskDeleteDialog") - .js-confirm-subtask-delete - p - i(class="fa fa-exclamation-triangle" aria-hidden="true") - p - | {{_ 'confirm-subtask-delete-dialog'}} - span {{subtask.title}} - | ? - .js-subtask-delete-buttons - button.confirm-subtask-delete(type="button") {{_ 'delete'}} - button.toggle-delete-subtask-dialog(type="button") {{_ 'cancel'}} +//- template(name="subtaskDeleteDialog") +//- .js-confirm-subtask-delete +//- p +//- i(class="fa fa-exclamation-triangle" aria-hidden="true") +//- p +//- | {{_ 'confirm-subtask-delete-dialog'}} +//- span {{subtask.title}} +//- | ? +//- .js-subtask-delete-buttons +//- button.confirm-subtask-delete(type="button") {{_ 'delete'}} +//- button.toggle-delete-subtask-dialog(type="button") {{_ 'cancel'}} template(name="addSubtaskItemForm") textarea.js-add-subtask-item(rows='1' autofocus dir="auto") @@ -98,3 +114,27 @@ template(name='subtaskItemDetail') .item-title(class="{{#if item.isFinished }}is-checked{{/if}}") +viewer = item.title + + +//- POPUP de confirmacao +template(name="subtaskDeletePopup") + p {{_ 'confirm-subtask-delete-popup'}} + button.js-confirm.negate.full(type="submit") {{_ 'delete'}} + + +template(name="subtaskActionsPopup") + ul.pop-over-list + li + a.js-view-subtask(title="{{ subtask.title }}") + i.fa.fa-eye + {{_ "view-it"}} + a.js-delete-subtask.delete-subtask + i.fa.fa-trash + | {{_ "delete"}} ... + //- a.js-move-subtask.move-subtask + //- i.fa.fa-arrow-right + //- | {{_ "movesubtask"}} ... + //- a.js-copy-subtask.copy-subtask + //- i.fa.fa-copy + //- | {{_ "copysubtask"}} ... + diff --git a/client/components/cards/subtasks.js b/client/components/cards/subtasks.js index 79bc210fc..7ee398d6d 100644 --- a/client/components/cards/subtasks.js +++ b/client/components/cards/subtasks.js @@ -83,7 +83,6 @@ BlazeComponent.extendComponent({ const subtask = this.currentData().subtask; if (subtask && subtask._id) { subtask.archive(); - this.toggleDeleteDialog.set(false); } }, @@ -95,11 +94,6 @@ BlazeComponent.extendComponent({ subtask.setTitle(title); }, - onCreated() { - this.toggleDeleteDialog = new ReactiveVar(false); - this.subtaskToDelete = null; //Store data context to pass to subtaskDeleteDialog template - }, - pressKey(event) { //If user press enter key inside a form, submit it //Unless the user is also holding down the 'shift' key @@ -111,64 +105,18 @@ BlazeComponent.extendComponent({ }, events() { - const events = { - 'click .toggle-delete-subtask-dialog'(event) { - if ($(event.target).hasClass('js-delete-subtask')) { - this.subtaskToDelete = this.currentData().subtask; //Store data context - } - this.toggleDeleteDialog.set(!this.toggleDeleteDialog.get()); - }, - 'click .js-view-subtask'(event) { - if ($(event.target).hasClass('js-view-subtask')) { - const subtask = this.currentData().subtask; - const board = subtask.board(); - FlowRouter.go('card', { - boardId: board._id, - slug: board.slug, - cardId: subtask._id, - }); - } - }, - }; - return [ { - ...events, + 'click .js-open-subtask-details-menu': Popup.open('subtaskActions'), 'submit .js-add-subtask': this.addSubtask, 'submit .js-edit-subtask-title': this.editSubtask, - 'click .confirm-subtask-delete': this.deleteSubtask, + 'click .js-delete-subtask-item': this.deleteSubtask, keydown: this.pressKey, }, ]; }, }).register('subtasks'); -Template.subtaskDeleteDialog.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.subtaskDeleteDialog.onDestroyed(() => { - const $cardDetails = this.$('.card-details'); - $cardDetails.off('scroll'); //Reactivate scrolling - $cardDetails.animate({ scrollTop: this.scrollState.position }); -}); - Template.subtaskItemDetail.helpers({ canModifyCard() { return ( @@ -183,3 +131,30 @@ Template.subtaskItemDetail.helpers({ BlazeComponent.extendComponent({ // ... }).register('subtaskItemDetail'); + +BlazeComponent.extendComponent({ + events() { + return [ + { + 'click .js-view-subtask'(event) { + if ($(event.target).hasClass('js-view-subtask')) { + const subtask = this.currentData().subtask; + const board = subtask.board(); + FlowRouter.go('card', { + boardId: board._id, + slug: board.slug, + cardId: subtask._id, + }); + } + }, + 'click .js-delete-subtask' : Popup.afterConfirm('subtaskDelete', function () { + Popup.back(2); + const subtask = this.subtask; + if (subtask && subtask._id) { + subtask.archive(); + } + }), + } + ] + } +}).register('subtaskActionsPopup'); diff --git a/client/components/cards/subtasks.styl b/client/components/cards/subtasks.styl index c2f09aa13..357f8973a 100644 --- a/client/components/cards/subtasks.styl +++ b/client/components/cards/subtasks.styl @@ -140,3 +140,7 @@ textarea.js-add-subtask-item, textarea.js-edit-subtask-item .add-subtask-item margin: 0.2em 0 0.5em 1.33em display: inline-block + +.subtask-details-menu + float: right + padding: 6px 10px 6px 10px diff --git a/i18n/en.i18n.json b/i18n/en.i18n.json index 966243566..abcac3e31 100644 --- a/i18n/en.i18n.json +++ b/i18n/en.i18n.json @@ -280,8 +280,9 @@ "worker": "Worker", "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-subtask-delete-popup": "Are you sure you want to delete subtask?", "confirm-checklist-delete-popup": "Are you sure you want to delete the checklist?", + "subtaskDeletePopup-title": "Delete Subtask?", "checklistDeletePopup-title": "Delete Checklist?", "copy-card-link-to-clipboard": "Copy card link to clipboard", "copy-text-to-clipboard": "Copy text to clipboard", @@ -1148,5 +1149,6 @@ "newlineBecomesNewChecklistItem": "Newline becomes new checklist item", "copyChecklist": "Copy Checklist", "copyChecklistPopup-title": "Copy Checklist", - "card-show-lists": "Card Show Lists" + "card-show-lists": "Card Show Lists", + "subtaskActionsPopup-title": "Subtask Actions" }