viewer: finalized the thumbnails view layouts. implemented thumbnails lazy-loading

9 files changed, 130 insertions, 11 deletions

diff --git a/viewer/src/@types/v-lazy-image.d.ts b/viewer/src/@types/v-lazy-image.d.ts
new file mode 100644
index 0000000..e307751
--- /dev/null
+++ b/viewer/src/@types/v-lazy-image.d.ts
@@ -0,0 +1,20 @@
+/* ldgallery - A static generator which turns a collection of tagged
+--             pictures into a searchable web gallery.
+--
+-- Copyright (C) 2019-2020  Guillaume FOUET
+--
+-- This program is free software: you can redistribute it and/or modify
+-- it under the terms of the GNU Affero General Public License as
+-- published by the Free Software Foundation, either version 3 of the
+-- License, or (at your option) any later version.
+--
+-- This program is distributed in the hope that it will be useful,
+-- but WITHOUT ANY WARRANTY; without even the implied warranty of
+-- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+-- GNU Affero General Public License for more details.
+--
+-- You should have received a copy of the GNU Affero General Public License
+-- along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+declare module 'v-lazy-image';
\ No newline at end of file
diff --git a/viewer/src/assets/scss/global.scss b/viewer/src/assets/scss/global.scss
index 7afca8c..ff57775 100644
--- a/viewer/src/assets/scss/global.scss
+++ b/viewer/src/assets/scss/global.scss
@@ -18,6 +18,7 @@
 */
 
 // Global CSS
+@import "@/assets/scss/theme.scss";
 
 // === Forms
 
@@ -42,3 +43,38 @@
 .flex-center {
   align-items: center;
 }
+
+// === Scrollbar styling
+
+.scrollbar {
+  overflow-y: auto;
+}
+.scrollbar::-webkit-scrollbar {
+  width: 12px;
+}
+.scrollbar::-webkit-scrollbar-thumb {
+  box-shadow: inset 0 0 6px black;
+  background-color: $toolbar-color;
+}
+
+// === Thumbnail tiles alignment
+
+.thumbnail-tiles {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  & > div {
+    margin: 1px;
+  }
+}
+
+// === Effect to apply on lazy-image loading
+
+.v-lazy-image {
+  opacity: 0;
+  transition: opacity 0.4s;
+}
+.v-lazy-image-loaded {
+  opacity: 1;
+}
diff --git a/viewer/src/assets/scss/theme.scss b/viewer/src/assets/scss/theme.scss
index 79e14e1..efd5d79 100644
--- a/viewer/src/assets/scss/theme.scss
+++ b/viewer/src/assets/scss/theme.scss
@@ -27,3 +27,7 @@ $panel-top-txtcolor: white;
 $panel-left-bgcolor: $panel-top-bgcolor;
 $panel-left-txtcolor: $panel-top-txtcolor;
 $content-bgcolor: #1e1e1e;
+
+$toolbar-color: #d62929;
+
+$loader-color: #119;
diff --git a/viewer/src/main.ts b/viewer/src/main.ts
index a5faa51..8e7716d 100644
--- a/viewer/src/main.ts
+++ b/viewer/src/main.ts
@@ -22,6 +22,7 @@ import "@/assets/scss/global.scss";
 import "@/components"
 import "@/plugins/fontawesome";
 import "@/plugins/buefy";
+import "@/plugins/lazyimage";
 import store from '@/store'
 import i18n from "@/plugins/i18n";
 import router from "@/router";
diff --git a/viewer/src/plugins/lazyimage.ts b/viewer/src/plugins/lazyimage.ts
new file mode 100644
index 0000000..276c7e2
--- /dev/null
+++ b/viewer/src/plugins/lazyimage.ts
@@ -0,0 +1,23 @@
+/* ldgallery - A static generator which turns a collection of tagged
+--             pictures into a searchable web gallery.
+--
+-- Copyright (C) 2019-2020  Guillaume FOUET
+--
+-- This program is free software: you can redistribute it and/or modify
+-- it under the terms of the GNU Affero General Public License as
+-- published by the Free Software Foundation, either version 3 of the
+-- License, or (at your option) any later version.
+--
+-- This program is distributed in the hope that it will be useful,
+-- but WITHOUT ANY WARRANTY; without even the implied warranty of
+-- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+-- GNU Affero General Public License for more details.
+--
+-- You should have received a copy of the GNU Affero General Public License
+-- along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+import Vue from "vue";
+import { VLazyImagePlugin } from "v-lazy-image";
+
+Vue.use(VLazyImagePlugin);
diff --git a/viewer/src/views/GalleryDirectory.vue b/viewer/src/views/GalleryDirectory.vue
index eb98595..1df0c4d 100644
--- a/viewer/src/views/GalleryDirectory.vue
+++ b/viewer/src/views/GalleryDirectory.vue
@@ -18,13 +18,14 @@
 -->
 
 <template>
-  <div>
-    <div class="flex">
-      <div v-for="(item) in directory.properties.items" :key="item.path">
-        <router-link :to="item.path">
-          <gallery-thumbnail :item="item" />
-        </router-link>
-      </div>
+  <div class="thumbnail-tiles">
+    <div v-for="(item) in directory.properties.items" :key="item.path">
+      <router-link :to="item.path">
+        <gallery-thumbnail :item="item" />
+      </router-link>
+    </div>
+    <div>
+      <!-- Empty item for better flex layout -->
     </div>
   </div>
 </template>
diff --git a/viewer/src/views/GallerySearch.vue b/viewer/src/views/GallerySearch.vue
index 7e61f89..870d3e2 100644
--- a/viewer/src/views/GallerySearch.vue
+++ b/viewer/src/views/GallerySearch.vue
@@ -18,13 +18,16 @@
 -->
 
 <template>
-  <div class="flex">
+  <div class="thumbnail-tiles">
     <div v-for="(item) in items" :key="item.path">
       <router-link :to="item.path" @click.native="$uiStore.setModeNavigation()">
         <gallery-thumbnail :item="item" />
       </router-link>
     </div>
     <div v-if="items.length===0">{{$t('search.no-results')}}</div>
+    <div>
+      <!-- Empty item for better flex layout -->
+    </div>
   </div>
 </template>
 
diff --git a/viewer/src/views/GalleryThumbnail.vue b/viewer/src/views/GalleryThumbnail.vue
index 4d8f604..7ceea4f 100644
--- a/viewer/src/views/GalleryThumbnail.vue
+++ b/viewer/src/views/GalleryThumbnail.vue
@@ -18,8 +18,15 @@
 -->
 
 <template>
-  <div>
-    <img v-if="item.thumbnail" class="thumbnail" :src="pictureSrc" :title="item.path" />
+  <div class="forcedsize" :class="{preload: loading}">
+    <v-lazy-image
+      v-if="item.thumbnail"
+      class="thumbnail"
+      :src="pictureSrc"
+      :title="item.path"
+      @intersect="loading=true"
+      @load="loading=false"
+    />
     <div v-else class="flex-column flex-center">
       <fa-icon icon="folder" class="fa-4x" />
       {{item.path}}
@@ -34,6 +41,8 @@ import { Component, Vue, Prop } from "vue-property-decorator";
 export default class GalleryThumbnail extends Vue {
   @Prop({ required: true }) readonly item!: Gallery.Item;
 
+  loading: boolean = false;
+
   get pictureSrc() {
     return `${process.env.VUE_APP_DATA_URL}${this.item.thumbnail}`;
   }
@@ -41,8 +50,29 @@ export default class GalleryThumbnail extends Vue {
 </script>
 
 <style lang="scss">
+@import "@/assets/scss/theme.scss";
+
 .thumbnail {
   max-width: 250px;
   max-height: 250px;
 }
+.preload {
+  background: linear-gradient(to right, rgba(0, 0, 0, 0) 8%, $loader-color 18%, rgba(0, 0, 0, 0) 33%);
+  background-size: 200% 50px;
+  animation: preloadAnimation 2s infinite linear;