merge: Add custom font size option (!1207)

View MR for information: https://activitypub.software/TransFem-org/Sharkey/-/merge_requests/1207

Closes #1166

Approved-by: Hazelnoot <acomputerdog@gmail.com>
Approved-by: Marie <github@yuugi.dev>

locales/index.d.ts

@@ -13379,6 +13379,10 @@ export interface Locale extends ILocale {
          */
         "keepFilesInUseDescription": string;
     };
+    /**
+     * Custom font size
+     */
+    "customFontSize": string;
 }
 declare const locales: {
     [lang: string]: Locale;

packages/backend/src/server/web/boot.js

@@ -129,7 +129,12 @@
 
 	const fontSize = localStorage.getItem('fontSize');
 	if (fontSize) {
-		document.documentElement.classList.add('f-' + fontSize);
+		if (fontSize === "custom") {
+			const customFontSize = localStorage.getItem('customFontSize');
+			document.documentElement.style.setProperty('font-size', `${customFontSize}px`);
+		} else {
+			document.documentElement.classList.add('f-' + fontSize);
+		}
 	}
 
 	const cornerRadius = localStorage.getItem('cornerRadius');

packages/frontend/src/local-storage.ts

@@ -20,6 +20,7 @@ export type Keys = (
 	'colorScheme' |
 	'useSystemFont' |
 	'fontSize' |
+	'customFontSize' |
 	'cornerRadius' |
 	'ui' |
 	'ui_temp' |

packages/frontend/src/pages/settings/preferences.vue

@@ -700,9 +700,16 @@ SPDX-License-Identifier: AGPL-3.0-only
 								<option value="1"><span style="font-size: 15px;">Aa</span></option>
 								<option value="2"><span style="font-size: 16px;">Aa</span></option>
 								<option value="3"><span style="font-size: 17px;">Aa</span></option>
+								<option value="custom"><span style="font-size: 14px;">Custom</span></option>
 							</MkRadios>
 						</SearchMarker>
 
+						<SearchMarker :keywords="['font', 'size']">
+							<MkInput v-model="customFontSize" :min="12" :max="48" type="number" :step="1" :manualSave="true" :disabled="fontSize !== 'custom'">
+								<template #label><SearchLabel>{{ i18n.ts.customFontSize }}</SearchLabel></template>
+							</MkInput>
+						</SearchMarker>
+
 						<SearchMarker :keywords="['font', 'system', 'native']">
 							<MkSwitch v-model="useSystemFont">
 								<template #label><SearchLabel>{{ i18n.ts.useSystemFont }}</SearchLabel></template>
@@ -1081,6 +1088,7 @@ const defaultCW = ref($i.defaultCW);
 const defaultCWPriority = ref($i.defaultCWPriority);
 const lang = prefer.model('lang');
 const fontSize = prefer.model('fontSize');
+const customFontSize = prefer.model('customFontSize');
 const useSystemFont = prefer.model('useSystemFont');
 const cornerRadius = prefer.model('cornerRadius');
 const trustedDomains = prefer.model(

packages/frontend/src/preferences/def.ts

@@ -497,7 +497,18 @@ export const PREF_DEF = {
 				miLocalStorage.removeItem('fontSize');
 			}
 		},
-	} as Pref<'0' | '1' | '2' | '3'>,
+	} as Pref<'0' | '1' | '2' | '3' | 'custom'>,
+	customFontSize: {
+		default: 14,
+		needsReload: true,
+		onSet: customFontSize => {
+			if (customFontSize) {
+				miLocalStorage.setItem('customFontSize', customFontSize.toString());
+			} else {
+				miLocalStorage.removeItem('customFontSize');
+			}
+		},
+	} as Pref<number>,
 	useSystemFont: {
 		default: false,
 		needsReload: true,

sharkey-locales/en-US.yml

@@ -654,3 +654,5 @@ clearCachedFilesOptions:
   oneYear: "one year"
   keepFilesInUse: "Don't delete files used as avatars&c"
   keepFilesInUseDescription: "this option requires more complicated database queries, you may need to increase the value of db.extra.statement_timeout in the configuration file"
+
+customFontSize: "Custom font size"