| Index: third_party/polymer/v0_8/components/paper-dialog/paper-dialog.html
|
| diff --git a/third_party/polymer/v0_8/components/paper-dialog/paper-dialog.html b/third_party/polymer/v0_8/components/paper-dialog/paper-dialog.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..002e242c9db9ac1b5db0f9570c5546274250d985
|
| --- /dev/null
|
| +++ b/third_party/polymer/v0_8/components/paper-dialog/paper-dialog.html
|
| @@ -0,0 +1,122 @@
|
| +<!--
|
| +@license
|
| +Copyright (c) 2015 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
|
| +-->
|
| +
|
| +<link rel="import" href="../polymer/polymer.html">
|
| +<link rel="import" href="../neon-animation/neon-animation-runner-behavior.html">
|
| +<link rel="import" href="../paper-dialog-behavior/paper-dialog-behavior.html">
|
| +<link rel="import" href="../paper-styles/paper-styles.html">
|
| +
|
| +<!--
|
| +`<paper-dialog>` is a dialog with Material Design styling and optional animations when it is
|
| +opened or closed. It provides styles for a header, content area, and an action area for buttons.
|
| +You can use the `<paper-dialog-scrollable` element (in its own repository) if you need a scrolling
|
| +content area. See `Polymer.PaperDialogBehavior` for specifics.
|
| +
|
| +For example, the following code implements a dialog with a header, scrolling content area and
|
| +buttons.
|
| +
|
| + <paper-dialog>
|
| + <h2>Header</h2>
|
| + <paper-dialog-scrollable>
|
| + Lorem ipsum...
|
| + </paper-dialog-scrollable>
|
| + <div class="buttons">
|
| + <paper-button dialog-dismiss>Cancel</paper-button>
|
| + <paper-button dialog-confirm>Accept</paper-button>
|
| + </div>
|
| + </paper-dialog>
|
| +
|
| +### Styling
|
| +
|
| +See the docs for `Polymer.PaperDialogBehavior` for the custom properties available for styling
|
| +this element.
|
| +
|
| +### Animations
|
| +
|
| +Set the `entry-animation` and/or `exit-animation` attributes to add an animation when the dialog
|
| +is opened or closed. See the documentation in
|
| +[PolymerElements/neon-animation](https://github.com/PolymerElements/neon-animation) for more info.
|
| +
|
| +For example:
|
| +
|
| + <link rel="import" href="components/neon-animation/animations/scale-up-animation.html">
|
| + <link rel="import" href="components/neon-animation/animations/fade-out-animation.html">
|
| +
|
| + <paper-dialog entry-animation="scale-up-animation"
|
| + exit-animation="fade-out-animation">
|
| + <h2>Header</h2>
|
| + <div>Dialog body</div>
|
| + </paper-dialog>
|
| +
|
| +### Accessibility
|
| +
|
| +See the docs for `Polymer.PaperDialogBehavior` for accessibility features implemented by this
|
| +element.
|
| +
|
| +@group Paper Elements
|
| +@element paper-dialog
|
| +@hero hero.svg
|
| +@demo demo/index.html
|
| +-->
|
| +
|
| +<dom-module id="paper-dialog">
|
| +
|
| + <link rel="import" type="css" href="../paper-dialog-behavior/paper-dialog-common.css">
|
| +
|
| + <template>
|
| + <content></content>
|
| + </template>
|
| +
|
| +</dom-module>
|
| +
|
| +<script>
|
| +
|
| +(function() {
|
| +
|
| + Polymer({
|
| +
|
| + is: 'paper-dialog',
|
| +
|
| + behaviors: [
|
| + Polymer.PaperDialogBehavior,
|
| + Polymer.NeonAnimationRunnerBehavior
|
| + ],
|
| +
|
| + listeners: {
|
| + 'neon-animation-finish': '_onNeonAnimationFinish'
|
| + },
|
| +
|
| + _renderOpened: function() {
|
| + if (this.withBackdrop) {
|
| + this.backdropElement.open();
|
| + }
|
| + this.playAnimation('entry');
|
| + },
|
| +
|
| + _renderClosed: function() {
|
| + if (this.withBackdrop) {
|
| + this.backdropElement.close();
|
| + }
|
| + this.playAnimation('exit');
|
| + },
|
| +
|
| + _onNeonAnimationFinish: function() {
|
| + if (this.opened) {
|
| + this._finishRenderOpened();
|
| + } else {
|
| + this._finishRenderClosed();
|
| + }
|
| + }
|
| +
|
| + });
|
| +
|
| +})();
|
| +
|
| +</script>
|
|
|