Added comment and uncomment control in the editor view options

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

3 files changed, 42 insertions, 3 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 5aa66af2..90cf88d3 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
@@ -1,3 +1,14 @@
 .viewOptions{
     color:#F7F7F7;
-}
\ No newline at end of file
+    font-size:12px;
+}
+
+.viewOptions div{
+    display:inline;
+}
+
+.viewOptions .format{
+    float:right;
+    font-size:9px;
+}
+
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 c6d3da4e..6698baa9 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
@@ -36,7 +36,10 @@
             "properties": {
                 "element": {"#": "viewOptions"},
                 "codeCompleteCheck":{"@": "codeCompleteCheck"},
-                "zoomHottext":{"@":"zoomHottext"}
+                "zoomHottext":{"@":"zoomHottext"},
+                "format":{"#": "format"},
+                "comment":{"#":"comment"},
+                "uncomment":{"#":"uncomment"}
             }
         }
     }
@@ -47,8 +50,13 @@
     <div>
         <input class="zoomFont" id="zoomFont"/>
         <div class="autoCodeComplete" >
-            <span>Automatic Code completion</span>
             <input type="checkbox" id="codeComplete" />
+            <span>Automatic Completion</span>
+        </div>
+        <div class="floatButtons">
+            <!--<button id="format" value="format" class="nj-skinned format">Format</button>-->
+            <button id="comment" value="comment" class="nj-skinned format">comment</button>
+            <button id="uncomment" value="uncomment" class="nj-skinned format">uncomment</button>
         </div>
     </div>
 </div>
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 a1ff8547..a381ae2a 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
@@ -42,7 +42,27 @@ var CodeEditorViewOptions = exports.CodeEditorViewOptions = Montage.create(Compo
         didDraw: {
             enumerable: false,
             value: function() {
+                this.format.addEventListener("click", this.handleFormat.bind(this), false);
+                this.comment.addEventListener("click", this.handleComment.bind(this), false);
+                this.uncomment.addEventListener("click", this.handleUncomment.bind(this), false);
+            }
+        },
+
+        handleFormat:{
+            value: function(){
+                this.application.ninja.codeEditorController.autoFormatSelection();
+            }
+        },
+        handleComment:{
+            value: function(){
+                this.application.ninja.codeEditorController.commentSelection(true);
+            }
+        },
 
+        handleUncomment:{
+            value: function(){
+                this.application.ninja.codeEditorController.commentSelection(false);
             }
         }
+
 });
\ No newline at end of file