feat: add switch to settingsPage type

pilar6195 · Jun 19, 2024 · fd38c0a · fd38c0a
1 parent 212297a
commit fd38c0a
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 2 deletions.
diff --git a/src/modules/anilist/settingsPage.ts b/src/modules/anilist/settingsPage.ts
@@ -243,6 +243,24 @@ registerModule.anilist({
 								break;
 							}
 
+							case 'switch': {
+								const switchToggle = createSwitch({
+									label: setting.label,
+									description: setting.description,
+									enabled: savedSetting,
+									appendTo: modelBody,
+								});
+
+								optionElement = switchToggle.element;
+
+								switchToggle.on('change', (event) => {
+									const checked = (event.target as HTMLInputElement).checked;
+									ModuleSettings.set(key, checked);
+								});
+
+								break;
+							}
+
 							case 'number': {
 								const input = createInput({
 									type: setting.type,

diff --git a/src/utils/Helpers.ts b/src/utils/Helpers.ts
@@ -1003,11 +1003,12 @@ addStyles(`
 	/* Switch Label */
 
 	.alextras--switch .el-switch__label:not(.is-active) {
-		color: rgb(var(--color-text-light));
+		color: rgb(var(--color-text));
 	}
 
 	/* Input Descriptions */
 
+	.alextras--switch h5,
 	.alextras--checkbox h5,
 	.alextras--textarea h5,
 	.alextras--input h5,
@@ -1022,6 +1023,10 @@ addStyles(`
 		margin-left: 2.2em;
 	}
 
+	.alextras--switch h5 {
+		margin-left: 4.5em;
+	}
+
 	/* Input Backgrounds */
 
 	.alextras--dropdown .el-input__inner,

diff --git a/types.d.ts b/types.d.ts
@@ -266,6 +266,11 @@ type ModuleSettingCheckbox = ModuleSettingBase & {
 	default?: boolean;
 };
 
+type ModuleSettingSwitch = ModuleSettingBase & {
+	type: 'switch';
+	default?: boolean;
+};
+
 type ModuleSettingNumber = ModuleSettingBase & {
 	type: 'number';
 	min?: number;
@@ -305,7 +310,7 @@ type BaseModule = {
 	 * Options that will appear in the settings menu.
 	 */
 	settingsPage?: {
-		[key: string]: ModuleSettingCheckbox | ModuleSettingNumber | ModuleSettingSelect | ModuleSettingText;
+		[key: string]: ModuleSettingCheckbox | ModuleSettingNumber | ModuleSettingSelect | ModuleSettingSwitch | ModuleSettingText;
 	}
 	/**
 	 * Whether the module is disabled by default.