email/unreadpoly/elements/xinu-email-app.html
Bill Thiede a905520cc6 unreadpoly: move xinu-email-{unread,app} into elements/
Also wired up refresh button to refetch /unread
2014-08-03 22:32:17 -07:00

71 lines
1.6 KiB
HTML

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../elements/xinu-email-unread.html">
<polymer-element name="xinu-email-app">
<template>
<style>
:host {
height: 100%;
}
core-header-panel {
height: 100%;
}
core-header-panel[mode=cover]::shadow #mainContainer {
left: 70px;
}
.core-header {
height: 4em;
line-height: 2em;
font-size: 18px;
padding: 0 10px;
background-color: #4F7DC9;
color: #FFF;
transition: height 0.2s;
}
.core-header.tall {
height: 180px;
}
.core-header.medium-tall {
height: 120px;
}
paper-fab#refresh-button {
background: #080;
}
</style>
<core-ajax id="fetch" url="/unread?format=list" auto handleAs="json" response="{{boxes}}">
</core-ajax>
<core-header-panel flex mode="waterfall">
<div class="core-header" horizontal layout center>
<div flex>Unread</div>
<paper-fab id="refresh-button" icon="refresh" on-click="{{handleRefresh}}" end></paper-fab>
</div>
<div class="content">
<xinu-email-unread boxes="{{boxes}}"></xinu-email-unread>
</div>
</core-header-panel>
</template>
<script>
Polymer('xinu-email-app', {
log: function() {
console.log('xinu-email-app ', arguments);
},
ready: function() {
this.log('ready');
},
handleRefresh: function(event, detail, sender) {
this.log('handleRefresh');
this.$.fetch.go();
}
});
</script>
</polymer-element>