Card settings Part 1 done

README.md

@@ -56,13 +56,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)
 
 ## Planned Features
 - custom backgrounds
 - custom side logo
 - widgets (music, timer)
 - fix darkmode fixer
-- more card settings (Image Size, Roundness, Width, Space Between) (in progress, to be theme compatible)
+- more card settings (Width, Height, Rotation) (in progress, to be theme compatible)
 - calender sync
 - update better todo list
 - better sidebar

js/background.js

@@ -93,6 +93,9 @@ chrome.runtime.onInstalled.addListener(function () {
             "gpa_calc_weighted": true,
             "browser_show_likes": false,
             "custom_styles": "",
+            "imageSize": 100,
+            "cardRoundness": 4,
+            "cardSpacing": 36,
         }
     };
 

js/content.js

@@ -365,6 +365,11 @@ function applyOptionsChanges(changes) {
 			case ("scheduledReminderTime"):
 				toggleScheduledReminders();
 				break;
+            case ("imageSize"):
+            case ("cardRoundness"):
+            case ("cardSpacing"):
+                applyAestheticChanges();
+                break;
         }
     });
 }
@@ -1999,6 +2004,11 @@ function applyAestheticChanges() {
     if (options.disable_color_overlay === true) style.textContent += ".ic-DashboardCard__header_hero{opacity: 0!important} .ic-DashboardCard__header-button-bg{opacity: 1!important}";
     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.custom_styles !== "") style.textContent += options.custom_styles;
     document.documentElement.appendChild(style);
 }

js/popup.js

@@ -86,6 +86,9 @@ const defaultOptions = {
         "card_limit": 25,
         "scheduledReminder": false,
         "scheduledReminderTime": { "hour": "09", "minute": "00" },
+        "imageSize": 100,
+        "cardRoundness": 4,
+        "cardSpacing": 36,
     }
 };
 
@@ -193,6 +196,30 @@ function setupDashboardMethod(initial) {
     });
 }
 
+function setupImageSizeInput(initial) {
+    let el = document.querySelector("#imageSize");
+    el.value = initial;
+    el.addEventListener("input", (e) => {
+        chrome.storage.sync.set({ "imageSize": e.target.value });
+    });
+}
+
+function setupCardRoundnessInput(initial) {
+    let el = document.querySelector("#cardRoundness");
+    el.value = initial;
+    el.addEventListener("input", (e) => {
+        chrome.storage.sync.set({ "cardRoundness": e.target.value });
+    });
+}
+
+function setupCardSpacingInput(initial) {
+    let el = document.querySelector("#cardSpacing");
+    el.value = initial;
+    el.addEventListener("input", (e) => {
+        chrome.storage.sync.set({ "cardSpacing": e.target.value });
+    });
+}
+
 function setup() {
 
     const menu = {
@@ -216,7 +243,10 @@ function setup() {
             { "identifier": "card_limit", "setup": (initial) => setupCardLimitSlider(initial) },
             { "identifier": "card_method_dashboard", "setup": (initial) => setupDashboardMethod(initial) },
             { "identifier": "custom_styles", "setup": (initial) => setupCustomStyle(initial) },
-            { "identifier": "scheduledReminderTime", "setup": (initial) => setupScheduledReminderInput(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) }
         ],
     }
 
@@ -625,16 +655,19 @@ function setup() {
     });
     
     document.getElementById("imageSize").addEventListener("input", (e) => {
-        chrome.storage.sync.set({"imageSize": parseInt(e.target.value)});
-        sendFromPopup("updateCardStyles", { imageSize: parseInt(e.target.value) });
+        const value = e.target.value;
+        chrome.storage.sync.set({ "imageSize": value });
+        document.querySelector("#imageSizeValue").textContent = value + "%";
     })
     document.getElementById("cardRoundness").addEventListener("input", (e) => {
-        chrome.storage.sync.set({"cardRoundness": parseInt(e.target.value)});
-        sendFromPopup("updateCardStyles", { cardRoundness: parseInt(e.target.value) });
+        const value = e.target.value;
+        chrome.storage.sync.set({ "cardRoundness": value });
+        document.querySelector("#cardRoundnessValue").textContent = value + "px";
     })
     document.getElementById("cardSpacing").addEventListener("input", (e) => {
-        chrome.storage.sync.set({"cardSpacing": parseInt(e.target.value)});
-        sendFromPopup("updateCardStyles", { cardSpacing: parseInt(e.target.value) });
+        const value = e.target.value;
+        chrome.storage.sync.set({ "cardSpacing": value });
+        document.querySelector("#cardSpacingValue").textContent = value + "px";
     })
 }