fix: add dynamic spacing to comment highlighting

thematters · Jan 17, 2025 · 18eb4eb · 18eb4eb
1 parent 4db52f3
commit 18eb4eb
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 5 deletions.
diff --git a/src/common/utils/comment/index.ts b/src/common/utils/comment/index.ts
@@ -77,12 +77,13 @@ export function filterResponses<T extends Response | Comment>(
 
 export const highlightComment = (
   targetElement: HTMLElement,
+  spacing: 8 | 12 | 16 = 16,
   isParentComment?: boolean,
   fullSpacing?: boolean
 ) => {
   const activeParentCommentClass = fullSpacing
-    ? styles.activeParentCommentFullSpacing
-    : styles.activeParentComment
+    ? styles[`activeParentComment${spacing}`]
+    : styles[`activeParentComment${spacing}`]
   targetElement.classList.add(styles.activeBgColor)
   if (isParentComment) {
     targetElement.classList.add(activeParentCommentClass)

diff --git a/src/common/utils/comment/styles.module.css b/src/common/utils/comment/styles.module.css
@@ -2,12 +2,36 @@
   animation: comment-background-fade-out 1.6s ease-out 0s;
 }
 
-.activeParentCommentFullSpacing {
+.activeParentCommentFullSpacing8 {
+  padding: var(--sp8) !important;
+  margin: calc(-1 * var(--sp8));
+}
+
+.activeParentCommentFullSpacing12 {
+  padding: var(--sp12) !important;
+  margin: calc(-1 * var(--sp12));
+}
+
+.activeParentCommentFullSpacing16 {
   padding: var(--sp16) !important;
   margin: calc(-1 * var(--sp16));
 }
 
-.activeParentComment {
+.activeParentComment8 {
+  padding-right: var(--sp8) !important;
+  padding-left: var(--sp8) !important;
+  margin-right: calc(-1 * var(--sp8));
+  margin-left: calc(-1 * var(--sp8));
+}
+
+.activeParentComment12 {
+  padding-right: var(--sp12) !important;
+  padding-left: var(--sp12) !important;
+  margin-right: calc(-1 * var(--sp12));
+  margin-left: calc(-1 * var(--sp12));
+}
+
+.activeParentComment16 {
   padding-right: var(--sp16) !important;
   padding-left: var(--sp16) !important;
   margin-right: calc(-1 * var(--sp16));

diff --git a/src/components/Dialogs/MomentDetailDialog/Comments.tsx b/src/components/Dialogs/MomentDetailDialog/Comments.tsx
@@ -76,7 +76,7 @@ const Comments = ({ moment, editing }: CommentsProps) => {
     }
 
     setTimeout(
-      () => highlightComment(targetElement as HTMLElement, true, true),
+      () => highlightComment(targetElement as HTMLElement, 12, true, true),
       100
     )
   }, [newestCommentId])

diff --git a/src/components/Hook/useJumpToComment.ts b/src/components/Hook/useJumpToComment.ts
@@ -38,6 +38,7 @@ export const useJumpToComment = ({ fullSpacing }: Props) => {
       () =>
         highlightComment(
           targetElement as HTMLElement,
+          16,
           isParentComment,
           fullSpacing
         ),