BoardAdmin and Admin can now set board background image URL.

Thanks to xet7 !

Related #486

client/components/sidebar/sidebar.jade

@@ -138,6 +138,14 @@ template(name="boardChangeColorPopup")
           if isSelected
             i.fa.fa-check
 
+template(name="boardChangeBackgroundImagePopup")
+  form
+    label
+      | {{_ 'board-background-image-url'}}
+      input.js-board-background-image-url(type="text" value="{{backgroundImageURL}}" autofocus)
+    div.buttonsContainer
+      input.primary.wide(type="submit" value="{{_ 'save'}}")
+
 template(name="boardInfoOnMyBoardsPopup")
   form.board-info-on-my-boards
     h3 {{_ 'show-at-all-boards-page'}}
@@ -409,6 +417,10 @@ template(name="boardMenuPopup")
         a.js-change-board-color
           i.fa.fa-paint-brush
           | {{_ 'board-change-color'}}
+      li
+        a.js-change-background-image
+          i.fa.fa-picture-o
+          | {{_ 'board-change-background-image'}}
     if currentUser.isBoardAdmin
       unless currentSetting.hideBoardMemberList
         unless currentSetting.hideCardCounterList

client/components/sidebar/sidebar.js

@@ -158,7 +158,7 @@ Template.boardInfoOnMyBoardsPopup.helpers({
   hideBoardMemberList() {
     return Utils.isMiniScreen() && Session.get('currentBoard');
   },
-})
+});
 
 EscapeActions.register(
   'sidebarView',
@@ -218,6 +218,7 @@ Template.boardMenuPopup.events({
     Popup.back();
   },
   'click .js-change-board-color': Popup.open('boardChangeColor'),
+  'click .js-change-background-image': Popup.open('boardChangeBackgroundImage'),
   'click .js-board-info-on-my-boards': Popup.open('boardInfoOnMyBoards'),
   'click .js-change-language': Popup.open('changeLanguage'),
   'click .js-archive-board ': Popup.afterConfirm('archiveBoard', function() {
@@ -334,6 +335,7 @@ BlazeComponent.extendComponent({
 
   onRendered() {
     this.setLoading(false);
+    Utils.setBackgroundImage();
   },
 
   setError(error) {
@@ -677,6 +679,30 @@ BlazeComponent.extendComponent({
   },
 }).register('boardChangeColorPopup');
 
+BlazeComponent.extendComponent({
+  events() {
+    return [
+      {
+        submit(event) {
+          const currentBoard = Boards.findOne(Session.get('currentBoard'));
+          const backgroundImageURL = this.find('.js-board-background-image-url').value.trim();
+          currentBoard.setBackgroundImageURL(backgroundImageURL);
+          Utils.setBackgroundImage();
+          Popup.back();
+          event.preventDefault();
+        },
+      },
+    ];
+  },
+}).register('boardChangeBackgroundImagePopup');
+
+Template.boardChangeBackgroundImagePopup.helpers({
+  backgroundImageURL() {
+    const currentBoard = Boards.findOne(Session.get('currentBoard'));
+    return currentBoard.backgroundImageURL;
+  },
+});
+
 BlazeComponent.extendComponent({
   onCreated() {
     this.currentBoard = Boards.findOne(Session.get('currentBoard'));

client/lib/utils.js

@@ -1,4 +1,20 @@
 Utils = {
+  setBackgroundImage() {
+    const currentBoard = Boards.findOne(Session.get('currentBoard'));
+    if (currentBoard.backgroundImageURL) {
+      $(".board-wrapper,.board-wrapper .board-canvas").css({"background":"url(" + currentBoard.backgroundImageURL + ")","background-size":"cover"});
+      $(".minicard").css({"padding":"8px 8px 2px","box-shadow":"0 2px 3px rgba(0, 0, 0, 0.37)"});
+      $(".minicard .minicard-members,.minicard .minicard-assignees,.minicard .minicard-creator").css({"margin": "12px -0px 0px 5px"});
+      $(".list").css({"margin":"8px","height":"fit-content","border-left":"none","border-radius":"3px"});
+      $(".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
    */

imports/i18n/data/en.i18n.json

@@ -137,6 +137,8 @@
   "avatar-too-big": "The avatar is too large (__size__ max)",
   "back": "Back",
   "board-change-color": "Change color",
+  "board-change-background-image": "Change background image",
+  "board-background-image-url": "Background Image URL",
   "show-at-all-boards-page" : "Show at All Boards page",
   "board-info-on-my-boards" : "All Boards Settings",
   "boardInfoOnMyBoardsPopup-title" : "All Boards Settings",
@@ -149,6 +151,7 @@
   "board-public-info": "This board will be <strong>public</strong>.",
   "board-drag-drop-reorder-or-click-open": "Drag and drop to reorder board icons. Click board icon to open board.",
   "boardChangeColorPopup-title": "Change Board Background",
+  "boardChangeBackgroundImagePopup-title": "Change Background Image",
   "boardChangeTitlePopup-title": "Rename Board",
   "boardChangeVisibilityPopup-title": "Change Visibility",
   "boardChangeWatchPopup-title": "Change Watch",

models/boards.js

@@ -294,6 +294,13 @@ Boards.attachSchema(
         }
       },
     },
+    backgroundImageURL: {
+      /**
+       * The background image URL of the board.
+       */
+      type: String,
+      optional: true,
+    },
     allowsCardCounterList: {
       /**
        * Show card counter per list
@@ -1266,6 +1273,16 @@ Boards.mutations({
     return { $set: { color } };
   },
 
+  setBackgroundImageURL(backgroundImageURL) {
+    if(Meteor.user().isBoardAdmin()) {
+      return { $set: { backgroundImageURL } };
+    } else if (Meteor.user().isAdmin()) {
+      return { $set: { backgroundImageURL } };
+    } else {
+      return false;
+    }
+  },
+
   setVisibility(visibility) {
     return { $set: { permission: visibility } };
   },
@@ -1637,6 +1654,10 @@ if (Meteor.isServer) {
   });
 
   Meteor.methods({
+    getBackgroundImageURL(boardId) {
+      check(boardId, String);
+      return Boards.findOne({ boardId: boardId }, {}, { backgroundImageUrl: 1 });
+    },
     quitBoard(boardId) {
       check(boardId, String);
       const board = Boards.findOne(boardId);

server/publications/boards.js

@@ -85,6 +85,7 @@ Meteor.publish('boardsReport', function() {
         title: 1,
         description: 1,
         color: 1,
+        backgroundImageURL: 1,
         members: 1,
         orgs: 1,
         teams: 1,