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

Drawer starting to work

Browse Source 
Signed-off-by: James Ketrenos <james_git@ketrenos.com>
This commit is contained in:
James Ketr 2018-08-29 14:17:13 -07:00
parent fb4b1e42d5
commit 40cc6e0681
3 changed files with 56 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -1,3 +1,4 @@
config/local.json
node_modules
./elements
frontend/bower_components

2
config/default.json
View File

@ -9,6 +9,6 @@
"server": {
"port": 8123
},
"picturesPath": "/multimedia/Pictures",
"picturesPath": "./fap",
"basePath": "/photos"
}

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

@ -3,25 +3,27 @@
<head>
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/app-layout/app-header/app-header.html">
<link rel="import" href="../../bower_components/app-layout/app-header-layout/app-header-layout.html">
<link rel="import" href="../../bower_components/app-layout/app-drawer-layout/app-drawer-layout.html">
<link rel="import" href="../../bower_components/app-layout/app-header/app-header.html">
<link rel="import" href="../../bower_components/app-layout/app-toolbar/app-toolbar.html">
<link rel="import" href="../../bower_components/app-layout/app-drawer/app-drawer.html">
<link rel="import" href="../../bower_components/app-route/app-location.html">
<link rel="import" href="../../bower_components/iron-icon/iron-icon.html">
<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../../bower_components/iron-pages/iron-pages.html">
<link rel="import" href="../../bower_components/iron-resizable-behavior/iron-resizable-behavior.html">
<link rel="import" href="../../bower_components/paper-button/paper-button.html">
<link rel="import" href="../../bower_components/paper-checkbox/paper-checkbox.html">
<link rel="import" href="../../bower_components/paper-dialog/paper-dialog.html">
<link rel="import" href="../../bower_components/paper-dialog-scrollable/paper-dialog-scrollable.html">
<link rel="import" href="../../bower_components/paper-input/paper-input.html">
<link rel="import" href="../../bower_components/paper-spinner/paper-spinner.html">
<link rel="import" href="../../bower_components/paper-radio-group/paper-radio-group.html">
<link rel="import" href="../../bower_components/paper-radio-button/paper-radio-button.html">
<link rel="import" href="../../bower_components/paper-spinner/paper-spinner.html">
<link rel="import" href="../../bower_components/paper-toast/paper-toast.html">
<link rel="import" href="../../bower_components/iron-resizable-behavior/iron-resizable-behavior.html">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Droid+Sans+Mono" />
@ -52,13 +54,22 @@
padding: 0.5em;
}
#albumList > div,
#albums {
height: 100%;
overflow-y: scroll;
}
#albums > div {
margin: 0.5em;
cursor: pointer;
}
#breadcrumb > div {
margin-right: 0.5em;
cursor: pointer;
}
#albumList > div:hover,
#albums div:hover,
#breadcrumb > div:hover {
text-decoration: underline;
}
@ -73,15 +84,6 @@
--paper-toast-color: white;
}
.folders > div {
margin: 0.5em;
width: 200px;
height: 200px;
border: 1px solid #ddd;
border-radius: 3px;
cursor: pointer;
}
#placeholder {
position: absolute;
left: -1000px;
@ -91,16 +93,12 @@
background-color: yellow;
}
#header > div > * {
margin-right: 0.5em;
}
app-header-layout {
/* app-header-layout {
--layout-fit: {
overflow-y: hidden !important;
};
}
*/
.date-line {
display: block;
@ -123,10 +121,6 @@
text-decoration: underline;
}
#content {
margin: 1em;
}
photo-thumbnail {
--photo-thumbnail: {
border: 3px solid rgba(0, 0, 0, 0);
@ -143,32 +137,35 @@
<app-location route="{{route}}"></app-location>
<photo-thumbnail id="placeholder"></photo-thumbnail>
<app-header-layout reveals>
<app-header fixed>
<div id="header" class="layout vertical start">
<div class="layout horizontal center">
<paper-spinner active$="[[loading]]" class="thin"></paper-spinner>
<paper-radio-group selected="{{order}}">
<paper-radio-button name="by-date">By date</paper-radio-button>
<paper-radio-button name="by-album">By album</paper-radio-button>
</paper-radio-group>
<paper-checkbox checked$="[[limitPerFolder]]" on-checked-changed="onLimitPerFolderChanged">Limit per folder</paper-checkbox>
<paper-checkbox checked$="[[breakOnDayChange]]" on-checked-changed="onBreakOnDayChanged">Break on day change</paper-checkbox>
</div>
<div id="breadcrumb" class="horizontal layout center"><template is="dom-repeat" items="[[breadcrumb(path)]]">
<app-drawer-layout id="albumLayout">
<app-drawer persistent id="albumList" slot="drawer">
<div id="albums" class="layout vertical">
<template is="dom-repeat" items="[[breadcrumb(path)]]">
<div on-tap="loadPath">[[item.name]] /</div>
</template></div>
</div>
</app-header>
<div id="content" class="layout horizontal">
<div id="albumList" hidden$="[[!showAlbums]]">
</template>
<template is="dom-repeat" items="[[albums.children]]">
<div on-tap="loadPath">[[item.name]]</div>
</template>
</div>
<div class="layout vertical">
</app-drawer>
<app-header-layout>
<app-header reveals slot="header">
<div class="layout vertical start">
<div class="layout horizontal center">
<paper-spinner active$="[[loading]]" class="thin"></paper-spinner>
<paper-radio-group selected="{{order}}">
<paper-radio-button name="by-date">By date</paper-radio-button>
<paper-radio-button name="by-album">By album</paper-radio-button>
</paper-radio-group>
<paper-checkbox checked$="[[limitPerFolder]]" on-checked-changed="onLimitPerFolderChanged">Limit per folder</paper-checkbox>
<paper-checkbox checked$="[[breakOnDayChange]]" on-checked-changed="onBreakOnDayChanged">Break on day change</paper-checkbox>
</div>
<div id="breadcrumb" class="horizontal layout center"><template is="dom-repeat" items="[[breadcrumb(path)]]">
<div on-tap="loadPath">[[item.name]] /</div>
</template></div>
</div>
</app-header>
<div id="content" fullbleed class="flex layout vertical">
<div id="thumbnails" class="thumbnails layout horizontal wrap"></div>
<div id="magic"></div>
<div class="layout horizontal">
@ -176,10 +173,11 @@
<paper-button disabled$="[[!next]]" on-tap="loadNextPhotos">next</paper-button>
</div>
</div>
</div>
</app-header-layout>
</app-header-layout>
</app-drawer-layout>
<paper-toast id="toast"></paper-toast>
<photo-lightbox tabindex="0" id="lightbox" on-close="lightBoxClose" on-next="lightBoxNext" on-previous="lightBoxPrevious"></photo-lightbox>
<photo-thumbnail id="placeholder"></photo-thumbnail>
</template>
<script>
@ -248,6 +246,15 @@
orderChanged: function(order) {
console.log("Order: " + order);
if (order == "by-album") {
this.$.albumLayout.forceNarrow = false;
this.$.albumList.open();
this.$.albumList.persistent = true;
} else if (order == "by-date") {
this.$.albumList.close();
this.$.albumLayout.forceNarrow = true;
this.$.albumList.resetLayout();
}
Polymer.dom(this.$.thumbnails).innerHTML = "";
this.appendItems(this.photos);
},