feat(options): add romanization & translation color

sglkc · Nov 15, 2024 · e3a32e3 · e3a32e3
1 parent 0a5d0fe
commit e3a32e3
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 20 deletions.
diff --git a/src/popup/components/Color.tsx b/src/popup/components/Color.tsx
@@ -9,6 +9,8 @@ const styleProps = [
   { label: 'Active', name: 'lyrics_active' },
   { label: 'Inactive', name: 'lyrics_inactive' },
   { label: 'Passed', name: 'lyrics_passed' },
+  { label: 'Translation', name: 'lyrics_translated' },
+  { label: 'Romanization', name: 'lyrics_romanized' },
 ] as const
 
 type ColorLabelProps = typeof styleProps[number] & {
@@ -27,7 +29,7 @@ function ColorLabel({ current, label, name, set }: ColorLabelProps) {
     >
       <input type="hidden" id={name} name={name} value={color} />
       <div class="text-center">{ label }</div>
-      <div class="px-4 py-2 rounded" style={`background-color: ${color}`}></div>
+      <div class="px-4 py-2 b-1 rounded" style={`background-color: ${color}`}></div>
     </label>
   )
 }
@@ -39,6 +41,11 @@ export type ColorProps = {
 
 export default function Color() {
   const [input, setInput] = useState<InputType>()
+  const changeColor = (val: string) => {
+    const elm = document.querySelector<HTMLInputElement>('#' + input)!
+    elm.value = val
+    elm.dispatchEvent(new Event('input', { bubbles: true }))
+  }
 
   return (
     <>
@@ -48,12 +55,20 @@ export default function Color() {
       ))}
       { input &&
         <div class="flex flex-col items-center gap-1 col-span-2 text-center">
-          <button
-            class="color-accent underline cursor-pointer"
-            onClick={() => setInput(undefined)}
-          >
-            [CLOSE]
-          </button>
+          <div class="flex gap-8">
+            <button
+              class="color-accent underline cursor-pointer"
+              onClick={() => changeColor('')}
+            >
+              [SET TO DEFAULT]
+            </button>
+            <button
+              class="color-accent underline cursor-pointer"
+              onClick={() => setInput(undefined)}
+            >
+              [CLOSE]
+            </button>
+          </div>
           <p>
             Picking color for {' '}
             <strong>
@@ -62,12 +77,7 @@ export default function Color() {
           </p>
           <HexAlphaColorPicker
             color={moegiOptions.value[input]}
-            onChange={(val) => {
-              const elm = document.querySelector<HTMLInputElement>('#' + input)!
-              elm.value = val
-              elm.dispatchEvent(new Event('input', { bubbles: true }))
-            }
-            }
+            onChange={changeColor}
           />
         </div>
       }

diff --git a/src/services/options.ts b/src/services/options.ts
@@ -8,6 +8,8 @@ export type MoegiOptions = {
   lyrics_size: number
   lyrics_spacing: number
   lyrics_align: 'left' | 'center' | 'right'
+  lyrics_translated: string
+  lyrics_romanized: string
   lyrics_active: string
   lyrics_inactive: string
   lyrics_passed: string
@@ -36,10 +38,12 @@ export const moegiDefaultOptions: MoegiOptions = {
   lyrics_size: 1,
   lyrics_spacing: 5,
   lyrics_align: 'left',
-  lyrics_active: '#ffffffff',
-  lyrics_inactive: '#000000ff',
-  lyrics_passed: '#ffffffb3',
-  lyrics_background: '#6495edff',
+  lyrics_translated: '',
+  lyrics_romanized: '',
+  lyrics_active: '',
+  lyrics_inactive: '',
+  lyrics_passed: '',
+  lyrics_background: '',
   translation: false,
   translation_size: 1,
   languageTarget: 'auto',

diff --git a/src/web/styling.ts b/src/web/styling.ts
@@ -9,8 +9,14 @@ const shouldHideOriginal = () =>
 // Style element for elements styling and append immediately if styling is on
 const generateStyles = () => `
   .original-lyrics { display: ${shouldHideOriginal() ? 'none' : 'inherit'}; }
-  .converted-lyrics { font-size: ${options.romanization_size}em; }
-  .translated-lyrics { font-size: ${options.translation_size}em; }
+  .converted-lyrics {
+    font-size: ${options.romanization_size}em;
+    color: var(--lyrics-color-romanized);
+  }
+  .translated-lyrics {
+    font-size: ${options.translation_size}em;
+    color: var(--lyrics-color-translated);
+  }
   ${isStylingActive()}
   [data-testid="fullscreen-lyric"] {
     margin-top: ${options.lyrics_spacing}px;
@@ -30,7 +36,14 @@ document.head.append(styleElement);
 
 // Lyrics colors styling
 const defaultColors = new Map();
-const colorProperties = ['active', 'inactive', 'passed', 'background'] as const;
+const colorProperties = [
+  'translated',
+  'romanized',
+  'active',
+  'inactive',
+  'passed',
+  'background',
+] as const;
 let lyricsStyles: CSSStyleDeclaration;
 
 function styleLyrics() {