Frontend: Photos view UX and clean-up
Signed-off-by: Michael Mayer <michael@liquidbytes.net>
This commit is contained in:
parent
a8c48ab40e
commit
6d6d668cb0
|
@ -31,7 +31,7 @@
|
||||||
@click.stop="dialog.share = true"
|
@click.stop="dialog.share = true"
|
||||||
:disabled="selection.length === 0"
|
:disabled="selection.length === 0"
|
||||||
v-if="context !== 'archive'"
|
v-if="context !== 'archive'"
|
||||||
class="p-photo-clipboard-private"
|
class="p-photo-clipboard-share"
|
||||||
>
|
>
|
||||||
<v-icon>share</v-icon>
|
<v-icon>share</v-icon>
|
||||||
</v-btn>
|
</v-btn>
|
||||||
|
|
|
@ -68,10 +68,7 @@
|
||||||
<h3 class="body-2 mb-2" :title="photo.PhotoTitle">
|
<h3 class="body-2 mb-2" :title="photo.PhotoTitle">
|
||||||
<button @click.exact="editPhoto(index)">
|
<button @click.exact="editPhoto(index)">
|
||||||
{{ photo.PhotoTitle | truncate(80) }}
|
{{ photo.PhotoTitle | truncate(80) }}
|
||||||
<v-icon v-if="photo.PhotoPrivate" size="16" title="Private">vpn_key</v-icon>
|
<v-icon v-if="hover" size="16" title="edit">edit</v-icon>
|
||||||
<v-icon v-if="photo.PhotoStory" size="16"
|
|
||||||
title="Shared with your friends in the story feed">wifi
|
|
||||||
</v-icon>
|
|
||||||
</button>
|
</button>
|
||||||
</h3>
|
</h3>
|
||||||
<div class="caption">
|
<div class="caption">
|
||||||
|
|
|
@ -9,21 +9,35 @@
|
||||||
v-model="selected"
|
v-model="selected"
|
||||||
:no-data-text="this.$gettext('No photos matched your search')"
|
:no-data-text="this.$gettext('No photos matched your search')"
|
||||||
>
|
>
|
||||||
<template slot="items" slot-scope="props" class="p-photo">
|
<template slot="items" slot-scope="props">
|
||||||
<td>
|
<td>
|
||||||
<v-btn icon small :ripple="false"
|
<v-img :src="props.item.getThumbnailUrl('tile_50')"
|
||||||
class="p-photo-select"
|
aspect-ratio="1"
|
||||||
@click.stop.prevent="$clipboard.toggle(props.item)">
|
class="accent lighten-2"
|
||||||
<v-icon v-if="selection.length && $clipboard.has(props.item)" color="accent darken-2">check_circle</v-icon>
|
style="cursor: pointer"
|
||||||
<v-icon v-else-if="!$clipboard.has(props.item)" color="accent lighten-4">radio_button_off</v-icon>
|
@click.exact="openPhoto(props.index)"
|
||||||
</v-btn>
|
>
|
||||||
|
<v-layout
|
||||||
|
slot="placeholder"
|
||||||
|
fill-height
|
||||||
|
align-center
|
||||||
|
justify-center
|
||||||
|
ma-0
|
||||||
|
>
|
||||||
|
<v-progress-circular indeterminate
|
||||||
|
color="accent lighten-5"></v-progress-circular>
|
||||||
|
</v-layout>
|
||||||
|
</v-img>
|
||||||
</td>
|
</td>
|
||||||
<td class="p-photo-desc">
|
<td class="p-photo-desc" @click.exact="toggleSelection(props)">
|
||||||
<button @click.stop.prevent="openPhoto(props.index)">
|
<v-hover>
|
||||||
|
<button @click.stop.prevent="editPhoto(props.index)" slot-scope="{ hover }">
|
||||||
{{ props.item.PhotoTitle }}
|
{{ props.item.PhotoTitle }}
|
||||||
|
<v-icon v-if="hover" size="16" title="edit">edit</v-icon>
|
||||||
</button>
|
</button>
|
||||||
|
</v-hover>
|
||||||
</td>
|
</td>
|
||||||
<td class="hidden-xs-only p-photo-desc">
|
<td class="hidden-xs-only p-photo-desc" @click.exact="toggleSelection(props)">
|
||||||
<button v-if="props.item.LocationID" @click.stop.prevent="openLocation(props.index)">
|
<button v-if="props.item.LocationID" @click.stop.prevent="openLocation(props.index)">
|
||||||
{{ props.item.getLocation() }}
|
{{ props.item.getLocation() }}
|
||||||
</button>
|
</button>
|
||||||
|
@ -31,7 +45,7 @@
|
||||||
{{ props.item.getLocation() }}
|
{{ props.item.getLocation() }}
|
||||||
</span>
|
</span>
|
||||||
</td>
|
</td>
|
||||||
<td class="hidden-sm-and-down p-photo-desc">
|
<td class="hidden-sm-and-down p-photo-desc" @click.exact="toggleSelection(props)">
|
||||||
<button @click.stop.prevent="editPhoto(props.index)">
|
<button @click.stop.prevent="editPhoto(props.index)">
|
||||||
{{ props.item.CameraMake }} {{ props.item.CameraModel }}
|
{{ props.item.CameraMake }} {{ props.item.CameraModel }}
|
||||||
</button>
|
</button>
|
||||||
|
@ -41,7 +55,8 @@
|
||||||
{{ props.item.TakenAt | luxon:locale }}
|
{{ props.item.TakenAt | luxon:locale }}
|
||||||
</button>
|
</button>
|
||||||
</td>
|
</td>
|
||||||
<td><v-btn icon small flat :ripple="false"
|
<td>
|
||||||
|
<v-btn icon small flat :ripple="false"
|
||||||
class="p-photo-like"
|
class="p-photo-like"
|
||||||
@click.stop.prevent="props.item.toggleLike()">
|
@click.stop.prevent="props.item.toggleLike()">
|
||||||
<v-icon v-if="props.item.PhotoFavorite" color="pink lighten-3">favorite</v-icon>
|
<v-icon v-if="props.item.PhotoFavorite" color="pink lighten-3">favorite</v-icon>
|
||||||
|
@ -75,7 +90,31 @@
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
watch: {
|
||||||
|
photos: function (photos) {
|
||||||
|
this.selected.splice(0);
|
||||||
|
|
||||||
|
for (let i = 0; i <= photos.length; i++) {
|
||||||
|
if(this.$clipboard.has(photos[i])) {
|
||||||
|
this.selected.push(photos[i]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
selection: function () {
|
||||||
|
this.selected.splice(0);
|
||||||
|
|
||||||
|
for (let i = 0; i <= this.photos.length; i++) {
|
||||||
|
if(this.$clipboard.has(this.photos[i])) {
|
||||||
|
this.selected.push(this.photos[i]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
toggleSelection(props) {
|
||||||
|
this.$clipboard.toggle(props.item);
|
||||||
|
props.selected = this.$clipboard.has(props.item);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -53,6 +53,13 @@
|
||||||
<v-icon v-if="photo.PhotoFavorite" color="white" class="t-like t-on">favorite</v-icon>
|
<v-icon v-if="photo.PhotoFavorite" color="white" class="t-like t-on">favorite</v-icon>
|
||||||
<v-icon v-else color="accent lighten-3" class="t-like t-off">favorite_border</v-icon>
|
<v-icon v-else color="accent lighten-3" class="t-like t-off">favorite_border</v-icon>
|
||||||
</v-btn>
|
</v-btn>
|
||||||
|
|
||||||
|
<v-btn v-if="hover" :flat="!hover" :ripple="false"
|
||||||
|
icon small absolute
|
||||||
|
class="p-photo-edit"
|
||||||
|
@click.stop.prevent="editPhoto(index)">
|
||||||
|
<v-icon color="white">edit</v-icon>
|
||||||
|
</v-btn>
|
||||||
</v-img>
|
</v-img>
|
||||||
|
|
||||||
</v-card>
|
</v-card>
|
||||||
|
@ -68,6 +75,7 @@
|
||||||
photos: Array,
|
photos: Array,
|
||||||
selection: Array,
|
selection: Array,
|
||||||
openPhoto: Function,
|
openPhoto: Function,
|
||||||
|
editPhoto: Function,
|
||||||
album: Object,
|
album: Object,
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
|
|
@ -1,9 +1,9 @@
|
||||||
#photoprism .p-col-select {
|
#photoprism .p-col-select {
|
||||||
width: 50px;
|
width: 66px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#photoprism .p-photo-list tr td:first-child {
|
#photoprism .p-photo-list tr td:first-child {
|
||||||
padding: 0 0 0 16px;
|
padding: 0 0 0 8px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -12,6 +12,12 @@
|
||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#photoprism .p-photo-tiles .p-photo-edit,
|
||||||
|
#photoprism .p-photo-mosaic .p-photo-edit,
|
||||||
|
#photoprism .p-photo-details .p-photo-edit {
|
||||||
|
top: 4px; right: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
#photoprism .p-photo-tiles .p-photo-like,
|
#photoprism .p-photo-tiles .p-photo-like,
|
||||||
#photoprism .p-photo-mosaic .p-photo-like,
|
#photoprism .p-photo-mosaic .p-photo-like,
|
||||||
#photoprism .p-photo-details .p-photo-like {
|
#photoprism .p-photo-details .p-photo-like {
|
||||||
|
|
|
@ -19,6 +19,7 @@
|
||||||
:photos="results"
|
:photos="results"
|
||||||
:selection="selection"
|
:selection="selection"
|
||||||
:album="model"
|
:album="model"
|
||||||
|
:edit-photo="editPhoto"
|
||||||
:open-photo="openPhoto"></p-photo-mosaic>
|
:open-photo="openPhoto"></p-photo-mosaic>
|
||||||
<p-photo-list v-else-if="settings.view === 'list'"
|
<p-photo-list v-else-if="settings.view === 'list'"
|
||||||
:photos="results"
|
:photos="results"
|
||||||
|
|
|
@ -16,6 +16,7 @@
|
||||||
<p-photo-mosaic v-if="settings.view === 'mosaic'"
|
<p-photo-mosaic v-if="settings.view === 'mosaic'"
|
||||||
:photos="results"
|
:photos="results"
|
||||||
:selection="selection"
|
:selection="selection"
|
||||||
|
:edit-photo="editPhoto"
|
||||||
:open-photo="openPhoto"></p-photo-mosaic>
|
:open-photo="openPhoto"></p-photo-mosaic>
|
||||||
<p-photo-list v-else-if="settings.view === 'list'"
|
<p-photo-list v-else-if="settings.view === 'list'"
|
||||||
:photos="results"
|
:photos="results"
|
||||||
|
|
Loading…
Reference in a new issue