diff options
author | Armen Kesablyan | 2012-06-27 15:38:33 -0700 |
---|---|---|
committer | Armen Kesablyan | 2012-06-27 15:38:33 -0700 |
commit | 8eb74d31d3c9ac60d48312d8774fd02cad0c77af (patch) | |
tree | ae79629cedf9f683d77749a25988060ab9623216 /js/stage | |
parent | ec6759f9821a5647905617e3992fdda1cea390ef (diff) | |
parent | 61a41e74154715b0b42a429158fa1f2a44d2eb9a (diff) | |
download | ninja-8eb74d31d3c9ac60d48312d8774fd02cad0c77af.tar.gz |
Merge branch 'Bindables_GIO' of https://github.com/ericguzman/ninja-internal
Diffstat (limited to 'js/stage')
-rwxr-xr-x | js/stage/binding-view.reel/binding-hud.reel/binding-hud.css | 24 | ||||
-rwxr-xr-x | js/stage/binding-view.reel/binding-hud.reel/binding-hud.js | 46 | ||||
-rwxr-xr-x | js/stage/binding-view.reel/binding-view.html | 6 |
3 files changed, 56 insertions, 20 deletions
diff --git a/js/stage/binding-view.reel/binding-hud.reel/binding-hud.css b/js/stage/binding-view.reel/binding-hud.reel/binding-hud.css index 680f9183..5818eca8 100755 --- a/js/stage/binding-view.reel/binding-hud.reel/binding-hud.css +++ b/js/stage/binding-view.reel/binding-hud.reel/binding-hud.css | |||
@@ -6,14 +6,12 @@ | |||
6 | 6 | ||
7 | .bindingHud { | 7 | .bindingHud { |
8 | position: absolute; | 8 | position: absolute; |
9 | background: rgba(0, 0, 0, 0.85); | 9 | background: rgba(24, 24, 24, 0.85); |
10 | /*padding: 0px;*/ | ||
11 | color: #C4C4C4; | 10 | color: #C4C4C4; |
12 | font-size: 11px; | 11 | font-size: 11px; |
13 | box-shadow: inset 0px 0px 0px 0px #CCC; | 12 | box-shadow: 3px 3px 20px rgba(0, 0, 0, 0.61); |
14 | border-radius: 6px; | 13 | border-radius: 6px; |
15 | padding: 3px 1px 1px; | 14 | padding: 3px 8px; |
16 | border:1px solid #000; | ||
17 | text-shadow: 1px 1px 0px #000; | 15 | text-shadow: 1px 1px 0px #000; |
18 | } | 16 | } |
19 | 17 | ||
@@ -58,35 +56,35 @@ | |||
58 | 56 | ||
59 | .bindingHud .hudOption .connectorBubble { | 57 | .bindingHud .hudOption .connectorBubble { |
60 | position: absolute; | 58 | position: absolute; |
61 | right: 5px; | 59 | right: 2px; |
62 | top: 3px; | 60 | top: 3px; |
63 | border-radius: 50%; | 61 | border-radius: 50%; |
64 | width: 10px; | 62 | width: 10px; |
65 | height: 10px; | 63 | height: 10px; |
66 | border-left: 0px; | 64 | border-left: 0px; |
67 | display: block; | 65 | display: block; |
68 | background-color: #313131; | 66 | background-color: #353535; |
69 | box-shadow: inset 0px 2px 7px 1px #0F0F0F, 0 1px #424242; | 67 | box-shadow: inset 0px 2px 3px 1px #222, 0 1px #666; |
70 | 68 | ||
71 | } | 69 | } |
72 | 70 | ||
73 | .splitter.scrollArea { | 71 | .splitter.scrollArea { |
74 | background-color: transparent; | 72 | background-color: transparent; |
75 | background-size: 12%; | 73 | background-size: 10%; |
76 | background-position-y: 2px; | 74 | background-position-y: 2px; |
77 | display: none; | 75 | display: none; |
78 | height:11px; | 76 | height:11px; |
79 | text-align: center; | 77 | text-align: center; |
80 | } | 78 | } |
81 | .splitter.scrollAreaTop { | 79 | .splitter.scrollAreaTop { |
82 | border-top: 1px solid #353535; | 80 | border-bottom: 1px solid #141414; |
83 | box-shadow: 0 -1px 0 0 #141414; | 81 | box-shadow: 0 1px 0 0 #525252; |
84 | } | 82 | } |
85 | .splitter.scrollAreaBottom { | 83 | .splitter.scrollAreaBottom { |
86 | -webkit-transform: rotate(180deg); | 84 | -webkit-transform: rotate(180deg); |
87 | border-top-left-radius: 6px; | 85 | border-top-left-radius: 6px; |
88 | border-top-right-radius: 6px; | 86 | border-top-right-radius: 6px; |
89 | border-bottom: 1px solid #353535; | 87 | border-bottom: 1px solid #525252; |
90 | box-shadow: 0 1px 0 0 #141414; | 88 | box-shadow: 0 1px 0 0 #141414; |
91 | margin-top: 4px; | 89 | margin-top: 4px; |
92 | } | 90 | } |
@@ -95,7 +93,7 @@ | |||
95 | opacity: 0.5; | 93 | opacity: 0.5; |
96 | } | 94 | } |
97 | .splitter.scrollArea:hover:not(.disabled) { | 95 | .splitter.scrollArea:hover:not(.disabled) { |
98 | background-color: #252525; | 96 | background-color: #303030; |
99 | } | 97 | } |
100 | 98 | ||
101 | 99 | ||
diff --git a/js/stage/binding-view.reel/binding-hud.reel/binding-hud.js b/js/stage/binding-view.reel/binding-hud.reel/binding-hud.js index 85e4b87b..6b802cb0 100755 --- a/js/stage/binding-view.reel/binding-hud.reel/binding-hud.js +++ b/js/stage/binding-view.reel/binding-hud.reel/binding-hud.js | |||
@@ -45,7 +45,10 @@ exports.BindingHud = Montage.create(Component, { | |||
45 | optionsRepeater: { | 45 | optionsRepeater: { |
46 | value: null | 46 | value: null |
47 | }, | 47 | }, |
48 | 48 | panelData : { | |
49 | value: null, | ||
50 | serializable: true | ||
51 | }, | ||
49 | _userComponent: { value: null }, | 52 | _userComponent: { value: null }, |
50 | userComponent: { | 53 | userComponent: { |
51 | get: function() { | 54 | get: function() { |
@@ -59,7 +62,7 @@ exports.BindingHud = Montage.create(Component, { | |||
59 | isOffStage, icon, iconOffsets; | 62 | isOffStage, icon, iconOffsets; |
60 | 63 | ||
61 | this._userComponent = val; | 64 | this._userComponent = val; |
62 | this.properties = controller.getPropertiesFromObject(val, true); | 65 | this.properties = this.getPropertyList(val); //controller.getPropertiesFromObject(val, true); |
63 | 66 | ||
64 | controller.getObjectBindings(this.userComponent).forEach(function(obj) { | 67 | controller.getObjectBindings(this.userComponent).forEach(function(obj) { |
65 | this.boundProperties.push(obj.sourceObjectPropertyPath); | 68 | this.boundProperties.push(obj.sourceObjectPropertyPath); |
@@ -79,6 +82,37 @@ exports.BindingHud = Montage.create(Component, { | |||
79 | } | 82 | } |
80 | }, | 83 | }, |
81 | 84 | ||
85 | getPropertyList : { | ||
86 | value: function(component) { | ||
87 | var props = this.application.ninja.objectsController.getPropertiesFromObject(component, true); | ||
88 | |||
89 | var objectName, promotedProperties; | ||
90 | |||
91 | if(this.userComponent._montage_metadata) { | ||
92 | objectName = this.userComponent._montage_metadata.objectName; | ||
93 | |||
94 | if(this.panelData && this.panelData[objectName + 'Pi']) { | ||
95 | |||
96 | promotedProperties = this.panelData[objectName + 'Pi'][0].Section.map(function(item) { | ||
97 | return item[0].prop; | ||
98 | }); | ||
99 | |||
100 | //// Remove promoted properties from current position in array | ||
101 | props = props.filter(function(prop) { | ||
102 | return promotedProperties.indexOf(prop) === -1; | ||
103 | }); | ||
104 | |||
105 | //// Add them at the top | ||
106 | |||
107 | props = promotedProperties.concat(props); | ||
108 | |||
109 | } | ||
110 | } | ||
111 | |||
112 | return props; | ||
113 | } | ||
114 | }, | ||
115 | |||
82 | properties: { value: [] }, | 116 | properties: { value: [] }, |
83 | 117 | ||
84 | _isResizing: { | 118 | _isResizing: { |
@@ -249,11 +283,11 @@ exports.BindingHud = Montage.create(Component, { | |||
249 | if(direction === "down") { | 283 | if(direction === "down") { |
250 | this.scrollInterval = setInterval(function() { | 284 | this.scrollInterval = setInterval(function() { |
251 | this.optionsRepeater.element.scrollTop += 3; | 285 | this.optionsRepeater.element.scrollTop += 3; |
252 | }.bind(this), 50); | 286 | }.bind(this), 20); |
253 | } else { | 287 | } else { |
254 | this.scrollInterval = setInterval(function() { | 288 | this.scrollInterval = setInterval(function() { |
255 | this.optionsRepeater.element.scrollTop -= 3; | 289 | this.optionsRepeater.element.scrollTop -= 3; |
256 | }.bind(this), 50); | 290 | }.bind(this), 20); |
257 | } | 291 | } |
258 | } | 292 | } |
259 | } | 293 | } |
@@ -268,11 +302,11 @@ exports.BindingHud = Montage.create(Component, { | |||
268 | //e._event.target.parentElement.controller.currentScrollDirection = "down"; | 302 | //e._event.target.parentElement.controller.currentScrollDirection = "down"; |
269 | this.scrollInterval = setInterval(function() { | 303 | this.scrollInterval = setInterval(function() { |
270 | self.optionsRepeater.element.scrollTop += 3; | 304 | self.optionsRepeater.element.scrollTop += 3; |
271 | }, 50); | 305 | }, 20); |
272 | } else { | 306 | } else { |
273 | this.scrollInterval = setInterval(function() { | 307 | this.scrollInterval = setInterval(function() { |
274 | self.optionsRepeater.element.scrollTop -= 3; | 308 | self.optionsRepeater.element.scrollTop -= 3; |
275 | }, 50); | 309 | }, 20); |
276 | } | 310 | } |
277 | } | 311 | } |
278 | } | 312 | } |
diff --git a/js/stage/binding-view.reel/binding-view.html b/js/stage/binding-view.reel/binding-view.html index 9eb338d8..b6c5ff40 100755 --- a/js/stage/binding-view.reel/binding-view.html +++ b/js/stage/binding-view.reel/binding-view.html | |||
@@ -37,7 +37,8 @@ | |||
37 | "hud": { | 37 | "hud": { |
38 | "prototype": "js/stage/binding-view.reel/binding-hud.reel", | 38 | "prototype": "js/stage/binding-view.reel/binding-hud.reel", |
39 | "properties": { | 39 | "properties": { |
40 | "element": {"#" : "hud"} | 40 | "element": {"#" : "hud"}, |
41 | "panelData": {"@": "panelData"} | ||
41 | }, | 42 | }, |