diff options
Diffstat (limited to 'js/stage')
9 files changed, 137 insertions, 13 deletions
diff --git a/js/stage/binding-view.reel/binding-hud-option.reel/binding-hud-option.html b/js/stage/binding-view.reel/binding-hud-option.reel/binding-hud-option.html index 6b670455..6af26f7c 100755 --- a/js/stage/binding-view.reel/binding-hud-option.reel/binding-hud-option.html +++ b/js/stage/binding-view.reel/binding-hud-option.reel/binding-hud-option.html | |||
@@ -7,21 +7,33 @@ | |||
7 | <html> | 7 | <html> |
8 | <head> | 8 | <head> |
9 | <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | 9 | <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
10 | <link rel="stylesheet" type="text/css" href="binding-view.css"> | 10 | <link rel="stylesheet" type="text/css" href="binding-hud-option.css"> |
11 | 11 | ||
12 | <script type="text/montage-serialization"> | 12 | <script type="text/montage-serialization"> |
13 | { | 13 | { |
14 | "owner": { | 14 | "owner": { |
15 | "prototype": "js/stage/binding-view.reel/binding-hud.reel", | 15 | "prototype": "js/stage/binding-view.reel/binding-hud-option.reel", |
16 | "properties": { | 16 | "properties": { |
17 | "element": {"#": "hudOption"} | 17 | "element": {"#": "hudOption"} |
18 | } | 18 | } |
19 | }, | ||
20 | "label": { | ||
21 | "prototype": "montage/ui/dynamic-text.reel", | ||
22 | "properties": { | ||
23 | "element": {"#": "hudLabel"} | ||
24 | }, | ||
25 | "bindings": { | ||
26 | "value": {"<-": "@owner.title"} | ||
27 | } | ||
19 | } | 28 | } |
20 | } | 29 | } |
21 | </script> | 30 | </script> |
22 | 31 | ||
23 | </head> | 32 | </head> |
24 | <body> | 33 | <body> |
25 | <div class="hudOption">Label for options</div> | 34 | <div data-montage-id="hudOption" class="hudOption"> |
35 | <label data-montage-id="hudLabel" class="hudLabel">Label</label> | ||
36 | <div class="connectorBubble"></div> | ||
37 | </div> | ||
26 | </body> | 38 | </body> |
27 | </html> | 39 | </html> |
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 91a0564e..58f4175e 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 | |||
@@ -11,7 +11,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot | |||
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 | 13 | ||
14 | exports.bindingHud = Montage.create(Component, { | 14 | exports.BindingHudOption = Montage.create(Component, { |
15 | title: { | 15 | title: { |
16 | value: "value" | 16 | value: "value" |
17 | } | 17 | } |
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 018448f1..626706ed 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 | |||
@@ -3,3 +3,60 @@ | |||
3 | No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/> | 3 | No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/> |
4 | (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. | 4 | (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. |
5 | </copyright> */ | 5 | </copyright> */ |
6 | |||
7 | .bindingHud { | ||
8 | position: absolute; | ||
9 | background: #282828; | ||
10 | padding: 0px; | ||
11 | color: #FFF; | ||
12 | font-size: 11px; | ||
13 | box-shadow: 2px 2px 3px black; | ||
14 | border-radius: 3px; | ||
15 | padding: 3px; | ||
16 | padding-top:0px; | ||
17 | border:1px solid #000; | ||
18 | } | ||
19 | |||
20 | .bindingHud .bindingTitle { | ||
21 | font-weight:bold; | ||
22 | background: url('/images/panels/horizontal-resize.png') no-repeat; | ||
23 | padding-left: 10px; | ||
24 | line-height: 20px; | ||
25 | background-position: left center; | ||
26 | padding-top: 2px; | ||
27 | } | ||
28 | |||
29 | .bindingHud .hudRepetition { | ||
30 | background: #555; | ||
31 | padding:1px 9px; | ||
32 | line-height:16px; | ||
33 | border:1px solid #000; | ||
34 | box-shadow: inset 0px 0px 4px #333, 1px 1px 0px #3A3A3A; | ||
35 | min-width: 65px; | ||
36 | } | ||
37 | |||
38 | .bindingHud .hudOption { | ||
39 | position:relative; | ||
40 | border-bottom:1px solid #505050; | ||
41 | line-height:16px; | ||
42 | } | ||
43 | |||
44 | .bindingHud .hudOption:last-child { | ||
45 | border-bottom: 0px; | ||
46 | } | ||
47 | |||
48 | .bindingHud .hudOption .connectorBubble { | ||
49 | position: absolute; | ||
50 | right: -20px; | ||
51 | top: 2px; | ||
52 | background: #555; | ||
53 | border: 1px solid black; | ||
54 | border-radius: 0px; | ||
55 | width: 12px; | ||
56 | height: 12px; | ||
57 | border-left: 0px; | ||
58 | /*border-bottom-right-radius: 50%; | ||
59 | border-top-right-radius: 50%;*/ | ||
60 | |||
61 | |||
62 | } \ No newline at end of file | ||
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 1c73fd77..1f3b181c 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 | |||
@@ -7,7 +7,7 @@ | |||
7 | <html> | 7 | <html> |
8 | <head> | 8 | <head> |
9 | <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | 9 | <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
10 | <link rel="stylesheet" type="text/css" href="binding-view.css"> | 10 | <link rel="stylesheet" type="text/css" href="binding-hud.css"> |
11 | 11 | ||
12 | <script type="text/montage-serialization"> | 12 | <script type="text/montage-serialization"> |
13 | { | 13 | { |
@@ -32,7 +32,16 @@ | |||
32 | "element": {"#" : "hudOption"} | 32 | "element": {"#" : "hudOption"} |
33 | }, | 33 | }, |
34 | "bindings": { | 34 | "bindings": { |
35 | "title": {"<-": "@repeater.objectAtCurrentIteration.title"} | 35 | "title": {"<-": "@repeater.objectAtCurrentIteration.title"} |
36 | } | ||
37 | }, | ||
38 | "Title": { | ||
39 | "prototype": "montage/ui/dynamic-text.reel", | ||
40 | "properties": { | ||
41 | "element": {"#": "title"} | ||
42 | }, | ||
43 | "bindings": { | ||
44 | "value": {"<-": "@owner.title"} | ||
36 | } | 45 | } |
37 | } | 46 | } |
38 | } | 47 | } |
@@ -40,9 +49,8 @@ | |||
40 | 49 | ||
41 | </head> | 50 | </head> |
42 | <body> | 51 | <body> |
43 | |||
44 | |||
45 | <section data-montage-id="bindingHud" class="bindingHud"> | 52 | <section data-montage-id="bindingHud" class="bindingHud"> |
53 | <div data-montage-id="title" class="bindingTitle"></div> | ||
46 | <div data-montage-id="hudRepetition" class="hudRepetition"> | 54 | <div data-montage-id="hudRepetition" class="hudRepetition"> |
47 | <div data-montage-id="hudOption" class="hudOption"></div> | 55 | <div data-montage-id="hudOption" class="hudOption"></div> |
48 | </div> | 56 | </div> |
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 a63f2775..029a1a39 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 | |||
@@ -12,10 +12,28 @@ var Montage = require("montage/core/core").Montage, | |||
12 | Component = require("montage/ui/component").Component; | 12 | Component = require("montage/ui/component").Component; |
13 | 13 | ||
14 | exports.BindingHud = Montage.create(Component, { | 14 | exports.BindingHud = Montage.create(Component, { |
15 | title: { | ||
16 | value: "default" | ||
17 | }, | ||
15 | properties: { | 18 | properties: { |
16 | value: [ | 19 | value: [ |
17 | {"title": "myProperty1"}, | 20 | {"title": "myProperty1"}, |
18 | {"title":"myproperty2"} | 21 | {"title":"myproperty2"} |
19 | ] | 22 | ] |
23 | }, | ||
24 | |||
25 | x: { | ||
26 | value: 20 | ||
27 | }, | ||
28 | |||
29 | y: { | ||
30 | value: 100 | ||