contacts-v2: add contact screen

googlearchive · Oct 2, 2013 · eb9dffc · eb9dffc
1 parent 9b2a6f9
commit eb9dffc
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 1 deletion.
diff --git a/shiny/Contacts-v2/components/contacts-app.html b/shiny/Contacts-v2/components/contacts-app.html
@@ -1,5 +1,6 @@
 <link href="../../../../polymer-elements/polymer-flex-layout/polymer-flex-layout.html" rel="import">
 <link href="../../../../polymer-ui-elements/polymer-ui-pages/polymer-ui-pages.html" rel="import">
+<link href="contacts-create.html" rel="import">
 <link href="contacts-detail.html" rel="import">
 <link href="contacts-icon.html" rel="import">
 <link href="contacts-list.html" rel="import">
@@ -36,7 +37,7 @@
 		</style>
 		<mock-data id="mock"></mock-data>
 		<polymer-ui-pages selected="{{page}}">
-			<contacts-list selectedModel="{{selectedContact}}">
+			<contacts-list selectedModel="{{selectedContact}}" on-contacts-list-add="addContactAction">
 				<template repeat="{{alpha in $.mock.alphabetized}}">
 					<div class="contactItem header">
 						{{alpha.letter}}
@@ -52,6 +53,8 @@
 			</contacts-list>
 			<contacts-detail contact="{{selectedContact.contact}}" on-contacts-detail-shrink="detailShrinkAction">
 			</contacts-detail>
+			<contacts-create>
+			</contacts-create>
 		</polymer-ui-pages>
 	</template>
 	<script>
@@ -62,6 +65,9 @@
 				console.log('selectedContact', this.selectedContact);
 				this.page = 1;
 			},
+			addContactAction: function() {
+				this.page = 2;
+			},
 			detailShrinkAction: function() {
 				this.page = 0;
 			}

diff --git a/shiny/Contacts-v2/components/contacts-create-item.html b/shiny/Contacts-v2/components/contacts-create-item.html
@@ -0,0 +1,31 @@
+<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">
+	<template>
+		<style>
+			/* @polyfill @host */
+			:host {
+				padding: 0 20px;
+				border-color: rgba(0, 0, 0, 0.14902);
+				border-width: 0 1px 1px;
+				border-style: solid;
+			}
+			input {
+				margin-left: 20px;
+				border: none;
+				font-size: 18px;
+				font-family: 'Helvetica Neue Medium', HelveticaNeue-Medium, Helvetica, sans-serif;
+				box-sizing: border-box;
+				height: 60px;
+			}
+			input:focus {
+				outline: none;
+			}
+		</style>
+		<polymer-flex-layout align="center"></polymer-flex-layout>
+		<polymer-ui-icon-button icon="{{icon}}"></polymer-ui-icon-button>
+		<div flex>
+			<input value="{{value}}" placeholder="{{label}}">
+		</div>
+	</template>
+</polymer-element>
diff --git a/shiny/Contacts-v2/components/contacts-create.html b/shiny/Contacts-v2/components/contacts-create.html
@@ -0,0 +1,41 @@
+<link href="../../../../polymer-ui-elements/polymer-ui-toolbar/polymer-ui-toolbar.html" rel="import">
+<link href="contacts-create-item.html" rel="import">
+<polymer-element name="contacts-create">
+	<template>
+		<style>
+			polymer-ui-toolbar {
+				background: transparent none !important;
+			}
+			button {
+				background: transparent none;
+				border: 0;
+				font-family: 'Helvetica Neue Medium', HelveticaNeue-Medium, Helvetica, sans-serif;
+				font-size: 16px;
+				color: #999;
+				padding: 10px;
+				margin: 20px;
+			}
+			button:focus {
+				outline: none;
+			}
+			button:active {
+				outline: none;
+				border: 1px solid #ccc;
+				border-radius: 3px;
+			}
+		</style>
+		<polymer-ui-toolbar>
+			<button on-tap="cancelAction">Cancel</button>
+			<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>
+	</template>
+	<script>
+		Polymer('contacts-create');
+	</script>
+</polymer-element>
diff --git a/shiny/Contacts-v2/components/contacts-list.html b/shiny/Contacts-v2/components/contacts-list.html
@@ -27,6 +27,7 @@
 	<script>
 		Polymer('contacts-list', {
 			addAction: function() {
+				this.fire('contacts-list-add');
 			}
 		})
 	</script>