Some styling for comment function

Challe-P · Nov 3, 2024 · 5640dba · 5640dba
1 parent fb00180
commit 5640dba
Show file tree

Hide file tree

Showing 5 changed files with 91 additions and 36 deletions.
diff --git 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
@@ -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}
             />
         )}
     </div>

diff --git 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" */
-      <div>
+      <div className='container'>
               <h1>{message}</h1>
       <form onSubmit={handleSubmit(onSubmit)}>
             <label htmlFor="title">Title</label>
@@ -153,11 +153,11 @@ export function UpdateForm({token}) {
             ) 
             }
             <input type="text" name="id" hidden defaultValue={id} {...register("id")}/>
-            <input type="submit" value="Save changes" />
-            <button type="button" onClick={handleDelete}>Delete document</button>
-            <div>
-                <button type="button" onClick={() => setEditorMode("text")}>Text Editor</button>
-                <button type="button" onClick={() => setEditorMode("code")}>Code Editor</button>
+            <div className='form-buttons'>
+                    <button type="button" onClick={handleDelete}>Delete document</button>
+                    <button type="submit">Save changes</button>
+                    <button type="button" onClick={() => setEditorMode("text")}>Text Editor</button>
+                    <button type="button" onClick={() => setEditorMode("code")}>Code Editor</button>
             </div>
         </form>
         <form onSubmit={handleSubmit(handleShare)}>

diff --git 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 (
-        <div>
-            <h4>{value ? "Edit comment" : "Add a comment"}</h4>
-            <button type="button" className="cancel" onClick={onClose}>&#10006;</button>
+        <div className="comment-popup" style={{top: position[1], left: position[0]+10}} >
+            <div className="comment-header">
+                <h4>{value ? "Edit comment" : "Add a comment"}</h4>
+                <button type="button" className="cancel" onClick={onClose}>&#10006;</button>
+            </div>
             <label htmlFor="comment" hidden>Comment</label>            
             <input
+                autoFocus
+                id="comment-input"
                 type="text"
                 name="comment"
                 value={value}
                 onChange={(e) => setValue(e.target.value)}
-                onKeyDown={handleKeyDown} 
+                onKeyDown={handleKeyDown}
             />
             <div className="popup-buttons">
                 <button type="button" onClick={onClose}>Cancel</button>
-                {value && <button type="button" onClick={() => onSave("")}>Remove comment</button>}
-                <button type="button" onClick={handleSubmit}>Save comment</button>
+                {value && <button type="button" onClick={() => onSave("")}>Delete</button>}
+                <button type="button" id="comment-save" onClick={handleSubmit}>Save</button>
             </div>
         </div>
     )

diff --git 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;
     }