From 01211be8e96360dcccdc421e5cb19c7708f5dfdd Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Wed, 28 Mar 2012 14:37:49 -0700 Subject: Bug #1073: Panels interact with hottest drag drop Signed-off-by: Armen Kesablyan --- js/panels/drag-drop-composer.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/js/panels/drag-drop-composer.js b/js/panels/drag-drop-composer.js index b36c8334..4791bd6d 100644 --- a/js/panels/drag-drop-composer.js +++ b/js/panels/drag-drop-composer.js @@ -91,7 +91,9 @@ exports.DragDropComposer = Montage.create(Composer, { e.stopImmediatePropagation(); if (!this._dragover) { this._dragover = true; - this.component.element.classList.add("dragOver"); + if (this.component.application.ninja.componentBeingDragged) { + this.component.element.classList.add("dragOver"); + } } } }, -- cgit v1.2.3 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 From e6299d0965d669cd296de1b2ffc1b30734ead43b Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Thu, 29 Mar 2012 15:58:36 -0700 Subject: Bug Fix: Height and width of panels not be kept Signed-off-by: Armen Kesablyan --- js/ninja.reel/ninja.js | 24 ++++++++++++++++++++---- 1 file changed, 20 insertions(+), 4 deletions(-) diff --git a/js/ninja.reel/ninja.js b/js/ninja.reel/ninja.js index c3e00911..068a44bc 100755 --- a/js/ninja.reel/ninja.js +++ b/js/ninja.reel/ninja.js @@ -35,11 +35,19 @@ exports.Ninja = Montage.create(Component, { height: { get: function() { + if(this._height === null) { + var storedData = this.application.localStorage.getItem("timelinePanel"); + if(storedData && storedData.value) { + this._height = storedData.value; + } + } return this._height; }, set: function(val) { if(this._height != val) { this._height = val; + this.application.localStorage.setItem("timelinePanel", {"version": this.version, "value": val}); + this.needsDraw = true; } } @@ -54,11 +62,19 @@ exports.Ninja = Montage.create(Component, { width: { get: function() { + if(this._width === null) { + var storedData = this.application.localStorage.getItem("rightPanelsContainer"); + if(storedData && storedData.value) { + this._width = storedData.value; + } + } return this._width; }, set: function(val) { if(this._width != val) { this._width = val; + this.application.localStorage.setItem("rightPanelsContainer", {"version": this.version, "value": val}); + this.needsDraw = true; } } @@ -106,10 +122,10 @@ exports.Ninja = Montage.create(Component, { this.height = 140; this._resizedHeight = 0; this._resizedWidth = 0; - this.needsDraw = true; this.timelineSplitter.collapsed = false; this.panelSplitter.collapsed = false; this.stage.resizeCanvases = true; + this.needsDraw = true; } }, @@ -183,16 +199,16 @@ exports.Ninja = Montage.create(Component, { } 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.rightPanelContainer.style.width = (this.width - this._resizedWidth) + "px"; + this.timeline.element.style.height = (this.height - this._resizedHeight) + "px"; } }, -- cgit v1.2.3 From 7aefa059c79c9bef5c7a8a93cdfbd1ce55f69118 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Thu, 29 Mar 2012 16:28:34 -0700 Subject: Presets - Remove style transition when transition doesn't start. Also added temporary fix for aggregating animations (from timeline/presets) --- js/controllers/presets-controller.js | 76 +++++++++++++++++--------- js/panels/presets/default-animation-presets.js | 4 +- 2 files changed, 54 insertions(+), 26 deletions(-) diff --git a/js/controllers/presets-controller.js b/js/controllers/presets-controller.js index 7152ba93..e436023a 100644 --- a/js/controllers/presets-controller.js +++ b/js/controllers/presets-controller.js @@ -20,14 +20,39 @@ exports.PresetsController = Montage.create(Component, { addTransition: { value: function(element) { + var transitionDuration; + element.classList.add(this.transitionClass); element.addEventListener("webkitTransitionEnd", this, true); + + + //// TODO: replace this hack when webkit supports transitionStart event + transitionDuration = this.application.ninja.stylesController.getElementStyle(element, '-webkit-transition-duration', true); + element.njTimeout = window.setTimeout(function() { + this.captureWebkitTransitionEnd({ + 'target': element + }); + }.bind(this), this._getMilliseconds(transitionDuration) + 100); + } + }, + + _getMilliseconds : { + value: function(duration) { + if(duration.indexOf('ms') !== -1) { + return parseInt(duration); + } else { + return parseFloat(duration)*1000; + } } }, captureWebkitTransitionEnd : { value : function(e) { var el = e.target; + + //// TODO: replace this hack when webkit supports transitionStart event (see above) + window.clearTimeout(el.njTimeout); + el.classList.remove(this.transitionClass); el.removeEventListener("webkitTransitionEnd", this, true); } @@ -41,30 +66,25 @@ exports.PresetsController = Montage.create(Component, { var stylesController = this.application.ninja.stylesController, selectorBase = presetData.selectorBase, - rules = []; + rules = [], + animationNames = []; selectorBase = stylesController.generateClassName(selectorBase); - presetData.rules.forEach(function(rule, i) { - ///// Treat keyframed rules differently - if(rule.isKeyFrameRule) { - this.application.ninja.stylesController.addRule( - '@-webkit-keyframes ' + presetData.selectorBase, - this.stringifyKeys(rule.keys) - ); - } else { - var suffix = rule.selectorSuffix || ''; - rules.push(stylesController.addRule('.'+selectorBase + suffix, rule.styles)); - } - }, this); - selection.forEach(function(element) { - var el = element._element; + var el = element._element, + animationName; if(useTransition) { this.addTransition(el); } + ///// TODO: remove when we find out what to do with competing animations + animationName = stylesController.getElementStyle(el, '-webkit-animation-name'); + if(animationName) { + animationNames.push(animationName); + } + el.classList.add(selectorBase); //// Keep track of elements with presets and don't add duplicates @@ -72,20 +92,26 @@ exports.PresetsController = Montage.create(Component, { }, this); - } - }, - - setCachedPreset : { - value: function(el, presetId, rules) { + presetData.rules.forEach(function(rule, i) { + ///// Treat keyframed rules differently + if(rule.isKeyFrameRule) { + this.application.ninja.stylesController.addRule( + '@-webkit-keyframes ' + presetData.selectorBase, + this.stringifyKeys(rule.keys) + ); + } else { + var suffix = rule.selectorSuffix || ''; - } - }, + ///// TODO: remove when we find out what to do with competing animations + if(rule.styles['-webkit-animation-name']) { + rule.styles['-webkit-animation-name'] += ',' + animationNames.join(','); + } - getPresets : { - value: function(element) { + rules.push(stylesController.addRule('.'+selectorBase + suffix, rule.styles)); + } + }, this); } - }, stringifyKeys : { diff --git a/js/panels/presets/default-animation-presets.js b/js/panels/presets/default-animation-presets.js index b12a94b2..578c1622 100644 --- a/js/panels/presets/default-animation-presets.js +++ b/js/panels/presets/default-animation-presets.js @@ -14,7 +14,9 @@ exports.animationPresets = { "selectorBase" : "border-morph", "rules" : [{ "styles" : { - "-webkit-animation": "border-morph 2s infinite" + "-webkit-animation-name": "border-morph", + "-webkit-animation-duration": "2s", + "-webkit-animation-iteration-count": "infinite" } }, { -- cgit v1.2.3 From 0491907d1cba1534d88c49f2bb4035484831bbe5 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Fri, 30 Mar 2012 09:43:48 -0700 Subject: Presets Controller - Remove unused method call --- js/controllers/presets-controller.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/js/controllers/presets-controller.js b/js/controllers/presets-controller.js index e436023a..9d898a53 100644 --- a/js/controllers/presets-controller.js +++ b/js/controllers/presets-controller.js @@ -87,9 +87,6 @@ exports.PresetsController = Montage.create(Component, { el.classList.add(selectorBase); - //// Keep track of elements with presets and don't add duplicates - this.setCachedPreset(el, presetData.id, rules); - }, this); presetData.rules.forEach(function(rule, i) { -- cgit v1.2.3 From 5a5d0f68dd82b829405a0b301dd11b4cf385c8d5 Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Fri, 30 Mar 2012 13:25:20 -0700 Subject: Bug #1060: Fixed CSS Lint issue Signed-off-by: Armen Kesablyan --- css/ninja.css | 2 +- scss/imports/scss/_PanelUI.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/css/ninja.css b/css/ninja.css index c4015a21..650f3b08 100755 --- a/css/ninja.css +++ b/css/ninja.css @@ -604,7 +604,7 @@ button.panel-button { -webkit-appearance: none; font-size: 9px; color: white; ba .pp_strokelabel { border: none; margin: -1px 8px 0px 27px; } -.pp_filllabel { border-width: none; margin: -1px 8px 0px 34px; } +.pp_filllabel { border: none; margin: -1px 8px 0px 34px; } .panels { display: -webkit-box; position: absolute; -webkit-box-orient: vertical; -webkit-box-align: stretch; height: 100%; width: 100%; overflow: hidden; } diff --git a/scss/imports/scss/_PanelUI.scss b/scss/imports/scss/_PanelUI.scss index f76d3e20..d60dae59 100755 --- a/scss/imports/scss/_PanelUI.scss +++ b/scss/imports/scss/_PanelUI.scss @@ -1088,7 +1088,7 @@ button.panel-button { margin: -1px 8px 0px 27px; } .pp_filllabel{ - border-width: none; + border: none; margin: -1px 8px 0px 34px; } // End Styles for DivPIProperties -- cgit v1.2.3 From b7ca1821ad43403a2a54361ffc6a0cdf9cba0e59 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Mon, 2 Apr 2012 15:10:10 -0700 Subject: Animation Presets - Only combine animations if pre-existing animations exist --- js/controllers/presets-controller.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/controllers/presets-controller.js b/js/controllers/presets-controller.js index 9d898a53..975f9f7a 100644 --- a/js/controllers/presets-controller.js +++ b/js/controllers/presets-controller.js @@ -100,7 +100,7 @@ exports.PresetsController = Montage.create(Component, { var suffix = rule.selectorSuffix || ''; ///// TODO: remove when we find out what to do with competing animations - if(rule.styles['-webkit-animation-name']) { + if(rule.styles['-webkit-animation-name'] && animationNames.length) { rule.styles['-webkit-animation-name'] += ',' + animationNames.join(','); } -- cgit v1.2.3 From f699c3b4a0b39263bc1113882c66fbe616b2a271 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Wed, 4 Apr 2012 11:31:26 -0700 Subject: Need to set elementModel.isIn2DSnapCache flag to false when removing element from SnapManager's cache. Signed-off-by: Nivesh Rajbhandari --- js/helper-classes/3D/snap-manager.js | 1 + 1 file changed, 1 insertion(+) diff --git a/js/helper-classes/3D/snap-manager.js b/js/helper-classes/3D/snap-manager.js index 67dedc49..9f6b9ed1 100755 --- a/js/helper-classes/3D/snap-manager.js +++ b/js/helper-classes/3D/snap-manager.js @@ -499,6 +499,7 @@ var SnapManager = exports.SnapManager = Montage.create(Component, { var n = this._elementCache.length; this._elementCache[index] = this._elementCache[n-1]; this._elementCache.pop(); + target.elementModel.isIn2DSnapCache = false; found = true; } -- cgit v1.2.3