From 8cb53b7ec3b4f34fd77945256ad80bc1ae54b887 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Tue, 7 Feb 2012 21:28:14 -0800 Subject: Add Span color highlight for animated spans and restyle keyframes Signed-off-by: Jonathan Duran --- js/panels/Timeline/Keyframe.reel/Keyframe.js | 23 ++++++++++++---------- js/panels/Timeline/Keyframe.reel/css/Keyframe.css | 8 ++++++-- js/panels/Timeline/Span.reel/Span.js | 6 ++++++ js/panels/Timeline/Span.reel/css/Span.css | 4 ++++ .../TimelinePanel.reel/css/TimelinePanel.css | 1 + js/panels/Timeline/Tween.reel/Tween.html | 3 ++- 6 files changed, 32 insertions(+), 13 deletions(-) (limited to 'js/panels') diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.js b/js/panels/Timeline/Keyframe.reel/Keyframe.js index 4bb73514..b6623dcd 100644 --- a/js/panels/Timeline/Keyframe.reel/Keyframe.js +++ b/js/panels/Timeline/Keyframe.reel/Keyframe.js @@ -78,6 +78,10 @@ var Keyframe = exports.Keyframe = Montage.create(Component, { } }, + containingSpan:{ + value: null + }, + prepareForDraw:{ value:function(){ this.tweenkeyframe.addEventListener("click", this, false); @@ -91,7 +95,7 @@ var Keyframe = exports.Keyframe = Montage.create(Component, { draw:{ value:function(){ - this.tweenkeyframe.style.left = (this.position - 2) + "px"; + this.tweenkeyframe.style.left = (this.position - 3) + "px"; } }, @@ -101,16 +105,15 @@ var Keyframe = exports.Keyframe = Montage.create(Component, { if(event.detail.source && event.detail.source !== "keyframe") { var items = this.application.ninja.selectedElements; - - // update this keyframe's animated properties from the item[0] element props - this.animatedProperties["top"] = items[0]._element.offsetTop; - this.animatedProperties["left"] = items[0]._element.offsetLeft; - this.containingTrack.keyFramePropertyData[this.id] = this.animatedProperties; - - this.containingTrack.updateKeyframeRule(); + this.containingSpan.highlightSpan(); + if(items[0]._element.offsetTop != this.animatedProperties["top"] && items[0]._element.offsetLeft != this.animatedProperties["left"]){ + // update this keyframe's animated properties from the item[0] element props + this.animatedProperties["top"] = items[0]._element.offsetTop; + this.animatedProperties["left"] = items[0]._element.offsetLeft; + this.containingTrack.keyFramePropertyData[this.id] = this.animatedProperties; + this.containingTrack.updateKeyframeRule(); + } } - - } }, diff --git a/js/panels/Timeline/Keyframe.reel/css/Keyframe.css b/js/panels/Timeline/Keyframe.reel/css/Keyframe.css index e66bcf10..4afc1180 100644 --- a/js/panels/Timeline/Keyframe.reel/css/Keyframe.css +++ b/js/panels/Timeline/Keyframe.reel/css/Keyframe.css @@ -1,11 +1,15 @@ .tween_keyframe{ position: absolute; height: 16px; - width: 4px; + width: 5px; background-color: white; z-index: 23; + border-radius: 3px; } .tween_keyframe.keyframeSelected{ - background-color: blue; + background-color: #570e19; + border-style: solid; + border-width: thin; + border-color: #d6d1cf; } \ No newline at end of file diff --git a/js/panels/Timeline/Span.reel/Span.js b/js/panels/Timeline/Span.reel/Span.js index 05f56a32..f7bd4ff0 100644 --- a/js/panels/Timeline/Span.reel/Span.js +++ b/js/panels/Timeline/Span.reel/Span.js @@ -31,5 +31,11 @@ var Span = exports.Span = Montage.create(Component, { value: function(){ this.tweenspan.style.width = this.spanWidth + "px"; } + }, + + highlightSpan:{ + value: function(){ + this.tweenspan.classList.add("spanHighlight"); + } } }); diff --git a/js/panels/Timeline/Span.reel/css/Span.css b/js/panels/Timeline/Span.reel/css/Span.css index 1583c20f..1e988c6c 100644 --- a/js/panels/Timeline/Span.reel/css/Span.css +++ b/js/panels/Timeline/Span.reel/css/Span.css @@ -3,4 +3,8 @@ height: 16px; opacity: 0.3; background-color: white; +} + +.tween_span.spanHighlight{ + background-color: #a0c8ff; } \ No newline at end of file diff --git a/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css b/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css index f5fb9378..cbae49c8 100644 --- a/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css +++ b/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css @@ -143,6 +143,7 @@ left: 0px; height: 20px; width: 100%; + border-bottom-style: solid; } .masterlayer{ diff --git a/js/panels/Timeline/Tween.reel/Tween.html b/js/panels/Timeline/Tween.reel/Tween.html index 3e72acc0..307dcd02 100644 --- a/js/panels/Timeline/Tween.reel/Tween.html +++ b/js/panels/Timeline/Tween.reel/Tween.html @@ -28,7 +28,8 @@ "module": "js/panels/Timeline/Keyframe.reel", "name": "Keyframe", "properties": { - "element": {"#": "keyframe_container"} + "element": {"#": "keyframe_container"}, + "containingSpan": {"@": "span"} } } } -- cgit v1.2.3