diff options
Diffstat (limited to 'js/panels/Timeline/Keyframe.reel')
-rw-r--r-- | js/panels/Timeline/Keyframe.reel/Keyframe.js | 23 | ||||
-rw-r--r-- | js/panels/Timeline/Keyframe.reel/css/Keyframe.css | 8 |
2 files changed, 19 insertions, 12 deletions
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, { | |||
78 | } | 78 | } |
79 | }, | 79 | }, |
80 | 80 | ||
81 | containingSpan:{ | ||
82 | value: null | ||
83 | }, | ||
84 | |||
81 | prepareForDraw:{ | 85 | prepareForDraw:{ |
82 | value:function(){ | 86 | value:function(){ |
83 | this.tweenkeyframe.addEventListener("click", this, false); | 87 | this.tweenkeyframe.addEventListener("click", this, false); |
@@ -91,7 +95,7 @@ var Keyframe = exports.Keyframe = Montage.create(Component, { | |||
91 | 95 | ||
92 | draw:{ | 96 | draw:{ |
93 | value:function(){ | 97 | value:function(){ |
94 | this.tweenkeyframe.style.left = (this.position - 2) + "px"; | 98 | this.tweenkeyframe.style.left = (this.position - 3) + "px"; |
95 | } | 99 | } |
96 | }, | 100 | }, |
97 | 101 | ||
@@ -101,16 +105,15 @@ var Keyframe = exports.Keyframe = Montage.create(Component, { | |||
101 | if(event.detail.source && event.detail.source !== "keyframe") { | 105 | if(event.detail.source && event.detail.source !== "keyframe") { |
102 | 106 | ||
103 | var items = this.application.ninja.selectedElements; | 107 | var items = this.application.ninja.selectedElements; |
104 | 108 | this.containingSpan.highlightSpan(); | |
105 | // update this keyframe's animated properties from the item[0] element props | 109 | if(items[0]._element.offsetTop != this.animatedProperties["top"] && items[0]._element.offsetLeft != this.animatedProperties["left"]){ |
106 | this.animatedProperties["top"] = items[0]._element.offsetTop; | 110 | // update this keyframe's animated properties from the item[0] element props |
107 | this.animatedProperties["left"] = items[0]._element.offsetLeft; | 111 | this.animatedProperties["top"] = items[0]._element.offsetTop; |
108 | this.containingTrack.keyFramePropertyData[this.id] = this.animatedProperties; | 112 | this.animatedProperties["left"] = items[0]._element.offsetLeft; |
109 | 113 | this.containingTrack.keyFramePropertyData[this.id] = this.animatedProperties; | |
110 | this.containingTrack.updateKeyframeRule(); | 114 | this.containingTrack.updateKeyframeRule(); |
115 | } | ||
111 | } | 116 | } |
112 | |||
113 | |||
114 | } | 117 | } |
115 | }, | 118 | }, |
116 | 119 | ||
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 @@ | |||
1 | .tween_keyframe{ | 1 | .tween_keyframe{ |
2 | position: absolute; | 2 | position: absolute; |
3 | height: 16px; | 3 | height: 16px; |
4 | width: 4px; | 4 | width: 5px; |
5 | background-color: white; | 5 | background-color: white; |
6 | z-index: 23; | 6 | z-index: 23; |
7 | border-radius: 3px; | ||
7 | } | 8 | } |
8 | 9 | ||
9 | .tween_keyframe.keyframeSelected{ | 10 | .tween_keyframe.keyframeSelected{ |
10 | background-color: blue; | 11 | background-color: #570e19; |
12 | border-style: solid; | ||
13 | border-width: thin; | ||
14 | border-color: #d6d1cf; | ||
11 | } \ No newline at end of file | 15 | } \ No newline at end of file |