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

New "mosaic" view (tiny tiles)

Browse source
This commit is contained in:
Michael Mayer 2019-05-15 11:07:26 +02:00
parent 441922c35e
commit 7fd1ed7a7b
3 changed files with 76 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

60
frontend/src/app/pages/photos.vue
View file

@ -297,6 +297,65 @@
</v-flex> </v-flex>
</v-layout> </v-layout>
</v-container> </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-snackbar
v-model="snackbarVisible" v-model="snackbarVisible"
bottom bottom
@ -535,6 +594,7 @@
], ],
'views': [ 'views': [
{value: 'tiles', text: 'Tiles'}, {value: 'tiles', text: 'Tiles'},
{value: 'mosaic', text: 'Mosaic'},
{value: 'details', text: 'Details'}, {value: 'details', text: 'Details'},
{value: 'list', text: 'List'}, {value: 'list', text: 'List'},
], ],

4
internal/photoprism/indexer.go
View file

@ -52,9 +52,9 @@ func (i *Indexer) getImageTags(jpeg *MediaFile) (results []*models.Tag) {
var thumbs []string var thumbs []string
if jpeg.AspectRatio() == 1 { if jpeg.AspectRatio() == 1 {
thumbs = []string{"center_224"} thumbs = []string{"tile_224"}
} else { } else {
thumbs = []string{"center_224", "left_224", "right_224"} thumbs = []string{"tile_224", "left_224", "right_224"}
} }
tagExists := make(map[string]bool) tagExists := make(map[string]bool)

28
internal/photoprism/thumbnails.go
View file

@ -53,23 +53,23 @@ type ThumbnailType struct {
} }
var ThumbnailTypes = map[string]ThumbnailType{ var ThumbnailTypes = map[string]ThumbnailType{
"tile_50": {"tile_500", 50, 50, false, []ResampleOption{ResampleFillCenter, ResampleLanczos}}, "tile_50": {"tile_500", 50, 50, false, []ResampleOption{ResampleFillCenter, ResampleLanczos}},
"tile_100": {"tile_500", 100, 100, false, []ResampleOption{ResampleFillCenter, ResampleLanczos}}, "tile_100": {"tile_500", 100, 100, false, []ResampleOption{ResampleFillCenter, ResampleLanczos}},
"tile_500": {"", 500, 500, false, []ResampleOption{ResampleFillCenter, ResampleLanczos}}, "tile_224": {"tile_500", 224, 224, false, []ResampleOption{ResampleFillCenter, ResampleLanczos}},
"colors": {"fit_720", 3, 3, false, []ResampleOption{ResampleResize, ResampleNearestNeighbor, ResamplePng}}, "tile_500": {"", 500, 500, false, []ResampleOption{ResampleFillCenter, ResampleLanczos}},
"center_224": {"fit_720", 224, 224, false, []ResampleOption{ResampleFillCenter, ResampleLanczos}}, "colors": {"fit_720", 3, 3, false, []ResampleOption{ResampleResize, ResampleNearestNeighbor, ResamplePng}},
"left_224": {"fit_720", 224, 224, false, []ResampleOption{ResampleFillTopLeft, ResampleLanczos}}, "left_224": {"fit_720", 224, 224, false, []ResampleOption{ResampleFillTopLeft, ResampleLanczos}},
"right_224": {"fit_720", 224, 224, false, []ResampleOption{ResampleFillBottomRight, ResampleLanczos}}, "right_224": {"fit_720", 224, 224, false, []ResampleOption{ResampleFillBottomRight, ResampleLanczos}},
"fit_720": {"", 720, 720, true, []ResampleOption{ResampleFit, ResampleLanczos}}, "fit_720": {"", 720, 720, true, []ResampleOption{ResampleFit, ResampleLanczos}},
"fit_1280": {"fit_2048", 1280, 1024, true, []ResampleOption{ResampleFit, ResampleLanczos}}, "fit_1280": {"fit_2048", 1280, 1024, true, []ResampleOption{ResampleFit, ResampleLanczos}},
"fit_1920": {"fit_2048", 1920, 1200, true, []ResampleOption{ResampleFit, ResampleLanczos}}, "fit_1920": {"fit_2048", 1920, 1200, true, []ResampleOption{ResampleFit, ResampleLanczos}},
"fit_2048": {"", 2048, 2048, true, []ResampleOption{ResampleFit, ResampleLanczos}}, "fit_2048": {"", 2048, 2048, true, []ResampleOption{ResampleFit, ResampleLanczos}},
"fit_2560": {"", 2560, 1600, true, []ResampleOption{ResampleFit, ResampleLanczos}}, "fit_2560": {"", 2560, 1600, true, []ResampleOption{ResampleFit, ResampleLanczos}},
"fit_3840": {"", 3840, 2400, true, []ResampleOption{ResampleFit, ResampleLanczos}}, "fit_3840": {"", 3840, 2400, true, []ResampleOption{ResampleFit, ResampleLanczos}},
} }
var DefaultThumbnails = []string{ 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() { func init() {