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 00000000..8bed1a3a Binary files /dev/null and b/src/img/keyboard.png differ 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 @@ +Keyboard shortcuts