Add option to disable alternate colors in chat

rantstats · Aug 18, 2024 · 4c816d7 · 4c816d7
1 parent 6a0a5ff
commit 4c816d7
Show file tree

Hide file tree

Showing 7 changed files with 59 additions and 11 deletions.
diff --git a/src/components/open-chat/open-chat.scss b/src/components/open-chat/open-chat.scss
@@ -56,12 +56,16 @@
             &.chat-history--subscribed {
                 background-image: linear-gradient(to right, var(--light-subscribed), var(--light-accent));
             }
+        }
 
-            &:nth-child(odd) {
-                background-color: var(--light-accent2);
+        &.alternate-colors {
+            .chat-history--row {
+                &:nth-child(odd) {
+                    background-color: var(--light-accent2);
 
-                &.chat-history--subscribed {
-                    background-image: linear-gradient(to right, var(--light-subscribed), var(--light-accent2));
+                    &.chat-history--subscribed {
+                        background-image: linear-gradient(to right, var(--light-subscribed), var(--light-accent2));
+                    }
                 }
             }
         }
@@ -72,12 +76,16 @@
             &.chat-history--subscribed {
                 background-image: linear-gradient(to right, var(--dark-subscribed), var(--dark-accent));
             }
+        }
 
-            &:nth-child(odd) {
-                background-color: var(--dark-accent2);
+        &.alternate-colors {
+            .chat-history--row {
+                &:nth-child(odd) {
+                    background-color: var(--dark-accent2);
 
-                &.chat-history--subscribed {
-                    background-image: linear-gradient(to right, var(--dark-subscribed), var(--dark-accent2));
+                    &.chat-history--subscribed {
+                        background-image: linear-gradient(to right, var(--dark-subscribed), var(--dark-accent2));
+                    }
                 }
             }
         }

diff --git a/src/content.ts b/src/content.ts
@@ -8,6 +8,7 @@ import { replacePageContent } from "./rantstatspage"
 import {
     registerRumbleThemeObserver,
     registerSystemColorSchemeWatcher,
+    updateAlternateColorsStyle,
     updateChatThemeStyle,
     updateThemeStyle,
 } from "./theme"
@@ -32,7 +33,9 @@ registerSystemColorSchemeWatcher()
 registerRumbleThemeObserver()
 updateChatThemeStyle()
 
-getOptions().then()
+getOptions().then((options: Options) => {
+    updateAlternateColorsStyle(options?.alternateColors)
+})
 
 // run clean history at the beginning of each load
 cleanHistory().then()

diff --git a/src/message-options.ts b/src/message-options.ts
@@ -1,5 +1,5 @@
 import { setLastSortOrder, sortChats } from "./components/rants/rant"
-import { updateThemeStyle } from "./theme"
+import { updateAlternateColorsStyle, updateThemeStyle } from "./theme"
 import { Messages } from "./types/messages"
 import { Options, SortOrder, Theme } from "./types/option-types"
 
@@ -18,4 +18,7 @@ export const handleUpdateOptions = (options: Options): void => {
     if (options?.theme !== undefined) {
         updateThemeStyle(options.theme as Theme)
     }
+    if (options?.alternateColors !== undefined) {
+        updateAlternateColorsStyle(options.alternateColors)
+    }
 }
diff --git a/src/pages/options/options.html b/src/pages/options/options.html
@@ -66,6 +66,17 @@ <h1>RantStats Extension Options</h1>
                 </div>
             </div>
 
+            <div class="option">
+                <div class="option-info">
+                    <label class="name" for="alternate-colors" title="Alternate colors">Alternate colors</label>
+                    <p class="description">Alternate colors of messages in chat</p>
+                </div>
+
+                <div class="selector">
+                    <input type="checkbox" id="alternate-colors" />
+                </div>
+            </div>
+
             <div class="option">
                 <div class="option-info">
                     <label

diff --git a/src/pages/options/options.ts b/src/pages/options/options.ts
@@ -11,6 +11,7 @@ const historyInput = document.getElementById("history") as HTMLInputElement
 const themeSelect = document.getElementById("theme") as HTMLSelectElement
 const openLocationCheckbox = document.getElementById("open-location") as HTMLInputElement
 const bytesUseSpan = document.getElementById(CONSTS.BYTES_USE_ID) as HTMLSpanElement
+const alternateColorsCheckbox = document.getElementById("alternate-colors") as HTMLInputElement
 
 /**
  * Toggle showing or hiding the sub-options section based on the check state
@@ -44,6 +45,7 @@ const setOptions = (options: Options): void => {
     historyInput.value = options.historyDays.toString()
     themeSelect.value = options.theme.toString()
     openLocationCheckbox.checked = options.asPopup
+    alternateColorsCheckbox.checked = options.alternateColors
 
     updateUsage()
 }
@@ -64,6 +66,7 @@ const saveOptions = (): void => {
         historyDays: parseInt(historyInput.value, 10),
         theme: themeSelect.value,
         asPopup: openLocationCheckbox.checked,
+        alternateColors: alternateColorsCheckbox.checked,
     }
 
     updateOptions(currentOptions).then(() => {

diff --git a/src/theme.ts b/src/theme.ts
@@ -1,6 +1,6 @@
 import { getTheme } from "./cache"
-import { getChatButtons } from "./components/open-chat/chat-buttons"
 import { rumbleThemeChanged } from "./components/events/event-rumble-theme-changed"
+import { getChatButtons } from "./components/open-chat/chat-buttons"
 import { CONSTS } from "./types/consts"
 import { Theme } from "./types/option-types"
 
@@ -77,6 +77,21 @@ export const updateThemeStyle = (themePreference: Theme): void => {
     }
 }
 
+/**
+ * Update the chat to show or not show alternating colors
+ * @param alternate should colors alternate or not
+ */
+export const updateAlternateColorsStyle = (alternate: boolean): void => {
+    const chatList = document.getElementById("chat-history-list") as HTMLUListElement
+    if (chatList) {
+        if (alternate) {
+            chatList.classList.add("alternate-colors")
+        } else {
+            chatList.classList.remove("alternate-colors")
+        }
+    }
+}
+
 /**
  * Register watcher of the operating system color scheme.
  *

diff --git a/src/types/option-types.ts b/src/types/option-types.ts
@@ -64,6 +64,10 @@ export type Options = {
      * Open Rants in popup instead of sidebar
      */
     asPopup: boolean
+    /**
+     * Alternate colors of messages in chat
+     */
+    alternateColors: boolean
 }
 
 /**
@@ -74,4 +78,5 @@ export const defaultOptions: Options = {
     historyDays: 30,
     theme: Theme.Rumble.toString(),
     asPopup: false,
+    alternateColors: true,
 }