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

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

Issue 2267533002: ChromeOS: Update styles of material design OOBE. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Created 4 years, 4 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 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
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698