polymer-ui-basic-app: add "hideMenuButton" for hiding the default menu

button; add basic-app3
googlearchive · Oct 8, 2013 · 9436718 · 9436718
1 parent b2ade5a
commit 9436718
Show file tree

Hide file tree

Showing 3 changed files with 85 additions and 2 deletions.
diff --git a/polymer-ui-basic-app/index.html b/polymer-ui-basic-app/index.html
@@ -28,6 +28,7 @@
     <h2>basic-app</h2>
     <polymer-ui-basic-app theme="polymer-ui-dark-theme" style="display: block; position: relative; height: 400px;">
 
+      <div tool flex>Title</div>
       <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>
@@ -50,6 +51,7 @@ <h2>basic-app</h2>
     <h2>basic-app2 (same content)</h2>
     <polymer-ui-basic-app2 theme="polymer-ui-dark-theme" style="display: block; position: relative; height: 400px;">
 
+      <div tool flex>Title</div>
       <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>
@@ -68,5 +70,28 @@ <h2>basic-app2 (same content)</h2>
       </polymer-ui-sidebar-menu>
 
     </polymer-ui-basic-app2>
+
+    <h2>basic-app3 (same content)</h2>
+    <polymer-ui-basic-app3 theme="polymer-ui-dark-theme" style="display: block; position: relative; height: 400px;">
+
+      <div tool flex>Title</div>
+      <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-item>Item</polymer-ui-menu-item>
+        <polymer-ui-menu-item>Item</polymer-ui-menu-item>
+      </polymer-ui-sidebar-menu>
+
+    </polymer-ui-basic-app3>
   </body>
 </html>
diff --git a/polymer-ui-basic-app/polymer-ui-basic-app.css b/polymer-ui-basic-app/polymer-ui-basic-app.css
@@ -19,4 +19,13 @@ polymer-ui-sidebar-menu {
 
 section {
   background-color: white;
+}
+
+[hidden] {
+	display: none !important;
+}
+
+#scrim {
+	background: rgba(128, 128, 128, 0.5);
+	z-index: 1;
 }
diff --git a/polymer-ui-basic-app/polymer-ui-basic-app.html b/polymer-ui-basic-app/polymer-ui-basic-app.html
@@ -20,15 +20,15 @@
 <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="">
+<polymer-element name="polymer-ui-basic-app" attributes="menuActive hideMenuButton">
   <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>
+      <polymer-ui-icon-button icon="menu" hidden?="{{hideMenuButton}}" on-tap="menuActionTap" active="{{menuActive}}"></polymer-ui-icon-button>
       <content select="[tool]"></content>
     </polymer-ui-toolbar>
     <section class="animate">
@@ -39,6 +39,7 @@
     (function() {
       Polymer('polymer-ui-basic-app', {
         menuActive: false,
+        hideMenuButton: false,
         layouts: {
           main:[
             [2, 2],
@@ -97,4 +98,52 @@
       });
     })();
   </script>
+</polymer-element>
+
+<polymer-element name="polymer-ui-basic-app3" attributes="menuActive hideMenuButton">
+  <template>
+    <link rel="stylesheet" href="polymer-ui-basic-app.css">
+    <polymer-grid-layout id="grid"></polymer-grid-layout>
+    <section class="animate" style="z-index: 10;" offscreen="left">
+      <content select="[navigation]"></content>
+    </section>
+    <section id="scrim" on-tap="menuActionTap" offscreen="right"></section>
+    <polymer-ui-toolbar offscreen="basement">
+      <polymer-ui-icon-button icon="menu" hidden?="{{hideMenuButton}}" on-tap="menuActionTap" active="{{menuActive}}"></polymer-ui-icon-button>
+      <content select="[tool]"></content>
+    </polymer-ui-toolbar>
+    <section offscreen="basement">
+      <content select="*"></content>
+    </section>
+  </template>
+  <script>
+    (function() {
+      Polymer('polymer-ui-basic-app3', {
+        menuActive: false,
+        hideMenuButton: false,
+        layouts: {
+          main:[
+            [3, 3],
+            [4, 4],
+            [4, 4]
+          ],
+          menu: [
+            [1, 2],
+            [1, 2],
+            [1, 2]
+          ]
+        },
+        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>