diff options
Diffstat (limited to 'js/panels/Timeline')
4 files changed, 43 insertions, 22 deletions
diff --git a/js/panels/Timeline/Span.reel/Span.js b/js/panels/Timeline/Span.reel/Span.js index 91ce1cfb..3c491a53 100644 --- a/js/panels/Timeline/Span.reel/Span.js +++ b/js/panels/Timeline/Span.reel/Span.js | |||
@@ -71,6 +71,8 @@ var Span = exports.Span = Montage.create(Component, { | |||
71 | newVal = "none"; | 71 | newVal = "none"; |
72 | } | 72 | } |
73 | this._easing = newVal; | 73 | this._easing = newVal; |
74 | this.parentComponent.easing = this.easing; | ||
75 | this.parentComponent.tweenData.easing = this.easing; | ||
74 | this.parentComponent.setKeyframeEase(newVal); | 76 | this.parentComponent.setKeyframeEase(newVal); |
75 | this.needsDraw = true; | 77 | this.needsDraw = true; |
76 | } | 78 | } |
@@ -180,7 +182,7 @@ var Span = exports.Span = Montage.create(Component, { | |||
180 | handleEasingChoicesClick: { | 182 | handleEasingChoicesClick: { |
181 | value: function(event) { | 183 | value: function(event) { |
182 | event.stopPropagation(); | 184 | event.stopPropagation(); |
183 | 185 | ||
184 | // Remove the pointer to ourselves | 186 | // Remove the pointer to ourselves |
185 | //this.application.ninja.timeline.currentOpenSpanMenu = false; | 187 | //this.application.ninja.timeline.currentOpenSpanMenu = false; |
186 | 188 | ||
@@ -190,6 +192,8 @@ var Span = exports.Span = Montage.create(Component, { | |||
190 | 192 | ||
191 | // Set the easing | 193 | // Set the easing |
192 | this.easing = event.target.dataset.ninjaEase; | 194 | this.easing = event.target.dataset.ninjaEase; |
195 | this.parentComponent.easing = this.easing; | ||
196 | this.parentComponent.tweenData.easing = this.easing; | ||
193 | 197 | ||
194 | // Unbind the event handler | 198 | // Unbind the event handler |
195 | this.application.ninja.timeline.easingMenu.popup.contentEl.removeEventListener("click"); | 199 | this.application.ninja.timeline.easingMenu.popup.contentEl.removeEventListener("click"); |
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index e613d4d7..470062ba 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | |||
@@ -1401,27 +1401,43 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
1401 | 1401 | ||
1402 | timelineLeftPaneKeydown: { | 1402 | timelineLeftPaneKeydown: { |
1403 | value: function(event) { | 1403 | value: function(event) { |
1404 | var ua = navigator.userAgent.toLowerCase(), | ||
1405 | boolIsMac = false; | ||
1406 | if (ua.indexOf("mac") > -1) { | ||
1407 | boolIsMac = true; | ||
1408 | } | ||
1404 | if (event.keyCode === 16) { | 1409 | if (event.keyCode === 16) { |
1405 | // Shift key has been pressed | 1410 | // Shift key has been pressed |
1406 | this._isShiftPressed = true; | 1411 | this._isShiftPressed = true; |
1407 | } | 1412 | } |
1408 | if (event.keyCode === 17) { | 1413 | if ((event.keyCode === 17) && !boolIsMac) { |
1409 | // Control key has been pressed | 1414 | // Control key has been pressed |
1410 | this._isControlPressed = true; | 1415 | this._isControlPressed = true; |
1411 | } | 1416 | } |
1417 | if (event.metaKey === true) { | ||
1418 | this._isControlPressed = true; | ||
1419 | } | ||
1412 | } | 1420 | } |
1413 | }, | 1421 | }, |
1414 | 1422 | ||
1415 | timelineLeftPaneKeyup: { | 1423 | timelineLeftPaneKeyup: { |
1416 | value: function(event) { | 1424 | value: function(event) { |
1425 | var ua = navigator.userAgent.toLowerCase(), | ||
1426 | boolIsMac = false; | ||
1427 | if (ua.indexOf("mac") > -1) { | ||
1428 | boolIsMac = true; | ||
1429 | } | ||
1417 | if (event.keyCode === 16) { | 1430 | if (event.keyCode === 16) { |
1418 | // Shift key has been released | 1431 | // Shift key has been released |
1419 | this._isShiftPressed = false; | 1432 | this._isShiftPressed = false; |
1420 | } | 1433 | } |
1421 | if (event.keyCode === 17) { | 1434 | if ((event.keyCode === 17) && !boolIsMac) { |
1422 | // Control key has been released | 1435 | // Control key has been released |
1423 | this._isControlPressed = false; | 1436 | this._isControlPressed = false; |
1424 | } | 1437 | } |
1438 | if (event.metaKey === false) { | ||
1439 | this._isControlPressed = false; | ||
1440 | } | ||
1425 | } | 1441 | } |
1426 | }, | 1442 | }, |
1427 | createstageElement:{ | 1443 | createstageElement:{ |
diff --git a/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css b/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css index 7f61074e..6daedde8 100644 --- a/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css +++ b/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css | |||
@@ -86,53 +86,53 @@ | |||
86 | .timemark { font-family: 'Droid Sans'; font-size: 12px; text-shadow: 1px 1px 1px #3a3a3a; width: 76px; color: gray; float: left; padding-top: 6px; padding-left: 4px; text-align: left; } | 86 | .timemark { font-family: 'Droid Sans'; font-size: 12px; text-shadow: 1px 1px 1px #3a3a3a; width: 76px; color: gray; float: left; padding-top: 6px; padding-left: 4px; text-align: left; } |
87 | 87 | ||
88 | /* line 255, ../scss/TimelinePanel.scss */ | 88 | /* line 255, ../scss/TimelinePanel.scss */ |
89 | .playhead { height: 14px; width: 6px; position: absolute; top: 6px; left: -3px; z-index: 92; background-color: #b50003; opacity: 0.5; } | 89 | .playhead { height: 14px; width: 6px; position: absolute; top: 6px; left: -3px; z-index: 92; background-color: #b50003; opacity: 0.5; visibility: hidden; } |
90 | 90 | ||
91 | /* line 265, ../scss/TimelinePanel.scss */ | 91 | /* line 266, ../scss/TimelinePanel.scss */ |
92 | .playheadmarker { height: 100%; width: 1px; background-color: white; top: 0; left: 0; position: absolute; z-index: 91; opacity: 0.7; } | 92 | .playheadmarker { height: 100%; width: 1px; background-color: white; top: 0; left: 0; position: absolute; z-index: 91; opacity: 0.7; } |
93 | 93 | ||
94 | /* line 275, ../scss/TimelinePanel.scss */ | 94 | /* line 276, ../scss/TimelinePanel.scss */ |
95 | .timebar { height: 3px; width: 0; background-color: #ff0003; opacity: 0.3; top: 10px; position: absolute; border-top: #c7a19f thin solid; border-right: #ffffff thin solid; } | 95 | .timebar { height: 3px; width: 0; background-color: #ff0003; opacity: 0.3; top: 10px; position: absolute; border-top: #c7a19f thin solid; border-right: #ffffff thin solid; } |
96 | 96 | ||
97 | /* line 285, ../scss/TimelinePanel.scss */ | 97 | /* line 286, ../scss/TimelinePanel.scss */ |
98 | .endhottext { float: right; font-family: 'Droid Sans'; font-size: 12px; text-shadow: 1px 1px 1px #3a3a3a; color: white; margin-top: 0%; } | 98 | .timelinegutter .endhottext { float: right; font-family: 'Droid Sans'; font-size: 12px; text-shadow: 1px 1px 1px #3a3a3a; color: white; margin-top: 0%; } |
99 | 99 | ||
100 | /* line 293, ../scss/TimelinePanel.scss */ | 100 | /* line 294, ../scss/TimelinePanel.scss */ |
101 | .timeline-disabled { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgba(30, 30, 30, 0.796); z-index: 100; display: none; box-shadow: #111111 0px 0px 14px inset; } | 101 | .timeline-disabled { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgba(30, 30, 30, 0.796); z-index: 100; display: none; box-shadow: #111111 0px 0px 14px inset; } |
102 | 102 | ||
103 | /* line 304, ../scss/TimelinePanel.scss */ | 103 | /* line 305, ../scss/TimelinePanel.scss */ |
104 | .timeline-dnd-helper { -webkit-transform: scale(0.9, 0.9); } | 104 | .timeline-dnd-helper { -webkit-transform: scale(0.9, 0.9); } |
105 | 105 | ||
106 | /* line 307, ../scss/TimelinePanel.scss */ | 106 | /* line 308, ../scss/TimelinePanel.scss */ |
107 | .tl_slider { width: 65px; height: 5px; background: none; float: left; margin-left: 5%; visibility: hidden; } | 107 | .tl_slider { width: 65px; height: 5px; background: none; float: left; margin-left: 5%; visibility: hidden; } |
108 | 108 | ||
109 | /* Configuration menu */ | 109 | /* Configuration menu */ |
110 | /* line 317, ../scss/TimelinePanel.scss */ | 110 | /* line 318, ../scss/TimelinePanel.scss */ |
111 | .layer-master { position: relative; } | 111 | .layer-master { position: relative; } |
112 | 112 | ||
113 | /* line 320, ../scss/TimelinePanel.scss */ | 113 | /* line 321, ../scss/TimelinePanel.scss */ |
114 | .tl-configbutton { position: absolute; top: 0px; right: 2px; width: 20px; height: 20px; background-image: url(../images/icon-gear.png); background-repeat: no-repeat; cursor: pointer; z-index: 100; background-position: 100% 0px; } | 114 | .tl-configbutton { position: absolute; top: 0px; right: 2px; width: 20px; height: 20px; background-image: url(../images/icon-gear.png); background-repeat: no-repeat; cursor: pointer; z-index: 100; background-position: 100% 0px; } |
115 | 115 | ||
116 | /* line 332, ../scss/TimelinePanel.scss */ | 116 | /* line 333, ../scss/TimelinePanel.scss */ |
117 | .tl-configbutton:hover { width: 180px; } | 117 | .tl-configbutton:hover { width: 180px; } |
118 | 118 | ||
119 | /* line 336, ../scss/TimelinePanel.scss */ | 119 | /* line 337, ../scss/TimelinePanel.scss */ |
120 | .tl-configbutton .tl-dropdown { position: absolute; border: 1px solid black; top: 16px; right: 2px; width: 180px; padding-bottom: 7px; background-color: #474747; box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5); display: none; } | 120 | .tl-configbutton .tl-dropdown { position: absolute; border: 1px solid black; top: 16px; right: 2px; width: 180px; padding-bottom: 7px; background-color: #474747; box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5); display: none; } |
121 | 121 | ||
122 | /* line 347, ../scss/TimelinePanel.scss */ | 122 | /* line 348, ../scss/TimelinePanel.scss */ |
123 | .tl-configbutton.checked .tl-dropdown { display: block; } | 123 | .tl-configbutton.checked .tl-dropdown { display: block; } |
124 | 124 | ||
125 | /* line 351, ../scss/TimelinePanel.scss */ | 125 | /* line 352, ../scss/TimelinePanel.scss */ |
126 | .tl-configbutton .checkable { padding-left: 20px; height: 20px; line-height: 20px; margin-top: 3px; } | 126 | .tl-configbutton .checkable { padding-left: 20px; height: 20px; line-height: 20px; margin-top: 3px; } |
127 | 127 | ||
128 | /* line 357, ../scss/TimelinePanel.scss */ | 128 | /* line 358, ../scss/TimelinePanel.scss */ |
129 | .tl-configbutton .checkable:hover { background-color: #b2b2b2; color: #242424; text-shadow: none; } | 129 | .tl-configbutton .checkable:hover { background-color: #b2b2b2; color: #242424; text-shadow: none; } |
130 | 130 | ||
131 | /* line 362, ../scss/TimelinePanel.scss */ | 131 | /* line 363, ../scss/TimelinePanel.scss */ |
132 | .tl-configbutton .checkable.checked { background-image: url(../images/icon-checkmark.png); background-repeat: no-repeat; background-position: 6px 4px; } | 132 | .tl-configbutton .checkable.checked { background-image: url(../images/icon-checkmark.png); background-repeat: no-repeat; background-position: 6px 4px; } |
133 | 133 | ||
134 | /* line 368, ../scss/TimelinePanel.scss */ | 134 | /* line 369, ../scss/TimelinePanel.scss */ |
135 | .tl-configbutton .nj-divider { margin-top: 7px; } | 135 | .tl-configbutton .nj-divider { margin-top: 7px; } |
136 | 136 | ||
137 | /* line 372, ../scss/TimelinePanel.scss */ | 137 | /* line 373, ../scss/TimelinePanel.scss */ |
138 | .layer-hidden { display: none; } | 138 | .layer-hidden { display: none; } |
diff --git a/js/panels/Timeline/TimelinePanel.reel/scss/TimelinePanel.scss b/js/panels/Timeline/TimelinePanel.reel/scss/TimelinePanel.scss index d4789d65..86e22779 100644 --- a/js/panels/Timeline/TimelinePanel.reel/scss/TimelinePanel.scss +++ b/js/panels/Timeline/TimelinePanel.reel/scss/TimelinePanel.scss | |||
@@ -261,6 +261,7 @@ | |||
261 | z-index: 92; | 261 | z-index: 92; |
262 | background-color: #b50003; | 262 | background-color: #b50003; |
263 | opacity: 0.5; | 263 | opacity: 0.5; |
264 | visibility: hidden; | ||
264 | } | 265 | } |
265 | .playheadmarker{ | 266 | .playheadmarker{ |
266 | height: 100%; | 267 | height: 100%; |