New "mosaic" view (tiny tiles)
This commit is contained in:
parent
441922c35e
commit
7fd1ed7a7b
3 changed files with 76 additions and 16 deletions
|
@ -297,6 +297,65 @@
|
|||
</v-flex>
|
||||
</v-layout>
|
||||
</v-container>
|
||||
|
||||
<v-container grid-list-xs fluid class="pa-0" v-if="query.view === 'mosaic'">
|
||||
<v-card v-if="results.length === 0">
|
||||
<v-card-title primary-title>
|
||||
<div>
|
||||
<h3 class="headline mb-3">No photos matched your search</h3>
|
||||
<div>Try using other terms and search options such as category, country and camera.</div>
|
||||
</div>
|
||||
</v-card-title>
|
||||
</v-card>
|
||||
<v-layout row wrap>
|
||||
<v-flex
|
||||
v-for="(photo, index) in results"
|
||||
:key="photo.ID"
|
||||
xs4 sm3 md2 lg1 d-flex
|
||||
v-bind:class="{ selected: photo.selected }"
|
||||
>
|
||||
<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'">
|
||||
<v-img :src="photo.getThumbnailUrl('tile_224')"
|
||||
aspect-ratio="1"
|
||||
class="grey lighten-2"
|
||||
style="cursor: pointer"
|
||||
@click="openPhoto(index)"
|
||||
>
|
||||
<v-layout
|
||||
slot="placeholder"
|
||||
fill-height
|
||||
align-center
|
||||
justify-center
|
||||
ma-0
|
||||
>
|
||||
<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
|
||||
:ripple="false" style="right: 4px; bottom: 4px;"
|
||||
@click.stop.prevent="selectPhoto(photo)">
|
||||
<v-icon v-if="photo.selected" color="white">check_box</v-icon>
|
||||
<v-icon v-else color="white">check_box_outline_blank</v-icon>
|
||||
</v-btn>
|
||||
|
||||
<v-btn v-if="hover || photo.PhotoFavorite" :flat="!hover" icon large absolute
|
||||
:ripple="false" style="bottom: 4px; left: 4px"
|
||||
@click.stop.prevent="likePhoto(photo)">
|
||||
<v-icon v-if="photo.PhotoFavorite" color="white">favorite</v-icon>
|
||||
<v-icon v-else color="white">favorite_border</v-icon>
|
||||
</v-btn>
|
||||
</v-img>
|
||||
|
||||
</v-card>
|
||||
</v-hover>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-container>
|
||||
|
||||
<v-snackbar
|
||||
v-model="snackbarVisible"
|
||||
bottom
|
||||
|
@ -535,6 +594,7 @@
|
|||
],
|
||||
'views': [
|
||||
{value: 'tiles', text: 'Tiles'},
|
||||
{value: 'mosaic', text: 'Mosaic'},
|
||||
{value: 'details', text: 'Details'},
|
||||
{value: 'list', text: 'List'},
|
||||
],
|
||||
|
|
|
@ -52,9 +52,9 @@ func (i *Indexer) getImageTags(jpeg *MediaFile) (results []*models.Tag) {
|
|||
var thumbs []string
|
||||
|
||||
if jpeg.AspectRatio() == 1 {
|
||||
thumbs = []string{"center_224"}
|
||||
thumbs = []string{"tile_224"}
|
||||
} else {
|
||||
thumbs = []string{"center_224", "left_224", "right_224"}
|
||||
thumbs = []string{"tile_224", "left_224", "right_224"}
|
||||
}
|
||||
|
||||
tagExists := make(map[string]bool)
|
||||
|
|
|
@ -55,9 +55,9 @@ type ThumbnailType struct {
|
|||
var ThumbnailTypes = map[string]ThumbnailType{
|
||||
"tile_50": {"tile_500", 50, 50, false, []ResampleOption{ResampleFillCenter, ResampleLanczos}},
|
||||
"tile_100": {"tile_500", 100, 100, false, []ResampleOption{ResampleFillCenter, ResampleLanczos}},
|
||||
"tile_224": {"tile_500", 224, 224, false, []ResampleOption{ResampleFillCenter, ResampleLanczos}},
|
||||
"tile_500": {"", 500, 500, false, []ResampleOption{ResampleFillCenter, ResampleLanczos}},
|
||||
"colors": {"fit_720", 3, 3, false, []ResampleOption{ResampleResize, ResampleNearestNeighbor, ResamplePng}},
|
||||
"center_224": {"fit_720", 224, 224, false, []ResampleOption{ResampleFillCenter, ResampleLanczos}},
|
||||
"left_224": {"fit_720", 224, 224, false, []ResampleOption{ResampleFillTopLeft, ResampleLanczos}},
|
||||
"right_224": {"fit_720", 224, 224, false, []ResampleOption{ResampleFillBottomRight, ResampleLanczos}},
|
||||
"fit_720": {"", 720, 720, true, []ResampleOption{ResampleFit, ResampleLanczos}},
|
||||
|
@ -69,7 +69,7 @@ var ThumbnailTypes = map[string]ThumbnailType{
|
|||
}
|
||||
|
||||
var DefaultThumbnails = []string{
|
||||
"fit_3840", "fit_2560", "fit_2048", "fit_1920", "fit_1280", "fit_720", "right_224", "left_224", "center_224", "colors", "tile_500", "tile_100", "tile_50",
|
||||
"fit_3840", "fit_2560", "fit_2048", "fit_1920", "fit_1280", "fit_720", "right_224", "left_224", "colors", "tile_500", "tile_224", "tile_100", "tile_50",
|
||||
}
|
||||
|
||||
func init() {
|
||||
|
|
Loading…
Reference in a new issue