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

Frontend: Improve list view selection

Browse source 
Signed-off-by: Michael Mayer <michael@liquidbytes.net>
This commit is contained in:
Michael Mayer 2020-04-16 16:50:54 +02:00
parent 34143840aa
commit 43b56b34e6
2 changed files with 25 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
frontend/src/component/p-photo-list.vue
View file

@ -10,10 +10,9 @@
:no-data-text="this.$gettext('No photos matched your search')"
>
<template slot="items" slot-scope="props">
<td>
<td @click.exact="toggleSelection(props)">
<v-img class="accent lighten-2" style="cursor: pointer" aspect-ratio="1"
:src="props.item.getThumbnailUrl('tile_50')"
@click.exact="openPhoto(props.index)"
>
<v-layout
slot="placeholder"
@ -25,11 +24,31 @@
<v-progress-circular indeterminate
color="accent lighten-5"></v-progress-circular>
</v-layout>
<v-btn v-if="selection.length > 0" :flat="true" :ripple="false"
icon large absolute
class="p-photo-select"
@click.shift.prevent="$clipboard.addRange(props.index, photos)"
@click.exact.stop.prevent="$clipboard.toggle(props.item)">
<v-icon v-if="selection.length && $clipboard.has(props.item)" color="white"
class="t-select t-on">check_circle
</v-icon>
</v-btn>
</v-img>
</td>
<td class="p-photo-desc p-pointer" @click.exact="toggleSelection(props)">
<td class="p-photo-desc p-pointer" @click.exact="openPhoto(props.index)">
{{ props.item.PhotoTitle }}
</td>
<td class="p-photo-desc hidden-xs-only" :title="props.item.TakenAt | luxon:format('dd/MM/yyyy HH:mm:ss')">
<button @click.stop.prevent="editPhoto(props.index)">
{{ props.item.TakenAt | luxon:locale }}
</button>
</td>
<td class="p-photo-desc hidden-sm-and-down">
<button @click.stop.prevent="editPhoto(props.index)">
{{ props.item.CameraMake }} {{ props.item.CameraModel }}
</button>
</td>
<td class="p-photo-desc hidden-xs-only">
<button v-if="props.item.LocationID && places" @click.stop.prevent="openLocation(props.index)">
{{ props.item.getLocation() }}
@ -38,16 +57,6 @@
{{ props.item.getLocation() }}
</span>
</td>
<td class="p-photo-desc hidden-sm-and-down">
<button @click.stop.prevent="editPhoto(props.index)">
{{ props.item.CameraMake }} {{ props.item.CameraModel }}
</button>
</td>
<td class="p-photo-desc hidden-xs-only" :title="props.item.TakenAt | luxon:format('dd/MM/yyyy HH:mm:ss')">
<button @click.stop.prevent="editPhoto(props.index)">
{{ props.item.TakenAt | luxon:locale }}
</button>
</td>
<td>
<v-btn class="p-photo-like" icon small flat :ripple="false"
@click.stop.prevent="props.item.toggleLike()">
@ -75,9 +84,9 @@
'listColumns': [
{text: '', value: '', align: 'center', sortable: false, class: 'p-col-select'},
{text: this.$gettext('Title'), value: 'PhotoTitle'},
{text: this.$gettext('Location'), class: 'hidden-xs-only', value: 'LocLabel'},
{text: this.$gettext('Camera'), class: 'hidden-sm-and-down', value: 'CameraModel'},
{text: this.$gettext('Taken'), class: 'hidden-xs-only', value: 'TakenAt'},
{text: this.$gettext('Camera'), class: 'hidden-sm-and-down', value: 'CameraModel'},
{text: this.$gettext('Location'), class: 'hidden-xs-only', value: 'LocLabel'},
{text: this.$gettext('Favorite'), value: 'PhotoFavorite', align: 'left'},
],
places: this.$config.settings().features.places,

3
frontend/src/css/photos.css
View file

@ -8,8 +8,7 @@
}
#photoprism .p-photo-list .p-photo-select {
margin-left: 0;
margin-right: 0;
top: 7px; left: 7px;
}
#photoprism .p-photo-tiles .p-photo-edit,