Shortcuts settings

res/eventMgr.js

@@ -34,6 +34,7 @@ define([
     "extensions/buttonHtmlCode",
     "extensions/buttonViewer",
     "extensions/welcomeTour",
+    "extensions/shortcutRecorder",
     "extensions/userCustom",
     "bootstrap",
     "jquery-waitforimages"

res/extensions/shortcutRecorder.js

@@ -0,0 +1,24 @@
+define([
+    "jquery",
+    "underscore",
+    "classes/Extension",
+    "mousetrap",
+    "mousetrap-record",
+], function($, _, Extension, mousetrap) {
+	
+    var shortcutRecorder = new Extension("shortcutRecorder", "Shortcut recorder");
+    
+    shortcutRecorder.onReady = function() {
+    	$('.button-record-shortcut').click(function() {
+    		var $button = $(this);
+    		Mousetrap.record(function(sequence) {
+    			$button.before(['<div class="alert alert-dismissable">',
+'<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>',
+sequence.join(' '),
+'</div>'].join());
+            });
+    	});
+    };
+
+    return shortcutRecorder;
+});

res/html/bodyIndex.html

@@ -885,6 +885,8 @@
 				<ul class="nav nav-tabs">
 					<li class="active"><a class="action-load-settings"
 						href="#tabpane-settings-editor" data-toggle="tab">Editor</a></li>
+					<li><a class="action-load-settings"
+						href="#tabpane-settings-shortcuts" data-toggle="tab">Shortcuts</a></li>
 					<li><a class="action-load-settings"
 						href="#tabpane-settings-publish" data-toggle="tab">Publish</a></li>
 					<li><a class="action-load-settings"
@@ -967,6 +969,17 @@
 							</div>
 						</div>
 					</div>
+					<div class="tab-pane" id="tabpane-settings-shortcuts">
+						<div class="form-horizontal">
+							<div class="form-group">
+								<label class="col-lg-4 control-label"
+									for="input-settings-shortcut">Shortcut</label>
+								<div class="col-lg-7">
+									<button class="btn btn-default button-record-shortcut">Click to record</button>
+								</div>
+							</div>
+						</div>
+					</div>
 					<div class="tab-pane" id="tabpane-settings-publish">
 						<div class="form-horizontal">
 							<div class="form-group">

res/main.js

@@ -24,6 +24,7 @@ requirejs.config({
         crel: 'bower-libs/crel/crel',
         jgrowl: 'bower-libs/jgrowl/jquery.jgrowl',
         mousetrap: 'bower-libs/mousetrap/mousetrap',
+        'mousetrap-record': 'bower-libs/mousetrap/plugins/record/mousetrap-record',
         toMarkdown: 'bower-libs/to-markdown/src/to-markdown',
         text: 'bower-libs/requirejs-text/text',
         mathjax: '../lib/MathJax/MathJax.js?config=TeX-AMS_HTML',
@@ -68,6 +69,9 @@ requirejs.config({
         mousetrap: {
             exports: 'Mousetrap'
         },
+        'bootstrap-record': [
+                           'mousetrap'
+                       ],
         toMarkdown: {
             deps: [
                 'jquery'

res/styles/main.less

@@ -362,7 +362,7 @@ body {
 
 .menu-panel {
 	width: @menu-panel-width !important;
-	margin-left: (-@menu-panel-width - 23);
+	margin-left: (-@menu-panel-width - 25);
 	-webkit-transition: margin-left 0.35s ease;
 	-moz-transition: margin-left 0.35s ease;
 	-o-transition: margin-left 0.35s ease;
@@ -372,22 +372,24 @@ body {
 	}
 	&.in {
         margin-left: 0;
+    }
+    &.in, &.collapsing {
     	.collapse-button {
-            padding-right: 16px;
+            padding-right: 17px;
         }
 	}
     .collapse-button {
-	    right: -75px;
+	    right: -80px;
 		position: absolute;
 		margin-top: 6px;
 		z-index: -1;
-		padding: 2px 24px 2px 16px;
+		padding: 2px 27px 2px 50px;
     	-webkit-transition: padding-right 0.35s ease;
         -moz-transition: padding-right 0.35s ease;
         -o-transition: padding-right 0.35s ease;
         transition: padding-right 0.35s ease;
         &:hover {
-            padding-right: 16px;
+            padding-right: 17px;
         }
 	}
 	.panel-content {
@@ -400,22 +402,24 @@ body {
 .document-panel {
 	right: 0;
 	width: @document-panel-width !important;
-	margin-right: (-@document-panel-width - 27);
+	margin-right: (-@document-panel-width - 30);
 	-webkit-transition: margin-right 0.35s ease;
     -moz-transition: margin-right 0.35s ease;
     -o-transition: margin-right 0.35s ease;
     transition: margin-right 0.35s ease;
 	&.in {
         margin-right: 0;
+    }
+    &.in, &.collapsing {
         .collapse-button {
             padding-left: 10px;
         }
 	}
     .collapse-button {
-	    left: -75px;
+	    left: -80px;
 		position: absolute;
 		margin-top: 6px;
-		padding: 7px 10px 7px 18px;
+		padding: 7px 50px 7px 20px;
 		z-index: -1;
     	-webkit-transition: padding-left 0.35s ease;
         -moz-transition: padding-left 0.35s ease;
@@ -1106,10 +1110,6 @@ div.dropdown-menu textarea {
 	padding-right: 2px;
 }
 
-.icon-trash {
-	font-size: 95%;
-}
-
 .icon-folder {
 	margin-top: -2px;
 }