4 files changed, 42 insertions, 9 deletions

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 e2632d35..5ad36db5 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
@@ -51,10 +51,18 @@ exports.CodeEditorViewOptions = Montage.create(Component, {
 
             this._currentDocument = value;
 
-            if(!value || (this._currentDocument.currentView === "design") || ((this._currentDocument.model.views.design !== null))) {
+            if(!value || (this._currentDocument.currentView === "design")) {
                 this.visible = false;
-            } else {
-                this.visible = true;
+            } else if(this._currentDocument.currentView === "code") {
+
+                if(this._currentDocument.model.views.design){//code view of design document
+                    this.application.ninja.editorViewOptions.visible = false;
+                    this.application.ninja.documentBar.codeEditorControls.visible = true;
+                }else if(!this._currentDocument.model.views.design){//code view for text document
+                    this.application.ninja.editorViewOptions.visible = true;
+                    this.application.ninja.documentBar.codeEditorControls.visible = false;
+                }
+
                 this.autocomplete = !this.codeCompletionSupport[this._currentDocument.model.file.extension];
                 this._currentDocument.model.views.code.editor.automaticCodeHint = this.codeCompleteCheck.checked;
             }
@@ -200,6 +208,11 @@ exports.CodeEditorViewOptions = Montage.create(Component, {
             } else {
                 this.autoCompleteLabel.classList.remove("disabled");
             }
+
+            //hide the zoom hottext if it is code view of a design file
+            if (this._currentDocument && this._currentDocument.model && this._currentDocument.model.views.design){
+                this.zoomHottext.element.style.display = "none";
+            }
         }
     },
 
diff --git a/js/components/layout/document-bar.reel/document-bar.html b/js/components/layout/document-bar.reel/document-bar.html
index 3e3ac936..fb505a7c 100755
--- a/js/components/layout/document-bar.reel/document-bar.html
+++ b/js/components/layout/document-bar.reel/document-bar.html
@@ -77,6 +77,13 @@ POSSIBILITY OF SUCH DAMAGE.
                         "label": "Preview"
                     }
                 },
+
+                "codeEditorControls":{
+                    "prototype": "js/code-editor/ui/code-editor-view-options.reel",
+                    "properties": {
+                        "element": {"#": "codeViewOptions"}
+                    }
+                },
     
                 "owner": {
                     "prototype": "js/components/layout/document-bar.reel",
@@ -85,7 +92,8 @@ POSSIBILITY OF SUCH DAMAGE.
                         "zoomControl": {"@": "hottext1"},
                         "btnDesign": {"#": "buttonDesign"},
                         "btnCode": {"#": "buttonCode"},
-                        "btnPreview": {"#": "buttonPreview"}
+                        "btnPreview": {"#": "buttonPreview"},
+                        "codeEditorControls": {"@": "codeEditorControls"}
                     }
                 }
             }
@@ -129,7 +137,11 @@ POSSIBILITY OF SUCH DAMAGE.
 
             </section>
         
-            <div data-montage-id="disabledCondition" class="panelDisabled"></div>
+            <div data-montage-id="disabledCondition" class="panelDisabled">
+
+            </div>
+
+            <div data-montage-id="codeViewOptions" class="viewOptions"></div>
         
         </div>
         
diff --git a/js/document/models/base.js b/js/document/models/base.js
index c44123c3..a73b8b20 100755
--- a/js/document/models/base.js
+++ b/js/document/models/base.js
@@ -236,6 +236,8 @@ exports.BaseDocumentModel = Montage.create(Component, {
     //
     save: {
         value: function (callback, libCopyCallback) {
+            var self = this;
+
             //TODO: Implement on demand logic
             if (this.needsSave) {
                 //Save
@@ -270,6 +272,15 @@ exports.BaseDocumentModel = Montage.create(Component, {
                 }
             } else if (this.currentView === this.views.code) {
                 //TODO: Add save logic for code view
+                //save to textarea
+                self.views.code.editor.save();
+                //save to disk
+                this.application.ninja.ioMediator.fileSave({
+                    mode: 'html-text',
+                    file: self.file,
+                    content:self.views.code.textArea.value
+                }, this.handleSaved.bind({callback: callback, model: this}));
+
             } else {
                 //TODO: Error handle
             }
diff --git a/js/document/views/design-code.js b/js/document/views/design-code.js
index 44d12549..8ad6d555 100644
--- a/js/document/views/design-code.js
+++ b/js/document/views/design-code.js
@@ -70,10 +70,7 @@ exports.DesignCodeView = Montage.create(CodeDocumentView, {
     //
     show: {
         value: function (callback) {
-
-            this.textViewContainer.style.display = "block";
-            this.textViewContainer.style.background = "white";
-            this.textViewContainer.style.height = "100%";
+            this.textViewContainer.setAttribute("class", "codeViewContainer cm-s-default");
 
             //todo : update options bar