From 1314a030f5f883e2222958aa2ba1b8c031be9364 Mon Sep 17 00:00:00 2001 From: Ananya Sen Date: Fri, 27 Apr 2012 17:12:37 -0700 Subject: added key shortcuts' list dropdown in view option bar Signed-off-by: Ananya Sen --- .../code-editor-view-options.css | 38 ++++++++++++++++++++++ .../code-editor-view-options.html | 12 ++++++- .../code-editor-view-options.js | 14 ++++++++ 3 files changed, 63 insertions(+), 1 deletion(-) (limited to 'js/code-editor') diff --git a/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.css b/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.css index 442a5183..ed314fc9 100644 --- a/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.css +++ b/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.css @@ -51,3 +51,41 @@ border-color: #616161; } +.viewOptions .shortKeys{ + float: right; + margin-right:30px; + border: 1px solid #616161; + border-radius: 6px; + padding-left: 5px; + padding-right: 5px; + cursor:pointer; + position:relative; +} + +.viewOptions .shortKeys .dropdownArrow{ + font-size: 0.7em; + color:#d1d1d1; +} + +.viewOptions .shortKeys .list{ + position:absolute; + border: 1px solid #616161; + bottom: 16px; + left: -2px; + opacity: 1; + white-space: nowrap; + padding:5px; + background-color: #313131; +} + +.viewOptions .shortKeys .list div{ + display: block; +} + +.viewOptions .shortKeys .hide{ + visibility: hidden; +} + +.viewOptions .shortKeys .show{ + visibility: visible; +} \ No newline at end of file diff --git a/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.html b/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.html index fadc4683..8a46a0b1 100644 --- a/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.html +++ b/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.html @@ -38,7 +38,8 @@ "format":{"#": "format"}, "comment":{"#":"comment"}, "uncomment":{"#":"uncomment"}, - "themeSelect":{"#":"themeSelect"} + "themeSelect":{"#":"themeSelect"}, + "shortKeys":{"#":"shortKeys"} } } } @@ -72,6 +73,15 @@ +
+
+
ctrl+space : code hints
+
ctrl+/ : comment selection
+
ctrl+shift+/ : uncomment selection
+
+ ShortKeys + +
diff --git a/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.js b/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.js index 41fd991e..6c0e3f05 100644 --- a/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.js +++ b/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.js @@ -46,6 +46,7 @@ var CodeEditorViewOptions = exports.CodeEditorViewOptions = Montage.create(Compo this.comment.addEventListener("click", this.handleComment.bind(this), false); this.uncomment.addEventListener("click", this.handleUncomment.bind(this), false); this.themeSelect.addEventListener("change", this.handleThemeSelection.bind(this), false); + this.shortKeys.addEventListener("click", this.handleShortKeys.bind(this), false); } }, @@ -71,6 +72,19 @@ var CodeEditorViewOptions = exports.CodeEditorViewOptions = Montage.create(Compo this.application.ninja.codeEditorController.editorTheme = this.themeSelect.options[this.themeSelect.selectedIndex].value; this.application.ninja.codeEditorController.handleThemeSelection(); } + }, + + handleShortKeys:{ + value:function(evt){ + var list = this.shortKeys.querySelector(".list"); + if(list && list.classList.contains("hide")){ + list.classList.remove("hide"); + list.classList.add("show"); + }else if(list && list.classList.contains("show")){ + list.classList.remove("show"); + list.classList.add("hide"); + } + } } }); \ No newline at end of file -- cgit v1.2.3