aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rwxr-xr-xcss/ninja.css4
-rwxr-xr-xjs/ninja.reel/ninja.js69
-rwxr-xr-xjs/panels/Splitter.js13
-rw-r--r--js/panels/drag-drop-composer.js4
-rwxr-xr-xscss/imports/scss/_MainWindow.scss2
-rwxr-xr-xscss/imports/scss/_PanelUI.scss2
6 files changed, 60 insertions, 34 deletions
diff --git a/css/ninja.css b/css/ninja.css
index 605951e4..650f3b08 100755
--- a/css/ninja.css
+++ b/css/ninja.css
@@ -80,7 +80,7 @@ body { position: absolute; margin: 0px; width: 100%; height: 100%; background-co
80 80
81#topPanelContainer { overflow: hidden; margin-bottom: 2px; height: 32px; } 81#topPanelContainer { overflow: hidden; margin-bottom: 2px; height: 32px; }
82 82
83.timelinePanel { background: transparent; height: 150px; min-height: 46px; max-height: 50%; overflow: auto; } 83.timelinePanel { background: transparent; height: 150px; min-height: 46px; max-height: 50%; overflow: auto; -webkit-transition: all 0.15s linear; }
84 84
85.panelContainer { display: -webkit-box; -webkit-box-orient: vertical; position: relative; } 85.panelContainer { display: -webkit-box; -webkit-box-orient: vertical; position: relative; }
86 86
@@ -604,7 +604,7 @@ button.panel-button { -webkit-appearance: none; font-size: 9px; color: white; ba
604 604
605.pp_strokelabel { border: none; margin: -1px 8px 0px 27px; } 605.pp_strokelabel { border: none; margin: -1px 8px 0px 27px; }
606 606
607.pp_filllabel { border-width: none; margin: -1px 8px 0px 34px; } 607.pp_filllabel { border: none; margin: -1px 8px 0px 34px; }
608 608
609.panels { display: -webkit-box; position: absolute; -webkit-box-orient: vertical; -webkit-box-align: stretch; height: 100%; width: 100%; overflow: hidden; } 609.panels { display: -webkit-box; position: absolute; -webkit-box-orient: vertical; -webkit-box-align: stretch; height: 100%; width: 100%; overflow: hidden; }
610 610
diff --git a/js/ninja.reel/ninja.js b/js/ninja.reel/ninja.js
index 9cbbc9b9..9b5081dd 100755
--- a/js/ninja.reel/ninja.js
+++ b/js/ninja.reel/ninja.js
@@ -25,7 +25,7 @@ exports.Ninja = Montage.create(Component, {
25 }, 25 },
26 26
27 _isResizing: { 27 _isResizing: {
28 value: false 28 value: null
29 }, 29 },
30 _resizedHeight : { 30 _resizedHeight : {
31 value: 0 31 value: 0
@@ -36,11 +36,18 @@ exports.Ninja = Montage.create(Component, {
36 36
37 height: { 37 height: {
38 get: function() { 38 get: function() {
39 if(this._height === null) {
40 var storedData = this.application.localStorage.getItem("timelinePanel");
41 if(storedData && storedData.value) {
42 this._height = storedData.value;
43 }
44 }
39 return this._height; 45 return this._height;
40 }, 46 },
41 set: function(val) { 47 set: function(val) {
42 if(this._height != val) { 48 if(this._height != val) {
43 this._height = val; 49 this._height = val;
50 this.application.localStorage.setItem("timelinePanel", {"version": this.version, "value": val});
44 this.needsDraw = true; 51 this.needsDraw = true;
45 } 52 }
46 53
@@ -56,11 +63,18 @@ exports.Ninja = Montage.create(Component, {
56 63
57 width: { 64 width: {
58 get: function() { 65 get: function() {
66 if(this._width === null) {
67 var storedData = this.application.localStorage.getItem("rightPanelsContainer");
68 if(storedData && storedData.value) {
69 this._width = storedData.value;
70 }
71 }
59 return this._width; 72 return this._width;
60 }, 73 },
61 set: function(val) { 74 set: function(val) {
62 if(this._width != val) { 75 if(this._width != val) {
63 this._width = val; 76 this._width = val;
77 this.application.localStorage.setItem("rightPanelsContainer", {"version": this.version, "value": val});
64 this.needsDraw = true; 78 this.needsDraw = true;
65 } 79 }
66 80
@@ -72,6 +86,8 @@ exports.Ninja = Montage.create(Component, {
72 this.isResizing = true; 86 this.isResizing = true;
73 this.height = parseInt(this.timeline.element.offsetHeight); 87 this.height = parseInt(this.timeline.element.offsetHeight);
74 this.width = parseInt(this.rightPanelContainer.offsetWidth); 88 this.width = parseInt(this.rightPanelContainer.offsetWidth);
89 this.rightPanelContainer.classList.add("disableTransition");
90 this.timeline.element.classList.add("disableTransition");
75 this.needsDraw = true; 91 this.needsDraw = true;
76 } 92 }
77 }, 93 },
@@ -80,7 +96,6 @@ exports.Ninja = Montage.create(Component, {
80 value:function(e) { 96 value:function(e) {
81 this._resizedHeight = e._event.dY; 97 this._resizedHeight = e._event.dY;
82 this._resizedWidth = e._event.dX; 98 this._resizedWidth = e._event.dX;
83 console.log("resizing");
84 this.stage.resizeCanvases = true; 99 this.stage.resizeCanvases = true;
85 this.needsDraw = true; 100 this.needsDraw = true;
86 } 101 }
@@ -88,13 +103,17 @@ exports.Ninja = Montage.create(Component, {
88 103
89 handleResizeEnd: { 104 handleResizeEnd: {
90 value: function(e) { 105 value: function(e) {
91 this.height -= this._resizedHeight; 106// this.height -= this._resizedHeight;
92 this.width -= this._resizedWidth; 107// this.width -= this._resizedWidth;
93 this.stage.resizeCanvases = true; 108 this.stage.resizeCanvases = true;
94 this._resizedHeight = 0; 109 this._resizedHeight = 0;
95 this._resizedWidth = 0; 110 this._resizedWidth = 0;
96 this.isResizing = false; 111 this.isResizing = false;
97 this.needsDraw = true; 112 this.needsDraw = true;
113 this.rightPanelContainer.classList.remove("disableTransition");
114 this.timeline.element.classList.remove("disableTransition");
115 this.height = this.timeline.element.offsetHeight;
116 this.width = this.rightPanelContainer.offsetWidth;
98 } 117 }
99 }, 118 },
100 119
@@ -104,9 +123,10 @@ exports.Ninja = Montage.create(Component, {
104 this.height = 140; 123 this.height = 140;
105 this._resizedHeight = 0; 124 this._resizedHeight = 0;
106 this._resizedWidth = 0; 125 this._resizedWidth = 0;
107 this.needsDraw = true;
108 this.timelineSplitter.collapsed = false; 126 this.timelineSplitter.collapsed = false;
109 this.panelSplitter.collapsed = false; 127 this.panelSplitter.collapsed = false;
128 this.stage.resizeCanvases = true;
129 this.needsDraw = true;
110 } 130 }
111 }, 131 },
112 132
@@ -167,30 +187,28 @@ exports.Ninja = Montage.create(Component, {
167 187
168 willDraw: { 188 willDraw: {
169 value: function() { 189 value: function() {
170 if (this.height === null) { 190
171 this.height = parseInt(this.timeline.element.offsetHeight);
172 }
173 if (this.width === null) {
174 this.width = parseInt(this.rightPanelContainer.offsetWidth);
175 }
176 } 191 }
177 }, 192 },
178 193
179 draw: { 194 draw: {
180 value: function() { 195 value: function() {
181 if (this.height - this._resizedHeight < 46) { 196 if(this.isResizing) {
182 this.timelineSplitter.collapsed = true; 197 if (this.height - this._resizedHeight < 46) {
183 } else { 198 this.timelineSplitter.collapsed = true;
184 this.timelineSplitter.collapsed = false; 199 } else {
185 } 200 this.timelineSplitter.collapsed = false;
186 if (this.width - this._resizedWidth < 30) { 201 }
187 this.panelSplitter.collapsed = true;
188 } else {
189 this.panelSplitter.collapsed = false;
190 }
191 202
192 this.timeline.element.style.height = (this.height - this._resizedHeight) + "px"; 203 if (this.width - this._resizedWidth < 30) {
193 this.rightPanelContainer.style.width = (this.width - this._resizedWidth) + "px"; 204 this.panelSplitter.collapsed = true;
205 } else {
206 this.panelSplitter.collapsed = false;
207 }
208
209 }
210 this.rightPanelContainer.style.width = (this.width - this._resizedWidth) + "px";
211 this.timeline.element.style.height = (this.height - this._resizedHeight) + "px";
194 } 212 }
195 }, 213 },
196 214
@@ -200,10 +218,7 @@ exports.Ninja = Montage.create(Component, {
200 218
201 didDraw: { 219 didDraw: {
202 value: function() { 220 value: function() {
203 if (!this.isResizing) { 221
204 this.height = this.timeline.element.offsetHeight;
205 this.width = this.rightPanelContainer.offsetWidth;
206 }
207 if(!this._didDraw) { 222 if(!this._didDraw) {
208 if (!this.application.ninja.coreIoApi.ioServiceDetected) { 223 if (!this.application.ninja.coreIoApi.ioServiceDetected) {
209 var check = this.application.ninja.coreIoApi.cloudAvailable(); 224 var check = this.application.ninja.coreIoApi.cloudAvailable();
diff --git a/js/panels/Splitter.js b/js/panels/Splitter.js
index 6791e0d5..ac45b4ba 100755
--- a/js/panels/Splitter.js
+++ b/js/panels/Splitter.js
@@ -94,7 +94,11 @@ exports.Splitter = Montage.create(Component, {
94 handleClick : { 94 handleClick : {
95 value: function() { 95 value: function() {
96 if (!this.disabled) { 96 if (!this.disabled) {
97 this.panel.addEventListener("webkitTransitionEnd", this, false); 97 if(this.panel.element) {
98 this.panel.element.addEventListener("webkitTransitionEnd", this, false);
99 } else {
100 this.panel.addEventListener("webkitTransitionEnd", this, false);
101 }
98 this.collapsed = !this.collapsed; 102 this.collapsed = !this.collapsed;
99 this.needsDraw = true; 103 this.needsDraw = true;
100 } 104 }
@@ -103,7 +107,12 @@ exports.Splitter = Montage.create(Component, {
103 107
104 handleWebkitTransitionEnd: { 108 handleWebkitTransitionEnd: {
105 value: function() { 109 value: function() {
106 this.panel.removeEventListener("webkitTransitionEnd", this, false); 110 if(this.panel.element) {
111 this.panel.element.removeEventListener("webkitTransitionEnd", this, false);
112 } else {
113 this.panel.removeEventListener("webkitTransitionEnd", this, false);
114 }
115
107 this.application.ninja.stage.resizeCanvases = true; 116 this.application.ninja.stage.resizeCanvases = true;