studio-variable/designtopack
3
0
Fork 0
Code Issues 7 Pull requests Projects Releases Packages Wiki Activity Actions

comments : prepare new comment working

Browse source
This commit is contained in:
isUnknown 2024-10-23 09:48:27 +02:00
parent f2255d50aa
commit a9992b0ff5
6 changed files with 136 additions and 110 deletions
Download patch file Download diff file Expand all files Collapse all files

105
src/components/project/client-brief/PdfViewer.vue
View file

@ -20,94 +20,23 @@
local="fr_FR"
@loaded="onPdfLoaded"
/>
<button id="toggle-comments" aria-pressed="false" class="btn btn--transparent" data-icon="comment">
<button
id="toggle-comments"
aria-pressed="false"
class="btn btn--transparent"
data-icon="comment"
@click="isCommentsOpen = !isCommentsOpen"
>
<span class="sr-only">Afficher les commentaires</span>
</button>
<aside id="comments-container" aria-labelledby="comments-label">
<h2 id="comments-label" class="sr-only">Commentaires</h2>
<div class="comments | flow">
<article class="comment | flow" data-status="unread">
<header>
<p>
<strong>François</strong>
<span class="comment__id">#1</span> • <span class="comment__page">Page 12</span>
<time datetime="2024-10-22">Hier</time>
</p>
</header>
<p class="comment__body">Lectus adipiscing nulla quis odio in aliquam. Adipiscing libero in consequat porta mauris hendrerit malesuada viverra turpis.</p>
</article>
<article class="comment | flow" data-status="read">
<header>
<p>
<strong>Claire</strong>
<span class="comment__id">#1</span> • <span class="comment__page">Page 12</span>
<time datetime="2024-10-22">Hier</time>
</p>
</header>
<p class="comment__body">Lectus adipiscing nulla quis odio in aliquam. Adipiscing libero in consequat porta mauris hendrerit malesuada viverra turpis.</p>
<footer>
<p>1 réponse</p>
</footer>
</article>
<article class="comment | flow" data-status="read">
<header>
<p>
<strong>Claire</strong>
<span class="comment__id">#1</span> • <span class="comment__page">Page 12</span>
<time datetime="2024-10-22">Hier</time>
</p>
</header>
<p class="comment__body">Lectus adipiscing nulla quis odio in aliquam. Adipiscing libero in consequat porta mauris hendrerit malesuada viverra turpis.</p>
<footer>
<p>1 réponse</p>
</footer>
</article>
<article class="comment | flow" data-status="read">
<header>
<p>
<strong>Claire</strong>
<span class="comment__id">#1</span> • <span class="comment__page">Page 12</span>
<time datetime="2024-10-22">Hier</time>
</p>
</header>
<p class="comment__body">Lectus adipiscing nulla quis odio in aliquam. Adipiscing libero in consequat porta mauris hendrerit malesuada viverra turpis.</p>
<footer>
<p>1 réponse</p>
</footer>
</article>
<article class="comment | flow" data-status="read">
<header>
<p>
<strong>Claire</strong>
<span class="comment__id">#1</span> • <span class="comment__page">Page 12</span>
<time datetime="2024-10-22">Hier</time>
</p>
</header>
<p class="comment__body">Lectus adipiscing nulla quis odio in aliquam. Adipiscing libero in consequat porta mauris hendrerit malesuada viverra turpis.</p>
<footer>
<p>1 réponse</p>
</footer>
</article>
</div>
<!-- Ajouter un commentaire -->
<button id="add-comment" class="btn btn--white-20 | w-full">Ajouter un commentaire</button>
<!--
<form action="" method="post" class="flow">
<label class="sr-only" for="comment">Votre commentaire</label>
<textarea name="comment" id="comment" placeholder="Ajouter un commentaire" rows="3" class="text-sm | rounded-lg bg-black p-12"></textarea>
<footer class="flex">
<button class="btn btn--white-20">Annuler</button>
<input type="submit" class="btn btn--tranparent">
</footer>
</form>
-->
</aside>
<Comments v-if="isCommentsOpen" :current-page="currentPage" />
</div>
</Dialog>
</template>
<script setup>
import Dialog from "primevue/dialog";
import Comments from "../../comments/Comments.vue";
import { VPdfViewer, useLicense } from "@vue-pdf-viewer/viewer";
import { ref, watch } from "vue";
@ -120,11 +49,15 @@ const emit = defineEmits("close");
const licenseKey = import.meta.env.VITE_VPV_LICENSE;
useLicense({ licenseKey });
// Variables
const isOpen = ref(true);
watch(isOpen, (newValue) => {
emit("close");
});
const isCommentsOpen = ref(false);
const currentPage = ref(1);
// Functions
const onPdfLoaded = () => {
const wrapper = document.querySelector(".vpv-pages-inner-container");
@ -132,7 +65,9 @@ const onPdfLoaded = () => {
(entries) => {
entries.forEach((entry, index) => {
if (entry.intersectionRatio > 0.5) {
console.log(entry.target.getAttribute("aria-label"));
currentPage.value = parseInt(
entry.target.getAttribute("aria-label").split(" ")[1]
);
}
});
},
@ -211,7 +146,7 @@ const onPdfLoaded = () => {
position: absolute;
right: var(--space-16);
bottom: var(--space-16);
padding: .625rem;
padding: 0.625rem;
}
#comments-container {
background-color: black;
@ -257,14 +192,14 @@ const onPdfLoaded = () => {
color: var(--color-grey-700);
}
.comment[data-status="unread"] header p > :first-child::before {
content: '';
content: "";
display: inline-block;
width: 0.375rem;
height: 0.375rem;
border-radius: 50%;
background: var(--color-primary);
margin-right: var(--space-8);
margin-bottom: .075em;
margin-bottom: 0.075em;
}
.comment[data-status="unread"] header strong,
.comment[data-status="unread"] footer {
@ -274,7 +209,7 @@ const onPdfLoaded = () => {
color: var(--color-primary);
}
#comments-container form {
--flow-space: .5rem;
--flow-space: 0.5rem;
flex-direction: column;
position: -webkit-sticky;
position: sticky;