OLD | NEW |
---|---|
1 <!-- Copyright 2016 The Chromium Authors. All rights reserved. | 1 <!-- Copyright 2016 The Chromium Authors. All rights reserved. |
2 Use of this source code is governed by a BSD-style license that can be | 2 Use of this source code is governed by a BSD-style license that can be |
3 found in the LICENSE file. --> | 3 found in the LICENSE file. --> |
4 | 4 |
5 <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/classe s/iron-flex-layout.html"> | 5 <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/classe s/iron-flex-layout.html"> |
6 <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html "> | 6 <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html "> |
7 | 7 |
8 <!-- | 8 <!-- |
9 Simple OOBE card which should be used for OOBE UI elements. | 9 Simple OOBE dialog which should be used for OOBE UI elements. |
10 It has blue header and grey footer. | 10 It has corect size and padding. It can display top left icon, and has |
michaelpg
2016/08/23 18:40:29
"correct"
Alexander Alekseev
2016/08/25 00:21:47
Done.
| |
11 three parts: header (which should have <h1>title</h1>), footer (content part), | |
12 and optional buttons container at the bottom. | |
11 | 13 |
12 Example: | 14 Example: |
13 <oobe-dialog> | 15 <link rel="stylesheet" href="oobe_dialog_parameters.css"> |
16 <oobe-dialog has-buttons> | |
14 <iron-icon ... class="oobe-icon"> | 17 <iron-icon ... class="oobe-icon"> |
15 <div class="header flex vertical layout end-justified start"> | 18 <div class="header"> |
19 <h1> class="title">Title</h1> | |
20 <div class="subtitle">Subtitle</div> | |
21 </div> | |
22 <div class="footer"> | |
16 ... | 23 ... |
17 </div> | 24 </div> |
18 <oobe-input-form class="footer" ...> | 25 <div class="bottom-buttons"> |
19 </oobe-input-form> | 26 ... |
20 <oobe-text-button class="footer" label="OK" ...> | 27 </div> |
21 </oobe-text-button> | |
22 </oobe-dialog> | 28 </oobe-dialog> |
23 | 29 |
24 Add class |header| to all which you want to go inside the header. Similar | 30 Add class |header| to all which you want to go inside the header. Similar |
25 with clases |footer| and |oobe-icon|. | 31 with clases |footer|, |bottom-buttons| and |oobe-icon|. |bottom-buttons| block |
32 is shown only if |has-buttons| attribute is set. | |
26 --> | 33 --> |
27 <dom-module name="oobe-dialog"> | 34 <dom-module name="oobe-dialog"> |
28 <template> | 35 <template> |
29 <link rel="stylesheet" href="oobe_dialog_host.css"> | 36 <link rel="stylesheet" href="oobe_dialog_host.css"> |
30 <link rel="stylesheet" href="oobe_dialog.css"> | 37 <link rel="stylesheet" href="oobe_dialog.css"> |
31 <div id="header-container"> | 38 <div id="header-container"> |
32 <div class="oobe-icon-div"> | 39 <div class="oobe-icon-div"> |
33 <content select=".oobe-icon"></content> | 40 <content select=".oobe-icon"></content> |
34 </div> | 41 </div> |
35 <div class="oobe-header layout vertical"> | 42 <div class="oobe-header layout vertical"> |
36 <content select=".header"></content> | 43 <content select=".header"></content> |
37 </div> | 44 </div> |
38 </div> | 45 </div> |
39 <div id="footer-container" class="flex"> | 46 <div id="footer-container" class="flex"> |
40 <content select=".footer"></content> | 47 <content select=".footer"></content> |
41 </div> | 48 </div> |
42 <template is="dom-if" if="[[hasButtons]]"> | 49 <template is="dom-if" if="[[hasButtons]]"> |
43 <div id="oobe-bottom" class="layout horizontal center"> | 50 <div id="oobe-bottom" class="layout horizontal center"> |
44 <content select=".bottom-buttons"></content> | 51 <content select=".bottom-buttons"></content> |
45 </div> | 52 </div> |
46 </template> | 53 </template> |
47 </template> | 54 </template> |
48 </dom-module> | 55 </dom-module> |
49 | 56 |
OLD | NEW |