diff options
author | Jose Antonio Marquez | 2012-06-28 18:18:11 -0700 |
---|---|---|
committer | Jose Antonio Marquez | 2012-06-28 18:18:11 -0700 |
commit | 2f1ad000aeda418696d6ed74202db5e6565ab671 (patch) | |
tree | 92aa8ba48645a621c6f335bfc101335ce69b496c /js/stage/binding-view.reel/binding-hud.reel | |
parent | a859432f0cc5746e2855c16565a75391ea657772 (diff) | |
parent | 8cf2345f5ce1f03ec06a1f34e0ef2dba0d5055bd (diff) | |
download | ninja-2f1ad000aeda418696d6ed74202db5e6565ab671.tar.gz |
Merge branch 'refs/heads/Ninja-Internal' into Document
Diffstat (limited to 'js/stage/binding-view.reel/binding-hud.reel')
3 files changed, 99 insertions, 47 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..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 | |||
@@ -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; |
16 | border:1px solid #000; | ||
17 | text-shadow: 1px 1px 0px #000; | 15 | text-shadow: 1px 1px 0px #000; |
18 | } | 16 | } |
19 | 17 | ||
@@ -31,6 +29,8 @@ | |||
31 | /*background: rgba(0, 0, 0, 0.3);*/ | 29 | /*background: rgba(0, 0, 0, 0.3);*/ |
32 | line-height:16px; | 30 | line-height:16px; |
33 | /*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; | ||
34 | min-width: 80px; | 34 | min-width: 80px; |
35 | } | 35 | } |
36 | 36 | ||
@@ -40,7 +40,10 @@ | |||
40 | line-height:16px; | 40 | line-height:16px; |
41 | padding:1px 25px 1px 8px; | 41 | padding:1px 25px 1px 8px; |
42 | } | 42 | } |
43 | 43 | .bindingHud .hudOption.promoted { | |
44 | color: #FFF; | ||
45 | font-weight: bold; | ||
46 | } | ||
44 | .bindingHud .hudOption .connectorBubble:hover { | 47 | .bindingHud .hudOption .connectorBubble:hover { |
45 | background-color: #1B52A7; | 48 | background-color: #1B52A7; |
46 | 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; |
@@ -58,35 +61,35 @@ | |||
58 | 61 | ||
59 | .bindingHud .hudOption .connectorBubble { | 62 | .bindingHud .hudOption .connectorBubble { |
60 | position: absolute; | 63 | position: absolute; |
61 | right: 5px; | 64 | right: 2px; |
62 | top: 3px; | 65 | top: 3px; |
63 | border-radius: 50%; | 66 | border-radius: 50%; |
64 | width: 10px; | 67 | width: 10px; |
65 | height: 10px; | 68 | height: 10px; |
66 | border-left: 0px; | 69 | border-left: 0px; |
67 | display: block; | 70 | display: block; |
68 | background-color: #313131; | 71 | background-color: #353535; |
69 | box-shadow: inset 0px 2px 7px 1px #0F0F0F, 0 1px #424242; | 72 | box-shadow: inset 0px 2px 3px 1px #222, 0 1px #666; |
70 | 73 | ||
71 | } | 74 | } |
72 | 75 | ||
73 | .splitter.scrollArea { | 76 | .splitter.scrollArea { |
74 | background-color: transparent; | 77 | background-color: transparent; |
75 | background-size: 12%; | 78 | background-size: 10%; |
76 | background-position-y: 2px; | 79 | background-position-y: 2px; |
77 | display: none; | 80 | display: none; |
78 | height:11px; | 81 | height:11px; |
79 | text-align: center; | 82 | text-align: center; |
80 | } | 83 | } |
81 | .splitter.scrollAreaTop { | 84 | .splitter.scrollAreaTop { |
82 | border-top: 1px solid #353535; | 85 | border-bottom: 1px solid #141414; |
83 | box-shadow: 0 -1px 0 0 #141414; | 86 | box-shadow: 0 1px 0 0 #525252; |
84 | } | 87 | } |
85 | .splitter.scrollAreaBottom { | 88 | .splitter.scrollAreaBottom { |
86 | -webkit-transform: rotate(180deg); | 89 | -webkit-transform: rotate(180deg); |
87 | border-top-left-radius: 6px; | 90 | border-top-left-radius: 6px; |
88 | border-top-right-radius: 6px; | 91 | border-top-right-radius: 6px; |
89 | border-bottom: 1px solid #353535; | 92 | border-bottom: 1px solid #525252; |
90 | box-shadow: 0 1px 0 0 #141414; | 93 | box-shadow: 0 1px 0 0 #141414; |
91 | margin-top: 4px; | 94 | margin-top: 4px; |
92 | } | 95 | } |
@@ -95,9 +98,14 @@ | |||
95 | opacity: 0.5; | 98 | opacity: 0.5; |
96 | } | 99 | } |
97 | .splitter.scrollArea:hover:not(.disabled) { | 100 | .splitter.scrollArea:hover:not(.disabled) { |
98 | background-color: #252525; | 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; | ||
99 | } | 108 | } |
100 | |||
101 | 109 | ||
102 | .hudRepetition { | 110 | .hudRepetition { |
103 | 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 9918b06d..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: { |
@@ -45,11 +46,14 @@ exports.BindingHud = Montage.create(Component, { | |||
45 | optionsRepeater: { | 46 | optionsRepeater: { |
46 | value: null | 47 | value: null |
47 | }, | 48 | }, |
48 | 49 | panelData : { | |
49 | _userComponent: { value: null }, | 50 | value: null, |
50 | userComponent: { | 51 | serializable: true |
52 | }, | ||
53 | _userElement: { value: null }, | ||
54 | userElement: { | ||
51 | get: function() { | 55 | get: function() { |
52 | return this._userComponent; | 56 | return this._userElement; |
53 | }, | 57 | }, |
54 | set: function(val) { | 58 | set: function(val) { |
55 | if(!val) { return; } | 59 | if(!val) { return; } |
@@ -58,14 +62,14 @@ exports.BindingHud = Montage.create(Component, { | |||
58 | bindingView = this.parentComponent.parentComponent, | 62 | bindingView = this.parentComponent.parentComponent, |
59 | isOffStage, icon, iconOffsets; | 63 | isOffStage, icon, iconOffsets; |
60 | 64 | ||
61 | this._userComponent = val; | 65 | this._userElement = val; |
62 | this.properties = controller.getPropertiesFromObject(val, true); | 66 | this.properties = this.getPropertyList(val.controller); //controller.getPropertiesFromObject(val, true); |
63 | 67 | ||
64 | controller.getObjectBindings(this.userComponent).forEach(function(obj) { | 68 | controller.getObjectBindings(this._userElement.controller).forEach(function(obj) { |
65 | this.boundProperties.push(obj.sourceObjectPropertyPath); | 69 | this.boundProperties.push(obj.sourceObjectPropertyPath); |
66 | }, this); | 70 | }, this); |
67 | 71 | ||
68 | isOffStage = controller.isOffStageObject(val); | 72 | isOffStage = controller.isOffStageObject(val.controller); |
69 | 73 | ||
70 | if(isOffStage) { | 74 | if(isOffStage) { |
71 | icon = bindingView.getOffStageIcon(val); | 75 | icon = bindingView.getOffStageIcon(val); |
@@ -74,13 +78,52 @@ exports.BindingHud = Montage.create(Component, { | |||
74 | this.x = iconOffsets.x; | 78 | this.x = iconOffsets.x; |
75 | this.y = iconOffsets.y - 80; | 79 | this.y = iconOffsets.y - 80; |
76 | } else { | 80 | } else { |
77 | this.title = val.identifier; | 81 | this.title = this._userElement.controller.identifier; |
78 |