From 7fd1ed7a7b5c8f39fcb7ed52666d4bf1e185dd09 Mon Sep 17 00:00:00 2001
From: Michael Mayer <michael@liquidbytes.net>
Date: Wed, 15 May 2019 11:07:26 +0200
Subject: [PATCH] New "mosaic" view (tiny tiles)

---
 frontend/src/app/pages/photos.vue | 60 +++++++++++++++++++++++++++++++
 internal/photoprism/indexer.go    |  4 +--
 internal/photoprism/thumbnails.go | 28 +++++++--------
 3 files changed, 76 insertions(+), 16 deletions(-)

diff --git a/frontend/src/app/pages/photos.vue b/frontend/src/app/pages/photos.vue
index 5d27c73f9..cc59dc990 100644
--- a/frontend/src/app/pages/photos.vue
+++ b/frontend/src/app/pages/photos.vue
@@ -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'},
                     ],
diff --git a/internal/photoprism/indexer.go b/internal/photoprism/indexer.go
index 388eaf1c0..bc229462e 100644
--- a/internal/photoprism/indexer.go
+++ b/internal/photoprism/indexer.go
@@ -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)
diff --git a/internal/photoprism/thumbnails.go b/internal/photoprism/thumbnails.go
index 85c23b070..bc691d37c 100644
--- a/internal/photoprism/thumbnails.go
+++ b/internal/photoprism/thumbnails.go
@@ -53,23 +53,23 @@ 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_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}},
-	"fit_1280":   {"fit_2048", 1280, 1024, true, []ResampleOption{ResampleFit, ResampleLanczos}},
-	"fit_1920":   {"fit_2048", 1920, 1200, true, []ResampleOption{ResampleFit, ResampleLanczos}},
-	"fit_2048":   {"", 2048, 2048, true, []ResampleOption{ResampleFit, ResampleLanczos}},
-	"fit_2560":   {"", 2560, 1600, true, []ResampleOption{ResampleFit, ResampleLanczos}},
-	"fit_3840":   {"", 3840, 2400, true, []ResampleOption{ResampleFit, ResampleLanczos}},
+	"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}},
+	"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}},
+	"fit_1280":  {"fit_2048", 1280, 1024, true, []ResampleOption{ResampleFit, ResampleLanczos}},
+	"fit_1920":  {"fit_2048", 1920, 1200, true, []ResampleOption{ResampleFit, ResampleLanczos}},
+	"fit_2048":  {"", 2048, 2048, true, []ResampleOption{ResampleFit, ResampleLanczos}},
+	"fit_2560":  {"", 2560, 1600, true, []ResampleOption{ResampleFit, ResampleLanczos}},
+	"fit_3840":  {"", 3840, 2400, true, []ResampleOption{ResampleFit, ResampleLanczos}},
 }
 
 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() {