third_party/polymer/components/paper-dialog/demo.html

   1 <!--
   2     @license
   3     Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
   4     This code may only be used under the BSD style license found at http://polymer.github.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/CONTRIBUTORS.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/PATENTS.txt
   9 -->
  10 <!doctype html>
  11 <html>
  12 <head>
  13
  14   <meta charset="utf-8">
  15   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  16   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
  17
  18   <title>paper-dialog</title>
  19
  20   <script src="../webcomponentsjs/webcomponents.js"></script>
  21
  22   <link href="../font-roboto/roboto.html" rel="import">
  23   <link href="../paper-button/paper-button.html" rel="import">
  24
  25   <link href="paper-dialog.html" rel="import">
  26   <link href="paper-action-dialog.html" rel="import">
  27
  28   <style shim-shadowdom>
  29     body {
  30       font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
  31       font-size: 14px;
  32       margin: 0;
  33       padding: 24px;
  34       -webkit-tap-highlight-color: rgba(0,0,0,0);
  35       -webkit-touch-callout: none;
  36     }
  37
  38     section {
  39       padding: 20px 0;
  40     }
  41
  42     section > div {
  43       padding: 14px;
  44       font-size: 16px;
  45     }
  46
  47     button {
  48       margin: 8px 4px;
  49     }
  50
  51     html /deep/ [autofocus] {
  52       color: #03a9f4;
  53     }
  54
  55     html /deep/ .scrolling::shadow #scroller {
  56       height: 350px;
  57     }
  58
  59     html /deep/ .colored {
  60       border: 1px solid #0f9d58;
  61       background-color: #b7e1cd;
  62       color: #0f9d58;
  63     }
  64
  65     html /deep/ .size-position {
  66       position: fixed;
  67       top: 16px;
  68       right: 16px;
  69     }
  70
  71     html /deep/ .size-position::shadow #scroller {
  72       width: 300px;
  73       height: 300px;
  74     }
  75
  76   </style>
  77
  78 <!--
  79   <style>
  80     body {
  81       -webkit-transform: translateZ(0);
  82       transform: translateZ(0);
  83       font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
  84       font-size: 16px;
  85       color: rgba(0, 0, 0, 0.87);
  86     }
  87
  88     paper-dialog {
  89       width: 50%;
  90       min-width: 430px;
  91     }
  92
  93     p {
  94       margin-bottom: 0;
  95     }
  96
  97     paper-dialog paper-button {
  98       font-weight: bold;
  99     }
 100
 101     paper-button[autofocus] {
 102       color: #4285f4;
 103     }
 104   </style>
 105   -->
 106 </head>
 107 <body unresolved>
 108
 109 <template is="auto-binding">
 110
 111   <section on-tap="{{toggleDialog1}}">
 112
 113     <div>Dialog Layouts</div>
 114
 115     <button>
 116       Plain dialog
 117     </button>
 118
 119     <paper-dialog>
 120       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
 121     </paper-dialog>
 122
 123     <button>
 124       Dialog with heading
 125     </button>
 126
 127     <paper-dialog heading="Title">
 128       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
 129     </paper-dialog>
 130
 131     <button>
 132       Dialog with actions
 133     </button>
 134
 135     <paper-action-dialog heading="Title">
 136       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
 137
 138       <paper-button dismissive>More Info...</paper-button>
 139       <paper-button affirmative>Decline</paper-button>
 140       <paper-button affirmative autofocus>Accept</paper-button>
 141     </paper-action-dialog>
 142
 143     <button>
 144       Modal dialog with backdrop and actions
 145     </button>
 146
 147     <paper-action-dialog backdrop autoCloseDisabled layered="false">
 148       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
 149
 150       <paper-button affirmative autofocus>Tap me to close</paper-button>
 151     </paper-action-dialog>
 152
 153   </section>
 154
 155   <section on-tap="{{toggleDialog1}}">
 156
 157     <div>Scrolling</div>
 158
 159     <button>
 160       Dialog with heading
 161     </button>
 162
 163     <paper-dialog heading="Title" class="scrolling">
 164       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 165       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 166       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 167       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 168       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 169       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 170       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 171       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 172       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 173       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 174     </paper-dialog>
 175
 176     <button>
 177       Dialog with actions
 178     </button>
 179
 180     <paper-action-dialog heading="Title" class="scrolling">
 181
 182       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 183       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 184       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 185       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 186       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 187       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 188       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 189       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 190       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 191       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 192
 193       <paper-button dismissive>More Info...</paper-button>
 194       <paper-button affirmative>Decline</paper-button>
 195       <paper-button affirmative autofocus>Accept</paper-button>
 196
 197     </paper-action-dialog>
 198
 199   </section>
 200
 201   <section on-tap="{{toggleDialog2}}">
 202
 203     <div>Transitions</div>
 204
 205     <template repeat="{{transitions}}">
 206       <button transition="{{}}">{{}}</button>
 207     </template>
 208
 209     <paper-dialog id="dialog2" transition="{{transition}}">
 210
 211       <h1>{{transition || 'No Transition'}}</h1>
 212
 213       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
 214
 215     </paper-dialog>
 216
 217   </section>
 218
 219   <section on-tap="{{toggleDialog1}}">
 220
 221     <div>Custom Styling</div>
 222
 223     <button>
 224       Colors
 225     </button>
 226
 227     <paper-dialog heading="Custom Colors" class="colored">
 228       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 229     </paper-dialog>
 230
 231     <button>
 232       Size &amp; Position
 233     </button>
 234
 235     <paper-dialog heading="Custom Size &amp; Position" class="size-position">
 236       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 237     </paper-dialog>
 238
 239   </section>
 240
 241 </template>
 242
 243 <script>
 244
 245
 246   var scope = document.querySelector('template[is=auto-binding]');
 247
 248   scope.toggleDialog1 = function(e) {
 249     if (e.target.localName != 'button') {
 250       return;
 251     }
 252     var d = e.target.nextElementSibling;
 253     if (!d) {
 254       return;
 255     }
 256     d.toggle();
 257   };
 258
 259   scope.transitions = [
 260     'core-transition-center',
 261     'core-transition-top',
 262     'core-transition-bottom',
 263     'core-transition-left',
 264     'core-transition-right'
 265   ];
 266
 267   scope.toggleDialog2 = function(e) {
 268     if (e.target.localName != 'button') {
 269       return;
 270     }
 271     scope.transition = e.target.getAttribute('transition');
 272     document.getElementById('dialog2').toggle();
 273   };
 274
 275 </script>
 276
 277 </body>
 278 </html>