From 1efcaa408117fc8c37994724798a9b1d54e6036e Mon Sep 17 00:00:00 2001 From: Guy Sandler Date: Wed, 20 May 2026 19:40:21 -0700 Subject: [PATCH] theme compatibility --- css/popup.css | 4 ++-- html/popup.html | 26 ++------------------------ js/background.js | 4 ++-- js/content.js | 38 +++++++++++++++++++++++++++++++++++--- js/popup.js | 41 ++++++++++++++++++++++++++++++++++++++--- 5 files changed, 79 insertions(+), 34 deletions(-) diff --git a/css/popup.css b/css/popup.css index 9a760b4..9a2936b 100644 --- a/css/popup.css +++ b/css/popup.css @@ -20,8 +20,8 @@ h2 {font-size:24px;} .header {font-size: 16px;display: flex;align-items: center;gap:12px; margin-bottom:14px;} .header h1 { font-weight: 600; font-size:24px; } #bclogo {height: 30px;width:30px;filter: grayscale(1) brightness(100)} -#numAssignmentsSlider, #numTodoItemsSlider {display: block;margin-top: 14px;width: 100%;-webkit-appearance: none; appearance: none;background:var(--inputbg);outline: none;height:6px;border-radius:20px;} -#numAssignmentsSlider::-webkit-slider-thumb, #numTodoItemsSlider::-webkit-slider-thumb {-webkit-appearance: none; appearance: none;height: 18px; width: 18px;background: #727272;cursor: pointer;border-radius:30px;} +#numAssignmentsSlider, #numTodoItemsSlider, #sidebarScaleSlider {display: block;margin-top: 14px;width: 100%;-webkit-appearance: none; appearance: none;background:var(--inputbg);outline: none;height:6px;border-radius:20px;} +#numAssignmentsSlider::-webkit-slider-thumb, #numTodoItemsSlider::-webkit-slider-thumb, #sidebarScaleSlider::-webkit-slider-thumb {-webkit-appearance: none; appearance: none;height: 18px; width: 18px;background: #727272;cursor: pointer;border-radius:30px;} .option-container {font-size: 14px; margin-top: 8px;background: var(--containerbg);padding: 18px;border-radius: 14px;box-sizing:border-box} .options .option-container {padding: 14px;} a.option-container {display: block;color:#5ca5f6;font-size: 14px;} diff --git a/html/popup.html b/html/popup.html index cea165f..91823e2 100644 --- a/html/popup.html +++ b/html/popup.html @@ -246,31 +246,9 @@ Better Sidebar
- -
- - -
-
- - -
-
- - -
-
- - -
- Max items to show: - + Sidebar scale: % +
diff --git a/js/background.js b/js/background.js index cbc97d2..f11c479 100644 --- a/js/background.js +++ b/js/background.js @@ -23,7 +23,7 @@ chrome.runtime.onInstalled.addListener(function () { }, "new_install": true, "assignments_due": true, - "gpa_calc": false, + "gpa_calc": true, "dark_mode": true, "gradent_cards": false, "disable_color_overlay": false, @@ -33,7 +33,7 @@ chrome.runtime.onInstalled.addListener(function () { "num_assignments": 4, "custom_domain": [""], "assignments_done": [], - "dashboard_grades": false, + "dashboard_grades": true, "assignment_date_format": false, "dashboard_notes": false, "dashboard_notes_text": "", diff --git a/js/content.js b/js/content.js index 89626db..615ae76 100644 --- a/js/content.js +++ b/js/content.js @@ -411,6 +411,15 @@ function applyOptionsChanges(changes) { document.getElementById("better-sidebar-container").remove(); } break; + case "sidebar_scale": { + const existingSidebar = document.getElementById("better-sidebar-container"); + if (existingSidebar) { + existingSidebar.remove(); + const mode = current_page.match(/^\/courses\/(\d+)\/?$/) ? "course" : "dash"; + setupBetterSidebar(mode); + } + break; + } } }); } @@ -1339,6 +1348,20 @@ function setupBetterTodo() { } } +function getSidebarScale() { + const rawScale = parseInt(options.sidebar_scale || 100); + if (isNaN(rawScale)) return 1; + return Math.max(0.7, Math.min(1.5, rawScale / 100)); +} + +function applySidebarScaleStyles(sidebarList) { + const scale = getSidebarScale(); + sidebarList.style.setProperty("--bc-sidebar-icon-size", `${Math.round(20 * scale)}px`); + sidebarList.style.setProperty("--bc-sidebar-btn-height", `${Math.round(30 * scale)}px`); + sidebarList.style.setProperty("--bc-sidebar-btn-gap", `${Math.round(8 * scale)}px`); + sidebarList.style.setProperty("--bc-sidebar-label-size", `${Math.round(14 * scale)}px`); +} + function setupBetterSidebar(mode = "dash") { if (!options.better_sidebar) return; if (document.querySelector('#better-sidebar-container')) return; @@ -1374,6 +1397,7 @@ function setupBetterSidebar(mode = "dash") { let sidebarContent = makeElement("div", sidebarList, { style: "display:flex;flex-direction:column;gap:20px;width:100%;flex:1;justify-content:flex-start;align-items:center;margin:40px;" }); + applySidebarScaleStyles(sidebarList); // Populate sidebar from Canvas navigation menu dynamically populateSidebarFromNav(sidebarContent); @@ -1437,11 +1461,11 @@ function setupBetterSidebar(mode = "dash") { } function createSidebarButton(text, url, parent, icon) { let button = makeElement("a", parent, { - style: "width:40%;height:30px;cursor:pointer;text-align:center;text-decoration:none;display:inline-flex;justify-content:center;align-items:center;gap:8px;color:var(--bctext-0) !important;font-weight:bold;", + style: "width:40%;height:var(--bc-sidebar-btn-height,30px);cursor:pointer;text-align:center;text-decoration:none;display:inline-flex;justify-content:center;align-items:center;gap:var(--bc-sidebar-btn-gap,8px);color:var(--bctext-0) !important;font-weight:bold;", className: "bettercanvas-custom-btn better-sidebar-btn", href: url, }); - button.innerHTML = `${icon ? `${icon}${text}` : `${text}`}`; + button.innerHTML = `${icon ? `${icon}${text}` : `${text}`}`; } function populateSidebarFromNav(sidebarContent) { const excludeIds = ["global_nav_help_link", "global_nav_history_link"]; @@ -1521,12 +1545,20 @@ function populateSidebarFromNav(sidebarContent) { }); } function updateSidebar(expanded, sidebarList, expander) { - sidebarList.style.width = expanded ? "150px" : "50px"; + const scale = getSidebarScale(); + sidebarList.style.width = expanded ? `${Math.round(150 * scale)}px` : `${Math.round(50 * scale)}px`; + applySidebarScaleStyles(sidebarList); expander.style.transform = expanded ? "rotate(180deg)" : "rotate(0deg)"; + expander.querySelector("svg").style.width = `${Math.round(30 * scale)}px`; + expander.querySelector("svg").style.height = `${Math.round(30 * scale)}px`; const labels = document.querySelectorAll(".better-sidebar-label"); labels.forEach(label => label.style.display = expanded ? "block" : "none"); const buttons = document.querySelectorAll(".better-sidebar-btn"); buttons.forEach(label => label.style.width = expanded ? "80%" : "40%"); + sidebarList.querySelectorAll(".better-sidebar-btn svg").forEach(svg => { + svg.style.width = "var(--bc-sidebar-icon-size,20px)"; + svg.style.height = "var(--bc-sidebar-icon-size,20px)"; + }); const courseLinksTitle = document.getElementById("better-course-links-title"); if (courseLinksTitle) { courseLinksTitle.style.display = expanded ? "block" : "none"; diff --git a/js/popup.js b/js/popup.js index d84f93f..ef799d1 100644 --- a/js/popup.js +++ b/js/popup.js @@ -27,6 +27,7 @@ const syncedSubOptions = [ "cardWidth", "cardHeight", "customBackgroundLink", + "sidebar_scale", ]; const localSwitches = []; @@ -54,7 +55,7 @@ const defaultOptions = { }, "new_install": true, "assignments_due": true, - "gpa_calc": false, + "gpa_calc": true, "dark_mode": true, "gradent_cards": false, "disable_color_overlay": false, @@ -64,12 +65,13 @@ const defaultOptions = { "num_assignments": 4, "custom_domain": [""], "assignments_done": [], - "dashboard_grades": false, + "dashboard_grades": true, "assignment_date_format": false, "dashboard_notes": false, "dashboard_notes_text": "", "better_todo": false, "better_sidebar": false, + "sidebar_scale": 100, "todo_hr24": false, "todo_separate_scrollbar": false, "condensed_cards": false, @@ -192,6 +194,17 @@ function setupTodoSlider(initial) { }); } +function setupSidebarScaleSlider(initial) { + let el = document.querySelector("#sidebarScaleSlider"); + if (!el) return; + el.value = initial; + document.querySelector("#sidebarScaleValue").textContent = initial; + el.addEventListener("input", function () { + document.querySelector("#sidebarScaleValue").textContent = this.value; + chrome.storage.sync.set({ "sidebar_scale": parseInt(this.value) }); + }); +} + function setupAutoDarkInput(initial, time) { let el = document.querySelector('#' + time); el.value = initial.hour + ":" + initial.minute; @@ -352,6 +365,10 @@ function setup() { identifier: "num_todo_items", setup: (initial) => setupTodoSlider(initial), }, + { + identifier: "sidebar_scale", + setup: (initial) => setupSidebarScaleSlider(initial), + }, { identifier: "card_limit", setup: (initial) => setupCardLimitSlider(initial), @@ -1061,7 +1078,16 @@ async function submitTheme() { //TODO: remake // return; // } - const theme = await getExport(sync, ["custom_cards", "card_colors", "dark_preset", "custom_font", "gradient_cards", "disable_color_overlay"]); + const theme = await getExport(sync, [ + ...syncedSwitches, + ...syncedSubOptions, + "custom_cards", + "card_colors", + "dark_preset", + "custom_font", + "gradient_cards", + "disable_color_overlay", + ]); const title = document.getElementById("submit-title"); const credits = document.getElementById("submit-credits"); @@ -1150,6 +1176,15 @@ function saveCurrentTheme() { "custom_cards": current["custom_cards"], "card_colors": current["card_colors"] === null ? [current["dark_preset"]["links"]] : current["card_colors"], "custom_font": current["custom_font"], + "better_todo": current["better_todo"], + "todo_hide_feedback": current["todo_hide_feedback"], + "todo_full_height": current["todo_full_height"], + "todo_hr24": current["todo_hr24"], + "todo_separate_scrollbar": current["todo_separate_scrollbar"], + "num_todo_items": current["num_todo_items"], + "hover_preview": current["hover_preview"], + "better_sidebar": current["better_sidebar"], + "sidebar_scale": current["sidebar_scale"], "imageSize": current["imageSize"], "cardRoundness": current["cardRoundness"], "cardSpacing": current["cardSpacing"],