contacts-v2: responsive contact list

googlearchive · Oct 10, 2013 · 22a54e8 · 22a54e8
1 parent 697d8d0
commit 22a54e8
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 16 deletions.
diff --git a/shiny/Contacts-v2/components/contacts-app.html b/shiny/Contacts-v2/components/contacts-app.html
@@ -9,7 +9,7 @@
 <link href="contacts-icon.html" rel="import">
 <link href="contacts-list.html" rel="import">
 <link href="mock-data.html" rel="import">
-<polymer-element name="contacts-app" attribiutes="page selectedContact">
+<polymer-element name="contacts-app" attribiutes="page">
 	<template>
 		<style>
 			polymer-ui-menu {
@@ -88,7 +88,7 @@
 			</polymer-ui-menu>
 		</polymer-ui-overlay>
 		<polymer-ui-pages selected="{{page}}">
-			<contacts-list selectedModel="{{selectedContact}}" on-contacts-list-add="addContactAction" on-contacts-menu-open="sidebarOpenAction">
+			<contacts-list on-contacts-list-add="addContactAction" on-contacts-menu-open="sidebarOpenAction">
 				<template repeat="{{alpha in $.mock.alphabetized}}">
 					<div class="contactItem header">
 						{{alpha.letter}}
@@ -104,23 +104,18 @@
 			</contacts-list>
 			<contacts-detail contact="{{selectedContact.contact}}" on-contacts-detail-shrink="shrinkAction">
 			</contacts-detail>
-			<contacts-create on-contacts-create-cancel="shrinkAction" on-contacts-create="contactCreateAction">
+			<contacts-create on-contacts-create-cancel="shrinkAction">
 			</contacts-create>
 		</polymer-ui-pages>
 	</template>
 	<script>
 		Polymer('contacts-app', {
 			page: 0,
-			selectedContact: null,
 			ready: function() {
 				// this.$.grid.layout = [
 				// 	[2, 3, 3]
 				// ]
 			},
-			selectedContactChanged: function() {
-				console.log('selectedContact', this.selectedContact);
-				this.page = 1;
-			},
 			addContactAction: function() {
 				this.page = 2;
 			},
@@ -132,9 +127,6 @@
 			},
 			sidebarCloseAction: function() {
 				this.$.sidebar.active = false;
-			},
-			contactCreateAction: function(e, detail, sender) {
-				this.selectedContact = detail;
 			}
 		});
 	</script>

diff --git a/shiny/Contacts-v2/components/contacts-detail.html b/shiny/Contacts-v2/components/contacts-detail.html
@@ -11,7 +11,7 @@
 			}
 			.detailHeader {
 				height: 240px;
-				background: url('http://placebacn.com/g/500/240') repeat-x;
+				background: url('http://placebacn.com/600/240') repeat-x;
 			}
 			.detailIconContainer {
 				padding: 40px 20px;

diff --git a/shiny/Contacts-v2/components/contacts-list.html b/shiny/Contacts-v2/components/contacts-list.html
@@ -1,36 +1,91 @@
-<link href="../../../../polymer-elements/polymer-flex-layout/polymer-flex-layout.html" rel="import">
+<link href="../../../../polymer-elements/polymer-grid-layout/polymer-grid-layout.html" rel="import">
+<link href="../../../../polymer-elements/polymer-media-query/polymer-media-query.html" rel="import">
 <link href="../../../../polymer-elements/polymer-selector/polymer-selector.html" rel="import">
 <link href="../../../../polymer-ui-elements/polymer-ui-toolbar/polymer-ui-toolbar.html" rel="import">
 <link href="../../../../polymer-ui-elements/polymer-ui-icon-button/polymer-ui-icon-button.html" rel="import">
-<polymer-element name="contacts-list" extends="polymer-selector">
+<link href="contacts-detail.html" rel="import">
+<polymer-element name="contacts-list" extends="polymer-selector" on-polymer-activate="activateAction">
 	<template>
 		<style>
 			polymer-ui-toolbar {
 				padding-left: 10px;
 				padding-right: 10px;
 			}
 			.listContainer {
-				background-color: rgb(242, 242, 242)
+				background-color: rgb(242, 242, 242),
+				min-width: 320px;
+			}
+			#overlay {
+				position: fixed;
+				top: 0;
+				left: 0;
+				bottom: 0;
+				right: 0;
+			}
+			#overlay::x-overlay {
+				height: 100%;
+			}
+			contacts-detail {
+				min-width: 65%;
 			}
 		</style>
-		<polymer-flex-layout vertical="true"></polymer-flex-layout>
+		<polymer-media-query query="min-width: 768px" queryMatches="{{wideLayout}}"></polymer-media-query>
+		<polymer-grid-layout id="grid"></polymer-grid-layout>
 		<polymer-ui-toolbar>
 			<polymer-ui-icon-button icon="menu" on-tap="menuAction"></polymer-ui-icon-button>
 			<div flex>Contacts</div>
 			<polymer-ui-icon-button icon="plus" on-tap="addAction"></polymer-ui-icon-button>
 			<polymer-ui-icon-button icon="search"></polymer-ui-icon-button>
+			<template if="{{wideLayout}}">
+				<polymer-ui-icon-button icon="shortcut"></polymer-ui-icon-button>
+				<polymer-ui-icon-button icon="favorite"></polymer-ui-icon-button>
+			</template>
 		</polymer-ui-toolbar>
 		<div class="listContainer" flex>
 			<shadow></shadow>
+			<polymer-ui-overlay id="overlay">
+				<contacts-detail contact="{{selectedModel.contact}}" on-contacts-detail-shrink="overlayCloseAction">
+				</contacts-detail>
+			</polymer-ui-overlay>
 		</div>
+		<contacts-detail contact="{{selectedModel.contact}}" on-contacts-detail-shrink="overlayCloseAction">
+		</contacts-detail>
 	</template>
 	<script>
 		Polymer('contacts-list', {
+			selected: 1,
+			wideLayout: true,
+			ready: function() {
+				this.wideLayoutChanged();
+			},
+			wideLayoutChanged: function() {
+				if (this.wideLayout) {
+					this.$.grid.layout = [
+						[2, 2],
+						[3, 4],
+						[3, 4],
+					];
+				} else {
+					this.$.grid.layout = [
+						[2, 2],
+						[3, 3],
+						[3, 3],
+					];
+				}
+			},
 			addAction: function() {
 				this.fire('contacts-list-add');
 			},
 			menuAction: function() {
 				this.fire('contacts-menu-open');
+			},
+			overlayCloseAction: function() {
+				this.$.overlay.active = false;
+			},
+			activateAction: function() {
+				if (!this.wideLayout) {
+					this.$.overlay.active = true;
+				}
 			}
 		})
 	</script>