diff options
author | Armen Kesablyan | 2012-06-28 13:21:29 -0700 |
---|---|---|
committer | Armen Kesablyan | 2012-06-28 13:43:35 -0700 |
commit | 0aea7c15ebee0b0e9d51c2ca4b7eeec598227af1 (patch) | |
tree | f5d931c404c8066b971ed5a66f95f86776eacf8b /js/stage | |
parent | 9add37d85a9d90541daae8ad5316388c4d9a9da4 (diff) | |
parent | f89895e5fb94a192d25f26249dadcb8ab225c72b (diff) | |
download | ninja-0aea7c15ebee0b0e9d51c2ca4b7eeec598227af1.tar.gz |
Merge branch 'Bindables_GIO' of https://github.com/ericguzman/ninja-internal into GIO_binding-view
Signed-off-by: Armen Kesablyan <armen@motorola.com>
Diffstat (limited to 'js/stage')
5 files changed, 57 insertions, 12 deletions
diff --git a/js/stage/binding-view.reel/binding-hud-option.reel/binding-hud-option.js b/js/stage/binding-view.reel/binding-hud-option.reel/binding-hud-option.js index fb0fd57e..a7fbb297 100755 --- a/js/stage/binding-view.reel/binding-hud-option.reel/binding-hud-option.js +++ b/js/stage/binding-view.reel/binding-hud-option.reel/binding-hud-option.js | |||
@@ -26,8 +26,28 @@ exports.BindingHudOption = Montage.create(Component, { | |||
26 | } | 26 | } |
27 | }, | 27 | }, |
28 | 28 | ||
29 | bound: { | 29 | _promoted : { value: null }, |
30 | value: false | 30 | promoted : { |
31 | get : function() { return this._promoted; }, | ||
32 | set : function(value) { | ||
33 | if(value === this._promoted) { return; } | ||
34 | |||
35 | this._promoted = value; | ||
36 | |||
37 | this.needsDraw = true; | ||
38 | } | ||
39 | }, | ||
40 | |||
41 | _bound : { value: null }, | ||
42 | bound : { | ||
43 | get : function() { return this._bound; }, | ||
44 | set : function(value) { | ||
45 | if(value === this._bound) { return; } | ||
46 | |||
47 | this._bound = value; | ||
48 | |||
49 | this.needsDraw = true; | ||
50 | } | ||
31 | }, | 51 | }, |
32 | 52 | ||
33 | prepareForDraw: { | 53 | prepareForDraw: { |
@@ -47,6 +67,12 @@ exports.BindingHudOption = Montage.create(Component, { | |||
47 | } else { | 67 | } else { |
48 | this.element.classList.remove("bound"); | 68 | this.element.classList.remove("bound"); |
49 | } | 69 | } |
70 | |||
71 | if(this.promoted || this.bound) { | ||
72 | this.element.classList.add("promoted"); | ||
73 | } else { | ||
74 | this.element.classList.remove("promoted"); | ||
75 | } | ||
50 | // if(this.bindings.length > 0) { | 76 | // if(this.bindings.length > 0) { |
51 | // this.element.classList.add("bound"); | 77 | // this.element.classList.add("bound"); |
52 | // } else { | 78 | // } else { |
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 58cf197f..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 | |||
@@ -90,9 +90,17 @@ exports.BindingHud = Montage.create(Component, { | |||
90 | 90 | ||
91 | getPropertyList : { | 91 | getPropertyList : { |
92 | value: function(component) { | 92 | value: function(component) { |
93 | var props = this.application.ninja.objectsController.getPropertiesFromObject(component, true); | 93 | var props = this.application.ninja.objectsController.getPropertiesFromObject(component, true), |
94 | 94 | promotedProperties = [], | |
95 | 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 | } | ||
96 | 104 | ||
97 | if(this.userElement.controller._montage_metadata) { | 105 | if(this.userElement.controller._montage_metadata) { |
98 | objectName = this.userElement.controller._montage_metadata.objectName; | 106 | objectName = this.userElement.controller._montage_metadata.objectName; |
@@ -115,7 +123,7 @@ exports.BindingHud = Montage.create(Component, { | |||
115 | } | 123 | } |
116 | } | 124 | } |
117 | 125 | ||
118 | return props; | 126 | return props.map(propertyMapper); |
119 | } | 127 | } |
120 | }, | 128 | }, |
121 | 129 | ||
diff --git a/js/stage/binding-view.reel/binding-view.js b/js/stage/binding-view.reel/binding-view.js index ee44758c..9e1b3e22 100755 --- a/js/stage/binding-view.reel/binding-view.js +++ b/js/stage/binding-view.reel/binding-view.js | |||
@@ -386,7 +386,7 @@ exports.BindingView = Montage.create(Component, { | |||
386 | // var mouseUpPoint = new WebKitPoint(e.pageX, e.pageY); | 386 | // var mouseUpPoint = new WebKitPoint(e.pageX, e.pageY); |
387 | // var nodeEl = new webkitConvertPointFromPageToNode(this.element, mouseUpPoint); | 387 | // var nodeEl = new webkitConvertPointFromPageToNode(this.element, mouseUpPoint); |
388 | //debugger; | 388 | //debugger; |
389 | this.connectionElementEnd = nodeEl.parentElement.controller.parentComponent.parentComponent.userComponent; | 389 | this.connectionElementEnd = nodeEl.parentElement.controller.parentComponent.parentComponent.userElement.controller; |
390 | this.connectionPropertyEnd = nodeEl.parentElement.controller.title; | 390 | this.connectionPropertyEnd = nodeEl.parentElement.controller.title; |
391 | this.application.ninja.objectsController.addBinding({ | 391 | this.application.ninja.objectsController.addBinding({ |
392 | sourceObject: this.connectionElementStart, | 392 | sourceObject: this.connectionElementStart, |
@@ -409,7 +409,7 @@ exports.BindingView = Montage.create(Component, { | |||
409 | value: function(e) { | 409 | value: function(e) { |
410 | // We are looking for a mouse down on an option to start the connection visual | 410 | // We are looking for a mouse down on an option to start the connection visual |
411 | if(e._event.target.classList.contains("connectorBubble")) { | 411 | if(e._event.target.classList.contains("connectorBubble")) { |
412 | this.connectionElementStart = e._event.target.parentElement.controller.parentComponent.parentComponent.userComponent; | 412 | this.connectionElementStart = e._event.target.parentElement.controller.parentComponent.parentComponent.userElement.controller; |
413 | this.connectionPropertyStart = e._event.target.parentElement.controller.title; | 413 | this.connectionPropertyStart = e._event.target.parentElement.controller.title; |
414 | this._isDrawingConnection = true; | 414 | this._isDrawingConnection = true; |
415 | this._connectionPositionStart = webkitConvertPointFromPageToNode(this.element, new WebKitPoint(e.pageX, e.pageY)); | 415 | this._connectionPositionStart = webkitConvertPointFromPageToNode(this.element, new WebKitPoint(e.pageX, e.pageY)); |