From a37f7ee86ebf519bf52d6c12d2a2be3fd522edc8 Mon Sep 17 00:00:00 2001 From: timotheegoguely Date: Tue, 22 Oct 2024 17:44:30 +0200 Subject: [PATCH] Add comments markup and style to PdfViewer --- src/assets/css/src/0.2.variables.css | 2 + src/assets/css/src/2.blocks.button.css | 36 ++++- src/assets/css/src/2.blocks.card.css | 10 ++ src/assets/css/src/3.utilities.icons.css | 8 + src/components/project/ProjectStep.vue | 5 +- .../project/client-brief/PdfViewer.vue | 151 +++++++++++++++++- 6 files changed, 199 insertions(+), 13 deletions(-) diff --git a/src/assets/css/src/0.2.variables.css b/src/assets/css/src/0.2.variables.css index 3a05ce2..4323229 100755 --- a/src/assets/css/src/0.2.variables.css +++ b/src/assets/css/src/0.2.variables.css @@ -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 */ diff --git a/src/assets/css/src/2.blocks.button.css b/src/assets/css/src/2.blocks.button.css index 941eba5..3572a75 100644 --- a/src/assets/css/src/2.blocks.button.css +++ b/src/assets/css/src/2.blocks.button.css @@ -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 { diff --git a/src/assets/css/src/2.blocks.card.css b/src/assets/css/src/2.blocks.card.css index 893253f..64ec3bf 100644 --- a/src/assets/css/src/2.blocks.card.css +++ b/src/assets/css/src/2.blocks.card.css @@ -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%); diff --git a/src/assets/css/src/3.utilities.icons.css b/src/assets/css/src/3.utilities.icons.css index f92e565..145ee79 100644 --- a/src/assets/css/src/3.utilities.icons.css +++ b/src/assets/css/src/3.utilities.icons.css @@ -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) +} diff --git a/src/components/project/ProjectStep.vue b/src/components/project/ProjectStep.vue index 9b72a4e..da7e4b0 100644 --- a/src/components/project/ProjectStep.vue +++ b/src/components/project/ProjectStep.vue @@ -36,9 +36,8 @@ diff --git a/src/components/project/client-brief/PdfViewer.vue b/src/components/project/client-brief/PdfViewer.vue index 8083f96..7de8447 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="w-full | text-grey-800 | rounded-2xl | overflow-hidden | with-comments" :closeOnEscape="true" > @@ -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); } @@ -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)) {