From 5640dba7732e02dece3eb54c6c7c8d5aace2cdbc Mon Sep 17 00:00:00 2001 From: Vilhelm Malmberg Eskilsson Date: Sun, 3 Nov 2024 20:56:49 +0100 Subject: [PATCH] Some styling for comment function --- src/doc.css | 52 ++++++++++++++++++++++++++ src/forms/quill-editor.jsx | 18 +++++++-- src/forms/update-form.jsx | 12 +++--- src/minor-components/comment-popup.jsx | 23 ++++++++---- src/quill-classes/comment-blot.js | 22 ++--------- 5 files changed, 91 insertions(+), 36 deletions(-) diff --git a/src/doc.css b/src/doc.css index 50b1e06..8de3df6 100644 --- a/src/doc.css +++ b/src/doc.css @@ -1,4 +1,6 @@ form { + width: 70%; + align-self: center; padding: 2rem; border-radius: 15px; background-color: rgb(236, 229, 216); @@ -66,3 +68,53 @@ form { transform: translateX(-50%); z-index: 10; } + +.form-buttons { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 10px; + button { + width: 40%; + } + :nth-child(even) { + justify-self: end; + } +} + +.comment-popup { + max-width: 60%; + padding: 10px; + position: absolute; + background-color: rgb(236, 229, 216); + display: flex; + flex-direction: column; + + .comment-header { + justify-content: space-between; + display: flex; + * { + align-self: flex-start; + margin: 0; + } + } + + border: solid 1px; + border-radius: 10px; + box-shadow: 3px 3px 3px 3px #333; + + #comment-input { + margin: 5px 0px; + } + + .popup-buttons { + display: flex; + justify-content: space-between; + gap: 10px; + } +} + +.container { + display: flex; + flex-direction: column; + align-items: center; +} diff --git a/src/forms/quill-editor.jsx b/src/forms/quill-editor.jsx index 1aa80e2..ce797eb 100644 --- a/src/forms/quill-editor.jsx +++ b/src/forms/quill-editor.jsx @@ -14,6 +14,7 @@ export function QuillEditor({content, setContent, delta, const [showPopup, setShowPopup] = useState(false); const [commentText, setCommentText] = useState(""); const [currentBlotNode, setCurrentBlotNode] = useState(null); + const [position, setPosition] = useState([]); // Define quill toolbar options const modules = { @@ -93,7 +94,8 @@ export function QuillEditor({content, setContent, delta, isLatest = true; }; - function commentHandler() { + function commentHandler(event) { + setPosition([event.clientX, event.clientY]) const selection = quillRef.current.getEditor().getSelection(); if (selection && selection.length != 0) { setSelection(selection); @@ -124,7 +126,7 @@ export function QuillEditor({content, setContent, delta, if (!comment) { currentBlotNode.removeAttribute('class') currentBlotNode.removeAttribute('comment'); - } + } } else { quillRef.current.getEditor().formatText(selection.index, selection.length, 'commentblot', comment, "user"); @@ -134,12 +136,19 @@ export function QuillEditor({content, setContent, delta, setCommentText(""); }; - const openPopup = (comment, blotNode) => { + const openPopup = (comment, blotNode, position) => { + setPosition(position) setCommentText(comment); setCurrentBlotNode(blotNode); setShowPopup(true); }; + const onClose = () => { + setCurrentBlotNode(""); + setCommentText(""); + setShowPopup(false); + } + useEffect(() => { CommentBlot.setPopupFunction(openPopup); }, []); @@ -156,7 +165,8 @@ export function QuillEditor({content, setContent, delta, value={commentText} setValue={setCommentText} onSave={onSave} - onClose={() => setShowPopup(false)} + onClose={onClose} + position={position} /> )} diff --git a/src/forms/update-form.jsx b/src/forms/update-form.jsx index a7cd009..3874f8b 100644 --- a/src/forms/update-form.jsx +++ b/src/forms/update-form.jsx @@ -119,7 +119,7 @@ export function UpdateForm({token}) { } return ( /* "handleSubmit" will validate your inputs before invoking "onSubmit" */ -
+

{message}

@@ -153,11 +153,11 @@ export function UpdateForm({token}) { ) } - - -
- - +
+ + + +
diff --git a/src/minor-components/comment-popup.jsx b/src/minor-components/comment-popup.jsx index 7105888..ffcad14 100644 --- a/src/minor-components/comment-popup.jsx +++ b/src/minor-components/comment-popup.jsx @@ -1,7 +1,6 @@ import React from "react"; -import { useState } from "react"; -export function CommentPopup({value, setValue, onSave, onClose}) { +export function CommentPopup({value, setValue, onSave, onClose, position}) { const handleSubmit = (event) => { event.preventDefault() onSave(value); @@ -12,24 +11,32 @@ export function CommentPopup({value, setValue, onSave, onClose}) { e.preventDefault(); onSave(value); } + if (e.key === "Escape") { + e.preventDefault(); + onClose(); + } }; return ( -
-

{value ? "Edit comment" : "Add a comment"}

- +
+
+

{value ? "Edit comment" : "Add a comment"}

+ +
setValue(e.target.value)} - onKeyDown={handleKeyDown} + onKeyDown={handleKeyDown} />
- {value && } - + {value && } +
) diff --git a/src/quill-classes/comment-blot.js b/src/quill-classes/comment-blot.js index 721bd86..4d401bb 100644 --- a/src/quill-classes/comment-blot.js +++ b/src/quill-classes/comment-blot.js @@ -13,30 +13,16 @@ class CommentBlot extends Inline { static create(value) { const node = super.create(); - node.setAttribute('comment', value); - - /* - function editComment(event) { - const newComment = prompt('Redigera kommentar:', event.target.getAttribute('comment')); - if (newComment === null || newComment === "") { - removeComment(); - return; - } - event.target.setAttribute('comment', newComment); - } - */ - - function removeComment() { - node.classList.remove('comment'); - node.removeAttribute('comment'); - } + node.setAttribute('comment', value); node.addEventListener('click', (event) => { if (this.openPopup) { const currentComment = event.target.getAttribute('comment'); - this.openPopup(currentComment, node); + const position = [event.clientX, event.clientY] + this.openPopup(currentComment, node, position); } }); + return node; }