diff options
Diffstat (limited to 'js/stage/binding-view.reel/binding-hud.reel')
3 files changed, 59 insertions, 46 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 5818eca8..1536c706 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 | |||
@@ -11,7 +11,7 @@ | |||
11 | font-size: 11px; | 11 | font-size: 11px; |
12 | box-shadow: 3px 3px 20px rgba(0, 0, 0, 0.61); | 12 | box-shadow: 3px 3px 20px rgba(0, 0, 0, 0.61); |
13 | border-radius: 6px; | 13 | border-radius: 6px; |
14 | padding: 3px 8px; | 14 | padding: 3px; |
15 | text-shadow: 1px 1px 0px #000; | 15 | text-shadow: 1px 1px 0px #000; |
16 | } | 16 | } |
17 | 17 | ||
@@ -29,6 +29,8 @@ | |||
29 | /*background: rgba(0, 0, 0, 0.3);*/ | 29 | /*background: rgba(0, 0, 0, 0.3);*/ |
30 | line-height:16px; | 30 | line-height:16px; |
31 | /*box-shadow: inset 0px 0px 4px #333, 1px 1px 0px #3A3A3A;*/ | 31 | /*box-shadow: inset 0px 0px 4px #333, 1px 1px 0px #3A3A3A;*/ |
32 | padding-top: 4px; | ||
33 | margin: 0 5px; | ||
32 | min-width: 80px; | 34 | min-width: 80px; |
33 | } | 35 | } |
34 | 36 | ||
@@ -38,7 +40,10 @@ | |||
38 | line-height:16px; | 40 | line-height:16px; |
39 | padding:1px 25px 1px 8px; | 41 | padding:1px 25px 1px 8px; |
40 | } | 42 | } |
41 | 43 | .bindingHud .hudOption.promoted { | |
44 | color: #FFF; | ||
45 | font-weight: bold; | ||
46 | } | ||
42 | .bindingHud .hudOption .connectorBubble:hover { | 47 | .bindingHud .hudOption .connectorBubble:hover { |
43 | background-color: #1B52A7; | 48 | background-color: #1B52A7; |
44 | box-shadow: inset 0px 2px 2px 1px rgba(15, 15, 15, 0.78), 0 1px #474747; | 49 | box-shadow: inset 0px 2px 2px 1px rgba(15, 15, 15, 0.78), 0 1px #474747; |
@@ -94,8 +99,13 @@ | |||
94 | } | 99 | } |
95 | .splitter.scrollArea:hover:not(.disabled) { | 100 | .splitter.scrollArea:hover:not(.disabled) { |
96 | background-color: #303030; | 101 | background-color: #303030; |
102 | border-bottom: 1px solid #252525; | ||
103 | box-shadow: 0 1px 0 0 #3F3F3F; | ||
104 | } | ||
105 | .splitter.scrollAreaBottom:hover:not(.disabled) { | ||
106 | border-bottom: 1px solid #3F3F3F; | ||
107 | box-shadow: 0 1px 0 0 #252525; | ||
97 | } | 108 | } |
98 | |||
99 | 109 | ||
100 | .hudRepetition { | 110 | .hudRepetition { |
101 | overflow: hidden; | 111 | overflow: hidden; |
diff --git a/js/stage/binding-view.reel/binding-hud.reel/binding-hud.html b/js/stage/binding-view.reel/binding-hud.reel/binding-hud.html index 7bb888d5..f7e1a1d2 100755 --- a/js/stage/binding-view.reel/binding-hud.reel/binding-hud.html +++ b/js/stage/binding-view.reel/binding-hud.reel/binding-hud.html | |||
@@ -36,7 +36,8 @@ | |||
36 | "element": {"#" : "hudOption"} | 36 | "element": {"#" : "hudOption"} |
37 | }, | 37 | }, |
38 | "bindings": { | 38 | "bindings": { |
39 | "title": {"<-": "@repeater.objectAtCurrentIteration"} | 39 | "title": {"<-": "@repeater.objectAtCurrentIteration.property"}, |
40 | "promoted": {"<-": "@repeater.objectAtCurrentIteration.promoted"} | ||
40 | } | 41 | } |
41 | }, | 42 | }, |
42 | "resizer1": { | 43 | "resizer1": { |
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 6b802cb0..1b0af09d 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 | |||
@@ -10,6 +10,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot | |||
10 | */ | 10 | */ |
11 | var Montage = require("montage/core/core").Montage, | 11 | var Montage = require("montage/core/core").Montage, |
12 | Component = require("montage/ui/component").Component; | 12 | Component = require("montage/ui/component").Component; |
13 | var ElementsMediator = require("js/mediators/element-mediator").ElementMediator; | ||
13 | 14 | ||
14 | exports.BindingHud = Montage.create(Component, { | 15 | exports.BindingHud = Montage.create(Component, { |
15 | scrollUp: { | 16 | scrollUp: { |
@@ -49,10 +50,10 @@ exports.BindingHud = Montage.create(Component, { | |||
49 | value: null, | 50 | value: null, |
50 | serializable: true | 51 | serializable: true |
51 | }, | 52 | }, |
52 | _userComponent: { value: null }, | 53 | _userElement: { value: null }, |
53 | userComponent: { | 54 | userElement: { |
54 | get: function() { | 55 | get: function() { |
55 | return this._userComponent; | 56 | return this._userElement; |
56 | }, | 57 | }, |
57 | set: function(val) { | 58 | set: function(val) { |
58 | if(!val) { return; } | 59 | if(!val) { return; } |
@@ -61,14 +62,14 @@ exports.BindingHud = Montage.create(Component, { | |||
61 | bindingView = this.parentComponent.parentComponent, | 62 | bindingView = this.parentComponent.parentComponent, |
62 | isOffStage, icon, iconOffsets; | 63 | isOffStage, icon, iconOffsets; |
63 | 64 | ||
64 | this._userComponent = val; | 65 | this._userElement = val; |
65 | this.properties = this.getPropertyList(val); //controller.getPropertiesFromObject(val, true); | 66 | this.properties = this.getPropertyList(val.controller); //controller.getPropertiesFromObject(val, true); |
66 | 67 | ||
67 | controller.getObjectBindings(this.userComponent).forEach(function(obj) { | 68 | controller.getObjectBindings(this._userElement.controller).forEach(function(obj) { |
68 | this.boundProperties.push(obj.sourceObjectPropertyPath); | 69 | this.boundProperties.push(obj.sourceObjectPropertyPath); |
69 | }, this); | 70 | }, this); |
70 | 71 | ||
71 | isOffStage = controller.isOffStageObject(val); | 72 | isOffStage = controller.isOffStageObject(val.controller); |
72 | 73 | ||
73 | if(isOffStage) { | 74 | if(isOffStage) { |
74 | icon = bindingView.getOffStageIcon(val); | 75 | icon = bindingView.getOffStageIcon(val); |
@@ -76,20 +77,33 @@ exports.BindingHud = Montage.create(Component, { | |||
76 | this.title = icon.name; | 77 | this.title = icon.name; |
77 | this.x = iconOffsets.x; | 78 | this.x = iconOffsets.x; |
78 | this.y = iconOffsets.y - 80; | 79 | this.y = iconOffsets.y - 80; |
80 | } else { | ||
81 | this.title = this._userElement.controller.identifier; | ||
82 | this.x = this._userElement.offsetLeft; | ||
83 | this.y = this._userElement.offsetTop; | ||
84 | // this.x = parseInt(ElementsMediator.getProperty(val, "left")); | ||
85 | // this.y = parseInt(ElementsMediator.getProperty(val, "top")); | ||
79 | } | 86 | } |
80 | this.needsDraw = true; | 87 | this.needsDraw = true; |
81 | |||
82 | } | 88 | } |
83 | }, | 89 | }, |
84 | 90 | ||
85 | getPropertyList : { | 91 | getPropertyList : { |
86 | value: function(component) { | 92 | value: function(component) { |
87 | var props = this.application.ninja.objectsController.getPropertiesFromObject(component, true); | 93 | var props = this.application.ninja.objectsController.getPropertiesFromObject(component, true), |
88 | 94 | promotedProperties = [], | |
89 | var objectName, promotedProperties; | 95 | objectName; |
96 | |||
97 | ///// Mapper - property to property object | ||
98 | function propertyMapper(property) { | ||
99 | return { | ||
100 | property: property, | ||
101 | promoted: promotedProperties.indexOf(property) !== -1 | ||
102 | } | ||
103 | } | ||
90 | 104 | ||
91 | if(this.userComponent._montage_metadata) { | 105 | if(this.userElement.controller._montage_metadata) { |
92 | objectName = this.userComponent._montage_metadata.objectName; | 106 | objectName = this.userElement.controller._montage_metadata.objectName; |
93 | 107 | ||
94 | if(this.panelData && this.panelData[objectName + 'Pi']) { | 108 | if(this.panelData && this.panelData[objectName + 'Pi']) { |
95 | 109 | ||
@@ -109,7 +123,7 @@ exports.BindingHud = Montage.create(Component, { | |||
109 | } | 123 | } |
110 | } | 124 | } |
111 | 125 | ||
112 | return props; | 126 | return props.map(propertyMapper); |
113 | } | 127 | } |
114 | }, | 128 | }, |
115 | 129 | ||
@@ -231,12 +245,6 @@ exports.BindingHud = Montage.create(Component, { | |||
231 | this.scrollUp.style.display = "block"; | 245 | this.scrollUp.style.display = "block"; |
232 | this.scrollDown.style.display = "block"; | 246 | this.scrollDown.style.display = "block"; |
233 | } | 247 | } |
234 | var isOffStage = this.application.ninja.objectsController.isOffStageObject(this.userComponent); | ||
235 | if(!isOffStage) { | ||
236 | this.title = this.userComponent.identifier; | ||
237 | this.x = this.userComponent.element.offsetLeft; | ||
238 | this.y = this.userComponent.element.offsetTop; | ||
239 | } | ||
240 | } | 248 | } |
241 | }, | 249 | }, |
242 | 250 | ||
@@ -295,22 +303,17 @@ exports.BindingHud = Montage.create(Component, { | |||
295 | 303 | ||
296 | handleMouseover: { | 304 | handleMouseover: { |
297 | value: function(e) { | 305 | value: function(e) { |
306 | |||
298 | if(this.scrollSpace < this.properties.length) { | 307 | if(this.scrollSpace < this.properties.length) { |
299 | if (this.scrollInterval === null) { | 308 | if (this.scrollInterval === null) { |
300 | if (e._event.target.classList.contains("scrollAreaBottom")) { | 309 | if (e._event.target.classList.contains("scrollAreaBottom")) { |
301 | self = e._event.target.parentElement.controller; | 310 | this.currentScrollDirection = "down"; |
302 | //e._event.target.parentElement.controller.currentScrollDirection = "down"; | ||