From 41754c04c5c5f3c372dc2b38a122144f8d9e1d18 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Wed, 30 May 2012 09:29:49 -0700 Subject: fancy keyframe selection Signed-off-by: Jonathan Duran --- js/panels/Timeline/Keyframe.reel/Keyframe.js | 4 +++- js/panels/Timeline/Keyframe.reel/css/Keyframe.css | 9 ++++++--- js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js | 15 ++++++++++----- 3 files changed, 19 insertions(+), 9 deletions(-) diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.js b/js/panels/Timeline/Keyframe.reel/Keyframe.js index 41eb6ef1..b91027b6 100644 --- a/js/panels/Timeline/Keyframe.reel/Keyframe.js +++ b/js/panels/Timeline/Keyframe.reel/Keyframe.js @@ -42,19 +42,21 @@ var Keyframe = exports.Keyframe = Montage.create(Component, { draw:{ value:function(){ - this.element.style.left = (this.position - 6) + "px"; + this.element.style.left = (this.position - 5) + "px"; } }, deselectKeyframe:{ value:function(){ this.element.classList.remove("keyframeSelected"); + this.element.style.left = (this.position - 5) + "px"; } }, selectKeyframe:{ value:function(){ this.element.classList.add("keyframeSelected"); + this.element.style.left = (this.position - 6) + "px"; this.parentComponent.selectTween(); } }, diff --git a/js/panels/Timeline/Keyframe.reel/css/Keyframe.css b/js/panels/Timeline/Keyframe.reel/css/Keyframe.css index 36166c1c..5ea236e9 100644 --- a/js/panels/Timeline/Keyframe.reel/css/Keyframe.css +++ b/js/panels/Timeline/Keyframe.reel/css/Keyframe.css @@ -6,9 +6,9 @@ .tween_keyframe{ position: absolute; - height: 10px; - width: 10px; - top: 3px; + height: 8px; + width: 8px; + top: 4px; background-color: white; z-index: 23; border-radius: 2px; @@ -16,6 +16,9 @@ } .tween_keyframe.keyframeSelected{ + height: 10px; + width: 10px; + top: 3px; background-color: #570e19; border-style: solid; border-width: thin; diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js index af58199a..d785ea3e 100644 --- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js +++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js @@ -35,7 +35,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); if (selectedIndex !== false) { if (!this.application.ninja.timeline.arrLayers[selectedIndex].layerData.created) { - //this.retrieveStoredStyleTweens(); + this.retrieveStoredStyleTweens(); } } } @@ -240,6 +240,14 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { var newTween = {}; newTween.tweenData = {}; + newTween.tweenData.tweenedProperties = []; + + // TODO - check for color values vs px values and set the correct default + var propVal = this.ninjaStylesContoller.getElementStyle(this.animatedElement, this.trackEditorProperty); + if(propVal == null){ + propVal = "1px"; + } + newTween.tweenData.tweenedProperties[this.trackEditorProperty] = propVal; if (clickPos == 0) { newTween.tweenData.spanWidth = 0; @@ -247,8 +255,6 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { newTween.tweenData.keyFrameMillisec = 0; newTween.tweenData.tweenID = 0; newTween.tweenData.spanPosition = 0; - newTween.tweenData.tweenedProperties = []; - newTween.tweenData.tweenedProperties[this.trackEditorProperty] = this.ninjaStylesContoller.getElementStyle(this.animatedElement, this.trackEditorProperty); this.propTweens.push(newTween); @@ -258,8 +264,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { newTween.tweenData.keyFrameMillisec = currentMillisec; newTween.tweenData.tweenID = this.nextKeyframe; newTween.tweenData.spanPosition = clickPos - newTween.tweenData.spanWidth; - newTween.tweenData.tweenedProperties = []; - newTween.tweenData.tweenedProperties[this.trackEditorProperty] = this.ninjaStylesContoller.getElementStyle(this.animatedElement, this.trackEditorProperty); + this.propTweens.push(newTween); this.nextKeyframe += 1; -- cgit v1.2.3