Add VirtualSample dialogD, create .dialog class
This commit is contained in:
parent
5e227d9fc3
commit
eed6f69f8f
5 changed files with 283 additions and 81 deletions
|
|
@ -17,6 +17,7 @@
|
|||
@import 'src/2.blocks.badge.css';
|
||||
@import 'src/2.blocks.button.css';
|
||||
@import 'src/2.blocks.card.css';
|
||||
@import 'src/2.blocks.dialog.css';
|
||||
@import 'src/2.blocks.header.css';
|
||||
@import 'src/2.blocks.pill.css';
|
||||
@import 'src/2.blocks.skip-link.css';
|
||||
|
|
|
|||
|
|
@ -1,15 +1,15 @@
|
|||
/* BUTTON BLOCK */
|
||||
|
||||
.btn {
|
||||
--background: var(--color-primary-100);
|
||||
--color: var(--color-white);
|
||||
--border-color: transparent;
|
||||
--btn-background: var(--color-primary-100);
|
||||
--btn-color: var(--color-white);
|
||||
--btn-border-color: transparent;
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: var(--space-8);
|
||||
padding: .6rem var(--space-16) .75em;
|
||||
padding: .6em var(--space-16) .75em;
|
||||
max-height: 2.5rem;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
|
|
@ -18,9 +18,13 @@
|
|||
font-weight: 500;
|
||||
border-radius: var(--rounded-lg);
|
||||
cursor: pointer;
|
||||
background-color: var(--background, var(--color-primary-100));
|
||||
color: var(--color, var(--color-white));
|
||||
border: 1px solid var(--border-color);
|
||||
background-color: var(--btn-background, var(--color-primary-100));
|
||||
color: var(--btn-color, var(--color-white));
|
||||
border: 1px solid var(--btn-border-color);
|
||||
}
|
||||
|
||||
.btn.font-serif {
|
||||
padding-bottom: .65em;
|
||||
}
|
||||
|
||||
.btn[disabled] {
|
||||
|
|
@ -33,60 +37,63 @@
|
|||
.btn:active,
|
||||
.btn[aria-pressed="true"],
|
||||
input[type="checkbox"]:checked + .btn--primary {
|
||||
--background: var(--color-primary-100);
|
||||
--border-color: var(--color-primary-100);
|
||||
--color: var(--color-white);
|
||||
--btn-background: var(--color-primary-100);
|
||||
--btn-border-color: var(--color-primary-100);
|
||||
--btn-color: var(--color-white);
|
||||
}
|
||||
|
||||
.btn--primary {
|
||||
--background: transparent;
|
||||
--border-color: var(--color-primary-10);
|
||||
--color: var(--color-primary);
|
||||
--btn-background: transparent;
|
||||
--btn-border-color: var(--color-primary-10);
|
||||
--btn-color: var(--color-primary);
|
||||
}
|
||||
.btn--primary.active:hover,
|
||||
.btn--primary[aria-pressed="true"]:hover {
|
||||
--background: var(--color-primary-hover);
|
||||
--border-color: var(--color-primary-hover);
|
||||
--btn-background: var(--color-primary-hover);
|
||||
--btn-border-color: var(--color-primary-hover);
|
||||
}
|
||||
|
||||
.btn--secondary {
|
||||
--background: var(--color-black-10);
|
||||
--border-color: transparent;
|
||||
--color: var(--color-black);
|
||||
--btn-background: var(--color-black-10);
|
||||
--btn-border-color: transparent;
|
||||
--btn-color: var(--color-black);
|
||||
}
|
||||
|
||||
.btn--black {
|
||||
--background: var(--color-black);
|
||||
--color: var(--color-white);
|
||||
--btn-background: var(--color-black);
|
||||
--btn-color: var(--color-white);
|
||||
}
|
||||
.btn--black-10 {
|
||||
--background: var(--color-black-10);
|
||||
--color: var(--color-black);
|
||||
--btn-background: var(--color-black-10);
|
||||
--btn-color: var(--color-black);
|
||||
}
|
||||
|
||||
.btn--grey,
|
||||
.btn--grey-700 {
|
||||
--background: var(--color-grey-700);
|
||||
--color: var(--color-white);
|
||||
--btn-background: var(--color-grey-700);
|
||||
--btn-color: var(--color-white);
|
||||
}
|
||||
|
||||
.btn--white {
|
||||
--background: var(--color-white);
|
||||
--color: var(--color-grey-700);
|
||||
--btn-background: var(--color-white);
|
||||
--btn-color: var(--color-grey-700);
|
||||
}
|
||||
.btn--white-10 {
|
||||
--background: var(--color-white-10);
|
||||
--color: var(--color-white-80);
|
||||
--btn-background: var(--color-white-10);
|
||||
--btn-color: var(--color-white-80);
|
||||
}
|
||||
.btn--white-20 {
|
||||
--background: var(--color-white-20);
|
||||
--color: var(--color-white-90);
|
||||
--btn-background: var(--color-white-20);
|
||||
--btn-color: var(--color-white-90);
|
||||
}
|
||||
|
||||
.btn--transparent {
|
||||
--background: transparent;
|
||||
--color: var(--color-white);
|
||||
--border-color: var(--color-white-20);
|
||||
--btn-background: transparent;
|
||||
--btn-color: var(--color-white);
|
||||
}
|
||||
|
||||
.btn--outline {
|
||||
--btn-border-color: var(--color-white-20);
|
||||
}
|
||||
|
||||
.btn--sm {
|
||||
|
|
@ -102,34 +109,67 @@ input[type="checkbox"]:checked + .btn--primary {
|
|||
padding: .375rem;
|
||||
}
|
||||
|
||||
.btn--image {
|
||||
--btn-background: var(--color-white);
|
||||
--btn-color: var(--color-grey-800);
|
||||
--btn-border-color: var(--color-black-10);
|
||||
--btn-image-w: 2.5rem;
|
||||
overflow: hidden;
|
||||
padding-left: calc(var(--space-16) + var(--btn-image-w));
|
||||
}
|
||||
.btn--image::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
background-image: var(--btn-image);
|
||||
background-size: cover;
|
||||
width: var(--btn-image-w);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
.btn--image[aria-pressed="true"] {
|
||||
--btn-background: var(--color-primary-10);
|
||||
--btn-border-color: var(--color-primary-50);
|
||||
--btn-color: var(--color-primary);
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
.btn:hover {
|
||||
--background: var(--color-primary-hover);
|
||||
--btn-background: var(--color-primary-hover);
|
||||
}
|
||||
.btn--primary:hover {
|
||||
--background: var(--color-primary-10);
|
||||
--btn-background: var(--color-primary-10);
|
||||
}
|
||||
.btn--white:hover {
|
||||
--background: var(--color-white);
|
||||
--btn-background: var(--color-white);
|
||||
}
|
||||
.btn--white-10:hover {
|
||||
--background: var(--color-white-05);
|
||||
--btn-background: var(--color-white-05);
|
||||
}
|
||||
.btn--white-20:hover {
|
||||
--background: var(--color-white-15);
|
||||
--btn-background: var(--color-white-15);
|
||||
}
|
||||
.btn--grey:hover {
|
||||
--background: var(--color-grey-800);
|
||||
--btn-background: var(--color-grey-800);
|
||||
}
|
||||
.btn--secondary:hover {
|
||||
--background: var(--color-black-20);
|
||||
--btn-background: var(--color-black-20);
|
||||
}
|
||||
.btn--transparent:hover {
|
||||
--background: var(--color-white-05);
|
||||
--btn-background: var(--color-white-05);
|
||||
}
|
||||
.btn[aria-pressed="true"]:hover {
|
||||
--background: var(--color-primary-hover);
|
||||
--border-color: var(--color-primary-hover);
|
||||
--btn-background: var(--color-primary-hover);
|
||||
--btn-border-color: var(--color-primary-hover);
|
||||
}
|
||||
.btn--image:hover {
|
||||
--btn-background: var(--color-primary-10);
|
||||
}
|
||||
.btn--image[aria-pressed="true"]:hover {
|
||||
--btn-background: var(--color-primary-20);
|
||||
--btn-border-color: var(--color-primary-50);
|
||||
--btn-color: var(--color-primary-100);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
87
src/assets/css/src/2.blocks.dialog.css
Normal file
87
src/assets/css/src/2.blocks.dialog.css
Normal file
|
|
@ -0,0 +1,87 @@
|
|||
/* DIALOG BLOCK */
|
||||
|
||||
.dialog {
|
||||
--dialog-max-w: min(100vw - var(--gutter) * 2, 77rem);
|
||||
--dialog-max-h: min(100vh - var(--gutter) * 2 - 5.5rem, 50rem);
|
||||
--dialog-header-h: 4.5rem;
|
||||
--dialog-footer-h: 4.5rem;
|
||||
--dialog-comments-w: 22.5rem;
|
||||
width: 100%;
|
||||
max-width: var(--dialog-max-w);
|
||||
height: 100%;
|
||||
max-height: var(--dialog-max-h);
|
||||
color: var(--color-grey-800);
|
||||
border-radius: var(--rounded-2xl);
|
||||
overflow: hidden;
|
||||
background: black;
|
||||
margin: auto !important;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.dialog [data-pc-section="header"] {
|
||||
height: var(--dialog-header-h);
|
||||
padding: 1rem;
|
||||
color: var(--color-white);
|
||||
background: var(--color-white-20);
|
||||
display: flex;
|
||||
gap: var(--space-16);
|
||||
}
|
||||
.dialog [data-pc-section="header"] h2 {
|
||||
font-family: var(--font-serif);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
text-align: center;
|
||||
padding: 0 15rem;
|
||||
line-height: 2.5rem;
|
||||
}
|
||||
.dialog [data-pc-name="pcclosebutton"] {
|
||||
color: var(--color-white);
|
||||
}
|
||||
.dialog__tabs {
|
||||
display: flex;
|
||||
gap: var(--space-4);
|
||||
background: var(--color-black);
|
||||
border-radius: var(--rounded-lg);
|
||||
outline: 4px solid var(--color-black);
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
.dialog__tabs .btn {
|
||||
align-items: center;
|
||||
font-size: var(--text-md);
|
||||
}
|
||||
.dialog__tabs .btn:hover {
|
||||
--btn-background: var(--color-white-10);
|
||||
}
|
||||
.dialog__tabs .btn[aria-pressed="true"] {
|
||||
--btn-background: var(--color-white);
|
||||
--btn-color: var(--color-text);
|
||||
|
||||
}
|
||||
|
||||
/* Inner */
|
||||
.dialog__inner {
|
||||
background: var(--dialog-inner-background, #F7F7F7);
|
||||
height: 100%;
|
||||
}
|
||||
.dialog__inner > header {
|
||||
background: var(--color-white-50);
|
||||
border-radius: var(--rounded-xl);
|
||||
padding: var(--space-8);
|
||||
border: var(--border-width) solid var(--color-grey-200);
|
||||
}
|
||||
.dialog__inner .options-selector {
|
||||
display: flex;
|
||||
gap: var(--space-8);
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
.dialog [data-pc-section="footer"] {
|
||||
height: var(--footer-h);
|
||||
padding: 1rem;
|
||||
color: var(--color-white);
|
||||
background: var(--color-white-20);
|
||||
display: flex;
|
||||
gap: var(--space-16);
|
||||
}
|
||||
|
|
@ -1,5 +1,109 @@
|
|||
<template>
|
||||
<div>Échantillon virtuel</div>
|
||||
<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>
|
||||
</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></script>
|
||||
<style scoped></style>
|
||||
|
||||
<script setup>
|
||||
import Dialog from "primevue/dialog";
|
||||
import { ref, watch } from "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>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
modal
|
||||
:draggable="false"
|
||||
header="Titre du PDF"
|
||||
class="w-full | text-grey-800 | rounded-2xl | overflow-hidden"
|
||||
class="dialog"
|
||||
:class="{ 'with-comments': isCommentsOpen }"
|
||||
:closeOnEscape="true"
|
||||
>
|
||||
|
|
@ -24,7 +24,7 @@
|
|||
<button
|
||||
id="toggle-comments"
|
||||
:aria-pressed="isCommentsOpen"
|
||||
class="btn btn--transparent"
|
||||
class="btn btn--transparent btn--outline"
|
||||
data-icon="comment"
|
||||
@click="isCommentsOpen = !isCommentsOpen"
|
||||
>
|
||||
|
|
@ -111,44 +111,14 @@ function changeFile(newFile) {
|
|||
</script>
|
||||
|
||||
<style>
|
||||
#add-pdf {
|
||||
--max-w: min(100vw - var(--gutter) * 2, 77rem);
|
||||
--max-h: calc(100vh - var(--gutter) * 2 - 5.5rem);
|
||||
--header-h: 4.5rem;
|
||||
--comments-w: 22.5rem;
|
||||
max-width: var(--max-w);
|
||||
height: var(--max-h);
|
||||
background: black;
|
||||
margin: auto !important;
|
||||
}
|
||||
#add-pdf [data-pc-section="header"] {
|
||||
height: var(--header-h);
|
||||
padding: 1rem;
|
||||
color: var(--color-white);
|
||||
background: var(--color-white-20);
|
||||
display: flex;
|
||||
gap: var(--space-16);
|
||||
}
|
||||
#add-pdf [data-pc-section="header"] h2 {
|
||||
font-family: var(--font-serif);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
text-align: center;
|
||||
padding: 0 15rem;
|
||||
line-height: 2.5rem;
|
||||
}
|
||||
#add-pdf [data-pc-name="pcclosebutton"] {
|
||||
color: var(--color-white);
|
||||
}
|
||||
#vpv-container {
|
||||
width: var(--max-w);
|
||||
height: calc(var(--max-h) - var(--header-h));
|
||||
width: var(--dialog-max-w);
|
||||
height: calc(var(--dialog-max-h) - var(--dialog-header-h));
|
||||
background: black;
|
||||
position: relative;
|
||||
}
|
||||
.with-comments .vpv-pages-container-wrapper {
|
||||
margin-right: var(--comments-w, 20rem);
|
||||
margin-right: var(--dialog-comments-w, 20rem);
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue