added key shortcuts' list dropdown in view option bar

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

4 files changed, 66 insertions, 6 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
diff --git a/js/controllers/code-editor-controller.js b/js/controllers/code-editor-controller.js
index f4ca6018..0223165f 100644
--- a/js/controllers/code-editor-controller.js
+++ b/js/controllers/code-editor-controller.js
@@ -140,16 +140,14 @@ var CodeEditorController = exports.CodeEditorController = Montage.create(Compone
                             || (keyEvent.keyCode === 190)//period
                             || (keyEvent.keyCode === 189)//underscore, dash
                            )
-                        && !( (keyEvent.keyCode === 219)//open bracket [
-                            || (keyEvent.ctrlKey || keyEvent.metaKey)//ctrl
+                        && !(keyEvent.ctrlKey //ctrl
+                            || keyEvent.metaKey//cmd
+                            || (keyEvent.keyCode === 219)//open bracket [
                             || (keyEvent.keyCode === 221)//close bracket ]
                             || (keyEvent.shiftKey && keyEvent.keyCode === 219)//open bracket {
                             || (keyEvent.shiftKey && keyEvent.keyCode === 221)//close bracket }
                             || (keyEvent.shiftKey && keyEvent.keyCode === 57)//open bracket (
                             || (keyEvent.shiftKey && keyEvent.keyCode === 48)//close bracket )
-                            || ((keyEvent.keyCode === 83) && (keyEvent.ctrlKey || keyEvent.metaKey))//ctrl+S
-                            || ((keyEvent.keyCode === 90) && (keyEvent.ctrlKey || keyEvent.metaKey))//ctrl+z
-                            || ((keyEvent.keyCode === 89) && (keyEvent.ctrlKey || keyEvent.metaKey))//ctrl+y
                            )
                     ){
                         status = true;