OLD | NEW |
1 <!-- Copyright 2015 The Chromium Authors. All rights reserved. | 1 <!-- Copyright 2015 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/polymer/polymer.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/paper-button/paper-button.ht
ml"> | 6 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/iron-icons.h
tml"> |
7 <link rel="import" href="chrome://resources/polymer/core-icons/core-icons.html"> | 7 <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html
"> |
| 8 <link rel="import" href="chrome://resources/polymer/v1_0/polymer/polymer.html"> |
8 | 9 |
9 <!-- | 10 <!-- |
10 A simple notification card with a button, link (optional) and icon (optional). | 11 A simple notification card with a button, link (optional) and icon (optional). |
11 Example: | 12 Example: |
12 <notification-card buttonLabel="OK" linkLabel="What?" heading="Hello!" | 13 <notification-card button-label="OK" link-label="What?" type="success"> |
13 type="success"> | |
14 Great success! | 14 Great success! |
15 </notification-card> | 15 </notification-card> |
16 | 16 |
17 Atributes: | 17 Atributes: |
18 'buttonLabel' - label displayed on the button. If empty or not set, the | 18 'button-label' - label displayed on the button. If empty or not set, the |
19 button is hidden. | 19 button is hidden. |
20 'linkLabel' - text of the link. If empty or not set, the link is hidden. | 20 'link-label' - text of the link. If empty or not set, the link is hidden. |
21 'heading' - heading. Can be omitted. | |
22 'type' - icon type. Can be either 'success' or 'fail'. If not set, no icon | 21 'type' - icon type. Can be either 'success' or 'fail'. If not set, no icon |
23 is displayed. | 22 is displayed. |
24 | 23 |
25 Events: | 24 Events: |
26 'buttonclick' - fired on button click. | 25 'buttonclick' - fired on button click. |
27 'linkclick' - fired on link click. | 26 'linkclick' - fired on link click. |
28 | 27 |
29 --> | 28 --> |
30 <polymer-element name="notification-card" | 29 <dom-module name="notification-card"> |
31 attributes="buttonLabel linkLabel heading type"> | 30 <link rel="stylesheet" href="notification_card.css"> |
| 31 |
32 <template> | 32 <template> |
33 <link rel="stylesheet" href="notification_card.css"> | 33 <div id="container" class="vertical layout center fit"> |
34 | 34 <div class="flex vertical layout center center-justified"> |
35 <div id="container" vertical layout center fit> | 35 <template is="dom-if" if="[[type]]"> |
36 <div flex vertical layout center center-justified> | 36 <div id="icon-container" class="vertical layout center"> |
37 <div id="icon-container" vertical layout center hidden?="{{!type}}"> | 37 <iron-icon icon$="[[iconNameByType_(type)]]"> |
38 <template if="{{type == 'fail'}}"> | 38 </iron-icon> |
39 <core-icon icon="warning"></core-icon> | 39 </div> |
40 </template> | 40 </template> |
41 <template if="{{type == 'success'}}"> | |
42 <core-icon icon="done"></core-icon> | |
43 </template> | |
44 </div> | |
45 <div id="heading" hidden?="{{!heading}}"> | |
46 {{heading}} | |
47 </div> | |
48 <div id="text-container"> | 41 <div id="text-container"> |
49 <content></content> | 42 <content></content> |
50 </div> | 43 </div> |
51 </div> | 44 </div> |
52 <div self-stretch horizontal reverse layout justified center> | 45 <div class="self-stretch horizontal-reverse layout justified center"> |
53 <paper-button on-tap="{{buttonClicked}}" hidden?="{{!buttonLabel}}"> | 46 <gaia-button on-tap="buttonClicked_" hidden$="[[!buttonLabel]]"> |
54 {{buttonLabel}} | 47 <span>[[buttonLabel]]</span> |
55 </paper-button> | 48 </gaia-button> |
56 <a href="#" on-click="{{linkClicked}}" hidden?="{{!linkLabel}}"> | 49 <a href="#" on-click="linkClicked_" hidden$="{{!linkLabel}}"> |
57 {{linkLabel}} | 50 <span>[[linkLabel]]</span> |
58 </a> | 51 </a> |
59 </div> | 52 </div> |
60 </div> | 53 </div> |
61 </template> | 54 </template> |
62 </polymer-element> | 55 </dom-module> |
| 56 |
OLD | NEW |