update demo to not use other core elements

googlearchive · Apr 23, 2014 · 7d38d2f · 7d38d2f
1 parent d131412
commit 7d38d2f
Showing 1 changed file with 12 additions and 52 deletions.
diff --git a/demo.html b/demo.html
@@ -18,11 +18,6 @@
     <script src="../platform/platform.js"></script>
 
     <link rel="import" href="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>
 
@@ -36,25 +31,21 @@
         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));
+      button {
+        display: none;
+        width: 160px;
+        height: 40px;
+        font-size: 16px;
+        margin: 8px;
       }
 
-      core-drawer-panel:not([narrow]) core-icon-button[icon=menu] {
-        display: none;
+      core-drawer-panel[narrow] button {
+        display: inline-block
       }
 
     </style>
@@ -65,44 +56,13 @@
 
     <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>
+      <div drawer></div>
 
-      <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>
+      <div main>
+        <button onclick="document.querySelector('core-drawer-panel').togglePanel();">toggle drawer</button>
+      </div>
 
     </core-drawer-panel>
 
-    <script>
-
-      document.querySelector('core-menu').addEventListener(
-          'core-activate', this.toggleDrawer);
-
-      function toggleDrawer() {
-        document.querySelector('core-drawer-panel').togglePanel();
-      }
-
-    </script>
-
   </body>
 </html>