diff options
-rw-r--r-- | css/ninja.css | 2 | ||||
-rw-r--r-- | js/components/treeview/ninja-branch.reel/ninja-branch.css | 11 | ||||
-rw-r--r-- | js/components/treeview/ninja-leaf.reel/ninja-leaf.css | 2 | ||||
-rw-r--r-- | js/components/treeview/treeview.reel/treeview.html | 2 | ||||
-rw-r--r-- | js/panels/properties/sections/position-and-size.reel/position-and-size.js | 89 | ||||
-rw-r--r-- | scss/imports/scss/_PanelUI.scss | 2 |
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 | ||