refactor(Rune): drop halves-group container for two-color chars

See robertabcd/PttChrome#102 for references. * src/components/cells/Rune.tsx * drop the use of CSS class .halves-group * use react.Fragment (`<> </>`) to replace the previous outer `<span>` * make classNamesGroup (for styling the previous outer `<span>`) appended to classNames0 (for styling each two-color char) * src/components/cells/ContentRenderer.module.css * drop CSS class .halves-group * replace .halves styling with .o styling from the PttChrome PR
Ptt-official-app · Mar 20, 2024 · 2559ac8 · 2559ac8
1 parent 738768c
commit 2559ac8
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 24 deletions.
diff --git a/src/components/cells/ContentRenderer.module.css b/src/components/cells/ContentRenderer.module.css
@@ -94,30 +94,24 @@
     color: transparent;
 }
 
-.halves-group > .halves { /* Container for the two halves of a character; selectable */
+.halves { /* Container for the two halves of a character; selectable */
+    position: relative;
+    /* Prevent .halves elements from being drawn below the background */
+    z-index: 1;
     color: transparent;
     background: transparent;
 }
-.halves-group > .halves:before { /* The left half of a character; not selectable */
+.halves:before, .halves:after { /* The halves of a character; not selectable */
     content: attr(data-text);
     position: absolute;
-    width: 1ch;
-    clip-path: inset(-0.5px); /* 0px causes wierd border line on Chrome and Edge */
+    left: 0px; /* for the left half */
+    width: 50%;
+    overflow: hidden;
     z-index: -1; /* Draw below the selectable text */
 }
-.halves-group > .halves:after { /* The right half of a character; not selectable */
-    content: attr(data-text);
-    position: absolute;
-    margin-left: -1ch;
-    text-indent: -1ch;
-    clip-path: inset(-0.5px); /* 0px causes wierd border line on Chrome and Edge */
-    z-index: -2; /* Draw below the selectable text */
-}
-
-.halves-group { /* Container for a .halves rune group */
-    /* Prevent .halves elements from being drawn below the background */
-    position: relative;
-    z-index: 1;
+.halves:after { /* The right half of a character; not selectable */
+    left: 50%;
+    text-indent: -100%;
 }
 
 .rune {

diff --git a/src/components/cells/Rune.tsx b/src/components/cells/Rune.tsx
@@ -23,20 +23,17 @@ export default (props: Props) => {
         rowIndex = rowIndex || 0
         onMouseDown(e, rowIndex, idx)
     }
+    classNames0.push(...classNamesGroup)
+    let className0 = classNames0.join(' ')
     if (isTwoColor) {
-        classNamesGroup.push(styles['halves-group'])
-        let classNameGroup = classNamesGroup.join(' ')
-        let className0 = classNames0.join(' ')
         return (
-            <span className={classNameGroup}>
+            <>
                 {[...rune.text].map((ch, idx) => (
                     <span key={`${runeKey}-${idx}`} className={className0} onMouseDown={_onMouseDown} data-text={ch}>{ch}</span>
                 ))}
-            </span>
+            </>
         )
     } else {
-        classNames0.push(...classNamesGroup)
-        let className0 = classNames0.join(' ')
         return (
             <span key={runeKey} className={className0} onMouseDown={_onMouseDown}>{rune.text}</span>
         )