From c7b07a9663ac1553fb10d8541b25274e522e07f7 Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Wed, 7 Mar 2012 10:39:23 -0800 Subject: Fixed Collapsing and resizing window with panels Signed-off-by: Armen Kesablyan --- js/panels/PanelContainer.reel/PanelContainer.js | 35 ++++++++++++++----------- 1 file changed, 19 insertions(+), 16 deletions(-) diff --git a/js/panels/PanelContainer.reel/PanelContainer.js b/js/panels/PanelContainer.reel/PanelContainer.js index dd720bd3..8cc303dc 100755 --- a/js/panels/PanelContainer.reel/PanelContainer.js +++ b/js/panels/PanelContainer.reel/PanelContainer.js @@ -81,7 +81,7 @@ exports.PanelContainer = Montage.create(Component, { handleResize: { value: function(e) { - this._setPanelsSizes(null); + this._redrawPanels(null, true); } }, @@ -104,8 +104,6 @@ exports.PanelContainer = Montage.create(Component, { // switch panels this.panels[droppedIndex].element.parentNode.insertBefore(this.panels[draggedIndex].element, this.panels[droppedIndex].element); } - - this._setPanelsSizes(null); } }, @@ -133,7 +131,10 @@ exports.PanelContainer = Montage.create(Component, { setLocked = false; } - var childrensMinHeights = ((len - 1) * 26) + panelActivated.minHeight; + var childrensMinHeights = (len * 26); + if (panelActivated) { + childrensMinHeights+= panelActivated.minHeight -26; + } for(var i = 0; i < len; i++) { var obj = this['panel_'+i]; @@ -169,25 +170,27 @@ exports.PanelContainer = Montage.create(Component, { var unlockPanels = true; var afterPanel = false; var panelName = e.target.parentComponent.name; + + this.panels.forEach(function(obj) { + if(afterPanel) { + if(obj.flexible && obj.collapsed === false) { + unlockPanels = false; + } + } + if (obj.name === panelName) { + afterPanel = true; + } + }); + switch(e.target.identifier) { case "btnCollapse": this.currentPanelState[e.target.parentComponent.name].collapsed = e.target.parentComponent.collapsed; this.application.localStorage.setItem("panels", this.currentPanelState); - this._setPanelsSizes(e.target.parentComponent); + //this._setPanelsSizes(e.target.parentComponent); this._redrawPanels(e.target.parentComponent, unlockPanels); break; case "btnClose": - this.panelController.content.forEach(function(obj) { - if(afterPanel) { - if(obj.flexible) { - unlockPanels = false; - } - } - if (obj.name === panelName) { - afterPanel = true; - this.panelController.removeObjects(obj); - } - }); + //this.panelController.removeObjects(obj); this._redrawPanels(e.target.parentComponent, unlockPanels); break; } -- cgit v1.2.3 From e3a5626b21ac8b906638bed9eb96aca5fadd26d8 Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Wed, 7 Mar 2012 11:41:10 -0800 Subject: Fixed: Collapsed panels would collapse panels below Signed-off-by: Armen Kesablyan --- js/panels/PanelContainer.reel/PanelContainer.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/js/panels/PanelContainer.reel/PanelContainer.js b/js/panels/PanelContainer.reel/PanelContainer.js index 8cc303dc..3da9b44c 100755 --- a/js/panels/PanelContainer.reel/PanelContainer.js +++ b/js/panels/PanelContainer.reel/PanelContainer.js @@ -133,7 +133,9 @@ exports.PanelContainer = Montage.create(Component, { var childrensMinHeights = (len * 26); if (panelActivated) { - childrensMinHeights+= panelActivated.minHeight -26; + if (!panelActivated.collapsed) { + childrensMinHeights+= panelActivated.minHeight -26; + } } for(var i = 0; i < len; i++) { -- cgit v1.2.3 From d18d91946627c53c646a6f167855551a1891f8f4 Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Wed, 7 Mar 2012 14:33:09 -0800 Subject: Reordering and resizing now works Signed-off-by: Armen Kesablyan --- js/panels/PanelContainer.reel/PanelContainer.js | 22 ++++++++++++++++++---- 1 file changed, 18 insertions(+), 4 deletions(-) diff --git a/js/panels/PanelContainer.reel/PanelContainer.js b/js/panels/PanelContainer.reel/PanelContainer.js index 3da9b44c..b285b49d 100755 --- a/js/panels/PanelContainer.reel/PanelContainer.js +++ b/js/panels/PanelContainer.reel/PanelContainer.js @@ -47,6 +47,7 @@ exports.PanelContainer = Montage.create(Component, { this['panel_'+i].flexible = p.flexible; this['panel_'+i].modulePath = p.modulePath; this['panel_'+i].moduleName = p.moduleName; + this['panel_'+i].index = i; this.currentPanelState[p.name] = {}; this.currentPanelState.version = "1.0"; @@ -102,8 +103,21 @@ exports.PanelContainer = Montage.create(Component, { if(draggedIndex !== droppedIndex) { // switch panels - this.panels[droppedIndex].element.parentNode.insertBefore(this.panels[draggedIndex].element, this.panels[droppedIndex].element); + if (droppedIndex === draggedIndex +1) { + if(this.panels[droppedIndex].element.nextSibling) { + this.panels[droppedIndex].element.parentNode.insertBefore(this.panels[draggedIndex].element, this.panels[droppedIndex].element.nextSibling); + } else { + return this.appendChild(this.panels[draggedIndex].element); + } + } else { + + this.panels[droppedIndex].element.parentNode.insertBefore(this.panels[draggedIndex].element, this.panels[droppedIndex].element); + } + var panelRemoved = this.panels.splice(draggedIndex, 1); + this.panels.splice(droppedIndex, 0, panelRemoved[0]); + } + } }, @@ -112,12 +126,12 @@ exports.PanelContainer = Montage.create(Component, { var len = this.panels.length, setLocked = true; for(var i = 0; i < len; i++) { - if(this['panel_'+i] === panelActivated || panelActivated === null) { + if(this.panels[i] === panelActivated || panelActivated === null) { setLocked = false; } - this['panel_'+i].locked = setLocked; - this['panel_'+i].needsDraw = true; + this.panels[i].locked = setLocked; + this.panels[i].needsDraw = true; } } }, -- cgit v1.2.3 From 84931583f1da8da29784074978f146b281b8efa3 Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Wed, 7 Mar 2012 16:08:36 -0800 Subject: Disabled state for panels Signed-off-by: Armen Kesablyan --- css/ninja.css | 2 ++ js/panels/Panel.reel/Panel.html | 20 +++++++++++++++++--- js/panels/Panel.reel/Panel.js | 4 ++++ js/panels/PanelContainer.reel/PanelContainer.js | 22 +++++++++++++++++++++- scss/imports/scss/_PanelUI.scss | 14 ++++++++++++++ 5 files changed, 58 insertions(+), 4 deletions(-) diff --git a/css/ninja.css b/css/ninja.css index f139c3b9..32514e96 100755 --- a/css/ninja.css +++ b/css/ninja.css @@ -655,6 +655,8 @@ body section .dragging { opacity: 0.4; } body .main .dragOver:not(.dragging) { background-color: #917B56; } +.panelDisabled { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; color: white; text-align: center; line-height: 100px; box-shadow: inset 0 0 14px #111111; background: rgba(30, 30, 30, 0.7); } + .menuBar { width: 100%; border-style: solid; border-width: 1px; height: 22px; color: white; background: #474747; border-color: black; } .menuBar ul { list-style: none; margin: 0; padding: 0; float: left; cursor: default; } diff --git a/js/panels/Panel.reel/Panel.html b/js/panels/Panel.reel/Panel.html index 04e2930a..43b87940 100755 --- a/js/panels/Panel.reel/Panel.html +++ b/js/panels/Panel.reel/Panel.html @@ -113,6 +113,21 @@ } }, + "disabledCondition": { + "module": "montage/ui/condition.reel", + "name": "Condition", + "properties": { + "element": {"#": "disabledCondition"} + }, + "bindings": { + "condition": { + "boundObject": {"@": "owner"}, + "boundObjectPropertyPath": "disabled", + "oneway": true + } + } + }, + "owner": { "module": "js/panels/Panel.reel", "name": "Panel", @@ -136,9 +151,8 @@
-
- -
+
+
diff --git a/js/panels/Panel.reel/Panel.js b/js/panels/Panel.reel/Panel.js index 2b308258..33f9b3a7 100755 --- a/js/panels/Panel.reel/Panel.js +++ b/js/panels/Panel.reel/Panel.js @@ -57,6 +57,10 @@ exports.Panel = Montage.create(Component, { value: null }, + disabled: { + value:false + }, + collapsed: { get: function() { return this._collapsed; diff --git a/js/panels/PanelContainer.reel/PanelContainer.js b/js/panels/PanelContainer.reel/PanelContainer.js index b285b49d..c40bbc21 100755 --- a/js/panels/PanelContainer.reel/PanelContainer.js +++ b/js/panels/PanelContainer.reel/PanelContainer.js @@ -47,7 +47,7 @@ exports.PanelContainer = Montage.create(Component, { this['panel_'+i].flexible = p.flexible; this['panel_'+i].modulePath = p.modulePath; this['panel_'+i].moduleName = p.moduleName; - this['panel_'+i].index = i; + this['panel_'+i].disabled = true; this.currentPanelState[p.name] = {}; this.currentPanelState.version = "1.0"; @@ -65,6 +65,8 @@ exports.PanelContainer = Montage.create(Component, { this.application.localStorage.setItem("panels", this.currentPanelState); + this.eventManager.addEventListener( "onOpenDocument", this, false); + this.eventManager.addEventListener( "closeDocument", this, false); } }, @@ -85,6 +87,24 @@ exports.PanelContainer = Montage.create(Component, { this._redrawPanels(null, true); } }, + + handleOnOpenDocument: { + value: function(){ + this.panels.forEach(function(obj) { + obj.disabled = false; + }); + } + }, + + handleCloseDocument: { + value: function(){ + if(!this.application.ninja.documentController.activeDocument) { + this.panels.forEach(function(obj) { + obj.disabled = true; + }); + } + } + }, handleDropped: { value: function(e) { diff --git a/scss/imports/scss/_PanelUI.scss b/scss/imports/scss/_PanelUI.scss index b25871b0..2ac88b1d 100755 --- a/scss/imports/scss/_PanelUI.scss +++ b/scss/imports/scss/_PanelUI.scss @@ -1256,3 +1256,17 @@ body .main .dragOver:not(.dragging) { background-color: #917B56; } +.panelDisabled { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 9999; + color: white; + text-align: center; + line-height: 100px; + box-shadow: inset 0 0 14px #111111; + + background: rgba(30, 30, 30, 0.7); +} \ No newline at end of file -- cgit v1.2.3 From 21cb7af351e738f446458af5b896c84e03fa5c17 Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Thu, 8 Mar 2012 12:05:43 -0800 Subject: Z-Index issue of disabled state with file open dialog 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 32514e96..b771eb11 100755 --- a/css/ninja.css +++ b/css/ninja.css @@ -655,7 +655,7 @@ body section .dragging { opacity: 0.4; } body .main .dragOver:not(.dragging) { background-color: #917B56; } -.panelDisabled { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; color: white; text-align: center; line-height: 100px; box-shadow: inset 0 0 14px #111111; background: rgba(30, 30, 30, 0.7); } +.panelDisabled { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 6000; color: white; text-align: center; line-height: 100px; box-shadow: inset 0 0 14px #111111; background: rgba(30, 30, 30, 0.7); } .menuBar { width: 100%; border-style: solid; border-width: 1px; height: 22px; color: white; background: #474747; border-color: black; } diff --git a/scss/imports/scss/_PanelUI.scss b/scss/imports/scss/_PanelUI.scss index 2ac88b1d..91a46c76 100755 --- a/scss/imports/scss/_PanelUI.scss +++ b/scss/imports/scss/_PanelUI.scss @@ -1262,7 +1262,7 @@ body .main .dragOver:not(.dragging) { left: 0; width: 100%; height: 100%; - z-index: 9999; + z-index: 6000; color: white; text-align: center; line-height: 100px; -- cgit v1.2.3 From caa08250663007bea76faf555f166b42cf4c76fb Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Thu, 8 Mar 2012 12:09:13 -0800 Subject: Disabled State is now darker 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 b771eb11..8213ec26 100755 --- a/css/ninja.css +++ b/css/ninja.css @@ -655,7 +655,7 @@ body section .dragging { opacity: 0.4; } body .main .dragOver:not(.dragging) { background-color: #917B56; } -.panelDisabled { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 6000; color: white; text-align: center; line-height: 100px; box-shadow: inset 0 0 14px #111111; background: rgba(30, 30, 30, 0.7); } +.panelDisabled { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 6000; color: white; text-align: center; line-height: 100px; box-shadow: inset 0 0 14px #111111; background: rgba(30, 30, 30, 0.8); } .menuBar { width: 100%; border-style: solid; border-width: 1px; height: 22px; color: white; background: #474747; border-color: black; } diff --git a/scss/imports/scss/_PanelUI.scss b/scss/imports/scss/_PanelUI.scss index 91a46c76..f76d3e20 100755 --- a/scss/imports/scss/_PanelUI.scss +++ b/scss/imports/scss/_PanelUI.scss @@ -1268,5 +1268,5 @@ body .main .dragOver:not(.dragging) { line-height: 100px; box-shadow: inset 0 0 14px #111111; - background: rgba(30, 30, 30, 0.7); + background: rgba(30, 30, 30, 0.8); } \ No newline at end of file -- cgit v1.2.3