added key shortcuts' list dropdown in view option bar

Signed-off-by: Ananya Sen <Ananya.Sen@motorola.com>

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 @@
     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 @@
                 <option value="xq-dark" >XQ-DARK</option>
             </select>
         </div>
+        <div id="shortKeys" class="shortKeys">
+            <div class="list hide">
+                <div><span>ctrl+space : code hints</span></div>
+                <div><span>ctrl+/ : comment selection</span></div>
+                <div><span>ctrl+shift+/ : uncomment selection</span></div>
+            </div>
+            <span>ShortKeys</span>
+            <span class="dropdownArrow">&#9660</span>
+        </div>
     </div>
 </div>
 </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
                 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