From 022cdb3bb9362827f386b77166bc46b63f4bd377 Mon Sep 17 00:00:00 2001
From: "Scott J. Miles" <sjmiles@google.com>
Date: Wed, 2 Oct 2013 18:47:41 -0700
Subject: [PATCH] add 'basic-app' experimental element(s)

---
 polymer-ui-basic-app/index.html               |  76 +++++++++++++
 polymer-ui-basic-app/metadata.html            |  53 ++++++++++
 polymer-ui-basic-app/polymer-ui-basic-app.css |  22 ++++
 .../polymer-ui-basic-app.html                 | 100 ++++++++++++++++++
 4 files changed, 251 insertions(+)
 create mode 100644 polymer-ui-basic-app/index.html
 create mode 100644 polymer-ui-basic-app/metadata.html
 create mode 100644 polymer-ui-basic-app/polymer-ui-basic-app.css
 create mode 100644 polymer-ui-basic-app/polymer-ui-basic-app.html
diff --git a/polymer-ui-basic-app/index.html b/polymer-ui-basic-app/index.html
new file mode 100644
index 0000000..1097243
--- /dev/null
+++ b/polymer-ui-basic-app/index.html
@@ -0,0 +1,76 @@
+<!doctype html>
+<html>
+  <head>
+    <title>polymer-ui-basic-app</title>
+    <script src="../../polymer/polymer.js"></script>
+    <link rel="import" href="polymer-ui-basic-app.html">
+    <link rel="import" href="../elements.html">
+    <style>
+      body {
+        font-family: Neue Helvetica, Roboto, Arial;
+      }
+      [main] {
+        padding: 8px;
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        border: 3px solid magenta;
+      }
+      [navigation] {
+        width: 256px;
+        height: 100%;
+      }
+    </style>
+  </head>
+  <body>
+    <h2>basic-app</h2>
+    <polymer-ui-basic-app theme="polymer-ui-dark-theme" style="display: block; position: relative; height: 400px;">
+
+      <polymer-ui-icon-button tool icon="briefcase"></polymer-ui-icon-button>
+      <polymer-ui-icon-button tool icon="marker"></polymer-ui-icon-button>
+      <polymer-ui-icon-button tool icon="account"></polymer-ui-icon-button>
+      <polymer-ui-menu-button tool icon="dots" Xtheme="polymer-ui-light-theme">
+        <polymer-ui-menu-item>Item</polymer-ui-menu-item>
+        <polymer-ui-menu-item>Item</polymer-ui-menu-item>
+      </polymer-ui-menu-button>
+
+      <div main>
+        Content.
+      </div>
+
+      <polymer-ui-sidebar-menu navigation label="Navigimation" offscreen="basement">
+        <polymer-ui-menu>
+          <polymer-ui-menu-item>Item</polymer-ui-menu-item>
+          <polymer-ui-menu-item>Item</polymer-ui-menu-item>
+        </polymer-ui-menu>
+      </polymer-ui-sidebar-menu>
+
+    </polymer-ui-basic-app>
+
+    <h2>basic-app2 (same content)</h2>
+    <polymer-ui-basic-app2 theme="polymer-ui-dark-theme" style="display: block; position: relative; height: 400px;">
+
+      <polymer-ui-icon-button tool icon="briefcase"></polymer-ui-icon-button>
+      <polymer-ui-icon-button tool icon="marker"></polymer-ui-icon-button>
+      <polymer-ui-icon-button tool icon="account"></polymer-ui-icon-button>
+      <polymer-ui-menu-button tool icon="dots" Xtheme="polymer-ui-light-theme">
+        <polymer-ui-menu-item>Item</polymer-ui-menu-item>
+        <polymer-ui-menu-item>Item</polymer-ui-menu-item>
+      </polymer-ui-menu-button>
+
+      <div main>
+        Content.
+      </div>
+
+      <polymer-ui-sidebar-menu navigation label="Navigimation" offscreen="basement">
+        <polymer-ui-menu>
+          <polymer-ui-menu-item>Item</polymer-ui-menu-item>
+          <polymer-ui-menu-item>Item</polymer-ui-menu-item>
+        </polymer-ui-menu>
+      </polymer-ui-sidebar-menu>
+
+    </polymer-ui-basic-app2>
+  </body>
+</html>
diff --git a/polymer-ui-basic-app/metadata.html b/polymer-ui-basic-app/metadata.html
new file mode 100644
index 0000000..8284939
--- /dev/null
+++ b/polymer-ui-basic-app/metadata.html
@@ -0,0 +1,53 @@
+<x-meta id="polymer-ui-basic-app" label="Basic App Scaffold" isContainer>
+  <template>
+    <polymer-ui-basic-app theme="polymer-ui-dark-theme" style="height: 400px; width: 500px;">
+      <polymer-ui-icon-button tool icon="account"></polymer-ui-icon-button>
+      <polymer-ui-icon-button tool icon="marker"></polymer-ui-icon-button>
+      <polymer-ui-menu-button tool icon="dots">
+        <polymer-ui-menu-item>Item</polymer-ui-menu-item>
+        <polymer-ui-menu-item>Item</polymer-ui-menu-item>
+      </polymer-ui-menu-button>
+      <div main style="padding: 8px;">
+        Content.
+      </div>
+      <polymer-ui-sidebar-menu navigation label="Navigimation" offscreen="basement" style="width: 256px; height: 100%;">
+        <polymer-ui-menu>
+          <polymer-ui-menu-item>Item</polymer-ui-menu-item>
+          <polymer-ui-menu-item>Item</polymer-ui-menu-item>
+        </polymer-ui-menu>
+      </polymer-ui-sidebar-menu>
+    </polymer-ui-basic-app>
+  </template>
+  <template id="imports">
+    <link rel="import" href="polymer-ui-basic-app.html">
+    <link rel="import" href="../polymer-ui-menu-item/polymer-ui-menu-item.html">
+    <link rel="import" href="../polymer-ui-menu-button/polymer-ui-menu-button.html">
+  </template>
+</x-meta>
+
+<x-meta id="polymer-ui-basic-app2" label="Basic App Scaffold 2" isContainer>
+  <template>
+    <polymer-ui-basic-app2 theme="polymer-ui-light-theme" style="height: 400px; width: 400px;">
+      <polymer-ui-icon-button tool icon="briefcase"></polymer-ui-icon-button>
+      <polymer-ui-icon-button tool icon="sort"></polymer-ui-icon-button>
+      <polymer-ui-menu-button tool icon="dots">
+        <polymer-ui-menu-item>Item</polymer-ui-menu-item>
+        <polymer-ui-menu-item>Item</polymer-ui-menu-item>
+      </polymer-ui-menu-button>
+      <div main style="padding: 8px;">
+        Content.
+      </div>
+      <polymer-ui-sidebar-menu theme="polymer-ui-dark-theme" navigation label="Actions" offscreen="basement" style="width: 200px; height: 100%;">
+        <polymer-ui-menu>
+          <polymer-ui-menu-item>Item</polymer-ui-menu-item>
+          <polymer-ui-menu-item>Item</polymer-ui-menu-item>
+        </polymer-ui-menu>
+      </polymer-ui-sidebar-menu>
+    </polymer-ui-basic-app2>
+  </template>
+  <template id="imports">
+    <link rel="import" href="polymer-ui-basic-app.html">
+    <link rel="import" href="../polymer-ui-menu-item/polymer-ui-menu-item.html">
+    <link rel="import" href="../polymer-ui-menu-button/polymer-ui-menu-button.html">
+  </template>
+</x-meta>
\ No newline at end of file
diff --git a/polymer-ui-basic-app/polymer-ui-basic-app.css b/polymer-ui-basic-app/polymer-ui-basic-app.css
new file mode 100644
index 0000000..6812602
--- /dev/null
+++ b/polymer-ui-basic-app/polymer-ui-basic-app.css
@@ -0,0 +1,22 @@
+/*
+Copyright 2013 The Polymer Authors. All rights reserved.
+Use of this source code is governed by a BSD-style
+license that can be found in the LICENSE file.
+*/
+@host {
+  display: block;
+  position: relative;
+}
+
+.animate {
+  -webkit-transition: left ease-in 0.2s;
+  transition: left ease-in 0.2s;
+}
+
+polymer-ui-sidebar-menu {
+  width: 200px;
+}
+
+section {
+  background-color: white;
+}
\ No newline at end of file
diff --git a/polymer-ui-basic-app/polymer-ui-basic-app.html b/polymer-ui-basic-app/polymer-ui-basic-app.html
new file mode 100644
index 0000000..b90a3f7
--- /dev/null
+++ b/polymer-ui-basic-app/polymer-ui-basic-app.html
@@ -0,0 +1,100 @@
+<!--
+Copyright 2013 The Polymer Authors. All rights reserved.
+Use of this source code is governed by a BSD-style
+license that can be found in the LICENSE file.
+-->
+
+<!--
+/**
+* Polymer UI Elements
+*
+* @module Polymer UI Elements
+*/
+/**
+ * @class polymer-ui-basic-app
+ */
+-->
+
+<link rel="import" href="../../polymer-elements/polymer-grid-layout/polymer-grid-layout.html">
+<link rel="import" href="../polymer-ui-sidebar-menu/polymer-ui-sidebar-menu.html">
+<link rel="import" href="../polymer-ui-toolbar/polymer-ui-toolbar.html">
+<link rel="import" href="../polymer-ui-icon-button/polymer-ui-icon-button.html">
+
+<polymer-element name="polymer-ui-basic-app" attributes="">
+  <template>
+    <link rel="stylesheet" href="polymer-ui-basic-app.css">
+    <polymer-grid-layout id="grid"></polymer-grid-layout>
+    <section class="animate" offscreen="basement">
+      <content select="[navigation]"></content>
+    </section>
+    <polymer-ui-toolbar class="animate">
+      <polymer-ui-icon-button icon="menu" on-tap="menuActionTap" active="{{menuActive}}"></polymer-ui-icon-button>
+      <content select="[tool]"></content>
+    </polymer-ui-toolbar>
+    <section class="animate">
+      <content select="*"></content>
+    </section>
+  </template>
+  <script>
+    (function() {
+      Polymer('polymer-ui-basic-app', {
+        menuActive: false,
+        layouts: {
+          main:[
+            [2, 2],
+            [3, 3],
+            [3, 3]
+          ],
+          menu: [
+            [1, 2, 2],
+            [1, 3, 3],
+            [1, 3, 3]
+          ]
+        },
+        ready: function() {
+          this.$.grid.layout = this.layouts.main;
+        },
+        menuActionTap: function() {
+          this.menuActive = !this.menuActive;
+          Platform.flush();
+        },
+        menuActiveChanged: function() {
+          this.$.grid.layout = this.layouts[this.menuActive ? 'menu' : 'main'];
+        }
+      });
+    })();
+  </script>
+</polymer-element>
+
+<polymer-element name="polymer-ui-basic-app2" attributes="">
+  <template>
+    <link rel="stylesheet" href="polymer-ui-basic-app.css">
+    <polymer-grid-layout id="grid"></polymer-grid-layout>
+    <section>
+      <content select="[navigation]"></content>
+    </section>
+    <polymer-ui-toolbar class="animate">
+      <content select="[tool]"></content>
+    </polymer-ui-toolbar>
+    <section class="animate">
+      <content select="[main]"></content>
+    </section>
+  </template>
+  <script>
+    (function() {
+      Polymer('polymer-ui-basic-app2', {
+        menuActive: false,
+        layouts: {
+          main:[
+            [2, 2, 1],
+            [3, 3, 1],
+            [3, 3, 1]
+          ]
+        },
+        ready: function() {
+          this.$.grid.layout = this.layouts.main;
+        },
+      });
+    })();
+  </script>
+</polymer-element>
\ No newline at end of file
