From bff711520b7d21cfffe07c7a14fe8870243ba796 Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Thu, 29 Mar 2012 14:06:22 -0700 Subject: Resizing Bugs Signed-off-by: Armen Kesablyan --- css/ninja.css | 2 +- js/ninja.reel/ninja.js | 53 +++++++++++++++++++------------------- js/panels/Splitter.js | 13 ++++++++-- scss/imports/scss/_MainWindow.scss | 2 +- 4 files changed, 39 insertions(+), 31 deletions(-) diff --git a/css/ninja.css b/css/ninja.css index 605951e4..c4015a21 100755 --- a/css/ninja.css +++ b/css/ninja.css @@ -80,7 +80,7 @@ body { position: absolute; margin: 0px; width: 100%; height: 100%; background-co #topPanelContainer { overflow: hidden; margin-bottom: 2px; height: 32px; } -.timelinePanel { background: transparent; height: 150px; min-height: 46px; max-height: 50%; overflow: auto; } +.timelinePanel { background: transparent; height: 150px; min-height: 46px; max-height: 50%; overflow: auto; -webkit-transition: all 0.15s linear; } .panelContainer { display: -webkit-box; -webkit-box-orient: vertical; position: relative; } diff --git a/js/ninja.reel/ninja.js b/js/ninja.reel/ninja.js index ca094936..c3e00911 100755 --- a/js/ninja.reel/ninja.js +++ b/js/ninja.reel/ninja.js @@ -24,7 +24,7 @@ exports.Ninja = Montage.create(Component, { }, _isResizing: { - value: false + value: null }, _resizedHeight : { value: 0 @@ -40,7 +40,6 @@ exports.Ninja = Montage.create(Component, { set: function(val) { if(this._height != val) { this._height = val; - this.needsDraw = true; } } @@ -60,7 +59,6 @@ exports.Ninja = Montage.create(Component, { set: function(val) { if(this._width != val) { this._width = val; - this.needsDraw = true; } } @@ -71,6 +69,8 @@ exports.Ninja = Montage.create(Component, { this.isResizing = true; this.height = parseInt(this.timeline.element.offsetHeight); this.width = parseInt(this.rightPanelContainer.offsetWidth); + this.rightPanelContainer.classList.add("disableTransition"); + this.timeline.element.classList.add("disableTransition"); this.needsDraw = true; } }, @@ -79,7 +79,6 @@ exports.Ninja = Montage.create(Component, { value:function(e) { this._resizedHeight = e._event.dY; this._resizedWidth = e._event.dX; - console.log("resizing"); this.stage.resizeCanvases = true; this.needsDraw = true; } @@ -87,13 +86,17 @@ exports.Ninja = Montage.create(Component, { handleResizeEnd: { value: function(e) { - this.height -= this._resizedHeight; - this.width -= this._resizedWidth; +// this.height -= this._resizedHeight; +// this.width -= this._resizedWidth; this.stage.resizeCanvases = true; this._resizedHeight = 0; this._resizedWidth = 0; this.isResizing = false; this.needsDraw = true; + this.rightPanelContainer.classList.remove("disableTransition"); + this.timeline.element.classList.remove("disableTransition"); + this.height = this.timeline.element.offsetHeight; + this.width = this.rightPanelContainer.offsetWidth; } }, @@ -106,6 +109,7 @@ exports.Ninja = Montage.create(Component, { this.needsDraw = true; this.timelineSplitter.collapsed = false; this.panelSplitter.collapsed = false; + this.stage.resizeCanvases = true; } }, @@ -167,30 +171,28 @@ exports.Ninja = Montage.create(Component, { willDraw: { value: function() { - if (this.height === null) { - this.height = parseInt(this.timeline.element.offsetHeight); - } - if (this.width === null) { - this.width = parseInt(this.rightPanelContainer.offsetWidth); - } + } }, draw: { value: function() { - if (this.height - this._resizedHeight < 46) { - this.timelineSplitter.collapsed = true; - } else { - this.timelineSplitter.collapsed = false; - } - if (this.width - this._resizedWidth < 30) { - this.panelSplitter.collapsed = true; - } else { - this.panelSplitter.collapsed = false; + if(this.isResizing) { + if (this.height - this._resizedHeight < 46) { + this.timelineSplitter.collapsed = true; + } else { + this.timelineSplitter.collapsed = false; + } + this.timeline.element.style.height = (this.height - this._resizedHeight) + "px"; + + if (this.width - this._resizedWidth < 30) { + this.panelSplitter.collapsed = true; + } else { + this.panelSplitter.collapsed = false; + } + this.rightPanelContainer.style.width = (this.width - this._resizedWidth) + "px"; } - this.timeline.element.style.height = (this.height - this._resizedHeight) + "px"; - this.rightPanelContainer.style.width = (this.width - this._resizedWidth) + "px"; } }, @@ -200,10 +202,7 @@ exports.Ninja = Montage.create(Component, { didDraw: { value: function() { - if (!this.isResizing) { - this.height = this.timeline.element.offsetHeight; - this.width = this.rightPanelContainer.offsetWidth; - } + if(!this._didDraw) { if (!this.application.ninja.coreIoApi.ioServiceDetected) { 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, { handleClick : { value: function() { if (!this.disabled) { - this.panel.addEventListener("webkitTransitionEnd", this, false); + if(this.panel.element) { + this.panel.element.addEventListener("webkitTransitionEnd", this, false); + } else { + this.panel.addEventListener("webkitTransitionEnd", this, false); + } this.collapsed = !this.collapsed; this.needsDraw = true; } @@ -103,7 +107,12 @@ exports.Splitter = Montage.create(Component, { handleWebkitTransitionEnd: { value: function() { - this.panel.removeEventListener("webkitTransitionEnd", this, false); + if(this.panel.element) { + this.panel.element.removeEventListener("webkitTransitionEnd", this, false); + } else { + this.panel.removeEventListener("webkitTransitionEnd", this, false); + } + this.application.ninja.stage.resizeCanvases = true; } }, diff --git a/scss/imports/scss/_MainWindow.scss b/scss/imports/scss/_MainWindow.scss index ba9851da..f6068ddb 100755 --- a/scss/imports/scss/_MainWindow.scss +++ b/scss/imports/scss/_MainWindow.scss @@ -89,7 +89,7 @@ min-height:46px; max-height:50%; overflow:auto; - + -webkit-transition: all 0.15s linear; } .panelContainer { -- cgit v1.2.3