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

Add comments markup and style to PdfViewer

Browse source
This commit is contained in:
Timothée Goguely 2024-10-22 17:44:30 +02:00
parent 3d8f9fc893
commit a37f7ee86e
6 changed files with 199 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

5
src/components/project/ProjectStep.vue
View file

@ -36,9 +36,8 @@
</router-link>
</template>
<template v-if="step.files[0]?.type === 'document'">
<figure @click="showPdf" class="card__images">
À remplacer par picto PDF
</figure>
<div @click="showPdf" class="card__images" data-icon="document">
</div>
</template>
</article>
</div>

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

@ -5,7 +5,7 @@
modal
:draggable="false"
header="Titre du PDF"
class="w-full | text-grey-800 | rounded-2xl | overflow-hidden"
class="w-full | text-grey-800 | rounded-2xl | overflow-hidden | with-comments"
:closeOnEscape="true"
>
<template #header>
@ -20,6 +20,77 @@
local="fr_FR"
@loaded="onPdfLoaded"
/>
<button id="toggle-comments" aria-pressed="false" class="btn btn--transparent" data-icon="comment">
<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>
<button id="add-comment" class="btn btn--white-20 | w-full">Ajouter un commentaire</button>
</aside>
</div>
</Dialog>
</template>
@ -87,6 +158,7 @@ const onPdfLoaded = () => {
--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;
@ -98,7 +170,7 @@ const onPdfLoaded = () => {
color: var(--color-white);
background: var(--color-white-20);
display: flex;
gap: 1rem;
gap: var(--space-16);
}
#add-pdf [data-pc-section="header"] h2 {
font-family: var(--font-serif);
@ -117,6 +189,78 @@ const onPdfLoaded = () => {
width: var(--max-w);
height: calc(var(--max-h) - var(--header-h));
background: black;
position: relative;
}
/* Comments */
.with-comments .vpv-pages-container-wrapper {
margin-right: var(--comments-w, 20rem);
}
#toggle-comments {
position: absolute;
right: var(--space-16);
bottom: var(--space-16);
padding: .625rem;
}
#comments-container {
background-color: black;
position: absolute;
top: 0;
right: 0;
bottom: 4.5rem;
width: var(--comments-w);
padding: var(--space-24) var(--space-32);
}
.comments {
overflow-y: auto;
height: calc(100% - 3.5rem);
margin-bottom: 1rem;
margin-right: -2rem;
padding-right: 2rem;
}
.comment {
--flow-space: var(--space-12);
font-size: var(--text-sm);
border: var(--border);
border-radius: var(--rounded-lg);
padding: var(--space-12);
color: var(--color-grey-400);
}
.comment header p {
display: flex;
gap: var(--space-8);
}
.comment header strong,
.comment footer {
font-weight: 500;
color: var(--color-white);
}
.comment header time {
color: var(--color-primary);
font-weight: 500;
margin-left: auto;
}
.comment[data-status="unread"] {
background: var(--color-white);
border-color: var(--color-white);
color: var(--color-grey-700);
}
.comment[data-status="unread"] header p > :first-child::before {
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;
}
.comment[data-status="unread"] header strong,
.comment[data-status="unread"] footer {
color: var(--color-black);
}
.comment[data-status="unread"] header time {
color: var(--color-primary);
}
</style>
@ -228,6 +372,9 @@ const onPdfLoaded = () => {
:deep(.vpv-input ~ span) {
color: var(--color-grey-400);
}
:deep(.vpv-toolbar-end) {
padding-right: 4rem;
}
:deep(.vpv-toolbar-end > button:nth-child(1)),
:deep(.vpv-toolbar-end > button:nth-child(3)),
:deep(.vpv-toolbar-end > button:nth-child(4)) {