diff options
-rwxr-xr-x | css/ninja.css | 75 | ||||
-rw-r--r-- | js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 78 | ||||
-rwxr-xr-x | scss/imports/scss/_toolbar.scss | 87 |
3 files changed, 118 insertions, 122 deletions
diff --git a/css/ninja.css b/css/ninja.css index 4d450208..f085f6be 100755 --- a/css/ninja.css +++ b/css/ninja.css | |||
@@ -212,6 +212,10 @@ body { position: absolute; margin: 0px; width: 100%; height: 100%; background-co | |||
212 | 212 | ||
213 | #mainContent .CodeMirror-scroll { height: 100%; overflow: scroll; overflow-x: auto; overflow-y: auto; } | 213 | #mainContent .CodeMirror-scroll { height: 100%; overflow: scroll; overflow-x: auto; overflow-y: auto; } |
214 | 214 | ||
215 | .montage-editor-frame { position: absolute; z-index: 7; top: 0; left: 0; display: none; -webkit-user-select: initial; } | ||
216 | |||
217 | .montage-editor { padding: 0px; word-wrap: normal; } | ||
218 | |||
215 | .panelContainer { margin: 0px; padding: 0px 0px; position: relative; overflow: auto; } | 219 | .panelContainer { margin: 0px; padding: 0px 0px; position: relative; overflow: auto; } |
216 | 220 | ||
217 | .panelDisclosureIcon { background-image: url("../images/panels/panelDisclosureIcon.png"); background-repeat: no-repeat; width: 16px; height: 16px; float: left; -webkit-transition-property: rotate; -webkit-transition-duration: 0.2s; -webkit-transition-timing-function: linear; padding-right: 2px; } | 221 | .panelDisclosureIcon { background-image: url("../images/panels/panelDisclosureIcon.png"); background-repeat: no-repeat; width: 16px; height: 16px; float: left; -webkit-transition-property: rotate; -webkit-transition-duration: 0.2s; -webkit-transition-timing-function: linear; padding-right: 2px; } |
@@ -888,49 +892,34 @@ input[type="radio"]:disabled { opacity: .3; background: #282828; border-width: 1 | |||
888 | /*width: 26px;*/ | 892 | /*width: 26px;*/ |
889 | /*opacity: 0.7;*/ | 893 | /*opacity: 0.7;*/ |
890 | /*}*/ | 894 | /*}*/ |
891 | /*// Selection Tool Options */ | 895 | .topAlignUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -240px -54px; background-repeat: no-repeat; height: 23px; width: 26px; } |
892 | /*.topAlignUp {*/ | 896 | |
893 | /*@include background-pos(8,2,26px,23px);*/ | 897 | .rightAlignUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -270px -54px; background-repeat: no-repeat; height: 23px; width: 26px; } |
894 | /*}*/ | 898 | |
895 | /*.rightAlignUp {*/ | 899 | .bottomAlignUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -300px -54px; background-repeat: no-repeat; height: 23px; width: 26px; } |
896 | /*@include background-pos(9,2,26px,23px);*/ | 900 | |
897 | /*}*/ | 901 | .verticalLeftUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -330px -54px; background-repeat: no-repeat; height: 23px; width: 26px; } |
898 | /*.bottomAlignUp {*/ | 902 | |
899 | /*@include background-pos(10,2,26px,23px);*/ | 903 | .verticalCenterUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -360px -54px; background-repeat: no-repeat; height: 23px; width: 26px; } |
900 | /*}*/ | 904 | |
901 | /*.verticalLeftUp {*/ | 905 | .verticalRightUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -390px -54px; background-repeat: no-repeat; height: 23px; width: 26px; } |
902 | /*@include background-pos(11,2,26px,23px);*/ | 906 | |
903 | /*}*/ | 907 | .distRightUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: 0px -81px; background-repeat: no-repeat; height: 23px; width: 26px; } |
904 | /*.verticalCenterUp {*/ | 908 | |
905 | /*@include background-pos(12,2,26px,23px);*/ | 909 | .distLeftUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -420px -54px; background-repeat: no-repeat; height: 23px; width: 26px; } |
906 | /*}*/ | 910 | |
907 | /*.verticalRightUp {*/ | 911 | .distCenterUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -60px -81px; background-repeat: no-repeat; height: 23px; width: 26px; } |
908 | /*@include background-pos(13,2,26px,23px);*/ | 912 | |
909 | /*}*/ | 913 | .distTopUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -30px -81px; background-repeat: no-repeat; height: 23px; width: 26px; } |
910 | /*.distRightUp {*/ | 914 | |
911 | /*@include background-pos(0,3,26px,23px);*/ | 915 | .distBottomUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -90px -81px; background-repeat: no-repeat; height: 23px; width: 26px; } |
912 | /*}*/ | 916 | |
913 | /*.distLeftUp {*/ | 917 | .distVCenterUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -450px -54px; background-repeat: no-repeat; height: 23px; width: 26px; } |
914 | /*@include background-pos(14,2,26px,23px);*/ | 918 | |
915 | /*}*/ | 919 | .bucketToolUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -330px 0px; background-repeat: no-repeat; height: 23px; width: 26px; } |
916 | /*.distCenterUp {*/ | 920 | |
917 | /*@include background-pos(2,3,26px,23px);*/ | 921 | .pencilToolUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -270px -27px; background-repeat: no-repeat; height: 23px; width: 26px; } |
918 | /*}*/ | 922 | |
919 | /*.distTopUp {*/ | ||
920 | /*@include background-pos(1,3,26px,23px);*/ | ||
921 | /*}*/ | ||
922 | /*.distBottomUp {*/ | ||
923 | /*@include background-pos(3,3,26px,23px);*/ | ||
924 | /*}*/ | ||
925 | /*.distVCenterUp {*/ | ||
926 | /*@include background-pos(15,2,26px,23px);*/ | ||
927 | /*}*/ | ||
928 | /*.bucketToolUp {*/ | ||
929 | /*@include background-pos(11,0,26px,23px);*/ | ||
930 | /*}*/ | ||
931 | /*.pencilToolUp {*/ | ||
932 | /*@include background-pos(9,1,26px,23px);*/ | ||
933 | /*}*/ | ||
934 | .blueDiv { background: blue; opacity: 0.2; } | 923 | .blueDiv { background: blue; opacity: 0.2; } |
935 | 924 | ||
936 | ::-webkit-scrollbar { width: 11px; height: 11px; } | 925 | ::-webkit-scrollbar { width: 11px; height: 11px; } |
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index fddfd170..61da9e36 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | |||
@@ -358,9 +358,11 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
358 | 358 | ||
359 | didDraw:{ | 359 | didDraw:{ |
360 | value:function () { | 360 | value:function () { |
361 | if (this._openDocRedrawCheck) { | 361 | if(this.application.ninja.currentDocument.documentRoot.children[0]){ |
362 | this.retrieveStoredTweens(); | 362 | if (this._openDocRedrawCheck) { |
363 | this._openDocRedrawCheck = false; | 363 | this.retrieveStoredTweens(); |
364 | this._openDocRedrawCheck = false; | ||
365 | } | ||
364 | } | 366 | } |
365 | } | 367 | } |
366 | }, | 368 | }, |
@@ -459,42 +461,48 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { | |||
459 | this.animatedElement = this.application.ninja.timeline.arrLayers[this.trackID - 1].elementsList[0]; | 461 | this.animatedElement = this.application.ninja.timeline.arrLayers[this.trackID - 1].elementsList[0]; |
460 | this.animationName = this.application.ninja.stylesController.getElementStyle(this.animatedElement, "-webkit-animation-name"); | 462 | this.animationName = this.application.ninja.stylesController.getElementStyle(this.animatedElement, "-webkit-animation-name"); |
461 | this.animationDuration = this.application.ninja.stylesController.getElementStyle(this.animatedElement, "-webkit-animation-duration"); | 463 | this.animationDuration = this.application.ninja.stylesController.getElementStyle(this.animatedElement, "-webkit-animation-duration"); |
462 | this.trackDuration = this.animationDuration.split("s"); | 464 | if(this.animationDuration){ |
463 | this.currentMilliSec = this.trackDuration[0] * 1000; | 465 | this.trackDuration = this.animationDuration.split("s"); |
464 | this.currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); | 466 | this.currentMilliSec = this.trackDuration[0] * 1000; |
465 | this.clickPos = this.currentMilliSec / this.currentMillisecPerPixel; | 467 | this.currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); |
466 | this.nextKeyframe = 0; | 468 | this.clickPos = this.currentMilliSec / this.currentMillisecPerPixel; |
467 | 469 | this.nextKeyframe = 0; | |
468 | this.currentKeyframeRule = this.application.ninja.stylesController.getAnimationRuleWithName(this.animationName, this.application.ninja.currentDocument._document); | 470 | |
469 | while (this.currentKeyframeRule[i]) { | 471 | this.currentKeyframeRule = this.application.ninja.stylesController.getAnimationRuleWithName(this.animationName, this.application.ninja.currentDocument._document); |
470 | var newTween = {}; | 472 | while (this.currentKeyframeRule[i]) { |
471 | if (this.currentKeyframeRule[i].keyText === "0%") { | 473 | var newTween = {}; |
472 | newTween.spanWidth = 0; | 474 | |
473 | newTween.keyFramePosition = 0; | 475 | if (this.currentKeyframeRule[i].keyText === "0%") { |
474 | newTween.keyFrameMillisec = 0; | 476 | newTween.spanWidth = 0; |
475 | newTween.tweenID = 0; | 477 | newTween.keyFramePosition = 0; |
476 | newTween.spanPosition = 0; | 478 | newTween.keyFrameMillisec = 0; |
477 | this.tweens.push(newTween); | 479 | newTween.tweenID = 0; |
480 | newTween.spanPosition = 0; | ||
481 | this.tweens.push(newTween); | ||
478 | 482 | ||
479 | } | 483 | } |
480 | else { | 484 | else { |
481 | percentValue = this.currentKeyframeRule[i].keyText; | 485 | percentValue = this.currentKeyframeRule[i].keyText; |
482 | splitValue = percentValue.split("%"); | 486 | splitValue = percentValue.split("%"); |
483 | fraction = splitValue[0] / 100; | 487 | fraction = splitValue[0] / 100; |
484 | this.currentMilliSec = fraction * this.trackDuration[0] * 1000; | 488 | this.currentMilliSec = fraction * this.trackDuration[0] * 1000; |
485 | this.currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); | 489 | this.currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); |
486 | this.clickPos = this.currentMilliSec / this.currentMillisecPerPixel; | 490 | this.clickPos = this.currentMilliSec / this.currentMillisecPerPixel; |
487 | newTween.spanWidth = this.clickPos - this.tweens[this.tweens.length - 1].keyFramePosition; | 491 | newTween.spanWidth = this.clickPos - this.tweens[this.tweens.length - 1].keyFramePosition; |
488 | newTween.keyFramePosition = this.clickPos; | 492 | newTween.keyFramePosition = this.clickPos; |
489 | newTween.keyFrameMillisec = this.currentMilliSec; | 493 | newTween.keyFrameMillisec = this.currentMilliSec; |
490 | newTween.tweenID = this.nextKeyframe; | 494 | newTween.tweenID = this.nextKeyframe; |
491 | newTween.spanPosition = this.clickPos - newTween.spanWidth; | 495 | newTween.spanPosition = this.clickPos - newTween.spanWidth; |
492 | this.tweens.push(newTween); | 496 | this.tweens.push(newTween); |
493 | 497 | ||
494 | 498 | ||
499 | } | ||
500 | i++; | ||
501 | this.nextKeyframe += 1; | ||
495 | } | 502 | } |
496 | i++; | 503 | } |
497 | this.nextKeyframe += 1; | 504 | else{ |
505 | return; | ||
498 | } | 506 | } |
499 | } | 507 | } |
500 | }, | 508 | }, |
diff --git a/scss/imports/scss/_toolbar.scss b/scss/imports/scss/_toolbar.scss index 00d8b5f0..9bf540cd 100755 --- a/scss/imports/scss/_toolbar.scss +++ b/scss/imports/scss/_toolbar.scss | |||
@@ -186,72 +186,71 @@ | |||
186 | /*opacity: 0.7;*/ | 186 | /*opacity: 0.7;*/ |
187 | /*}*/ | 187 | /*}*/ |
188 | 188 | ||
189 | /*// Selection Tool Options */ | 189 | // Selection Tool Options |
190 | /*.topAlignUp {*/ | 190 | .topAlignUp { |
191 | 191 | ||
192 | /*@include background-pos(8,2,26px,23px);*/ | 192 | @include background-pos(8,2,26px,23px); |
193 | /*}*/ | 193 | } |
194 | 194 | ||
195 | /*.rightAlignUp {*/ | 195 | .rightAlignUp { |
196 | 196 | ||
197 | /*@include background-pos(9,2,26px,23px);*/ | 197 | @include background-pos(9,2,26px,23px); |
198 | /*}*/ | 198 | } |
199 | 199 | ||
200 | /*.bottomAlignUp {*/ | 200 | .bottomAlignUp { |
201 | 201 | ||
202 | /*@include background-pos(10,2,26px,23px);*/ | 202 | @include background-pos(10,2,26px,23px); |
203 | /*}*/ | 203 | } |
204 | 204 | ||
205 | /*.verticalLeftUp {*/ | 205 | .verticalLeftUp { |
206 | 206 | ||
207 | /*@include background-pos(11,2,26px,23px);*/ | 207 | @include background-pos(11,2,26px,23px); |
208 | /*}*/ | 208 | } |
209 | 209 | ||
210 | /*.verticalCenterUp {*/ | 210 | .verticalCenterUp { |
211 | 211 | ||
212 | /*@include background-pos(12,2,26px,23px);*/ | 212 | @include background-pos(12,2,26px,23px); |
213 | /*}*/ | 213 | } |