jketreno/ketr.photos
1
0
Fork 0
Code Issues 1 Activity

Added icon-buttons for today and random

Browse Source 
Signed-off-by: James Ketrenos <james_git@ketrenos.com>
This commit is contained in:
James Ketr 2018-09-13 11:08:43 -07:00
parent 6349c84136
commit 77e8db079d
1 changed files with 61 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
frontend/src/ketr-photos/ketr-photos.html
View File

@ -47,18 +47,22 @@
<dom-module id="ketr-photos">
<template>
<style is="custom-style" include="iron-flex iron-flex-alignment iron-positioning">
<style is="custom-style" include="iron-flex iron-flex-alignment iron-flex-factors iron-positioning">
:host {
}
#header {
padding: 0.5em 1em;
padding: 0.5em;
background: #ddd;
box-shadow: 0px 0px 5px black;
box-sizing: border-box;
height: 64px;
}
#header iron-pages {
padding-left: 0.5em;
}
#breadcrumb {
padding: 0.5em;
}
@ -213,7 +217,28 @@
}
#memories {
padding: 0.5em;
padding: 0.5em 1em;
}
#memories > div,
#memories > calendar-element {
padding-top: 1em;
}
#memories .memory-buttons {
padding-top: 0;
font-size: 0.8em;
}
#memories .memory-buttons :not([is-today]) paper-icon-button {
color: #444;
}
#memories [is-today] {
font-weight: bold;
}
#memories [is-today] paper-icon-button {
}
</style>
@ -229,13 +254,22 @@
<iron-pages id="pages" attr-for-selected="id" selected="[[mode]]">
<div id="time"><div>... time slider ...</div></div>
<div id="memories" class="flex layout vertical center">
<div>Pick a date on the calendar to look back in time and see photos from that day.</div>
<div class="memory-buttons layout self-stretch horizontal around-justified">
<div is-today$=[[!isToday(date)]] on-tap="gotoRandomDay" class="layout vertical center">
<div>Random</div>
<paper-icon-button icon="refresh"></paper-icon-button>
</div>
<div is-today$=[[isToday(date)]] on-tap="gotoToday" class="layout vertical center">
<div>Today</div>
<paper-icon-button icon="today"></paper-icon-button>
</div>
</div>
<calendar-element
id="calendar"
min="2016-01-01"
max="2016-12-31"
date="{{date}}"></calendar-element>
<div>[[memoryDate]]</div>
<div>Pick a date on the calendar to look back in time and see photos from that day.</div>
<div hidden$="[[!thumbnails.length]]">
<div><b>[[thumbnails.length]]</b> photos taken across <b>[[years.length]]</b> years.</div>
</div>
@ -261,7 +295,7 @@
</template>
</div>
<div mode="time">time</div>
<div mode="memories">Photos taken on <b>[[memoryDate]]</b>, regardless of year.</div>
<div mode="memories">Photos taken on <b>[[memoryDate]]</b></div>
</iron-pages>
</div>
</app-header>
@ -342,6 +376,18 @@
"dateChanged(date)"
],
isToday: function(date) {
return this.date == "2016-" + window.moment().format("MM-DD");
},
gotoToday: function() {
this.date = "2016-" + window.moment().format("MM-DD");
},
gotoRandomDay: function() {
this.date = "2016-" + window.moment(Math.ceil(Math.random() * 365), "DDD").format("MM-DD");
},
shouldShowAlbums: function(order) {
return order == "by-album";
},
@ -353,15 +399,21 @@
}
},
dateChanged: function(date) {
resetPhotos: function() {
this.years = [];
this.notifyPath("years.length");
this.pendingPhotos = [];
this.visibleThumbs = [];
this.thumbnails = [];
this.notifyPath("thumbnails.length");
this.cursor = null;
Polymer.dom(this.$.thumbnails).innerHTML = "";
this.next = false;
this.limit = undefined;
},
dateChanged: function(date) {
this.resetPhotos();
this.memoryDate = window.moment(this.date).format("MMMM Do");
this._loadPhotos();
},
@ -369,13 +421,7 @@
modeChanged: function(mode) {
console.log("Mode changed to " + mode);
this.path = "";
this.pendingPhotos = [];
this.visibleThumbs = [];
this.thumbnails = [];
this.cursor = null;
Polymer.dom(this.$.thumbnails).innerHTML = "";
this.next = false;
this.limit = undefined;
this.resetPhotos();
this._loadPhotos();
},
@ -423,13 +469,7 @@
_pathLoad: function(path) {
this.path = path;
this.pendingPhotos = [];
this.visibleThumbs = [];
this.thumbnails = [];
this.cursor = null;
Polymer.dom(this.$.thumbnails).innerHTML = "";
this.next = false;
this.limit = undefined;
this.resetPhotos();
this._loadAlbums();
this._loadPhotos();
},