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

Commit

Permalink
panel tuning
Browse files Browse the repository at this point in the history
  • Loading branch information
@frankiefu
frankiefu committed Oct 10, 2013
1 parent 42a4f52 commit 159e8e7
Showing 1 changed file with 59 additions and 40 deletions.
99 changes: 59 additions & 40 deletions ffu/panel/list-list.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,73 +34,73 @@
position: relative;
display: block;
font: 14px 'Helvetica Neue', Helvetica, Roboto, Arial;
background: white;
background: #fff;
}
}
#home {
position: absolute;
top: 0;
top: 61px;
right: 0;
bottom: 0;
left: 0;
background: white;
z-index: 1;
}
#list {
position: absolute;
top: 0;
top: 61px;
right: 0;
bottom: 0;
left: 0;
background: white;
visibility: hidden;
opacity: 0.9;
background: #fff;
opacity: 0;

-webkit-transition: opacity 0.1s linear;
transition: opacity 0.1s linear;
-webkit-transition: opacity 0.3s ease-in;
transition: opacity 0.3s ease-in;
}
#cards, #folders {
background: #eee;
overflow: auto;
-webkit-overflow-scrolling: touch;

position: absolute;
top: 61px;
top: 0;
right: 0;
bottom: 0;
left: 0;

-webkit-transition: top 0.2s linear, opacity 0.2s linear;
transition: top 0.2s linear, opacity 0.2s linear;
}
#folders {
background: white;
-webkit-transition: top 0.15s linear, opacity 0.15s linear;
transition: top 0.15s linear, opacity 0.15s linear;
}
.alpha-header {
height: 60px;
box-sizing: border-box;
-moz-box-sizing: border-box;
background-color: rgba(128, 128, 128, 0.1);
color: #aaa;
padding: 20px 20px 20px 26px;
font-size: 20px;
}
.card {
background-color: #fff;
border-radius: 2px;
box-shadow: rgba(0, 0, 0, 0.098) 0px 2px 4px, rgba(0, 0, 0, 0.098) 0px 0px 3px;
border-top: 1px solid #eee;
}
.item, .folder {
height: 80px;
position: relative;
border-bottom: 1px solid #eee;

-webkit-transition: margin 0.2s linear;
transition: margin 0.2s linear;
}
.folder {
line-height: 80px;
color: #333;
font-size: 21px;
padding-left: 56px;
padding-left: 15px;

-webkit-transition: margin 0.15s linear;
transition: margin 0.15s linear;
}
.folder > span {
padding-left: 8px;
vertical-align: middle;
}
.avatar-container {
position: absolute;
Expand All @@ -117,7 +117,7 @@
border-radius: 50%;
text-align: center;
line-height: 50px;
color: white;
color: #fff;
font-size: 20px;
}
#avatar.favorite {
Expand All @@ -136,26 +136,35 @@
font-size: 21px;
padding-top: 15px;
}
polymer-ui-toolbar {
background-color: #4d90fe !important;
z-index: 10;
}
polymer-ui-toolbar > polymer-ui-icon-button {
margin: 0 8px !important;
}
#toolbarLabel {
color: #fff;
}
</style>

<polymer-ui-toolbar theme="polymer-ui-light-theme">
<polymer-ui-icon-button icon="shrink" on-tap="shrinkAction"></polymer-ui-icon-button>
<div id="toolbarLabel">Contacts</div>
<div flex></div>
<polymer-ui-icon-button icon="search"></polymer-ui-icon-button>
</polymer-ui-toolbar>
<div id="home">
<polymer-ui-toolbar theme="polymer-ui-light-theme" style="z-index: 1;">
<polymer-ui-icon-button icon="shrink"></polymer-ui-icon-button>
Contacts
</polymer-ui-toolbar>
<div id="folders">
<template repeat="{{folders}}">
<div class="folder" on-tap="folderTap">
{{name}}
<polymer-ui-icon icon="contact"></polymer-ui-icon>
<span>{{name}}</span>
</div>
</template>
</div>
</div>
<div id="list">
<polymer-ui-toolbar theme="polymer-ui-light-theme" style="z-index: 1;">
<polymer-ui-icon-button icon="shrink" on-tap="shrinkAction"></polymer-ui-icon-button>
{{folder}}
</polymer-ui-toolbar>
<div id="cards">
<template repeat="{{alphaContacts}}">
<div class="alpha-header">{{title}}</div>
Expand All @@ -177,7 +186,8 @@
</template>
<script>
Polymer('x-list-list', {
margin: 400,
margin: 300,
listShowing: false,
folders: [{name: 'Global'}, {name: 'Favorites'}, {name: 'My Contacts'}, {name: 'Work'}, {name: 'Family'}],
created: function() {
this.alphaContacts = alphaContacts();
Expand All @@ -189,33 +199,42 @@
},
expandAction: function(item) {
this.selected = item;
this.folder = item.templateInstance.model.name;
this.listShowing = true;
this.selected.addEventListener('webkitTransitionEnd', this.expandTransitionEndListener);
this.selected.addEventListener('transitionend', this.expandTransitionEndListener);
this.$.folders.style.top = 61 - this.margin/2 + 'px';
this.$.folders.style.opacity = 0.3;
this.$.folders.style.top = -this.margin/2 + 'px';
this.$.folders.style.opacity = 0;
this.selected.style.marginBottom = this.margin + 'px';
this.$.list.style.visibility = 'initial';
this.$.list.style.opacity = 1;
},
exapndTransitionEnd: function() {
this.$.toolbarLabel.textContent = this.selected.templateInstance.model.name;
this.selected.removeEventListener('webkitTransitionEnd', this.expandTransitionEndListener);
this.selected.removeEventListener('transitionend', this.expandTransitionEndListener);
this.$.home.style.visibility = 'hidden';
this.$.list.style.visibility = 'visible';
this.$.list.style.opacity = 1;
},
shrinkAction: function() {
if (!this.listShowing) {
return;
}
this.$.list.addEventListener('webkitTransitionEnd', this.shrinkTransitionEndListener);
this.$.list.addEventListener('transitionend', this.shrinkTransitionEndListener);
this.$.list.style.opacity = 0.9;
this.$.list.style.opacity = 0;
this.$.home.style.visibility = 'initial';
this.$.folders.style.top = 0;
this.$.folders.style.opacity = 1;
this.selected.style.marginBottom = 0;
this.listShowing = false;
this.$.toolbarLabel.textContent = 'Contacts';
},
shrinkTransitionEnd: function() {
this.$.list.removeEventListener('webkitTransitionEnd', this.shrinkTransitionEndListener);
this.$.list.removeEventListener('transitionend', this.shrinkTransitionEndListener);
this.$.home.style.visibility = 'visible';
this.$.list.style.visibility = 'hidden';
this.$.folders.style.top = '61px';
this.$.folders.style.opacity = 1;
this.selected.style.marginBottom = 0;

}
});
</script>
Expand Down

0 comments on commit 159e8e7

Please sign in to comment.