feat: double confirm deletion

OI-wiki · Oct 5, 2024 · 4f1eb93 · 4f1eb93
1 parent 4664602
commit 4f1eb93
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 1 deletion.
diff --git a/frontend/lib/dom/comment.ts b/frontend/lib/dom/comment.ts
@@ -418,6 +418,10 @@ export const renderComments = async (comments: Comment[]) => {
               <button class="comment_actions_item comment_actions_item_btn" data-action="modify_cancel">取消</button>
               <button class="comment_actions_item comment_actions_item_btn comment_actions_item_btn_primary" data-action="modify_submit">修改</button>
             </div>
+            <div class="comment_actions comment_actions_delete">
+              <button class="comment_actions_item comment_actions_item_btn" data-action="delete_cancel">取消</button>
+              <button class="comment_actions_item comment_actions_item_btn comment_actions_item_btn_error" data-action="delete_confirm">删除</button>
+            </div>
             <div class="comment_actions comment_actions_reply">
               <button class="comment_actions_item comment_actions_item_btn" data-action="cancel">取消</button>
               <button class="comment_actions_item comment_actions_item_btn comment_actions_item_btn_primary" data-action="submit">提交</button>
@@ -466,6 +470,12 @@ export const renderComments = async (comments: Comment[]) => {
 
     commentActionsModify.style.display = "none";
 
+    const commentActionsDelete = container.querySelector(
+      ".comment_actions_delete",
+    ) as HTMLDivElement;
+
+    commentActionsDelete.style.display = "none";
+
     container.addEventListener("mouseenter", () => {
       if (paragraph) {
         paragraph.dataset.reviewFocused = "true";
@@ -845,14 +855,46 @@ export const renderComments = async (comments: Comment[]) => {
             break;
           }
           case "delete": {
+            container
+              .querySelector(
+                `.comment[data-id="${container.dataset.deletingId}"]`,
+              )
+              ?.classList.remove("comment_pending");
+
             target.dataset.tag = "using";
             const commentEl = container.querySelector(
               `.comment:has([data-tag="using"][data-action="${target?.dataset.action}"])`,
             ) as HTMLDivElement;
             delete target.dataset.tag;
-            const id = commentEl.dataset?.id;
+            const id = commentEl?.dataset?.id;
             if (id == undefined) return;
 
+            commentEl?.classList.add("comment_pending");
+            commentActionsDelete.style.display = "";
+            container.dataset.deletingId = id;
+            textarea.disabled = true;
+            textarea.value = "确实要删除该评论吗？";
+            break;
+          }
+          case "delete_cancel": {
+            container
+              .querySelector(
+                `.comment[data-id="${container.dataset.deletingId}"]`,
+              )
+              ?.classList.remove("comment_pending");
+            commentActionsDelete.style.display = "none";
+            delete container.dataset.deletingId;
+            textarea.disabled = false;
+            textarea.value = "";
+            notification.textContent = "";
+            break;
+          }
+          case "delete_confirm": {
+            const id = container.dataset.deletingId;
+            if (id == undefined) return;
+
+            textarea.value = "";
+
             _deleteComment({ id: parseInt(id) })
               .catch(_handleError)
               .finally(() => {

diff --git a/frontend/lib/style.css b/frontend/lib/style.css
@@ -24,6 +24,7 @@
   --review-variant-color: #faedc2;
   --review-variant-bg-color: #f0f0f0;
   --review-variant-bg-color-lighter: #d4d4d8;
+  --review-error-bg-color: #ff4500;
   --review-border-color: #dee0e3;
 
   --review-text-color: #000;
@@ -38,6 +39,7 @@
   --review-variant-color: #c09a2682;
   --review-variant-bg-color: #2c2c2c;
   --review-variant-bg-color-lighter: #3a3a3a;
+  --review-error-bg-color: #dc143c;
   --review-border-color: #444;
 
   --review-text-color: #e2e2e2;
@@ -549,6 +551,13 @@
     display: none;
   }
 
+  &
+    .comment_actions_panel
+    .comment_actions_delete:not([style*="display: none"])
+    ~ .comment_actions.comment_actions_reply {
+    display: none;
+  }
+
   & .comment_actions_footer {
     display: flex;
     flex-direction: row;
@@ -608,6 +617,10 @@
         background-color: var(--review-primary-color);
       }
 
+      &.comment_actions_item_btn_error {
+        background-color: var(--review-error-bg-color);
+      }
+
       &:hover {
         filter: brightness(1.2);
       }