Add comments markup and style to PdfViewer
This commit is contained in:
parent
3d8f9fc893
commit
a37f7ee86e
6 changed files with 199 additions and 13 deletions
|
|
@ -7,7 +7,9 @@
|
|||
--font-serif: "Vollkorn", serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
|
||||
/* Colors */
|
||||
--color-white-05: hsla(0, 0%, 100%, .05);/* White 5 */
|
||||
--color-white-10: hsla(0, 0%, 100%, .1); /* White 10 */
|
||||
--color-white-15: hsla(0, 0%, 100%, .15);/* White 15 */
|
||||
--color-white-20: hsla(0, 0%, 100%, .2); /* White 20 */
|
||||
--color-white-50: hsla(0, 0%, 100%, .5); /* White 50 */
|
||||
--color-white-70: hsla(0, 0%, 100%, .7); /* White 70 */
|
||||
|
|
|
|||
|
|
@ -29,19 +29,20 @@
|
|||
color: var(--color-black-20);
|
||||
}
|
||||
|
||||
.btn--primary {
|
||||
--background: transparent;
|
||||
--border-color: var(--color-primary-10);
|
||||
--color: var(--color-primary);
|
||||
}
|
||||
.btn--primary.active,
|
||||
.btn--primary:active,
|
||||
.btn--primary[aria-pressed="true"],
|
||||
.btn.active,
|
||||
.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--primary {
|
||||
--background: transparent;
|
||||
--border-color: var(--color-primary-10);
|
||||
--color: var(--color-primary);
|
||||
}
|
||||
.btn--primary.active:hover,
|
||||
.btn--primary[aria-pressed="true"]:hover {
|
||||
--background: var(--color-primary-hover);
|
||||
|
|
@ -77,6 +78,16 @@ input[type="checkbox"]:checked + .btn--primary {
|
|||
--background: var(--color-white-10);
|
||||
--color: var(--color-grey-700);
|
||||
}
|
||||
.btn--white-20 {
|
||||
--background: var(--color-white-20);
|
||||
--color: var(--color-white);
|
||||
}
|
||||
|
||||
.btn--transparent {
|
||||
--background: transparent;
|
||||
--color: var(--color-white);
|
||||
--border-color: var(--color-white-20);
|
||||
}
|
||||
|
||||
.btn--sm {
|
||||
padding: .375rem var(--space-12) .5rem;
|
||||
|
|
@ -93,12 +104,21 @@ input[type="checkbox"]:checked + .btn--primary {
|
|||
.btn--white:hover {
|
||||
--background: var(--color-white);
|
||||
}
|
||||
.btn--white-10:hover {
|
||||
--background: var(--color-white-05);
|
||||
}
|
||||
.btn--white-20:hover {
|
||||
--background: var(--color-white-15);
|
||||
}
|
||||
.btn--grey:hover {
|
||||
--background: var(--color-grey-800);
|
||||
}
|
||||
.btn--secondary:hover {
|
||||
--background: var(--color-black-20);
|
||||
}
|
||||
.btn--transparent:hover {
|
||||
--background: var(--color-white-05);
|
||||
}
|
||||
}
|
||||
|
||||
.btn:focus-visible {
|
||||
|
|
|
|||
|
|
@ -32,6 +32,16 @@
|
|||
aspect-ratio: 408/220;
|
||||
background-color: var(--color-grey-50);
|
||||
}
|
||||
.card__images[data-icon]::before {
|
||||
--icon: var(--icon-document);
|
||||
--icon-size: 4.5rem;
|
||||
--icon-color: var(--color-grey-300);
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 47.5%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 0;
|
||||
}
|
||||
.card__images[data-count] {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-template-rows: repeat(2, 50%);
|
||||
|
|
|
|||
|
|
@ -24,6 +24,8 @@
|
|||
--icon-description: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.714294 1.42856H19.2857M0.714294 5.71427H15M0.714294 9.99999H10.7143M0.714294 18.5714H19.2857M0.714294 14.2857H15' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
|
||||
--icon-delete: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.4287 7.85722L15.0001 19.2858H5.00014L3.57157 7.85722M1.42871 5.00008H18.5716M6.37157 4.58579V2.11436C6.37157 1.73548 6.52208 1.37212 6.78999 1.10421C7.0579 0.836301 7.42126 0.685791 7.80014 0.685791H12.0859C12.4647 0.685791 12.8281 0.836301 13.096 1.10421C13.3639 1.37212 13.5144 1.73548 13.5144 2.11436V4.97151' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
|
||||
--icon-arrow-left: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.125 10H1.875M1.875 10L6.25 5.625M1.875 10L6.25 14.375' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
|
||||
--icon-document: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.7143 0.714294H3.57145C3.19257 0.714294 2.82921 0.864804 2.5613 1.13271C2.29339 1.40062 2.14288 1.76399 2.14288 2.14287V17.8572C2.14288 18.236 2.29339 18.5994 2.5613 18.8673C2.82921 19.1352 3.19257 19.2857 3.57145 19.2857H16.4286C16.8075 19.2857 17.1708 19.1352 17.4387 18.8673C17.7067 18.5994 17.8572 18.236 17.8572 17.8572V7.85715M10.7143 0.714294L17.8572 7.85715M10.7143 0.714294V7.85715H17.8572' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
|
||||
--icon-comment: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.625 10.625C5.97018 10.625 6.25 10.3452 6.25 10C6.25 9.65482 5.97018 9.375 5.625 9.375C5.27982 9.375 5 9.65482 5 10C5 10.3452 5.27982 10.625 5.625 10.625Z' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9.6875 10.625C10.0327 10.625 10.3125 10.3452 10.3125 10C10.3125 9.65482 10.0327 9.375 9.6875 9.375C9.34232 9.375 9.0625 9.65482 9.0625 10C9.0625 10.3452 9.34232 10.625 9.6875 10.625Z' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M13.75 10.625C14.0952 10.625 14.375 10.3452 14.375 10C14.375 9.65482 14.0952 9.375 13.75 9.375C13.4048 9.375 13.125 9.65482 13.125 10C13.125 10.3452 13.4048 10.625 13.75 10.625Z' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M10 1.875C8.5303 1.87546 7.08825 2.27455 5.82743 3.02977C4.56661 3.78499 3.53425 4.86805 2.84029 6.1636C2.14634 7.45914 1.81679 8.91866 1.88674 10.3867C1.95668 11.8547 2.42351 13.2763 3.2375 14.5L1.875 18.125L6.4375 17.3C7.53613 17.8369 8.74178 18.1188 9.96456 18.1249C11.1873 18.131 12.3957 17.8609 13.4996 17.335C14.6035 16.809 15.5745 16.0407 16.3401 15.0872C17.1057 14.1338 17.6462 13.0198 17.9214 11.8284C18.1966 10.637 18.1993 9.39878 17.9293 8.20616C17.6593 7.01354 17.1237 5.89723 16.3622 4.94046C15.6008 3.98368 14.6332 3.21111 13.5316 2.68034C12.43 2.14957 11.2228 1.87428 10 1.875Z' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
|
||||
}
|
||||
|
||||
[data-icon] {
|
||||
|
|
@ -90,3 +92,9 @@
|
|||
[data-icon="arrow-left"] {
|
||||
--icon: var(--icon-arrow-left)
|
||||
}
|
||||
[data-icon="document"] {
|
||||
--icon: var(--icon-document)
|
||||
}
|
||||
[data-icon="comment"] {
|
||||
--icon: var(--icon-comment)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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)) {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue