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
    */