Allow the header bar customization

This commit also provide a way to escape the Shorcuts page on
Sandstorm.

client/components/boards/boardArchive.js

@@ -1,4 +1,4 @@
-Template.headerTitle.events({
+Template.boardHeaderBar.events({
   'click .js-open-archived-board'() {
     Modal.open('archivedBoards');
   },

client/components/boards/boardHeader.jade

@@ -1,4 +1,4 @@
-template(name="headerBoard")
+template(name="boardHeaderBar")
   h1.header-board-menu
     with currentBoard
       a(class="{{#if currentUser.isBoardAdmin}}js-edit-board-title{{else}}is-disabled{{/if}}")

client/components/boards/boardsList.jade

@@ -23,3 +23,12 @@ template(name="boardList")
                 p.board-list-item-desc= description
       li.js-add-board
         a.board-list-item.label {{_ 'add-board'}}
+
+
+template(name="boardListHeaderBar")
+  h1 {{_ 'my-boards'}}
+
+  .board-header-btns.right
+    a.board-header-btn.js-open-archived-board
+      i.fa.fa-archive
+      span {{_ 'archives'}}

client/components/main/header.jade

@@ -32,10 +32,7 @@ template(name="header")
       current page. This bar is contextual based.
       If the user is not connected we display "sign in" and "log in" buttons.
     #header-main-bar(class="{{#if wrappedHeader}}wrapper{{/if}}")
-      if $.Session.get 'currentBoard'
-        +headerBoard
-      else if($eq currentRouteName 'home')
-        +headerTitle
+      +Template.dynamic(template=headerBar)
 
       //-
         On sandstorm, the logo shouldn't be clickable, because we only have one
@@ -47,11 +44,3 @@ template(name="header")
       else
         a.wekan-logo(href="{{pathFor 'home'}}" title="{{_ 'header-logo-title'}}")
           img(src="{{pathFor '/wekan-logo-header.png'}}" alt="Wekan")
-
-template(name="headerTitle")
-  h1 {{_ 'my-boards'}}
-
-  .board-header-btns.right
-    a.board-header-btn.js-open-archived-board
-      i.fa.fa-archive
-      span {{_ 'archives'}}

client/components/main/header.styl

@@ -85,6 +85,14 @@
       float: left
       border-radius: 3px
 
+      a.fa, a i.fa
+        color: white
+
+      .back-btn
+        font-size: 0.9em
+        margin-right: 10px
+
+
     .wekan-logo
       display: block
       margin: 3px auto 0

client/components/main/keyboardShortcuts.jade

@@ -0,0 +1,19 @@
+template(name="shortcutsHeaderBar")
+  h1
+    a.back-btn(href="{{pathFor 'home'}}")
+      i.fa.fa-chevron-left
+    | {{_ 'keyboard-shortcuts'}}
+
+template(name="shortcutsModalTitle")
+  h2
+    i.fa.fa-keyboard-o
+    | {{_ 'keyboard-shortcuts'}}
+
+template(name="keyboardShortcuts")
+  .wrapper.shortcuts-list
+    each mapping
+      .shortcuts-list-item
+        .shortcuts-list-item-keys
+          each keys
+            kbd= this
+        .shortcuts-list-item-action {{_ action}}

client/components/main/keyboardShortcuts.tpl.jade

@@ -1,11 +0,0 @@
-.wrapper.shortcuts-list
-  h2
-    i.fa.fa-keyboard-o
-    | {{_ 'keyboard-shortcuts'}}
-
-  each mapping
-    .shortcuts-list-item
-      .shortcuts-list-item-keys
-        each keys
-          kbd= this
-      .shortcuts-list-item-action {{_ action}}

client/components/main/layouts.jade

@@ -31,6 +31,7 @@ template(name="defaultLayout")
       .modal-content
         a.modal-close-btn.js-close-modal
           i.fa.fa-times-thin
+        +Template.dynamic(template=Modal.getHeaderName)
         +Template.dynamic(template=Modal.getTemplateName)
 
 template(name="notFound")

client/components/main/layouts.styl

@@ -31,6 +31,9 @@ body
   .sk-spinner
     margin-top: 30vh
 
+  > .wrapper
+    margin-top: 25px
+
 #modal
   position: absolute
   top: 0

client/config/router.js

@@ -13,7 +13,10 @@ FlowRouter.route('/', {
     Filter.reset();
     EscapeActions.executeAll();
 
-    BlazeLayout.render('defaultLayout', { content: 'boardList' });
+    BlazeLayout.render('defaultLayout', {
+      headerBar: 'boardListHeaderBar',
+      content: 'boardList',
+    });
   },
 });
 
@@ -33,7 +36,10 @@ FlowRouter.route('/b/:id/:slug', {
       EscapeActions.executeUpTo('popup-close');
     }
 
-    BlazeLayout.render('defaultLayout', { content: 'board' });
+    BlazeLayout.render('defaultLayout', {
+      headerBar: 'boardHeaderBar',
+      content: 'board',
+    });
   },
 });
 
@@ -45,7 +51,10 @@ FlowRouter.route('/b/:boardId/:slug/:cardId', {
     Session.set('currentBoard', params.boardId);
     Session.set('currentCard', params.cardId);
 
-    BlazeLayout.render('defaultLayout', { content: 'board' });
+    BlazeLayout.render('defaultLayout', {
+      headerBar: 'boardHeaderBar',
+      content: 'board',
+    });
   },
 });
 
@@ -58,11 +67,14 @@ FlowRouter.route('/shortcuts', {
 
     if (previousPath) {
       Modal.open(shortcutsTemplate, {
+        header: 'shortcutsModalTitle',
         onCloseGoTo: previousPath,
       });
     } else {
-      // XXX There is currently no way to escape this page on Sandstorm
-      BlazeLayout.render('defaultLayout', { content: shortcutsTemplate });
+      BlazeLayout.render('defaultLayout', {
+        headerBar: 'shortcutsHeaderBar',
+        content: shortcutsTemplate,
+      });
     }
   },
 });

client/lib/modal.js

@@ -6,8 +6,14 @@ window.Modal = new class {
     this._onCloseGoTo = '';
   }
 
+  getHeaderName() {
+    const currentModal = this._currentModal.get();
+    return currentModal && currentModal.header;
+  }
+
   getTemplateName() {
-    return this._currentModal.get();
+    const currentModal = this._currentModal.get();
+    return currentModal && currentModal.modalName;
   }
 
   isOpen() {
@@ -21,8 +27,8 @@ window.Modal = new class {
     }
   }
 
-  open(modalName, { onCloseGoTo = ''} = {}) {
-    this._currentModal.set(modalName);
+  open(modalName, { header = '', onCloseGoTo = ''} = {}) {
+    this._currentModal.set({ header, modalName });
     this._onCloseGoTo = onCloseGoTo;
   }
 };