Accessibility page

NyaomiDEV · May 7, 2024 · 8f9267a · 8f9267a
1 parent 3adffed
commit 8f9267a
Show file tree

Hide file tree

Showing 3 changed files with 83 additions and 7 deletions.
diff --git a/src/styles/override.css b/src/styles/override.css
@@ -8,4 +8,8 @@ ion-item.md ion-icon[slot="start"] {
 
 ion-list.md {
 	padding-bottom: 0;
+}
+
+p {
+	text-wrap: wrap;
 }
diff --git a/src/views/options/Accessibility.vue b/src/views/options/Accessibility.vue
@@ -1,10 +1,26 @@
 <script setup lang="ts">
-	import { IonContent, IonHeader, IonItem, IonLabel, IonList, IonPage, IonTitle, IonToolbar, IonBackButton} from '@ionic/vue';
-	import { inject } from 'vue';
+	import { IonContent, IonHeader, IonItem, IonRange, IonLabel, IonToggle, IonList, IonPage, IonTitle, IonToolbar, IonBackButton, IonSegment, IonSegmentButton} from '@ionic/vue';
+	import { inject, ref } from 'vue';
+	import { AccessibilityConfig } from '../../lib/config/types';
+	import { getConfigEntry } from '../../lib/config';
+
+	const config = ref(getConfigEntry("accessibility") as AccessibilityConfig);
+
+	console.log(config)
 
 	const isIOS = inject<boolean>("isIOS");
 </script>
 
+<style>
+ion-list ion-item:nth-child(2), ion-list ion-item:nth-child(5), ion-list ion-item:last-child {
+	text-align: center;
+}
+
+ion-segment {
+	margin-top: 8px;
+}
+</style>
+
 <template>
 	<IonPage>
 		<IonHeader>
@@ -18,6 +34,64 @@
 
 		<IonContent>
 			<IonList :inset="isIOS">
+				<IonItem v-model="config.highLegibility">
+					<IonToggle>
+						<IonLabel>
+							<h3>High legibility font</h3>
+							<p>Use OpenDyslexic instead of the standard device font</p>
+						</IonLabel>
+					</IonToggle>
+				</IonItem>
+
+				<IonItem>
+					<IonLabel>
+						<h3>UI variant</h3>
+						<IonSegment value="ui-variant" v-model="config.theme">
+
+							<IonSegmentButton value="auto">
+								<IonLabel>Auto</IonLabel>
+							</IonSegmentButton>
+
+							<IonSegmentButton value="light">
+								<IonLabel>Light</IonLabel>
+							</IonSegmentButton>
+
+							<IonSegmentButton value="dark">
+								<IonLabel>Dark</IonLabel>
+							</IonSegmentButton>
+						</IonSegment>
+					</IonLabel>
+				</IonItem>
+
+				<IonItem button v-model="config.accentColor" :detail="true">
+					<IonLabel>
+						<h3>Accent color</h3>
+						<p>Use a custom accent color</p>
+					</IonLabel>
+				</IonItem>
+
+				<IonItem v-model="config.reducedMotion">
+					<IonToggle>
+						<IonLabel>
+							<h3>Reduced motion</h3>
+							<p>Disable in-app animations</p>
+						</IonLabel>
+					</IonToggle>
+				</IonItem>
+
+				<IonItem v-model="config.fontScale">
+					<IonLabel>
+						<h3>UI size</h3>
+						<IonRange />
+					</IonLabel>
+				</IonItem>
+
+				<IonItem v-model="config.chatFontScale">
+					<IonLabel>
+						<h3>Chat UI size</h3>
+						<IonRange />
+					</IonLabel>
+				</IonItem>
 
 			</IonList>
 		</IonContent>

diff --git a/src/views/options/ImportExport.vue b/src/views/options/ImportExport.vue
@@ -27,16 +27,14 @@
 		<IonHeader>
 			<IonToolbar>
 				<IonBackButton slot="start" />
-				<IonTitle>
-					Import / Export
-				</IonTitle>
+				<IonTitle>Import / Export</IonTitle>
 			</IonToolbar>
 		</IonHeader>
 
 		<IonContent>
 			<IonList :inset="isIOS">
 
-				<IonItem button @click="exportDb" :detail="true">
+				<IonItem button @click="importDb" :detail="true">
 					<IonLabel>
 						<h3>Export your data</h3>
 						<p>Backup your current data to a file you can store somewhere else</p>
@@ -47,7 +45,7 @@
 					<IonLabel>
 						<h3>Import your data from a backup file</h3>
 						<p>Warning! It will override any existing data</p>
-					</IonLabel>
+					</IonLabel>				
 				</IonItem>
 
 			</IonList>