CanadianBacon/CanvasRefined
1
0
Fork 0
mirror of https://github.com/GuySandler/CanvasRefined.git synced 2026-06-21 01:49:54 +02:00
Code Issues Actions Packages Projects Releases Wiki Activity

ui revamp 2

Browse Source 
better cards UI, now I am going to merge the card colors page into it
This commit is contained in:
Guy Sandler 2026-02-12 19:13:30 -08:00
parent 81f200e5b7
commit 77cdc24df6
4 changed files with 100 additions and 116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

97
css/popup.css
View File

@ -115,7 +115,7 @@ h2 {margin-top: 20px;font-weight:600}
textarea {resize: vertical} textarea {resize: vertical}
#premade-themes {min-height: 375px; grid-template-rows: repeat(6, 1fr)} #premade-themes {min-height: 375px; grid-template-rows: repeat(6, 1fr)}
#premade-themes, #premade-darkmodes {display:grid;grid-template-columns: repeat(4, 1fr);gap: 3px;} #premade-themes, #premade-darkmodes {display:grid;grid-template-columns: repeat(4, 1fr);gap: 3px;}
#error_log_output, #rk_output {min-height: 100px;} #error_log_output, #rk_output {min-height: 100px;}
#image-tester {display: none;} #image-tester {display: none;}
#alert {font-size:13px;background: #e7495ebd; backdrop-filter: blur(1px); border-radius: 8px; padding: 15px; margin: 20px;position: fixed; transition: .3s bottom; bottom: -400px; left: 0;z-index:100000;} #alert {font-size:13px;background: #e7495ebd; backdrop-filter: blur(1px); border-radius: 8px; padding: 15px; margin: 20px;position: fixed; transition: .3s bottom; bottom: -400px; left: 0;z-index:100000;}
#alert:hover {cursor:pointer;} #alert:hover {cursor:pointer;}
@ -201,90 +201,17 @@ input[type="checkbox"]:checked {background: #8dd28d;}
::-webkit-scrollbar-thumb {background: #323232;border-radius:2px;} ::-webkit-scrollbar-thumb {background: #323232;border-radius:2px;}
::-webkit-scrollbar-button {background: #161616; height: 4px} ::-webkit-scrollbar-button {background: #161616; height: 4px}
.card-grid { .card-grid {display: grid;grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));gap: 10px;margin-bottom: 20px;}
display: grid; .course-card-button {background: var(--inputbg);border: 1px solid var(--borders);border-radius: 8px;padding: 15px 10px;color: #e2e2e2;font-family: inherit;font-size: 12px;font-weight: 600;cursor: pointer;transition: 0.2s all ease;text-align: center;min-height: 60px;display: flex;align-items: center;justify-content: center;}
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); .course-card-button:hover {background: #adbcc724;border-color: #56Caf0;}
gap: 10px; .course-card-button.active {background: #56Caf0;color: #000;}
margin-bottom: 20px; .card-edit-menu {background: var(--containerbg);border-radius: 10px;padding: 20px;margin-top: 15px;}
} .card-edit-header {display: flex;justify-content: space-between;align-items: center;margin-bottom: 15px;}
.card-edit-title {font-size: 16px;font-weight: 600;color: #fff;}
.course-card-button { .card-close-btn {background: none;border: none;color: #737373;font-size: 18px;cursor: pointer;padding: 8px;border-radius: 5px;}
background: var(--inputbg); .card-edit-section {margin-bottom: 15px;}
border: 1px solid var(--borders); .card-edit-label {font-size: 13px;color: #c7c7c7;margin-bottom: 5px;display: block;}
border-radius: 8px; .card-image-preview {width: 100px;height: 60px;background-size: cover;background-position: center;border-radius: 6px;margin-top: 8px;border: 1px solid var(--borders);}
padding: 15px 10px;
color: #e2e2e2;
font-family: inherit;
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: 0.2s all ease;
text-align: center;
min-height: 60px;
display: flex;
align-items: center;
justify-content: center;
}
.course-card-button:hover {
background: #adbcc724;
border-color: #56Caf0;
}
.course-card-button.active {
background: #56Caf0;
color: #000;
}
.card-edit-menu {
background: var(--containerbg);
border-radius: 10px;
padding: 20px;
margin-top: 15px;
}
.card-edit-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
}
.card-edit-title {
font-size: 16px;
font-weight: 600;
color: #fff;
}
.card-close-btn {
background: none;
border: none;
color: #999;
font-size: 18px;
cursor: pointer;
padding: 5px;
}
.card-edit-section {
margin-bottom: 15px;
}
.card-edit-label {
font-size: 13px;
color: #c7c7c7;
margin-bottom: 5px;
display: block;
}
.card-image-preview {
width: 100px;
height: 60px;
background-size: cover;
background-position: center;
border-radius: 6px;
margin-top: 8px;
border: 1px solid var(--borders);
}
@keyframes like { @keyframes like {
0% { 0% {

2
html/popup.html
View File

@ -737,7 +737,7 @@
<h3 class="header-small">Missing cards?</h3> <h3 class="header-small">Missing cards?</h3>
<div style="display: flex; gap: 10px; align-items: center;"> <div style="display: flex; gap: 10px; align-items: center;">
<input type="checkbox" id="card_method_dashboard"></input> <input type="checkbox" id="card_method_dashboard"></input>
<span>Enable alternative card method</span> <span>Get Active Cards From Dashboard</span>
</div> </div>
</div> </div>
</div> </div>

2
js/background.js
View File

@ -79,7 +79,7 @@ chrome.runtime.onInstalled.addListener(function () {
"cumulative_gpa": { "name": "Cumulative GPA", "hidden": false, "weight": "dnc", "credits": 999, "gr": 3.21 }, "cumulative_gpa": { "name": "Cumulative GPA", "hidden": false, "weight": "dnc", "credits": 999, "gr": 3.21 },
"show_updates": false, "show_updates": false,
"card_method_date": false, "card_method_date": false,
"card_method_dashboard": false, "card_method_dashboard": true,
"card_limit": 25, "card_limit": 25,
"remind": false, "remind": false,
"reminders": [], "reminders": [],

115
js/popup.js
View File

@ -108,7 +108,7 @@ const defaultOptions = {
"cumulative_gpa": { "name": "Cumulative GPA", "hidden": false, "weight": "dnc", "credits": 999, "gr": 3.21 }, "cumulative_gpa": { "name": "Cumulative GPA", "hidden": false, "weight": "dnc", "credits": 999, "gr": 3.21 },
"show_updates": false, "show_updates": false,
"card_method_date": false, "card_method_date": false,
"card_method_dashboard": false, "card_method_dashboard": true,
"card_limit": 25, "card_limit": 25,
"scheduledReminder": false, "scheduledReminder": false,
"scheduledReminderTime": { "hour": "09", "minute": "00" }, "scheduledReminderTime": { "hour": "09", "minute": "00" },
@ -1511,8 +1511,6 @@ function setCustomImage(key, val) {
let test = new Image(); let test = new Image();
test.onerror = () => { test.onerror = () => {
displayAlert(true, "It seems that the image link you provided isn't working. Make sure to right click on any images you want to use and select \"copy image address\" to get the correct link."); displayAlert(true, "It seems that the image link you provided isn't working. Make sure to right click on any images you want to use and select \"copy image address\" to get the correct link.");
// ensures storage limit error will override previous error
updateCards(key, { "img": val }); updateCards(key, { "img": val });
} }
test.onload = clearAlert; test.onload = clearAlert;
@ -1597,12 +1595,24 @@ function displayAdvancedCards() {
console.error("Card grid element not found"); console.error("Card grid element not found");
return; return;
} }
cardGrid.innerHTML = ""; cardGrid.innerHTML = "";
const customCards = storage.custom_cards || {}; const customCards = storage.custom_cards || {};
const customCards2 = storage.custom_cards_2 || {}; const customCards2 = storage.custom_cards_2 || {};
const allCards = { ...customCards, ...customCards2 }; const allCards = {};
Object.keys(customCards).forEach((courseId) => {
allCards[courseId] = {
...customCards[courseId],
...(customCards2[courseId] || {}),
};
});
Object.keys(customCards2).forEach((courseId) => {
if (!allCards[courseId]) {
allCards[courseId] = customCards2[courseId];
}
});
if (Object.keys(allCards).length === 0) { if (Object.keys(allCards).length === 0) {
cardGrid.innerHTML = '<p style="text-align: center; color: #999; padding: 20px;">No course cards found. Visit your Canvas dashboard to load courses.</p>'; cardGrid.innerHTML = '<p style="text-align: center; color: #999; padding: 20px;">No course cards found. Visit your Canvas dashboard to load courses.</p>';
return; return;
@ -1620,8 +1630,6 @@ function displayAdvancedCards() {
if (editMenu) { if (editMenu) {
editMenu.style.display = "none"; editMenu.style.display = "none";
} }
document.getElementById("card-edit-menu").style.display = "none";
}); });
sendFromPopup("getCards"); sendFromPopup("getCards");
} }
@ -1629,9 +1637,18 @@ function displayAdvancedCards() {
function createCourseButton(courseId, courseData) { function createCourseButton(courseId, courseData) {
const button = document.createElement("button"); const button = document.createElement("button");
button.className = "course-card-button"; button.className = "course-card-button";
button.textContent = courseData.name || `Course ${courseId}`; const displayName =
courseData.name ||
courseData.default ||
courseData.code ||
`Course ${courseId}`;
button.textContent = displayName;
button.dataset.courseId = courseId; button.dataset.courseId = courseId;
if (courseData.img || courseData.hidden || courseData.hide) {
button.classList.add("customized");
}
button.addEventListener("click", () => { button.addEventListener("click", () => {
document.querySelectorAll(".course-card-button").forEach(btn => btn.classList.remove("active")); document.querySelectorAll(".course-card-button").forEach(btn => btn.classList.remove("active"));
button.classList.add("active"); button.classList.add("active");
@ -1643,12 +1660,32 @@ function createCourseButton(courseId, courseData) {
function showCardEditMenu(courseId, courseData) { function showCardEditMenu(courseId, courseData) {
const editMenu = document.getElementById("card-edit-menu"); const editMenu = document.getElementById("card-edit-menu");
const cardGrid = document.getElementById("card-grid");
if (cardGrid) cardGrid.style.display = "none";
editMenu.style.display = "block"; editMenu.style.display = "block";
const displayName =
courseData.name ||
courseData.default ||
courseData.code ||
`Course ${courseId}`;
editMenu.innerHTML = ` editMenu.innerHTML = `
<div class="card-edit-header"> <div class="card-edit-header">
<h3 class="card-edit-title">${courseData.name || `Course ${courseId}`}</h3> <h3 class="card-edit-title">${displayName}</h3>
<button class="card-close-btn" onclick="hideCardEditMenu()">×</button> <button class="card-close-btn" id="card-close-btn">close</button>
</div>
<div class="card-edit-section">
<label class="card-edit-label">Custom Name</label>
<input type="text" class="card-input" id="card-name-input"
value="${courseData.name || ""}" placeholder="Enter custom course name">
</div>
<div class="card-edit-section">
<label class="card-edit-label">Custom Code</label>
<input type="text" class="card-input" id="card-code-input"
value="${courseData.code || ""}" placeholder="Enter custom course code">
</div> </div>
<div class="card-edit-section"> <div class="card-edit-section">
@ -1658,28 +1695,34 @@ function showCardEditMenu(courseId, courseData) {
<div class="card-image-preview" id="card-image-preview"></div> <div class="card-image-preview" id="card-image-preview"></div>
</div> </div>
<div class="card-edit-section">
<label class="card-edit-label">Course Link</label>
<input type="text" class="card-input" id="card-link-input"
value="${courseData.link || ""}" placeholder="Enter custom link or 'none'">
</div>
<div class="card-edit-section"> <div class="card-edit-section">
<label class="card-edit-label">Hide Card</label> <label class="card-edit-label">Hide Card</label>
<div style="display: flex; align-items: center; gap: 8px;"> <div style="display: flex; align-items: center; gap: 8px;">
<input type="checkbox" id="card-hide-input" ${courseData.hide ? "checked" : ""}> <input type="checkbox" id="card-hide-input" ${courseData.hidden || courseData.hide ? "checked" : ""}>
<span>Hide this card from dashboard</span> <span>Hide this card from dashboard</span>
</div> </div>
</div> </div>
<div style="display: flex; gap: 10px; margin-top: 20px;"> <div style="display: flex; gap: 10px; margin-top: 20px;">
<button class="big-button" onclick="saveCardChanges('${courseId}')">Save Changes</button> <button class="big-button" id="save-card-btn">Save Changes</button>
<button class="customization-button" onclick="resetCardToDefault('${courseId}')">Reset to Default</button> <button class="customization-button" id="reset-card-btn">Reset to Default</button>
</div> </div>
`; `;
document
.getElementById("card-close-btn")
.addEventListener("click", hideCardEditMenu);
document
.getElementById("save-card-btn")
.addEventListener("click", () => saveCardChanges(courseId));
document
.getElementById("reset-card-btn")
.addEventListener("click", () => resetCardToDefault(courseId));
updateImagePreview(); updateImagePreview();
document.getElementById("card-image-input").addEventListener("input", updateImagePreview); document
.getElementById("card-image-input")
.addEventListener("input", updateImagePreview);
} }
function updateImagePreview() { function updateImagePreview() {
@ -1699,27 +1742,37 @@ function updateImagePreview() {
} }
function saveCardChanges(courseId) { function saveCardChanges(courseId) {
const nameInput = document.getElementById("card-name-input");
const codeInput = document.getElementById("card-code-input");
const imageInput = document.getElementById("card-image-input"); const imageInput = document.getElementById("card-image-input");
const linkInput = document.getElementById("card-link-input");
const hideInput = document.getElementById("card-hide-input"); const hideInput = document.getElementById("card-hide-input");
const updates = { const updates = {
name: nameInput.value,
code: codeInput.value,
img: imageInput.value, img: imageInput.value,
link: linkInput.value, hidden: hideInput.checked,
hide: hideInput.checked, hide: hideInput.checked,
}; };
updateCards(courseId, updates); if (imageInput.value !== "" && imageInput.value !== "none") {
setCustomImage(courseId, imageInput.value);
} else {
updateCards(courseId, updates);
}
displayAlert(false, "Card settings saved successfully!"); displayAlert(false, "Card settings saved successfully!");
hideCardEditMenu();
setTimeout(() => { setTimeout(() => {
displayAdvancedCards(); displayAdvancedCards();
}, 500); }, 500);
} }
function resetCardToDefault(courseId) { function resetCardToDefault(courseId) {
updateCards(courseId, { img: "", link: "", hide: false }); updateCards(courseId, { name: "", code: "", img: "", hidden: false, hide: false });
displayAlert(false, "Card reset to default settings!"); displayAlert(false, "Card reset to default settings!");
setTimeout(() => { setTimeout(() => {
@ -1728,11 +1781,15 @@ function resetCardToDefault(courseId) {
} }
function hideCardEditMenu() { function hideCardEditMenu() {
document.getElementById("card-edit-menu").style.display = "none"; const editMenu = document.getElementById("card-edit-menu");
const cardGrid = document.getElementById("card-grid");
document.querySelectorAll(".course-card-button").forEach((btn) => { if (editMenu) editMenu.style.display = "none";
btn.classList.remove("active"); if (cardGrid) cardGrid.style.display = "grid";
});
document
.querySelectorAll(".course-card-button")
.forEach((btn) => btn.classList.remove("active"));
} }
function toggleDarkModeDisable(disabled) { function toggleDarkModeDisable(disabled) {