Skip to content
This repository has been archived by the owner on Mar 13, 2018. It is now read-only.

Commit

Permalink
contacts-v2: more work on create contact
Browse files Browse the repository at this point in the history
  • Loading branch information
Yvonne Yip committed Oct 3, 2013
1 parent a15f72d commit d3982c3
Show file tree
Hide file tree
Showing 4 changed files with 70 additions and 28 deletions.
12 changes: 8 additions & 4 deletions shiny/Contacts-v2/components/contacts-app.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,11 +22,12 @@
font-family: 'Helvetica Neue Medium', HelveticaNeue-Medium, Helvetica, sans-serif;
box-sizing: border-box;
height: 60px;
padding: 20px;
padding: 0 20px;
}
.contactItem.header {
font-variant: small-caps;
color: #9e9e9e;
padding: 20px;
}
/* @polyfill .contactItem:nth-child(3) */
.contactItem:nth-child(2) {
Expand All @@ -51,9 +52,9 @@
</template>
</template>
</contacts-list>
<contacts-detail contact="{{selectedContact.contact}}" on-contacts-detail-shrink="detailShrinkAction">
<contacts-detail contact="{{selectedContact.contact}}" on-contacts-detail-shrink="shrinkAction">
</contacts-detail>
<contacts-create>
<contacts-create on-contacts-create-cancel="shrinkAction" on-contacts-create="contactCreateAction">
</contacts-create>
</polymer-ui-pages>
</template>
Expand All @@ -68,8 +69,11 @@
addContactAction: function() {
this.page = 2;
},
detailShrinkAction: function() {
shrinkAction: function() {
this.page = 0;
},
contactCreateAction: function(e, detail, sender) {
this.selectedContact = detail;
}
});
</script>
Expand Down
58 changes: 42 additions & 16 deletions shiny/Contacts-v2/components/contacts-create-item.html
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
<link href="../../../../polymer-elements/polymer-flex-layout/polymer-flex-layout.html" rel="import">
<link href="../../../../polymer-elements/polymer-selector/polymer-selector.html" rel="import">
<link href="../../../../polymer-ui-elements/polymer-ui-icon-button/polymer-ui-icon-button.html" rel="import">
<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">
<polymer-element name="contacts-create-item" attributes="icon activeIcon label value selectedType active overlayActive" on-focus="focusAction" on-blur="blurAction">
<template>
<style>
/* @polyfill @host */
Expand All @@ -28,15 +29,23 @@
display: none !important;
}
#overlay {
left: 5%;
width: 90%;
padding: 20px;
left: 0;
padding: 10px;
}
#overlay input {
margin-left: 0px;
height: auto;
}
#overlay polymer-ui-menu-item,
#overlay 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;
}
/* FIXME: Safari drops the whole rule if it doesn't recognize the selector. */
#overlay content::-webkit-distributed(polymer-ui-menu-item) {
font-size: 18px;
height: 61px;
Expand All @@ -48,27 +57,36 @@
}
</style>
<polymer-flex-layout align="center"></polymer-flex-layout>
<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>
<polymer-ui-icon-button icon="{{icon}}" class="{{hidden: active || overlayActive || value || selectedType !== -1}}"></polymer-ui-icon-button>
<polymer-ui-icon-button id="activeIcon" icon="{{activeIcon}}" class="{{hidden: !value && selectedType === -1 && !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">
<polymer-ui-icon-button icon="close" class="{{hidden: !active && !overlayActive}}" on-tap="cancelAction"></polymer-ui-icon-button>
<polymer-ui-overlay id="overlay" active="{{overlayActive}}" modal backdrop on-polymer-overlay-open="overlayOpenAction">
<polymer-ui-menu-item icon="shrink" on-tap="overlayShrinkAction">
<input id="overlayInput" value="{{value}}" placeholder="{{label}}">
</polymer-ui-menu-item>
<content></content>
<polymer-selector selected="{{selectedType}}" on-polymer-activate="overlaySelectAction">
<content></content>
</polymer-selector>
</polymer-ui-overlay>
</template>
<script>
Polymer('contacts-create-item', {
active: false,
overlayActive: false,
icon: 'plus',
overlayActiveChanged: function() {
selectedType: -1,
enteredDocument: function() {
this.$.overlay.style.width = (window.innerWidth - 20) + 'px';
this.$.overlay.style.top = ((window.innerHeight - this.$.overlay.getBoundingClientRect().height) / 2) + 'px';
},
overlayOpenAction: function() {
if (this.overlayActive) {
this.$.overlayInput.focus();
setTimeout(function() {
this.$.overlayInput.focus();
}.bind(this), 10);
}
},
focusAction: function() {
Expand All @@ -77,12 +95,20 @@
blurAction: function() {
this.active = false;
},
cancelAction: function() {
this.value = '';
this.selectedType = -1;
},
overlayAction: function() {
this.$.overlay.toggle();
},
overlayTapAction: function(e, detail, sender) {
if (e.srcElement !== this.$.overlayInput) {
this.activeicon = e.srcElement.icon;
overlaySelectAction: function(e, detail, sender) {
this.activeIcon = detail.item.icon;
this.$.overlay.toggle();
},
overlayShrinkAction: function(e, detail, sender) {
var src = window.ShadowDOMPolyfill ? wrap(e.srcElement) : e.srcElement;
if (src !== this.$.overlayInput) {
this.$.overlay.toggle();
}
}
Expand Down
23 changes: 16 additions & 7 deletions shiny/Contacts-v2/components/contacts-create.html
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
<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">
<polymer-element name="contacts-create" attributes="contact">
<template>
<style>
polymer-ui-toolbar {
background: transparent none !important;
padding: 0;
}
button {
background: transparent none;
Expand All @@ -13,7 +14,7 @@
font-size: 16px;
color: #999;
padding: 10px;
margin: 20px;
margin: 0 20px;
}
button:focus {
outline: none;
Expand All @@ -29,16 +30,24 @@
<div flex></div>
<button on-tap="createAction">✓</button>
</polymer-ui-toolbar>
<contacts-create-item icon="account" activeicon="account" label="Name"></contacts-create-item>
<contacts-create-item activeicon="dialoga" label="Add a phone">
<contacts-create-item icon="account" activeicon="account" label="Name" value="{{contact.name}}"></contacts-create-item>
<contacts-create-item activeicon="dialoga" label="Add a phone" value="{{contact.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>
<contacts-create-item activeicon="stream" label="Add an email" value="{{contact.email}}"></contacts-create-item>
<contacts-create-item activeicon="marker" label="Add an address" value="{{contact.street}}"></contacts-create-item>
</template>
<script>
Polymer('contacts-create');
Polymer('contacts-create', {
contact: {},
cancelAction: function() {
this.fire('contacts-create-cancel');
},
createAction: function() {
this.fire('contacts-create', {contact: this.contact});
}
});
</script>
</polymer-element>
5 changes: 4 additions & 1 deletion shiny/Contacts-v2/components/contacts-icon.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,11 @@
height: 64px;
line-height: 64px;
}
.contactIcon.large.noinitials {
background-image: url(http://placekitten.com/g/160/160);
}
</style>
<div class="contactIcon {{large: large}}">
<div class="contactIcon {{large: large; noinitials: !contact.initials}}">
{{contact.initials}}
</div>
</template>
Expand Down

0 comments on commit d3982c3

Please sign in to comment.