Card setting Part 3

themes are now compatible with card settings

.vscode/settings.json

@@ -0,0 +1,10 @@
+{
+	"files.exclude": {
+		"**/.git": true,
+		"**/.svn": true,
+		"**/.hg": true,
+		"**/.DS_Store": true,
+		"**/Thumbs.db": true
+	},
+	"hide-files.files": []
+}

README.md

@@ -65,7 +65,6 @@ Better Canvas introduces improvements to the Canvas user interface:
 - custom side logo
 - widgets (music, timer)
 - fix darkmode fixer
-- more card settings (in progress, to be theme compatible)
 - calender sync
 - update better todo list
 - better sidebar
@@ -81,6 +80,11 @@ Better Canvas introduces improvements to the Canvas user interface:
 - better what if grade
 - when opening assignments it will show you "if you get a 0 on this your grade will be _"
 
+## Extra features that might be added:
+- card grade position, card outline
+- theme copy button
+- revamp cards page UI
+
 ## Dev Installation
 
 To install, run, and build with this repository locally,

html/popup.html

@@ -475,6 +475,10 @@
                     <div class="sub-option">
                         <input type="checkbox" id="export-gpa" />
                         <span>GPA settings</span>
+                    </div>
+					<div class="sub-option">
+                        <input type="checkbox" id="export-customStyles" />
+                        <span>Custom Card styles</span>
                     </div>
                 </div>
                 <div style="flex: 1">

js/background.js

@@ -97,7 +97,7 @@ chrome.runtime.onInstalled.addListener(function () {
             "cardRoundness": 5,
             'cardSpacing': 0,
             "cardWidth": 262,
-            "cardHeight": 150,
+            "cardHeight": 250,
             "customCardStyles": false,
         }
     };

js/content.js

@@ -2012,8 +2012,8 @@ function applyAestheticChanges() {
         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.cardWidth !== undefined && options.cardWidth !== 262) 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.cardHeight !== undefined && options.cardHeight !== 250) style.textContent += `.ic-DashboardCard {height: ${options.cardHeight}px!important;}`;
     }
 
     if (options.custom_styles !== "") style.textContent += options.custom_styles;

js/popup.js

@@ -1,5 +1,30 @@
 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', 'customCardStyles'];
+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",
+	"imageSize",
+	"cardRoundness",
+	"cardSpacing",
+	"cardWidth",
+	"cardHeight",
+];
 const localSwitches = [];
 
 //const apiurl = "http://localhost:3000";
@@ -90,7 +115,7 @@ const defaultOptions = {
         "cardRoundness": 5,
         "cardSpacing": 0,
         "cardWidth": 262,
-        "cardHeight": 150,
+        "cardHeight": 250,
         "customCardStyles": false,
     }
 };
@@ -232,11 +257,11 @@ function setupCardWidthInput(initial) {
 }
 
 function setupCardHeightInput(initial) {
-    let el = document.querySelector("#cardheight");
+	let el = document.querySelector("#cardHeight");
-    el.value = initial;
+	el.value = initial;
-    el.addEventListener("input", (e) => {
+	el.addEventListener("input", (e) => {
-        chrome.storage.sync.set({ "cardheight": e.target.value });
+		chrome.storage.sync.set({ "cardHeight": e.target.value });
-    });
+	});
 }
 
 function setup() {
@@ -449,6 +474,9 @@ function setup() {
                             case "export-gpa":
                                 final = { ...final, ...(await getExport(storage, ["gpa_calc_bounds"])) }
                                 break;
+							case "export-customStyles":
+								final = { ...final, ...(await getExport(storage, ["custom_styles"])) };
+								break;
                         }
                     }
                 }
@@ -696,10 +724,10 @@ function setup() {
         document.querySelector("#cardWidthValue").textContent = value + "%";
     });
     document.getElementById("cardHeight").addEventListener("input", (e) => {
-        const value = e.target.value;
+		const value = e.target.value;
-        chrome.storage.sync.set({ "cardHeight": value });
+		chrome.storage.sync.set({ "cardHeight": value });
-        document.querySelector("#cardHeightValue").textContent = value + "%";
+		document.querySelector("#cardHeightValue").textContent = value + "%";
-    });
+	});
 }
 
 function applyGPAPreset(bounds) {
@@ -778,6 +806,14 @@ async function getExport(storage, options) {
                     console.log(e);
                 }
                 break;
+			case "custom_styles":
+				final["customCardStyles"] = storage["customCardStyles"];
+				final["imageSize"] = storage["imageSize"];
+				final["cardRoundness"] = storage["cardRoundness"];
+				final["cardSpacing"] = storage["cardSpacing"];
+				final["cardWidth"] = storage["cardWidth"];
+				final["cardHeight"] = storage["cardHeight"];
+				break;
             default:
                 final[option] = storage[option];
         }