aboutsummaryrefslogtreecommitdiff
path: root/js/panels/css-panel/style-sheet.reel
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/css-panel/style-sheet.reel')
-rw-r--r--js/panels/css-panel/style-sheet.reel/style-sheet.css76
-rw-r--r--js/panels/css-panel/style-sheet.reel/style-sheet.html86
-rw-r--r--js/panels/css-panel/style-sheet.reel/style-sheet.js101
3 files changed, 263 insertions, 0 deletions
diff --git a/js/panels/css-panel/style-sheet.reel/style-sheet.css b/js/panels/css-panel/style-sheet.reel/style-sheet.css
new file mode 100644
index 00000000..37c94ef6
--- /dev/null
+++ b/js/panels/css-panel/style-sheet.reel/style-sheet.css
@@ -0,0 +1,76 @@
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.style-sheet-container {
7 border-bottom: 1px solid #505050;
8 display: -webkit-box;
9 -webkit-box-orient: horizontal;
10 padding: 4px 0 3px;
11 white-space: nowrap;
12 position: relative;
13}
14.style-sheet-container > * {
15 -webkit-box-flex: 1;
16 display:-webkit-box;
17}
18.style-sheet-container input[type="checkbox"] {
19 margin-right: 8px;
20 position: relative;
21 -webkit-box-flex: 0;
22}
23.style-sheet-container span {
24 min-width: 50px;
25 overflow: hidden;
26 padding: 2px 0;
27 text-overflow: ellipsis;
28 white-space: nowrap;
29}
30.style-sheet-container label {
31 -webkit-box-flex: 0;
32 margin: 0 5px;
33 padding: 2px 0;
34}
35.style-sheet-container input[type="text"] {
36 min-width: 30px;
37 -webkit-box-flex: 1;
38}
39.style-sheet-container button {
40 -webkit-box-flex: 0;
41 /* TODO: Use sass to minimize image redundancies */
42 background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1%2BjfqAAAACXBIWXMAAAsTAAALEwEAmpwYAAADGGlDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjaY2BgnuDo4uTKJMDAUFBUUuQe5BgZERmlwH6egY2BmYGBgYGBITG5uMAxIMCHgYGBIS8%2FL5UBFTAyMHy7xsDIwMDAcFnX0cXJlYE0wJpcUFTCwMBwgIGBwSgltTiZgYHhCwMDQ3p5SUEJAwNjDAMDg0hSdkEJAwNjAQMDg0h2SJAzAwNjCwMDE09JakUJAwMDg3N%2BQWVRZnpGiYKhpaWlgmNKflKqQnBlcUlqbrGCZ15yflFBflFiSWoKAwMD1A4GBgYGXpf8EgX3xMw8BSMDVQYqg4jIKAUICxE%2BCDEESC4tKoMHJQODAIMCgwGDA0MAQyJDPcMChqMMbxjFGV0YSxlXMN5jEmMKYprAdIFZmDmSeSHzGxZLlg6WW6x6rK2s99gs2aaxfWMPZ9%2FNocTRxfGFM5HzApcj1xZuTe4FPFI8U3mFeCfxCfNN45fhXyygI7BD0FXwilCq0A%2FhXhEVkb2i4aJfxCaJG4lfkaiQlJM8JpUvLS19QqZMVl32llyfvIv8H4WtioVKekpvldeqFKiaqP5UO6jepRGqqaT5QeuA9iSdVF0rPUG9V%2FpHDBYY1hrFGNuayJsym740u2C%2B02KJ5QSrOutcmzjbQDtXe2sHY0cdJzVnJRcFV3k3BXdlD3VPXS8Tbxsfd99gvwT%2F%2FID6wIlBS4N3hVwMfRnOFCEXaRUVEV0RMzN2T9yDBLZE3aSw5IaUNak30zkyLDIzs%2BZmX8xlz7PPryjYVPiuWLskq3RV2ZsK%2FcqSql01jLVedVPrHzbqNdU0n22VaytsP9op3VXUfbpXta%2Bx%2F%2B5Em0mzJ%2F%2BdGj%2Ft8AyNmf2zvs9JmHt6vvmCpYtEFrcu%2BbYsc%2Fm9lSGrTq9xWbtvveWGbZtMNm%2FZarJt%2Bw6rnft3u%2B45uy9s%2F4ODOYd%2BHmk%2FJn58xUnrU%2BfOJJ%2F9dX7SRe1LR68kXv13fc5Nm1t379TfU75%2F4mHeY7En%2B59lvhB5efB1%2Flv5dxc%2BNH0y%2Ffzq64Lv4T8Ffp360%2FrP8f9%2FAA0ADzT6lvFdAAAAIGNIUk0AAHolAACAgwAA%2Bf8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAHXSURBVHjaVJBPaJJhAIef1zmX37YiIw0KixpYYnqQ2cFB0A4hFBSUENTmoMugYB5ajeo2oT8XaaedgrHDlosYlTEWHYICBYPZGJptOMVKbEYqifp9vh087Xd84IGHHzVUELOWSkRLF6YwYChMtdOVyKwFoVJDD3XoUoaMzjbmQGQDzAENo1MZYrmuCkQNSX8P7vpzds04RqLaEOhippIXEbRqaBRaC7mFXKHVpk3Qiih5YyaRf7nP0XEeb4fiFAHLfc%2Fdox32d13f61ABmNkIvb68M3EGwrHQluHibbtA0uvoOnb2lAWKjatz1wrPpi2ug3af98ermZ8jg0Y9vEjqxpfGEhqlKpnRYZ3iX%2FWv6pTRYTK%2Fq20CifElHXFzSkVqtLLdKkpRKWpku2lJTcWcIi4%2BPbRel9Sb%2Fonaoeg9xQD1pu9R369IeI8BcvMim%2B70rn%2B4MHfYe9NdbS4mC5%2FfjDjOCSQgVj4OWEAiyKxMLif7kM7ak0sD5wUA34viyK3TnncVj2neDZI%2FKdh%2FUiC5kYiXfXu%2FxgU2DgAnNh7svto%2BzSawo2eTLGLS1gYkwTUIu0ByR%2F%2F0CxJNn1H%2Fqa6et%2FnBss0U2XofhcX%2BK8e%2FlaN55FpD4f8AhDjCIVQtJ0gAAAAASUVORK5CYII%3D);
43 background-repeat: no-repeat;
44 background-position: 0 1px;
45 border: none;
46 cursor: pointer;
47 padding: 0;
48 width: 21px;
49 height: 21px;
50 margin-left: 2px;
51 -webkit-transform: scale(.75);
52 opacity: .7;
53}
54.style-sheet-container button:hover {
55 opacity: 1;
56}
57.style-sheet-container button:focus {
58 outline: 0 none;
59 box-shadow: none;
60}
61
62/* style sheet edit view */
63.style-sheet-edit {
64 border-left: 1px solid #505050;
65 position: absolute;
66 top: 0;
67 right: 0;
68 margin-right: -100%;
69 background-color: #363636;
70 height: 100%;
71 width: 100%;
72 -webkit-transition: -webkit-transform .6s cubic-bezier(.44,.19,0,.99);
73}
74.style-sheet-edit.expanded {
75 -webkit-transform: translate3d(-250px, 0, 0);
76} \ No newline at end of file
diff --git a/js/panels/css-panel/style-sheet.reel/style-sheet.html b/js/panels/css-panel/style-sheet.reel/style-sheet.html
new file mode 100644
index 00000000..661a1582
--- /dev/null
+++ b/js/panels/css-panel/style-sheet.reel/style-sheet.html
@@ -0,0 +1,86 @@
1<!DOCTYPE html>
2<!-- <copyright>
3This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
4No 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 lang="en">
8<head>
9 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
10 <link href="style-sheet.css" rel="stylesheet" type="text/css">
11 <script type="text/montage-serialization">
12 {
13 "owner": {
14 "module" : "js/panels/css-panel/style-sheet.reel",
15 "name" : "StyleSheet",
16 "properties" : {
17 "element" : {"#" : "style-sheet-container"},
18 "disableCheckbox": {"@": "disableCheckbox"},
19 "nameText": {"@": "name"},
20 "mediaInput": {"@": "mediaInput"},
21 "editButton": {"@": "editButton"},
22 "editView": {"#": "style-sheet-edit"}
23 }
24 },
25 "disableCheckbox": {
26 "module": "js/components/checkbox.reel",
27 "name": "Checkbox",
28 "properties": {
29 "element": { "#": "disable-checkbox" },
30 "checked": true
31 }
32 },
33 "name": {
34 "module": "montage/ui/dynamic-text.reel",
35 "name": "DynamicText",
36 "properties": {
37 "element": {"#": "sheet-name"},
38 "defaultText": "Style sheet"
39 },
40 "bindings": {
41 "value": {
42 "boundObject": {"@": "owner"},
43 "boundObjectPropertyPath": "name",
44 "onewway": true
45 }
46 }
47 },
48 "mediaInput": {
49 "module": "js/components/textfield.reel",
50 "name": "TextField",
51 "properties": {
52 "element": {"#": "media-input"}
53 }
54 },
55 "editButton": {
56 "module": "montage/ui/button.reel",
57 "name": "Button",
58 "properties": {
59 "element": {"#": "editbutton"},
60 "identifier": "editButton",
61 "label": " "
62 },
63 "listeners": [{
64 "type": "action",
65 "listener": {"@": "owner"}
66 }]
67
68 }
69 }
70 </script>
71</head>
72<body>
73<div id="style-sheet-container" class="style-sheet-container">
74 <div id="disable-checkbox"></div>
75 <span id="sheet-name"></span>
76 <label>Media:</label>
77 <div id="media-input"></div>
78 <button data-montage-id="editbutton"></button>
79 <div data-montage-id="style-sheet-edit" class="style-sheet-edit">
80 <button data-montage-id="delete-button" class="nj-skinned">Delete</button>
81 <button data-montage-id="import-button" class="nj-skinned">Import</button>
82 <button data-montage-id="disable-button" class="nj-skinned">Disable</button>
83 </div>
84</div>
85</body>
86</html> \ No newline at end of file
diff --git a/js/panels/css-panel/style-sheet.reel/style-sheet.js b/js/panels/css-panel/style-sheet.reel/style-sheet.js
new file mode 100644
index 00000000..2396d625
--- /dev/null
+++ b/js/panels/css-panel/style-sheet.reel/style-sheet.js
@@ -0,0 +1,101 @@
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
7var Montage = require("montage/core/core").Montage,
8 Component = require("montage/ui/component").Component;
9
10exports.StyleSheet = Montage.create(Component, {
11 deserializedFromTemplate : {
12 value: function() {
13 console.log("style sheet view - deserialized");
14 }
15 },
16 willDraw : {
17 value: function() {
18 console.log("style sheet view - will draw");
19
20 if(this.editing) {
21 document.body.addEventListener('click', this, false);
22 } else {
23 document.body.removeEventListener('click', this, false);
24 }
25 }
26 },
27 draw : {
28 value: function() {
29 console.log("styles sheet view - draw");
30
31 this.mediaInput.value = this._source.media.mediaText;
32
33 if(this.editing) {
34 this.editView.classList.add('expanded');
35 } else {
36 this.editView.classList.remove('expanded');
37 }
38 }
39 },
40
41 handleEditButtonAction: {
42 value: function(e) {
<