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/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/iron-icons/iron-icons.h
tml"> | 6 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/iron-icons.h
tml"> |
7 <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.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 <link rel="import" href="chrome://resources/polymer/v1_0/polymer/polymer.html"> |
9 | 9 |
10 <!-- | 10 <!-- |
11 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). |
12 Example: | 12 Example: |
13 <notification-card button-label="OK" link-label="What?" type="success"> | 13 <notification-card button-label="OK" link-label="What?" type="success"> |
14 Great success! | 14 Great success! |
15 </notification-card> | 15 </notification-card> |
16 | 16 |
17 Atributes: | 17 Atributes: |
18 'button-label' - 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 'link-label' - 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 '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 |
22 is displayed. | 22 is displayed. |
23 | 23 |
24 Events: | 24 Events: |
25 'buttonclick' - fired on button click. | 25 'buttonclick' - fired on button click. |
26 'linkclick' - fired on link click. | 26 'linkclick' - fired on link click. |
27 | 27 |
28 --> | 28 --> |
29 <dom-module name="notification-card"> | 29 <dom-module id="notification-card"> |
30 <link rel="stylesheet" href="notification_card.css"> | 30 <link rel="stylesheet" href="notification_card.css"> |
31 | 31 |
32 <template> | 32 <template> |
33 <div id="container" class="vertical layout center fit"> | 33 <div id="container" class="vertical layout center fit"> |
34 <div class="flex vertical layout center center-justified"> | 34 <div class="flex vertical layout center center-justified"> |
35 <template is="dom-if" if="[[type]]"> | 35 <template is="dom-if" if="[[type]]"> |
36 <div id="icon-container" class="vertical layout center"> | 36 <div id="icon-container" class="vertical layout center"> |
37 <iron-icon icon$="[[iconNameByType_(type)]]"> | 37 <iron-icon icon$="[[iconNameByType_(type)]]"> |
38 </iron-icon> | 38 </iron-icon> |
39 </div> | 39 </div> |
40 </template> | 40 </template> |
41 <div id="text-container"> | 41 <div id="text-container"> |
42 <content></content> | 42 <content></content> |
43 </div> | 43 </div> |
44 </div> | 44 </div> |
45 <div class="self-stretch horizontal-reverse layout justified center"> | 45 <div class="self-stretch horizontal-reverse layout justified center"> |
46 <gaia-button id="submitButton" on-tap="buttonClicked_" | 46 <gaia-button id="submitButton" on-tap="buttonClicked_" |
47 hidden$="[[!buttonLabel]]"> | 47 hidden$="[[!buttonLabel]]"> |
48 <span>[[buttonLabel]]</span> | 48 <span>[[buttonLabel]]</span> |
49 </gaia-button> | 49 </gaia-button> |
50 <a href="#" on-click="linkClicked_" hidden$="{{!linkLabel}}"> | 50 <a href="#" on-click="linkClicked_" hidden$="{{!linkLabel}}"> |
51 <span>[[linkLabel]]</span> | 51 <span>[[linkLabel]]</span> |
52 </a> | 52 </a> |
53 </div> | 53 </div> |
54 </div> | 54 </div> |
55 </template> | 55 </template> |
56 </dom-module> | 56 </dom-module> |
57 | 57 |
OLD | NEW |