fix: remove label & radio from color-select

slotDumpling · Aug 14, 2024 · 39f664f · 39f664f
1 parent 478e131
commit 39f664f
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 21 deletions.
diff --git a/src/lib/Dark.tsx b/src/lib/Dark.tsx
@@ -15,14 +15,14 @@ export const loadDarkMode = async () => {
     { brightness: 100, contrast: 100 },
     {
       ignoreInlineStyle: [
-        "label .circle",
+        ".color-select .circle",
         ".color-circle",
         ".pen-icon path",
         ".text-color-icon",
       ],
       invert: [
         // ".page-wrapper[data-preview=true] .draw-canvas",
-        "label .circle",
+        ".color-select .circle",
         ".width-circle.lineWidth",
         ".pen-icon",
         ".text-color-icon",

diff --git a/src/pages/reader/tools/PenPanel.tsx b/src/pages/reader/tools/PenPanel.tsx
@@ -155,19 +155,14 @@ export const ColorSelect: FC<{
 }> = ({ setColor, color }) => (
   <div className="color-select">
     {allColors.map((c) => (
-      <label key={c}>
-        <input
-          checked={color === c}
-          type="radio"
-          name="color"
-          onChange={(e) => e.target.checked && setColor(c)}
-        />
-        <div
-          data-color={c}
-          className="circle"
-          style={{ backgroundColor: c, borderColor: c }}
-        />
-      </label>
+      <div
+        key={c}
+        data-color={c}
+        data-selected={color === c}
+        className="circle"
+        style={{ backgroundColor: c, borderColor: c }}
+        onClick={() => setColor(c)}
+      />
     ))}
   </div>
 );
diff --git a/src/pages/reader/tools/pen-panel.sass b/src/pages/reader/tools/pen-panel.sass
@@ -90,12 +90,6 @@
   grid-template-columns: repeat(4, 1fr)
   gap: 10px 0
   place-items: center
-  input[type="radio"]
-    display: none
-    &:checked + .circle
-      border-width: 6px
-      // checked circle ring
-      background-color: #0000 !important
   .circle
     cursor: pointer
     width: 30px
@@ -105,6 +99,9 @@
     transition: all 0.2s
     &[data-color="#000000"]
       box-shadow: 0 0 0 1px #ddd
+    &[data-selected=true]
+      border-width: 6px
+      background-color: #0000 !important
 
 @media (prefers-color-scheme: dark)
   .ant-segmented-item-selected, .ant-segmented-thumb