mirror of
https://github.com/GuySandler/CanvasRefined.git
synced 2026-06-21 01:49:54 +02:00
theme compatibility
This commit is contained in:
Guy Sandler
parent
06baae15f2
commit
1efcaa4081
@ -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;}
|
||||
|
||||
@ -246,31 +246,9 @@
|
||||
<span class="option-name" data-i18n="better_sidebar">Better Sidebar</span>
|
||||
</div>
|
||||
<div class="sub-options">
|
||||
<div class="sub-option" style="display:none;">
|
||||
<input type="checkbox" id="hover_preview" name="hover_preview">
|
||||
<label for="hover_preview" class="sub-text" data-i18n="hover_preview">Hover to preview
|
||||
details</label>
|
||||
</div>
|
||||
<div class="sub-option">
|
||||
<input type="checkbox" id="todo_separate_scrollbar" name="todo_separate_scrollbar">
|
||||
<label for="todo_separate_scrollbar" class="sub-text" data-i18n="todo_separate_scrollbar">Separate Scrollbar</label>
|
||||
</div>
|
||||
<div class="sub-option">
|
||||
<input type="checkbox" id="todo_hr24" name="todo_hr24">
|
||||
<label for="todo_hr24" class="sub-text" data-i18n="24hrformat">Use 24hr format</label>
|
||||
</div>
|
||||
<div class="sub-option">
|
||||
<input type="checkbox" id="todo_full_height" name="todo_full_height">
|
||||
<label for="todo_full_height" class="sub-text" data-i18n="todo_full_height">Force Full Height</label> <!-- TO REMOVE and replace with full height -->
|
||||
</div>
|
||||
<div class="sub-option">
|
||||
<input type="checkbox" id="todo_hide_feedback" name="todo_hide_feedback">
|
||||
<label for="todo_hide_feedback" class="sub-text" data-i18n="todo_hide_feedback">Hide Recent Feedback</label>
|
||||
</div>
|
||||
<div style="margin-top: 5px">
|
||||
<span class="sub-text" data-i18n="max_items">Max items to show: </span><span
|
||||
id="numTodoItems"></span>
|
||||
<input type="range" min="1" max="12" id="numTodoItemsSlider">
|
||||
<span class="sub-text">Sidebar scale: </span><span id="sidebarScaleValue"></span><span class="sub-text">%</span>
|
||||
<input type="range" min="70" max="150" id="sidebarScaleSlider">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -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": "",
|
||||
|
||||
@ -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}<span class="better-sidebar-label" style="font-size:clamp(10px, 2vw, 18px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;">${text}</span>` : `<span class="better-sidebar-label">${text}</span>`}`;
|
||||
button.innerHTML = `${icon ? `${icon}<span class="better-sidebar-label" style="font-size:var(--bc-sidebar-label-size,14px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;">${text}</span>` : `<span class="better-sidebar-label" style="font-size:var(--bc-sidebar-label-size,14px);">${text}</span>`}`;
|
||||
}
|
||||
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";
|
||||
|
||||
41
js/popup.js
41
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"],
|
||||
|
||||
Loading…
Reference in New Issue
Block a user