diff --git a/public/assets/svg/comment-bubble.svg b/public/assets/svg/comment-bubble.svg deleted file mode 100644 index 87e2cb3..0000000 --- a/public/assets/svg/comment-bubble.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/src/assets/css/src/3.utilities.icons.css b/src/assets/css/src/3.utilities.icons.css index 25147c3..09c34a3 100644 --- a/src/assets/css/src/3.utilities.icons.css +++ b/src/assets/css/src/3.utilities.icons.css @@ -28,6 +28,10 @@ --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"); + --icon-comment-default: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13.973 27C12.1247 27 10.2642 26.6093 8.52348 25.8037C8.01058 25.598 7.53034 25.4045 7.18558 25.4045C6.78881 25.4069 6.25534 25.5908 5.74002 25.7686C4.68277 26.1315 3.36665 26.5839 2.39286 25.6138C1.4227 24.6424 1.87028 23.33 2.23076 22.2739C2.40859 21.7538 2.59125 21.2167 2.59125 20.8103C2.59125 20.4764 2.43036 20.0506 2.18359 19.4373C-0.0821271 14.5443 0.965448 8.64734 4.80857 4.80674C7.26179 2.35238 10.5267 1 14.0021 1C17.4775 1 20.7436 2.35117 23.1968 4.80553C28.2677 9.87634 28.2677 18.1261 23.1968 23.1969C20.7109 25.6839 17.3638 27 13.973 27Z' fill='%239DA0A0' stroke='%23373838' stroke-width='2'/%3E%3C/svg%3E%0A"); + --icon-comment-new: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13.973 27C12.1247 27 10.2642 26.6093 8.52348 25.8037C8.01058 25.598 7.53034 25.4045 7.18558 25.4045C6.78881 25.4069 6.25534 25.5908 5.74002 25.7686C4.68277 26.1315 3.36665 26.5839 2.39286 25.6138C1.4227 24.6424 1.87028 23.33 2.23076 22.2739C2.40859 21.7538 2.59125 21.2167 2.59125 20.8103C2.59125 20.4764 2.43036 20.0506 2.18359 19.4373C-0.0821271 14.5443 0.965448 8.64734 4.80857 4.80674C7.26179 2.35238 10.5267 1 14.0021 1C17.4775 1 20.7436 2.35117 23.1968 4.80553C28.2677 9.87634 28.2677 18.1261 23.1968 23.1969C20.7109 25.6839 17.3638 27 13.973 27Z' fill='%2300968F' stroke='white'/%3E%3C/svg%3E%0A"); + --icon-comment-focus: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13.973 27C12.1247 27 10.2642 26.6093 8.52348 25.8037C8.01058 25.598 7.53034 25.4045 7.18558 25.4045C6.78881 25.4069 6.25534 25.5908 5.74002 25.7686C4.68277 26.1315 3.36665 26.5839 2.39286 25.6138C1.4227 24.6424 1.87028 23.33 2.23076 22.2739C2.40859 21.7538 2.59125 21.2167 2.59125 20.8103C2.59125 20.4764 2.43036 20.0506 2.18359 19.4373C-0.0821271 14.5443 0.965448 8.64734 4.80857 4.80674C7.26179 2.35238 10.5267 1 14.0021 1C17.4775 1 20.7436 2.35117 23.1968 4.80553C28.2677 9.87634 28.2677 18.1261 23.1968 23.1969C20.7109 25.6839 17.3638 27 13.973 27Z' fill='%239DA0A0' stroke='%2300968F' stroke-width='2'/%3E%3C/svg%3E%0A"); + --icon-comment-cursor: url("data:image/svg+xml,%3Csvg width='26' height='26' viewBox='0 0 26 26' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.973 26C11.1247 26 9.26419 25.6093 7.52348 24.8037C7.01058 24.598 6.53034 24.4045 6.18558 24.4045C5.78881 24.4069 5.25534 24.5908 4.74002 24.7686C3.68277 25.1315 2.36665 25.5839 1.39286 24.6138C0.422704 23.6424 0.870283 22.33 1.23076 21.2739C1.40859 20.7538 1.59125 20.2167 1.59125 19.8103C1.59125 19.4764 1.43036 19.0506 1.18359 18.4373C-1.08213 13.5443 -0.0345516 7.64734 3.80857 3.80674C6.26179 1.35238 9.52669 0 13.0021 0C16.4775 0 19.7436 1.35117 22.1968 3.80553C27.2677 8.87634 27.2677 17.1261 22.1968 22.1969C19.7109 24.6839 16.3638 26 12.973 26Z' fill='%23191919'/%3E%3C/svg%3E%0A"); } [data-icon] { diff --git a/src/components/comments/Comments.vue b/src/components/comments/Comments.vue index 3958d88..1d2b679 100644 --- a/src/components/comments/Comments.vue +++ b/src/components/comments/Comments.vue @@ -355,6 +355,17 @@ function openComment(comment) { .vpv-pages-inner-container.waiting-comment .page-inner-container, .vpv-pages-inner-container.waiting-comment .vpv-text-layer-text, .vpv-pages-inner-container.waiting-comment .vpv-text-layer-wrapper { - cursor: cell !important; + cursor: var(--icon-comment-cursor) -2 28, cell !important; +} + +.comment-marker { + position: absolute; + display: block; + width: 1.75rem; + height: 1.75rem; + background: var(--icon-comment-default) no-repeat center / contain; + cursor: pointer !important; + z-index: 999; + overflow: visible; } diff --git a/src/components/project/brief/PdfViewer.vue b/src/components/project/brief/PdfViewer.vue index 69efbed..f3cb9e2 100644 --- a/src/components/project/brief/PdfViewer.vue +++ b/src/components/project/brief/PdfViewer.vue @@ -126,7 +126,7 @@ function setCommentBubbles() { comments.value.forEach((comment) => { const bubble = document.createElement("a"); - bubble.classList.add("comment-bubble"); + bubble.classList.add("comment-marker"); bubble.style.left = comment.position.x + "%"; bubble.style.top = comment.position.y + "%"; bubble.href = "#comment-" + comment.id; @@ -154,22 +154,13 @@ function unhighlight(comment) { } function removeCommentBubbles() { - document.querySelectorAll(".comment-bubble").forEach((bubble) => { + document.querySelectorAll(".comment-marker").forEach((bubble) => { bubble.parentNode.removeChild(bubble); }); }