A bunch of misc web stuff.
This commit is contained in:
parent
807ff0119c
commit
0deded40e8
@ -13,10 +13,14 @@
|
||||
"tests"
|
||||
],
|
||||
"dependencies": {
|
||||
"font-roboto": "Polymer/font-roboto#~0.5.6",
|
||||
"iron-ajax": "PolymerElements/iron-ajax#~1.0.4",
|
||||
"iron-flex-layout": "PolymerElements/iron-flex-layout#~1.0.3",
|
||||
"iron-icons": "PolymerElements/iron-icons#~1.0.3",
|
||||
"moment": "~2.8.1",
|
||||
"polymer": "Polymer/polymer#~0.5.4",
|
||||
"platform": "Polymer/platform#~0.4.2",
|
||||
"paper-elements": "Polymer/paper-elements#~0.5.4",
|
||||
"core-elements": "Polymer/core-elements#~0.5.4"
|
||||
"paper-fab": "PolymerElements/paper-fab#~1.0.4",
|
||||
"paper-header-panel": "PolymerElements/paper-header-panel#~1.0.5",
|
||||
"paper-item": "PolymerElements/paper-item#~1.0.2",
|
||||
"polymer": "Polymer/polymer#^1.1.0"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,15 +1,29 @@
|
||||
<link rel="import" href="../bower_components/polymer/polymer.html">
|
||||
<link rel="import" href="../bower_components/core-ajax/core-ajax.html">
|
||||
<link rel="import" href="../bower_components/core-icons/core-icons.html">
|
||||
<link rel="import" href="../bower_components/core-header-panel/core-header-panel.html">
|
||||
<link rel="import" href="../bower_components/iron-ajax/iron-ajax.html">
|
||||
<link rel="import" href="../bower_components/iron-icons/iron-icons.html">
|
||||
<link rel="import" href="../bower_components/paper-header-panel/paper-header-panel.html">
|
||||
<link rel="import" href="../bower_components/paper-fab/paper-fab.html">
|
||||
|
||||
<link rel="import" href="../elements/xinu-email-unread.html">
|
||||
|
||||
<script src="../bower_components/moment/moment.js"></script>
|
||||
|
||||
<polymer-element name="xinu-email-app">
|
||||
<template>
|
||||
<link rel="import" href="../bower_components/iron-flex-layout/iron-flex-layout.html">
|
||||
<dom-module id="xinu-email-app">
|
||||
<style>
|
||||
/* TODO(polyup): For speed, consider reworking these styles with .classes
|
||||
and #ids rather than [attributes].
|
||||
*/
|
||||
[layout] {
|
||||
@apply(--layout);
|
||||
}
|
||||
[layout][horizontal] {
|
||||
@apply(--layout-horizontal);
|
||||
}
|
||||
[layout][center] {
|
||||
@apply(--layout-center);
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
:host {
|
||||
height: 100%;
|
||||
@ -50,49 +64,46 @@ paper-fab#refresh-button {
|
||||
margin: 10px;
|
||||
}
|
||||
</style>
|
||||
<core-ajax
|
||||
id="fetch"
|
||||
url="/unread?format=list"
|
||||
handleAs="json"
|
||||
response="{{boxes}}"
|
||||
on-core-response="{{handleResponse}}">
|
||||
</core-ajax>
|
||||
<core-header-panel flex mode="waterfall">
|
||||
<div class="core-header" horizontal layout center>
|
||||
<div flex>Unread</div>
|
||||
<div id="net-stats">{{latency}} ms @ {{lastRefresh}}</div>
|
||||
<paper-fab id="refresh-button" icon="refresh" on-click="{{handleRefresh}}" end></paper-fab>
|
||||
<template>
|
||||
<iron-ajax id="fetch" url="http://mail.z.xinu.tv/unread?format=list" handle-as="json" last-response="{{boxes}}" on-core-response="handleResponse">
|
||||
</iron-ajax>
|
||||
<paper-header-panel flex="" mode="waterfall">
|
||||
<div class="core-header" horizontal="" layout="" center="">
|
||||
<div flex="">Unread</div>
|
||||
<div id="net-stats"><span>{{latency}}</span> ms @ <span>{{lastRefresh}}</span></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>
|
||||
</paper-header-panel>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var pollingIntervalMS = 30 * 1000
|
||||
Polymer('xinu-email-app', {
|
||||
log: function() {
|
||||
var pollingIntervalMS = 30 * 1000;
|
||||
Polymer({
|
||||
is: 'xinu-email-app',
|
||||
log: function () {
|
||||
console.log('xinu-email-app ', arguments);
|
||||
},
|
||||
ready: function() {
|
||||
ready: function () {
|
||||
this.log('ready');
|
||||
this.handleRefresh();
|
||||
},
|
||||
handleRefresh: function(event, detail, sender) {
|
||||
handleRefresh: function (event, detail, sender) {
|
||||
this.lastRequest = moment();
|
||||
this.log('handleRefresh');
|
||||
this.$.fetch.go();
|
||||
this.job('refreshLoop', function() { // first arg is the name of the "job"
|
||||
this.$.fetch.generateRequest();
|
||||
this.debounce('refreshLoop', function () {
|
||||
// first arg is the name of the "job"
|
||||
this.handleRefresh();
|
||||
}, pollingIntervalMS);
|
||||
},
|
||||
handleResponse: function(event, detail, sender) {
|
||||
handleResponse: function (event, detail, sender) {
|
||||
var now = moment();
|
||||
this.lastRefresh = now.format('h:mm:ss');
|
||||
this.latency = moment(now - this.lastRequest).millisecond();
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</polymer-element>
|
||||
</dom-module>
|
||||
|
||||
|
||||
@ -1,8 +1,19 @@
|
||||
<link rel="import" href="../bower_components/polymer/polymer.html">
|
||||
<link rel="import" href="../bower_components/paper-item/paper-item.html">
|
||||
|
||||
<polymer-element name="xinu-email-unread" attributes="boxes" noscript>
|
||||
<template>
|
||||
<link rel="import" href="../bower_components/iron-flex-layout/iron-flex-layout.html">
|
||||
<dom-module id="xinu-email-unread">
|
||||
<style>
|
||||
/* TODO(polyup): For speed, consider reworking these styles with .classes
|
||||
and #ids rather than [attributes].
|
||||
*/
|
||||
[layout] {
|
||||
@apply(--layout);
|
||||
}
|
||||
[layout][horizontal] {
|
||||
@apply(--layout-horizontal);
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
a {
|
||||
color: #000;
|
||||
@ -20,16 +31,26 @@
|
||||
}
|
||||
*/
|
||||
</style>
|
||||
<template>
|
||||
|
||||
<template repeat="{{box in boxes}}">
|
||||
<template is="dom-repeat" items="{{boxes}}" as="box">
|
||||
<paper-item>
|
||||
<a href="#{{box.name}}" target="_self">
|
||||
<div horizontal layout>
|
||||
<div flex>{{box.name}}</div>
|
||||
<div end>{{box.count}}</div>
|
||||
<a target="_self" href$="{{computeHref(box)}}">
|
||||
<div horizontal="" layout="">
|
||||
<div flex="">{{box.name}}</div>
|
||||
<div end="">{{box.count}}</div>
|
||||
</div>
|
||||
</a>
|
||||
</paper-item>
|
||||
</template>
|
||||
</template>
|
||||
</polymer-element>
|
||||
<script>
|
||||
Polymer({
|
||||
is: 'xinu-email-unread',
|
||||
properties: { boxes: { notify: true } },
|
||||
computeHref: function (box) {
|
||||
return '#' + box.name;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</dom-module>
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
<link rel="shortcut icon" type="image/png" href="//static.xinu.tv/favicon/email.png">
|
||||
|
||||
<!-- 1. Load platform support before any code that touches the DOM. -->
|
||||
<script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
|
||||
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
|
||||
|
||||
<!-- 2. Use an HTML Import to bring in the element. -->
|
||||
<link rel="import" href="bower_components/font-roboto/roboto.html">
|
||||
@ -22,9 +22,26 @@ html,body {
|
||||
font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
|
||||
}
|
||||
</style>
|
||||
<style is="custom-style">
|
||||
/* TODO(polyup): For speed, consider reworking these styles with .classes
|
||||
and #ids rather than [attributes].
|
||||
*/
|
||||
[layout] {
|
||||
@apply(--layout);
|
||||
}
|
||||
[layout][vertical] {
|
||||
@apply(--layout-vertical);
|
||||
}
|
||||
[fullbleed] {
|
||||
margin: 0;
|
||||
height:100vh;
|
||||
}
|
||||
</style>
|
||||
<link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout.html">
|
||||
</head>
|
||||
<body fullbleed="" layout="" vertical="">
|
||||
<xinu-email-app></xinu-email-app>
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user