CSS Panel - Updating components, created toolbar components, and small changes to styles controller

author: Eric Guzman 2012-03-02 10:55:51 -0800
committer: Eric Guzman 2012-03-02 10:55:51 -0800
commit: 1433f2bdf2e5b8c5c18fed5e9c17fd983ab3606d (patch)
tree: 885ed3352f89e124bca7261d7c0edd4c95d3fff5
parent: 53bdb1e7773069c4cca59e88d6da91cd0f58c94a (diff)
download: ninja-1433f2bdf2e5b8c5c18fed5e9c17fd983ab3606d.tar.gz
24 files changed, 825 insertions, 71 deletions
diff --git a/js/components/toolbar.reel/toolbar.css b/js/components/toolbar.reel/toolbar.css
new file mode 100644
index 00000000..1ffae912
--- /dev/null
+++ b/js/components/toolbar.reel/toolbar.css
@@ -0,0 +1,14 @@
+/* <copyright>
+ This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+ (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+ </copyright> */
+.toolbar-container {
+    background-color: #474747;
+    border-bottom: 1px solid #333;
+    border-top: 1px solid #505050;
+    box-shadow:  0 4px 8px 0px rgba(0,0,0,0.75);
+    height: 22px;
+    width: 100%;
+    -webkit-box-flex: 0;
+}
+\ No newline at end of file
diff --git a/js/components/toolbar.reel/toolbar.html b/js/components/toolbar.reel/toolbar.html
new file mode 100644
index 00000000..8ccce126
--- /dev/null
+++ b/js/components/toolbar.reel/toolbar.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<!-- <copyright>
+This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+(c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+</copyright> -->
+<html lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <link href="toolbar.css" rel="stylesheet" type="text/css">
+    <script type="text/montage-serialization">
+        {
+            "owner": {
+                "module" : "js/panels/css-panel/style-sheet.reel",
+                "name" : "StyleSheet",
+                "properties" : {
+                    "element" : {"#" : "toolbar-container"}
+                }
+            },
+            "button": {
+                "module": "js/components/button.reel",
+                "name": "Button",
+                "properties": {
+                }
+            }
+        }
+    </script>
+</head>
+<body>
+<div id="toolbar-container" class="toolbar-container">
+</div>
+</body>
+</html>
+\ No newline at end of file
diff --git a/js/components/toolbar.reel/toolbar.js b/js/components/toolbar.reel/toolbar.js
new file mode 100644
index 00000000..79e7ff1f
--- /dev/null
+++ b/js/components/toolbar.reel/toolbar.js
@@ -0,0 +1,27 @@
+/* <copyright>
+ This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+ (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+ </copyright> */
+var Montage = require("montage/core/core").Montage,
+    Component = require("montage/ui/component").Component;
+exports.Toolbar = Montage.create(Component, {
+    deserializedFromTemplate : {
+        value: function() {
+            console.log("toolbar - deserialized");
+        }
+    },
+    prepareForDraw : {
+        value: function() {
+            console.log("toolbar - prepare for draw");
+        }
+    },
+    draw : {
+        value: function() {
+            console.log("toolbar - draw");
+        }
+    }
+});
+\ No newline at end of file
diff --git a/js/controllers/styles-controller.js b/js/controllers/styles-controller.js
index 33084169..d36c8cb9 100755
--- a/js/controllers/styles-controller.js
+++ b/js/controllers/styles-controller.js
@@ -190,6 +190,7 @@ var stylesController = exports.StylesController = Montage.create(Component, {
            ///// attach specificity to rule object
            ///// if rule is css keyframes, return rule and don't attach specificity
            if (rule instanceof WebKitCSSKeyframesRule) {
                return rule;
            }
            rule[this.CONST.SPECIFICITY_KEY] = this.getSpecificity(rule.selectorText);
@@ -1184,6 +1185,8 @@ var stylesController = exports.StylesController = Montage.create(Component, {
            this.styleSheetModified(sheet);
+            NJevent('newStyleSheet', sheet);
            return sheet;
        }
    },
@@ -1243,11 +1246,16 @@ var stylesController = exports.StylesController = Montage.create(Component, {
    clearDirtyStyleSheets : {
        value: function(doc) {
-            if(!doc) {
+            this.dirtyStyleSheets.length = 0;
+            if(doc) {
                this.dirtyStyleSheets = null;
-                this.dirtyStyleSheets = [];
+                this.dirtyStyleSheets = this.dirtyStyleSheets.filter(function(sheet) {
+                    return sheet.document !== doc;
+                });
            }
        }
    },
diff --git a/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.js b/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.js
index 003724bb..54320eef 100755
--- a/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.js
+++ b/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.js
@@ -16,6 +16,7 @@ var ComponentsPanel = require("js/panels/Components/ComponentsPanel").Components
 var ProjectPanel    = require("js/panels/Project/ProjectPanel").ProjectPanel;
 var MaterialsPanel  = require("js/panels/Materials/MaterialsPanel").MaterialsPanel;
 var PresetsPanel    = require("js/panels/presets/presets-panel").PresetsPanel;
+var CSSPanelNew    = require("js/panels/css-panel/css-panel-container").CSSPanelContainer;
 exports.PanelContainer = Montage.create(Component, {
    lastOffset: {
@@ -45,7 +46,7 @@ exports.PanelContainer = Montage.create(Component, {
    },
    initPanelOrder: {
-        value: ['ColorPanel', 'PropertiesPanel','ComponentsPanel','ProjectPanel','CSSPanel','MaterialsPanel','PresetsPanel']
+        value: ['CSSPanelNew','PropertiesPanel','ColorPanel','ComponentsPanel','ProjectPanel','CSSPanel','MaterialsPanel','PresetsPanel']
    },
    panelOrder: {
@@ -106,6 +107,7 @@ exports.PanelContainer = Montage.create(Component, {
            this.addEventListener("change@appModel.CSSPanel", this, false);
            this.addEventListener("change@appModel.MaterialsPanel", this, false);
            this.addEventListener("change@appModel.PresetsPanel", this, false);
+            this.addEventListener("change@appModel.CSSPanelNew", this, false);
        }
    },
diff --git a/js/panels/css-panel/css-panel-container.js b/js/panels/css-panel/css-panel-container.js
index aeaa2d13..6110c999 100644
--- a/js/panels/css-panel/css-panel-container.js
+++ b/js/panels/css-panel/css-panel-container.js
@@ -9,7 +9,7 @@ var PanelBase = require("js/panels/PanelBase").PanelBase;
 var Content = require("js/panels/css-panel/css-panel.reel").CSSPanelNew;
 exports.CSSPanelContainer = Montage.create(PanelBase, {
-    panelName : { value: "CSSPanelNew" },
+    panelName : { value: "CSS Panel" },
    minHeight : { value: 200 },
    content : { value: Content }
 });
 \ No newline at end of file
diff --git a/js/panels/css-panel/css-panel.reel/css-panel.css b/js/panels/css-panel/css-panel.reel/css-panel.css
index e69de29b..6d296a8e 100644
--- a/js/panels/css-panel/css-panel.reel/css-panel.css
+++ b/js/panels/css-panel/css-panel.reel/css-panel.css
@@ -0,0 +1,49 @@
+/* <copyright>
+ This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
author	Eric Guzman	2012-03-02 10:55:51 -0800
committer	Eric Guzman	2012-03-02 10:55:51 -0800
commit	1433f2bdf2e5b8c5c18fed5e9c17fd983ab3606d (patch)
tree	885ed3352f89e124bca7261d7c0edd4c95d3fff5
parent	53bdb1e7773069c4cca59e88d6da91cd0f58c94a (diff)
download	ninja-1433f2bdf2e5b8c5c18fed5e9c17fd983ab3606d.tar.gz

diff --git a/js/components/toolbar.reel/toolbar.css b/js/components/toolbar.reel/toolbar.css new file mode 100644 index 00000000..1ffae912 --- /dev/null +++ b/js/components/toolbar.reel/toolbar.css
@@ -0,0 +1,14 @@
		1	/* <copyright>
		2	This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
		3	No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
		4	(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
		5	</copyright> */
		6	.toolbar-container {
		7	background-color: #474747;
		8	border-bottom: 1px solid #333;
		9	border-top: 1px solid #505050;
		10	box-shadow: 0 4px 8px 0px rgba(0,0,0,0.75);
		11	height: 22px;
		12	width: 100%;
		13	-webkit-box-flex: 0;
		14	} \ No newline at end of file


diff --git a/js/components/toolbar.reel/toolbar.html b/js/components/toolbar.reel/toolbar.html new file mode 100644 index 00000000..8ccce126 --- /dev/null +++ b/js/components/toolbar.reel/toolbar.html
@@ -0,0 +1,34 @@
		1	<!DOCTYPE html>
		2	<!-- <copyright>
		3	This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
		4	No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
		5	(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
		6	</copyright> -->
		7	<html lang="en">
		8	<head>
		9	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		10	<link href="toolbar.css" rel="stylesheet" type="text/css">
		11	<script type="text/montage-serialization">
		12	{
		13	"owner": {
		14	"module" : "js/panels/css-panel/style-sheet.reel",
		15	"name" : "StyleSheet",
		16	"properties" : {
		17	"element" : {"#" : "toolbar-container"}
		18	}
		19	},
		20	"button": {
		21	"module": "js/components/button.reel",
		22	"name": "Button",
		23	"properties": {
		24
		25	}
		26	}
		27	}
		28	</script>
		29	</head>
		30	<body>
		31	<div id="toolbar-container" class="toolbar-container">
		32	</div>
		33	</body>
		34	</html> \ No newline at end of file


diff --git a/js/components/toolbar.reel/toolbar.js b/js/components/toolbar.reel/toolbar.js new file mode 100644 index 00000000..79e7ff1f --- /dev/null +++ b/js/components/toolbar.reel/toolbar.js
@@ -0,0 +1,27 @@
		1	/* <copyright>
		2	This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
		3	No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
		4	(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
		5	</copyright> */
		6
		7	var Montage = require("montage/core/core").Montage,
		8	Component = require("montage/ui/component").Component;
		9
		10	exports.Toolbar = Montage.create(Component, {
		11
		12	deserializedFromTemplate : {
		13	value: function() {
		14	console.log("toolbar - deserialized");
		15	}
		16	},
		17	prepareForDraw : {
		18	value: function() {
		19	console.log("toolbar - prepare for draw");
		20	}
		21	},
		22	draw : {
		23	value: function() {
		24	console.log("toolbar - draw");
		25	}
		26	}
		27	}); \ No newline at end of file


diff --git a/js/controllers/styles-controller.js b/js/controllers/styles-controller.js index 33084169..d36c8cb9 100755 --- a/js/controllers/styles-controller.js +++ b/js/controllers/styles-controller.js
@@ -190,6 +190,7 @@ var stylesController = exports.StylesController = Montage.create(Component, {
190	///// attach specificity to rule object	190	///// attach specificity to rule object
191	///// if rule is css keyframes, return rule and don't attach specificity	191	///// if rule is css keyframes, return rule and don't attach specificity
192	if (rule instanceof WebKitCSSKeyframesRule) {	192	if (rule instanceof WebKitCSSKeyframesRule) {
		193
193	return rule;	194	return rule;
194	}	195	}
195	rule[this.CONST.SPECIFICITY_KEY] = this.getSpecificity(rule.selectorText);	196	rule[this.CONST.SPECIFICITY_KEY] = this.getSpecificity(rule.selectorText);
@@ -1184,6 +1185,8 @@ var stylesController = exports.StylesController = Montage.create(Component, {
1184		1185
1185	this.styleSheetModified(sheet);	1186	this.styleSheetModified(sheet);
1186		1187
		1188	NJevent('newStyleSheet', sheet);
		1189
1187	return sheet;	1190	return sheet;
1188	}	1191	}
1189	},	1192	},
@@ -1243,11 +1246,16 @@ var stylesController = exports.StylesController = Montage.create(Component, {
1243		1246
1244	clearDirtyStyleSheets : {	1247	clearDirtyStyleSheets : {
1245	value: function(doc) {	1248	value: function(doc) {
1246	if(!doc) {	1249	this.dirtyStyleSheets.length = 0;
		1250
		1251	if(doc) {
1247	this.dirtyStyleSheets = null;	1252	this.dirtyStyleSheets = null;
1248	this.dirtyStyleSheets = [];	1253	this.dirtyStyleSheets = this.dirtyStyleSheets.filter(function(sheet) {
		1254	return sheet.document !== doc;
		1255	});
1249	}	1256	}
1250		1257
		1258
1251	}	1259	}
1252	},	1260	},
1253		1261


diff --git a/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.js b/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.js index 003724bb..54320eef 100755 --- a/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.js +++ b/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.js
@@ -16,6 +16,7 @@ var ComponentsPanel = require("js/panels/Components/ComponentsPanel").Components
16	var ProjectPanel = require("js/panels/Project/ProjectPanel").ProjectPanel;	16	var ProjectPanel = require("js/panels/Project/ProjectPanel").ProjectPanel;
17	var MaterialsPanel = require("js/panels/Materials/MaterialsPanel").MaterialsPanel;	17	var MaterialsPanel = require("js/panels/Materials/MaterialsPanel").MaterialsPanel;
18	var PresetsPanel = require("js/panels/presets/presets-panel").PresetsPanel;	18	var PresetsPanel = require("js/panels/presets/presets-panel").PresetsPanel;
		19	var CSSPanelNew = require("js/panels/css-panel/css-panel-container").CSSPanelContainer;
19		20
20	exports.PanelContainer = Montage.create(Component, {	21	exports.PanelContainer = Montage.create(Component, {
21	lastOffset: {	22	lastOffset: {
@@ -45,7 +46,7 @@ exports.PanelContainer = Montage.create(Component, {
45	},	46	},
46		47
47	initPanelOrder: {	48	initPanelOrder: {
48	value: ['ColorPanel', 'PropertiesPanel','ComponentsPanel','ProjectPanel','CSSPanel','MaterialsPanel','PresetsPanel']	49	value: ['CSSPanelNew','PropertiesPanel','ColorPanel','ComponentsPanel','ProjectPanel','CSSPanel','MaterialsPanel','PresetsPanel']
49	},	50	},
50		51
51	panelOrder: {	52	panelOrder: {
@@ -106,6 +107,7 @@ exports.PanelContainer = Montage.create(Component, {
106	this.addEventListener("change@appModel.CSSPanel", this, false);	107	this.addEventListener("change@appModel.CSSPanel", this, false);
107	this.addEventListener("change@appModel.MaterialsPanel", this, false);	108	this.addEventListener("change@appModel.MaterialsPanel", this, false);
108	this.addEventListener("change@appModel.PresetsPanel", this, false);	109	this.addEventListener("change@appModel.PresetsPanel", this, false);
		110	this.addEventListener("change@appModel.CSSPanelNew", this, false);
109	}	111	}
110	},	112	},
111		113


diff --git a/js/panels/css-panel/css-panel-container.js b/js/panels/css-panel/css-panel-container.js index aeaa2d13..6110c999 100644 --- a/js/panels/css-panel/css-panel-container.js +++ b/js/panels/css-panel/css-panel-container.js
@@ -9,7 +9,7 @@ var PanelBase = require("js/panels/PanelBase").PanelBase;
9	var Content = require("js/panels/css-panel/css-panel.reel").CSSPanelNew;	9	var Content = require("js/panels/css-panel/css-panel.reel").CSSPanelNew;
10		10
11	exports.CSSPanelContainer = Montage.create(PanelBase, {	11	exports.CSSPanelContainer = Montage.create(PanelBase, {
12	panelName : { value: "CSSPanelNew" },	12	panelName : { value: "CSS Panel" },
13	minHeight : { value: 200 },	13	minHeight : { value: 200 },
14	content : { value: Content }	14	content : { value: Content }
15	}); \ No newline at end of file	15	}); \ No newline at end of file


diff --git a/js/panels/css-panel/css-panel.reel/css-panel.css b/js/panels/css-panel/css-panel.reel/css-panel.css index e69de29b..6d296a8e 100644 --- a/js/panels/css-panel/css-panel.reel/css-panel.css +++ b/js/panels/css-panel/css-panel.reel/css-panel.css
@@ -0,0 +1,49 @@
		1	/* <copyright>
		2	This file contains proprietary software owned by Motorola Mobility, Inc.<br/>