From a15f72d4c0b6eda06e6a5d81345dfb45cd804eb2 Mon Sep 17 00:00:00 2001
From: Yvonne Yip <ykyyip@google.com>
Date: Wed, 2 Oct 2013 17:22:18 -0700
Subject: [PATCH] contacts-v2: create contact

---
 .../components/contacts-create-item.html      | 64 ++++++++++++++++++-
 .../components/contacts-create.html           | 13 ++--
 2 files changed, 70 insertions(+), 7 deletions(-)

diff --git a/shiny/Contacts-v2/components/contacts-create-item.html b/shiny/Contacts-v2/components/contacts-create-item.html
index 9c8216b..f2f31dd 100644
--- a/shiny/Contacts-v2/components/contacts-create-item.html
+++ b/shiny/Contacts-v2/components/contacts-create-item.html
@@ -1,6 +1,8 @@
 <link href="../../../../polymer-elements/polymer-flex-layout/polymer-flex-layout.html" rel="import">
 <link href="../../../../polymer-ui-elements/polymer-ui-icon-button/polymer-ui-icon-button.html" rel="import">
-<polymer-element name="contacts-create-item" noscript attributes="icon label value">
+<link href="../../../../polymer-ui-elements/polymer-ui-menu-item/polymer-ui-menu-item.html" rel="import">
+<link href="../../../../polymer-ui-elements/polymer-ui-overlay/polymer-ui-overlay.html" rel="import">
+<polymer-element name="contacts-create-item" attributes="icon activeicon label value active overlayActive" on-focus="focusAction" on-blur="blurAction">
 	<template>
 		<style>
 			/* @polyfill @host */
@@ -21,11 +23,69 @@
 			input:focus {
 				outline: none;
 			}
+			.hidden {
+				/* FIXME: outside should win */
+				display: none !important;
+			}
+			#overlay {
+				left: 5%;
+				width: 90%;
+				padding: 20px;
+			}
+			#overlay input {
+				margin-left: 0px;
+				height: auto;
+			}
+			#overlay polymer-ui-menu-item,
+			#overlay content::-webkit-distributed(polymer-ui-menu-item) {
+				font-size: 18px;
+				height: 61px;
+				font-family: 'Helvetica Neue Medium', HelveticaNeue-Medium, Helvetica, sans-serif;
+				padding: 10px 20px;
+				border-color: rgba(0, 0, 0, 0.14902);
+				border-width: 0 1px 1px;
+				border-style: solid;
+			}
 		</style>
 		<polymer-flex-layout align="center"></polymer-flex-layout>
-		<polymer-ui-icon-button icon="{{icon}}"></polymer-ui-icon-button>
+		<polymer-ui-icon-button icon="{{icon}}" class="{{hidden: active || overlayActive || value}}"></polymer-ui-icon-button>
+		<polymer-ui-icon-button id="activeIcon" icon="{{activeicon}}" class="{{hidden: !value && !active && !overlayActive}}" on-tap="overlayAction"></polymer-ui-icon-button>
 		<div flex>
 			<input value="{{value}}" placeholder="{{label}}">
 		</div>
+		<polymer-ui-icon-button icon="close" class="{{hidden: !active && !overlayActive}}"></polymer-ui-icon-button>
+		<polymer-ui-overlay id="overlay" active="{{overlayActive}}" modal backdrop on-tap="overlayTapAction">
+			<polymer-ui-menu-item icon="shrink">
+				<input id="overlayInput" value="{{value}}" placeholder="{{label}}">
+			</polymer-ui-menu-item>
+			<content></content>
+		</polymer-ui-overlay>
 	</template>
+	<script>
+		Polymer('contacts-create-item', {
+			active: false,
+			overlayActive: false,
+			icon: 'plus',
+			overlayActiveChanged: function() {
+				if (this.overlayActive) {
+					this.$.overlayInput.focus();
+				}
+			},
+			focusAction: function() {
+				this.active = true;
+			},
+			blurAction: function() {
+				this.active = false;
+			},
+			overlayAction: function() {
+				this.$.overlay.toggle();
+			},
+			overlayTapAction: function(e, detail, sender) {
+				if (e.srcElement !== this.$.overlayInput) {
+					this.activeicon = e.srcElement.icon;
+					this.$.overlay.toggle();
+				}
+			}
+		});
+		</script>
 </polymer-element>
\ No newline at end of file
diff --git a/shiny/Contacts-v2/components/contacts-create.html b/shiny/Contacts-v2/components/contacts-create.html
index 8d5f871..549fea0 100644
--- a/shiny/Contacts-v2/components/contacts-create.html
+++ b/shiny/Contacts-v2/components/contacts-create.html
@@ -29,11 +29,14 @@
 			<div flex></div>
 			<button on-tap="createAction">✓</button>
 		</polymer-ui-toolbar>
-		<contacts-create-item icon="account" label="Name"></contacts-create-item>
-		<contacts-create-item icon="briefcase" label="Phone"></contacts-create-item>
-		<contacts-create-item icon="gplus" label="Email"></contacts-create-item>
-		<contacts-create-item icon="stream" label="Address"></contacts-create-item>
-		<contacts-create-item icon="dialog" label="Handle"></contacts-create-item>
+		<contacts-create-item icon="account" activeicon="account" label="Name"></contacts-create-item>
+		<contacts-create-item activeicon="dialoga" label="Add a phone">
+			<polymer-ui-menu-item icon="dialoga" label="Home"></polymer-ui-menu-item>
+			<polymer-ui-menu-item icon="filter" label="Mobile"></polymer-ui-menu-item>
+			<polymer-ui-menu-item icon="briefcase" label="Work"></polymer-ui-menu-item>
+		</contacts-create-item>
+		<contacts-create-item activeicon="stream" label="Add an email"></contacts-create-item>
+		<contacts-create-item activeicon="marker" label="Add an address"></contacts-create-item>
 	</template>
 	<script>
 		Polymer('contacts-create');