Display keyboard shortcuts on a modal

Fixes #241

client/components/boards/boardArchive.jade

@@ -1,5 +1,7 @@
 template(name="archivedBoards")
-  h2 Archived boards
+  h2
+    i.fa.fa-archive
+    | Archived boards
 
   ul.archived-lists
     each archivedBoards

client/components/cards/minicard.styl

@@ -39,7 +39,7 @@
   flex-wrap: wrap
   background-color: #fff
   min-height: 20px
-  box-shadow: 0 1px 2px rgba(0,0,0,.2)
+  box-shadow: 0 1px 2px rgba(0,0,0,.15)
   border-radius: 2px
   color: #4d4d4d
   overflow: hidden

client/components/main/keyboardShortcuts.styl

@@ -0,0 +1,25 @@
+.shortcuts-list
+  .shortcuts-list-item
+    border-bottom: 1px solid darken(white, 25%)
+    padding: 10px 5px
+
+    &:last-child
+      border-bottom: none
+
+    .shortcuts-list-item-keys
+      margin-top: 5px
+      float: right
+
+      kbd
+        padding: 5px 8px
+        margin: 5px
+        font-size: 18px
+        font-weight: bold
+        background: white
+        border-radius: 3px
+        border: 1px solid darken(white, 10%)
+        box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.15)
+
+    .shortcuts-list-item-action
+      font-size: 1.4em
+      margin: 5px

client/components/main/keyboardShortcuts.tpl.jade

@@ -1,4 +1,11 @@
-.wrapper
+.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.styl

@@ -39,7 +39,7 @@ body
   overflow-y: auto
 
   .modal-content
-    width: 660px
+    width: 500px
     min-height: 160px
     margin: 42px auto
     padding: 12px
@@ -47,6 +47,9 @@ body
     background: darken(white, 13%)
     z-index: 110
 
+    h2
+      margin-bottom: 25px
+
     .modal-close-btn
       display: block
       float: right

client/lib/keyboard.js

@@ -35,3 +35,28 @@ Mousetrap.bind(['down', 'up'], (evt, key) => {
     Utils.goCardId(nextCardId);
   }
 });
+
+Template.keyboardShortcuts.helpers({
+  mapping: [{
+    keys: ['W'],
+    action: 'Toogle Board Sidebar'
+  }, {
+    keys: ['Q'],
+    action: 'Filter my cards'
+  }, {
+    keys: ['X'],
+    action: 'Clear all filters'
+  }, {
+    keys: ['?'],
+    action: 'Bring up this shortcuts list'
+  }, {
+    keys: ['ESC'],
+    action: 'Close Dialog'
+  }, {
+    keys: ['@'],
+    action: 'Autocomplete members'
+  }, {
+    keys: [':'],
+    action: 'Autocomplete emojies'
+  }]
+});