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