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