Create Attachment Popup Menu

client/components/cards/attachments.jade

@@ -49,17 +49,7 @@ template(name="attachmentsGalery")
             if currentUser.isBoardMember
               unless currentUser.isCommentOnly
                 unless currentUser.isWorker
-                  if isImage
-                    a(class="{{#if $eq ../coverId _id}}js-remove-cover{{else}}js-add-cover{{/if}}")
-                      i.fa.fa-thumb-tack
-                      if($eq ../coverId _id)
-                        | {{_ 'remove-cover'}}
-                      else
-                        | {{_ 'add-cover'}}
-                  if currentUser.isBoardAdmin
-                    a.js-confirm-delete
-                      i.fa.fa-close
-                      | {{_ 'delete'}}
+                  a.fa.fa-navicon.attachment-details-menu.js-open-attachment-menu(title="{{_ 'attachmentActionsPopup-title'}}")
 
     if currentUser.isBoardMember
       unless currentUser.isCommentOnly
@@ -67,3 +57,18 @@ template(name="attachmentsGalery")
           //li.attachment-item.add-attachment
           a.js-add-attachment(title="{{_ 'add-attachment' }}")
             i.fa.fa-plus
+
+template(name="attachmentActionsPopup")
+  ul.pop-over-list
+    li
+      if isImage
+        a(class="{{#if isCover}}js-remove-cover{{else}}js-add-cover{{/if}}")
+          i.fa.fa-thumb-tack
+          if isCover
+            | {{_ 'remove-cover'}}
+          else
+            | {{_ 'add-cover'}}
+      if currentUser.isBoardAdmin
+        a.js-confirm-delete
+          i.fa.fa-close
+          | {{_ 'delete'}}

client/components/cards/attachments.js

@@ -1,23 +1,11 @@
 Template.attachmentsGalery.events({
   'click .js-add-attachment': Popup.open('cardAttachments'),
-  'click .js-confirm-delete': Popup.afterConfirm(
-    'attachmentDelete',
-    function() {
-      Attachments.remove(this._id);
-      Popup.back();
-    },
-  ),
   // If we let this event bubble, FlowRouter will handle it and empty the page
   // content, see #101.
   'click .js-download'(event) {
     event.stopPropagation();
   },
-  'click .js-add-cover'() {
-    Cards.findOne(this.meta.cardId).setCover(this._id);
-  },
-  'click .js-remove-cover'() {
-    Cards.findOne(this.meta.cardId).unsetCover();
-  },
+  'click .js-open-attachment-menu': Popup.open('attachmentActions'),
 });
 
 Template.attachmentsGalery.helpers({
@@ -129,3 +117,28 @@ Template.previewClipboardImagePopup.events({
     }
   },
 });
+
+BlazeComponent.extendComponent({
+  isCover() {
+    const ret = Cards.findOne(this.data().meta.cardId).coverId == this.data()._id;
+    return ret;
+  },
+  events() {
+    return [
+      {
+        'click .js-confirm-delete': Popup.afterConfirm('attachmentDelete', function() {
+          Attachments.remove(this._id);
+          Popup.back(2);
+        }),
+        'click .js-add-cover'() {
+          Cards.findOne(this.data().meta.cardId).setCover(this.data()._id);
+          Popup.back();
+        },
+        'click .js-remove-cover'() {
+          Cards.findOne(this.data().meta.cardId).unsetCover();
+          Popup.back();
+        },
+      }
+    ]
+  }
+}).register('attachmentActionsPopup');

i18n/en.i18n.json

@@ -1164,5 +1164,6 @@
   "copyChecklist": "Copy Checklist",
   "copyChecklistPopup-title": "Copy Checklist",
   "card-show-lists": "Card Show Lists",
-  "subtaskActionsPopup-title": "Subtask Actions"
+  "subtaskActionsPopup-title": "Subtask Actions",
+  "attachmentActionsPopup-title": "Attachment Actions"
 }