From cf671b4855ecca0278128e82459691292a3d3dc9 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Thu, 23 Feb 2012 08:08:30 -0800 Subject: Timeline: Create new PropertyTrack subcomponent, and use it in the TimelineTrack component. Cherry pick commit from jreid/Timeline-jreid Signed-off-by: Jonathan Duran --- .../Timeline/PropertyTrack.reel/PropertyTrack.html | 24 ++++++++ .../Timeline/PropertyTrack.reel/PropertyTrack.js | 15 +++++ .../PropertyTrack.reel/css/PropertyTrack.css | 13 ++++ .../PropertyTrack.reel/scss/PropertyTrack.scss | 21 +++++++ .../Timeline/PropertyTrack.reel/scss/config.rb | 9 +++ .../Timeline/TimelineTrack.reel/TimelineTrack.html | 60 +++++++++++++++---- .../Timeline/TimelineTrack.reel/TimelineTrack.js | 69 ++++++++++++++++++++++ .../TimelineTrack.reel/css/TimelineTrack.css | 11 ---- .../TimelineTrack.reel/scss/TimelineTrack.scss | 8 --- 9 files changed, 200 insertions(+), 30 deletions(-) create mode 100644 js/panels/Timeline/PropertyTrack.reel/PropertyTrack.html create mode 100644 js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js create mode 100644 js/panels/Timeline/PropertyTrack.reel/css/PropertyTrack.css create mode 100644 js/panels/Timeline/PropertyTrack.reel/scss/PropertyTrack.scss create mode 100644 js/panels/Timeline/PropertyTrack.reel/scss/config.rb (limited to 'js') 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 @@ + + + + + + + + + +
+ + + \ 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 @@
-
-
-
-
+
+
-
-
-
-
-
-
+
+
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: [] + }, + arrPositionTracks: { + serializable:true, + enumerable:true, + get: function() { + return this._arrPositionTracks; + }, + set: function(newVal) { + this._arrPositionTracks = newVal; + this.needsDraw = true; + } + }, + _positionTracksRepetition: { + serializable: true, + value: null + }, + positionTracksRepetition : { + serializable: true, + get: function() { + return this._positionTracksRepetition; + }, + set: function(newVal) { + this._positionTracksRepetition = newVal; + this.needsDraw = true; + } + }, + + + /* Transform Property Tracks */ + _arrTransformTracks : { + serializable:true, + enumerable:true, + value: [] + }, + arrTransformTracks: { + serializable:true, + enumerable:true, + get: function() { + return this._arrTransformTracks; + }, + set: function(newVal) { + this._arrTransformTracks = newVal; + this.needsDraw = true; + } + }, + _transformTracksRepetition: { + serializable: true, + value: null + }, + transformTracksRepetition : { + serializable: true, + get: function() { + return this._transformTracksRepetition; + }, + set: function(newVal) { + this._transformTracksRepetition = newVal; + this.needsDraw = true; + } + }, _tweens:{ enumerable: false, @@ -414,6 +479,10 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { init:{ value:function () { var that = this; + + this.arrPositionTracks = [0, 1, 2]; + this.arrTransformTracks = [0, 1, 2, 3, 4]; + this.label = this.element.querySelector(".label-main"); this.myContent = this.element.querySelector(".content-main"); this.labelPosition = this.element.querySelector(".label-position"); diff --git a/js/panels/Timeline/TimelineTrack.reel/css/TimelineTrack.css b/js/panels/Timeline/TimelineTrack.reel/css/TimelineTrack.css index 842015e9..7a778e25 100644 --- a/js/panels/Timeline/TimelineTrack.reel/css/TimelineTrack.css +++ b/js/panels/Timeline/TimelineTrack.reel/css/TimelineTrack.css @@ -53,14 +53,3 @@ background-color: #474747; color: white; } - -/* line 63, ../scss/TimelineTrack.scss */ -.tl_layertracks .collapsible-content .timeline-track { - height: 20px; - border-bottom: 1px solid #505050; -} - -/* line 69, ../scss/TimelineTrack.scss */ -.timeline-track .content-main { - background-color: #474747; -} diff --git a/js/panels/Timeline/TimelineTrack.reel/scss/TimelineTrack.scss b/js/panels/Timeline/TimelineTrack.reel/scss/TimelineTrack.scss index 01dd948c..43d5f438 100644 --- a/js/panels/Timeline/TimelineTrack.reel/scss/TimelineTrack.scss +++ b/js/panels/Timeline/TimelineTrack.reel/scss/TimelineTrack.scss @@ -60,12 +60,4 @@ color: $color-panel-text; } - .tl_layertracks .collapsible-content .timeline-track { - height: 20px; - border-bottom: 1px solid $color-menu-divider; - } - -.timeline-track .content-main { - background-color: $color-menu-bg; -} -- cgit v1.2.3