Frontend: Refactor photo selection #15
This commit is contained in:
Michael Mayer
parent
f05e07d1d6
commit
68b79081b3
|
|
@ -1,5 +1,6 @@
|
|||
<template>
|
||||
<div class="p-page p-page-photos" v-infinite-scroll="loadMore" infinite-scroll-disabled="loadMoreDisabled" infinite-scroll-distance="10">
|
||||
<div class="p-page p-page-photos" v-infinite-scroll="loadMore" infinite-scroll-disabled="loadMoreDisabled"
|
||||
infinite-scroll-distance="10">
|
||||
<v-form ref="form" lazy-validation @submit="formChange" dense>
|
||||
<v-toolbar flat color="blue-grey lighten-4">
|
||||
<v-text-field class="pt-3 pr-3"
|
||||
|
|
@ -136,10 +137,14 @@
|
|||
</v-btn>
|
||||
</v-speed-dial>
|
||||
|
||||
<p-photo-tiles v-if="query.view === 'tiles'" :photos="results" :selection="selected" :select="selectPhoto" :open="openPhoto" :like="likePhoto"></p-photo-tiles>
|
||||
<p-photo-mosaic v-if="query.view === 'mosaic'" :photos="results" :selection="selected" :select="selectPhoto" :open="openPhoto" :like="likePhoto"></p-photo-mosaic>
|
||||
<p-photo-details v-if="query.view === 'details'" :photos="results" :selection="selected" :select="selectPhoto" :open="openPhoto" :like="likePhoto"></p-photo-details>
|
||||
<p-photo-list v-if="query.view === 'list'" :photos="results" :selection="selected" :select="selectPhoto" :open="openPhoto" :like="likePhoto"></p-photo-list>
|
||||
<p-photo-tiles v-if="query.view === 'tiles'" :photos="results" :selection="selected" :select="selectPhoto"
|
||||
:open="openPhoto" :like="likePhoto"></p-photo-tiles>
|
||||
<p-photo-mosaic v-if="query.view === 'mosaic'" :photos="results" :selection="selected" :select="selectPhoto"
|
||||
:open="openPhoto" :like="likePhoto"></p-photo-mosaic>
|
||||
<p-photo-details v-if="query.view === 'details'" :photos="results" :selection="selected"
|
||||
:select="selectPhoto" :open="openPhoto" :like="likePhoto"></p-photo-details>
|
||||
<p-photo-list v-if="query.view === 'list'" :photos="results" :selection="selected" :select="selectPhoto"
|
||||
:open="openPhoto" :like="likePhoto"></p-photo-list>
|
||||
</v-container>
|
||||
|
||||
<v-dialog v-model="dialog" dark persistent max-width="600px">
|
||||
|
|
@ -428,18 +433,12 @@
|
|||
this.selected = [];
|
||||
},
|
||||
selectPhoto(photo) {
|
||||
if (photo.selected) {
|
||||
for (let i = 0; i < this.selected.length; i++) {
|
||||
if (this.selected[i].id === photo.id) {
|
||||
this.selected.splice(i, 1);
|
||||
break;
|
||||
}
|
||||
}
|
||||
const index = this.selected.indexOf(photo.ID);
|
||||
|
||||
photo.selected = false;
|
||||
if (index === -1) {
|
||||
this.selected.push(photo.ID);
|
||||
} else {
|
||||
this.selected.push(photo);
|
||||
photo.selected = true;
|
||||
this.selected.splice(index, 1);
|
||||
}
|
||||
},
|
||||
likePhoto(photo) {
|
||||
|
|
|
|||
|
|
@ -17,12 +17,12 @@
|
|||
>
|
||||
<v-hover>
|
||||
<v-card tile slot-scope="{ hover }"
|
||||
:dark="photo.selected"
|
||||
:class="photo.selected ? 'elevation-14 ma-1' : 'elevation-2 ma-2'">
|
||||
:dark="selection.includes(photo.ID)"
|
||||
:class="selection.includes(photo.ID) ? 'elevation-14 ma-1' : 'elevation-2 ma-2'">
|
||||
<v-img
|
||||
:src="photo.getThumbnailUrl('tile_500')"
|
||||
aspect-ratio="1"
|
||||
v-bind:class="{ selected: photo.selected }"
|
||||
v-bind:class="{ selected: selection.includes(photo.ID) }"
|
||||
style="cursor: pointer"
|
||||
class="grey lighten-2"
|
||||
@click="open(index)"
|
||||
|
|
@ -38,11 +38,11 @@
|
|||
<v-progress-circular indeterminate color="grey lighten-5"></v-progress-circular>
|
||||
</v-layout>
|
||||
|
||||
<v-btn v-if="hover || photo.selected" :flat="!hover" icon large absolute
|
||||
<v-btn v-if="hover || selection.includes(photo.ID)" :flat="!hover" icon large absolute
|
||||
:ripple="false" style="right: 4px; bottom: 4px;"
|
||||
class="p-photo-select"
|
||||
@click.stop.prevent="select(photo)">
|
||||
<v-icon v-if="selection.length && photo.selected" color="white">check_box</v-icon>
|
||||
<v-icon v-if="selection.length && selection.includes(photo.ID)" color="white">check_box</v-icon>
|
||||
<v-icon v-else color="white">check_box_outline_blank</v-icon>
|
||||
</v-btn>
|
||||
|
||||
|
|
|
|||
|
|
@ -12,14 +12,13 @@
|
|||
<v-flex
|
||||
v-for="(photo, index) in photos"
|
||||
:key="index"
|
||||
v-bind:class="{ selected: photo.selected }"
|
||||
v-bind:class="{ selected: selection.includes(photo.ID) }"
|
||||
class="p-photo"
|
||||
xs4 sm3 md2 lg1 d-flex
|
||||
>
|
||||
<v-hover>
|
||||
<v-card tile slot-scope="{ hover }"
|
||||
:dark="photo.selected"
|
||||
:class="photo.selected ? 'elevation-14 ma-1' : hover ? 'elevation-6 ma-2' : 'elevation-2 ma-2'">
|
||||
:class="selection.includes(photo.ID) ? 'elevation-14 ma-1' : hover ? 'elevation-6 ma-2' : 'elevation-2 ma-2'">
|
||||
<v-img :src="photo.getThumbnailUrl('tile_224')"
|
||||
aspect-ratio="1"
|
||||
class="grey lighten-2"
|
||||
|
|
@ -37,11 +36,11 @@
|
|||
color="grey lighten-5"></v-progress-circular>
|
||||
</v-layout>
|
||||
|
||||
<v-btn v-if="hover || photo.selected" :flat="!hover" icon large absolute
|
||||
<v-btn v-if="hover || selection.includes(photo.ID)" :flat="!hover" icon large absolute
|
||||
:ripple="false" style="right: 1px; bottom: 1px;"
|
||||
class="p-photo-select"
|
||||
@click.stop.prevent="select(photo)">
|
||||
<v-icon v-if="selection.length && photo.selected" color="white">check_box</v-icon>
|
||||
<v-icon v-if="selection.length && selection.includes(photo.ID)" color="white">check_box</v-icon>
|
||||
<v-icon v-else color="white">check_box_outline_blank</v-icon>
|
||||
</v-btn>
|
||||
|
||||
|
|
|
|||
|
|
@ -12,14 +12,13 @@
|
|||
<v-flex
|
||||
v-for="(photo, index) in photos"
|
||||
:key="index"
|
||||
v-bind:class="{ selected: photo.selected }"
|
||||
v-bind:class="{ selected: selection.includes(photo.ID) }"
|
||||
class="p-photo"
|
||||
xs12 sm6 md3 lg2 d-flex
|
||||
>
|
||||
<v-hover>
|
||||
<v-card tile slot-scope="{ hover }"
|
||||
:dark="photo.selected"
|
||||
:class="photo.selected ? 'elevation-14 ma-1' : hover ? 'elevation-6 ma-2' : 'elevation-2 ma-2'">
|
||||
:class="selection.includes(photo.ID) ? 'elevation-14 ma-1' : hover ? 'elevation-6 ma-2' : 'elevation-2 ma-2'">
|
||||
<v-img :src="photo.getThumbnailUrl('tile_500')"
|
||||
aspect-ratio="1"
|
||||
class="grey lighten-2"
|
||||
|
|
@ -37,12 +36,12 @@
|
|||
color="grey lighten-5"></v-progress-circular>
|
||||
</v-layout>
|
||||
|
||||
<v-btn v-if="hover || photo.selected" :flat="!hover" icon large absolute
|
||||
<v-btn v-if="hover || selection.includes(photo.ID)" :flat="!hover" icon large absolute
|
||||
:ripple="false" style="right: 4px; bottom: 4px;"
|
||||
class="p-photo-select"
|
||||
@click.stop.prevent="select(photo)">
|
||||
<v-icon v-if="selection.length && photo.selected" color="white">check_box</v-icon>
|
||||
<v-icon v-else-if="!photo.selected" color="white">check_box_outline_blank</v-icon>
|
||||
<v-icon v-if="selection.length && selection.includes(photo.ID)" color="white">check_box</v-icon>
|
||||
<v-icon v-else-if="!selection.includes(photo.ID)" color="white">check_box_outline_blank</v-icon>
|
||||
</v-btn>
|
||||
|
||||
<v-btn v-if="hover || photo.PhotoFavorite" :flat="!hover" icon large absolute
|
||||
|
|
|
|||
Loading…
Reference in a new issue