Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(13)

Side by Side Diff: chrome/browser/resources/chromeos/login/oobe_dialog.html

Issue 2688153004: ChromeOS OOBE: fix focus flow in MD-OOBE. (Closed)
Patch Set: Rebased. Created 3 years, 10 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
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
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
OLDNEW
« no previous file with comments | « chrome/browser/resources/chromeos/login/oobe_buttons.js ('k') | chrome/browser/resources/chromeos/login/oobe_dialog.js » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698