added theme choices for editor

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

4 files changed, 69 insertions, 7 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 90cf88d3..91054fb9 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
@@ -7,8 +7,36 @@
     display:inline;
 }
 
+.viewOptions .autoCodeComplete{
+    float:left;
+}
+
+.viewOptions .floatButtons{
+    float:left;
+    font-size:9px;
+    padding-left: 20px;
+}
+
 .viewOptions .format{
-    float:right;
+    float:left;
+    margin-left:5px;
+}
+
+.viewOptions .themeOptions{
+    float: right;
+}
+
+.viewOptions .themeOptions select{
+    background-color: #616161;
+    color: white;
     font-size:9px;
+    margin-top:2px;
+    border-color: #616161;
+}
+
+.viewOptions .themeOptions select option{
+    background-color: #616161;
+    color: white;
+    border-color: #616161;
 }
 
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 6698baa9..4a6cfa59 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
@@ -39,7 +39,8 @@
                 "zoomHottext":{"@":"zoomHottext"},
                 "format":{"#": "format"},
                 "comment":{"#":"comment"},
-                "uncomment":{"#":"uncomment"}
+                "uncomment":{"#":"uncomment"},
+                "themeSelect":{"#":"themeSelect"}
             }
         }
     }
@@ -54,10 +55,25 @@
             <span>Automatic Completion</span>
         </div>
         <div class="floatButtons">
-            <!--<button id="format" value="format" class="nj-skinned format">Format</button>-->
+            <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 class="themeOptions">
+            <span>Theme</span>
+            <select id="themeSelect">
+                <option value="default" selected="">DEFAULT</option>
+                <option value="night">NIGHT</option>
+                <option value="monokai" >MONOKAI</option>
+                <option value="neat" >NEAT</option>
+                <option value="elegant" >ELEGANT</option>
+                <option value="cobalt" >COBALT</option>
+                <option value="eclipse" >ECLIPSE</option>
+                <option value="rubyblue" >RUBYBLUE</option>
+                <option value="lesser-dark" >LESSER-DARK</option>
+                <option value="xq-dark" >XQ-DARK</option>
+            </select>
+        </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 a381ae2a..0625dad9 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
@@ -45,24 +45,32 @@ var CodeEditorViewOptions = exports.CodeEditorViewOptions = Montage.create(Compo
                 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);
+                this.themeSelect.addEventListener("change", this.handleThemeSelection.bind(this), false);
             }
         },
 
         handleFormat:{
-            value: function(){
+            value: function(evt){
                 this.application.ninja.codeEditorController.autoFormatSelection();
             }
         },
         handleComment:{
-            value: function(){
+            value: function(evt){
                 this.application.ninja.codeEditorController.commentSelection(true);
             }
         },
 
         handleUncomment:{
-            value: function(){
+            value: function(evt){
                 this.application.ninja.codeEditorController.commentSelection(false);
             }
+        },
+
+        handleThemeSelection:{
+            value: function(evt){
+                var theme = this.themeSelect.options[this.themeSelect.selectedIndex].value;
+                this.application.ninja.codeEditorController.handleThemeSelection(theme);
+            }
         }
 
 });
\ No newline at end of file
diff --git a/js/controllers/code-editor-controller.js b/js/controllers/code-editor-controller.js
index 52eb47eb..cf0503a0 100644
--- a/js/controllers/code-editor-controller.js
+++ b/js/controllers/code-editor-controller.js
@@ -49,9 +49,13 @@ var CodeEditorController = exports.CodeEditorController = Montage.create(Compone
     editorFont:{
         get: function(){return this._editorFont;},
         set: function(value){//gets a zoom %
+            var codeLineElems = null, i=0;
             this._editorFont = (value/100) * CodeEditorController.originalEditorFont;
             //set the font size
-            document.getElementsByClassName("codeViewContainer")[0].style.fontSize = ""+this._editorFont+"px";
+            codeLineElems = document.getElementsByClassName("CodeMirror-lines");
+            for(i=0;i<codeLineElems.length;i++){
+                codeLineElems[i].style.fontSize = ""+this._editorFont+"px";
+            }
         }
     },
 
@@ -182,6 +186,12 @@ var CodeEditorController = exports.CodeEditorController = Montage.create(Compone
             var range = this.getSelectedRange(this.application.ninja.documentController.activeDocument.editor);
             this.application.ninja.documentController.activeDocument.editor.commentRange(isComment, range.from, range.to);
         }
+    },
+
+    handleThemeSelection:{
+        value: function(theme){
+            this.application.ninja.documentController.activeDocument.editor.setOption("theme", theme);
+        }
     }
 
 });
\ No newline at end of file