aboutsummaryrefslogtreecommitdiff
path: root/js/panels
diff options
context:
space:
mode:
authorJonathan Duran2012-02-23 08:08:30 -0800
committerJonathan Duran2012-02-23 08:08:30 -0800
commitcf671b4855ecca0278128e82459691292a3d3dc9 (patch)
tree13a93345dc2427a0403c94ced3dfd5093d146310 /js/panels
parenta712e134ea94b6a21061c1bd272ce15b1f95b986 (diff)
downloadninja-cf671b4855ecca0278128e82459691292a3d3dc9.tar.gz
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>
Diffstat (limited to 'js/panels')
-rw-r--r--js/panels/Timeline/PropertyTrack.reel/PropertyTrack.html24
-rw-r--r--js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js15
-rw-r--r--js/panels/Timeline/PropertyTrack.reel/css/PropertyTrack.css13
-rw-r--r--js/panels/Timeline/PropertyTrack.reel/scss/PropertyTrack.scss21
-rw-r--r--js/panels/Timeline/PropertyTrack.reel/scss/config.rb9
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html60
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js69
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/css/TimelineTrack.css11
-rw-r--r--js/panels/Timeline/TimelineTrack.reel/scss/TimelineTrack.scss8
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 @@
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 @@
1var Montage = require("montage/core/core").Montage;
2var Component = require("montage/ui/component").Component;
3
4var 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:
3http_path = "/"
4css_dir = "../css"
5sass_dir = ""
6images_dir = "../images/"
7javascripts_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 },