From f92838b6ec33e2eb0f8eb06f3cbc7419f38143a1 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Wed, 23 May 2012 11:43:43 -0700 Subject: Diamond keyframes Signed-off-by: Jonathan Duran --- js/panels/Timeline/Keyframe.reel/Keyframe.js | 2 +- js/panels/Timeline/Keyframe.reel/css/Keyframe.css | 8 +++-- .../Timeline/TimelineTrack.reel/TimelineTrack.js | 35 ++++++++++++++++++---- js/panels/Timeline/Tween.reel/Tween.js | 1 - 4 files changed, 35 insertions(+), 11 deletions(-) (limited to 'js/panels/Timeline') 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(); } - } }, -- cgit v1.2.3