luisgulo/photoprism
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Added prev/next buttons to photo view dialog

Browse source
This commit is contained in:
Michael Mayer 2018-09-24 21:13:39 +02:00
parent 689355d1ca
commit fe636ea535
3 changed files with 142 additions and 173 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

162
frontend/css/app.css
View file

@ -2,6 +2,7 @@
@import url("../node_modules/material-design-icons-iconfont/dist/material-design-icons.css");
@import url("alerts.css");
@import url("photo.css");
#app div.loading {
text-align: center;
@ -35,167 +36,6 @@ main {
margin: 0;
}
main div.page {
margin: 0;
padding: 0;
}
main div.page .page-container {
padding: 0;
overflow: auto;
}
main div.page .page-form {
padding: 2.4rem 2rem 0 2rem;
float: none;
}
main div.page .page-form form {
}
.navbar {
padding: 1px 2rem 1px 2rem;
top: 0;
left: 0;
right: 0;
background: black !important;
position: fixed !important;
box-shadow: 0px 6px 30px 0px rgba(0,0,0,0.75);
z-index: 1000;
}
.navbar .nav-item-photos .nav-link.active,
.navbar .nav-item-photos .nav-link:hover {
color: #c8e5ff;
}
main div.page-photos {
}
.navbar .nav-item-albums .nav-link.active,
.navbar .nav-item-albums .nav-link:hover {
color: #c4ffcb;
}
main div.page-albums {
}
.navbar .nav-item-import .nav-link.active,
.navbar .nav-item-import .nav-link:hover {
color: #feffb8;
}
main div.page-import {
}
.navbar .nav-item-export .nav-link.active,
.navbar .nav-item-export .nav-link:hover {
color: #ffedc1;
}
main div.page-export {
}
.navbar .nav-item-settings .nav-link.active,
.navbar .nav-item-settings .nav-link:hover {
color: #f5c5c5;
}
main div.page-settings {
}
.photo-tile {
cursor: pointer;
}
.photo-tile.selected {
opacity: 0.6;
}
.photo-grid .photo {
background: #eeeeee;
display: block;
width: 250px;
height: 250px;
float: left;
margin: 3px;
overflow: hidden;
position: relative;
cursor: pointer;
}
.photo-grid .photo img {
margin: 0;
padding: 0;
}
.photo-grid .photo .info {
display: none;
position: absolute;
top: 0;
left: 0;
right: 0;
opacity: 0.75;
background: black;
font-size: 12px;
padding: 8px 12px;
color: white;
cursor: text;
}
.photo-grid .photo:hover .info {
display: block;
}
.photo-grid .photo .right {
float: right;
}
.photo-grid .photo .left {
float: left;
}
.photo-grid .photo .actions {
display: block;
position: absolute;
bottom: 0;
left: 0;
right: 0;
opacity: 1;
background: transparent;
font-size: 14px;
padding: 6px 12px;
color: white;
text-align: center;
cursor: default;
}
.photo-grid .photo:hover .actions {
background: black;
opacity: 0.75;
}
.photo-grid .photo .actions .action {
display: none;
}
.photo-grid .photo .location {
display: none;
font-size: 12px;
text-decoration: none;
color: white;
}
.photo-grid .photo:hover .location {
display: inline;
}
.photo-grid .photo:hover .actions .action,
.photo-grid .photo .actions .action.favorite {
display: inline;
cursor: pointer;
}
.v-badge__badge {
font-size: 12px;
height: 19px;

117
frontend/css/photo.css Normal file
View file

@ -0,0 +1,117 @@
.photo-tile {
cursor: pointer;
}
.photo-tile.selected {
opacity: 0.6;
}
.photo-grid .photo {
background: #eeeeee;
display: block;
width: 250px;
height: 250px;
float: left;
margin: 3px;
overflow: hidden;
position: relative;
cursor: pointer;
}
.photo-grid .photo img {
margin: 0;
padding: 0;
}
.photo-grid .photo .info {
display: none;
position: absolute;
top: 0;
left: 0;
right: 0;
opacity: 0.75;
background: black;
font-size: 12px;
padding: 8px 12px;
color: white;
cursor: text;
}
.photo-grid .photo:hover .info {
display: block;
}
.photo-grid .photo .right {
float: right;
}
.photo-grid .photo .left {
float: left;
}
.photo-grid .photo .actions {
display: block;
position: absolute;
bottom: 0;
left: 0;
right: 0;
opacity: 1;
background: transparent;
font-size: 14px;
padding: 6px 12px;
color: white;
text-align: center;
cursor: default;
}
.photo-grid .photo:hover .actions {
background: black;
opacity: 0.75;
}
.photo-grid .photo .actions .action {
display: none;
}
.photo-grid .photo .location {
display: none;
font-size: 12px;
text-decoration: none;
color: white;
}
.photo-grid .photo:hover .location {
display: inline;
}
.photo-grid .photo:hover .actions .action,
.photo-grid .photo .actions .action.favorite {
display: inline;
cursor: pointer;
}
.photo-carousel .next {
position: absolute;
top: 50%;
z-index: 1;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.photo-carousel .next,
.photo-carousel .prev {
position: absolute;
top: 50%;
z-index: 1;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.photo-carousel .next {
right: 5px;
}
.photo-carousel .prev {
left: 5px;
}

36
frontend/src/app/pages/photos.vue
View file

@ -171,7 +171,7 @@
</v-card>
<v-layout row wrap>
<v-flex
v-for="photo in results"
v-for="(photo, index) in results"
:key="photo.ID"
xs12 sm6 md4 lg3 d-flex
>
@ -184,7 +184,7 @@
v-bind:class="{ selected: photo.selected }"
style="cursor: pointer"
class="grey lighten-2"
@click="openPhoto(photo)"
@click="openPhoto(photo, index)"
>
<v-layout
@ -235,7 +235,6 @@
</v-layout>
</v-container>
<v-container grid-list-xs fluid class="pa-0" v-if="query.view === 'tiles'">
<v-card v-if="results.length === 0">
<v-card-title primary-title>
@ -247,7 +246,7 @@
</v-card>
<v-layout row wrap>
<v-flex
v-for="photo in results"
v-for="(photo, index) in results"
:key="photo.ID"
xs12 sm6 md3 lg2 d-flex
v-bind:class="{ selected: photo.selected }"
@ -259,7 +258,7 @@
aspect-ratio="1"
class="grey lighten-2"
style="cursor: pointer"
@click="openPhoto(photo)"
@click="openPhoto(photo, index)"
>
<v-layout
slot="placeholder"
@ -312,7 +311,7 @@
<v-dialog v-model="viewDialog" fullscreen hide-overlay transition="dialog-bottom-transition">
<v-card v-if="viewDialogPhoto">
<v-card v-if="viewDialogPhoto" dark color="black" class="photo-carousel">
<v-img :src="viewDialogPhoto.getThumbnailUrl('fit', 500)"
:aspect-ratio="viewDialogPhoto.FileAspectRatio"
contain
@ -334,6 +333,13 @@
<v-progress-circular indeterminate
color="grey lighten-5"></v-progress-circular>
</v-layout>
<v-btn icon large absolute class="next" @click.stop.prevent="nextPhoto()">
<v-icon color="white" x-large>chevron_right</v-icon>
</v-btn>
<v-btn icon large absolute class="prev">
<v-icon color="white" x-large @click.stop.prevent="prevPhoto()">chevron_left</v-icon>
</v-btn>
</v-img>
</v-card>
@ -366,6 +372,7 @@
'advandedSearch': false,
'viewDialog': false,
'viewDialogPhoto': null,
'viewDialogPhotoIndex': 0,
'window': {
width: 0,
height: 0
@ -426,11 +433,15 @@
this.window.width = window.innerWidth;
this.window.height = window.innerHeight;
},
overPhoto(photo) {
prevPhoto() {
if(this.viewDialogPhotoIndex < 1 || !this.results[this.viewDialogPhotoIndex - 1]) return false;
this.viewDialogPhotoIndex--;
this.viewDialogPhoto = this.results[this.viewDialogPhotoIndex];
},
leavePhoto(photo) {
nextPhoto() {
if(this.viewDialogPhotoIndex >= this.results.length || !this.results[this.viewDialogPhotoIndex + 1]) return false;
this.viewDialogPhotoIndex++;
this.viewDialogPhoto = this.results[this.viewDialogPhotoIndex];
},
clearSelection() {
for (let i = 0; i < this.selected.length; i++) {
@ -479,14 +490,15 @@
this.snackbarVisible = false;
}
},
openPhoto(photo) {
this.$alert.success('Open photo' + photo.PhotoTitle);
openPhoto(photo, index) {
this.viewDialogPhoto = photo;
this.viewDialogPhotoIndex = index;
this.viewDialog = true;
this.hideSnackbar();
},
closePhoto() {
this.viewDialogPhoto = null;
this.viewDialogPhotoIndex = 0;
this.viewDialog = false;
this.showSnackbar();
},