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

Frontend: Improve file list #217

Browse source 
Signed-off-by: Michael Mayer <michael@liquidbytes.net>
This commit is contained in:
Michael Mayer 2020-01-26 16:06:03 +01:00
parent 50f2873f6b
commit 601377d537
2 changed files with 33 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
frontend/src/css/app.css
View file

@ -164,3 +164,8 @@ body.public #photoprism .p-public,
body.readonly #photoprism .p-readonly {
display: block;
}
div.v-dialog table.v-table thead th,
div.v-dialog table.v-table tbody td {
padding: 0 16px;
}

43
frontend/src/dialog/photo-edit/files.vue
View file

@ -4,25 +4,37 @@
:headers="listColumns"
:items="model.Files"
hide-actions
class="elevation-0 p-files p-files-list p-results"
disable-initial-sort
class="elevation-0 p-files p-files-list p-results"
item-key="ID"
v-model="selected"
:no-data-text="this.$gettext('No files found')"
>
<template slot="items" slot-scope="props" class="p-file">
<td @click="openPhoto(props.index)" class="p-pointer" align="left">{{ props.item.FileName }}</td>
<td>
<a :href="'/api/v1/download/' + props.item.FileHash" class="secondary-dark--text" target="_blank">
{{ props.item.FileName }}
</a>
</td>
<td>{{ props.item.FileType }}</td>
<td>{{ props.item.FileWidth ? props.item.FileWidth : "" }}</td>
<td>{{ props.item.FileHeight ? props.item.FileHeight : "" }}</td>
<td><v-btn icon small flat :ripple="false"
class="p-photo-like"
@click.stop.prevent="changePrimary(props.index)">
<td class="text-xs-center">
<v-icon v-if="props.item.FilePrimary" color="secondary-dark">check_box</v-icon>
<v-icon v-else color="secondary-dark">check_box_outline_blank</v-icon>
</v-btn>
</td>
<td>{{ props.item.CreatedAt | luxon:format('dd/MM/yyyy hh:mm:ss') }}</td>
<td class="text-xs-center">
<v-icon v-if="props.item.FileSidecar" color="secondary-dark">check_box</v-icon>
<v-icon v-else color="secondary-dark">check_box_outline_blank</v-icon>
</td>
<td class="text-xs-center">
<v-icon v-if="props.item.FileMissing" color="secondary-dark">check_box</v-icon>
<v-icon v-else color="secondary-dark">check_box_outline_blank</v-icon>
</td>
<td class="text-xs-center">
<v-icon v-if="props.item.FileDuplicate" color="secondary-dark">check_box</v-icon>
<v-icon v-else color="secondary-dark">check_box_outline_blank</v-icon>
</td>
</template>
</v-data-table>
</div>
@ -40,17 +52,18 @@
readonly: this.$config.getValue("readonly"),
selected: [],
listColumns: [
{text: this.$gettext('Name'), value: 'FileName', align: 'left'},
{text: this.$gettext('Type'), value: 'FileType'},
{text: this.$gettext('Width'), value: 'FileWidth'},
{text: this.$gettext('Height'), value: 'FileHeight'},
{text: this.$gettext('Primary'), value: 'FilePrimary', align: 'left'},
{text: this.$gettext('Added'), value: 'CreatedAt'},
{text: this.$gettext('Name'), value: 'FileName', sortable: false, align: 'left'},
{text: this.$gettext('Type'), value: 'FileType', sortable: false},
{text: this.$gettext('Width'), value: 'FileWidth', sortable: false},
{text: this.$gettext('Height'), value: 'FileHeight', sortable: false},
{text: this.$gettext('Primary'), value: 'FilePrimary', sortable: false, align: 'center'},
{text: this.$gettext('Sidecar'), value: 'FileSidecar', sortable: false, align: 'center'},
{text: this.$gettext('Missing'), value: 'FileMissing', sortable: false, align: 'center'},
{text: this.$gettext('Duplicate'), value: 'FileDuplicate', sortable: false, align: 'center'},
],
};
},
computed: {
},
computed: {},
methods: {
openPhoto() {
this.$viewer.show([this.model], 0)