111 lines
3 KiB
Vue
111 lines
3 KiB
Vue
<template>
|
||
<Dialog
|
||
id="virtual-sample"
|
||
v-model:visible="isOpen"
|
||
modal
|
||
:draggable="false"
|
||
header="Titre du rendu"
|
||
class="dialog"
|
||
:class="{ 'with-comments': isCommentsOpen }"
|
||
:closeOnEscape="true"
|
||
>
|
||
<template #header>
|
||
<div class="dialog__tabs">
|
||
<button
|
||
class="btn btn--transparent | font-serif"
|
||
data-icon="cursor"
|
||
aria-pressed="true"
|
||
>
|
||
<span>Vue Dynamique</span>
|
||
</button>
|
||
<button class="btn btn--transparent | font-serif" data-icon="image">
|
||
<span>Vue statique</span>
|
||
</button>
|
||
</div>
|
||
<h2 class="font-serif text-lg">Titre du rendu</h2>
|
||
</template>
|
||
<div class="dialog__inner">
|
||
<header class="flex">
|
||
<div class="options-selector">
|
||
<button
|
||
class="btn btn--image"
|
||
aria-pressed="true"
|
||
style="
|
||
--btn-image: url('https://images.unsplash.com/photo-1708486855543-6010a133280f?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTJ8fHBhcmZ1bWUlMjBib3R0bGV8ZW58MHx8MHx8fDA%3D');
|
||
"
|
||
>
|
||
<span>Piste 1</span>
|
||
</button>
|
||
<button
|
||
class="btn btn--image"
|
||
style="
|
||
--btn-image: url('https://images.unsplash.com/photo-1680607622631-1e243ddd6782?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8cGFyZnVtZSUyMGJvdHRsZXxlbnwwfHwwfHx8MA%3D%3D');
|
||
"
|
||
>
|
||
<span>Piste 2</span>
|
||
</button>
|
||
</div>
|
||
<button class="btn | ml-auto">
|
||
<span>Comparer les pistes</span>
|
||
</button>
|
||
</header>
|
||
|
||
<ProductViewer />
|
||
</div>
|
||
<template #footer>
|
||
<button
|
||
id="download-image"
|
||
class="btn btn--white-10"
|
||
data-icon="download"
|
||
>
|
||
<span>Sauvegarder l’image</span>
|
||
</button>
|
||
<button
|
||
id="loop-animation"
|
||
class="btn btn--transparent btn--outline"
|
||
data-icon="loop"
|
||
>
|
||
<span>Animation en boucle</span>
|
||
</button>
|
||
<button
|
||
id="toggle-comments"
|
||
:aria-pressed="isCommentsOpen"
|
||
class="btn btn--transparent btn--outline"
|
||
data-icon="comment"
|
||
@click="isCommentsOpen = !isCommentsOpen"
|
||
>
|
||
<span class="sr-only">Afficher les commentaires</span>
|
||
</button>
|
||
<Comments
|
||
v-if="isCommentsOpen"
|
||
:current-page-index="currentPageIndex"
|
||
:file="file"
|
||
:comments="file.comments"
|
||
@update:file="changeFile"
|
||
/>
|
||
</template>
|
||
</Dialog>
|
||
</template>
|
||
|
||
<script setup>
|
||
import Dialog from "primevue/dialog";
|
||
import { ref, watch } from "vue";
|
||
import ProductViewer from "./ProductViewer.vue";
|
||
|
||
const { file } = defineProps({
|
||
file: Object,
|
||
});
|
||
|
||
// Variables
|
||
const isOpen = ref(false);
|
||
watch(isOpen, (newValue) => {
|
||
emits("close");
|
||
});
|
||
const isCommentsOpen = ref(false);
|
||
</script>
|
||
|
||
<style scoped>
|
||
.dialog__inner {
|
||
padding: var(--space-16);
|
||
}
|
||
</style>
|