diff options
Diffstat (limited to 'js/panels/Timeline')
-rw-r--r-- | js/panels/Timeline/Keyframe.reel/Keyframe.js | 4 | ||||
-rw-r--r-- | js/panels/Timeline/Keyframe.reel/css/Keyframe.css | 9 | ||||
-rw-r--r-- | 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, { | |||
42 | 42 | ||
43 | draw:{ | 43 | draw:{ |
44 | value:function(){ | 44 | value:function(){ |
45 | this.element.style.left = (this.position - 6) + "px"; | 45 | this.element.style.left = (this.position - 5) + "px"; |
46 | } | 46 | } |
47 | }, | 47 | }, |
48 | 48 | ||
49 | deselectKeyframe:{ | 49 | deselectKeyframe:{ |
50 | value:function(){ | 50 | value:function(){ |
51 | this.element.classList.remove("keyframeSelected"); | 51 | this.element.classList.remove("keyframeSelected"); |
52 | this.element.style.left = (this.position - 5) + "px"; | ||
52 | } | 53 | } |
53 | }, | 54 | }, |
54 | 55 | ||
55 | selectKeyframe:{ | 56 | selectKeyframe:{ |
56 | value:function(){ | 57 | value:function(){ |
57 | this.element.classList.add("keyframeSelected"); | 58 | this.element.classList.add("keyframeSelected"); |
59 | this.element.style.left = (this.position - 6) + "px"; | ||
58 | this.parentComponent.selectTween(); | 60 | this.parentComponent.selectTween(); |
59 | } | 61 | } |
60 | }, | 62 | }, |
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 @@ | |||
6 | 6 | ||
7 | .tween_keyframe{ | 7 | .tween_keyframe{ |
8 | position: absolute; | 8 | position: absolute; |
9 | height: 10px; | 9 | height: 8px; |
10 | width: 10px; | 10 | width: 8px; |
11 | top: 3px; | 11 | top: 4px; |
12 | background-color: white; | 12 | background-color: white; |
13 | z-index: 23; | 13 | z-index: 23; |
14 | border-radius: 2px; | 14 | border-radius: 2px; |
@@ -16,6 +16,9 @@ | |||
16 | } | 16 | } |
17 | 17 | ||
18 | .tween_keyframe.keyframeSelected{ | 18 | .tween_keyframe.keyframeSelected{ |
19 | height: 10px; | ||
20 | width: 10px; | ||
21 | top: 3px; | ||
19 | background-color: #570e19; | 22 | background-color: #570e19; |
20 | border-style: solid; | 23 | border-style: solid; |
21 | border-width: thin; | 24 | 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, { | |||
35 | var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); | 35 | var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); |
36 | if (selectedIndex !== false) { | 36 | if (selectedIndex !== false) { |
37 | if (!this.application.ninja.timeline.arrLayers[selectedIndex].layerData.created) { | 37 | if (!this.application.ninja.timeline.arrLayers[selectedIndex].layerData.created) { |
38 | //this.retrieveStoredStyleTweens(); | 38 | this.retrieveStoredStyleTweens(); |
39 | } | 39 | } |
40 | } | 40 | } |
41 | } | 41 | } |
@@ -240,6 +240,14 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { | |||
240 | 240 | ||
241 | var newTween = {}; | 241 | var newTween = {}; |
242 | newTween.tweenData = {}; | 242 | newTween.tweenData = {}; |
243 | newTween.tweenData.tweenedProperties = []; | ||
244 | |||
245 | // TODO - check for color values vs px values and set the correct default | ||
246 | var propVal = this.ninjaStylesContoller.getElementStyle(this.animatedElement, this.trackEditorProperty); | ||
247 | if(propVal == null){ | ||
248 | propVal = "1px"; | ||
249 | } | ||
250 | newTween.tweenData.tweenedProperties[this.trackEditorProperty] = propVal; | ||
243 | 251 | ||
244 | if (clickPos == 0) { | 252 | if (clickPos == 0) { |
245 | newTween.tweenData.spanWidth = 0; | 253 | newTween.tweenData.spanWidth = 0; |
@@ -247,8 +255,6 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { | |||
247 | newTween.tweenData.keyFrameMillisec = 0; | 255 | newTween.tweenData.keyFrameMillisec = 0; |
248 | newTween.tweenData.tweenID = 0; | 256 | newTween.tweenData.tweenID = 0; |
249 | newTween.tweenData.spanPosition = 0; | 257 | newTween.tweenData.spanPosition = 0; |
250 | newTween.tweenData.tweenedProperties = []; | ||
251 | newTween.tweenData.tweenedProperties[this.trackEditorProperty] = this.ninjaStylesContoller.getElementStyle(this.animatedElement, this.trackEditorProperty); | ||
252 | 258 | ||
253 | this.propTweens.push(newTween); | 259 | this.propTweens.push(newTween); |
254 | 260 | ||
@@ -258,8 +264,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, { | |||
258 | newTween.tweenData.keyFrameMillisec = currentMillisec; | 264 | newTween.tweenData.keyFrameMillisec = currentMillisec; |
259 | newTween.tweenData.tweenID = this.nextKeyframe; | 265 | newTween.tweenData.tweenID = this.nextKeyframe; |
260 | newTween.tweenData.spanPosition = clickPos - newTween.tweenData.spanWidth; | 266 | newTween.tweenData.spanPosition = clickPos - newTween.tweenData.spanWidth; |
261 | newTween.tweenData.tweenedProperties = []; | 267 | |
262 | newTween.tweenData.tweenedProperties[this.trackEditorProperty] = this.ninjaStylesContoller.getElementStyle(this.animatedElement, this.trackEditorProperty); | ||
263 | this.propTweens.push(newTween); | 268 | this.propTweens.push(newTween); |
264 | 269 | ||
265 | this.nextKeyframe += 1; | 270 | this.nextKeyframe += 1; |