gerrit/polygerrit-ui/app/elements/gr-date-formatter.html
Andrew Bonventre ba69835964 Add the skeleton of a new UI based on Polymer, PolyGerrit
This is the beginnings of an experimental new non-GWT web UI developed
using a modern JS web framework, http://www.polymer-project.org/. It
will coexist alongside the GWT UI until it is feature-complete.

The functionality of this change is light years from complete, with
a full laundry list of things that don't work. This change is simply
meant to get the starting work in and continue iteration afterward.

The contents of the polygerrit-ui directory started as the full tree of
https://github.com/andybons/polygerrit at 219f531, plus a few more
local changes since review started. In the future this directory will
be pruned, rearranged, and integrated with the Buck build.

Change-Id: Ifb6f5429e8031ee049225cdafa244ad1c21bf5b5
2015-11-09 22:01:28 +00:00

91 lines
2.6 KiB
HTML

<!--
Copyright (C) 2015 The Android Open Source Project
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<link rel="import" href="../bower_components/polymer/polymer.html">
<dom-module id="gr-date-formatter">
<template>
<style>
:host {
display: inline;
}
</style>
<span>[[_computeDateStr(dateStr)]]</span>
</template>
<script>
(function() {
'use strict';
var Duration = {
HOUR: 1000 * 60 * 60,
DAY: 1000 * 60 * 60 * 24,
};
var ShortMonthNames = [
'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct',
'Nov', 'Dec'
];
Polymer({
is: 'gr-date-formatter',
properties: {
dateStr: {
type: String,
value: null,
notify: true
}
},
_computeDateStr: function(dateStr) {
return this._dateStr(this._parseDateStr(dateStr), new Date());
},
_parseDateStr: function(dateStr) {
if (!dateStr) { return null; }
return util.parseDate(dateStr);
},
_dateStr: function(t, now) {
if (!t) { return ''; }
var diff = now.getTime() - t.getTime();
if (diff < Duration.DAY && t.getDay() == now.getDay()) {
// Within 24 hours and on the same day:
// '2:14 AM'
var pm = t.getHours() >= 12;
var hours = t.getHours() === 0 ? 12 :
pm ? t.getHours() - 12 : t.getHours();
var minutes = t.getMinutes() < 10 ? '0' + t.getMinutes() :
t.getMinutes();
return hours + ':' + minutes + (pm ? ' PM' : ' AM');
} else if ((t.getDay() != now.getDay() || diff >= Duration.DAY) &&
diff < 180 * Duration.DAY) {
// From one to six months:
// 'Aug 29'
return ShortMonthNames[t.getMonth()] + ' ' + t.getDate();
} else if (diff >= 180 * Duration.DAY) {
// More than six months:
// 'Aug 29, 1997'
return ShortMonthNames[t.getMonth()] + ' ' + t.getDate() + ', ' +
t.getFullYear();
}
},
});
})();
</script>
</dom-module>