From eed6f69f8fefbfc664510f99e64fa836e46084d5 Mon Sep 17 00:00:00 2001
From: timotheegoguely <timothee@goguely.com>
Date: Wed, 30 Oct 2024 16:41:29 +0100
Subject: [PATCH] Add VirtualSample dialogD, create .dialog class

---
 src/assets/css/index.css                      |   1 +
 src/assets/css/src/2.blocks.button.css        | 126 ++++++++++++------
 src/assets/css/src/2.blocks.dialog.css        |  87 ++++++++++++
 src/components/project/VirtualSample.vue      | 110 ++++++++++++++-
 .../project/client-brief/PdfViewer.vue        |  40 +-----
 5 files changed, 283 insertions(+), 81 deletions(-)
 create mode 100644 src/assets/css/src/2.blocks.dialog.css

diff --git a/src/assets/css/index.css b/src/assets/css/index.css
index c65682a..8ec4f2a 100644
--- a/src/assets/css/index.css
+++ b/src/assets/css/index.css
@@ -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';
diff --git a/src/assets/css/src/2.blocks.button.css b/src/assets/css/src/2.blocks.button.css
index 1724d7d..feb2ddd 100644
--- a/src/assets/css/src/2.blocks.button.css
+++ b/src/assets/css/src/2.blocks.button.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);
   }
 }
 
diff --git a/src/assets/css/src/2.blocks.dialog.css b/src/assets/css/src/2.blocks.dialog.css
new file mode 100644
index 0000000..738408a
--- /dev/null
+++ b/src/assets/css/src/2.blocks.dialog.css
@@ -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);
+}
\ No newline at end of file
diff --git a/src/components/project/VirtualSample.vue b/src/components/project/VirtualSample.vue
index 9b55787..9d200f3 100644
--- a/src/components/project/VirtualSample.vue
+++ b/src/components/project/VirtualSample.vue
@@ -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>
diff --git a/src/components/project/client-brief/PdfViewer.vue b/src/components/project/client-brief/PdfViewer.vue
index 4b6f6df..02736b8 100644
--- a/src/components/project/client-brief/PdfViewer.vue
+++ b/src/components/project/client-brief/PdfViewer.vue
@@ -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>