18 files changed, 599 insertions, 159 deletions
diff --git a/js/code-editor/code-editor-wrapper.js b/js/code-editor/code-editor-wrapper.js
index 57fe4d3a..65f42db2 100644
--- a/js/code-editor/code-editor-wrapper.js
+++ b/js/code-editor/code-editor-wrapper.js
@@ -131,6 +131,12 @@ exports.CodeEditorWrapper = Montage.create(Component, {
                this.application.ninja.editorViewOptions.codeEditorWrapper = this;
            }
+            //TODO:add codeEditorWrapper
+            if(!this.application.ninja.documentBar.codeEditorWrapper){
+                this.application.ninja.documentBar.codeEditorWrapper = this;
+            }
            editorOptions = {
                               lineNumbers: true,
                               matchBrackets:true,
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 476db181..e6cc3763 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
@@ -80,7 +80,7 @@ POSSIBILITY OF SUCH DAMAGE.
 <body>
 <div data-montage-id="viewOptions" class="viewOptions">
    <div>
-        <input class="zoomFont" data-montage-id="zoomFont"/>
+        <input class="zoomFont" data-montage-id="zoomFont" style="display:none;"/>
        <div class="autoCodeComplete" >
            <input type="checkbox" data-montage-id="codeComplete" />
            <label data-montage-id="autoCompleteLabel">Auto Code Hints</label>
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 9344d34c..2ca6118b 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,14 +51,31 @@ exports.CodeEditorViewOptions = Montage.create(Component, {
            this._currentDocument = value;
-            if(!value || this._currentDocument.currentView === "design") {
+            if(!value || (this._currentDocument.currentView === "design")) {
                this.visible = false;
-            } else {
+            } else if(this._currentDocument && this._currentDocument.currentView === "code") {
-                this.visible = true;
+                if(this._currentDocument.model.views.design){//code view of design document
+                    this.application.ninja.editorViewOptions.visible = false;
+                    //this.application.ninja.documentBar.codeEditorControls.visible = false;//todo
+                }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;
            }
+            if(this._currentDocument && (this._currentDocument.currentView === "design")) {
+                this._currentDocument.addPropertyChangeListener("model.currentViewIdentifier", this, false);
+            }
+            //hide the zoom hottext if it is code view of a design file
+            if (this._currentDocument && this._currentDocument.model && this._currentDocument.model.views.code){
+                this.zoomHottext.element.style.display = "block";
+            }
        }
    },
@@ -209,6 +226,18 @@ exports.CodeEditorViewOptions = Montage.create(Component, {
        }
    },
+    handleChange: {
+        value: function(notification) {
+            if(notification.currentPropertyPath === "model.currentViewIdentifier") {
+                if(this.currentDocument.model.currentView.identifier === "design-code") {
+                    //this.application.ninja.documentBar.codeEditorControls.visible = false;//todo
+                } else {
+                    //this.application.ninja.documentBar.codeEditorControls.visible = false;
+                }
+            }
+        }
+    },
    handleFormat:{
        value: function(evt){
            var range = this.getSelectedRange(this.currentDocument.model.views.code.editor);
diff --git a/js/components/layout/document-bar.reel/document-bar.html b/js/components/layout/document-bar.reel/document-bar.html
index 9e5e4eb2..f073b0e7 100755
--- a/js/components/layout/document-bar.reel/document-bar.html
+++ b/js/components/layout/document-bar.reel/document-bar.html
@@ -75,20 +75,18 @@ POSSIBILITY OF SUCH DAMAGE.
                        "element": {"#": "previewButton"},
                        "identifier": "preview",
                        "label": "Preview"
-                    },
+                    }
-                    "listeners": [
-                        {
-                            "type": "action",
-                            "listener": {"@": "owner"}
-                        }
-                    ]
                },
    
                "owner": {
                    "prototype": "js/components/layout/document-bar.reel",
                    "properties": {
                        "element": {"#": "documentBar"},
-                        "zoomControl": {"@": "hottext1"}
+                        "zoomControl": {"@": "hottext1"},
+                        "btnDesign": {"#": "buttonDesign"},
+                        "btnCode": {"#": "buttonCode"},
+                        "btnPreview": {"#": "buttonPreview"}
                    }
                }
            }
@@ -108,7 +106,7 @@ POSSIBILITY OF SUCH DAMAGE.
                
            </section>
            
-            <section>
+            <section data-montage-id="buttonDesign">
                
                <div class="viewicon viewdesign"></div>
                
@@ -116,7 +114,7 @@ POSSIBILITY OF SUCH DAMAGE.
                
            </section>
            
-            <section class="inactive">
+            <section data-montage-id="buttonCode">
                
                <div class="viewicon viewcode"></div>
                
@@ -124,7 +122,7 @@ POSSIBILITY OF SUCH DAMAGE.
                
            </section>
-            <section class="inactive">
+            <section data-montage-id="buttonPreview" class="inactive">
                <div class="viewicon viewPreview"></div>
@@ -132,7 +130,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/code-editor/code-editor-wrapper.js b/js/code-editor/code-editor-wrapper.js index 57fe4d3a..65f42db2 100644 --- a/js/code-editor/code-editor-wrapper.js +++ b/js/code-editor/code-editor-wrapper.js
@@ -131,6 +131,12 @@ exports.CodeEditorWrapper = Montage.create(Component, {
131	this.application.ninja.editorViewOptions.codeEditorWrapper = this;	131	this.application.ninja.editorViewOptions.codeEditorWrapper = this;
132	}	132	}
133		133
		134	//TODO:add codeEditorWrapper
		135	if(!this.application.ninja.documentBar.codeEditorWrapper){
		136	this.application.ninja.documentBar.codeEditorWrapper = this;
		137	}
		138
		139
134	editorOptions = {	140	editorOptions = {
135	lineNumbers: true,	141	lineNumbers: true,
136	matchBrackets:true,	142	matchBrackets:true,


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 476db181..e6cc3763 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
@@ -80,7 +80,7 @@ POSSIBILITY OF SUCH DAMAGE.
80	<body>	80	<body>
81	<div data-montage-id="viewOptions" class="viewOptions">	81	<div data-montage-id="viewOptions" class="viewOptions">
82	<div>	82	<div>
83	<input class="zoomFont" data-montage-id="zoomFont"/>	83	<input class="zoomFont" data-montage-id="zoomFont" style="display:none;"/>
84	<div class="autoCodeComplete" >	84	<div class="autoCodeComplete" >
85	<input type="checkbox" data-montage-id="codeComplete" />	85	<input type="checkbox" data-montage-id="codeComplete" />
86	<label data-montage-id="autoCompleteLabel">Auto Code Hints</label>	86	<label data-montage-id="autoCompleteLabel">Auto Code Hints</label>


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 9344d34c..2ca6118b 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,14 +51,31 @@ exports.CodeEditorViewOptions = Montage.create(Component, {
51		51
52	this._currentDocument = value;	52	this._currentDocument = value;
53		53
54	if(!value \|\| this._currentDocument.currentView === "design") {	54	if(!value \|\| (this._currentDocument.currentView === "design")) {
55	this.visible = false;	55	this.visible = false;
56	} else {	56	} else if(this._currentDocument && this._currentDocument.currentView === "code") {
57	this.visible = true;	57
		58	if(this._currentDocument.model.views.design){//code view of design document
		59	this.application.ninja.editorViewOptions.visible = false;
		60	//this.application.ninja.documentBar.codeEditorControls.visible = false;//todo
		61	}else if(!this._currentDocument.model.views.design){//code view for text document
		62	this.application.ninja.editorViewOptions.visible = true;
		63	//this.application.ninja.documentBar.codeEditorControls.visible = false;
		64	}
		65
58	this.autocomplete = !this.codeCompletionSupport[this._currentDocument.model.file.extension];	66	this.autocomplete = !this.codeCompletionSupport[this._currentDocument.model.file.extension];
59	this._currentDocument.model.views.code.editor.automaticCodeHint = this.codeCompleteCheck.checked;	67	this._currentDocument.model.views.code.editor.automaticCodeHint = this.codeCompleteCheck.checked;
60	}	68	}
61		69
		70	if(this._currentDocument && (this._currentDocument.currentView === "design")) {
		71	this._currentDocument.addPropertyChangeListener("model.currentViewIdentifier", this, false);
		72	}
		73
		74	//hide the zoom hottext if it is code view of a design file
		75	if (this._currentDocument && this._currentDocument.model && this._currentDocument.model.views.code){
		76	this.zoomHottext.element.style.display = "block";
		77	}
		78
62	}	79	}
63	},	80	},
64		81
@@ -209,6 +226,18 @@ exports.CodeEditorViewOptions = Montage.create(Component, {
209	}	226	}
210	},	227	},
211		228
		229	handleChange: {
		230	value: function(notification) {
		231	if(notification.currentPropertyPath === "model.currentViewIdentifier") {
		232	if(this.currentDocument.model.currentView.identifier === "design-code") {
		233	//this.application.ninja.documentBar.codeEditorControls.visible = false;//todo
		234	} else {
		235	//this.application.ninja.documentBar.codeEditorControls.visible = false;
		236	}
		237	}
		238	}
		239	},
		240
212	handleFormat:{	241	handleFormat:{
213	value: function(evt){	242	value: function(evt){
214	var range = this.getSelectedRange(this.currentDocument.model.views.code.editor);	243	var range = this.getSelectedRange(this.currentDocument.model.views.code.editor);


diff --git a/js/components/layout/document-bar.reel/document-bar.html b/js/components/layout/document-bar.reel/document-bar.html index 9e5e4eb2..f073b0e7 100755 --- a/js/components/layout/document-bar.reel/document-bar.html +++ b/js/components/layout/document-bar.reel/document-bar.html
@@ -75,20 +75,18 @@ POSSIBILITY OF SUCH DAMAGE.
75	"element": {"#": "previewButton"},	75	"element": {"#": "previewButton"},
76	"identifier": "preview",	76	"identifier": "preview",
77	"label": "Preview"	77	"label": "Preview"
78	},	78	}
79	"listeners": [
80	{
81	"type": "action",
82	"listener": {"@": "owner"}
83	}
84	]
85	},	79	},
		80
86		81
87	"owner": {	82	"owner": {
88	"prototype": "js/components/layout/document-bar.reel",	83	"prototype": "js/components/layout/document-bar.reel",
89	"properties": {	84	"properties": {
90	"element": {"#": "documentBar"},	85	"element": {"#": "documentBar"},
91	"zoomControl": {"@": "hottext1"}	86	"zoomControl": {"@": "hottext1"},
		87	"btnDesign": {"#": "buttonDesign"},
		88	"btnCode": {"#": "buttonCode"},
		89	"btnPreview": {"#": "buttonPreview"}
92	}	90	}
93	}	91	}
94	}	92	}
@@ -108,7 +106,7 @@ POSSIBILITY OF SUCH DAMAGE.
108		106
109	</section>	107	</section>
110		108
111	<section>	109	<section data-montage-id="buttonDesign">
112		110
113	<div class="viewicon viewdesign"></div>	111	<div class="viewicon viewdesign"></div>
114		112
@@ -116,7 +114,7 @@ POSSIBILITY OF SUCH DAMAGE.
116		114
117	</section>	115	</section>
118		116
119	<section class="inactive">	117	<section data-montage-id="buttonCode">
120		118
121	<div class="viewicon viewcode"></div>	119	<div class="viewicon viewcode"></div>
122		120
@@ -124,7 +122,7 @@ POSSIBILITY OF SUCH DAMAGE.
124		122
125	</section>	123	</section>
126		124
127	<section class="inactive">	125	<section data-montage-id="buttonPreview" class="inactive">
128		126
129	<div class="viewicon viewPreview"></div>	127	<div class="viewicon viewPreview"></div>
130		128
@@ -132,7 +130,11 @@ POSSIBILITY OF SUCH DAMAGE.
132		130
133	</section>	131	</section>
134		132
135	<div data-montage-id="disabledCondition" class="panelDisabled"></div>	133	<div data-montage-id="disabledCondition" class="panelDisabled">
		134
		135	</div>
		136
		137	<div data-montage-id="codeViewOptions" class="viewOptions"></div>
136		138
137	</div>	139	</div>
138