Drawer starting to work
Signed-off-by: James Ketrenos <james_git@ketrenos.com>
This commit is contained in:
parent
fb4b1e42d5
commit
40cc6e0681
1
.gitignore
vendored
1
.gitignore
vendored
@ -1,3 +1,4 @@
|
|||||||
|
config/local.json
|
||||||
node_modules
|
node_modules
|
||||||
./elements
|
./elements
|
||||||
frontend/bower_components
|
frontend/bower_components
|
||||||
|
@ -9,6 +9,6 @@
|
|||||||
"server": {
|
"server": {
|
||||||
"port": 8123
|
"port": 8123
|
||||||
},
|
},
|
||||||
"picturesPath": "/multimedia/Pictures",
|
"picturesPath": "./fap",
|
||||||
"basePath": "/photos"
|
"basePath": "/photos"
|
||||||
}
|
}
|
||||||
|
@ -3,25 +3,27 @@
|
|||||||
<head>
|
<head>
|
||||||
<link rel="import" href="../../bower_components/polymer/polymer.html">
|
<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-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-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/app-route/app-location.html">
|
||||||
|
|
||||||
<link rel="import" href="../../bower_components/iron-icon/iron-icon.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-icons/iron-icons.html">
|
||||||
<link rel="import" href="../../bower_components/iron-pages/iron-pages.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-button/paper-button.html">
|
||||||
<link rel="import" href="../../bower_components/paper-checkbox/paper-checkbox.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/paper-dialog.html">
|
||||||
<link rel="import" href="../../bower_components/paper-dialog-scrollable/paper-dialog-scrollable.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-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-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-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/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" />
|
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Droid+Sans+Mono" />
|
||||||
|
|
||||||
@ -52,13 +54,22 @@
|
|||||||
padding: 0.5em;
|
padding: 0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
#albumList > div,
|
#albums {
|
||||||
|
height: 100%;
|
||||||
|
overflow-y: scroll;
|
||||||
|
}
|
||||||
|
|
||||||
|
#albums > div {
|
||||||
|
margin: 0.5em;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
#breadcrumb > div {
|
#breadcrumb > div {
|
||||||
margin-right: 0.5em;
|
margin-right: 0.5em;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
#albumList > div:hover,
|
#albums div:hover,
|
||||||
#breadcrumb > div:hover {
|
#breadcrumb > div:hover {
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
@ -73,15 +84,6 @@
|
|||||||
--paper-toast-color: white;
|
--paper-toast-color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
.folders > div {
|
|
||||||
margin: 0.5em;
|
|
||||||
width: 200px;
|
|
||||||
height: 200px;
|
|
||||||
border: 1px solid #ddd;
|
|
||||||
border-radius: 3px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
#placeholder {
|
#placeholder {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: -1000px;
|
left: -1000px;
|
||||||
@ -91,16 +93,12 @@
|
|||||||
background-color: yellow;
|
background-color: yellow;
|
||||||
}
|
}
|
||||||
|
|
||||||
#header > div > * {
|
/* app-header-layout {
|
||||||
margin-right: 0.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
app-header-layout {
|
|
||||||
--layout-fit: {
|
--layout-fit: {
|
||||||
overflow-y: hidden !important;
|
overflow-y: hidden !important;
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
*/
|
||||||
|
|
||||||
.date-line {
|
.date-line {
|
||||||
display: block;
|
display: block;
|
||||||
@ -123,10 +121,6 @@
|
|||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
||||||
#content {
|
|
||||||
margin: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
photo-thumbnail {
|
photo-thumbnail {
|
||||||
--photo-thumbnail: {
|
--photo-thumbnail: {
|
||||||
border: 3px solid rgba(0, 0, 0, 0);
|
border: 3px solid rgba(0, 0, 0, 0);
|
||||||
@ -143,32 +137,35 @@
|
|||||||
|
|
||||||
<app-location route="{{route}}"></app-location>
|
<app-location route="{{route}}"></app-location>
|
||||||
|
|
||||||
<photo-thumbnail id="placeholder"></photo-thumbnail>
|
<app-drawer-layout id="albumLayout">
|
||||||
|
<app-drawer persistent id="albumList" slot="drawer">
|
||||||
<app-header-layout reveals>
|
<div id="albums" class="layout vertical">
|
||||||
<app-header fixed>
|
<template is="dom-repeat" items="[[breadcrumb(path)]]">
|
||||||
<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)]]">
|
|
||||||
<div on-tap="loadPath">[[item.name]] /</div>
|
<div on-tap="loadPath">[[item.name]] /</div>
|
||||||
</template></div>
|
</template>
|
||||||
</div>
|
|
||||||
</app-header>
|
|
||||||
<div id="content" class="layout horizontal">
|
|
||||||
<div id="albumList" hidden$="[[!showAlbums]]">
|
|
||||||
<template is="dom-repeat" items="[[albums.children]]">
|
<template is="dom-repeat" items="[[albums.children]]">
|
||||||
<div on-tap="loadPath">[[item.name]]</div>
|
<div on-tap="loadPath">[[item.name]]</div>
|
||||||
</template>
|
</template>
|
||||||
</div>
|
</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="thumbnails" class="thumbnails layout horizontal wrap"></div>
|
||||||
<div id="magic"></div>
|
<div id="magic"></div>
|
||||||
<div class="layout horizontal">
|
<div class="layout horizontal">
|
||||||
@ -176,10 +173,11 @@
|
|||||||
<paper-button disabled$="[[!next]]" on-tap="loadNextPhotos">next</paper-button>
|
<paper-button disabled$="[[!next]]" on-tap="loadNextPhotos">next</paper-button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</app-header-layout>
|
||||||
</app-header-layout>
|
</app-drawer-layout>
|
||||||
<paper-toast id="toast"></paper-toast>
|
<paper-toast id="toast"></paper-toast>
|
||||||
<photo-lightbox tabindex="0" id="lightbox" on-close="lightBoxClose" on-next="lightBoxNext" on-previous="lightBoxPrevious"></photo-lightbox>
|
<photo-lightbox tabindex="0" id="lightbox" on-close="lightBoxClose" on-next="lightBoxNext" on-previous="lightBoxPrevious"></photo-lightbox>
|
||||||
|
<photo-thumbnail id="placeholder"></photo-thumbnail>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@ -248,6 +246,15 @@
|
|||||||
|
|
||||||
orderChanged: function(order) {
|
orderChanged: function(order) {
|
||||||
console.log("Order: " + 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 = "";
|
Polymer.dom(this.$.thumbnails).innerHTML = "";
|
||||||
this.appendItems(this.photos);
|
this.appendItems(this.photos);
|
||||||
},
|
},
|
||||||
|
Loading…
x
Reference in New Issue
Block a user