From 35d1d6b463c4a91ab06838896f5531f759696da2 Mon Sep 17 00:00:00 2001
From: Maxime Quandalle <maxime@quandalle.com>
Date: Fri, 28 Aug 2015 00:32:08 +0200
Subject: Display keyboard shortcuts on a modal

Fixes #241
---
 client/components/boards/boardArchive.jade        |  4 +++-
 client/components/cards/minicard.styl             |  2 +-
 client/components/main/keyboardShortcuts.styl     | 25 +++++++++++++++++++++++
 client/components/main/keyboardShortcuts.tpl.jade |  9 +++++++-
 client/components/main/layouts.styl               |  5 ++++-
 client/lib/keyboard.js                            | 25 +++++++++++++++++++++++
 6 files changed, 66 insertions(+), 4 deletions(-)
 create mode 100644 client/components/main/keyboardShortcuts.styl

(limited to 'client')

diff --git a/client/components/boards/boardArchive.jade b/client/components/boards/boardArchive.jade
index d659d0cc..b4b41d0f 100644
--- a/client/components/boards/boardArchive.jade
+++ b/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
diff --git a/client/components/cards/minicard.styl b/client/components/cards/minicard.styl
index d886cd6f..ee454e78 100644
--- a/client/components/cards/minicard.styl
+++ b/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
diff --git a/client/components/main/keyboardShortcuts.styl b/client/components/main/keyboardShortcuts.styl
new file mode 100644
index 00000000..42e0637b
--- /dev/null
+++ b/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
diff --git a/client/components/main/keyboardShortcuts.tpl.jade b/client/components/main/keyboardShortcuts.tpl.jade
index 321c2b0a..d10068ed 100644
--- a/client/components/main/keyboardShortcuts.tpl.jade
+++ b/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
diff --git a/client/components/main/layouts.styl b/client/components/main/layouts.styl
index 9a831a40..e9367b11 100644
--- a/client/components/main/layouts.styl
+++ b/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
diff --git a/client/lib/keyboard.js b/client/lib/keyboard.js
index 066836d4..fa1747e3 100644
--- a/client/lib/keyboard.js
+++ b/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'
+  }]
+});
-- 
cgit v1.2.3-1-g7c22