From cdcc677c827b65e3c689d4207c0117f94e4d6d57 Mon Sep 17 00:00:00 2001 From: Kruti Shah Date: Mon, 16 Jul 2012 16:27:58 -0700 Subject: Styling of Zoom Slider + Grid Cut off limit taken care of + Hot text Bug (left,top,width,height) changing it now changes the element on stage Signed-off-by: Kruti Shah --- js/panels/Timeline/Layer.reel/Layer.js | 26 ++++----------------- .../Timeline/TimelinePanel.reel/TimelinePanel.html | 2 ++ .../Timeline/TimelinePanel.reel/TimelinePanel.js | 18 ++++++++++++++ .../Timeline/TimelinePanel.reel/images/knob.png | Bin 0 -> 1036 bytes .../TimelinePanel.reel/scss/TimelinePanel.scss | 23 ++++++++++++++++++ .../Timeline/TimelineTrack.reel/TimelineTrack.js | 4 ++++ 6 files changed, 52 insertions(+), 21 deletions(-) create mode 100755 js/panels/Timeline/TimelinePanel.reel/images/knob.png (limited to 'js/panels') diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js index 291e3416..c10731a3 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js @@ -1071,105 +1071,89 @@ var Layer = exports.Layer = Montage.create(Component, { handleLeftChange: { value: function(event) { var prevPosition; - if(this.application.ninja.timeline.selectedStyle==="left" ||this.application.ninja.timeline.selectedStyle==="master" ){ + if(!event.wasSetByCode) { if(this.savedPosition) prevPosition = [this.savedPosition + "px"]; this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "left", [this.leftControl.value + "px"] , "Change", "timeline", prevPosition); this.savedPosition = null; } - } + } }, handleTopChange: { value: function(event) { var prevPosition; - if(this.application.ninja.timeline.selectedStyle==="top" ||this.application.ninja.timeline.selectedStyle==="master" ){ if(!event.wasSetByCode) { if(this.savedPosition) prevPosition = [this.savedPosition + "px"]; this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "top", [this.topControl.value + "px"] , "Change", "timeline", prevPosition); this.savedPosition = null; } - } + } }, handleWidthChange:{ value: function(event) { var prevPosition; - if(this.application.ninja.timeline.selectedStyle==="width" ||this.application.ninja.timeline.selectedStyle==="master" ){ + if(!event.wasSetByCode) { if(this.savedPosition) prevPosition = [this.savedPosition + "px"]; this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "width", [this.dtextScaleX + "px"] , "Change", "timeline", prevPosition); this.savedPosition = null; } - } } }, handleHeightChange:{ value: function(event) { var prevPosition; - if(this.application.ninja.timeline.selectedStyle==="height" ||this.application.ninja.timeline.selectedStyle==="master" ){ + if(!event.wasSetByCode) { if(this.savedPosition) prevPosition = [this.savedPosition + "px"]; this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "height", [this.dtextScaleY + "px"] , "Change", "timeline", prevPosition); this.savedPosition = null; } - } } }, handleLeftChanging: { value: function(event) { - - if(this.application.ninja.timeline.selectedStyle==="left" ||this.application.ninja.timeline.selectedStyle==="master" ){ if(!event.wasSetByCode) { if(!this.savedPosition) this.savedPosition = this.leftPosition; this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "left", [this.leftControl.value + "px"] , "Changing", "timeline"); } - } - } }, handleTopChanging: { value: function(event) { - if(this.application.ninja.timeline.selectedStyle==="top" ||this.application.ninja.timeline.selectedStyle==="master" ){ if(!event.wasSetByCode) { if(!this.savedPosition) this.savedPosition = this.topPosition; this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "top", [this.topControl.value + "px"] , "Changing", "timeline"); } - } - } }, handleWidthChanging:{ value: function(event) { - if(this.application.ninja.timeline.selectedStyle==="width" ||this.application.ninja.timeline.selectedStyle==="master" ){ if(!event.wasSetByCode) { if(!this.savedPosition) this.savedPosition = this.dtextScaleX; this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "width", [this.dtextScaleX + "px"] , "Changing", "timeline"); } - } - } }, handleHeightChanging:{ value: function(event) { - if(this.application.ninja.timeline.selectedStyle==="height" ||this.application.ninja.timeline.selectedStyle==="master" ){ if(!event.wasSetByCode) { if(!this.savedPosition) this.savedPosition = this.dtextScaleY; this.application.ninja.elementMediator.setProperty([this.layerData.stageElement], "height", [this.dtextScaleY + "px"] , "Changing", "timeline"); } - } - } }, diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html index 57285704..9ae5d3d5 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html @@ -216,7 +216,9 @@ POSSIBILITY OF SUCH DAMAGE.
+
+
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 88b37563..0bf025ab 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -505,11 +505,13 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { }, millisecondsOffset:{ get:function () { + return this._millisecondsOffset; }, set:function (newVal) { if (newVal !== this._millisecondsOffset) { + this.tempValue = newVal; var tempValue = (1/newVal) * 1000000; newVal = tempValue; @@ -1704,6 +1706,22 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } }, + zoomTrackContainerWidthChange:{ + value:function () { + + this.tempValue = this.tempValue/1000; + this.tempValue *= 30; + + this.container_tracks.style.width = (this.tempValue * 80) + "px"; + this.master_track.style.width = (this.tempValue * 80) + "px"; + this.time_markers.style.width = (this.tempValue * 80) + "px"; + if (this.timeMarkerHolder) { + this.time_markers.removeChild(this.timeMarkerHolder); + } + this.drawTimeMarkers(); + } + }, + handleLayerScroll: { value:function () { this._areTracksScrolling = true; diff --git a/js/panels/Timeline/TimelinePanel.reel/images/knob.png b/js/panels/Timeline/TimelinePanel.reel/images/knob.png new file mode 100755 index 00000000..ecfbfcec Binary files /dev/null and b/js/panels/Timeline/TimelinePanel.reel/images/knob.png differ diff --git a/js/panels/Timeline/TimelinePanel.reel/scss/TimelinePanel.scss b/js/panels/Timeline/TimelinePanel.reel/scss/TimelinePanel.scss index 4fbcc400..d3529444 100644 --- a/js/panels/Timeline/TimelinePanel.reel/scss/TimelinePanel.scss +++ b/js/panels/Timeline/TimelinePanel.reel/scss/TimelinePanel.scss @@ -396,3 +396,26 @@ POSSIBILITY OF SUCH DAMAGE. .layer-hidden { display: none; } + +.tl_slider { + width: 127px; + height:5px; + float: left; + clear: none; + margin: 2px 0px 0px 0px; +} + +.slider-track { + background: #29292; + width: 127px +}, + +.sliderClass { + float: left; + width: 127px +} + +.sliderClass .knob { + background: url(../images/knob.png) no-repeat transparent center center; + margin-bottom: 2px; +} diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index c9516d1f..ea37fe6b 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -627,8 +627,12 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { myObj.spanPosition = clickPos - (clickPos - prevKeyFramePosition); this.tweens[i].tweenData = myObj; + + } } + this.application.ninja.timeline.zoomTrackContainerWidthChange(); + } }, -- cgit v1.2.3