| 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 |