From 5e3282e203cc365f0d5722aab76a69b06390de65 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jos=C3=A9=20Luis=20Pereira?= <pepelui@outlook.com>
Date: Mon, 18 Jul 2022 18:03:18 -0300
Subject: [PATCH] Update image viewer

---
 src/components/Gallery/GalleryThumbnail.vue   |  4 +-
 .../Gallery/GalleryThumbnailList.vue          |  2 +-
 src/components/Gallery/ImageToolbar.vue       | 17 +++++
 src/components/Gallery/ImageViewer.vue        | 74 ++++++++++---------
 src/components/Gallery/ImageViewerCounter.vue | 16 ++++
 src/components/Icon/IconClose.vue             | 19 +++++
 6 files changed, 96 insertions(+), 36 deletions(-)
 create mode 100644 src/components/Gallery/ImageToolbar.vue
 create mode 100644 src/components/Gallery/ImageViewerCounter.vue
 create mode 100644 src/components/Icon/IconClose.vue

diff --git a/src/components/Gallery/GalleryThumbnail.vue b/src/components/Gallery/GalleryThumbnail.vue
index 4f7da1a..f309d64 100644
--- a/src/components/Gallery/GalleryThumbnail.vue
+++ b/src/components/Gallery/GalleryThumbnail.vue
@@ -1,10 +1,10 @@
 <template>
   <div 
-    class="bg-white dark:bg-gray-800 flex flex-col justify-center cursor-pointer w-24 h-24 dark:border-gray-600 rounded-md border box-border"
+    class="bg-white dark:bg-gray-800 flex flex-col justify-center cursor-pointer w-24 h-20 dark:border-gray-600 rounded border box-border"
     :title="title"
   >
     <img 
-      class="max-h-24 max-w-24 h-24 w-24 object-cover rounded-md"
+      class="max-h-24 max-w-24 h-24 w-24 object-cover rounded"
       :src="image.thumb"
     >
   </div>
diff --git a/src/components/Gallery/GalleryThumbnailList.vue b/src/components/Gallery/GalleryThumbnailList.vue
index d1bf2ac..4d6d2a4 100644
--- a/src/components/Gallery/GalleryThumbnailList.vue
+++ b/src/components/Gallery/GalleryThumbnailList.vue
@@ -4,7 +4,7 @@
       v-for="(image, index) in images"
       :key="image.id"
       class="
-        pr-2
+        pr-1.5
         last:pr-0"
     >
       <GalleryThumbnail
diff --git a/src/components/Gallery/ImageToolbar.vue b/src/components/Gallery/ImageToolbar.vue
new file mode 100644
index 0000000..27d3a50
--- /dev/null
+++ b/src/components/Gallery/ImageToolbar.vue
@@ -0,0 +1,17 @@
+<template>
+  <div class="p-2 box-border flex justify-between">
+    <div>
+      <slot />
+    </div>
+    <button
+      type="button"
+      class="p-2  cursor-pointer text-white opacity-50 "
+    >
+      <IconClose />
+    </button>
+  </div>
+</template>
+
+<script setup>
+
+</script>
\ No newline at end of file
diff --git a/src/components/Gallery/ImageViewer.vue b/src/components/Gallery/ImageViewer.vue
index 913f16b..8a1a896 100644
--- a/src/components/Gallery/ImageViewer.vue
+++ b/src/components/Gallery/ImageViewer.vue
@@ -1,37 +1,47 @@
 <template>
   <div 
-    class="fixed z-[10000] bg-opacity-60 bg-black overflow-y-hidden overflow-x-hidden w-full h-full top-0 left-0 flex flex-col items-center justify-center backdrop-blur-md"
+    class="fixed z-[10000] h-full bg-opacity-90 bg-black overflow-y-hidden overflow-x-hidden w-full top-0 left-0 flex flex-col items-center justify-center backdrop-blur-md"
     @click="emit('close')"
   >
     <div 
-      class="min-w-96 dark:bg-slate-900  rounded-lg shadow-sm mb-24"
+      class="min-w-96 dark:bg-slate-900 rounded-lg shadow-sm mb-24"
       @click.stop
     >
-      <VSpinner v-if="isLoading" />
-      <div class="relative rounded-t-lg w-auto bg-white">
+      <div class="absolute rounded-t-lg w-auto max-h-full h-auto top-12 bottom-40 left-0 right-0 flex justify-center align-middle">
+        <VSpinner v-if="isLoading" />
         <img
           ref="imageElement"
-          class="mx-auto cursor-zoom-out max-w-7 w-auto max-w-full max-h-[70vh]"
+          class="mx-auto cursor-zoom-out w-auto max-w-full max-h-full h-auto my-auto"
           :src="image.original"
           @click="emit('close')"
         >
-      </div>
 
+        <ControlNextImage
+          v-if="next"
+          class="right-0 absolute my-auto top-1/2 -translate-y-1/2"
+          @click="emit('next')"
+        />
+        <ControlPreviousImage 
+          v-if="previous"
+          class="left-0 absolute my-auto top-1/2 -translate-y-1/2"
+          @click="emit('previous')"
+        />
+      </div>
+    </div>
+    <div class="bottom-0 fixed overflow-x-auto max-w-full pb-2">
       <div 
         class="
-        bg-white
-        dark:bg-slate-900
-        dark:text-white
+        text-white
+        text-sm
         attributions
-        bottom-0
-        h-24
-        p-4
-        rounded-b-lg
+        p-6
         align-middle
         flex
         justify-between
         flex-col
-        text-center"
+        text-center
+        [text-shadow:0_1px_5px_rgba(0,0,0,1)]
+      "
       >
         <ImageDepictions
           class="my-auto"
@@ -42,34 +52,32 @@
           :attribution="image.attribution"
         />
       </div>
-
-      <ControlNextImage
-        v-if="next"
-        class="right-0 absolute my-auto top-1/2 -translate-y-1/2"
-        @click="emit('next')"
-      />
-      <ControlPreviousImage 
-        v-if="previous"
-        class="left-0 absolute my-auto top-1/2 -translate-y-1/2"
-        @click="emit('previous')"
+      <GalleryThumbnailList
+        :current="index"
+        :images="images"
+        @select-index="emit('selectIndex', $event)"
+        @click.stop
       />
     </div>
-    <GalleryThumbnailList
-      class="bottom-0 fixed overflow-x-auto max-w-full pb-2"
-      :current="index"
-      :images="images"
-      @select-index="emit('selectIndex', $event)"
-      @click.stop
-    />
+    <ImageToolbar
+      class="w-full absolute top-0 h-12 left-0"
+    >
+      <ImageViewerCounter
+        :current-image="index"
+        :total-images="images.length"
+      />
+    </ImageToolbar>
   </div>
 </template>
 
 <script setup>
 import { onMounted, onUnmounted, ref, watch, computed } from 'vue'
-import ImageAttribution from './ImageAttribution.vue';
-import ImageDepictions from './ImageDepictions.vue';
+import ImageAttribution from './ImageAttribution.vue'
+import ImageDepictions from './ImageDepictions.vue'
+import ImageViewerCounter from './ImageViewerCounter.vue'
 import ControlNextImage from './ControlImageNext.vue'
 import ControlPreviousImage from './ControlImagePrevious.vue'
+import ImageToolbar from './ImageToolbar.vue'
 
 const props = defineProps({
   index: {
diff --git a/src/components/Gallery/ImageViewerCounter.vue b/src/components/Gallery/ImageViewerCounter.vue
new file mode 100644
index 0000000..7551ac4
--- /dev/null
+++ b/src/components/Gallery/ImageViewerCounter.vue
@@ -0,0 +1,16 @@
+<template>
+  <span>{{ currentImage + 1 }}/{{ totalImages }}</span>
+</template>
+
+<script setup>
+defineProps({
+  currentImage: {
+    type: Number,
+    required: true
+  },
+  totalImages: {
+    type: Number,
+    required: true
+  }
+})
+</script>
\ No newline at end of file
diff --git a/src/components/Icon/IconClose.vue b/src/components/Icon/IconClose.vue
new file mode 100644
index 0000000..cc287b7
--- /dev/null
+++ b/src/components/Icon/IconClose.vue
@@ -0,0 +1,19 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    class="h-6 w-6"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+    stroke-width="2"
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      d="M6 18L18 6M6 6l12 12"
+    />
+  </svg>
+</template>
+
+<script setup>
+</script>
\ No newline at end of file