Timeline: Create new PropertyTrack subcomponent, and use it in the TimelineTrack component.

Cherry pick commit from jreid/Timeline-jreid Signed-off-by: Jonathan Duran <jduran@motorola.com>
author: Jonathan Duran 2012-02-23 08:08:30 -0800
committer: Jonathan Duran 2012-02-23 08:08:30 -0800
commit: cf671b4855ecca0278128e82459691292a3d3dc9 (patch)
tree: 13a93345dc2427a0403c94ced3dfd5093d146310 /js/panels
parent: a712e134ea94b6a21061c1bd272ce15b1f95b986 (diff)
download: ninja-cf671b4855ecca0278128e82459691292a3d3dc9.tar.gz
9 files changed, 200 insertions, 30 deletions
diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.html b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.html
new file mode 100644
index 00000000..7781af11
--- /dev/null
+++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+        <head>
+        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+        <link rel="stylesheet" type="text/css" href="css/PropertyTrack.css">
+        <script type="text/montage-serialization">
+                    {
+                        "owner": {
+                            "module": "js/panels/Timeline/PropertyTrack.reel",
+                            "name": "PropertyTrack",
+                            "properties": {
+                                "element": {"#": "property-track"}
+                            }
+                        }
+                    }
+        </script>
+        </head>
+        <body>
+                <div id="property-track" class="timeline-track"></div>
+    </body>
+</html>
+\ No newline at end of file
diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js
new file mode 100644
index 00000000..1b0035cd
--- /dev/null
+++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js
@@ -0,0 +1,15 @@
+var Montage = require("montage/core/core").Montage;
+var Component = require("montage/ui/component").Component;
+var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
+    hasTemplate:{
+        value: true
+    },
+    prepareForDraw:{
+        value:function(){
+        }
+    }
+});
diff --git a/js/panels/Timeline/PropertyTrack.reel/css/PropertyTrack.css b/js/panels/Timeline/PropertyTrack.reel/css/PropertyTrack.css
new file mode 100644
index 00000000..9c27e705
--- /dev/null
+++ b/js/panels/Timeline/PropertyTrack.reel/css/PropertyTrack.css
@@ -0,0 +1,13 @@
+/* PropertyTrack.scss
+ * Main SCSS file for PropertyTrack component, compiled by SASS into the file css/PropertyTrack.css.
+ */
+/* line 13, ../scss/PropertyTrack.scss */
+.content-main .collapsible-content .timeline-track {
+  height: 20px;
+  border-bottom: 1px solid #505050;
+}
+/* line 19, ../scss/PropertyTrack.scss */
+.timeline-track .content-main {
+  background-color: #474747;
+}
diff --git a/js/panels/Timeline/PropertyTrack.reel/scss/PropertyTrack.scss b/js/panels/Timeline/PropertyTrack.reel/scss/PropertyTrack.scss
new file mode 100644
index 00000000..ef8e1ec2
--- /dev/null
+++ b/js/panels/Timeline/PropertyTrack.reel/scss/PropertyTrack.scss
@@ -0,0 +1,21 @@
+/* PropertyTrack.scss
+ * Main SCSS file for PropertyTrack component, compiled by SASS into the file css/PropertyTrack.css.
+ */
+ 
+// Import theme settings
+@import "../../../../../scss/imports/themes/default/colors";
+@import "../../../../../scss/imports/themes/default/mixins";
+// Import generic mixins and styles
+@import "../../../../../scss/imports/scss/mixins";
+.content-main .collapsible-content .timeline-track {
+        height: 20px;
+        border-bottom: 1px solid $color-menu-divider;
+ }
+.timeline-track .content-main {
+        background-color: $color-menu-bg;
+}
diff --git a/js/panels/Timeline/PropertyTrack.reel/scss/config.rb b/js/panels/Timeline/PropertyTrack.reel/scss/config.rb
new file mode 100644
index 00000000..e5a99b70
--- /dev/null
+++ b/js/panels/Timeline/PropertyTrack.reel/scss/config.rb
@@ -0,0 +1,9 @@
+# Require any additional compass plugins here.
+# Set this to the root of your project when deployed:
+http_path = "/"
+css_dir = "../css"
+sass_dir = ""
+images_dir = "../images/"
+javascripts_dir = "../js"
+# To enable relative paths to assets via compass helper functions. Uncomment:
+# relative_assets = true
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html
index 4808e4d8..cabd92c0 100644
--- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html
+++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html
@@ -91,7 +91,51 @@
                                   "oneway": false
                               }
                           }
-                   }
+                   },
+                   "positionTracksRepetition": {
+                       "module": "montage/ui/repetition.reel",
+                           "name": "Repetition",
+                           "properties": {
+                               "element": {"#": "content-position-tracks"},
+                               "isSelectionEnabled" : false
+                           },
+                           "bindings": {
+                               "objects": {
+                                   "boundObject": {"@": "owner"},
+                                   "boundObjectPropertyPath": "arrPositionTracks",
+                                   "oneway": false
+                               }
+                           }
+                   },
+                                        "positionPropertyTrack" : {
+                                                "module" : "js/panels/Timeline/PropertyTrack.reel",
+                                                "name" : "PropertyTrack",
+                                                "properties" : {
+                                                        "element":{"#": "position-track-base"}
+                                                }
+                                        },
+                   "transformTracksRepetition": {
+                       "module": "montage/ui/repetition.reel",
+                           "name": "Repetition",
+                           "properties": {
+                               "element": {"#": "content-transform-tracks"},
+                               "isSelectionEnabled" : false
+                           },
+                           "bindings": {
+                               "objects": {
+                                   "boundObject": {"@": "owner"},
+                                   "boundObjectPropertyPath": "arrTransformTracks",
+                                   "oneway": false
+                               }
+                           }
+                   },
+                                        "transformPropertyTrack" : {
+                                                "module" : "js/panels/Timeline/PropertyTrack.reel",
+                                                "name" : "PropertyTrack",
+                                                "properties" : {
+                                                        "element":{"#": "transform-track-base"}
+                                                }
+                                        }
                   
                   
               }
@@ -108,20 +152,14 @@
                <div class="label-position collapsible-label collapsible-collapsed">
                        
                </div>
-                <div class="content-position collapsible-content collapsible-collapsed">
+                <div class="content-position collapsible-content collapsible-collapsed" id="content-position-tracks">
-                        <div class="timeline-track"></div>
+                        <div id="position-track-base"></div>
-                        <div class="timeline-track"></div>
-                        <div class="timeline-track"></div>
                </div>
                <div class="label-transform collapsible-label collapsible-collapsed">
                        
                </div>
-                <div class="content-transform collapsible-content collapsible-collapsed">
+                <div class="content-transform collapsible-content collapsible-collapsed" id="content-transform-tracks">
-                        <div class="timeline-track"></div>
+                        <div id="transform-track-base"></div>
-                        <div class="timeline-track"></div>
-                        <div class="timeline-track"></div>
-                        <div class="timeline-track"></div>
-                        <div class="timeline-track"></div>
                </div>
                <div class="label-styles collapsible-label collapsible-collapsed">
                        
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
index 1c33a040..de2c75c7 100644
--- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
+++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
@@ -114,6 +114,71 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
                this.needsDraw = true;
        }
    },
+    
+    /* Position Property Tracks */
+    _arrPositionTracks : {
+        serializable:true,
+        enumerable:true,
+        value: []
+    },
author	Jonathan Duran	2012-02-23 08:08:30 -0800
committer	Jonathan Duran	2012-02-23 08:08:30 -0800
commit	cf671b4855ecca0278128e82459691292a3d3dc9 (patch)
tree	13a93345dc2427a0403c94ced3dfd5093d146310 /js/panels
parent	a712e134ea94b6a21061c1bd272ce15b1f95b986 (diff)
download	ninja-cf671b4855ecca0278128e82459691292a3d3dc9.tar.gz

diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.html b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.html new file mode 100644 index 00000000..7781af11 --- /dev/null +++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.html
@@ -0,0 +1,24 @@
		1	<!DOCTYPE html>
		2	<html lang="en">
		3	<head>
		4	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		5	<link rel="stylesheet" type="text/css" href="css/PropertyTrack.css">
		6	<script type="text/montage-serialization">
		7	{
		8	"owner": {
		9	"module": "js/panels/Timeline/PropertyTrack.reel",
		10	"name": "PropertyTrack",
		11	"properties": {
		12	"element": {"#": "property-track"}
		13	}
		14	}
		15
		16	}
		17	</script>
		18	</head>
		19	<body>
		20
		21	<div id="property-track" class="timeline-track"></div>
		22
		23	</body>
		24	</html> \ No newline at end of file


diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js new file mode 100644 index 00000000..1b0035cd --- /dev/null +++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js
@@ -0,0 +1,15 @@
		1	var Montage = require("montage/core/core").Montage;
		2	var Component = require("montage/ui/component").Component;
		3
		4	var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
		5
		6	hasTemplate:{
		7	value: true
		8	},
		9
		10	prepareForDraw:{
		11	value:function(){
		12
		13	}
		14	}
		15	});


diff --git a/js/panels/Timeline/PropertyTrack.reel/css/PropertyTrack.css b/js/panels/Timeline/PropertyTrack.reel/css/PropertyTrack.css new file mode 100644 index 00000000..9c27e705 --- /dev/null +++ b/js/panels/Timeline/PropertyTrack.reel/css/PropertyTrack.css
@@ -0,0 +1,13 @@
		1	/* PropertyTrack.scss
		2	* Main SCSS file for PropertyTrack component, compiled by SASS into the file css/PropertyTrack.css.
		3	*/
		4	/* line 13, ../scss/PropertyTrack.scss */
		5	.content-main .collapsible-content .timeline-track {
		6	height: 20px;
		7	border-bottom: 1px solid #505050;
		8	}
		9
		10	/* line 19, ../scss/PropertyTrack.scss */
		11	.timeline-track .content-main {
		12	background-color: #474747;
		13	}


diff --git a/js/panels/Timeline/PropertyTrack.reel/scss/PropertyTrack.scss b/js/panels/Timeline/PropertyTrack.reel/scss/PropertyTrack.scss new file mode 100644 index 00000000..ef8e1ec2 --- /dev/null +++ b/js/panels/Timeline/PropertyTrack.reel/scss/PropertyTrack.scss
@@ -0,0 +1,21 @@
		1	/* PropertyTrack.scss
		2	* Main SCSS file for PropertyTrack component, compiled by SASS into the file css/PropertyTrack.css.
		3	*/
		4
		5	// Import theme settings
		6	@import "../../../../../scss/imports/themes/default/colors";
		7	@import "../../../../../scss/imports/themes/default/mixins";
		8
		9	// Import generic mixins and styles
		10	@import "../../../../../scss/imports/scss/mixins";
		11
		12
		13	.content-main .collapsible-content .timeline-track {
		14	height: 20px;
		15	border-bottom: 1px solid $color-menu-divider;
		16	}
		17
		18
		19	.timeline-track .content-main {
		20	background-color: $color-menu-bg;
		21	}


diff --git a/js/panels/Timeline/PropertyTrack.reel/scss/config.rb b/js/panels/Timeline/PropertyTrack.reel/scss/config.rb new file mode 100644 index 00000000..e5a99b70 --- /dev/null +++ b/js/panels/Timeline/PropertyTrack.reel/scss/config.rb
@@ -0,0 +1,9 @@
		1	# Require any additional compass plugins here.
		2	# Set this to the root of your project when deployed:
		3	http_path = "/"
		4	css_dir = "../css"
		5	sass_dir = ""
		6	images_dir = "../images/"
		7	javascripts_dir = "../js"
		8	# To enable relative paths to assets via compass helper functions. Uncomment:
		9	# relative_assets = true


diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html index 4808e4d8..cabd92c0 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html
@@ -91,7 +91,51 @@
91	"oneway": false	91	"oneway": false
92	}	92	}
93	}	93	}
94	}	94	},
		95	"positionTracksRepetition": {
		96	"module": "montage/ui/repetition.reel",
		97	"name": "Repetition",
		98	"properties": {
		99	"element": {"#": "content-position-tracks"},
		100	"isSelectionEnabled" : false
		101	},
		102	"bindings": {
		103	"objects": {
		104	"boundObject": {"@": "owner"},
		105	"boundObjectPropertyPath": "arrPositionTracks",
		106	"oneway": false
		107	}
		108	}
		109	},
		110	"positionPropertyTrack" : {
		111	"module" : "js/panels/Timeline/PropertyTrack.reel",
		112	"name" : "PropertyTrack",
		113	"properties" : {
		114	"element":{"#": "position-track-base"}
		115	}
		116	},
		117	"transformTracksRepetition": {
		118	"module": "montage/ui/repetition.reel",
		119	"name": "Repetition",
		120	"properties": {
		121	"element": {"#": "content-transform-tracks"},
		122	"isSelectionEnabled" : false
		123	},
		124	"bindings": {
		125	"objects": {
		126	"boundObject": {"@": "owner"},
		127	"boundObjectPropertyPath": "arrTransformTracks",
		128	"oneway": false
		129	}
		130	}
		131	},
		132	"transformPropertyTrack" : {
		133	"module" : "js/panels/Timeline/PropertyTrack.reel",
		134	"name" : "PropertyTrack",
		135	"properties" : {
		136	"element":{"#": "transform-track-base"}
		137	}
		138	}
95		139
96		140
97	}	141	}
@@ -108,20 +152,14 @@
108	<div class="label-position collapsible-label collapsible-collapsed">	152	<div class="label-position collapsible-label collapsible-collapsed">
109		153
110	</div>	154	</div>
111	<div class="content-position collapsible-content collapsible-collapsed">	155	<div class="content-position collapsible-content collapsible-collapsed" id="content-position-tracks">
112	<div class="timeline-track"></div>	156	<div id="position-track-base"></div>
113	<div class="timeline-track"></div>
114	<div class="timeline-track"></div>
115	</div>	157	</div>
116	<div class="label-transform collapsible-label collapsible-collapsed">	158	<div class="label-transform collapsible-label collapsible-collapsed">
117		159
118	</div>	160	</div>
119	<div class="content-transform collapsible-content collapsible-collapsed">	161	<div class="content-transform collapsible-content collapsible-collapsed" id="content-transform-tracks">
120	<div class="timeline-track"></div>	162	<div id="transform-track-base"></div>
121	<div class="timeline-track"></div>
122	<div class="timeline-track"></div>
123	<div class="timeline-track"></div>
124	<div class="timeline-track"></div>
125	</div>	163	</div>
126	<div class="label-styles collapsible-label collapsible-collapsed">	164	<div class="label-styles collapsible-label collapsible-collapsed">
127		165


diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index 1c33a040..de2c75c7 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
@@ -114,6 +114,71 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
114	this.needsDraw = true;	114	this.needsDraw = true;
115	}	115	}
116	},	116	},
		117
		118	/* Position Property Tracks */
		119	_arrPositionTracks : {
		120	serializable:true,
		121	enumerable:true,
		122	value: []
		123	},