merge core-sampler as the demo page for core-elements

googlearchive · Jun 16, 2014 · 72bf165 · 72bf165
1 parent 17fb2c7
commit 72bf165
Show file tree

Hide file tree

Showing 3 changed files with 187 additions and 0 deletions.
diff --git a/code.png b/code.png
diff --git a/demo.html b/demo.html
@@ -0,0 +1,75 @@
+<!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>
+  <title>Core Elements Sampler</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="../sampler-scaffold/sampler-scaffold.html">
+  <link rel="import" href="../core-item/core-item.html">
+
+  <style>
+
+    body {
+      font-family: 'Helvetica Neue', Helvetica, Arial;
+      color: #333;
+      margin: 0;
+      -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;
+    }
+
+  </style>
+
+</head>
+<body unresolved>
+
+  <sampler-scaffold label="Core Elements" theme="core-light-theme">
+
+    <core-item label="Icon" tag="core-icon" url="../core-icon/demo.html" src="code.png"></core-item>
+
+    <core-item label="Icon Button" tag="core-icon-button" url="../core-icon-button/demo.html" src="code.png"></core-item>
+
+    <core-item label="Item" tag="core-item" url="../core-item/demo.html" src="code.png"></core-item>
+
+    <core-item label="Input" tag="core-input" url="../core-input/demo.html" src="code.png"></core-item>
+
+    <core-item label="Menu" tag="core-menu" url="../core-menu/demo.html" src="code.png"></core-item>
+
+    <core-item label="Toolbar" tag="core-toolbar" url="../core-toolbar/demo.html" src="code.png"></core-item>
+
+    <core-item label="Tooltip" tag="core-tooltip" url="../core-tooltip/demo.html" src="code.png"></core-item>
+
+    <core-item label="Field" tag="core-field" url="../core-field/demo.html" src="code.png"></core-item>
+
+    <core-item label="List" tag="core-list" url="../core-list/demo.html" src="code.png"></core-item>
+
+    <core-item label="Menu Button" tag="core-menu-button" url="../core-menu-button/demo.html" src="code.png"></core-item>
+
+    <core-item label="Overlay" tag="core-overlay" url="../core-overlay/demo.html" src="code.png"></core-item>
+
+    <core-item label="Pages" tag="core-pages" url="../core-pages/demo.html" src="code.png"></core-item>
+
+    <core-item label="Range" tag="core-range" url="../core-range/demo.html" src="code.png"></core-item>
+
+    <core-item label="Selector" tag="core-selector" url="../core-selector/demo.html" src="code.png"></core-item>
+
+  </sampler-scaffold>
+
+</body>
+</html>
diff --git a/demos/core-drawer-panel.html b/demos/core-drawer-panel.html
@@ -0,0 +1,112 @@
+<!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.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
+-->
+<html>
+<head>
+  <title>core-drawer-panel</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="../../core-drawer-panel/core-drawer-panel.html">
+  <link rel="import" href="../../core-header-panel/core-header-panel.html">
+  <link rel="import" href="../../core-toolbar/core-toolbar.html">
+  <link rel="import" href="../../core-icon-button/core-icon-button.html">
+  <link rel="import" href="../../core-menu/core-menu.html">
+  <link rel="import" href="../../core-item/core-item.html">
+
+  <style>
+
+    html, body {
+      height: 100%;
+    }
+
+    body {
+      font-family: sans-serif;
+      color: #FFF;
+      margin: 0;
+    }
+
+    [drawer] {
+      background-color: #B99588;
+      border-right: 1px solid #ccc;
+    }
+
+    [drawer] core-toolbar {
+      background-color: #795041;
+    }
+
+    [main] {
+      height: 100%;
+    }
+
+    [main] core-toolbar {
+      background-color: #4F7DC9;
+    }
+
+    .content {
+      height: 3000px;
+      background: linear-gradient(rgb(214, 227, 231), rgb(114, 185, 209));
+    }
+
+    core-drawer-panel:not([narrow]) core-icon-button[icon=menu] {
+      display: none;
+    }
+
+  </style>
+
+</head>
+<body unresolved>
+
+  <core-drawer-panel>
+
+    <core-header-panel drawer mode="waterfall-tall">
+
+      <core-toolbar>
+        <div>Application</div>
+      </core-toolbar>
+
+      <core-menu selected="0">
+        <core-item label="Item 1"></core-item>
+        <core-item label="Item 2"></core-item>
+        <core-item label="Item 3"></core-item>
+        <core-item label="Item 4"></core-item>
+      </core-menu>
+
+    </core-header-panel>
+
+    <core-header-panel main mode="waterfall">
+
+      <core-toolbar class="tall">
+        <core-icon-button icon="menu" onclick="toggleDrawer()"></core-icon-button>
+        <div>Title</div>
+      </core-toolbar>
+
+      <div class="content"></div>
+
+    </core-header-panel>
+
+  </core-drawer-panel>
+
+  <script>
+
+    document.querySelector('core-menu').addEventListener(
+        'core-activate', this.toggleDrawer);
+
+    function toggleDrawer() {
+      document.querySelector('core-drawer-panel').togglePanel();
+    }
+
+  </script>
+
+</body>
+</html>