- collapse panels for code view, restore for design view

- apply theme selection to all code view documents

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

8 files changed, 76 insertions, 11 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 91054fb9..79468768 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
@@ -20,10 +20,12 @@
 .viewOptions .format{
     float:left;
     margin-left:5px;
+    height: 20px;
 }
 
 .viewOptions .themeOptions{
     float: right;
+    margin-right:5px;
 }
 
 .viewOptions .themeOptions select{
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 4a6cfa59..31e96adf 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
@@ -60,7 +60,7 @@
             <button id="uncomment" value="uncomment" class="nj-skinned format">uncomment</button>
         </div>
         <div class="themeOptions">
-            <span>Theme</span>
+            <span>Theme :</span>
             <select id="themeSelect">
                 <option value="default" selected="">DEFAULT</option>
                 <option value="night">NIGHT</option>
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 0625dad9..237be46c 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
@@ -68,8 +68,8 @@ var CodeEditorViewOptions = exports.CodeEditorViewOptions = Montage.create(Compo
 
         handleThemeSelection:{
             value: function(evt){
-                var theme = this.themeSelect.options[this.themeSelect.selectedIndex].value;
-                this.application.ninja.codeEditorController.handleThemeSelection(theme);
+                this.application.ninja.codeEditorController.editorTheme = this.themeSelect.options[this.themeSelect.selectedIndex].value;
+                this.application.ninja.codeEditorController.handleThemeSelection();
             }
         }
 
diff --git a/js/controllers/code-editor-controller.js b/js/controllers/code-editor-controller.js
index cf0503a0..2302730c 100644
--- a/js/controllers/code-editor-controller.js
+++ b/js/controllers/code-editor-controller.js
@@ -33,9 +33,16 @@ var CodeEditorController = exports.CodeEditorController = Montage.create(Compone
 
     automaticCodeComplete:{
         get: function(){return this._automaticCodeComplete;},
-        set: function(value){
-            //console.log("$$$ automaticCodeComplete setter : "+value);
-            this._automaticCodeComplete = value;}
+        set: function(value){this._automaticCodeComplete = value;}
+    },
+
+    _editorTheme: {
+        value:"default"
+    },
+
+    editorTheme:{
+        get: function(){return this._editorTheme;},
+        set: function(value){this._editorTheme = value;}
     },
 
     originalEditorFont:{
@@ -189,9 +196,8 @@ var CodeEditorController = exports.CodeEditorController = Montage.create(Compone
     },
 
     handleThemeSelection:{
-        value: function(theme){
-            this.application.ninja.documentController.activeDocument.editor.setOption("theme", theme);
+        value: function(){
+            this.application.ninja.documentController.activeDocument.editor.setOption("theme", this.editorTheme);
         }
     }
-
 });
\ No newline at end of file
diff --git a/js/controllers/document-controller.js b/js/controllers/document-controller.js
index 079eb754..0d9b37ed 100755
--- a/js/controllers/document-controller.js
+++ b/js/controllers/document-controller.js
@@ -434,6 +434,7 @@ var DocumentController = exports.DocumentController = Montage.create(Component,
 //            appDelegateModule.MyAppDelegate.onSetActiveDocument();
 
             this.application.ninja.stage.stageView.showCodeViewBar(false);
+            this.application.ninja.stage.stageView.restoreAllPanels();
         }
     },
 
diff --git a/js/ninja.reel/ninja.html b/js/ninja.reel/ninja.html
index 8332e5f5..529dea30 100755
--- a/js/ninja.reel/ninja.html
+++ b/js/ninja.reel/ninja.html
@@ -395,7 +395,9 @@
                     "codeEditorController":   {"@": "codeEditorController"},
                     "rightPanelContainer":  {"#": "rightPanelContainer" },
                     "panelSplitter":     {"@": "splitter3"},
-                    "timelineSplitter":     {"@": "splitter4"}
+                    "timelineSplitter":     {"@": "splitter4"},
+                    "toolsSplitter":     {"@": "splitter2"},
+                    "optionsSplitter":     {"@": "splitter1"}
                 }
             }
         }
diff --git a/js/panels/Splitter.js b/js/panels/Splitter.js
index 98ebb36a..0640abb2 100755
--- a/js/panels/Splitter.js
+++ b/js/panels/Splitter.js
@@ -55,7 +55,6 @@ exports.Splitter = Montage.create(Component, {
         },
         set: function(value) {
             this._collapsed = value;
-
             this.application.localStorage.setItem(this.element.getAttribute("data-montage-id"), {"version": this.version, "value": value});
         }
     },
@@ -139,5 +138,39 @@ exports.Splitter = Montage.create(Component, {
         value: function() {
             this.handleClick();
         }
+    },
+
+    collapse:{
+        value: function() {
+            if (this.collapsed === false) {
+                if(this.panel.element) {
+                    this.panel.element.addEventListener("webkitTransitionEnd", this, false);
+                } else {
+                    this.panel.addEventListener("webkitTransitionEnd", this, false);
+                }
+                this._collapsed = true;
+                this.needsDraw = true;
+            }
+        }
+    },
+    restore:{
+        value: function() {
+            //Get splitter initial value from SettingManager
+            var storedData = this.application.localStorage.getItem(this.element.getAttribute("data-montage-id")), temp = this.collapsed;
+            if(storedData && this.element.getAttribute("data-montage-id") !== null) {
+                this._collapsed = storedData.value;
+
+            } else {
+                this._collapsed = false;
+            }
+            if(temp != this._collapsed){
+                if(this.panel.element) {
+                    this.panel.element.addEventListener("webkitTransitionEnd", this, false);
+                } else {
+                    this.panel.addEventListener("webkitTransitionEnd", this, false);
+                }
+                this.needsDraw = true;
+            }
+        }
     }
 });
diff --git a/js/stage/stage-view.reel/stage-view.js b/js/stage/stage-view.reel/stage-view.js
index c06ad988..bc8b469c 100755
--- a/js/stage/stage-view.reel/stage-view.js
+++ b/js/stage/stage-view.reel/stage-view.js
@@ -102,6 +102,7 @@ exports.StageView = Montage.create(Component, {
             this.application.ninja.documentController.activeDocument = doc;
             this.application.ninja.stage.hideCanvas(true);
             document.getElementById("iframeContainer").style.display="none";//hide the iframe when switching to code view
+            this.collapseAllPanels();
         }
     },
 
@@ -128,11 +129,14 @@ exports.StageView = Montage.create(Component, {
             //focus editor
             if(!!this.application.ninja.documentController.activeDocument && !!this.application.ninja.documentController.activeDocument.editor){
                 this.application.ninja.documentController.activeDocument.editor.focus();
+                this.application.ninja.codeEditorController.handleThemeSelection();
+                this.collapseAllPanels();
             }
 
             if(this.application.ninja.documentController.activeDocument.currentView === "design") {
                 this.application.ninja.stage._scrollFlag = true; // TODO HACK to prevent type error on Hide/Show Iframe
                 this.application.ninja.stage.stageDeps.reinitializeForSwitchDocument();//reinitialize draw-util, snapmanager and view-util
+                this.restoreAllPanels();
             }
 
             NJevent("switchDocument");
@@ -182,5 +186,22 @@ exports.StageView = Montage.create(Component, {
                 this.application.ninja.editorViewOptions.element.style.display = "none";
             }