From e8d796872be24a7de5bfc8c59ed9d12a21a6d374 Mon Sep 17 00:00:00 2001
From: clement franckelemon <clement.franckelemon.etu@univ-lille.fr>
Date: Sun, 2 Mar 2025 01:25:23 +0100
Subject: [PATCH] :lipstick: add project image visualizer
---
src/components/ImageDialog.vue | 23 +++++++++++++++++++++++
src/components/ImageView.vue | 7 +++++++
2 files changed, 30 insertions(+)
create mode 100644 src/components/ImageDialog.vue
diff --git a/src/components/ImageDialog.vue b/src/components/ImageDialog.vue
new file mode 100644
index 0000000..2c6541f
--- /dev/null
+++ b/src/components/ImageDialog.vue
@@ -0,0 +1,23 @@
+<template>
+ <q-dialog>
+ <div class="column justify-center items-center content-center" >
+ <q-btn icon="close" size="lg" class="absolute q-mt-md bg-secondary" style="top: 0px; z-index: 20000" text-color="primary" unelevated round v-close-popup />
+ <div class="absolute" style="margin: 10%; height: auto">
+ <img class="full-height full-width" style="border-radius: 10px" :src="src" />
+ </div>
+ </div>
+ </q-dialog>
+</template>
+
+<script setup lang="ts">
+defineProps({
+ src: {
+ type: String,
+ required: true
+ }
+})
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/ImageView.vue b/src/components/ImageView.vue
index 1335eff..1f9b88e 100644
--- a/src/components/ImageView.vue
+++ b/src/components/ImageView.vue
@@ -19,9 +19,11 @@
>
<swiper-slide v-for="{src,nb} in imageProjet" zoom :key="nb">
<img
+ class="cursor-pointer"
:src="src"
loading="lazy"
style="border-radius: 10px"
+ @click="showImg = true;imgSelected = src"
/>
<div
class="swiper-lazy-preloader swiper-lazy-preloader-white"
@@ -29,6 +31,7 @@
>
</swiper>
</div>
+ <image-dialog v-model="showImg" :src="imgSelected" />
</template>
<script setup lang="ts">
@@ -44,6 +47,10 @@ import 'swiper/css/navigation';
import TitleComposant from 'components/TitleComposant.vue';
import type { PropType } from 'vue';
import images from './images';
+import ImageDialog from 'components/ImageDialog.vue'
+
+const imgSelected = ref('')
+const showImg = ref(false)
const props = defineProps({
id: {
--
GitLab