Frontend: Code clean-up
This commit is contained in:
Michael Mayer
parent
205b7a3061
commit
4debcae7f4
@ -19,8 +19,8 @@ module.exports = {
|
||||
// Settings for how to process Vue SFC Blocks
|
||||
SFCBlocks: {
|
||||
template: false,
|
||||
script: true,
|
||||
style: true,
|
||||
script: false,
|
||||
style: false,
|
||||
},
|
||||
|
||||
// Use prettierrc for prettier options or not (default: `true`)
|
||||
|
||||
@ -3,10 +3,10 @@
|
||||
<v-card v-if="photos.length === 0" class="p-photos-empty secondary-light lighten-1 ma-1" flat>
|
||||
<v-card-title primary-title>
|
||||
<div>
|
||||
<h3 class="title ma-0 pa-0" v-if="filter.order === 'edited'">
|
||||
<h3 v-if="filter.order === 'edited'" class="title ma-0 pa-0">
|
||||
<translate>Couldn't find recently edited</translate>
|
||||
</h3>
|
||||
<h3 class="title ma-0 pa-0" v-else>
|
||||
<h3 v-else class="title ma-0 pa-0">
|
||||
<translate>Couldn't find anything</translate>
|
||||
</h3>
|
||||
<p class="mt-4 mb-0 pa-0">
|
||||
@ -26,16 +26,16 @@
|
||||
:data-uid="photo.UID"
|
||||
class="p-photo"
|
||||
xs12 sm6 md4 lg3 xl2 d-flex
|
||||
v-bind:class="{ 'is-selected': $clipboard.has(photo), portrait: photo.Portrait }"
|
||||
:class="{ 'is-selected': clipboard.has(photo), portrait: photo.Portrait }"
|
||||
>
|
||||
<v-hover>
|
||||
<v-card tile slot-scope="{ hover }"
|
||||
@contextmenu="onContextMenu($event, index)"
|
||||
:dark="$clipboard.has(photo)"
|
||||
:class="$clipboard.has(photo) ? 'elevation-10 ma-0 accent darken-1 white--text' : 'elevation-0 ma-1 accent lighten-3'">
|
||||
<v-card slot-scope="{ hover }" tile
|
||||
:dark="clipboard.has(photo)"
|
||||
:class="clipboard.has(photo) ? 'elevation-10 ma-0 accent darken-1 white--text' : 'elevation-0 ma-1 accent lighten-3'"
|
||||
@contextmenu="onContextMenu($event, index)">
|
||||
<v-img :src="photo.thumbnailUrl('tile_500')"
|
||||
aspect-ratio="1"
|
||||
v-bind:class="{ selected: $clipboard.has(photo) }"
|
||||
:class="{ selected: clipboard.has(photo) }"
|
||||
class="accent lighten-2 clickable"
|
||||
@mousedown="onMouseDown($event, index)"
|
||||
@click.stop.prevent="onClick($event, index)"
|
||||
@ -52,16 +52,16 @@
|
||||
</v-layout>
|
||||
|
||||
<v-layout
|
||||
v-if="photo.Type === 'live'"
|
||||
v-show="hover"
|
||||
fill-height
|
||||
align-center
|
||||
justify-center
|
||||
ma-0
|
||||
class="live-player"
|
||||
style="overflow: hidden;"
|
||||
v-if="photo.Type === 'live'"
|
||||
v-show="hover"
|
||||
>
|
||||
<video width="500" height="500" autoplay loop muted playsinline :key="photo.videoUrl()">
|
||||
<video :key="photo.videoUrl()" width="500" height="500" autoplay loop muted playsinline>
|
||||
<source :src="photo.videoUrl()" type="video/mp4">
|
||||
</video>
|
||||
</v-layout>
|
||||
@ -72,11 +72,11 @@
|
||||
<v-icon color="white">lock</v-icon>
|
||||
</v-btn>
|
||||
|
||||
<v-btn v-if="hover || selection.length && $clipboard.has(photo)" :ripple="false"
|
||||
<v-btn v-if="hover || selection.length && clipboard.has(photo)" :ripple="false"
|
||||
icon flat large absolute
|
||||
:class="selection.length && $clipboard.has(photo) ? 'p-photo-select' : 'p-photo-select opacity-50'"
|
||||
:class="selection.length && clipboard.has(photo) ? 'p-photo-select' : 'p-photo-select opacity-50'"
|
||||
@click.stop.prevent="onSelect($event, index)">
|
||||
<v-icon v-if="selection.length && $clipboard.has(photo)" color="white"
|
||||
<v-icon v-if="selection.length && clipboard.has(photo)" color="white"
|
||||
class="t-select t-on">check_circle
|
||||
</v-icon>
|
||||
<v-icon v-else color="accent lighten-3" class="t-select t-off">radio_button_off</v-icon>
|
||||
@ -96,12 +96,12 @@
|
||||
<template v-if="photo.isPlayable()">
|
||||
<v-btn v-if="photo.Type === 'live'" :ripple="false"
|
||||
icon flat large absolute class="p-photo-live opacity-75"
|
||||
@click.stop.prevent="openPhoto(index, true)" title="Live Photo">
|
||||
title="Live Photo" @click.stop.prevent="openPhoto(index, true)">
|
||||
<v-icon color="white" class="action-play">adjust</v-icon>
|
||||
</v-btn>
|
||||
<v-btn v-else color="white" :ripple="false"
|
||||
outline large fab absolute class="p-photo-play opacity-75" :depressed="false"
|
||||
@click.stop.prevent="openPhoto(index, true)" title="Play">
|
||||
title="Play" @click.stop.prevent="openPhoto(index, true)">
|
||||
<v-icon color="white" class="action-play">play_arrow</v-icon>
|
||||
</v-btn>
|
||||
</template>
|
||||
@ -117,7 +117,7 @@
|
||||
</v-btn>
|
||||
<v-btn v-else-if="photo.Type === 'raw'" :ripple="false"
|
||||
icon flat large absolute class="p-photo-merged opacity-75"
|
||||
@click.stop.prevent="openPhoto(index, true)" title="RAW">
|
||||
title="RAW" @click.stop.prevent="openPhoto(index, true)">
|
||||
<v-icon color="white" class="action-burst">photo_camera</v-icon>
|
||||
</v-btn>
|
||||
</v-img>
|
||||
@ -125,47 +125,47 @@
|
||||
<v-card-title primary-title class="pa-3 p-photo-desc" style="user-select: none;">
|
||||
<div>
|
||||
<h3 class="body-2 mb-2" :title="photo.Title">
|
||||
<button @click.exact="editPhoto(index)" class="action-title-edit"
|
||||
:data-uid="photo.UID">
|
||||
<button class="action-title-edit" :data-uid="photo.UID"
|
||||
@click.exact="editPhoto(index)">
|
||||
{{ photo.Title | truncate(80) }}
|
||||
</button>
|
||||
</h3>
|
||||
<div class="caption mb-2" v-if="photo.Description" title="Description">
|
||||
<div v-if="photo.Description" class="caption mb-2" title="Description">
|
||||
<button @click.exact="editPhoto(index)">
|
||||
{{ photo.Description }}
|
||||
</button>
|
||||
</div>
|
||||
<div class="caption">
|
||||
<button @click.exact="editPhoto(index)" class="action-date-edit"
|
||||
:data-uid="photo.UID">
|
||||
<button class="action-date-edit" :data-uid="photo.UID"
|
||||
@click.exact="editPhoto(index)">
|
||||
<v-icon size="14" title="Taken">date_range</v-icon>
|
||||
{{ photo.getDateString() }}
|
||||
</button>
|
||||
<template v-if="!photo.Description">
|
||||
<br/>
|
||||
<button v-if="photo.Type === 'video'" @click.exact="openPhoto(index, true)"
|
||||
title="Video">
|
||||
<button v-if="photo.Type === 'video'" title="Video"
|
||||
@click.exact="openPhoto(index, true)">
|
||||
<v-icon size="14">movie</v-icon>
|
||||
{{ photo.getVideoInfo() }}
|
||||
</button>
|
||||
<button v-else @click.exact="editPhoto(index)" title="Camera"
|
||||
class="action-camera-edit" :data-uid="photo.UID">
|
||||
<button v-else title="Camera" class="action-camera-edit"
|
||||
:data-uid="photo.UID" @click.exact="editPhoto(index)">
|
||||
<v-icon size="14">photo_camera</v-icon>
|
||||
{{ photo.getPhotoInfo() }}
|
||||
</button>
|
||||
</template>
|
||||
<template v-if="filter.order === 'name' && $config.feature('download')">
|
||||
<br/>
|
||||
<button @click.exact="downloadFile(index)"
|
||||
title="Name">
|
||||
<button title="Name"
|
||||
@click.exact="downloadFile(index)">
|
||||
<v-icon size="14">insert_drive_file</v-icon>
|
||||
{{ photo.baseName() }}
|
||||
</button>
|
||||
</template>
|
||||
<template v-if="showLocation && photo.Country !== 'zz'">
|
||||
<br/>
|
||||
<button @click.exact="openLocation(index)" title="Location"
|
||||
class="action-location" :data-uid="photo.UID">
|
||||
<button title="Location" class="action-location"
|
||||
:data-uid="photo.UID" @click.exact="openLocation(index)">
|
||||
<v-icon size="14">location_on</v-icon>
|
||||
{{ photo.locationInfo() }}
|
||||
</button>
|
||||
@ -177,12 +177,12 @@
|
||||
<v-layout row wrap align-center>
|
||||
<v-flex xs12>
|
||||
<div class="text-xs-center">
|
||||
<v-btn color="secondary-dark" small depressed dark @click.stop="photo.archive()"
|
||||
class="action-archive text-xs-center" :title="labels.archive">
|
||||
<v-btn color="secondary-dark" small depressed dark class="action-archive text-xs-center"
|
||||
:title="labels.archive" @click.stop="photo.archive()">
|
||||
<v-icon dark>archive</v-icon>
|
||||
</v-btn>
|
||||
<v-btn color="secondary-dark" small depressed dark @click.stop="photo.approve()"
|
||||
class="action-approve text-xs-center" :title="labels.approve">
|
||||
<v-btn color="secondary-dark" small depressed dark class="action-approve text-xs-center"
|
||||
:title="labels.approve" @click.stop="photo.approve()">
|
||||
<v-icon dark>check</v-icon>
|
||||
</v-btn>
|
||||
</div>
|
||||
@ -197,7 +197,7 @@
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'p-photo-cards',
|
||||
name: 'PPhotoCards',
|
||||
props: {
|
||||
photos: Array,
|
||||
selection: Array,
|
||||
@ -210,6 +210,7 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
clipboard: this.$clipboard,
|
||||
showLocation: this.$config.settings().features.places,
|
||||
hidePrivate: this.$config.settings().features.private,
|
||||
debug: this.$config.get('debug'),
|
||||
@ -226,7 +227,7 @@ export default {
|
||||
methods: {
|
||||
downloadFile(index) {
|
||||
const photo = this.photos[index];
|
||||
const link = document.createElement('a')
|
||||
const link = document.createElement('a');
|
||||
link.href = `/api/v1/dl/${photo.Hash}?t=${this.$config.downloadToken()}`;
|
||||
link.download = photo.FileName;
|
||||
link.click();
|
||||
|
||||
@ -1,17 +1,17 @@
|
||||
<template>
|
||||
<div>
|
||||
<v-container fluid class="pa-0" v-if="selection.length > 0">
|
||||
<v-container v-if="selection.length > 0" fluid class="pa-0">
|
||||
<v-speed-dial
|
||||
fixed bottom right
|
||||
id="t-clipboard" v-model="expanded" fixed
|
||||
bottom
|
||||
right
|
||||
direction="top"
|
||||
v-model="expanded"
|
||||
transition="slide-y-reverse-transition"
|
||||
class="p-clipboard p-photo-clipboard"
|
||||
id="t-clipboard"
|
||||
>
|
||||
<v-btn
|
||||
fab dark
|
||||
slot="activator"
|
||||
slot="activator" fab
|
||||
dark
|
||||
color="accent darken-2"
|
||||
class="action-menu"
|
||||
>
|
||||
@ -20,109 +20,109 @@
|
||||
</v-btn>
|
||||
|
||||
<v-btn
|
||||
fab dark small
|
||||
v-if="context !== 'archive' && context !== 'review' && config.settings.features.share" fab dark
|
||||
small
|
||||
:title="$gettext('Share')"
|
||||
color="share"
|
||||
@click.stop="dialog.share = true"
|
||||
:disabled="selection.length === 0"
|
||||
v-if="context !== 'archive' && context !== 'review' && $config.feature('share')"
|
||||
class="action-share"
|
||||
@click.stop="dialog.share = true"
|
||||
>
|
||||
<v-icon>cloud</v-icon>
|
||||
</v-btn>
|
||||
|
||||
<v-btn
|
||||
fab dark small
|
||||
v-if="context === 'review'" fab dark
|
||||
small
|
||||
:title="$gettext('Approve')"
|
||||
color="share"
|
||||
@click.stop="batchApprove"
|
||||
:disabled="selection.length === 0"
|
||||
v-if="context === 'review'"
|
||||
class="action-approve"
|
||||
@click.stop="batchApprove"
|
||||
>
|
||||
<v-icon>check</v-icon>
|
||||
</v-btn>
|
||||
<v-btn
|
||||
fab dark small
|
||||
v-if="context !== 'archive' && config.settings.features.edit" fab dark
|
||||
small
|
||||
:title="$gettext('Edit')"
|
||||
color="edit"
|
||||
:disabled="selection.length === 0"
|
||||
@click.stop="edit"
|
||||
v-if="context !== 'archive' && $config.feature('edit')"
|
||||
class="action-edit"
|
||||
@click.stop="edit"
|
||||
>
|
||||
<v-icon>edit</v-icon>
|
||||
</v-btn>
|
||||
<v-btn
|
||||
fab dark small
|
||||
v-if="context !== 'archive' && config.settings.features.private" fab dark
|
||||
small
|
||||
:title="$gettext('Change private flag')"
|
||||
color="private"
|
||||
:disabled="selection.length === 0"
|
||||
@click.stop="batchPrivate"
|
||||
v-if="context !== 'archive' && config.settings.features.private"
|
||||
class="action-private"
|
||||
@click.stop="batchPrivate"
|
||||
>
|
||||
<v-icon>lock</v-icon>
|
||||
</v-btn>
|
||||
<v-btn
|
||||
fab dark small
|
||||
v-if="context !== 'archive' && config.settings.features.download" fab dark
|
||||
small
|
||||
:title="$gettext('Download')"
|
||||
color="download"
|
||||
@click.stop="download()"
|
||||
v-if="context !== 'archive' && $config.feature('download')"
|
||||
class="action-download"
|
||||
@click.stop="download()"
|
||||
>
|
||||
<v-icon>get_app</v-icon>
|
||||
</v-btn>
|
||||
<v-btn
|
||||
fab dark small
|
||||
v-if="context !== 'archive'" fab dark
|
||||
small
|
||||
:title="$gettext('Add to album')"
|
||||
color="album"
|
||||
:disabled="selection.length === 0"
|
||||
@click.stop="dialog.album = true"
|
||||
v-if="context !== 'archive'"
|
||||
class="action-album"
|
||||
@click.stop="dialog.album = true"
|
||||
>
|
||||
<v-icon>folder_special</v-icon>
|
||||
</v-btn>
|
||||
<v-btn
|
||||
fab dark small
|
||||
v-if="!isAlbum && context !== 'archive' && config.settings.features.archive" fab dark
|
||||
small
|
||||
color="remove"
|
||||
:title="$gettext('Archive')"
|
||||
@click.stop="dialog.archive = true"
|
||||
:disabled="selection.length === 0"
|
||||
v-if="!isAlbum && context !== 'archive' && $config.feature('archive')"
|
||||
class="action-archive"
|
||||
@click.stop="dialog.archive = true"
|
||||
>
|
||||
<v-icon>archive</v-icon>
|
||||
</v-btn>
|
||||
<v-btn
|
||||
fab dark small
|
||||
v-if="!album && context === 'archive'" fab dark
|
||||
small
|
||||
color="restore"
|
||||
:title="$gettext('Restore')"
|
||||
@click.stop="batchRestorePhotos"
|
||||
:disabled="selection.length === 0"
|
||||
v-if="!album && context === 'archive'"
|
||||
class="action-restore"
|
||||
@click.stop="batchRestorePhotos"
|
||||
>
|
||||
<v-icon>unarchive</v-icon>
|
||||
</v-btn>
|
||||
<v-btn
|
||||
fab dark small
|
||||
v-if="isAlbum" fab dark
|
||||
small
|
||||
:title="$gettext('Remove')"
|
||||
color="remove"
|
||||
@click.stop="removeFromAlbum"
|
||||
:disabled="selection.length === 0"
|
||||
v-if="isAlbum"
|
||||
class="action-delete"
|
||||
@click.stop="removeFromAlbum"
|
||||
>
|
||||
<v-icon>remove</v-icon>
|
||||
</v-btn>
|
||||
<v-btn
|
||||
fab dark small
|
||||
color="accent"
|
||||
@click.stop="clearClipboard()"
|
||||
class="action-clear"
|
||||
@click.stop="clearClipboard()"
|
||||
>
|
||||
<v-icon>clear</v-icon>
|
||||
</v-btn>
|
||||
@ -142,7 +142,7 @@ import Notify from "common/notify";
|
||||
import Event from "pubsub-js";
|
||||
|
||||
export default {
|
||||
name: 'p-photo-clipboard',
|
||||
name: 'PPhotoClipboard',
|
||||
props: {
|
||||
selection: Array,
|
||||
refresh: Function,
|
||||
@ -206,7 +206,7 @@ export default {
|
||||
removeFromAlbum() {
|
||||
if (!this.album) {
|
||||
this.$notify.error(this.$gettext("remove failed: unknown album"));
|
||||
return
|
||||
return;
|
||||
}
|
||||
|
||||
const uid = this.album.UID;
|
||||
@ -231,14 +231,14 @@ export default {
|
||||
},
|
||||
onDownload(path) {
|
||||
Notify.success(this.$gettext("Downloading…"));
|
||||
const link = document.createElement('a')
|
||||
const link = document.createElement('a');
|
||||
link.href = path;
|
||||
link.download = "photos.zip";
|
||||
link.click();
|
||||
},
|
||||
edit() {
|
||||
// Open Edit Dialog
|
||||
Event.publish("dialog.edit", {selection: this.selection, album: this.album, index: 0});
|
||||
Event.PubSub.publish("dialog.edit", {selection: this.selection, album: this.album, index: 0});
|
||||
},
|
||||
onShared() {
|
||||
this.dialog.share = false;
|
||||
|
||||
@ -3,16 +3,16 @@
|
||||
<v-card v-if="photos.length === 0" class="p-photos-empty secondary-light lighten-1 ma-1" flat>
|
||||
<v-card-title primary-title>
|
||||
<div>
|
||||
<h3 class="title ma-0 pa-0" v-if="filter.order === 'edited'">
|
||||
<h3 v-if="filter.order === 'edited'" class="title ma-0 pa-0">
|
||||
<translate>Couldn't find recently edited</translate>
|
||||
</h3>
|
||||
<h3 class="title ma-0 pa-0" v-else>
|
||||
<h3 v-else class="title ma-0 pa-0">
|
||||
<translate>Couldn't find anything</translate>
|
||||
</h3>
|
||||
<p class="mt-4 mb-0 pa-0">
|
||||
<translate>Try again using other filters or keywords.</translate>
|
||||
<translate>If a file you expect is missing, please re-index your library and wait until indexing has been completed.</translate>
|
||||
<template v-if="$config.feature('review')" class="mt-2 mb-0 pa-0">
|
||||
<template v-if="config.settings.features.review" class="mt-2 mb-0 pa-0">
|
||||
<translate>Non-photographic and low-quality images require a review before they appear in search results.</translate>
|
||||
</template>
|
||||
</p>
|
||||
@ -20,13 +20,13 @@
|
||||
</v-card-title>
|
||||
</v-card>
|
||||
<v-data-table v-else
|
||||
v-model="selected"
|
||||
:headers="listColumns"
|
||||
:items="photos"
|
||||
hide-actions
|
||||
class="elevation-0 p-photos p-photo-list p-results"
|
||||
disable-initial-sort
|
||||
item-key="ID"
|
||||
v-model="selected"
|
||||
:no-data-text="notFoundMessage"
|
||||
>
|
||||
<template slot="items" slot-scope="props">
|
||||
@ -48,7 +48,7 @@
|
||||
color="accent lighten-5"></v-progress-circular>
|
||||
</v-layout>
|
||||
|
||||
<v-btn v-if="selection.length && $clipboard.has(props.item)" :ripple="false"
|
||||
<v-btn v-if="selection.length && clipboard.has(props.item)" :ripple="false"
|
||||
flat icon large absolute class="p-photo-select">
|
||||
<v-icon color="white" class="t-select t-on">check_circle</v-icon>
|
||||
</v-btn>
|
||||
@ -61,12 +61,12 @@
|
||||
</v-img>
|
||||
</td>
|
||||
|
||||
<td class="p-photo-desc clickable" :data-uid="props.item.UID" @click.exact="editPhoto(props.index)"
|
||||
style="user-select: none;">
|
||||
<td class="p-photo-desc clickable" :data-uid="props.item.UID" style="user-select: none;"
|
||||
@click.exact="editPhoto(props.index)">
|
||||
{{ props.item.Title }}
|
||||
</td>
|
||||
<td class="p-photo-desc hidden-xs-only" :title="props.item.getDateString()">
|
||||
<button @click.stop.prevent="editPhoto(props.index)" style="user-select: none;">
|
||||
<button style="user-select: none;" @click.stop.prevent="editPhoto(props.index)">
|
||||
{{ props.item.shortDateString() }}
|
||||
</button>
|
||||
</td>
|
||||
@ -76,13 +76,13 @@
|
||||
</button>
|
||||
</td>
|
||||
<td class="p-photo-desc hidden-xs-only">
|
||||
<button @click.exact="downloadFile(props.index)"
|
||||
title="Name" v-if="filter.order === 'name'">
|
||||
<button v-if="filter.order === 'name'"
|
||||
title="Name" @click.exact="downloadFile(props.index)">
|
||||
{{ props.item.FileName }}
|
||||
</button>
|
||||
<button v-else-if="props.item.Country !== 'zz' && showLocation"
|
||||
@click.stop.prevent="openLocation(props.index)"
|
||||
style="user-select: none;">
|
||||
style="user-select: none;"
|
||||
@click.stop.prevent="openLocation(props.index)">
|
||||
{{ props.item.locationInfo() }}
|
||||
</button>
|
||||
<span v-else>
|
||||
@ -91,12 +91,12 @@
|
||||
</td>
|
||||
<td class="text-xs-center">
|
||||
<v-btn v-if="hidePrivate" class="p-photo-private" icon small flat :ripple="false"
|
||||
@click.stop.prevent="props.item.togglePrivate()" :data-uid="props.item.UID">
|
||||
:data-uid="props.item.UID" @click.stop.prevent="props.item.togglePrivate()">
|
||||
<v-icon v-if="props.item.Private" color="secondary-dark">lock</v-icon>
|
||||
<v-icon v-else color="accent lighten-3">lock_open</v-icon>
|
||||
</v-btn>
|
||||
<v-btn class="p-photo-like" icon small flat :ripple="false"
|
||||
@click.stop.prevent="props.item.toggleLike()" :data-uid="props.item.UID">
|
||||
:data-uid="props.item.UID" @click.stop.prevent="props.item.toggleLike()">
|
||||
<v-icon v-if="props.item.Favorite" color="pink lighten-3" :data-uid="props.item.UID">favorite</v-icon>
|
||||
<v-icon v-else color="accent lighten-3" :data-uid="props.item.UID">favorite_border</v-icon>
|
||||
</v-btn>
|
||||
@ -107,7 +107,7 @@
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'p-photo-list',
|
||||
name: 'PPhotoList',
|
||||
props: {
|
||||
photos: Array,
|
||||
selection: Array,
|
||||
@ -127,9 +127,11 @@ export default {
|
||||
m += " " + this.$gettext("Non-photographic and low-quality images require a review before they appear in search results.");
|
||||
}
|
||||
|
||||
let showName = this.filter.order === 'name'
|
||||
let showName = this.filter.order === 'name';
|
||||
|
||||
return {
|
||||
clipboard: this.$clipboard,
|
||||
config: this.$config.values,
|
||||
notFoundMessage: m,
|
||||
'selected': [],
|
||||
'listColumns': [
|
||||
@ -146,8 +148,8 @@ export default {
|
||||
{text: '', value: '', align: 'center', sortable: false},
|
||||
],
|
||||
showName: showName,
|
||||
showLocation: this.$config.settings().features.places,
|
||||
hidePrivate: this.$config.settings().features.private,
|
||||
showLocation: this.$config.values.settings.features.places,
|
||||
hidePrivate: this.$config.values.settings.features.private,
|
||||
mouseDown: {
|
||||
index: -1,
|
||||
timeStamp: -1,
|
||||
@ -158,7 +160,7 @@ export default {
|
||||
photos: function (photos) {
|
||||
this.selected.splice(0);
|
||||
|
||||
for (let i = 0; i <= photos.length; i++) {
|
||||
for (let i = 0; i < photos.length; i++) {
|
||||
if (this.$clipboard.has(photos[i])) {
|
||||
this.selected.push(photos[i]);
|
||||
}
|
||||
@ -168,13 +170,18 @@ export default {
|
||||
this.refreshSelection();
|
||||
},
|
||||
},
|
||||
mounted: function () {
|
||||
this.$nextTick(function () {
|
||||
this.refreshSelection();
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
downloadFile(index) {
|
||||
const photo = this.photos[index];
|
||||
const link = document.createElement('a')
|
||||
const link = document.createElement('a');
|
||||
link.href = `/api/v1/dl/${photo.Hash}?t=${this.$config.downloadToken()}`;
|
||||
link.download = photo.FileName;
|
||||
link.click()
|
||||
link.click();
|
||||
},
|
||||
onSelect(ev, index) {
|
||||
if (ev.shiftKey) {
|
||||
@ -219,17 +226,12 @@ export default {
|
||||
refreshSelection() {
|
||||
this.selected.splice(0);
|
||||
|
||||
for (let i = 0; i <= this.photos.length; i++) {
|
||||
for (let i = 0; i < this.photos.length; i++) {
|
||||
if (this.$clipboard.has(this.photos[i])) {
|
||||
this.selected.push(this.photos[i]);
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted: function () {
|
||||
this.$nextTick(function () {
|
||||
this.refreshSelection();
|
||||
})
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -3,10 +3,10 @@
|
||||
<v-card v-if="photos.length === 0" class="p-photos-empty secondary-light lighten-1 ma-1" flat>
|
||||
<v-card-title primary-title>
|
||||
<div>
|
||||
<h3 class="title ma-0 pa-0" v-if="filter.order === 'edited'">
|
||||
<h3 v-if="filter.order === 'edited'" class="title ma-0 pa-0">
|
||||
<translate>Couldn't find recently edited</translate>
|
||||
</h3>
|
||||
<h3 class="title ma-0 pa-0" v-else>
|
||||
<h3 v-else class="title ma-0 pa-0">
|
||||
<translate>Couldn't find anything</translate>
|
||||
</h3>
|
||||
<p class="mt-4 mb-0 pa-0">
|
||||
@ -24,15 +24,15 @@
|
||||
v-for="(photo, index) in photos"
|
||||
:key="index"
|
||||
:data-uid="photo.UID"
|
||||
v-bind:class="{ selected: $clipboard.has(photo), portrait: photo.Portrait }"
|
||||
:class="{ selected: $clipboard.has(photo), portrait: photo.Portrait }"
|
||||
class="p-photo"
|
||||
xs4 sm3 md2 lg1 d-flex
|
||||
>
|
||||
<v-hover>
|
||||
<v-card tile slot-scope="{ hover }"
|
||||
@contextmenu="onContextMenu($event, index)"
|
||||
<v-card slot-scope="{ hover }" tile
|
||||
:class="$clipboard.has(photo) ? 'elevation-10 ma-0' : 'elevation-0 ma-1'"
|
||||
:title="photo.Title">
|
||||
:title="photo.Title"
|
||||
@contextmenu="onContextMenu($event, index)">
|
||||
<v-img :src="photo.thumbnailUrl('tile_224')"
|
||||
aspect-ratio="1"
|
||||
class="accent lighten-2 clickable"
|
||||
@ -51,16 +51,16 @@
|
||||
</v-layout>
|
||||
|
||||
<v-layout
|
||||
v-if="photo.Type === 'live'"
|
||||
v-show="hover"
|
||||
fill-height
|
||||
align-center
|
||||
justify-center
|
||||
ma-0
|
||||
class="live-player"
|
||||
style="overflow: hidden;"
|
||||
v-if="photo.Type === 'live'"
|
||||
v-show="hover"
|
||||
>
|
||||
<video width="224" height="224" autoplay loop muted playsinline :key="photo.videoUrl()">
|
||||
<video :key="photo.videoUrl()" width="224" height="224" autoplay loop muted playsinline>
|
||||
<source :src="photo.videoUrl()" type="video/mp4">
|
||||
</video>
|
||||
</v-layout>
|
||||
@ -92,12 +92,12 @@
|
||||
<template v-if="photo.isPlayable()">
|
||||
<v-btn v-if="photo.Type === 'live'" color="white"
|
||||
icon flat small absolute class="p-photo-live opacity-75" :depressed="false" :ripple="false"
|
||||
@click.stop.prevent="openPhoto(index, true)" title="Live Photo">
|
||||
title="Live Photo" @click.stop.prevent="openPhoto(index, true)">
|
||||
<v-icon color="white" class="action-play">adjust</v-icon>
|
||||
</v-btn>
|
||||
<v-btn v-else color="white"
|
||||
outline fab absolute class="p-photo-play opacity-75" :depressed="false" :ripple="false"
|
||||
@click.stop.prevent="openPhoto(index, true)" title="Play">
|
||||
title="Play" @click.stop.prevent="openPhoto(index, true)">
|
||||
<v-icon color="white" class="action-play">play_arrow</v-icon>
|
||||
</v-btn>
|
||||
</template>
|
||||
@ -113,7 +113,7 @@
|
||||
</v-btn>
|
||||
<v-btn v-else-if="photo.Type === 'raw'" :ripple="false"
|
||||
icon flat small absolute class="p-photo-merged opacity-75"
|
||||
@click.stop.prevent="openPhoto(index, true)" title="RAW">
|
||||
title="RAW" @click.stop.prevent="openPhoto(index, true)">
|
||||
<v-icon color="white" class="action-burst">photo_camera</v-icon>
|
||||
</v-btn>
|
||||
</v-img>
|
||||
@ -125,7 +125,7 @@
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'p-photo-mosaic',
|
||||
name: 'PPhotoMosaic',
|
||||
props: {
|
||||
photos: Array,
|
||||
selection: Array,
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
<template>
|
||||
<v-form lazy-validation dense
|
||||
ref="form" autocomplete="off" class="p-photo-toolbar" accept-charset="UTF-8"
|
||||
<v-form ref="form" lazy-validation
|
||||
dense autocomplete="off" class="p-photo-toolbar" accept-charset="UTF-8"
|
||||
@submit.prevent="filterChange">
|
||||
<v-toolbar :dense="$vuetify.breakpoint.smAndDown" flat color="secondary">
|
||||
<v-text-field class="pt-3 pr-3 input-search"
|
||||
<v-text-field v-model="filter.q"
|
||||
class="pt-3 pr-3 input-search"
|
||||
browser-autocomplete="off"
|
||||
single-line
|
||||
:label="$gettext('Search')"
|
||||
@ -11,106 +12,105 @@
|
||||
clearable
|
||||
color="secondary-dark"
|
||||
@click:clear="clearQuery"
|
||||
v-model="filter.q"
|
||||
@keyup.enter.native="filterChange"
|
||||
></v-text-field>
|
||||
|
||||
<v-spacer></v-spacer>
|
||||
|
||||
<v-btn icon @click.stop="refresh" class="hidden-xs-only action-reload" :title="$gettext('Reload')">
|
||||
<v-btn icon class="hidden-xs-only action-reload" :title="$gettext('Reload')" @click.stop="refresh">
|
||||
<v-icon>refresh</v-icon>
|
||||
</v-btn>
|
||||
|
||||
<v-btn icon v-if="settings.view === 'cards'" @click.stop="setView('list')" :title="$gettext('Toggle View')">
|
||||
<v-btn v-if="settings.view === 'cards'" icon :title="$gettext('Toggle View')" @click.stop="setView('list')">
|
||||
<v-icon>view_list</v-icon>
|
||||
</v-btn>
|
||||
<v-btn icon v-else-if="settings.view === 'list'" @click.stop="setView('mosaic')" :title="$gettext('Toggle View')">
|
||||
<v-btn v-else-if="settings.view === 'list'" icon :title="$gettext('Toggle View')" @click.stop="setView('mosaic')">
|
||||
<v-icon>view_comfy</v-icon>
|
||||
</v-btn>
|
||||
<v-btn icon v-else @click.stop="setView('cards')" :title="$gettext('Toggle View')">
|
||||
<v-btn v-else icon :title="$gettext('Toggle View')" @click.stop="setView('cards')">
|
||||
<v-icon>view_column</v-icon>
|
||||
</v-btn>
|
||||
|
||||
<v-btn icon @click.stop="showUpload()" v-if="!$config.values.readonly && $config.feature('upload')"
|
||||
class="hidden-sm-and-down action-upload" :title="$gettext('Upload')">
|
||||
<v-btn v-if="!$config.values.readonly && $config.feature('upload')" icon class="hidden-sm-and-down action-upload"
|
||||
:title="$gettext('Upload')" @click.stop="showUpload()">
|
||||
<v-icon>cloud_upload</v-icon>
|
||||
</v-btn>
|
||||
|
||||
<v-btn icon @click.stop="searchExpanded = !searchExpanded" class="p-expand-search"
|
||||
:title="$gettext('Expand Search')">
|
||||
<v-btn icon class="p-expand-search" :title="$gettext('Expand Search')"
|
||||
@click.stop="searchExpanded = !searchExpanded">
|
||||
<v-icon>{{ searchExpanded ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}</v-icon>
|
||||
</v-btn>
|
||||
</v-toolbar>
|
||||
|
||||
<v-card class="pt-1"
|
||||
<v-card v-show="searchExpanded"
|
||||
class="pt-1"
|
||||
flat
|
||||
color="secondary-light"
|
||||
v-show="searchExpanded">
|
||||
color="secondary-light">
|
||||
<v-card-text>
|
||||
<v-layout row wrap>
|
||||
<v-flex xs12 sm6 md3 pa-2 class="p-countries-select">
|
||||
<v-select @change="dropdownChange"
|
||||
<v-select v-model="filter.country"
|
||||
:label="$gettext('Country')"
|
||||
flat solo hide-details
|
||||
color="secondary-dark"
|
||||
item-value="ID"
|
||||
item-text="Name"
|
||||
v-model="filter.country"
|
||||
:items="countryOptions"
|
||||
class="input-countries"
|
||||
@change="dropdownChange"
|
||||
>
|
||||
</v-select>
|
||||
</v-flex>
|
||||
<v-flex xs12 sm6 md3 pa-2 class="p-camera-select">
|
||||
<v-select @change="dropdownChange"
|
||||
<v-select v-model="filter.camera"
|
||||
:label="$gettext('Camera')"
|
||||
flat solo hide-details
|
||||
color="secondary-dark"
|
||||
item-value="ID"
|
||||
item-text="Name"
|
||||
v-model="filter.camera"
|
||||
:items="cameraOptions">
|
||||
:items="cameraOptions"
|
||||
@change="dropdownChange">
|
||||
</v-select>
|
||||
</v-flex>
|
||||
<v-flex xs12 sm6 md3 pa-2 class="p-view-select">
|
||||
<v-select @change="dropdownChange"
|
||||
:label="$gettext('View')"
|
||||
flat solo hide-details
|
||||
color="secondary-dark"
|
||||
<v-select id="viewSelect"
|
||||
v-model="settings.view"
|
||||
:label="$gettext('View')" flat solo
|
||||
hide-details
|
||||
color="secondary-dark"
|
||||
:items="options.views"
|
||||
id="viewSelect">
|
||||
@change="dropdownChange">
|
||||
</v-select>
|
||||
</v-flex>
|
||||
<v-flex xs12 sm6 md3 pa-2 class="p-time-select">
|
||||
<v-select @change="dropdownChange"
|
||||
<v-select v-model="filter.order"
|
||||
:label="$gettext('Sort Order')"
|
||||
flat solo hide-details
|
||||
color="secondary-dark"
|
||||
v-model="filter.order"
|
||||
:items="options.sorting">
|
||||
:items="options.sorting"
|
||||
@change="dropdownChange">
|
||||
</v-select>
|
||||
</v-flex>
|
||||
<v-flex xs12 sm6 md3 pa-2 class="p-year-select">
|
||||
<v-select @change="dropdownChange"
|
||||
<v-select v-model="filter.year"
|
||||
:label="$gettext('Year')"
|
||||
flat solo hide-details
|
||||
color="secondary-dark"
|
||||
item-value="value"
|
||||
item-text="text"
|
||||
v-model="filter.year"
|
||||
:items="yearOptions()">
|
||||
:items="yearOptions()"
|
||||
@change="dropdownChange">
|
||||
</v-select>
|
||||
</v-flex>
|
||||
<v-flex xs12 sm6 md3 pa-2 class="p-month-select">
|
||||
<v-select @change="dropdownChange"
|
||||
<v-select v-model="filter.month"
|
||||
:label="$gettext('Month')"
|
||||
flat solo hide-details
|
||||
color="secondary-dark"
|
||||
item-value="value"
|
||||
item-text="text"
|
||||
v-model="filter.month"
|
||||
:items="monthOptions()">
|
||||
:items="monthOptions()"
|
||||
@change="dropdownChange">
|
||||
</v-select>
|
||||
</v-flex>
|
||||
<!-- v-flex xs12 sm6 md3 pa-2 class="p-lens-select">
|
||||
@ -125,25 +125,25 @@
|
||||
</v-select>
|
||||
</v-flex -->
|
||||
<v-flex xs12 sm6 md3 pa-2 class="p-color-select">
|
||||
<v-select @change="dropdownChange"
|
||||
<v-select v-model="filter.color"
|
||||
:label="$gettext('Color')"
|
||||
flat solo hide-details
|
||||
color="secondary-dark"
|
||||
item-value="Slug"
|
||||
item-text="Name"
|
||||
v-model="filter.color"
|
||||
:items="colorOptions()">
|
||||
:items="colorOptions()"
|
||||
@change="dropdownChange">
|
||||
</v-select>
|
||||
</v-flex>
|
||||
<v-flex xs12 sm6 md3 pa-2 class="p-category-select">
|
||||
<v-select @change="dropdownChange"
|
||||
<v-select v-model="filter.label"
|
||||
:label="$gettext('Category')"
|
||||
flat solo hide-details
|
||||
color="secondary-dark"
|
||||
item-value="Slug"
|
||||
item-text="Name"
|
||||
v-model="filter.label"
|
||||
:items="categoryOptions">
|
||||
:items="categoryOptions"
|
||||
@change="dropdownChange">
|
||||
</v-select>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
@ -156,7 +156,7 @@ import Event from "pubsub-js";
|
||||
import * as options from "options/options";
|
||||
|
||||
export default {
|
||||
name: 'p-photo-toolbar',
|
||||
name: 'PPhotoToolbar',
|
||||
props: {
|
||||
dirty: Boolean,
|
||||
filter: Object,
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<div id="p-photo-viewer" class="p-viewer pswp" tabindex="-1" role="dialog" aria-hidden="true">
|
||||
<div class="pswp__bg"></div>
|
||||
<div class="pswp__scroll-wrap">
|
||||
<div class="pswp__container" v-bind:class="{ 'slideshow': slideshow.active }">
|
||||
<div class="pswp__container" :class="{ 'slideshow': slideshow.active }">
|
||||
<div class="pswp__item"></div>
|
||||
<div class="pswp__item"></div>
|
||||
<div class="pswp__item"></div>
|
||||
@ -17,24 +17,24 @@
|
||||
|
||||
<button class="pswp__button pswp__button--close action-close" :title="$gettext('Close')"></button>
|
||||
|
||||
<button class="pswp__button action-download" style="background: none;" @click.exact="onDownload"
|
||||
:title="$gettext('Download')" v-if="config.settings.features.download">
|
||||
<button v-if="config.settings.features.download" class="pswp__button action-download" style="background: none;"
|
||||
:title="$gettext('Download')" @click.exact="onDownload">
|
||||
<v-icon size="16" color="white">get_app</v-icon>
|
||||
</button>
|
||||
|
||||
<button class="pswp__button action-edit hidden-shared-only" style="background: none;" @click.exact="onEdit"
|
||||
:title="$gettext('Edit')">
|
||||
<button class="pswp__button action-edit hidden-shared-only" style="background: none;" :title="$gettext('Edit')"
|
||||
@click.exact="onEdit">
|
||||
<v-icon size="16" color="white">edit</v-icon>
|
||||
</button>
|
||||
|
||||
<button class="pswp__button action-select" style="background: none;"
|
||||
@click.exact="onSelect" :title="$gettext('Select')">
|
||||
:title="$gettext('Select')" @click.exact="onSelect">
|
||||
<v-icon v-if="selection.length && $clipboard.has(item)" size="16" color="white">check_circle</v-icon>
|
||||
<v-icon v-else size="16" color="white">radio_button_off</v-icon>
|
||||
</button>
|
||||
|
||||
<button class="pswp__button action-like hidden-shared-only" style="background: none;"
|
||||
@click.exact="onLike" :title="$gettext('Like')">
|
||||
:title="$gettext('Like')" @click.exact="onLike">
|
||||
<v-icon v-if="item.favorite" size="16" color="white">favorite</v-icon>
|
||||
<v-icon v-else size="16" color="white">favorite_border</v-icon>
|
||||
</button>
|
||||
@ -44,8 +44,8 @@
|
||||
|
||||
<button class="pswp__button pswp__button--zoom action-zoom" :title="$gettext('Zoom in/out')"></button>
|
||||
|
||||
<button class="pswp__button" style="background: none;" @click.exact="onSlideshow"
|
||||
:title="$gettext('Start/Stop Slideshow')">
|
||||
<button class="pswp__button" style="background: none;" :title="$gettext('Start/Stop Slideshow')"
|
||||
@click.exact="onSlideshow">
|
||||
<v-icon v-show="!interval" size="18" color="white">play_arrow</v-icon>
|
||||
<v-icon v-show="interval" size="16" color="white">pause</v-icon>
|
||||
</button>
|
||||
@ -79,15 +79,15 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import 'photoswipe/dist/photoswipe.css'
|
||||
import 'photoswipe/dist/default-skin/default-skin.css'
|
||||
import 'photoswipe/dist/photoswipe.css';
|
||||
import 'photoswipe/dist/default-skin/default-skin.css';
|
||||
import Event from "pubsub-js";
|
||||
import Thumb from "model/thumb";
|
||||
import Photo from "model/photo";
|
||||
import Notify from "common/notify";
|
||||
|
||||
export default {
|
||||
name: "p-photo-viewer",
|
||||
name: "PPhotoViewer",
|
||||
data() {
|
||||
return {
|
||||
selection: this.$clipboard.selection,
|
||||
@ -202,7 +202,7 @@ export default {
|
||||
index = i;
|
||||
}
|
||||
|
||||
return p.uid
|
||||
return p.uid;
|
||||
});
|
||||
|
||||
let album = null;
|
||||
@ -212,5 +212,5 @@ export default {
|
||||
Event.publish("dialog.edit", {selection, album, index}); // Open Edit Dialog
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -133,7 +133,7 @@ export default {
|
||||
photos: function (photos) {
|
||||
this.selected.splice(0);
|
||||
|
||||
for (let i = 0; i <= photos.length; i++) {
|
||||
for (let i = 0; i < photos.length; i++) {
|
||||
if (this.$clipboard.has(photos[i])) {
|
||||
this.selected.push(photos[i]);
|
||||
}
|
||||
@ -194,7 +194,7 @@ export default {
|
||||
refreshSelection() {
|
||||
this.selected.splice(0);
|
||||
|
||||
for (let i = 0; i <= this.photos.length; i++) {
|
||||
for (let i = 0; i < this.photos.length; i++) {
|
||||
if (this.$clipboard.has(this.photos[i])) {
|
||||
this.selected.push(this.photos[i]);
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user