aboutsummaryrefslogtreecommitdiff
path: root/js/components/menu/menu-item.reel
diff options
context:
space:
mode:
Diffstat (limited to 'js/components/menu/menu-item.reel')
-rw-r--r--js/components/menu/menu-item.reel/menu-item.css72
-rw-r--r--js/components/menu/menu-item.reel/menu-item.html83
-rw-r--r--js/components/menu/menu-item.reel/menu-item.js160
3 files changed, 315 insertions, 0 deletions
diff --git a/js/components/menu/menu-item.reel/menu-item.css b/js/components/menu/menu-item.reel/menu-item.css
new file mode 100644
index 00000000..e5ceda5c
--- /dev/null
+++ b/js/components/menu/menu-item.reel/menu-item.css
@@ -0,0 +1,72 @@
1/* <copyright>
2 This file contains proprietary software owned by Motorola Mobility, Inc.<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.
5 </copyright> */
6
7.menuItem .menuName {
8 font-family: 'Droid Sans', sans-serif;
9 font-size: 10pt;
10 padding: 3px 12px 3px 8px;
11 text-shadow : 1px 1px 1px #000000;
12}
13
14.menuItem:hover {
15 background-color: #7f7f7f;
16}
17
18.menubg .subEntries {
19 top: 0%;
20 left: 100%;
21 width: auto;
22 white-space:nowrap;
23}
24
25.itemSeparator:hover {
26 background-color: #474747;
27}
28
29.separator{
30 width:100%;
31 height:2px;
32 position: relative;
33 border: 1px groove #474747 ;
34 border-radius: 2px;
35 background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#474747), to(#cccccc));
36 opacity: 0.5;
37}
38
39.disabled {
40 opacity: 0.5;
41}
42
43.disabled:hover {
44 background-color: #474747;
45}
46
47.menubg .check {
48 float:left;
49 background-image: url(../../../../images/menu/checkmark.png);
50 background-repeat: no-repeat;
51 background-position: center;
52 width: 10px;
53 height: 15px;
54 opacity: 0;
55}
56
57.menubg.submenu .rightArrow {
58 float: right;
59 background-image:url('../../../../images/menu/arrow.png');
60 background-repeat: no-repeat;
61 background-position: center;
62 width: 10px;
63 height: 15px;
64 position: absolute;
65 right:4px;
66 top: 5px;
67 margin-left: 8px;
68}
69
70.subEntries.subMenu .rightArrow {
71 opacity: 0;
72} \ No newline at end of file
diff --git a/js/components/menu/menu-item.reel/menu-item.html b/js/components/menu/menu-item.reel/menu-item.html
new file mode 100644
index 00000000..d199a440
--- /dev/null
+++ b/js/components/menu/menu-item.reel/menu-item.html
@@ -0,0 +1,83 @@
1<!DOCTYPE html>
2<!-- <copyright>
3 This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
4 No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
5 (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
6 </copyright> -->
7<html>
8<head>
9 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
10 <link rel="stylesheet" type="text/css" href="menu-item.css">
11
12 <script type="text/montage-serialization">
13 {
14 "entriesController": {
15 "name": "ArrayController",
16 "module": "montage/ui/controller/array-controller",
17 "properties": {
18 "automaticallyOrganizeObjects": false
19 },
20 "bindings": {
21 "content": {
22 "boundObject": {"@": "owner"},
23 "boundObjectPropertyPath": "subentries",
24 "oneway": true
25 }
26 }
27 },
28
29 "repetition": {
30 "module": "montage/ui/repetition.reel",
31 "name": "Repetition",
32 "properties": {
33 "element": {"#": "subEntries"},
34 "contentController": {"@": "entriesController"}
35 }
36 },
37
38 "menuItem": {
39 "module": "js/components/menu/menu-item.reel",
40 "name": "MenuItem",
41 "properties": {
42 "element": {"#": "menuEntryItem" }
43 },
44 "bindings": {
45 "data": {
46 "boundObject": {"@": "repetition"},
47 "boundObjectPropertyPath": "objectAtCurrentIteration",
48 "oneway": true
49 }
50 }
51 },
52
53 "owner": {
54 "module": "js/components/menu/menu-item.reel",
55 "name": "MenuItem",
56 "properties": {
57 "element": {"#": "menuItem"},
58 "itemBackground": {"#": "menuItemBackground"},
59 "itemText": {"#": "menuItemText"},
60 "subMenu": {"#": "subEntries"}
61 }
62 }
63 }
64 </script>
65
66</head>
67<body>
68
69 <li id="menuItem" class="menuItem">
70 <div id="menuItemBackground" class="menubg">
71 <span class="check"></span>
72 <span id="menuItemText" class="menu-label"></span>
73 <span class="rightArrow"></span>
74
75 <ul id="subEntries" class="subEntries" style="display: none">
76 <li id="menuEntryItem"></li>
77 </ul>
78
79 </div>
80 </li>
81
82</body>
83</html>
diff --git a/js/components/menu/menu-item.reel/menu-item.js b/js/components/menu/menu-item.reel/menu-item.js
new file mode 100644
index 00000000..64a89a6a
--- /dev/null
+++ b/js/components/menu/menu-item.reel/menu-item.js
@@ -0,0 +1,160 @@
1/* <copyright>
2This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
3No 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.
5</copyright> */
6
7var Montage = require("montage/core/core").Montage;
8var Component = require("montage/ui/component").Component;
9
10exports.MenuItem = Montage.create(Component, {
11
12 data: {
13 value: null
14 },
15
16 _enabled: {
17 value: null
18 },
19
20 enabled: {
21 get: function() {
22 return this._enabled;
23 },
24 set: function(value) {
25 if(value !== this._enabled) {
26 this._enabled = value;
27 this.needsDraw = true;
28 }
29 }
30 },
31
32 _checked: {
33 value: null
34 },
35
36 checked: {
37 get: function() {
38 return this._checked;
39 },
40 set: function(value) {
41 /*
42 if( Object.prototype.toString.call( value ) === '[object Array]' ) {
43 value = value.indexOf(this.data.displayText + "Panel") >= 0;
44 }
45 */
46
47 if(this._checked !== value) {
48 this._checked = value;
49 this.needsDraw = true;
50 }
51 }
52 },
53
54 submenu: {
55 value: false
56 },
57
58 subentries: {
59 value: []
60 },
61
62 prepareForDraw: {
63 value: function() {
64 if(!this.data) return;
65
66 if(this.data.separator) {
67 this.element.classList.add("itemSeparator");