Skip to content
Snippets Groups Projects
Verified Commit 6e5500ce authored by BARBIER Marc's avatar BARBIER Marc
Browse files

image fullscreen preview

parent 7cb73490
No related branches found
No related tags found
No related merge requests found
......@@ -2,12 +2,22 @@
display: flex;
img {
width: 4rem;
pointer-events: none;
}
border-radius: 10px;
padding: 10px;
margin-bottom: 5px;
background-color: lightblue;
.fullscreen {
width: 70vw;
height: 70vh;
position: fixed;
top: 15vh;
left: 15vw;
z-index: 100;
background-color: rgba(0, 0, 0, 0.5);
}
}
header {
......
......@@ -15,7 +15,8 @@ export default defineComponent({
files: [] as { id: number, name: string, file: Blob}[],
currentDrag: {} as DragEvent,
projects: [] as Project[],
selectedProject: ""
selectedProject: "",
currentOver: null as number | null
}
},
computed: {
......
......@@ -17,7 +17,13 @@
@dragenter="enter"
@dragexit="exit"
>
<img :src="file.src">
<img :src="file.src" class="fullscreenimg"
@dragstart="() => false"
@mouseover="currentOver = file.id"
@mouseleave="currentOver = null"
alt=""
>
<img class="fullscreen" v-if="currentOver === file.id" :src="file.src" alt="">
<input type="hidden" name="id" :value="file.id">
<p>{{ file.name }}</p>
</div>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment