From 91c66824b84eabb6ce2083e057f37e3d03095901 Mon Sep 17 00:00:00 2001
From: Michael Mayer <michael@liquidbytes.net>
Date: Sat, 15 Jun 2019 18:59:36 -0700
Subject: [PATCH] Frontend: Add view change buttons

---
 frontend/src/component/p-photo-search.vue | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/frontend/src/component/p-photo-search.vue b/frontend/src/component/p-photo-search.vue
index 0d91c1fd7..66cf7388a 100644
--- a/frontend/src/component/p-photo-search.vue
+++ b/frontend/src/component/p-photo-search.vue
@@ -20,6 +20,22 @@
                 <v-icon>refresh</v-icon>
             </v-btn>
 
+            <v-btn icon v-if="settings.view === 'tiles'" @click.stop="setView('details')" class="hidden-xs-only">
+                <v-icon>view_column</v-icon>
+            </v-btn>
+
+            <v-btn icon v-if="settings.view === 'details'" @click.stop="setView('list')" class="hidden-xs-only">
+                <v-icon>view_list</v-icon>
+            </v-btn>
+
+            <v-btn icon v-if="settings.view === 'list'" @click.stop="setView('mosaic')" class="hidden-xs-only">
+                <v-icon>view_comfy</v-icon>
+            </v-btn>
+
+            <v-btn icon v-if="settings.view === 'mosaic'" @click.stop="setView('tiles')" class="hidden-xs-only">
+                <v-icon>view_module</v-icon>
+            </v-btn>
+
             <v-btn icon @click.stop="searchExpanded = !searchExpanded" id="advancedMenu">
                 <v-icon>{{ searchExpanded ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}</v-icon>
             </v-btn>
@@ -120,6 +136,10 @@
                     this.searchExpanded = false;
                 }
             },
+            setView(name) {
+                this.settings.view = name;
+                this.filterChange();
+            },
             clearQuery() {
                 this.filter.q = '';
                 this.filterChange();