From 4d1f1d02e9e443485357c482432938fd0d9f757d Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Thu, 23 Feb 2012 07:57:17 -0800 Subject: Redo timeline resize code Signed-off-by: Jonathan Duran --- .../Timeline/TimelinePanel.reel/TimelinePanel.html | 25 ++++++++++++++++------ .../Timeline/TimelinePanel.reel/TimelinePanel.js | 18 +++++++++++++++- .../TimelinePanel.reel/css/TimelinePanel.css | 8 ++++--- 3 files changed, 41 insertions(+), 10 deletions(-) (limited to 'js/panels') diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html index 2a84c21a..33145028 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html @@ -25,7 +25,9 @@ "playhead": {"#": "playhead"}, "playheadmarker": {"#": "playhead_marker"}, "timetext" : {"#": "time_text"}, - "timebar" : {"#": "time_bar"} + "timebar" : {"#": "time_bar"}, + "container_tracks" : {"#" : "container-tracks"}, + "end_hottext" : {"@" : "endHottext"} } }, @@ -200,7 +202,19 @@ "oneway" : false } } - } + }, + "endHottext" : { + "module": "js/components/hottextunit.reel", + "name": "HotTextUnit", + "properties": { + "element": {"#": "end_hottext"}, + "maxValue" : 100000, + "minValue" : 1, + "acceptableUnits" : "sec", + "units" : "sec", + "value" : 25 + } + } } @@ -240,7 +254,7 @@
- +
@@ -250,9 +264,8 @@
-
-
-
+
+
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 43e758f4..8764d041 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -157,6 +157,9 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { value:false, writable:true }, + timeMarkerHolder:{ + value: null + }, /* === END: Models === */ /* === BEGIN: Draw cycle === */ @@ -202,6 +205,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.timeline_leftpane.addEventListener("click", this.timelineLeftPaneClick.bind(this), false); this.layout_tracks.addEventListener("scroll", this.updateLayerScroll.bind(this), false); this.user_layers.addEventListener("scroll", this.updateLayerScroll.bind(this), false); + this.end_hottext.addEventListener("changing", this.updateTrackContainerWidth.bind(this), false); this.drawTimeMarkers(); @@ -213,6 +217,16 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } }, + updateTrackContainerWidth:{ + value: function(){ + this.container_tracks.style.width = (this.end_hottext.value * 80) + "px"; + this.master_track.style.width = (this.end_hottext.value * 80) + "px"; + this.time_markers.style.width = (this.end_hottext.value * 80) + "px"; + this.time_markers.removeChild(this.timeMarkerHolder); + this.drawTimeMarkers(); + } + }, + updateLayerScroll:{ value:function () { this.user_layers.scrollTop = this.layout_tracks.scrollTop; @@ -602,6 +616,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { drawTimeMarkers:{ value:function () { + this.timeMarkerHolder = document.createElement("div"); + this.time_markers.appendChild(this.timeMarkerHolder); var i; var totalMarkers = Math.floor(this.time_markers.offsetWidth / 80); for (i = 0; i < totalMarkers; i++) { @@ -609,7 +625,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { var markValue = this.calculateTimeMarkerValue(i); timeMark.className = "timemark"; timeMark.innerHTML = markValue; - this.time_markers.appendChild(timeMark); + this.timeMarkerHolder.appendChild(timeMark); } } }, diff --git a/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css b/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css index b8784d4d..26dd272c 100644 --- a/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css +++ b/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css @@ -251,16 +251,18 @@ } .timebar{ height: 3px; - width:1px; + width:0; background-color: #ff0003; opacity: 0.3; top:10px; position: absolute; border-top: #c7a19f thin solid; border-right: #ffffff thin solid; - } .endhottext{ float: right; - padding-right: 8px; + font-family: 'Droid Sans'; + font-size: 12px; + text-shadow: 1px 1px 1px black; + color: white; } \ No newline at end of file -- cgit v1.2.3