Frontend: Show thumbnail in the Labels tab of the edit dialog (#3532)
This commit is contained in:
Reuben Dowle
GitHub
parent
84a4c3c57e
commit
3d828a7df0
1 changed files with 103 additions and 78 deletions
|
|
@ -1,93 +1,115 @@
|
|||
<template>
|
||||
<div class="p-tab p-tab-photo-labels">
|
||||
<v-data-table
|
||||
v-model="selected"
|
||||
:headers="listColumns"
|
||||
:items="model.Labels"
|
||||
hide-actions
|
||||
class="elevation-0 p-files p-files-list p-results"
|
||||
disable-initial-sort
|
||||
item-key="ID"
|
||||
:no-data-text="$gettext('No labels found')"
|
||||
>
|
||||
<template #items="props" class="p-file">
|
||||
<td>
|
||||
<v-edit-dialog
|
||||
:return-value.sync="props.item.Label.Name"
|
||||
lazy
|
||||
class="p-inline-edit"
|
||||
@save="renameLabel(props.item.Label)"
|
||||
<v-layout row wrap align-top fill-height>
|
||||
<v-flex
|
||||
v-if="!$isMobile"
|
||||
class="p-photo pa-2"
|
||||
xs12 sm4 md2
|
||||
>
|
||||
<v-card tile
|
||||
class="ma-0 elevation-0"
|
||||
:title="model.Title">
|
||||
<v-img :src="model.thumbnailUrl('tile_500')"
|
||||
aspect-ratio="1"
|
||||
class="card darken-1 elevation-0 clickable"
|
||||
@click.exact="openPhoto()"
|
||||
>
|
||||
{{ props.item.Label.Name }}
|
||||
<template #input>
|
||||
</v-img>
|
||||
|
||||
</v-card>
|
||||
</v-flex>
|
||||
<v-flex xs12 sm8 md10 fill-height fill-width>
|
||||
<v-data-table
|
||||
v-model="selected"
|
||||
:headers="listColumns"
|
||||
:items="model.Labels"
|
||||
hide-actions
|
||||
class="elevation-0 p-files p-files-list p-results"
|
||||
disable-initial-sort
|
||||
item-key="ID"
|
||||
:no-data-text="$gettext('No labels found')"
|
||||
>
|
||||
<template #items="props" class="p-file">
|
||||
<td>
|
||||
<v-edit-dialog
|
||||
:return-value.sync="props.item.Label.Name"
|
||||
lazy
|
||||
class="p-inline-edit"
|
||||
@save="renameLabel(props.item.Label)"
|
||||
>
|
||||
{{ props.item.Label.Name }}
|
||||
<template #input>
|
||||
<v-text-field
|
||||
v-model="props.item.Label.Name"
|
||||
:rules="[nameRule]"
|
||||
:label="$gettext('Name')"
|
||||
color="secondary-dark"
|
||||
class="input-rename background-inherit elevation-0"
|
||||
single-line autofocus solo hide-details
|
||||
></v-text-field>
|
||||
</template>
|
||||
</v-edit-dialog>
|
||||
</td>
|
||||
<td class="text-xs-left">{{ sourceName(props.item.LabelSrc) }}</td>
|
||||
<td class="text-xs-center">{{ 100 - props.item.Uncertainty }}%</td>
|
||||
<td class="text-xs-center">
|
||||
<v-btn v-if="disabled" icon small flat :ripple="false"
|
||||
class="action-view" title="Search"
|
||||
@click.stop.prevent="searchLabel(props.item.Label)">
|
||||
<v-icon color="secondary-dark">search</v-icon>
|
||||
</v-btn>
|
||||
<v-btn v-else-if="props.item.Uncertainty < 100 && props.item.LabelSrc === 'manual'" icon
|
||||
small flat :ripple="false"
|
||||
class="action-delete" title="Delete"
|
||||
@click.stop.prevent="removeLabel(props.item.Label)">
|
||||
<v-icon color="secondary-dark">delete</v-icon>
|
||||
</v-btn>
|
||||
<v-btn v-else-if="props.item.Uncertainty < 100" icon small flat :ripple="false"
|
||||
class="action-remove" title="Remove"
|
||||
@click.stop.prevent="removeLabel(props.item.Label)">
|
||||
<v-icon color="secondary-dark">remove</v-icon>
|
||||
</v-btn>
|
||||
<v-btn v-else icon small flat :ripple="false"
|
||||
class="action-on" title="Activate"
|
||||
@click.stop.prevent="activateLabel(props.item.Label)">
|
||||
<v-icon color="secondary-dark">add</v-icon>
|
||||
</v-btn>
|
||||
</td>
|
||||
</template>
|
||||
<template v-if="!disabled" #footer>
|
||||
<td>
|
||||
<v-text-field
|
||||
v-model="props.item.Label.Name"
|
||||
v-model="newLabel"
|
||||
:rules="[nameRule]"
|
||||
:label="$gettext('Name')"
|
||||
color="secondary-dark"
|
||||
class="input-rename background-inherit elevation-0"
|
||||
single-line autofocus solo hide-details
|
||||
browser-autocomplete="off"
|
||||
:label="$gettext('Name')"
|
||||
single-line
|
||||
flat solo hide-details
|
||||
autofocus
|
||||
class="input-label"
|
||||
@keyup.enter.native="addLabel"
|
||||
></v-text-field>
|
||||
</template>
|
||||
</v-edit-dialog>
|
||||
</td>
|
||||
<td class="text-xs-left">{{ sourceName(props.item.LabelSrc) }}</td>
|
||||
<td class="text-xs-center">{{ 100 - props.item.Uncertainty }}%</td>
|
||||
<td class="text-xs-center">
|
||||
<v-btn v-if="disabled" icon small flat :ripple="false"
|
||||
class="action-view" title="Search"
|
||||
@click.stop.prevent="searchLabel(props.item.Label)">
|
||||
<v-icon color="secondary-dark">search</v-icon>
|
||||
</v-btn>
|
||||
<v-btn v-else-if="props.item.Uncertainty < 100 && props.item.LabelSrc === 'manual'" icon
|
||||
small flat :ripple="false"
|
||||
class="action-delete" title="Delete"
|
||||
@click.stop.prevent="removeLabel(props.item.Label)">
|
||||
<v-icon color="secondary-dark">delete</v-icon>
|
||||
</v-btn>
|
||||
<v-btn v-else-if="props.item.Uncertainty < 100" icon small flat :ripple="false"
|
||||
class="action-remove" title="Remove"
|
||||
@click.stop.prevent="removeLabel(props.item.Label)">
|
||||
<v-icon color="secondary-dark">remove</v-icon>
|
||||
</v-btn>
|
||||
<v-btn v-else icon small flat :ripple="false"
|
||||
class="action-on" title="Activate"
|
||||
@click.stop.prevent="activateLabel(props.item.Label)">
|
||||
<v-icon color="secondary-dark">add</v-icon>
|
||||
</v-btn>
|
||||
</td>
|
||||
</template>
|
||||
<template v-if="!disabled" #footer>
|
||||
<td>
|
||||
<v-text-field
|
||||
v-model="newLabel"
|
||||
:rules="[nameRule]"
|
||||
color="secondary-dark"
|
||||
browser-autocomplete="off"
|
||||
:label="$gettext('Name')"
|
||||
single-line
|
||||
flat solo hide-details
|
||||
autofocus
|
||||
class="input-label"
|
||||
@keyup.enter.native="addLabel"
|
||||
></v-text-field>
|
||||
</td>
|
||||
<td class="text-xs-left">{{ sourceName('manual') }}</td>
|
||||
<td class="text-xs-center">100%</td>
|
||||
<td class="text-xs-center">
|
||||
<v-btn icon small flat :ripple="false" title="Add"
|
||||
class="p-photo-label-add"
|
||||
@click.stop.prevent="addLabel">
|
||||
<v-icon color="secondary-dark">add</v-icon>
|
||||
</v-btn>
|
||||
</td>
|
||||
</template>
|
||||
</v-data-table>
|
||||
</td>
|
||||
<td class="text-xs-left">{{ sourceName('manual') }}</td>
|
||||
<td class="text-xs-center">100%</td>
|
||||
<td class="text-xs-center">
|
||||
<v-btn icon small flat :ripple="false" title="Add"
|
||||
class="p-photo-label-add"
|
||||
@click.stop.prevent="addLabel">
|
||||
<v-icon color="secondary-dark">add</v-icon>
|
||||
</v-btn>
|
||||
</td>
|
||||
</template>
|
||||
</v-data-table>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Label from "model/label";
|
||||
import Thumb from "model/thumb";
|
||||
|
||||
export default {
|
||||
name: 'PTabPhotoLabels',
|
||||
|
|
@ -170,6 +192,9 @@ export default {
|
|||
this.$router.push({name: 'all', query: {q: 'label:' + label.Slug}}).catch(() => {});
|
||||
this.$emit('close');
|
||||
},
|
||||
openPhoto() {
|
||||
this.$viewer.show(Thumb.fromFiles([this.model]), 0);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in a new issue