diff --git a/README.md b/README.md index 17268bc..c1043c1 100644 --- a/README.md +++ b/README.md @@ -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) diff --git a/_locales/en/messages.json b/_locales/en/messages.json index ae2f232..763e5c7 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -65,12 +65,6 @@ "24hrformat": { "message": "Use 24 hr Format" }, - "widgets": { - "message": "Widgets" - }, - "widget_clock": { - "message": "Clock" - }, "dashboard_notes": { "message": "Dashboard Notes" }, diff --git a/css/content.css b/css/content.css index 7677561..c7d2b7f 100644 --- a/css/content.css +++ b/css/content.css @@ -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;} diff --git a/css/popup.css b/css/popup.css index e1e43f1..56c8881 100644 --- a/css/popup.css +++ b/css/popup.css @@ -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} diff --git a/html/popup.html b/html/popup.html index a411e06..5840264 100644 --- a/html/popup.html +++ b/html/popup.html @@ -50,10 +50,6 @@ GPA Settings - - -
-
-
- - -
-
-
-
- Clock -
-
-
- -
diff --git a/js/background.js b/js/background.js index 084db8b..e9a9c23 100644 --- a/js/background.js +++ b/js/background.js @@ -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, diff --git a/js/content.js b/js/content.js index c91c107..bd64c5e 100644 --- a/js/content.js +++ b/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 = ` -
- Clock -
- -
- -
-

Clock

-
-
-
- -
-
- - - -
-
- - - `; - 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 diff --git a/js/popup.js b/js/popup.js index 34df7d9..6d665ca 100644 --- a/js/popup.js +++ b/js/popup.js @@ -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",