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.css104
-rw-r--r--js/panels/css-panel/style-sheet.reel/style-sheet.html89
-rw-r--r--js/panels/css-panel/style-sheet.reel/style-sheet.js107
3 files changed, 300 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..b64c1d69
--- /dev/null
+++ b/js/panels/css-panel/style-sheet.reel/style-sheet.css
@@ -0,0 +1,104 @@
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 margin-right: 25px;
39}
40
41/* style sheet edit view */
42
43.style-sheet-container .ss-edit-button {
44 /* TODO: Use sass to minimize image redundancies */
45 background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw%2FeHBhY2tldCBiZWdpbj0i77u%2FIiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8%2BIDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIE1hY2ludG9zaCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpDQkI4QzVEMTc3ODcxMUUxQTlCOUNDQUJBMEUyMTIwMSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpDQkI4QzVEMjc3ODcxMUUxQTlCOUNDQUJBMEUyMTIwMSI%2BIDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkNCQjhDNUNGNzc4NzExRTFBOUI5Q0NBQkEwRTIxMjAxIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkNCQjhDNUQwNzc4NzExRTFBOUI5Q0NBQkEwRTIxMjAxIi8%2BIDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY%2BIDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8%2Bs3B0RQAAAd9JREFUeNockbGL2nAUx%2FNLorHaJXKjJ6YcDkVcHByUQwQDbl26FqEu3dykLjoIXXTwDygKFcrRP%2BC8Q0HwQDlwOaRCKFiuCmo0d0Jr1ZjY923ghZfv9%2FN%2B7%2F1eOJ%2FPx%2BEpl8uKZVk3p9PpRlXV81QqdY4cGjww%2F9l2u81Fo1EuFotdbrdbzbbtX%2FP5%2FAqBHBo8MGB5RVF8yWTSv9%2FvXYIgsNVq9XcwGLxCIBdFkcEDA5YZhnFNJwXcbjc3Go32mUzmlsaYYAQ6QGk0GmooFJKoE8fz%2FE9%2BsVjIHo%2FHpes6y2azX8PhsNbtdtMI5NDggQHL0wW%2FdDodfTqdPm02m4dqtfqmXq9LCOTQ4IEBy3u93gdq9YfCplHM2Wz2gsZ7ptggJ%2B0ADwxYRuI1zfqaLvY7l8t9mkwmcqVSeWeapl0oFJqBQOCpVqt9lCTpJWnfWb%2Ffv6fKM2xot9s9FovFz71ez6ST7UQiIZVKpffUzU%2Ffp%2FV6vWLBYPDD8Xi8oJ%2FkarVaKhVatLlHxhgny7KfPCGdTt%2FS945W%2FEPUNO2KNihGIpH44XBI0Tak8Xh8hoJ4PC7RGCZN0BkOh3fEHUV6Gdi50%2BnUqaWxXC6FfD7%2FDQXNZvMtXdZyOBw6IUtw%2FwQYACT6GJDDh744AAAAAElFTkSuQmCC);
46 background-repeat: no-repeat;
47 background-position: center center;
48 cursor: pointer;
49 padding: 0;
50 width: 24px;
51 height: 100%;
52 opacity: 1;
53 position: absolute;
54 left: -24px;
55 -webkit-transition: background-color .55s cubic-bezier(.44,.19,0,.99);
56 border-width: 0 0 0 1px;
57 border-style: none none none solid;
58 border-color: rgba(80, 80, 80, 0);
59 opacity: .7;
60}
61.style-sheet-container button:hover {
62 opacity: 1;
63}
64.style-sheet-container button:focus {
65 outline: 0 none;
66 box-shadow: none;
67}
68
69.style-sheet-edit {
70 position: absolute;
71 top: 0;
72 right: 0;
73 margin-right: -100%;
74 height: 100%;
75 width: 100%;
76 -webkit-transition-property: -webkit-transform, background-color;
77 -webkit-transition-duration: .55s;
78 -webkit-transition-timing-function: cubic-bezier(.44,.19,0,.99);
79}
80.style-sheet-edit.expanded .ss-edit-button {
81 background-color: #363636;
82 border-color: rgba(80, 80, 80, 1);
83 opacity: 1;
84}
85.style-sheet-edit.expanded {
86 background-color: #363636;
87}
88.style-sheet-edit button.nj-skinned {
89 height: 20px;
90 padding: 2px 10px;
91 margin-left: 9px;
92 margin-right: -4px;
93 top: 2px;
94 position: relative;
95 text-transform: capitalize;
96 font-size: 10px;
97}
98.style-sheet-edit .ss-delete-button {
99 background: -webkit-linear-gradient(top, rgba(91,57,56,1) 0%,rgba(53,35,35,1) 100%);
100}
101.style-sheet-edit button.ss-disable-button {
102 position: absolute;
103 right: 25px;
104} \ 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..1c47ce3f
--- /dev/null
+++ b/js/panels/css-panel/style-sheet.reel/style-sheet.html
@@ -0,0 +1,89 @@
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": {"#": "edit-button"},
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
79 <div data-montage-id="style-sheet-edit" class="style-sheet-edit">
80
81 <button data-montage-id="edit-button" class="ss-edit-button"></button>
82 <button data-montage-id="delete-button" class="ss-delete-button nj-skinned">Delete</button>
83 <button data-montage-id="import-button" class="nj-skinned">Import</button>
84 <button data-montage-id="disable-button" class="ss-disable-button nj-skinned">Disable</button>
85
86 </div>
87</div>
88</body>
89</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..4f9ad21f
--- /dev/null
+++ b/js/panels/css-panel/style-sheet.reel/style-sheet.js
@@ -0,0 +1,107 @@
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 _translateDistance: {