some UI changes

This commit is contained in:
Guy Sandler 2026-08-12 22:19:05 -07:00
parent 2c65b5ab17
commit 433ff17f65
15 changed files with 118 additions and 0 deletions

View File

@ -113,6 +113,9 @@
"relative_due_dates": { "relative_due_dates": {
"message": "Relative Fälligkeitsdaten" "message": "Relative Fälligkeitsdaten"
}, },
"equal_height_cards": {
"message": "Gleiche Höhe"
},
"enter_multiple": { "enter_multiple": {
"message": "(Mehrere mit Komma eingeben)" "message": "(Mehrere mit Komma eingeben)"
}, },

View File

@ -122,6 +122,9 @@
"relative_due_dates": { "relative_due_dates": {
"message": "Relative Due Dates" "message": "Relative Due Dates"
}, },
"equal_height_cards": {
"message": "Equal Height"
},
"enter_multiple": { "enter_multiple": {
"message": "(Enter Multiple With A Comma)" "message": "(Enter Multiple With A Comma)"
}, },

View File

@ -113,6 +113,9 @@
"relative_due_dates": { "relative_due_dates": {
"message": "Fechas pendientes relativas" "message": "Fechas pendientes relativas"
}, },
"equal_height_cards": {
"message": "Altura igual"
},
"enter_multiple": { "enter_multiple": {
"message": "(Ingrese varios con una coma)" "message": "(Ingrese varios con una coma)"
}, },

View File

@ -113,6 +113,9 @@
"relative_due_dates": { "relative_due_dates": {
"message": "Dates d'échéance relatives" "message": "Dates d'échéance relatives"
}, },
"equal_height_cards": {
"message": "Hauteur égale"
},
"enter_multiple": { "enter_multiple": {
"message": "(Entrez plusieurs avec une virgule)" "message": "(Entrez plusieurs avec une virgule)"
}, },

View File

@ -113,6 +113,9 @@
"relative_due_dates": { "relative_due_dates": {
"message": "Date di scadenza relative" "message": "Date di scadenza relative"
}, },
"equal_height_cards": {
"message": "Altezza uguale"
},
"enter_multiple": { "enter_multiple": {
"message": "(Inserisci più numeri con una virgola)" "message": "(Inserisci più numeri con una virgola)"
}, },

View File

@ -113,6 +113,9 @@
"relative_due_dates": { "relative_due_dates": {
"message": "相対的な期日" "message": "相対的な期日"
}, },
"equal_height_cards": {
"message": "高さを揃える"
},
"enter_multiple": { "enter_multiple": {
"message": "(カンマで複数入力)" "message": "(カンマで複数入力)"
}, },

View File

@ -113,6 +113,9 @@
"relative_due_dates": { "relative_due_dates": {
"message": "Datas de vencimento relativas" "message": "Datas de vencimento relativas"
}, },
"equal_height_cards": {
"message": "Altura igual"
},
"enter_multiple": { "enter_multiple": {
"message": "(Digite vários com uma vírgula)" "message": "(Digite vários com uma vírgula)"
}, },

View File

@ -113,6 +113,9 @@
"relative_due_dates": { "relative_due_dates": {
"message": "Относительные сроки выполнения" "message": "Относительные сроки выполнения"
}, },
"equal_height_cards": {
"message": "Одинаковая высота"
},
"enter_multiple": { "enter_multiple": {
"message": "(Введите несколько через запятую)" "message": "(Введите несколько через запятую)"
}, },

View File

@ -113,6 +113,9 @@
"relative_due_dates": { "relative_due_dates": {
"message": "Relativa förfallodatum" "message": "Relativa förfallodatum"
}, },
"equal_height_cards": {
"message": "Jämn höjd"
},
"enter_multiple": { "enter_multiple": {
"message": "(Ange flera med komma)" "message": "(Ange flera med komma)"
}, },

View File

@ -113,6 +113,9 @@
"relative_due_dates": { "relative_due_dates": {
"message": "相对到期日" "message": "相对到期日"
}, },
"equal_height_cards": {
"message": "等高"
},
"enter_multiple": { "enter_multiple": {
"message": "(用逗号输入多个)" "message": "(用逗号输入多个)"
}, },

View File

@ -113,6 +113,9 @@
"relative_due_dates": { "relative_due_dates": {
"message": "相对到期日" "message": "相对到期日"
}, },
"equal_height_cards": {
"message": "等高"
},
"enter_multiple": { "enter_multiple": {
"message": "(用逗号输入多个)" "message": "(用逗号输入多个)"
}, },

View File

@ -120,6 +120,10 @@
<input type="checkbox" id="relative_dues" name="relative_dues"> <input type="checkbox" id="relative_dues" name="relative_dues">
<label for="relative_dues" class="sub-text" data-i18n="relative_due_dates">Relative due dates</label> <label for="relative_dues" class="sub-text" data-i18n="relative_due_dates">Relative due dates</label>
</div> </div>
<div class="sub-option">
<input type="checkbox" id="equal_height_cards" name="equal_height_cards">
<label for="equal_height_cards" class="sub-text" data-i18n="equal_height_cards">Equal height</label>
</div>
<div style="margin-top: 5px"> <div style="margin-top: 5px">
<span class="sub-text" data-i18n="max_items">Max items to show: </span><span <span class="sub-text" data-i18n="max_items">Max items to show: </span><span
id="numAssignments"></span> id="numAssignments"></span>

View File

@ -72,6 +72,7 @@ chrome.runtime.onInstalled.addListener(function () {
// "todo_overdues": false, // "todo_overdues": false,
"card_overdues": false, "card_overdues": false,
"relative_dues": false, "relative_dues": false,
"equal_height_cards": false,
"hide_feedback": false, "hide_feedback": false,
"dark_mode_fix": [], "dark_mode_fix": [],
"assignment_states": {}, "assignment_states": {},

View File

@ -663,6 +663,11 @@ function applyOptionsChanges(changes) {
cardAssignments = preloadAssignmentEls(); cardAssignments = preloadAssignmentEls();
loadCardAssignments(); loadCardAssignments();
break; break;
case "equal_height_cards":
// No need to rebuild the assignment rows — just stretch (or reset)
// the card heights in place for a snappy toggle.
equalizeCardHeights();
break;
case "custom_cards": case "custom_cards":
case "custom_cards_2": case "custom_cards_2":
case "custom_cards_3": case "custom_cards_3":
@ -3537,6 +3542,51 @@ function createCardAssignment(assignment) {
let cardAssignments; let cardAssignments;
/*
Equal Height Cards — when enabled, every dashboard card's assignment area is
stretched to match the tallest one so cards with fewer assignments don't end
up shorter than the rest. Uses min-height (never a fixed height) so cards can
still grow if their content exceeds the tallest card.
*/
let equalHeightResizeTimer = null;
function equalizeCardHeights() {
const cards = document.querySelectorAll(".ic-DashboardCard");
if (cards.length === 0) return;
const enabled = options.equal_height_cards === true && options.assignments_due === true;
// Always clear any previously applied min-height first so we can either
// measure natural heights (when enabling) or fully reset (when disabling).
cards.forEach(card => {
const area = card.querySelector(".canvasrefined-card-assignment");
if (area) area.style.removeProperty("min-height");
});
if (!enabled) return;
// Measure the natural height of each card's assignment area, then stretch
// every area to the tallest one. Card headers are uniform, so equalizing
// the assignment area makes all cards the same total height.
let maxHeight = 0;
cards.forEach(card => {
const area = card.querySelector(".canvasrefined-card-assignment");
if (area) maxHeight = Math.max(maxHeight, area.offsetHeight);
});
if (maxHeight > 0) {
cards.forEach(card => {
const area = card.querySelector(".canvasrefined-card-assignment");
if (area) area.style.minHeight = maxHeight + "px";
});
}
}
window.addEventListener("resize", () => {
if (equalHeightResizeTimer) clearTimeout(equalHeightResizeTimer);
equalHeightResizeTimer = setTimeout(equalizeCardHeights, 150);
});
function preloadAssignmentEls() { function preloadAssignmentEls() {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
let assignmentEls = {}; let assignmentEls = {};
@ -3569,6 +3619,7 @@ function loadCardAssignments() {
document.querySelectorAll(".canvasrefined-card-assignment").forEach(card => { document.querySelectorAll(".canvasrefined-card-assignment").forEach(card => {
card.style.display = "none"; card.style.display = "none";
}); });
equalizeCardHeights();
return; return;
} }
setupCardAssignments(); setupCardAssignments();
@ -3608,6 +3659,9 @@ function loadCardAssignments() {
let assignmentDivLink = makeElement("a", assignmentContainer, { "className": "canvasrefined-assignment-link", "textContent": "None" }); let assignmentDivLink = makeElement("a", assignmentContainer, { "className": "canvasrefined-assignment-link", "textContent": "None" });
} }
}); });
// Wait one frame so the browser lays out the freshly appended
// assignment rows before measuring/equalizing card heights.
requestAnimationFrame(equalizeCardHeights);
} catch (e) { } catch (e) {
logError(e); logError(e);
} }

View File

@ -6,6 +6,7 @@ const syncedSubOptions = [
"device_dark", "device_dark",
"relative_dues", "relative_dues",
"card_overdues", "card_overdues",
"equal_height_cards",
// "todo_overdues", // "todo_overdues",
"gpa_calc_prepend", "gpa_calc_prepend",
"auto_dark", "auto_dark",
@ -112,6 +113,7 @@ const defaultOptions = {
// "todo_overdues": false, // "todo_overdues": false,
"card_overdues": false, "card_overdues": false,
"relative_dues": false, "relative_dues": false,
"equal_height_cards": false,
"hide_feedback": false, "hide_feedback": false,
"dark_mode_fix": [], "dark_mode_fix": [],
"assignment_states": {}, "assignment_states": {},
@ -412,6 +414,25 @@ function toggleBetterTodoSubOptions(betterTodoOn) {
} }
} }
// Hide the sub-options of a big toggle when it is turned off.
// For gpa_calc / assignments_due / better_todo the whole .sub-options block is
// hidden. For auto_dark ("schedule dark mode") only the start/end time clocks
// (.timesets) are hidden, leaving the device-dark checkbox visible.
function toggleSubOptionsVisibility(option, isOn) {
const togglesWithSubOptions = ["gpa_calc", "assignments_due", "better_todo", "auto_dark"];
if (!togglesWithSubOptions.includes(option)) return;
const optionEl = document.getElementById(option);
if (!optionEl) return;
const subOptions = optionEl.parentElement.querySelector(":scope > .sub-options");
if (!subOptions) return;
if (option === "auto_dark") {
const timesets = subOptions.querySelector(".timesets");
if (timesets) timesets.style.display = isOn ? "" : "none";
} else {
subOptions.style.display = isOn ? "" : "none";
}
}
function setup() { function setup() {
const menu = { const menu = {
@ -428,6 +449,7 @@ function setup() {
"device_dark", "device_dark",
"relative_dues", "relative_dues",
"card_overdues", "card_overdues",
"equal_height_cards",
// "todo_overdues", // "todo_overdues",
"gpa_calc_prepend", "gpa_calc_prepend",
"auto_dark", "auto_dark",
@ -563,10 +585,14 @@ function setup() {
if (option === "better_todo") { if (option === "better_todo") {
toggleBetterTodoSubOptions(status); toggleBetterTodoSubOptions(status);
} }
toggleSubOptionsVisibility(option, status);
}); });
}); });
toggleBetterSidebarSubOptions(sync["better_sidebar"] === true); toggleBetterSidebarSubOptions(sync["better_sidebar"] === true);
toggleBetterTodoSubOptions(sync["better_todo"] === true); toggleBetterTodoSubOptions(sync["better_todo"] === true);
["gpa_calc", "assignments_due", "better_todo", "auto_dark"].forEach(opt => {
toggleSubOptionsVisibility(opt, sync[opt] === true);
});
}); });
chrome.storage.sync.get(menu.checkboxes, sync => { chrome.storage.sync.get(menu.checkboxes, sync => {