From 1f022fd4a7a1f24e8832c7f9455b9027992d552d Mon Sep 17 00:00:00 2001
From: jdescottes <julian.descottes@gmail.com>
Date: Tue, 18 Mar 2014 01:45:59 +0100
Subject: [PATCH] Enhancement : Add hint to see Keyboard cheatsheet

---
 src/css/cheatsheet.css                       |  31 +++++++++++++++++++
 src/img/keyboard.png                         | Bin 0 -> 1338 bytes
 src/js/service/keyboard/CheatsheetService.js |   4 +++
 src/templates/cheatsheet.html                |   1 +
 4 files changed, 36 insertions(+)
 create mode 100644 src/img/keyboard.png

diff --git a/src/css/cheatsheet.css b/src/css/cheatsheet.css
index 688a5efe..5fdcd79e 100644
--- a/src/css/cheatsheet.css
+++ b/src/css/cheatsheet.css
@@ -1,3 +1,28 @@
+.cheatsheet-link {
+  position: fixed;
+  bottom: 10px;
+  left: 10px;
+
+  padding: 1px 0 0 45px;
+  color : gold;
+  font-weight: bold;
+  font-size : 1.25em;
+  line-height: 20px;
+
+  cursor : pointer;
+
+  background-image:url('../img/keyboard.png');
+  background-size:35px 20px;
+  background-repeat:no-repeat;
+  opacity: 0.5;
+  z-index: 11000;
+  transition : opacity 0.3s;
+}
+
+.cheatsheet-link:hover {
+  opacity: 1;
+}
+
 #cheatsheet-wrapper {
   position: absolute;
   z-index: 10000;
@@ -8,7 +33,9 @@
   left: 0;
 
   padding: 50px;
+
   box-sizing: border-box;
+  -moz-box-sizing : border-box;
 
   color: white;
 }
@@ -16,7 +43,10 @@
 .cheatsheet-container {
   width: 100%;
   height:  100%;
+
   box-sizing: border-box;
+  -moz-box-sizing : border-box;
+
   padding: 20px 3%;
   border-radius: 3px;
   background: rgba(0,0,0,0.9);
@@ -68,6 +98,7 @@
   border-radius: 2px;
 
   box-sizing: border-box;
+  -moz-box-sizing : border-box;
 
   text-align: center;
   font-family:Courier;
diff --git a/src/img/keyboard.png b/src/img/keyboard.png
new file mode 100644
index 0000000000000000000000000000000000000000..8bed1a3abf132da3a484d5d9dbf390cc4d43be49
GIT binary patch
literal 1338
zcmV-A1;zS_P)<h;3K|Lk000e1NJLTq002e+001Zm1^@s6L(q(_00004b3#c}2nYxW
zd<bNS00009a7bBm000fw000fw0YWI7cmMzZ8FWQhbW?9;ba!ELWdL_~cP?peYja~^
zaAhuUa%Y?FJQ@H11h+{<K~!jg?V8_f990y@KWCaBB%+qo#)q~jS~r`u){4!G_z)Bk
z!9s0?7$dE;AZh=K(m$dtLW(WM7_hNWL4qiG@GTLOSd&StqNIT~wZ$KhkRP4n!%Q}F
z@67DZ*4;+8`+d6i%;(;F?&0p<b7!uoDu%{oD@`21qXS_-kO3U3OCB(bGKRw_OI&21
z{t*Vm2+Xv+hHxI(d4K)fbX`X|M!SBsZrE4}uAD*`=D`aJz)pl=TsgIF@K=m0oxnGM
zY?f#L5h?HrSsf9b;2|2A1fGfk`%yl@VVorv@3WJYQ4`I0>_d1L=!qeIVTHY-F1;vc
zt%nNqkkx_8d%B5or5otS{-p>f96UNA4U}_L9~6MB4xpTi*gZN#r<nluT94Yu>a1az
zlHI}f?MwKPto~pyGt!2~3n9x@+VyHdMwuk1Q`T5HB;=FB_q6GZ!A#2@U{68DmFG~N
z4UIKMPOn)^1~A*fr06uOKwZfAH(4Hq&^|sZZ{YC-(R}88vU(wK^dQ0z_OevEY1dB+
zFd8s}0n>#r5W^gzT`vdBI{`x?<H}LsBa88Hc$18NxnUB)<xk+@5Vz)7K>@g91jQfn
z5b;Ug+oAGd;&wIRa1ln3P(OY-$`I<u>@%J*eOs3k%q1jM;Eu)BrORlQ`h+JNb|-<+
z5}Bm2oDvyQj8#C@mg<*HX#?|DQM)EEPKk_@z-Wm~8lMX&U0@vg5aulF0&pf@6Fvmy
zE#{`N9mX>^48||tu$cLvZJ4=Pknw$6FbH7|hdxqBbQ<e;&2MD&$ryACQ*6&ym$=P~
zx@sUJQb#L~mBcLYJDs{#GV`6()5Nxtm>jo2??$HP%CEo^#%$9Eriv947<;Qu*0^k?
zk!-$R&(G}ETLv>FEeM&C7~v<fdfRez8_F~Jx-v^n%`NqsY-g3HOJbIB?e{K8O1ENW
z<z+mEf##5P1*I#WP)*6JI9vgmLd-G_Z{-uJG>o52ehxH-m?b<8kkhYIGk!8T2sDJ4
zMI2ryqu(0yi&-)0{(SG!gBcWn1{{utdV0^AFhC<7M@nM+a-+pG1#QzazHbc{(;UpD
zsL};SB9rl@A$z$PO<<$~Oaavryac5^5-i2qC1fubBMFRFfGMDKf!RVoMBd=7;Bg^e
z^Y|DdgD&H6u_VSXFI&t~&^A5e`?g{+i@{uqDt#VP&D(V?!AsD;O7QOGNKh_S`bZF?
zv<cqxC|6K+8SX+CSsejjM)spz26m(wxJ1n(9HdRh0C43cU<i1;0MiK!0<C#Mm_s-~
zMkkEk?>WKqIBo@nV8E04n(_ga2@1fDpnqRNFJ@4pjPF~kK`6WMIG$#}w0X=UMeUNv
zlt<zIy@at$ABy{2K(z!fL1~W!s|imw>|P>M9)<f)^2hWco=KjIAqQBqY%L)6m$@PQ
zs}r_93zaWH<d3{u(xCtK+NGk5>D#)zU@jqv04)}`R_PCJ<<X{maGRnJ;h14o&eE<Y
zc@Q)$XAn*pHs!p7!)OE+dV>$%)h$=LgRS3`!)WaqNL0Z!klMweu<{p&{O#IL>rYd;
wUFH8E1x~LYacY+neMK%OO6@vp{B_oU03hO1GTG;3DF6Tf07*qoM6N<$f^xWFR{#J2

literal 0
HcmV?d00001

diff --git a/src/js/service/keyboard/CheatsheetService.js b/src/js/service/keyboard/CheatsheetService.js
index ab85382a..541febb7 100644
--- a/src/js/service/keyboard/CheatsheetService.js
+++ b/src/js/service/keyboard/CheatsheetService.js
@@ -13,6 +13,10 @@
     this.initMarkup_();
     pskl.app.shortcutService.addShortcut('shift+?', this.toggleCheatsheet_.bind(this));
     pskl.app.shortcutService.addShortcut('?', this.toggleCheatsheet_.bind(this));
+
+    var link = $('.cheatsheet-link');
+    link.click(this.toggleCheatsheet_.bind(this));
+
     $.subscribe(Events.TOGGLE_HELP, this.toggleCheatsheet_.bind(this));
     $.subscribe(Events.ESCAPE, this.onEscape_.bind(this));
   };
diff --git a/src/templates/cheatsheet.html b/src/templates/cheatsheet.html
index 2f9030ac..ee9203c8 100644
--- a/src/templates/cheatsheet.html
+++ b/src/templates/cheatsheet.html
@@ -14,6 +14,7 @@
     </div>
   </div>
 </div>
+<span class="cheatsheet-link">Keyboard shortcuts</a>
 <script type="text/template" id="cheatsheet-shortcut-template">
   <li class="cheatsheet-shortcut">
     <div class="cheatsheet-icon {{shortcutIcon}}"></div>