wathiede/email
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

unreadpoly: move xinu-email-{unread,app} into elements/

Browse Source 
Also wired up refresh button to refetch /unread
This commit is contained in:
Bill Thiede 2014-08-03 22:32:17 -07:00
parent 6a144bca28
commit a905520cc6
3 changed files with 108 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
unreadpoly/elements/xinu-email-app.html Normal file
View File

@ -0,0 +1,70 @@
<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>

32
unreadpoly/elements/xinu-email-unread.html Normal file
View File

@ -0,0 +1,32 @@
<link rel="import" href="../bower_components/polymer/polymer.html">
<polymer-element name="xinu-email-unread" attributes="boxes" noscript>
<template>
<style>
a {
color: #000;
text-decoration: none;
}
/*
.item {
background: linear-gradient(#fff, #f8f8f8);
padding: .5em;
}
.item:hover {
background: linear-gradient(#e8e8e8, #eee);
}
*/
</style>
<template repeat="{{box in boxes}}">
<a href="#{{box.name}}" target="_self">
<paper-item icon="folder" horizontal layout>
<div flex>{{box.name}}</div>
<div end>{{box.count}}</div>
</paper-item>
</a>
</template>
</template>
</polymer-element>

89
unreadpoly/index.html
View File

@ -23,99 +23,16 @@
<link rel="import" href="bower_components/paper-fab/paper-fab.html"> <link rel="import" href="bower_components/paper-fab/paper-fab.html">
<link rel="import" href="bower_components/paper-item/paper-item.html"> <link rel="import" href="bower_components/paper-item/paper-item.html">
<link rel="import" href="elements/xinu-email-app.html">
<style> <style>
html,body { html,body {
height: 100%;
margin: 0;
background-color: #E5E5E5; background-color: #E5E5E5;
font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial; font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
} }
/*
core-header-panel {
float: left;
width: 360px;
height: 400px;
margin: 5px;
}
*/
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;
}
.content {
}
paper-fab#refresh {
background: #080;
}
</style> </style>
</head> </head>
<body unresolved fullbleed layout vertical touch-action="auto"> <body fullbleed layout vertical>
<xinu-email-app></xinu-email-app>
<polymer-element name="xinu-unread" noscript>
<template>
<style >
a {
color: #000;
text-decoration: none;
}
/*
.item {
background: linear-gradient(#fff, #f8f8f8);
padding: .5em;
}
.item:hover {
background: linear-gradient(#e8e8e8, #eee);
}
*/
</style>
<core-ajax url="/unread?format=list" auto handleAs="json" response="{{boxes}}">
</core-ajax>
<template repeat="{{box in boxes}}">
<a href="#{{box.name}}" target="_self">
<paper-item icon="folder" horizontal layout>
<div flex>{{box.name}}</div>
<div end>{{box.count}}</div>
</paper-item>
</a>
</template>
</template>
</polymer-element>
<core-header-panel flex mode="waterfall">
<div class="core-header" horizontal layout center>
<div flex>Unread</div>
<paper-fab id="refresh" icon="refresh" end></paper-fab>
</div>
<div class="content">
<xinu-unread></xinu-unread>
</div>
</core-header-panel>
</body> </body>
</html> </html>