Merge pull request #4446 from helioguardabaxo/master

UI improvements on maximized card header

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

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

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"}} ...
+

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');

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

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"
 }