mirror of
https://github.com/GuySandler/CanvasRefined.git
synced 2026-09-25 14:25:10 +02:00
more bugfixes, cancelled dashboard v2
This commit is contained in:
Guy Sandler
parent
fb5651eda9
commit
25ff281bf9
@ -63,7 +63,6 @@ Canvas Refined adds more with more to come!
|
||||
- Simplified UI
|
||||
|
||||
## Planned Features (by priority)
|
||||
- widgets (music, timer)
|
||||
- auto rotate theme + theme history + fix theme submissions
|
||||
- mail assistent + ui revamp
|
||||
- better calender (+ calender sync)
|
||||
|
||||
@ -65,12 +65,6 @@
|
||||
"24hrformat": {
|
||||
"message": "Use 24 hr Format"
|
||||
},
|
||||
"widgets": {
|
||||
"message": "Widgets"
|
||||
},
|
||||
"widget_clock": {
|
||||
"message": "Clock"
|
||||
},
|
||||
"dashboard_notes": {
|
||||
"message": "Dashboard Notes"
|
||||
},
|
||||
|
||||
@ -22,6 +22,7 @@
|
||||
.canvasrefined-export-output {position: fixed;height:100vh;width:100vw;top:0;left:0;z-index:10000;background:#000000c7;display:flex;align-items:center;justify-content:center}
|
||||
.canvasrefined-export-copy { font-size:12px;white-space: pre-wrap;max-height:80vh;overflow:auto;padding:8px}
|
||||
.canvasrefined-export-output-inner {width: 50%;background:#000;color:#fff;}
|
||||
.canvasrefined-dashboard-notes {width: 100%; box-sizing: border-box; overflow: hidden; resize: none;}
|
||||
.canvasrefined-card-container {padding-bottom: 4px;}
|
||||
.canvasrefined-assignment-container {margin: 0;padding:0;color: var(--ic-brand-font-color-dark-lightened-30);display: flex;justify-content:space-between;font-size:14px;align-items: center;transition:.2s all;}
|
||||
.canvasrefined-card-header-container {align-items: center;display: flex;justify-content: space-between;padding: 0 18px;color:var(--ic-brand-font-color-dark-lightened-30);font-size:16px;font-weight:700;margin: 0;}
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
:root {--inputbg: #1010104f;--containerbg: #00000047;--inputbg: #ffffff14;}
|
||||
body{width:505px;height: 100%; overflow-x: hidden; font-family: 'Wix Madefor Text', sans-serif;color: #e2e2e2;background: #161616;transition: .3s height}
|
||||
html, body{width:465px;max-width:465px;overflow-x:hidden;box-sizing:border-box}
|
||||
body{min-height:100%;height:auto;font-family: 'Wix Madefor Text', sans-serif;color: #e2e2e2;background: #161616;transition: .3s height}
|
||||
button {font-family: 'Wix Madefor Text', sans-serif}
|
||||
h1, h2, p, body{margin:0;padding:0}
|
||||
h1 {font-size:30px;}
|
||||
@ -81,13 +82,26 @@ h2 {margin-top: 20px;font-weight:600}
|
||||
.changer-container {display: flex; align-items: center;gap: 10px;}
|
||||
.changer-container .card-input[type="color"] {height: 35px; max-width: 35px;background: none; border: none; padding: 0; margin: 0;cursor: pointer}
|
||||
.changer-container .card-input[type="color"]::-webkit-color-swatch {border-radius:6px;width:40px;margin:0;padding:0;}
|
||||
.color-options {}
|
||||
#gradientColorFrom:hover, #gradientColorTo:hover {cursor: pointer}
|
||||
.color-picker-small {height: 30px; width: 30px; border: none; background:var(--inputbg); border-radius: 4px}
|
||||
.color-picker-small::-webkit-color-swatch {border-radius: 4px; border: 7px solid #000000;border: none;}
|
||||
.color-picker-small::-moz-color-swatch {border-radius: 4px; border: 7px solid #000000;border: none;}
|
||||
.more-options-container {display: grid; gap: 6px; grid-template-columns: repeat(4, 1fr); margin-top: 10px}
|
||||
.more-options-container .big-button {display: flex; flex-direction: column; gap: 6px;justify-content:center;align-items:center;padding:15px 10px}
|
||||
.more-options-container .big-button {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
min-height: 72px;
|
||||
box-sizing: border-box;
|
||||
padding: 12px 10px;
|
||||
text-align: center;
|
||||
}
|
||||
.more-options-container .big-button span {
|
||||
line-height: 1.15;
|
||||
}
|
||||
.palette-selection {display: flex; gap: 5px;align-items: center;margin-top: 5px;}
|
||||
.palette-selection .card-input {width: 70px;margin: 0;}
|
||||
.colors-preview {display: flex;overflow:hidden;border-radius:3px;margin-top:4px;}
|
||||
@ -132,7 +146,7 @@ input[type="checkbox"] { appearance: none; background: var(--inputbg); margin: 0
|
||||
input[type="checkbox"]::before { content: ""; width: 10px; height: 10px; transform: scale(0); box-shadow: inset 1em 1em #323232; transform-origin: center; clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);}
|
||||
input[type="checkbox"]:checked::before {transform: scale(1);}
|
||||
input[type="checkbox"]:checked {background: #8dd28d;}
|
||||
#gradientbg {height: 550px;width: 150%;position: absolute;z-index: -1;opacity: .4;left: -25%; top: 0px;background: radial-gradient(at 50% 0%, #ff8349 0px, transparent 50%), radial-gradient(at 90% 0%, #ff67bb 0px, transparent 50%), radial-gradient(at 10% 0%, #ff3558 0px, transparent 50%);}
|
||||
#gradientbg {height: 550px;width: 100%;position: fixed;z-index: -1;opacity: .4;left: 0; top: 0px;pointer-events:none;background: radial-gradient(at 50% 0%, #ff8349 0px, transparent 50%), radial-gradient(at 90% 0%, #ff67bb 0px, transparent 50%), radial-gradient(at 10% 0%, #ff3558 0px, transparent 50%);}
|
||||
#dark-mode-fix-urls { display: flex; gap: 5px;flex-wrap: wrap;}
|
||||
.fixed-url {display: flex; gap:10px; align-items: center;flex: 0;padding: 7px 14px;}
|
||||
.fixed-url button {background: #1e1e1e;padding: 3px 6px;border-radius:4px;color: #fff;border:none;font-size:12px}
|
||||
|
||||
@ -50,10 +50,6 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M22 9l-10 -4l-10 4l10 4l10 -4v6"></path><path d="M6 10.6v5.4a6 3 0 0 0 12 0v-5.4"></path></svg>
|
||||
<span data-i18n="gpa_settings">GPA Settings</span>
|
||||
</button>
|
||||
<button id="widgets-btn" class="big-button tab-btn">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 5m0 1a1 1 0 0 1 1 -1h12a1 1 0 0 1 1 1v12a1 1 0 0 1 -1 1h-12a1 1 0 0 1 -1 -1z"/><path d="M9 9h6v6h-6z"/><path d="M3 10h2m-2 4h2m10 -10v2m-4 -2v2m-4 -2v2m10 8h2m-2 4h2"/></svg>
|
||||
<span data-i18n="widgets">Widgets</span>
|
||||
</button>
|
||||
<button id="report-issue-btn" class="big-button tab-btn">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 9v4"></path><path d="M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636 -2.87l-8.106 -13.536a1.914 1.914 0 0 0 -3.274 0z"></path><path d="M12 16h.01"></path></svg>
|
||||
<span data-i18n="report_issue">Report issue</span>
|
||||
@ -959,28 +955,6 @@
|
||||
|
||||
</div>
|
||||
|
||||
<div class="widgets-container tab" style="display:none">
|
||||
<div class="tab-header">
|
||||
<div>
|
||||
<h2 style="margin-top: 0" data-i18n="widgets">Widgets</h2>
|
||||
</div>
|
||||
<button class="big-button back-btn" data-i18n="back">Back</button>
|
||||
</div>
|
||||
<div class="options">
|
||||
<div class="option-container">
|
||||
<div class="option" id="widget_clock">
|
||||
<input type="radio" id="off" name="widget_clock">
|
||||
<input type="radio" id="on" name="widget_clock">
|
||||
<div class="slider">
|
||||
<div class="sliderknob"></div>
|
||||
<div class="sliderbg"></div>
|
||||
</div>
|
||||
<span class="option-name">Clock</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="report-issue-container tab">
|
||||
<div class="tab-header">
|
||||
<div>
|
||||
|
||||
@ -35,7 +35,6 @@ chrome.runtime.onInstalled.addListener(function () {
|
||||
"assignments_done": [],
|
||||
"dashboard_grades": true,
|
||||
"assignment_date_format": false,
|
||||
"widget_clock": false,
|
||||
"dashboard_notes": false,
|
||||
"dashboard_notes_text": "",
|
||||
"better_todo": false,
|
||||
|
||||
145
js/content.js
145
js/content.js
@ -501,9 +501,6 @@ function applyOptionsChanges(changes) {
|
||||
case "gradient_cards":
|
||||
changeGradientCards();
|
||||
break;
|
||||
case "widget_clock":
|
||||
loadWidgets();
|
||||
break;
|
||||
case "dashboard_notes":
|
||||
loadDashboardNotes();
|
||||
break;
|
||||
@ -890,7 +887,6 @@ function checkDashboardReady() {
|
||||
|
||||
const dashboardCards = document.querySelector("#DashboardCard_Container");
|
||||
if (dashboardCards) {
|
||||
loadWidgets();
|
||||
}
|
||||
|
||||
dashboardReadyTimer = setTimeout(() => {
|
||||
@ -899,7 +895,6 @@ function checkDashboardReady() {
|
||||
const c = document.querySelector("#DashboardCard_Container");
|
||||
if (c) {
|
||||
let cards = document.querySelectorAll(".ic-DashboardCard");
|
||||
loadWidgets();
|
||||
changeGradientCards();
|
||||
setupCardAssignments();
|
||||
loadCardAssignments();
|
||||
@ -3069,7 +3064,6 @@ async function changeColorPreset(colors) {
|
||||
let cards = document.querySelectorAll(".ic-DashboardCard__header");
|
||||
let sortedCards = [];
|
||||
cards.forEach(card => {
|
||||
if (card.closest('.canvasrefined-widget-clock')) return;
|
||||
sortedCards.push({ "href": card.querySelector(".ic-DashboardCard__link").href, "el": card });
|
||||
});
|
||||
sortedCards.sort((a, b) => a.href > b.href ? 1 : -1);
|
||||
@ -3294,7 +3288,6 @@ function insertGrades() {
|
||||
let cards = document.querySelectorAll('.ic-DashboardCard');
|
||||
if (cards.length === 0 || cards[0].querySelectorAll(".ic-DashboardCard__link").length === 0) return;
|
||||
for (let i = 0; i < cards.length; i++) {
|
||||
if (cards[i].classList.contains('canvasrefined-widget-clock')) continue;
|
||||
let course_id = parseInt(cards[i].querySelector(".ic-DashboardCard__link").href.split("courses/")[1]);
|
||||
data.forEach(grade => {
|
||||
if (course_id === grade.id) {
|
||||
@ -3406,7 +3399,6 @@ function loadCardAssignments() {
|
||||
const now = new Date();
|
||||
|
||||
cards.forEach(card => {
|
||||
if (card.classList.contains('canvasrefined-widget-clock')) return;
|
||||
let count = 0;
|
||||
let link = card.querySelector(".ic-DashboardCard__link");
|
||||
if (!link) return;
|
||||
@ -3499,12 +3491,10 @@ function loadCardAssignments2(c = null) {
|
||||
function setupCardAssignments() {
|
||||
if (options.assignments_due !== true) return;
|
||||
try {
|
||||
let widgetsCount = document.querySelectorAll('.canvasrefined-widget-clock .canvasrefined-card-container').length;
|
||||
let containersCount = document.querySelectorAll('.canvasrefined-card-container').length - widgetsCount;
|
||||
let containersCount = document.querySelectorAll('.canvasrefined-card-container').length;
|
||||
if (document.querySelectorAll('.ic-DashboardCard').length > 0 && containersCount > 0) return;
|
||||
let cards = document.querySelectorAll('.ic-DashboardCard');
|
||||
cards.forEach(card => {
|
||||
if (card.classList.contains('canvasrefined-widget-clock')) return;
|
||||
let assignmentContainer = card.querySelector(".canvasrefined-card-assignment") || makeElement("div", card, { "className": "canvasrefined-card-assignment" });
|
||||
let assignmentsDueHeader = card.querySelector(".canvasrefined-card-header-container") || makeElement("div", assignmentContainer, { "className": "canvasrefined-card-header-container" });
|
||||
let assignmentsDueLabel = card.querySelector(".canvasrefined-card-header") || makeElement("h3", assignmentsDueHeader, { "className": "canvasrefined-card-header", "textContent": chrome.i18n.getMessage("due") });
|
||||
@ -3893,11 +3883,26 @@ Dashboard notes
|
||||
*/
|
||||
|
||||
let dashboardNotesTimer;
|
||||
let dashboardNotesResizeFrame;
|
||||
function delayDashboardNotesStorage(text) {
|
||||
clearTimeout(dashboardNotesTimer);
|
||||
dashboardNotesTimer = setTimeout(() => {
|
||||
chrome.storage.sync.set({ dashboard_notes_text: text });
|
||||
}, 1000);
|
||||
}, 250);
|
||||
}
|
||||
|
||||
function resizeDashboardNotes(notes) {
|
||||
if (!notes) return;
|
||||
notes.style.height = "auto";
|
||||
notes.style.height = `${notes.scrollHeight + 5}px`;
|
||||
}
|
||||
|
||||
function scheduleDashboardNotesResize(notes) {
|
||||
if (dashboardNotesResizeFrame) cancelAnimationFrame(dashboardNotesResizeFrame);
|
||||
dashboardNotesResizeFrame = requestAnimationFrame(() => {
|
||||
dashboardNotesResizeFrame = null;
|
||||
resizeDashboardNotes(notes);
|
||||
});
|
||||
}
|
||||
|
||||
function loadDashboardNotes() {
|
||||
@ -3910,16 +3915,15 @@ function loadDashboardNotes() {
|
||||
document.querySelector("#DashboardCard_Container").prepend(notes);
|
||||
notes.value = options.dashboard_notes_text;
|
||||
notes.style.display = "block";
|
||||
notes.style.height = "auto";
|
||||
notes.style.height = notes.scrollHeight + 5 + "px";
|
||||
resizeDashboardNotes(notes);
|
||||
notes.addEventListener('input', function () {
|
||||
options.dashboard_notes_text = this.value;
|
||||
delayDashboardNotesStorage(this.value);
|
||||
this.style.height = "auto";
|
||||
this.style.height = this.scrollHeight + 5 + "px";
|
||||
scheduleDashboardNotesResize(this);
|
||||
});
|
||||
} else {
|
||||
notes.value = options.dashboard_notes_text;
|
||||
notes.style.display = "block";
|
||||
resizeDashboardNotes(notes);
|
||||
}
|
||||
} else {
|
||||
let notes = document.querySelector('.canvasrefined-dashboard-notes');
|
||||
@ -3927,113 +3931,6 @@ function loadDashboardNotes() {
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Widgets
|
||||
*/
|
||||
|
||||
let clockInterval;
|
||||
|
||||
function loadWidgets() {
|
||||
if (options.widget_clock === true) {
|
||||
let card = document.querySelector('.canvasrefined-widget-clock');
|
||||
if (!card) {
|
||||
let container = document.querySelector(".ic-DashboardCard__box__container");
|
||||
if (!container) return;
|
||||
let realCard = container.querySelector(".ic-DashboardCard");
|
||||
if (realCard) {
|
||||
card = realCard.cloneNode(false);
|
||||
card.className = "ic-DashboardCard canvasrefined-widget-clock";
|
||||
} else {
|
||||
card = document.createElement("div");
|
||||
card.className = "ic-DashboardCard canvasrefined-widget-clock";
|
||||
}
|
||||
card.setAttribute("aria-label", "Clock widget");
|
||||
card.setAttribute("data-testid", "draggable-card");
|
||||
card.setAttribute("draggable", "true");
|
||||
card.style.cssText = "opacity: 1; display: inline-block; vertical-align: top;";
|
||||
card.innerHTML = `
|
||||
<div class="ic-DashboardCard__header">
|
||||
<span class="screenreader-only">Clock</span>
|
||||
<div class="ic-DashboardCard__header_image">
|
||||
<div class="ic-DashboardCard__header_hero" aria-hidden="true" style="background-color:#2d3b45;opacity:0.6"></div>
|
||||
</div>
|
||||
<a href="#" class="ic-DashboardCard__link">
|
||||
<div class="ic-DashboardCard__header_content">
|
||||
<h2 class="ic-DashboardCard__header-title ellipsis" title="Clock" data-testid="dashboard-card-title"><span style="color:#2d3b45">Clock</span></h2>
|
||||
<div class="canvasrefined-clock-display ic-DashboardCard__header-subtitle ellipsis" style="font-size:22px;font-weight:700;font-variant-numeric:tabular-nums;color:#2d3b45"></div>
|
||||
<div class="canvasrefined-clock-date ic-DashboardCard__header-term ellipsis" style="font-size:12px;color:#666"></div>
|
||||
</div>
|
||||
</a>
|
||||
<div>
|
||||
<div class="ic-DashboardCard__header-button-bg" style="background-color:#2d3b45;opacity:0"></div>
|
||||
<span data-position="Popover___1" data-cid="Position Popover" class="css-1ihz85b-position">
|
||||
<button type="button" class="Button Button--icon-action-rev ic-DashboardCard__header-button" aria-expanded="false" data-popover-trigger="true" data-position-target="Popover___1">
|
||||
<i class="icon-more" aria-hidden="true"></i>
|
||||
<span class="screenreader-only">Clock widget</span>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="ic-DashboardCard__action-container" aria-label="Actions for Clock">
|
||||
<a class="ic-DashboardCard__action" style="display:inherit"><img class="canvasrefined-link-image" style="display:none"></a>
|
||||
<a class="ic-DashboardCard__action" style="display:inherit"><img class="canvasrefined-link-image" style="display:none"></a>
|
||||
<a class="ic-DashboardCard__action" style="display:inherit"><img class="canvasrefined-link-image" style="display:none"></a>
|
||||
<a class="ic-DashboardCard__action" style="display:inherit"><img class="canvasrefined-link-image" style="display:none"></a>
|
||||
</nav>
|
||||
<div class="canvasrefined-card-assignment" style="display:none">
|
||||
<div class="canvasrefined-card-header-container"><h3 class="canvasrefined-card-header">Due</h3></div>
|
||||
<div class="canvasrefined-card-container"><div class="canvasrefined-assignment-container"><a class="canvasrefined-assignment-link">None</a></div></div>
|
||||
</div>
|
||||
`;
|
||||
container.appendChild(card);
|
||||
try {
|
||||
if (window.jQuery && window.jQuery.fn && window.jQuery.fn.sortable) {
|
||||
let $c = window.jQuery(container);
|
||||
if ($c.sortable('instance')) {
|
||||
let opts = $c.sortable('option');
|
||||
$c.sortable('destroy');
|
||||
$c.sortable(window.jQuery.extend({}, opts));
|
||||
}
|
||||
}
|
||||
} catch (e) {}
|
||||
card.addEventListener('dragstart', function (e) {
|
||||
e.dataTransfer.setData('text', 'canvasrefined-widget-clock');
|
||||
e.dataTransfer.effectAllowed = 'move';
|
||||
});
|
||||
setTimeout(() => {
|
||||
try {
|
||||
let $c = window.jQuery && window.jQuery(container);
|
||||
if ($c && $c.sortable && $c.sortable('instance')) {
|
||||
$c.sortable('refresh');
|
||||
}
|
||||
} catch (e) {}
|
||||
}, 500);
|
||||
updateClock();
|
||||
clockInterval = setInterval(updateClock, 1000);
|
||||
}
|
||||
} else {
|
||||
let card = document.querySelector('.canvasrefined-widget-clock');
|
||||
if (card) card.remove();
|
||||
if (clockInterval) {
|
||||
clearInterval(clockInterval);
|
||||
clockInterval = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function updateClock() {
|
||||
let display = document.querySelector('.canvasrefined-clock-display');
|
||||
let dateEl = document.querySelector('.canvasrefined-clock-date');
|
||||
if (!display) return;
|
||||
let now = new Date();
|
||||
let hours = String(now.getHours()).padStart(2, '0');
|
||||
let minutes = String(now.getMinutes()).padStart(2, '0');
|
||||
let seconds = String(now.getSeconds()).padStart(2, '0');
|
||||
display.textContent = `${hours}:${minutes}:${seconds}`;
|
||||
if (dateEl) {
|
||||
dateEl.textContent = now.toLocaleDateString(undefined, { weekday: 'long', month: 'long', day: 'numeric' });
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Custom font
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
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', 'better_sidebar', 'condensed_cards', 'widget_clock'];
|
||||
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', 'better_sidebar', 'condensed_cards'];
|
||||
const syncedSubOptions = [
|
||||
"todo_hide_feedback",
|
||||
"todo_full_height",
|
||||
@ -133,7 +133,6 @@ const defaultOptions = {
|
||||
"customCardStyles": false,
|
||||
"customBackgroundLink": "",
|
||||
"customBackgroundScale": 100,
|
||||
"widget_clock": false,
|
||||
}
|
||||
};
|
||||
|
||||
@ -402,10 +401,6 @@ function setup() {
|
||||
setup: displayThemeList,
|
||||
tab: ".import-export",
|
||||
},
|
||||
"widgets-btn": {
|
||||
setup: null,
|
||||
tab: ".widgets-container",
|
||||
},
|
||||
"report-issue-btn": {
|
||||
setup: displayErrors,
|
||||
tab: ".report-issue-container",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user