Visual Bindings Initial generate from Array.

Signed-off-by: Armen Kesablyan <armen@motorola.com>
author: Armen Kesablyan 2012-05-30 15:30:38 -0700
committer: Armen Kesablyan 2012-05-30 15:30:38 -0700
commit: a581fb3c544ee2faeafbb75f7a3f5719f53cf323 (patch)
tree: c0c1c8354a9422a52f8bf322a56c94cf9a8ba526
parent: 81239571c538f72e398fafa5b07725bf1bbb2d5d (diff)
download: ninja-a581fb3c544ee2faeafbb75f7a3f5719f53cf323.tar.gz
11 files changed, 140 insertions, 14 deletions
diff --git a/images/panels/horizontal-resize.png b/images/panels/horizontal-resize.png
new file mode 100644
index 00000000..7b2cf8a5
--- /dev/null
+++ b/images/panels/horizontal-resize.png
Binary files differ
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 @@
 <html>
 <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-    <link rel="stylesheet" type="text/css" href="binding-view.css">
+    <link rel="stylesheet" type="text/css" href="binding-hud-option.css">
    <script type="text/montage-serialization">
        {
            "owner": {
-                "prototype": "js/stage/binding-view.reel/binding-hud.reel",
+                "prototype": "js/stage/binding-view.reel/binding-hud-option.reel",
                "properties": {
                    "element": {"#": "hudOption"}
                }
+            },
+            "label": {
+                "prototype": "montage/ui/dynamic-text.reel",
+                "properties": {
+                    "element": {"#": "hudLabel"}
+                },
+                "bindings": {
+                    "value": {"<-": "@owner.title"}
+                }
            }
        }
    </script>
 </head>
 <body>
-    <div class="hudOption">Label for options</div>
+    <div data-montage-id="hudOption" class="hudOption">
+        <label data-montage-id="hudLabel" class="hudLabel">Label</label>
+        <div class="connectorBubble"></div>
+    </div>
 </body>
 </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
 var Montage = require("montage/core/core").Montage,
    Component = require("montage/ui/component").Component;
-exports.bindingHud = Montage.create(Component, {
+exports.BindingHudOption = Montage.create(Component, {
    title: {
        value: "value"
    }
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 @@
 No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
 (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
 </copyright> */
+.bindingHud {
+    position: absolute;
+    background: #282828;
+    padding: 0px;
+    color: #FFF;
+    font-size: 11px;
+    box-shadow: 2px 2px 3px black;
+    border-radius: 3px;
+    padding: 3px;
+    padding-top:0px;
+    border:1px solid #000;
+}
+.bindingHud .bindingTitle {
+    font-weight:bold;
+    background: url('/images/panels/horizontal-resize.png') no-repeat;
+    padding-left: 10px;
+    line-height: 20px;
+    background-position: left center;
+    padding-top: 2px;
+}
+.bindingHud .hudRepetition {
+    background: #555;
+    padding:1px 9px;
+    line-height:16px;
+    border:1px solid #000;
+    box-shadow: inset 0px 0px 4px #333, 1px 1px 0px #3A3A3A;
+    min-width: 65px;
+}
+.bindingHud .hudOption {
+    position:relative;
+    border-bottom:1px solid #505050;
+    line-height:16px;
+}
+.bindingHud .hudOption:last-child {
+    border-bottom: 0px;
+}
+.bindingHud .hudOption .connectorBubble {
+    position: absolute;
+    right: -20px;
+    top: 2px;
+    background: #555;
+    border: 1px solid black;
+    border-radius: 0px;
+    width: 12px;
+    height: 12px;
+    border-left: 0px;
+    /*border-bottom-right-radius: 50%;
+    border-top-right-radius: 50%;*/
+}
+\ 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 @@
 <html>
 <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-    <link rel="stylesheet" type="text/css" href="binding-view.css">
+    <link rel="stylesheet" type="text/css" href="binding-hud.css">
    <script type="text/montage-serialization">
        {
@@ -32,7 +32,16 @@
                    "element": {"#" : "hudOption"}
                },
                "bindings": {
-                    "title": {"<-": "@repeater.objectAtCurrentIteration.title"}
+                   "title": {"<-": "@repeater.objectAtCurrentIteration.title"}
+                }
+            },
+            "Title": {
+                "prototype": "montage/ui/dynamic-text.reel",
+                "properties": {
+                    "element": {"#": "title"}
+                },
+                "bindings": {
+                    "value": {"<-": "@owner.title"}
                }
            }
        }
@@ -40,9 +49,8 @@
 </head>
 <body>
    <section data-montage-id="bindingHud" class="bindingHud">
+        <div data-montage-id="title" class="bindingTitle"></div>
        <div data-montage-id="hudRepetition" class="hudRepetition">
            <div data-montage-id="hudOption" class="hudOption"></div>
        </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,
    Component = require("montage/ui/component").Component;
 exports.BindingHud = Montage.create(Component, {
+    title: {
+        value: "default"
+    },
    properties: {
        value: [
            {"title": "myProperty1"},
            {"title":"myproperty2"}
        ]
+    },
author	Armen Kesablyan	2012-05-30 15:30:38 -0700
committer	Armen Kesablyan	2012-05-30 15:30:38 -0700
commit	a581fb3c544ee2faeafbb75f7a3f5719f53cf323 (patch)
tree	c0c1c8354a9422a52f8bf322a56c94cf9a8ba526
parent	81239571c538f72e398fafa5b07725bf1bbb2d5d (diff)
download	ninja-a581fb3c544ee2faeafbb75f7a3f5719f53cf323.tar.gz

diff --git a/images/panels/horizontal-resize.png b/images/panels/horizontal-resize.png new file mode 100644 index 00000000..7b2cf8a5 --- /dev/null +++ b/images/panels/horizontal-resize.png
Binary files differ


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	},