From b3f8fb76bf0f8f3c4eae91e31a71262b1dd001a9 Mon Sep 17 00:00:00 2001
From: Michael Mayer <michael@liquidbytes.net>
Date: Sat, 28 Dec 2019 21:31:14 +0100
Subject: [PATCH] Frontend: Disable tile view for simplicity

Signed-off-by: Michael Mayer <michael@liquidbytes.net>
---
 frontend/src/component/p-album-toolbar.vue | 14 ++-----
 frontend/src/component/p-photo-mosaic.vue  |  2 +-
 frontend/src/component/p-photo-search.vue  | 14 +++----
 frontend/src/pages/photos.vue              | 10 ++---
 frontend/tests/acceptance/views.js         | 46 +++++++++-------------
 5 files changed, 33 insertions(+), 53 deletions(-)

diff --git a/frontend/src/component/p-album-toolbar.vue b/frontend/src/component/p-album-toolbar.vue
index fd195fc01..c47a2f144 100644
--- a/frontend/src/component/p-album-toolbar.vue
+++ b/frontend/src/component/p-album-toolbar.vue
@@ -32,20 +32,14 @@
                 <v-icon>refresh</v-icon>
             </v-btn>
 
-            <v-btn icon v-if="settings.view === 'tiles'" @click.stop="setView('details')">
-                <v-icon>view_column</v-icon>
-            </v-btn>
-
             <v-btn icon v-if="settings.view === 'details'" @click.stop="setView('list')">
                 <v-icon>view_list</v-icon>
             </v-btn>
-
-            <v-btn icon v-if="settings.view === 'list'" @click.stop="setView('mosaic')">
+            <v-btn icon v-else-if="settings.view === 'list'" @click.stop="setView('mosaic')">
                 <v-icon>view_comfy</v-icon>
             </v-btn>
-
-            <v-btn icon v-if="settings.view === 'mosaic'" @click.stop="setView('tiles')">
-                <v-icon>view_module</v-icon>
+            <v-btn icon v-else @click.stop="setView('details')">
+                <v-icon>view_column</v-icon>
             </v-btn>
 
             <v-btn icon @click.stop="searchExpanded = !searchExpanded" class="p-expand-search">
@@ -138,7 +132,7 @@
                 searchExpanded: false,
                 options: {
                     'views': [
-                        {value: 'tiles', text: this.$gettext('Tiles')},
+                        // {value: 'tiles', text: this.$gettext('Tiles')},
                         {value: 'mosaic', text: this.$gettext('Mosaic')},
                         {value: 'details', text: this.$gettext('Details')},
                         {value: 'list', text: this.$gettext('List')},
diff --git a/frontend/src/component/p-photo-mosaic.vue b/frontend/src/component/p-photo-mosaic.vue
index 5b92252e8..b3a91c740 100644
--- a/frontend/src/component/p-photo-mosaic.vue
+++ b/frontend/src/component/p-photo-mosaic.vue
@@ -14,7 +14,7 @@
                     :key="index"
                     v-bind:class="{ selected: $clipboard.has(photo) }"
                     class="p-photo"
-                    xs4 sm3 md2 lg1 d-flex
+                    xs4 sm3 md2 xl1 d-flex
             >
                 <v-hover>
                     <v-card tile slot-scope="{ hover }"
diff --git a/frontend/src/component/p-photo-search.vue b/frontend/src/component/p-photo-search.vue
index f16e08193..8d84c5c6c 100644
--- a/frontend/src/component/p-photo-search.vue
+++ b/frontend/src/component/p-photo-search.vue
@@ -21,20 +21,18 @@
                 <v-icon>refresh</v-icon>
             </v-btn>
 
-            <v-btn icon v-if="settings.view === 'tiles'" @click.stop="setView('details')">
+            <!-- v-btn icon v-if="settings.view === 'tiles'" @click.stop="setView('details')">
                 <v-icon>view_column</v-icon>
-            </v-btn>
+            </v-btn -->
 
             <v-btn icon v-if="settings.view === 'details'" @click.stop="setView('list')">
                 <v-icon>view_list</v-icon>
             </v-btn>
-
-            <v-btn icon v-if="settings.view === 'list'" @click.stop="setView('mosaic')">
+            <v-btn icon v-else-if="settings.view === 'list'" @click.stop="setView('mosaic')">
                 <v-icon>view_comfy</v-icon>
             </v-btn>
-
-            <v-btn icon v-if="settings.view === 'mosaic'" @click.stop="setView('tiles')">
-                <v-icon>view_module</v-icon>
+            <v-btn icon v-else @click.stop="setView('details')">
+                <v-icon>view_column</v-icon>
             </v-btn>
 
             <v-btn icon @click.stop="searchExpanded = !searchExpanded" class="p-expand-search">
@@ -164,7 +162,7 @@
                 searchExpanded: false,
                 options: {
                     'views': [
-                        {value: 'tiles', text: this.$gettext('Tiles')},
+                        // {value: 'tiles', text: this.$gettext('Tiles')},
                         {value: 'mosaic', text: this.$gettext('Mosaic')},
                         {value: 'details', text: this.$gettext('Details')},
                         {value: 'list', text: this.$gettext('List')},
diff --git a/frontend/src/pages/photos.vue b/frontend/src/pages/photos.vue
index 1f58a3529..1fdde6b64 100644
--- a/frontend/src/pages/photos.vue
+++ b/frontend/src/pages/photos.vue
@@ -22,15 +22,15 @@
                           :selection="selection"
                           :open-photo="openPhoto"
                           :open-location="openLocation"></p-photo-list>
-            <p-photo-details v-else-if="settings.view === 'details'"
+            <p-photo-details v-else
                              :photos="results"
                              :selection="selection"
                              :open-photo="openPhoto"
                              :open-location="openLocation"></p-photo-details>
-            <p-photo-tiles v-else
+            <!-- p-photo-tiles v-else
                            :photos="results"
                            :selection="selection"
-                           :open-photo="openPhoto"></p-photo-tiles>
+                           :open-photo="openPhoto"></p-photo-tiles -->
         </v-container>
     </div>
 </template>
@@ -96,11 +96,9 @@
                     return storedType;
                 } else if (window.innerWidth < 960) {
                     return 'mosaic';
-                } else if (window.innerWidth > 1600) {
-                    return 'details';
                 }
 
-                return 'tiles';
+                return 'details';
             },
             openLocation(index) {
                 const photo = this.results[index];
diff --git a/frontend/tests/acceptance/views.js b/frontend/tests/acceptance/views.js
index 71b507979..82efc4297 100644
--- a/frontend/tests/acceptance/views.js
+++ b/frontend/tests/acceptance/views.js
@@ -12,17 +12,8 @@ test('Open photo in fullscreen', async t => {
         .click(Selector('div.v-image__image').nth(0))
         .expect(Selector('#p-photo-viewer').visible).ok()
         .expect(Selector('img.pswp__img').visible).ok();
-}),
-test('Open details view via button', async t => {
-    await t
-        .click('button.p-expand-search')
-        .click(Selector('i').withText('view_column'))
-        .expect(Selector('div.v-image__image').visible).ok()
-        .expect(Selector('div.caption').visible).ok()
-        .expect(Selector('#p-photo-viewer').visible).notOk()
-        .expect(Selector('i').withText('view_column').exists).notOk()
-        .expect(Selector('i').withText('view_list').visible).ok()
-}),
+});
+
 test('Open mosaic view via select', async t => {
     await t
         .click('button.p-expand-search');
@@ -30,28 +21,27 @@ test('Open mosaic view via select', async t => {
     await t
         .expect(Selector('div.v-image__image').visible).ok()
         .expect(Selector('div.p-photo-mosaic').visible).ok()
-        .expect(Selector('div.caption').exists).notOk()
+        .expect(Selector('div.p-photo div.caption').exists).notOk()
         .expect(Selector('#p-photo-viewer').visible).notOk();
-}),
+});
+
 test('Open list view via select', async t => {
     await t
         .click('button.p-expand-search');
     await page.setFilter('view', 'List');
     await t
         .expect(Selector('table.v-datatable').visible).ok()
-        .expect(Selector('div.v-image__image').exists).notOk()
+        .expect(Selector('div.p-photos div.v-image').exists).notOk()
         .expect(Selector('div.p-photo-list').visible).ok();
-}),
-    test('Open tile view via select', async t => {
-        await t
-            .click('button.p-expand-search');
-        await page.setFilter('view', 'List');
-        await t
-            .expect(Selector('div.p-photo-list').visible).ok();
-        await page.setFilter('view', 'Tile');
-        await t
-            .expect(Selector('div.v-image__image').visible).ok()
-            .expect(Selector('div.p-photo-tiles').visible).ok()
-            .expect(Selector('div.caption').exists).notOk()
-            .expect(Selector('#p-photo-viewer').visible).notOk();
-    });
+});
+
+test('Open details view via select', async t => {
+    await t
+        .click('button.p-expand-search');
+    await page.setFilter('view', 'Details');
+    await t
+        .expect(Selector('div.v-image__image').visible).ok()
+        .expect(Selector('div.p-photo-details').visible).ok()
+        .expect(Selector('div.p-photo div.caption').visible).ok()
+        .expect(Selector('#p-photo-viewer').visible).notOk();
+});