diff --git a/README.md b/README.md index b5958ba..2969598 100644 --- a/README.md +++ b/README.md @@ -2,6 +2,8 @@ # Betterer Canvas +name idea: even better canvas + I don't like the direction bettercanvas (bettercampus) is heading so I forked it They tried to change license but forgot to wipe the codebase for thier MIT licensed version, so this is a fully legal fork. @@ -56,14 +58,14 @@ Better Canvas introduces improvements to the Canvas user interface: - GPA presets - Scheduled Reminder Popups (broken) - searching themes (the original didn't actually impliment that) -- Card Styles (image size, card roundness, card spacing) +- Card Styles (image size, card roundness, card spacing, width, height) ## Planned Features - custom backgrounds - custom side logo - widgets (music, timer) - fix darkmode fixer -- more card settings (Width, Height, Rotation) (in progress, to be theme compatible) +- more card settings (in progress, to be theme compatible) - calender sync - update better todo list - better sidebar @@ -75,6 +77,9 @@ Better Canvas introduces improvements to the Canvas user interface: - theme history - mail assistent - transcribe lecture +- hover assignment preview +- better what if grade +- when opening assignments it will show you "if you get a 0 on this your grade will be _" ## Dev Installation diff --git a/html/popup.html b/html/popup.html index a535a24..3214e91 100644 --- a/html/popup.html +++ b/html/popup.html @@ -671,7 +671,14 @@

More Card Styles

- + +
+
+ + +
+
+
@@ -689,8 +696,22 @@
- Card Spacing - + Extra Card Spacing + + px +
+
+
+
+ Card Width + + px +
+
+
+
+ Card Height + px
diff --git a/js/background.js b/js/background.js index ed1d44f..a42f4a2 100644 --- a/js/background.js +++ b/js/background.js @@ -94,8 +94,11 @@ chrome.runtime.onInstalled.addListener(function () { "browser_show_likes": false, "custom_styles": "", "imageSize": 100, - "cardRoundness": 4, - "cardSpacing": 36, + "cardRoundness": 5, + 'cardSpacing': 0, + "cardWidth": 262, + "cardHeight": 150, + "customCardStyles": false, } }; diff --git a/js/content.js b/js/content.js index 291cc59..6fd2059 100644 --- a/js/content.js +++ b/js/content.js @@ -368,6 +368,9 @@ function applyOptionsChanges(changes) { case ("imageSize"): case ("cardRoundness"): case ("cardSpacing"): + case ("cardWidth"): + case ("cardHeight"): + case ("customCardStyles"): applyAestheticChanges(); break; } @@ -2005,9 +2008,13 @@ function applyAestheticChanges() { if (options.hide_feedback === true) style.textContent += ".recent_feedback {display: none}"; if (options.full_width === true) style.textContent += ".ic-Layout-wrapper{max-width:100%!important}"; - 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 !== 4) style.textContent += `.ic-DashboardCard {border-radius: ${options.cardRoundness}px!important;}`; - if (options.cardSpacing !== undefined && options.cardSpacing !== 36) style.textContent += `.ic-DashboardCard {margin: ${options.cardSpacing / 2}px!important;}`; + if (options.customCardStyles === true) { + 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.custom_styles !== "") style.textContent += options.custom_styles; document.documentElement.appendChild(style); diff --git a/js/popup.js b/js/popup.js index 2bf44c4..6a57337 100644 --- a/js/popup.js +++ b/js/popup.js @@ -1,5 +1,5 @@ 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']; +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 localSwitches = []; //const apiurl = "http://localhost:3000"; @@ -87,8 +87,11 @@ const defaultOptions = { "scheduledReminder": false, "scheduledReminderTime": { "hour": "09", "minute": "00" }, "imageSize": 100, - "cardRoundness": 4, - "cardSpacing": 36, + "cardRoundness": 5, + "cardSpacing": 0, + "cardWidth": 262, + "cardHeight": 150, + "customCardStyles": false, } }; @@ -220,11 +223,27 @@ function setupCardSpacingInput(initial) { }); } +function setupCardWidthInput(initial) { + let el = document.querySelector("#cardWidth"); + el.value = initial; + el.addEventListener("input", (e) => { + chrome.storage.sync.set({ "cardWidth": e.target.value }); + }); +} + +function setupCardHeightInput(initial) { + let el = document.querySelector("#cardheight"); + el.value = initial; + el.addEventListener("input", (e) => { + chrome.storage.sync.set({ "cardheight": e.target.value }); + }); +} + function setup() { const menu = { "switches": syncedSwitches, - "checkboxes": ['browser_show_likes', 'gpa_calc_weighted', 'gpa_calc_cumulative', /*'card_method_date',*/ 'show_updates', 'todo_colors', 'device_dark', 'relative_dues', 'card_overdues', 'todo_overdues', 'gpa_calc_prepend', 'auto_dark', 'assignment_date_format', 'todo_hr24', 'grade_hover', 'hide_completed', 'hover_preview', 'scheduledReminder'], + "checkboxes": ['browser_show_likes', 'gpa_calc_weighted', 'gpa_calc_cumulative', /*'card_method_date',*/ 'show_updates', 'todo_colors', 'device_dark', 'relative_dues', 'card_overdues', 'todo_overdues', 'gpa_calc_prepend', 'auto_dark', 'assignment_date_format', 'todo_hr24', 'grade_hover', 'hide_completed', 'hover_preview', 'scheduledReminder', 'customCardStyles'], "tabs": { "advanced-settings": { "setup": displayAdvancedCards, "tab": ".advanced" }, "gpa-bounds-btn": { "setup": displayGPABounds, "tab": ".gpa-bounds-container" }, @@ -244,9 +263,11 @@ function setup() { { "identifier": "card_method_dashboard", "setup": (initial) => setupDashboardMethod(initial) }, { "identifier": "custom_styles", "setup": (initial) => setupCustomStyle(initial) }, { "identifier": "scheduledReminderTime", "setup": (initial) => setupScheduledReminderInput(initial) }, - { "identifier": "image_size", "setup": (initial) => setupImageSizeInput(initial) }, - { "identifier": "card_roundness", "setup": (initial) => setupCardRoundnessInput(initial) }, - { "identifier": "card_spacing", "setup": (initial) => setupCardSpacingInput(initial) } + { "identifier": "imageSize", "setup": (initial) => setupImageSizeInput(initial) }, + { "identifier": "cardRoundness", "setup": (initial) => setupCardRoundnessInput(initial) }, + { "identifier": "cardSpacing", "setup": (initial) => setupCardSpacingInput(initial) }, + { "identifier": "cardWidth", "setup": (initial) => setupCardWidthInput(initial) }, + { "identifier": "cardHeight", "setup": (initial) => setupCardHeightInput(initial) }, ], } @@ -669,6 +690,16 @@ function setup() { chrome.storage.sync.set({ "cardSpacing": value }); document.querySelector("#cardSpacingValue").textContent = value + "px"; }) + document.getElementById("cardWidth").addEventListener("input", (e) => { + const value = e.target.value; + chrome.storage.sync.set({ "cardWidth": value }); + 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 + "%"; + }); } function applyGPAPreset(bounds) {