diff options
Diffstat (limited to 'third_party/polymer/components/paper-toast')
8 files changed, 464 insertions, 0 deletions
diff --git a/third_party/polymer/components/paper-toast/.bower.json b/third_party/polymer/components/paper-toast/.bower.json new file mode 100644 index 0000000..363fdff --- /dev/null +++ b/third_party/polymer/components/paper-toast/.bower.json @@ -0,0 +1,21 @@ +{ + "name": "paper-toast", + "private": true, + "dependencies": { + "core-media-query": "Polymer/core-media-query#>=0.3.0 <1.0.0", + "core-overlay": "Polymer/core-overlay#>=0.3.0 <1.0.0", + "font-roboto": "Polymer/font-roboto#>=0.3.0 <1.0.0", + "paper-button": "Polymer/paper-button#>=0.3.0 <1.0.0" + }, + "homepage": "https://github.com/Polymer/paper-toast", + "version": "0.3.5", + "_release": "0.3.5", + "_resolution": { + "type": "version", + "tag": "0.3.5", + "commit": "1e7e60127901675f181f6c4385e520a0bc6df607" + }, + "_source": "git://github.com/Polymer/paper-toast.git", + "_target": "0.3.5", + "_originalSource": "Polymer/paper-toast" +}
\ No newline at end of file diff --git a/third_party/polymer/components/paper-toast/README.md b/third_party/polymer/components/paper-toast/README.md new file mode 100644 index 0000000..9db6676 --- /dev/null +++ b/third_party/polymer/components/paper-toast/README.md @@ -0,0 +1,4 @@ +paper-toast +============ + +See the [component page](http://www.polymer-project.org/docs/elements/paper-elements.html#paper-toast) for more information. diff --git a/third_party/polymer/components/paper-toast/bower.json b/third_party/polymer/components/paper-toast/bower.json new file mode 100644 index 0000000..3c34334 --- /dev/null +++ b/third_party/polymer/components/paper-toast/bower.json @@ -0,0 +1,10 @@ +{ + "name": "paper-toast", + "private": true, + "dependencies": { + "core-media-query": "Polymer/core-media-query#>=0.3.0 <1.0.0", + "core-overlay": "Polymer/core-overlay#>=0.3.0 <1.0.0", + "font-roboto": "Polymer/font-roboto#>=0.3.0 <1.0.0", + "paper-button": "Polymer/paper-button#>=0.3.0 <1.0.0" + } +}
\ No newline at end of file diff --git a/third_party/polymer/components/paper-toast/demo.html b/third_party/polymer/components/paper-toast/demo.html new file mode 100644 index 0000000..a614973 --- /dev/null +++ b/third_party/polymer/components/paper-toast/demo.html @@ -0,0 +1,58 @@ +<!doctype html> +<html> +<head> + <title>paper-toast</title> + + <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> + <meta name="mobile-web-app-capable" content="yes"> + <meta name="apple-mobile-web-app-capable" content="yes"> + + <script src="../platform/platform.js"></script> + + <link rel="import" href="paper-toast.html"> + <link rel="import" href="../font-roboto/roboto.html" > + <link rel="import" href="../paper-button/paper-button.html" > + + <style> + + html, body { + height: 100%; + } + + body { + overflow: hidden; + margin: 0; + font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-tap-highlight-color: rgba(0,0,0,0); + -webkit-touch-callout: none; + } + + paper-button { + margin: 20px; + } + + </style> + +</head> +<body unresolved> + + <paper-button raisedButton onclick="document.querySelector('#toast1').show()" label="Discard Draft"></paper-button> + + <paper-button raisedButton onclick="document.querySelector('#toast2').show()" label="Get Messages"></paper-button> + + <paper-button raisedButton onclick="document.querySelector('#toast3').show()" label="Send Message"></paper-button> + + <paper-toast id="toast1" text="Your draft has been discarded."></paper-toast> + + <paper-toast id="toast2" role="alert" text="Connection timed out. Showing limited messages."> + <div style="color: #eeff41;" onclick="console.log('RETRY')">Retry</div> + </paper-toast> + + <paper-toast id="toast3" class="capsule" text="Message sent" style="padding-right: 60px;"></paper-toast> + +</body> +</html> diff --git a/third_party/polymer/components/paper-toast/index.html b/third_party/polymer/components/paper-toast/index.html new file mode 100644 index 0000000..58856f3 --- /dev/null +++ b/third_party/polymer/components/paper-toast/index.html @@ -0,0 +1,22 @@ +<!doctype html> +<!-- +Copyright (c) 2014 The Polymer Project Authors. All rights reserved. +This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE +The complete set of authors may be found at http://polymer.github.io/AUTHORS +The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS +Code distributed by Google as part of the polymer project is also +subject to an additional IP rights grant found at http://polymer.github.io/PATENTS +--> +<html> +<head> + + <script src="../platform/platform.js"></script> + <link rel="import" href="../core-component-page/core-component-page.html"> + +</head> +<body unresolved> + + <core-component-page></core-component-page> + +</body> +</html> diff --git a/third_party/polymer/components/paper-toast/metadata.html b/third_party/polymer/components/paper-toast/metadata.html new file mode 100644 index 0000000..7b65bd7 --- /dev/null +++ b/third_party/polymer/components/paper-toast/metadata.html @@ -0,0 +1,11 @@ +<x-meta id="paper-toast" label="Toast" group="Paper" isContainer> + + <template> + <paper-toast text="Toast!"></paper-toast> + </template> + + <template id="imports"> + <link rel="import" href="paper-toast.html"> + </template> + +</x-meta> diff --git a/third_party/polymer/components/paper-toast/paper-toast.css b/third_party/polymer/components/paper-toast/paper-toast.css new file mode 100644 index 0000000..a677104 --- /dev/null +++ b/third_party/polymer/components/paper-toast/paper-toast.css @@ -0,0 +1,80 @@ +/* +Copyright (c) 2014 The Polymer Project Authors. All rights reserved. +This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt +The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt +The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt +Code distributed by Google as part of the polymer project is also +subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt +*/ + +:host { + display: inline-block; + background: #323232; + color: #f1f1f1; + min-height: 48px; + min-width: 288px; + padding: 16px 24px 12px; + box-sizing: border-box; + -moz-box-sizing: border-box; + box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26); + border-radius: 2px; + bottom: 12px; + left: 12px; + font-size: 14px; + cursor: default; +} + +:host(.capsule) { + border-radius: 24px; +} + +:host(.fit-bottom) { + bottom: 0; + left: 0; + width: 100%; + min-width: 0; + border-radius: 0; +} + +:host(.core-transition.dragging) { + transition: none; +} + +:host(.core-transition.fade-out-down), +:host(.core-transition.fade-out-up), +:host(.core-transition.fade-out-right), +:host(.core-transition.fade-out-left) { + opacity: 0; + transition: -webkit-transform 0.08s ease-in-out, opacity 0.08s ease-in-out; + transition: transform 0.08s ease-in-out, opacity 0.08s ease-in-out; +} + +:host(.core-transition.fade-out-down) { + -webkit-transform: translate(0, 100%); + transform: translate(0, 100%); +} + +:host(.core-transition.fade-out-up) { + -webkit-transform: translate(0, -100%); + transform: translate(0, -100%); +} + +:host(.core-transition.fade-out-right) { + -webkit-transform: translate(100%, 0); + transform: translate(100%, 0); +} + +:host(.core-transition.fade-out-left) { + -webkit-transform: translate(-100%, 0); + transform: translate(-100%, 0); +} + +.toast-container { + overflow: hidden; +} + +.toast-action { + padding-left: 24px; + cursor: pointer; + text-transform: uppercase; +} diff --git a/third_party/polymer/components/paper-toast/paper-toast.html b/third_party/polymer/components/paper-toast/paper-toast.html new file mode 100644 index 0000000..df62e50 --- /dev/null +++ b/third_party/polymer/components/paper-toast/paper-toast.html @@ -0,0 +1,258 @@ +<!-- +Copyright (c) 2014 The Polymer Project Authors. All rights reserved. +This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt +The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt +The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt +Code distributed by Google as part of the polymer project is also +subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt +--> + +<!-- +`paper-toast` provides lightweight feedback about an operation in a small popup +at the base of the screen on mobile and at the lower left on desktop. Toasts are +above all other elements on screen, including the FAB. + +Toasts automatically disappear after a timeout or after user interaction +elsewhere on the screen, whichever comes first. Toasts can be swiped off +screen. There can be only one on the screen at a time. + +Example: + + <paper-toast text="Your draft has been discarded." onclick="discardDraft(el)"></paper-toast> + + <script> + function discardDraft(el) { + el.show(); + } + </script> + +An action button can be presented in the toast. + +Example (using Polymer's data-binding features): + + <paper-toast id="toast2" text="Connection timed out. Showing limited messages."> + <div style="color: blue;" on-tap="{{retry}}">Retry</div> + </paper-toast> + +Positioning toast: + +A standard toast appears near the lower left of the screen. You can change the +position by overriding bottom and left positions. + + paper-toast { + bottom: 40px; + left: 10px; + } + +To make it fit at the bottom of the screen: + + paper-toast { + bottom: 0; + left: 0; + width: 100%; + } + +When the screen size is smaller than the `responsiveWidth` (default to 480px), +the toast will automatically fits at the bottom of the screen. + +@group Paper Elements +@element paper-toast +@homepage github.io +--> + +<link rel="import" href="../core-overlay/core-overlay.html"> +<link rel="import" href="../core-transition/core-transition-css.html"> +<link rel="import" href="../core-media-query/core-media-query.html"> + +<polymer-element name="paper-toast" attributes="text duration opened responsiveWidth swipeDisabled" role="status"> + +<template> + + <link rel="stylesheet" href="paper-toast.css" > + + <core-overlay opened="{{opened}}" target="{{}}" sizingTarget="{{$.container}}" transition="core-transition-bottom"></core-overlay> + + <div class="toast-container" horizontal layout> + + <div class="toast-text" flex>{{text}}</div> + + <div class="toast-text toast-action" on-tap="{{dismiss}}"> + <content></content> + </div> + + </div> + + <core-media-query query="max-width: {{responsiveWidth}}" queryMatches="{{narrowMode}}"></core-media-query> + +</template> +<script> + + (function() { + + var currentToast; + + Polymer('paper-toast', { + + /** + * The text shows in a toast. + * + * @attribute text + * @type string + * @default '' + */ + text: '', + + /** + * The duration in milliseconds to show the toast. + * + * @attribute duration + * @type number + * @default 3000 + */ + duration: 3000, + + /** + * Set opened to true to show the toast and to false to hide it. + * + * @attribute opened + * @type boolean + * @default false + */ + opened: false, + + /** + * Min-width when the toast changes to narrow layout. In narrow layout, + * the toast fits at the bottom of the screen when opened. + * + * @attribute responsiveWidth + * @type string + * @default '480px' + */ + responsiveWidth: '480px', + + /** + * If true, the toast can't be swiped. + * + * @attribute swipeDisabled + * @type boolean + * @default false + */ + swipeDisabled: false, + + eventDelegates: { + trackstart: 'trackStart', + track: 'track', + trackend: 'trackEnd', + transitionend: 'transitionEnd' + }, + + narrowModeChanged: function() { + this.classList.toggle('fit-bottom', this.narrowMode); + }, + + openedChanged: function() { + if (this.opened) { + this.dismissJob = this.job(this.dismissJob, this.dismiss, this.duration); + } else { + this.dismissJob && this.dismissJob.stop(); + this.dismiss(); + } + }, + + /** + * Toggle the opened state of the toast. + * @method toggle + */ + toggle: function() { + this.opened = !this.opened; + }, + + /** + * Show the toast for the specified duration + * @method show + */ + show: function() { + if (currentToast) { + currentToast.dismiss(); + } + currentToast = this; + this.opened = true; + }, + + /** + * Dismiss the toast and hide it. + * @method dismiss + */ + dismiss: function() { + if (this.dragging) { + this.shouldDismiss = true; + } else { + this.opened = false; + if (currentToast === this) { + currentToast = null; + } + } + }, + + trackStart: function(e) { + if (!this.swipeDisabled) { + e.preventTap(); + this.vertical = e.yDirection; + this.w = this.offsetWidth; + this.h = this.offsetHeight; + this.dragging = true; + this.classList.add('dragging'); + } + }, + + track: function(e) { + if (this.dragging) { + var s = this.style; + if (this.vertical) { + var y = e.dy; + s.opacity = (this.h - Math.abs(y)) / this.h; + s.webkitTransform = s.transform = 'translate3d(0, ' + y + 'px, 0)'; + } else { + var x = e.dx; + s.opacity = (this.w - Math.abs(x)) / this.w; + s.webkitTransform = s.transform = 'translate3d(' + x + 'px, 0, 0)'; + } + } + }, + + trackEnd: function(e) { + if (this.dragging) { + this.classList.remove('dragging'); + this.style.opacity = null; + this.style.webkitTransform = this.style.transform = null; + var cl = this.classList; + if (this.vertical) { + cl.toggle('fade-out-down', e.yDirection === 1 && e.dy > 0); + cl.toggle('fade-out-up', e.yDirection === -1 && e.dy < 0); + } else { + cl.toggle('fade-out-right', e.xDirection === 1 && e.dx > 0); + cl.toggle('fade-out-left', e.xDirection === -1 && e.dx < 0); + } + this.dragging = false; + } + }, + + transitionEnd: function() { + var cl = this.classList; + if (cl.contains('fade-out-right') || cl.contains('fade-out-left') || + cl.contains('fade-out-down') || cl.contains('fade-out-up')) { + this.dismiss(); + cl.remove('fade-out-right', 'fade-out-left', + 'fade-out-down', 'fade-out-up'); + } else if (this.shouldDismiss) { + this.dismiss(); + } + this.shouldDismiss = false; + } + + }); + + })(); + +</script> +</polymer-element> |