aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/Timeline')
-rw-r--r--js/panels/Timeline/Keyframe.reel/Keyframe.js23
-rw-r--r--js/panels/Timeline/Keyframe.reel/css/Keyframe.css8
-rw-r--r--js/panels/Timeline/Span.reel/Span.js6
-rw-r--r--js/panels/Timeline/Span.reel/css/Span.css4
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css1
-rw-r--r--js/panels/Timeline/Tween.reel/Tween.html3
6 files changed, 32 insertions, 13 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
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, {
31 value: function(){ 31 value: function(){
32 this.tweenspan.style.width = this.spanWidth + "px"; 32 this.tweenspan.style.width = this.spanWidth + "px";
33 } 33 }
34 },
35
36 highlightSpan:{
37 value: function(){
38 this.tweenspan.classList.add("spanHighlight");
39 }
34 } 40 }
35}); 41});
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 @@
3 height: 16px; 3 height: 16px;
4 opacity: 0.3; 4 opacity: 0.3;
5 background-color: white; 5 background-color: white;
6}
7
8.tween_span.spanHighlight{
9 background-color: #a0c8ff;
6} \ No newline at end of file 10} \ 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 @@
143 left: 0px; 143 left: 0px;
144 height: 20px; 144 height: 20px;
145 width: 100%; 145 width: 100%;
146 border-bottom-style: solid;
146} 147}
147 148
148.masterlayer{ 149.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 @@
28 "module": "js/panels/Timeline/Keyframe.reel", 28 "module": "js/panels/Timeline/Keyframe.reel",
29 "name": "Keyframe", 29 "name": "Keyframe",
30 "properties": { 30 "properties": {
31 "element": {"#": "keyframe_container"} 31 "element": {"#": "keyframe_container"},
32 "containingSpan": {"@": "span"}
32 } 33 }
33 } 34 }
34 } 35 }