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 dialog which should be used for OOBE UI elements. | 9 Simple OOBE dialog which should be used for OOBE UI elements. |
10 It has correct size and padding. It can display top left icon, and has | 10 It has correct size and padding. It can display top left icon, and has |
11 three parts: header (which should have <h1>title</h1>), footer (content part), | 11 three parts: header (which should have <h1>title</h1>), footer (content part), |
12 and optional buttons container at the bottom. | 12 and optional buttons container at the bottom. |
13 | 13 |
| 14 When shown (i.e. when outside container calls .show()): |
| 15 1. If this dialog has tags in class "focus-on-show", the first one will be |
| 16 focused. |
| 17 2. 'show-dialog' is fired. |
| 18 |
14 Example: | 19 Example: |
15 <link rel="stylesheet" href="oobe_dialog_parameters.css"> | 20 <link rel="stylesheet" href="oobe_dialog_parameters.css"> |
16 <oobe-dialog has-buttons> | 21 <oobe-dialog on-show-dialog="onTestDialogShown_" has-buttons> |
17 <iron-icon ... class="oobe-icon"> | 22 <iron-icon ... class="oobe-icon"> |
18 <div class="header"> | 23 <div class="header"> |
19 <h1 class="title">Title</h1> | 24 <h1 class="title">Title</h1> |
20 <div class="subtitle">Subtitle</div> | 25 <div class="subtitle">Subtitle</div> |
21 </div> | 26 </div> |
22 <div class="footer"> | 27 <div class="footer"> |
| 28 <div class="focus-on-show">...</div> |
23 ... | 29 ... |
24 </div> | 30 </div> |
25 <div class="bottom-buttons"> | 31 <div class="bottom-buttons"> |
26 ... | 32 ... |
27 </div> | 33 </div> |
28 </oobe-dialog> | 34 </oobe-dialog> |
29 | 35 |
30 Add class |header| to all which you want to go inside the header. Similar | 36 Add class |header| to all which you want to go inside the header. Similar |
31 with clases |footer|, |bottom-buttons| and |oobe-icon|. |bottom-buttons| block | 37 with clases |footer|, |bottom-buttons| and |oobe-icon|. |bottom-buttons| block |
32 is shown only if |has-buttons| attribute is set. | 38 is shown only if |has-buttons| attribute is set. |
(...skipping 14 matching lines...) Expand all Loading... |
47 <content select=".footer"></content> | 53 <content select=".footer"></content> |
48 </div> | 54 </div> |
49 <template is="dom-if" if="[[hasButtons]]"> | 55 <template is="dom-if" if="[[hasButtons]]"> |
50 <div id="oobe-bottom" class="layout horizontal center"> | 56 <div id="oobe-bottom" class="layout horizontal center"> |
51 <content select=".bottom-buttons"></content> | 57 <content select=".bottom-buttons"></content> |
52 </div> | 58 </div> |
53 </template> | 59 </template> |
54 </template> | 60 </template> |
55 </dom-module> | 61 </dom-module> |
56 | 62 |
OLD | NEW |