aboutsummaryrefslogtreecommitdiff
path: root/js/code-editor/ui/code-editor-view-options.reel
diff options
context:
space:
mode:
Diffstat (limited to 'js/code-editor/ui/code-editor-view-options.reel')
-rw-r--r--js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.css38
-rw-r--r--js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.html12
-rw-r--r--js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.js14
3 files changed, 63 insertions, 1 deletions
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 @@
51 border-color: #616161; 51 border-color: #616161;
52} 52}
53 53
54.viewOptions .shortKeys{
55 float: right;
56 margin-right:30px;
57 border: 1px solid #616161;
58 border-radius: 6px;
59 padding-left: 5px;
60 padding-right: 5px;
61 cursor:pointer;
62 position:relative;
63}
64
65.viewOptions .shortKeys .dropdownArrow{
66 font-size: 0.7em;
67 color:#d1d1d1;
68}
69
70.viewOptions .shortKeys .list{
71 position:absolute;
72 border: 1px solid #616161;
73 bottom: 16px;
74 left: -2px;
75 opacity: 1;
76 white-space: nowrap;
77 padding:5px;
78 background-color: #313131;
79}
80
81.viewOptions .shortKeys .list div{
82 display: block;
83}
84
85.viewOptions .shortKeys .hide{
86 visibility: hidden;
87}
88
89.viewOptions .shortKeys .show{
90 visibility: visible;
91} \ 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 @@
38 "format":{"#": "format"}, 38 "format":{"#": "format"},
39 "comment":{"#":"comment"}, 39 "comment":{"#":"comment"},
40 "uncomment":{"#":"uncomment"}, 40 "uncomment":{"#":"uncomment"},
41 "themeSelect":{"#":"themeSelect"} 41 "themeSelect":{"#":"themeSelect"},
42 "shortKeys":{"#":"shortKeys"}
42 } 43 }
43 } 44 }
44 } 45 }
@@ -72,6 +73,15 @@
72 <option value="xq-dark" >XQ-DARK</option> 73 <option value="xq-dark" >XQ-DARK</option>
73 </select> 74 </select>
74 </div> 75 </div>
76 <div id="shortKeys" class="shortKeys">
77 <div class="list hide">
78 <div><span>ctrl+space : code hints</span></div>
79 <div><span>ctrl+/ : comment selection</span></div>
80 <div><span>ctrl+shift+/ : uncomment selection</span></div>
81 </div>
82 <span>ShortKeys</span>
83 <span class="dropdownArrow">&#9660</span>
84 </div>
75 </div> 85 </div>
76</div> 86</div>
77</body> 87</body>
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
46 this.comment.addEventListener("click", this.handleComment.bind(this), false); 46 this.comment.addEventListener("click", this.handleComment.bind(this), false);
47 this.uncomment.addEventListener("click", this.handleUncomment.bind(this), false); 47 this.uncomment.addEventListener("click", this.handleUncomment.bind(this), false);
48 this.themeSelect.addEventListener("change", this.handleThemeSelection.bind(this), false); 48 this.themeSelect.addEventListener("change", this.handleThemeSelection.bind(this), false);
49 this.shortKeys.addEventListener("click", this.handleShortKeys.bind(this), false);
49 } 50 }
50 }, 51 },
51 52
@@ -71,6 +72,19 @@ var CodeEditorViewOptions = exports.CodeEditorViewOptions = Montage.create(Compo
71 this.application.ninja.codeEditorController.editorTheme = this.themeSelect.options[this.themeSelect.selectedIndex].value; 72 this.application.ninja.codeEditorController.editorTheme = this.themeSelect.options[this.themeSelect.selectedIndex].value;
72 this.application.ninja.codeEditorController.handleThemeSelection(); 73 this.application.ninja.codeEditorController.handleThemeSelection();
73 } 74 }
75 },
76
77 handleShortKeys:{
78 value:function(evt){
79 var list = this.shortKeys.querySelector(".list");
80 if(list && list.classList.contains("hide")){
81 list.classList.remove("hide");
82 list.classList.add("show");
83 }else if(list && list.classList.contains("show")){
84 list.classList.remove("show");
85 list.classList.add("hide");
86 }
87 }
74 } 88 }
75 89
76}); \ No newline at end of file 90}); \ No newline at end of file