Diamond keyframes

Signed-off-by: Jonathan Duran <jduran@motorola.com>

4 files changed, 35 insertions, 11 deletions

diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.js b/js/panels/Timeline/Keyframe.reel/Keyframe.js
index a4f957cf..52302319 100644
--- a/js/panels/Timeline/Keyframe.reel/Keyframe.js
+++ b/js/panels/Timeline/Keyframe.reel/Keyframe.js
@@ -42,7 +42,7 @@ var Keyframe = exports.Keyframe = Montage.create(Component, {
 
     draw:{
         value:function(){
-            this.element.style.left = (this.position - 3) + "px";
+            this.element.style.left = (this.position - 6) + "px";
         }
     },
 
diff --git a/js/panels/Timeline/Keyframe.reel/css/Keyframe.css b/js/panels/Timeline/Keyframe.reel/css/Keyframe.css
index ff5dae7a..36166c1c 100644
--- a/js/panels/Timeline/Keyframe.reel/css/Keyframe.css
+++ b/js/panels/Timeline/Keyframe.reel/css/Keyframe.css
@@ -6,11 +6,13 @@
 
 .tween_keyframe{
     position: absolute;
-    height: 16px;
-    width: 5px;
+    height: 10px;
+    width: 10px;
+    top: 3px;
     background-color: white;
     z-index: 23;
-    border-radius: 3px;
+    border-radius: 2px;
+    -webkit-transform: rotate(45deg);
 }
 
 .tween_keyframe.keyframeSelected{
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
index 2fe60d72..faa3ba77 100644
--- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
+++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
@@ -321,6 +321,19 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
         }
     },
 
+    _ruleList:{
+        value:[]
+    },
+
+    ruleList:{
+        get:function () {
+            return this._ruleList;
+        },
+        set:function (val) {
+            this._ruleList = val;
+        }
+    },
+
     animationNamesString:{
         value:""
     },
@@ -735,7 +748,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
                 var animationNameList = this.animationName.split(",");
                 if(animationNameList.length > 1){
                     this.animationName = animationNameList[0];
-                    this.extractKeyframesFromRules(animationNameList);
+                    this.getAllAnimationRules(animationNameList);
                 }
 
                 this.animationNamesString = this.animationName;
@@ -806,14 +819,24 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
         }
     },
 
-    extractKeyframesFromRules:{
+    getAllAnimationRules:{
         value:function(ruleNames){
             //console.log(ruleNames);
+
             for(var i in ruleNames){
-                console.log(ruleNames[i].replace(/^\s+|\s+$/g,""));
-                var currName = ruleNames[i].replace(/^\s+|\s+$/g,"");
-                var test = this.application.ninja.stylesController.getAnimationRuleWithName(currName, this.application.ninja.currentDocument._document);
-                console.log(test);
+                var currentName = ruleNames[i].replace(/^\s+|\s+$/g,"");  // trim whitespace
+                var currentRule = this.application.ninja.stylesController.getAnimationRuleWithName(currentName, this.application.ninja.currentDocument._document);
+                this.ruleList[currentName] = currentRule;
+            }
+            this.recreatePropertyTracks(this.ruleList);
+        }
+    },
+
+    recreatePropertyTracks:{
+        value:function(ruleSet){
+            for(var i in ruleSet){
+                //console.log(i);
+                //console.log(ruleSet[i]);
             }
         }
     },
diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js
index 2a21c330..414c0535 100644
--- a/js/panels/Timeline/Tween.reel/Tween.js
+++ b/js/panels/Timeline/Tween.reel/Tween.js
@@ -248,7 +248,6 @@ var Tween = exports.Tween = Montage.create(Component, {
             } else {
                 this.parentComponent.parentComponent.updateKeyframeRule();
             }
-
         }
     },