From da1a9ad621844b8cd2f434ca294e1de300153d7c Mon Sep 17 00:00:00 2001
From: frankiefu <frankiefu@yahoo.com>
Date: Thu, 20 Dec 2012 15:56:55 -0800
Subject: [PATCH] added g-menu-button and g-toolbar

---
 src/css/g-menu-button.css  | 68 ++++++++++++++++++++++++++++++++++++++
 src/g-menu-button.html     | 39 ++++++++++++++++++++++
 src/g-toolbar.html         | 60 +++++++++++++++++++++++++++++++++
 workbench/images/add.svg   |  9 +++++
 workbench/menu-button.html | 34 +++++++++++++++++++
 workbench/toolbar.html     | 36 ++++++++++++++++++++
 6 files changed, 246 insertions(+)
 create mode 100644 src/css/g-menu-button.css
 create mode 100644 src/g-menu-button.html
 create mode 100644 src/g-toolbar.html
 create mode 100644 workbench/images/add.svg
 create mode 100644 workbench/menu-button.html
 create mode 100644 workbench/toolbar.html

diff --git a/src/css/g-menu-button.css b/src/css/g-menu-button.css
new file mode 100644
index 0000000000..7571e1144d
--- /dev/null
+++ b/src/css/g-menu-button.css
@@ -0,0 +1,68 @@
+@host {
+  display: inline-block;
+  box-sizing: border-box;
+  width: 40px;
+  height: 40px;
+}
+ 
+#overlay {
+  background: white;
+  border: 1px solid #cfcfcf;
+  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
+  margin: 10px 0 0 20px;
+  -webkit-transform: translateX(-50%);
+}
+
+.arrow-border, .arrow {
+  height: 1px;
+  width: 0;
+  margin: 0 auto;
+  margin-top: -22px;
+  border-color: transparent transparent #cfcfcf transparent;
+  border-style: solid;
+  border-width: 10px;
+}
+ 
+.arrow {
+  border-bottom-color: white;
+  margin-top: -19px;
+}
+
+#menu {
+  border: 1px solid transparent;
+  box-shadow: none;
+}
+
+@host g-menu-item {
+  white-space: nowrap;
+}
+
+@media screen and (max-width: 800px) {
+  .arrow-border, .arrow {
+    display: none;
+  }
+  
+  #menu {
+    width: 100%;
+  }
+  
+  #overlay {
+    position: absolute;
+    -webkit-transform: translateX(0);
+    right: 0;
+    bottom: 0;
+    left: 0;
+    margin: 0;
+    border-bottom: 0;
+    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
+  }
+  
+  #overlay.slideup {
+    -webkit-transform: translateY(100%);
+    -webkit-transition: -webkit-transform 0.218s;
+  }
+  
+  #overlay.slideup.opened {
+    -webkit-transform: translateY(0);
+  }
+}
\ No newline at end of file
diff --git a/src/g-menu-button.html b/src/g-menu-button.html
new file mode 100644
index 0000000000..edc6bf300f
--- /dev/null
+++ b/src/g-menu-button.html
@@ -0,0 +1,39 @@
+<!--
+/*
+ * Copyright 2012 The Toolkitchen Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style
+ * license that can be found in the LICENSE file.
+ */
+-->
+<element name="g-menu-button" attributes="src selected opened">
+  <link rel="stylesheet" href="css/g-menu-button.css" />
+  <link rel="components" href="g-icon-button.html"/>
+  <link rel="components" href="g-overlay.html">
+  <link rel="components" href="g-menu.html"/>
+  <template>
+    <g-icon-button id="button" on-click="toggle" src="{{src}}"></g-icon-button>
+    <g-overlay id="overlay" class="slideup" opened="{{opened}}">
+      <div class="arrow-border"></div>
+      <div class="arrow"></div>
+      <g-menu id="menu" selected="{{selected}}" on-click="toggle">
+        <content select="*"></content>
+      </g-menu>
+    </g-overlay>
+  </template>
+  <script>
+    this.component({
+      opened: false,
+      publish: {
+        //* Toggle the opened state of the dropdown.
+        toggle: function() {
+          this.$.overlay.toggle();
+          this.$.button.active = this.$.overlay.opened;
+        },
+        //* Returns the selected item.
+        get selection() {
+          return this.$.menu.selection;
+        }
+      }
+    });
+  </script>
+</element>
diff --git a/src/g-toolbar.html b/src/g-toolbar.html
new file mode 100644
index 0000000000..0aa217ef5a
--- /dev/null
+++ b/src/g-toolbar.html
@@ -0,0 +1,60 @@
+<!--
+/*
+ * Copyright 2012 The Toolkitchen Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style
+ * license that can be found in the LICENSE file.
+ */
+-->
+<element name="g-toolbar">
+  <link rel="components" href="g-component.html">
+  <template>
+    <style>
+      @host {
+        display: -webkit-flex;
+        -webkit-align-items: center;
+        min-height: 60px;
+        background-color: whitesmoke;
+        box-shadow: inset 0px 0px 3px rgba(255, 255, 255, 1);
+        border-bottom: 1px solid rgba(0, 0, 0, 0.16);
+      }
+      
+      @host > *:not(g-toolbar) {
+        margin: 0 6px;
+      }
+      
+      /* toolbars can be made plain and nested toolbars are unstyled by default */
+      @host.plain, @host > g-toolbar {
+        background-color: none;
+        box-shadow: none;
+        border-bottom: 0;
+      }
+      
+      /* TODO(ffu): to replace with :distributed */
+      @host > .flex {
+        -webkit-flex: 1;
+      }
+      
+      /* TODO(ffu): ad hoc, replace with a more thoughtful set of responsive rules */
+      @media screen and (max-width: 800px) {
+        @host.responsive {
+          position: fixed;
+          right: 0;
+          bottom: 0;
+          left: 0;
+          z-index: 1;
+          background-color: whitesmoke;
+          border: 0;
+          border-top: 1px solid rgba(0, 0, 0, 0.16);
+        }
+        
+        @host.responsive > .hidden-narrow {
+          display: none;
+        }
+      }
+    </style>
+    <content></content>
+  </template>
+  <script>
+    this.component();
+  </script>
+</element>
diff --git a/workbench/images/add.svg b/workbench/images/add.svg
new file mode 100644
index 0000000000..20231fdbe7
--- /dev/null
+++ b/workbench/images/add.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 15.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="21px" height="21px" viewBox="0 0 21 21" enable-background="new 0 0 21 21" xml:space="preserve">
+<polygon points="11.5,3.015 9.5,3.015 9.5,9.5 3.015,9.5 3.015,11.5 9.5,11.5 9.5,17.985 11.5,17.985 11.5,11.5 17.984,11.5 
+	17.984,9.5 11.5,9.5 "/>
+<rect fill="#4387FD" fill-opacity="0" width="21" height="21"/>
+</svg>
diff --git a/workbench/menu-button.html b/workbench/menu-button.html
new file mode 100644
index 0000000000..15cb78a8f9
--- /dev/null
+++ b/workbench/menu-button.html
@@ -0,0 +1,34 @@
+<!--
+Copyright 2012 The Toolkitchen Authors. All rights reserved.
+Use of this source code is governed by a BSD-style
+license that can be found in the LICENSE file.
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Dropdown Button</title>
+  <script src="../../polyfills/Components/components-polyfill.js"></script>
+  <link rel="components" href="../src/g-menu-button.html">
+  <link rel="components" href="../src/g-menu-item.html">
+  <link rel="components" href="../src/g-toolbar.html">
+  <style>
+    html, body {
+      font-family: 'Helvetica Nue', 'Helvetica', Arial, 'open sans' sans-serif;
+      height: 100%;
+      margin: 0;
+      overflow: hidden;
+    }
+  </style>
+</head>
+<body>
+  <g-toolbar class="responsive">
+    <div>toggle menubutton:</div>
+    <g-menu-button src="images/add.svg" selected="0">
+      <g-menu-item src="images/edit_page.svg">Post a Comment</g-menu-item>
+      <g-menu-item src="images/chat.svg">Share Link</g-menu-item>
+      <g-menu-item src="images/email.svg">Email Link</g-menu-item>
+      <g-menu-item src="images/favorite.svg">Add to Favorites</g-menu-item>
+    </g-menu-button>
+  </g-toolbar>
+</body>
+</html>
diff --git a/workbench/toolbar.html b/workbench/toolbar.html
new file mode 100644
index 0000000000..e43f9c02f5
--- /dev/null
+++ b/workbench/toolbar.html
@@ -0,0 +1,36 @@
+<!--
+Copyright 2012 The Toolkitchen Authors. All rights reserved.
+Use of this source code is governed by a BSD-style
+license that can be found in the LICENSE file.
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Menu</title>
+  <script src="../../polyfills/Components/components-polyfill.js"></script>
+  <link rel="components" href="../src/g-toolbar.html">
+  <link rel="components" href="../src/g-icon-button.html">
+  <style>
+    html, body {
+      font-family: 'Helvetica Nue', 'Helvetica', Arial, 'open sans' sans-serif;
+      height: 100%;
+      margin: 0;
+    }
+    
+  </style>
+</head>
+<body>
+  <g-toolbar>
+    <g-icon-button src="images/star_full.svg"></g-icon-button>
+    <g-icon-button src="images/star_full.svg" active="true"></g-icon-button>
+    <div class="flex">Title</div>
+    <g-toolbar class="responsive">
+      <div class="hidden-narrow">(</div>
+      <g-icon-button src="images/add.svg"></g-icon-button>
+      <g-icon-button src="images/star_full.svg"></g-icon-button>
+      <div class="hidden-narrow">)</div>
+    </g-toolbar>
+    <g-icon-button src="images/star_full.svg" active="true"></g-icon-button>
+  </g-toolbar>
+</body>
+</html>