A bunch of misc web stuff.

unreadpoly/bower.json

@@ -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",
+    "paper-fab": "PolymerElements/paper-fab#~1.0.4",
-    "platform": "Polymer/platform#~0.4.2",
+    "paper-header-panel": "PolymerElements/paper-header-panel#~1.0.5",
-    "paper-elements": "Polymer/paper-elements#~0.5.4",
+    "paper-item": "PolymerElements/paper-item#~1.0.2",
-    "core-elements": "Polymer/core-elements#~0.5.4"
+    "polymer": "Polymer/polymer#^1.1.0"
   }
 }

unreadpoly/elements/xinu-email-app.html

@@ -1,16 +1,30 @@
 <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/iron-ajax/iron-ajax.html">
-<link rel="import" href="../bower_components/core-icons/core-icons.html">
+<link rel="import" href="../bower_components/iron-icons/iron-icons.html">
-<link rel="import" href="../bower_components/core-header-panel/core-header-panel.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">
+  <link rel="import" href="../bower_components/iron-flex-layout/iron-flex-layout.html">
-    <template>
+<dom-module id="xinu-email-app">
-    <style>
+  <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
+  <template>
-            id="fetch"
+        <iron-ajax id="fetch" url="http://mail.z.xinu.tv/unread?format=list" handle-as="json" last-response="{{boxes}}" on-core-response="handleResponse">
-            url="/unread?format=list"
+        </iron-ajax>
-            handleAs="json"
+        <paper-header-panel flex="" mode="waterfall">
-            response="{{boxes}}"
+            <div class="core-header" horizontal="" layout="" center="">
-            on-core-response="{{handleResponse}}">
+                <div flex="">Unread</div>
-        </core-ajax>
+                <div id="net-stats"><span>{{latency}}</span> ms @ <span>{{lastRefresh}}</span></div>
-        <core-header-panel flex mode="waterfall">
+                <paper-fab id="refresh-button" icon="refresh" on-click="handleRefresh" end=""></paper-fab>
-            <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>
             </div>
             <div class="content">
                 <xinu-email-unread boxes="{{boxes}}"></xinu-email-unread>
             </div>
-        </core-header-panel>
+        </paper-header-panel>
     </template>
-
+  <script>
-    <script>
+    var pollingIntervalMS = 30 * 1000;
-var pollingIntervalMS = 30 * 1000
+    Polymer({
-Polymer('xinu-email-app', {
+      is: 'xinu-email-app',
-  log: function() {
+      log: function () {
-    console.log('xinu-email-app ', arguments);
+        console.log('xinu-email-app ', arguments);
-  },
+      },
-  ready: function() {
+      ready: function () {
-    this.log('ready');
+        this.log('ready');
-    this.handleRefresh();
-  },
-  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.handleRefresh();
-    }, pollingIntervalMS);
+      },
-  },
+      handleRefresh: function (event, detail, sender) {
-  handleResponse: function(event, detail, sender) {
+        this.lastRequest = moment();
-    var now = moment();
+        this.log('handleRefresh');
-    this.lastRefresh = now.format('h:mm:ss');
+        this.$.fetch.generateRequest();
-    this.latency = moment(now - this.lastRequest).millisecond();
+        this.debounce('refreshLoop', function () {
-  }
+          // first arg is the name of the "job"
-});
+          this.handleRefresh();
-    </script>
+        }, pollingIntervalMS);
-</polymer-element>
+      },
+      handleResponse: function (event, detail, sender) {
+        var now = moment();
+        this.lastRefresh = now.format('h:mm:ss');
+        this.latency = moment(now - this.lastRequest).millisecond();
+      }
+    });
+  </script>
+</dom-module>
 

unreadpoly/elements/xinu-email-unread.html

@@ -1,9 +1,20 @@
 <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>
+  <link rel="import" href="../bower_components/iron-flex-layout/iron-flex-layout.html">
-    <template>
+<dom-module id="xinu-email-unread">
-        <style>
+  <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;
             text-decoration: none;
@@ -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">
+            <a target="_self" href$="{{computeHref(box)}}">
-              <div horizontal layout>
+              <div horizontal="" layout="">
-                <div flex>{{box.name}}</div>
+                <div flex="">{{box.name}}</div>
-                <div end>{{box.count}}</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>

unreadpoly/index.html

@@ -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>