From 0018aad17f6274da1e284af7246f2015e991114c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jos=C3=A9=20Luis=20Pereira?= <pepelui@outlook.com>
Date: Mon, 22 Aug 2022 23:37:49 -0300
Subject: [PATCH] Update image viewer

---
 config/style/theme.css                                |  2 --
 src/components/ImageViewer/ImageToolbar.vue           |  9 +++------
 src/components/ImageViewer/ImageViewer.global.vue     |  5 ++++-
 src/components/ImageViewer/ImageViewerClose.vue       | 11 +++++++++++
 src/modules/otus/components/Citation/CitationList.vue |  2 +-
 5 files changed, 19 insertions(+), 10 deletions(-)
 create mode 100644 src/components/ImageViewer/ImageViewerClose.vue

diff --git a/config/style/theme.css b/config/style/theme.css
index fddadb3..43c399a 100644
--- a/config/style/theme.css
+++ b/config/style/theme.css
@@ -1,4 +1,3 @@
-
 :root {
   --color-primary: 137, 167, 65;
   --color-primary-content: 255, 255, 255;
@@ -26,4 +25,3 @@
   --color-base-300: 30, 41, 59;
   --color-base-content: 255, 255, 255;
 }
-
diff --git a/src/components/ImageViewer/ImageToolbar.vue b/src/components/ImageViewer/ImageToolbar.vue
index b2bf11a..49a63e6 100644
--- a/src/components/ImageViewer/ImageToolbar.vue
+++ b/src/components/ImageViewer/ImageToolbar.vue
@@ -3,12 +3,9 @@
     <div>
       <slot />
     </div>
-    <button
-      type="button"
-      class="p-2 cursor-pointer opacity-50 text-base-content"
-    >
-      <IconClose />
-    </button>
+    <div>
+      <slot name="right" />
+    </div>
   </div>
 </template>
 
diff --git a/src/components/ImageViewer/ImageViewer.global.vue b/src/components/ImageViewer/ImageViewer.global.vue
index 4c9ff43..e746cb1 100644
--- a/src/components/ImageViewer/ImageViewer.global.vue
+++ b/src/components/ImageViewer/ImageViewer.global.vue
@@ -1,7 +1,6 @@
 <template>
   <div 
     class="fixed z-[10000] h-full overflow-y-hidden overflow-x-hidden w-full top-0 left-0 flex flex-col items-center justify-center backdrop-blur-md bg-base-foreground"
-    @click="emit('close')"
   >
     <div 
       class="min-w-96 dark:bg-slate-900 rounded-lg shadow-sm mb-24"
@@ -72,6 +71,9 @@
         :current-image="index"
         :total-images="images.length"
       />
+      <template #right>
+        <ImageViewerClose @click="emit('close')" />
+      </template>
     </ImageToolbar>
   </div>
 </template>
@@ -86,6 +88,7 @@ import ControlNextImage from './ControlImageNext.vue'
 import ControlPreviousImage from './ControlImagePrevious.vue'
 import GalleryThumbnailList from '@/components/Gallery/GalleryThumbnailList.vue'
 import ImageToolbar from './ImageToolbar.vue'
+import ImageViewerClose from './ImageViewerClose.vue'
 
 const props = defineProps({
   index: {
diff --git a/src/components/ImageViewer/ImageViewerClose.vue b/src/components/ImageViewer/ImageViewerClose.vue
new file mode 100644
index 0000000..a3b0c66
--- /dev/null
+++ b/src/components/ImageViewer/ImageViewerClose.vue
@@ -0,0 +1,11 @@
+<template>
+  <button
+    type="button"
+    class="p-2 cursor-pointer opacity-50 text-base-content"
+  >
+    <IconClose />
+  </button>
+</template>
+
+<script setup>
+</script>
\ No newline at end of file
diff --git a/src/modules/otus/components/Citation/CitationList.vue b/src/modules/otus/components/Citation/CitationList.vue
index 2e7bf05..8ba5544 100644
--- a/src/modules/otus/components/Citation/CitationList.vue
+++ b/src/modules/otus/components/Citation/CitationList.vue
@@ -44,7 +44,7 @@ import OtuService from '../../services/OtuService'
 import CitationRow from './CitationRow.vue'
 import CitationRowShowMore from './CitationRowShowMore.vue'
 
-const MAX_CITATIONS = 5
+const MAX_CITATIONS = 3
 
 const props = defineProps({
   otuId: {