diff --git a/client/components/cards/cardDetails.jade b/client/components/cards/cardDetails.jade index 5be3de8fd..2628ed7cf 100644 --- a/client/components/cards/cardDetails.jade +++ b/client/components/cards/cardDetails.jade @@ -554,11 +554,11 @@ template(name="cardDetails") | {{_ 'attachments'}} .card-checklist-attachmentGalery.card-attachmentGalery +attachmentsGalery + hr .card-details-right unless currentUser.isNoComments - hr .activity-title h3.card-details-item-title i.fa.fa-history diff --git a/client/components/cards/cardDetails.styl b/client/components/cards/cardDetails.styl index adc9f5d96..acbee01b0 100644 --- a/client/components/cards/cardDetails.styl +++ b/client/components/cards/cardDetails.styl @@ -275,15 +275,17 @@ avatar-radius = 50% top: 60px left: 20px width: 47% + border-right: solid 2px #dbdbdb + padding-right: 10px .card-details-right position: absolute float: right - top: 20px left: 50% + margin: 15px 0 .card-details-header - width: 47% + width: 100% input[type="text"].attachment-add-link-input float: left diff --git a/client/components/cards/subtasks.jade b/client/components/cards/subtasks.jade index 8a0ef0b32..ad92fda5f 100644 --- a/client/components/cards/subtasks.jade +++ b/client/components/cards/subtasks.jade @@ -25,11 +25,9 @@ template(name="subtaskDetail") else .subtask-title span - a.js-view-subtask(title="{{ subtask.title }}") {{_ "view-it"}} if canModifyCard if currentUser.isBoardAdmin - a.js-delete-subtask.toggle-delete-subtask-dialog {{_ "delete"}}... - + a.fa.fa-navicon.subtask-details-menu.js-open-subtask-details-menu(title="{{_ 'subtaskActionsPopup-title'}}") if canModifyCard h2.title.js-open-inlined-form.is-editable +viewer @@ -39,18 +37,6 @@ 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="addSubtaskItemForm") textarea.js-add-subtask-item(rows='1' autofocus dir="auto") .edit-controls.clearfix @@ -98,3 +84,18 @@ template(name='subtaskItemDetail') .item-title(class="{{#if item.isFinished }}is-checked{{/if}}") +viewer = item.title + +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"}} ... + 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" }