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

Side by Side Diff: third_party/polymer/v0_8/components/paper-toast/paper-toast.html

Issue 1162563004: Upgrade to 1.0 and switch clients to dom-repeat where needed. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Fix a layout import and remove the gzipped webanimation in reproduce.sh Created 5 years, 6 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
(Empty)
1 <!--
2 @license
3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
4 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt
5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
6 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt
7 Code distributed by Google as part of the polymer project is also
8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt
9 -->
10
11 <link rel="import" href="../polymer/polymer.html">
12 <link rel="import" href="../paper-styles/typography.html">
13 <link rel="import" href="../iron-a11y-announcer/iron-a11y-announcer.html">
14
15 <!--
16 `paper-toast` provides a subtle notification toast.
17
18 @group Paper Elements
19 @element paper-toast
20 @demo demo/index.html
21 @hero hero.svg
22 -->
23 <dom-module id="paper-toast">
24 <style>
25 :host {
26 display: inline-block;
27 position: fixed;
28
29 background: #323232;
30 color: #f1f1f1;
31 min-height: 48px;
32 min-width: 288px;
33 padding: 16px 24px 12px;
34 box-sizing: border-box;
35 box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
36 border-radius: 2px;
37 bottom: 12px;
38 left: 12px;
39 font-size: 14px;
40 cursor: default;
41
42 -webkit-transition: visibility 0.3s, -webkit-transform 0.3s;
43 transition: visibility 0.3s, transform 0.3s;
44
45 -webkit-transform: translateY(100px);
46 transform: translateY(100px);
47
48 visibility: hidden;
49 }
50
51 :host(.capsule) {
52 border-radius: 24px;
53 }
54
55 :host(.fit-bottom) {
56 bottom: 0;
57 left: 0;
58 width: 100%;
59 min-width: 0;
60 border-radius: 0;
61 }
62
63 :host(.paper-toast-open){
64 visibility: visible;
65
66 -webkit-transform: translateY(0px);
67 transform: translateY(0px);
68 }
69 </style>
70 <template>
71 <span id="label">{{text}}</span>
72 <content></content>
73 </template>
74 </dom-module>
75 <script>
76 (function() {
77
78 var PaperToast = Polymer({
79 is: 'paper-toast',
80
81 properties: {
82 /**
83 * The duration in milliseconds to show the toast.
84 */
85 duration: {
86 type: Number,
87 value: 3000
88 },
89
90 /**
91 * The text to display in the toast.
92 */
93 text: {
94 type: String,
95 value: ""
96 },
97
98 /**
99 * True if the toast is currently visible.
100 */
101 visible: {
102 type: Boolean,
103 readOnly: true,
104 value: false,
105 observer: '_visibleChanged'
106 }
107 },
108
109 created: function() {
110 Polymer.IronA11yAnnouncer.requestAvailability();
111 },
112
113 ready: function() {
114 this.async(function() {
115 this.hide();
116 });
117 },
118
119 /**
120 * Show the toast.
121 * @method show
122 */
123 show: function() {
124 if (PaperToast.currentToast) {
125 PaperToast.currentToast.hide();
126 }
127 PaperToast.currentToast = this;
128 this.removeAttribute('aria-hidden');
129 this._setVisible(true);
130 this.fire('iron-announce', {
131 text: this.text
132 });
133 this.debounce('hide', this.hide, this.duration);
134 },
135
136 /**
137 * Hide the toast
138 */
139 hide: function() {
140 this.setAttribute('aria-hidden', 'true');
141 this._setVisible(false);
142 },
143
144 /**
145 * Toggle the opened state of the toast.
146 * @method toggle
147 */
148 toggle: function() {
149 if (!this.visible) {
150 this.show();
151 } else {
152 this.hide();
153 }
154 },
155
156 _visibleChanged: function(visible) {
157 this.toggleClass('paper-toast-open', visible);
158 }
159 });
160
161 PaperToast.currentToast = null;
162
163 })();
164 </script>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698