diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 0969469..ea03c2b 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -146,6 +146,9 @@ "todo_full_height": { "message": "Force Full Height" }, + "todo_alternate_colors": { + "message": "Alternate colors" + }, "relative_due_dates": { "message": "Relative Due Dates" }, diff --git a/html/popup.html b/html/popup.html index baeed41..5f125e5 100644 --- a/html/popup.html +++ b/html/popup.html @@ -250,6 +250,10 @@ +
Max items to show: diff --git a/js/content.js b/js/content.js index 15cd8c6..cc0c14e 100644 --- a/js/content.js +++ b/js/content.js @@ -565,6 +565,7 @@ function startExtension() { chrome.storage.sync.get(null, result => { options = { ...options, ...result }; + applyTodoAlternateColors(); toggleAutoDarkMode(); // toggleScheduledReminders(); getApiData(); @@ -608,6 +609,10 @@ function applyOptionsChanges(changes) { case "dark_preset": case "device_dark": toggleDarkMode(); + applyTodoAlternateColors(); + break; + case "todo_alternate_colors": + applyTodoAlternateColors(); break; case "auto_dark": case "auto_dark_start": @@ -2723,6 +2728,24 @@ function clearTodoList() { }); } +// "Alternate colors" (Better Todo List, light mode only): recolors the main +// todo-list icon fill to white instead of the default --bctext-0, so icons +// stay visible on lighter course-color strips. Implemented through a CSS +// variable so toggling the option or dark mode recolors existing icons live +// without a re-render. +const TODO_ALT_ICON_COLOR = "#ffffff"; +let todoAltStyleEl = null; +function applyTodoAlternateColors() { + const altOn = options.todo_alternate_colors === true && options.dark_mode !== true; + const color = altOn ? TODO_ALT_ICON_COLOR : "var(--bctext-0)"; + if (!todoAltStyleEl) { + todoAltStyleEl = document.createElement("style"); + todoAltStyleEl.id = "crtodoaltcss"; + document.documentElement.append(todoAltStyleEl); + } + todoAltStyleEl.textContent = `:root{--cr-todo-icon:${color};}`; +} + function populateAssignments(iscompleted = false) { const today = new Date(); today.setHours(0,0,0,0); @@ -2801,9 +2824,9 @@ function populateAssignments(iscompleted = false) { const iconLeftOffset = isCustomTask ? 2 : 5; const taskIcon = isCustomTask ? ` - + ` - : ` + : ` @@ -2909,7 +2932,7 @@ function populateAnnouncements() {
- + diff --git a/js/popup.js b/js/popup.js index 9a4c0d6..104c320 100644 --- a/js/popup.js +++ b/js/popup.js @@ -19,6 +19,7 @@ const syncedSubOptions = [ "assignment_date_format", "todo_hr24", "todo_separate_scrollbar", + "todo_alternate_colors", "grade_hover", // "hide_completed", "num_todo_items", @@ -48,7 +49,7 @@ const exportCardColorToggles = ["gradient_cards", "disable_color_overlay"]; const exportCardStyles = ["customCardStyles", "imageSize", "cardRoundness", "cardSpacing", "cardWidth", "cardHeight"]; const exportLayout = ["full_width", "center_cards", "condensed_cards", "equal_height_cards", "remlogo", "hide_new_canvas", "hide_feedback", "tab_icons"]; const exportSidebar = ["better_sidebar", "sidebar_scale"]; -const exportTodo = ["better_todo", "todo_hide_feedback", "todo_full_height", "todo_confetti", "todo_progress_rings", "todo_hr24", "todo_separate_scrollbar"]; +const exportTodo = ["better_todo", "todo_hide_feedback", "todo_full_height", "todo_confetti", "todo_progress_rings", "todo_hr24", "todo_separate_scrollbar", "todo_alternate_colors"]; const exportGpa = ["gpa_calc", "gpa_calc_prepend", "gpa_calc_cumulative", "gpa_calc_weighted"]; const exportBackground = ["customBackgroundLink", "customBackgroundScale", "customBackgroundDaily", "customBackgroundNasaDaily", "fitImageToScreen", "bg_opacity", "sidebar_opacity", "bg_blur", "sidebar_blur"]; // Master "On/off toggles" = every visual toggle (no GPA, no dark-mode schedule, @@ -103,6 +104,7 @@ const defaultOptions = { "sidebar_blur": 0, "todo_hr24": false, "todo_separate_scrollbar": false, + "todo_alternate_colors": false, "condensed_cards": false, "center_cards": false, "custom_cards": {}, @@ -506,6 +508,13 @@ function toggleBetterTodoSubOptions(betterTodoOn) { } } +// "Alternate colors" (Better Todo List sub-option) only makes sense in light +// mode, so hide its checkbox whenever dark mode is on. +function toggleAlternateColorsVisibility(darkModeOn) { + const wrap = document.getElementById("todo_alternate_colors_wrap"); + if (wrap) wrap.style.display = darkModeOn ? "none" : ""; +} + // Hide a toggle's sub-options when it's off; auto_dark only hides its time clocks. function toggleSubOptionsVisibility(option, isOn) { const togglesWithSubOptions = ["gpa_calc", "assignments_due", "better_todo", "auto_dark"]; @@ -833,6 +842,7 @@ function setup() { "assignment_date_format", "todo_hr24", "todo_separate_scrollbar", + "todo_alternate_colors", "grade_hover", // "hide_completed", "hover_preview", @@ -977,6 +987,9 @@ function setup() { if (option === "better_todo") { toggleBetterTodoSubOptions(status); } + if (option === "dark_mode") { + toggleAlternateColorsVisibility(status); + } toggleSubOptionsVisibility(option, status); }); }); @@ -985,6 +998,7 @@ function setup() { ["gpa_calc", "assignments_due", "better_todo", "auto_dark"].forEach(opt => { toggleSubOptionsVisibility(opt, sync[opt] === true); }); + toggleAlternateColorsVisibility(sync["dark_mode"] === true); }); chrome.storage.sync.get(menu.checkboxes, sync => {