aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--css/ninja.css2
-rw-r--r--js/components/treeview/ninja-branch.reel/ninja-branch.css11
-rw-r--r--js/components/treeview/ninja-leaf.reel/ninja-leaf.css2
-rw-r--r--js/components/treeview/treeview.reel/treeview.html2
-rw-r--r--js/panels/properties/sections/position-and-size.reel/position-and-size.js89
-rw-r--r--scss/imports/scss/_PanelUI.scss2
6 files changed, 86 insertions, 22 deletions
diff --git a/css/ninja.css b/css/ninja.css
index 8ce60a10..ba434f42 100644
--- a/css/ninja.css
+++ b/css/ninja.css
@@ -408,7 +408,7 @@ span.pp-span-all:focus { -webkit-box-shadow: none; background-color: #b4b4b4; bo
408 408
409#pp-container-list li, #pp-container-list span.span-space { background-repeat: no-repeat; } 409#pp-container-list li, #pp-container-list span.span-space { background-repeat: no-repeat; }
410 410
411#pp-container-list li.directory.open > span.pp-span-all > span.pp-col-files > span.span-space { background-image: url("../images/panels/project-panel/icon-file-folderopen.png"); background-position: 100% 0px; } 411#pp-container-list li.directory.open > span.pp-span-all > span.pp-col-files > span.span-space, .branch-label { background-image: url("../images/panels/project-panel/icon-file-folderopen.png"); background-position: 100% 0px; }
412 412
413#pp-container-list li.directory.closed > span.pp-span-all > span.pp-col-files > span.span-space { background-image: url("../images/panels/project-panel/icon-file-folderclosed.png"); background-position: 100% 0px; } 413#pp-container-list li.directory.closed > span.pp-span-all > span.pp-col-files > span.span-space { background-image: url("../images/panels/project-panel/icon-file-folderclosed.png"); background-position: 100% 0px; }
414 414
diff --git a/js/components/treeview/ninja-branch.reel/ninja-branch.css b/js/components/treeview/ninja-branch.reel/ninja-branch.css
index 6a458cc7..d8c212e8 100644
--- a/js/components/treeview/ninja-branch.reel/ninja-branch.css
+++ b/js/components/treeview/ninja-branch.reel/ninja-branch.css
@@ -18,14 +18,15 @@
18 width: 100%; 18 width: 100%;
19} 19}
20.treeRoot .branch .branch-label { 20.treeRoot .branch .branch-label {
21 border-bottom: 1px solid #505050;
22 cursor: pointer;
23 padding: 3px 0 4px;
24 background-repeat: no-repeat; 21 background-repeat: no-repeat;
25 background-position: 3px 2px; 22 background-position: 3px 2px;
26 box-shadow: 0 0 0 0 rgba(0,0,0,0); 23 border-bottom: 1px solid #505050;
27 font-weight: bold;
28 box-shadow: 0 3px 4px -4px rgba(0,0,0,0.2); 24 box-shadow: 0 3px 4px -4px rgba(0,0,0,0.2);
25 color: #FFF;
26 cursor: pointer;
27 font-weight: bold;
28 padding: 3px 0 4px;
29 text-shadow: 1px 1px 0 #000;
29} 30}
30 31
31/* First Level */ 32/* First Level */
diff --git a/js/components/treeview/ninja-leaf.reel/ninja-leaf.css b/js/components/treeview/ninja-leaf.reel/ninja-leaf.css
index b2f427b5..085b11e0 100644
--- a/js/components/treeview/ninja-leaf.reel/ninja-leaf.css
+++ b/js/components/treeview/ninja-leaf.reel/ninja-leaf.css
@@ -19,6 +19,8 @@
19/* Second level */ 19/* Second level */
20.branch .branch .leaf-label { 20.branch .branch .leaf-label {
21 background-position: 25px center; 21 background-position: 25px center;
22 box-shadow: 0 3px 4px -4px rgba(0,0,0,0.2);
23 color: #FFF;
22 padding-left: 45px; 24 padding-left: 45px;
23} 25}
24/* Third level */ 26/* Third level */
diff --git a/js/components/treeview/treeview.reel/treeview.html b/js/components/treeview/treeview.reel/treeview.html
index d70b016c..4f9e6a72 100644
--- a/js/components/treeview/treeview.reel/treeview.html
+++ b/js/components/treeview/treeview.reel/treeview.html
@@ -26,7 +26,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
26 "name" : "Branch" 26 "name" : "Branch"
27 }, 27 },
28 "defaultLeaf" : { 28 "defaultLeaf" : {
29 "module" : "js/components/treeview/presets-leaf.reel", 29 "module" : "js/components/treeview/leaf.reel",
30 "name" : "Leaf" 30 "name" : "Leaf"
31 }, 31 },
32 "scrollview": { 32 "scrollview": {
diff --git a/js/panels/properties/sections/position-and-size.reel/position-and-size.js b/js/panels/properties/sections/position-and-size.reel/position-and-size.js
index 43f08fcf..49117090 100644
--- a/js/panels/properties/sections/position-and-size.reel/position-and-size.js
+++ b/js/panels/properties/sections/position-and-size.reel/position-and-size.js
@@ -28,6 +28,14 @@ exports.PosSize = Montage.create(Component, {
28 value: null 28 value: null
29 }, 29 },
30 30
31 aspectRatioWidth: {
32 value: null
33 },
34
35 aspectRatioHeight: {
36 value: null
37 },
38
31 _disablePosition: { 39 _disablePosition: {
32 value: true 40 value: true
33 }, 41 },
@@ -62,9 +70,8 @@ exports.PosSize = Montage.create(Component, {
62 this.widthControl.addEventListener("change", this, false); 70 this.widthControl.addEventListener("change", this, false);
63 this.widthControl.addEventListener("changing", this, false); 71 this.widthControl.addEventListener("changing", this, false);
64 72
65 73 this.bindButton.identifier = "ratio";
66 //this._controlList[0].control.addEventListener("action", this._handleStageEvent.bind(this), false); 74 this.bindButton.addEventListener("action", this, false);
67 //PropertiesPanelModule.PropertiesPanelBase.PIControlList["stageWidthHeightLock"] = this._controlList[0].control;
68 75
69 } 76 }
70 }, 77 },
@@ -87,6 +94,25 @@ exports.PosSize = Montage.create(Component, {
87 } 94 }
88 }, 95 },
89 96
97 /**
98 * Calculate the current aspect ration when the bind button is pressed.
99 * If one of the values is 0, then use 1:1 as the ratio;
100 */
101 handleRatioAction: {
102 value: function() {
103 if(this.bindButton.value) {
104 this.aspectRatioWidth = this.heightControl.value / this.widthControl.value;
105 if(isNaN(this.aspectRatioWidth) || !isFinite(this.aspectRatioWidth) || this.aspectRatioWidth === 0) this.aspectRatioWidth = 1;
106
107 this.aspectRatioHeight = this.widthControl.value / this.heightControl.value;
108 if(isNaN(this.aspectRatioHeight) || !isFinite(this.aspectRatioHeight) || this.aspectRatioHeight === 0) this.aspectRatioHeight = 1;
109 } else {
110 this.aspectRatioWidth = 1;
111 this.aspectRatioHeight = 1;
112 }
113 }
114 },
115
90 handleLeftChange: { 116 handleLeftChange: {
91 value: function(event) { 117 value: function(event) {
92 var prevPosition; 118 var prevPosition;
@@ -121,6 +147,17 @@ exports.PosSize = Montage.create(Component, {
121 if(this.savedPosition) prevPosition = [this.savedPosition + "px"]; 147 if(this.savedPosition) prevPosition = [this.savedPosition + "px"];
122 148
123 this.application.ninja.selectedElements.length ? items = this.application.ninja.selectedElements : items = [this.application.ninja.currentDocument.documentRoot]; 149 this.application.ninja.selectedElements.length ? items = this.application.ninja.selectedElements : items = [this.application.ninja.currentDocument.documentRoot];
150
151 if(this.bindButton.value) {
152
153 var newWidth = Math.round(this.aspectRatioHeight * this.heightControl.value);
154
155 if(!isFinite(newWidth)) newWidth = this.heightControl.value;
156
157 this.widthControl.value = newWidth;
158 this.application.ninja.elementMediator.setProperty(items, "width", [newWidth + "px"] , "Change", "pi");
159 }
160
124 this.application.ninja.elementMediator.setProperty(items, "height", [this.heightControl.value + "px"] , "Change", "pi", prevPosition); 161 this.application.ninja.elementMediator.setProperty(items, "height", [this.heightControl.value + "px"] , "Change", "pi", prevPosition);
125 this.savedPosition = null; 162 this.savedPosition = null;
126 } 163 }
@@ -135,9 +172,23 @@ exports.PosSize = Montage.create(Component, {
135 if(this.savedPosition) prevPosition = [this.savedPosition + "px"]; 172 if(this.savedPosition) prevPosition = [this.savedPosition + "px"];
136 173
137 this.application.ninja.selectedElements.length ? items = this.application.ninja.selectedElements : items = [this.application.ninja.currentDocument.documentRoot]; 174 this.application.ninja.selectedElements.length ? items = this.application.ninja.selectedElements : items = [this.application.ninja.currentDocument.documentRoot];
175
176 if(this.bindButton.value) {
177
178 var newHeight = Math.round(this.aspectRatioWidth * this.widthControl.value);
179
180 if(!isFinite(newHeight)) newHeight = this.widthControl.value;
181
182 this.heightControl.value = newHeight;
183 this.application.ninja.elementMediator.setProperty(items, "height", [newHeight + "px"] , "Change", "pi");
184
185 }
186
138 this.application.ninja.elementMediator.setProperty(items, "width", [this.widthControl.value + "px"] , "Change", "pi", prevPosition); 187 this.application.ninja.elementMediator.setProperty(items, "width", [this.widthControl.value + "px"] , "Change", "pi", prevPosition);
139 this.savedPosition = null; 188 this.savedPosition = null;
189
140 } 190 }
191
141 } 192 }
142 }, 193 },
143 194
@@ -166,24 +217,22 @@ exports.PosSize = Montage.create(Component, {
166 var items; 217 var items;
167 if(!event.wasSetByCode) { 218 if(!event.wasSetByCode) {
168 219
220 if(!this.savedPosition) this.savedPosition = this.heightSize;
221
222 this.application.ninja.selectedElements.length ? items = this.application.ninja.selectedElements : items = [this.application.ninja.currentDocument.documentRoot];
223
169 if(this.bindButton.value) { 224 if(this.bindButton.value) {
170 if(!this.savedPosition) this.savedPosition = this.heightSize;
171 var delta = this.heightControl.value - this.savedPosition;
172 225
173 var hwRatio = Math.round(Math.round(this.widthControl.value / this.savedPosition * 10) / 10); 226 var newWidth = Math.round(this.aspectRatioHeight * this.heightControl.value);
174 var newWidth = this.widthControl.value + hwRatio * delta; 227
228 if(!isFinite(newWidth)) newWidth = this.heightControl.value;
175 229