Card setting Part 3

themes are now compatible with card settings
This commit is contained in:
Guy Sandler 2026-02-08 20:45:18 -08:00
parent 573dfd9e1c
commit 2154ee80d3
6 changed files with 69 additions and 15 deletions

10
.vscode/settings.json vendored Normal file
View File

@ -0,0 +1,10 @@
{
"files.exclude": {
"**/.git": true,
"**/.svn": true,
"**/.hg": true,
"**/.DS_Store": true,
"**/Thumbs.db": true
},
"hide-files.files": []
}

View File

@ -65,7 +65,6 @@ Better Canvas introduces improvements to the Canvas user interface:
- custom side logo
- widgets (music, timer)
- fix darkmode fixer
- more card settings (in progress, to be theme compatible)
- calender sync
- update better todo list
- better sidebar
@ -81,6 +80,11 @@ Better Canvas introduces improvements to the Canvas user interface:
- better what if grade
- when opening assignments it will show you "if you get a 0 on this your grade will be _"
## Extra features that might be added:
- card grade position, card outline
- theme copy button
- revamp cards page UI
## Dev Installation
To install, run, and build with this repository locally,

View File

@ -475,6 +475,10 @@
<div class="sub-option">
<input type="checkbox" id="export-gpa" />
<span>GPA settings</span>
</div>
<div class="sub-option">
<input type="checkbox" id="export-customStyles" />
<span>Custom Card styles</span>
</div>
</div>
<div style="flex: 1">

View File

@ -97,7 +97,7 @@ chrome.runtime.onInstalled.addListener(function () {
"cardRoundness": 5,
'cardSpacing': 0,
"cardWidth": 262,
"cardHeight": 150,
"cardHeight": 250,
"customCardStyles": false,
}
};

View File

@ -2012,8 +2012,8 @@ function applyAestheticChanges() {
if (options.imageSize !== undefined && options.imageSize !== 100) style.textContent += `.ic-DashboardCard__header_image {transform: scale(${options.imageSize / 100})!important; }`;
if (options.cardRoundness !== undefined && options.cardRoundness !== 5) style.textContent += `.ic-DashboardCard {border-radius: ${options.cardRoundness}px!important;}`;
if (options.cardSpacing !== undefined && options.cardSpacing !== 0) style.textContent += `.ic-DashboardCard {margin-right: ${options.cardSpacing / 2}px!important; margin-bottom: ${options.cardSpacing / 2}px!important;}`;
if (options.cardWidth !== undefined && options.cardWidth !== 10) style.textContent += `.ic-DashboardCard {width: ${options.cardWidth}px!important;}`;
if (options.cardHeight !== undefined && options.cardHeight !== 10) style.textContent += `.ic-DashboardCard {height: ${options.cardHeight}px!important;}`;
if (options.cardWidth !== undefined && options.cardWidth !== 262) style.textContent += `.ic-DashboardCard {width: ${options.cardWidth}px!important;}`;
if (options.cardHeight !== undefined && options.cardHeight !== 250) style.textContent += `.ic-DashboardCard {height: ${options.cardHeight}px!important;}`;
}
if (options.custom_styles !== "") style.textContent += options.custom_styles;

View File

@ -1,5 +1,30 @@
const syncedSwitches = ['remind', 'tab_icons', 'hide_feedback', 'dark_mode', 'remlogo', 'full_width', 'auto_dark', 'assignments_due', 'gpa_calc', 'gradient_cards', 'disable_color_overlay', 'dashboard_grades', 'dashboard_notes', 'better_todo', 'condensed_cards'];
const syncedSubOptions = ['todo_colors', 'device_dark', 'relative_dues', 'card_overdues', 'todo_overdues', 'gpa_calc_prepend', 'auto_dark', 'auto_dark_start', 'auto_dark_end', 'num_assignments', 'assignment_date_format', 'todo_hr24', 'grade_hover', 'hide_completed', 'num_todo_items', 'hover_preview', 'scheduledReminder', 'scheduledReminderTime', 'customCardStyles'];
const syncedSubOptions = [
"todo_colors",
"device_dark",
"relative_dues",
"card_overdues",
"todo_overdues",
"gpa_calc_prepend",
"auto_dark",
"auto_dark_start",
"auto_dark_end",
"num_assignments",
"assignment_date_format",
"todo_hr24",
"grade_hover",
"hide_completed",
"num_todo_items",
"hover_preview",
"scheduledReminder",
"scheduledReminderTime",
"customCardStyles",
"imageSize",
"cardRoundness",
"cardSpacing",
"cardWidth",
"cardHeight",
];
const localSwitches = [];
//const apiurl = "http://localhost:3000";
@ -90,7 +115,7 @@ const defaultOptions = {
"cardRoundness": 5,
"cardSpacing": 0,
"cardWidth": 262,
"cardHeight": 150,
"cardHeight": 250,
"customCardStyles": false,
}
};
@ -232,11 +257,11 @@ function setupCardWidthInput(initial) {
}
function setupCardHeightInput(initial) {
let el = document.querySelector("#cardheight");
el.value = initial;
el.addEventListener("input", (e) => {
chrome.storage.sync.set({ "cardheight": e.target.value });
});
let el = document.querySelector("#cardHeight");
el.value = initial;
el.addEventListener("input", (e) => {
chrome.storage.sync.set({ "cardHeight": e.target.value });
});
}
function setup() {
@ -449,6 +474,9 @@ function setup() {
case "export-gpa":
final = { ...final, ...(await getExport(storage, ["gpa_calc_bounds"])) }
break;
case "export-customStyles":
final = { ...final, ...(await getExport(storage, ["custom_styles"])) };
break;
}
}
}
@ -696,10 +724,10 @@ function setup() {
document.querySelector("#cardWidthValue").textContent = value + "%";
});
document.getElementById("cardHeight").addEventListener("input", (e) => {
const value = e.target.value;
chrome.storage.sync.set({ "cardHeight": value });
document.querySelector("#cardHeightValue").textContent = value + "%";
});
const value = e.target.value;
chrome.storage.sync.set({ "cardHeight": value });
document.querySelector("#cardHeightValue").textContent = value + "%";
});
}
function applyGPAPreset(bounds) {
@ -778,6 +806,14 @@ async function getExport(storage, options) {
console.log(e);
}
break;
case "custom_styles":
final["customCardStyles"] = storage["customCardStyles"];
final["imageSize"] = storage["imageSize"];
final["cardRoundness"] = storage["cardRoundness"];
final["cardSpacing"] = storage["cardSpacing"];
final["cardWidth"] = storage["cardWidth"];
final["cardHeight"] = storage["cardHeight"];
break;
default:
final[option] = storage[option];
}