Set card attachment as background image. Part 2.

Thanks to xet7 !

Related #486

client/components/cards/attachments.jade

@@ -81,14 +81,14 @@ template(name="attachmentActionsPopup")
             | {{_ 'remove-cover'}}
           else
             | {{_ 'add-cover'}}
-      if isImage
-        a(class="{{#if isBackgroundImage}}js-remove-background-image{{else}}js-add-background-image{{/if}}")
-          i.fa.fa-picture-o
-          if isBackgroundImage
-            | {{_ 'remove-background-image'}}
-          else
-            | {{_ 'add-background-image'}}
       if currentUser.isBoardAdmin
+        if isImage
+          a(class="{{#if isBackgroundImage}}js-remove-background-image{{else}}js-add-background-image{{/if}}")
+            i.fa.fa-picture-o
+            if isBackgroundImage
+              | {{_ 'remove-background-image'}}
+            else
+              | {{_ 'add-background-image'}}
         a.js-rename
           i.fa.fa-pencil-square-o
           | {{_ 'rename'}}

client/components/cards/attachments.js

@@ -175,6 +175,10 @@ BlazeComponent.extendComponent({
     const ret = Cards.findOne(this.data().meta.cardId).coverId == this.data()._id;
     return ret;
   },
+  isBackgroundImage() {
+    const currentBoard = Boards.findOne(Session.get('currentBoard'));
+    return currentBoard.backgroundImageURL === $(".attachment-thumbnail-img").attr("src");
+  },
   events() {
     return [
       {
@@ -191,6 +195,20 @@ BlazeComponent.extendComponent({
           Cards.findOne(this.data().meta.cardId).unsetCover();
           Popup.back();
         },
+        'click .js-add-background-image'() {
+          const currentBoard = Boards.findOne(Session.get('currentBoard'));
+          currentBoard.setBackgroundImageURL($(".attachment-thumbnail-img").attr("src"));
+          Utils.setBackgroundImage();
+          Popup.back();
+          event.preventDefault();
+        },
+        'click .js-remove-background-image'() {
+          const currentBoard = Boards.findOne(Session.get('currentBoard'));
+          currentBoard.setBackgroundImageURL("");
+          Utils.setBackgroundImage();
+          Popup.back();
+          Utils.reload();
+        },
         'click .js-move-storage-fs'() {
           Meteor.call('moveAttachmentToStorage', this.data()._id, "fs");
           Popup.back();

client/components/sidebar/sidebar.jade

@@ -145,6 +145,14 @@ template(name="boardChangeBackgroundImagePopup")
       input.js-board-background-image-url(type="text" value="{{backgroundImageURL}}" autofocus)
     div.buttonsContainer
       input.primary.wide(type="submit" value="{{_ 'save'}}")
+    br
+    br
+    br
+    br
+    br
+    hr
+    div
+      button.js-remove-background.negate.wide.card-details-red.right {{_ 'unset-color'}}
 
 template(name="boardInfoOnMyBoardsPopup")
   form.board-info-on-my-boards

client/lib/utils.js

@@ -15,6 +15,22 @@ Utils = {
       $(".board-canvas").css({"background":"none"});
     }
   },
+  unsetBackgroundImage() {
+    const currentBoard = Boards.findOne(Session.get('currentBoard'));
+    if (currentBoard.backgroundImageURL) {
+      $(".board-wrapper,.board-wrapper .board-canvas").css({"background":"none","background-size":"auto"});
+      $(".minicard").css({"padding":"6px 8px 2px","box-shadow":"0 1px 2px rgba(0,0,0,0.15)"});
+      $(".minicard .minicard-members,.minicard .minicard-assignees,.minicard .minicard-creator").css({"margin": "12px -0px 4px 5px"});
+      $(".list").css({"margin":"0px","height":"fit-content","border-left":"none","border-radius":"0px"});
+      $(".list-header-add").css({"padding":"10px 12px 4px"});
+      $(".list-header").css({"padding":"15px 12px 4px","border-top-left-radius":"3px","border-top-right-radius":"3px"});
+      $(".list-header .list-header-name").css({"font-size":"15px","line-height":"15px"});
+      $(".list-header .list-header-menu").css({"padding":"none"});
+      $("#header #header-main-bar .board-header-btn").css({"padding":"2px","margin":"0 5px"});
+      $(".swimlane").css({"background":"none"});
+      $(".board-canvas").css({"background":"none"});
+    }
+  },
   /** returns the current board id
    * <li> returns the current board id or the board id of the popup card if set
    */