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

Add custom comment cursor #4

Browse source
This commit is contained in:
Timothée Goguely 2024-11-19 16:31:38 +01:00
parent fa0801668c
commit 78c09254fa
4 changed files with 18 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

6
public/assets/svg/comment-bubble.svg
View file

@ -1,6 +0,0 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="white" xmlns="http://www.w3.org/2000/svg">
<path d="M4.625 9.625C4.97018 9.625 5.25 9.34518 5.25 9C5.25 8.65482 4.97018 8.375 4.625 8.375C4.27982 8.375 4 8.65482 4 9C4 9.34518 4.27982 9.625 4.625 9.625Z" stroke="black" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M8.6875 9.625C9.03268 9.625 9.3125 9.34518 9.3125 9C9.3125 8.65482 9.03268 8.375 8.6875 8.375C8.34232 8.375 8.0625 8.65482 8.0625 9C8.0625 9.34518 8.34232 9.625 8.6875 9.625Z" stroke="black" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12.75 9.625C13.0952 9.625 13.375 9.34518 13.375 9C13.375 8.65482 13.0952 8.375 12.75 8.375C12.4048 8.375 12.125 8.65482 12.125 9C12.125 9.34518 12.4048 9.625 12.75 9.625Z" stroke="black" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M9 0.875001C7.5303 0.875459 6.08825 1.27455 4.82743 2.02977C3.56661 2.78499 2.53425 3.86805 1.84029 5.1636C1.14634 6.45914 0.816789 7.91866 0.886737 9.38669C0.956684 10.8547 1.42351 12.2763 2.2375 13.5L0.875 17.125L5.4375 16.3C6.53613 16.8369 7.74178 17.1188 8.96456 17.1249C10.1873 17.131 11.3957 16.8609 12.4996 16.335C13.6035 15.809 14.5745 15.0407 15.3401 14.0872C16.1057 13.1338 16.6462 12.0198 16.9214 10.8284C17.1966 9.63696 17.1993 8.39878 16.9293 7.20616C16.6593 6.01354 16.1237 4.89723 15.3622 3.94046C14.6008 2.98368 13.6332 2.21111 12.5316 1.68034C11.43 1.14957 10.2228 0.87428 9 0.875001Z" stroke="black" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 1.6 KiB

4
src/assets/css/src/3.utilities.icons.css
View file

@ -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] {

13
src/components/comments/Comments.vue
View file

@ -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;
}
</style>

13
src/components/project/brief/PdfViewer.vue
View file

@ -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);
});
}
</script>
<style>
.comment-bubble {
position: absolute;
display: block;
width: 1.2rem;
height: 1.2rem;
background: url("/assets/svg/comment-bubble.svg") no-repeat !important;
cursor: pointer !important;
z-index: 999;
}
#vpv-container {
width: var(--dialog-max-w);
height: calc(var(--dialog-max-h) - var(--dialog-header-h));