VulpesOS/gaia/apps/music/components/gaia-dialog/index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>&lt;gaia-dialog&gt;</title>
  <meta name="description" content="gaia-dialog demo" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
  <link rel="stylesheet" type="text/css" href="bower_components/base/base.css">
  <link rel="stylesheet" type="text/css" href="bower_components/gaia-theme/gaia-theme.css">
  <link rel="stylesheet" type="text/css" href="bower_components/gaia-fonts/style.css">
  <link rel="stylesheet" type="text/css" href="bower_components/gaia-icons/gaia-icons.css">
  <script src="bower_components/gaia-theme/lib/gaia-theme-selector.js"></script>
  <script src="bower_components/pressed/pressed.js"></script>
  <script src="bower_components/gaia-component/gaia-component.js"></script>
  <script src="bower_components/gaia-button/gaia-button.js"></script>
  <script src="bower_components/gaia-text-input/gaia-text-input.js"></script>
  <!-- <script src="bower_components/dom-scheduler/lib/dom-scheduler.js"></script> -->
  <script src="gaia-dialog.js"></script>
  <script src="gaia-dialog-alert.js"></script>
  <script src="gaia-dialog-confirm.js"></script>
  <script src="gaia-dialog-prompt.js"></script>
  <script src="gaia-dialog-action.js"></script>
  <script src="gaia-dialog-select.js"></script>
  <script src="gaia-dialog-menu.js"></script>
  <style>
    body {
      padding: 48px var(--base-m) 0 var(--base-m);
      background-color: var(--background);
    }
  </style>
</head>
<body class="l-align-center">
  <gaia-theme-selector></gaia-theme-selector>

  <div id="buttons">
    <div class="l-mb-small"><gaia-button data-for="gaia-dialog-alert">Alert</gaia-button></div>
    <div class="l-mb-small"><gaia-button data-for="gaia-dialog-confirm">Confirm</gaia-button></div>
    <div class="l-mb-small"><gaia-button data-for="gaia-dialog-prompt">Prompt</gaia-button></div>
    <div class="l-mb-small"><gaia-button data-for="gaia-dialog-action">Action</gaia-button></div>
    <div class="l-mb-small"><gaia-button data-for="gaia-dialog-select">Select</gaia-button></div>
    <div class="l-mb-small"><gaia-button data-for="gaia-dialog-select[multiple]">Select Multiple</gaia-button></div>
    <div class="l-mb-small"><gaia-button data-for="gaia-dialog-menu">Menu</gaia-button></div>
    <div class="l-mb-small"><gaia-button data-for="#custom-dialog-1">Custom</gaia-button></div>
  </div>

  <div id="dialogs">
    <gaia-dialog-alert>No SIM card is present</gaia-dialog-alert>
    <gaia-dialog-confirm>Are you sure you want to delete this contact?</gaia-dialog-confirm>
    <gaia-dialog-prompt>Device name</gaia-dialog-prompt>

    <gaia-dialog-action>
      <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu mollis tortor.</h1>
      <button on-click="close">Action 1</button>
      <button on-click="close">Action 2</button>
    </gaia-dialog-action>

    <gaia-dialog-select>
      <h1>Ring tone</h1>
      <li>Classic prism</li>
      <li>Wallphone</li>
      <li>Disco drive</li>
      <li>Touchmatic</li>
      <li>Classic courier</li>
      <li>Hacker</li>
    </gaia-dialog-select>

    <gaia-dialog-select multiple>
      <h1>Ring tone</h1>
      <li>Classic prism</li>
      <li>Wallphone</li>
      <li>Disco drive</li>
      <li>Touchmatic</li>
      <li>Classic courier</li>
      <li>Hacker</li>
    </gaia-dialog-select>

    <gaia-dialog-menu>
      <button on-click="close" data-icon="firefox">Open in new window</button>
      <button on-click="close" data-icon="firefox">Add to Home Screen</button>
      <button on-click="close" data-icon="firefox">Share link</button>
      <button on-click="close" data-icon="firefox">Settings</button>
    </gaia-dialog-menu>

    <gaia-dialog id="custom-dialog-1">
      <section>
        <h1>Application Download</h1>
        <p>Do you want to download and install this application?</p>
      </section>
      <fieldset>
        <button on-click="close">Cancel</button>
        <button on-click="close">Action</button>
      </fieldset>
    </gaia-dialog>

    <gaia-dialog>
      <h1>Main Heading</h1>
      <h2>Sub Heading</h2>
      <hr></hr>
      <p>Lorem ipsum dolor sit amet, consecutor adipisicing elit, sed do eiusod tempor incidenti ut la et dolore magna...</p>
      <button on-click="close">Action</button>
      <button on-click="close">Cancel</button>
    </gaia-dialog>

    <gaia-dialog>
      <h1>Confirmation</h1>
      <p>Lorem ipsum dolor sit amet, consecutor adipisicing elit, sed do eiusod tempor incidenti ut la et dolore magna...</p>
      <hr>
      <p>Lorem ipsum dolor sit amet, consecutor adipisicing elit, sed do eiusod tempor incidenti ut la et dolore magna...</p>
      <button on-click="close">Action</button>
      <button on-click="close">Action</button>
      <button on-click="close">Cancel</button>
    </gaia-dialog>
  </div>
  <script>
    var buttons = document.querySelectorAll('gaia-button');
    [].forEach.call(buttons, function(button) {
      button.addEventListener('click', function(e) {
        var dialog = document.querySelector(button.dataset.for);
        dialog.open(e);
      });
    });
  </script>
</body>
</html>