diff options
Diffstat (limited to 'js/panels/css-panel/style-sheet.reel')
-rw-r--r-- | js/panels/css-panel/style-sheet.reel/style-sheet.css | 49 | ||||
-rw-r--r-- | js/panels/css-panel/style-sheet.reel/style-sheet.html | 36 | ||||
-rw-r--r-- | js/panels/css-panel/style-sheet.reel/style-sheet.js | 9 |
3 files changed, 91 insertions, 3 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 index e69de29b..41c5ab12 100644 --- a/js/panels/css-panel/style-sheet.reel/style-sheet.css +++ b/js/panels/css-panel/style-sheet.reel/style-sheet.css | |||
@@ -0,0 +1,49 @@ | |||
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 | } | ||
13 | .style-sheet-container > * { | ||
14 | -webkit-box-flex: 1; | ||
15 | display:-webkit-box; | ||
16 | } | ||
17 | .style-sheet-container input[type="checkbox"] { | ||
18 | margin-right: 8px; | ||
19 | position: relative; | ||
20 | -webkit-box-flex: 0; | ||
21 | } | ||
22 | .style-sheet-container span { | ||
23 | min-width: 50px; | ||
24 | overflow: hidden; | ||
25 | padding: 2px 0; | ||
26 | text-overflow: ellipsis; | ||
27 | white-space: nowrap; | ||
28 | } | ||
29 | .style-sheet-container label { | ||
30 | -webkit-box-flex: 0; | ||
31 | margin: 0 5px; | ||
32 | padding: 2px 0; | ||
33 | } | ||
34 | .style-sheet-container input[type="text"] { | ||
35 | min-width: 30px; | ||
36 | } | ||
37 | .style-sheet-container button { | ||
38 | background: none; | ||
39 | color: #FFF; | ||
40 | cursor: pointer; | ||
41 | } | ||
42 | .style-sheet-container button:after { | ||
43 | content: "\2716"; | ||
44 | opacity: 0.7; | ||
45 | } | ||
46 | |||
47 | .style-sheet-container button:hover:after { | ||
48 | opacity: 1; | ||
49 | } \ 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 index 43ffec6f..64b8e8ae 100644 --- a/js/panels/css-panel/style-sheet.reel/style-sheet.html +++ b/js/panels/css-panel/style-sheet.reel/style-sheet.html | |||
@@ -7,16 +7,29 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot | |||
7 | <html lang="en"> | 7 | <html lang="en"> |
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 href="style-sheet.css" rel="stylesheet" type="text/css"> | ||
10 | <script type="text/montage-serialization"> | 11 | <script type="text/montage-serialization"> |
11 | { | 12 | { |
12 | "owner": { | 13 | "owner": { |
13 | "module" : "js/panels/css-panel/style-sheet.reel", | 14 | "module" : "js/panels/css-panel/style-sheet.reel", |
14 | "name" : "StyleSheet", | 15 | "name" : "StyleSheet", |
15 | "properties" : { | 16 | "properties" : { |
16 | "element" : {"#" : "style-sheet-container"} | 17 | "element" : {"#" : "style-sheet-container"}, |
18 | "disableCheckbox": {"@": "disableCheckbox1"}, | ||
19 | "nameText": {"@": "name1"}, | ||
20 | "mediaInput": {"@": "mediaInput1"}, | ||
21 | "deleteButton": {"@": "deleteButton1"} | ||
17 | } | 22 | } |
18 | }, | 23 | }, |
19 | "name": { | 24 | "disableCheckbox1": { |
25 | "module": "js/components/checkbox.reel", | ||
26 | "name": "Checkbox", | ||
27 | "properties": { | ||
28 | "element": { "#": "disable-checkbox" }, | ||
29 | "checked": true | ||
30 | } | ||
31 | }, | ||
32 | "name1": { | ||
20 | "module": "montage/ui/dynamic-text.reel", | 33 | "module": "montage/ui/dynamic-text.reel", |
21 | "name": "DynamicText", | 34 | "name": "DynamicText", |
22 | "properties": { | 35 | "properties": { |
@@ -30,6 +43,21 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot | |||
30 | "onewway": true | 43 | "onewway": true |
31 | } | 44 | } |
32 | } | 45 | } |
46 | }, | ||
47 | "mediaInput1": { | ||
48 | "module": "js/components/textfield.reel", | ||
49 | "name": "TextField", | ||
50 | "properties": { | ||
51 | "element": {"#": "media-input"} | ||
52 | } | ||
53 | }, | ||
54 | "deleteButton1": { | ||
55 | "module": "js/components/button.reel", | ||
56 | "name": "Button", | ||
57 | "properties": { | ||
58 | "element": {"#": "delete-button"}, | ||
59 | "label": " " | ||
60 | } | ||
33 | 61 | ||
34 | } | 62 | } |
35 | } | 63 | } |
@@ -37,7 +65,11 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot | |||
37 | </head> | 65 | </head> |
38 | <body> | 66 | <body> |
39 | <div id="style-sheet-container" class="style-sheet-container"> | 67 | <div id="style-sheet-container" class="style-sheet-container"> |
68 | <div id="disable-checkbox"></div> | ||
40 | <span id="sheet-name"></span> | 69 | <span id="sheet-name"></span> |
70 | <label>Media:</label> | ||
71 | <div id="media-input"></div> | ||
72 | <div id="delete-button"></div> | ||
41 | </div> | 73 | </div> |
42 | </body> | 74 | </body> |
43 | </html> \ No newline at end of file | 75 | </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 index a4fe5960..5caf69a4 100644 --- a/js/panels/css-panel/style-sheet.reel/style-sheet.js +++ b/js/panels/css-panel/style-sheet.reel/style-sheet.js | |||
@@ -21,8 +21,15 @@ exports.StyleSheet = Montage.create(Component, { | |||
21 | draw : { | 21 | draw : { |
22 | value: function() { | 22 | value: function() { |
23 | console.log("styles sheet view - draw"); | 23 | console.log("styles sheet view - draw"); |
24 | |||
25 | this.mediaInput.value = this._source.media.mediaText; | ||
24 | } | 26 | } |
25 | }, | 27 | }, |
28 | |||
29 | mediaInput: { | ||
30 | value: null | ||
31 | }, | ||
32 | |||
26 | _name: { | 33 | _name: { |
27 | value: null | 34 | value: null |
28 | }, | 35 | }, |
@@ -44,7 +51,7 @@ exports.StyleSheet = Montage.create(Component, { | |||
44 | set: function(sheet) { | 51 | set: function(sheet) { |
45 | console.log('sheet being set'); | 52 | console.log('sheet being set'); |
46 | if(sheet.href) { | 53 | if(sheet.href) { |
47 | this.name = sheet.href.substring(sheet.href.lastIndexOf('/')); | 54 | this.name = sheet.href.substring(sheet.href.lastIndexOf('/')+1); |
48 | } else { | 55 | } else { |
49 | this.name = 'Style Tag'; | 56 | this.name = 'Style Tag'; |
50 | } | 57 | } |