add md3 segment button component

NyaomiDEV · Jul 31, 2024 · 4063310 · 4063310
1 parent 7f523fb
commit 4063310
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 32 deletions.
diff --git a/src/components/MD3SegmentButton.vue b/src/components/MD3SegmentButton.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+	import { IonSegmentButton, IonIcon } from "@ionic/vue";
+
+	import CheckMD from '@material-design-icons/svg/outlined/check.svg';
+</script>
+
+<template>
+	<IonSegmentButton layout="icon-start">
+		<IonIcon :md="CheckMD" aria-hidden="true"/>
+		<slot></slot>
+	</IonSegmentButton>
+</template>
+
+<style scoped>
+	ion-icon {
+		display: none;
+	}
+
+	ion-segment-button.md.segment-button-checked ion-icon {
+		display: inline;
+	}
+</style>
diff --git a/src/main.ts b/src/main.ts
@@ -44,10 +44,6 @@ import "./styles/override.css";
 import { activateMaterialTheme, updateMaterialColors } from "./lib/theme";
 import "./lib/theme/style.css";
 
-// Config
-import { getConfigEntry } from "./lib/config";
-import { AccessibilityConfig } from "./lib/config/types";
-
 if(!window.isSecureContext){
 	console.error("Cannot continue, this is not a safe environment!");
 	document.documentElement.classList.add("hydrated");
@@ -70,7 +66,11 @@ if(!window.isSecureContext){
 	updateAccessibility();
 
 	const app = createApp(App).use(IonicVue).use(router).use(I18NextVue, { i18next: i18n });
-
 	app.mount(document.body);
+
+	await router.isReady();
+	console.log(router.currentRoute.value)
+	if(router.currentRoute.value.fullPath === "/")
+		router.push("/members");
 }
 
diff --git a/src/modals/TagEdit.vue b/src/modals/TagEdit.vue
@@ -13,9 +13,9 @@
 		IonItem,
 		modalController,
 		IonModal,
-		IonSegment,
-		IonSegmentButton
+		IonSegment
 	} from "@ionic/vue";
+	import MD3SegmentButton from "../components/MD3SegmentButton.vue";
 	import Color from "../components/Color.vue";
 
 	import {
@@ -103,16 +103,16 @@
 						<IonLabel>
 							<h3 class="centered-text">{{ $t("options:tagManagement.edit.type.header") }}</h3>
 							<IonSegment class="segment-alt" v-model="tag!.type">
-								<IonSegmentButton value="member">
+								<MD3SegmentButton value="member">
 									<IonLabel>
 										{{ $t("options:tagManagement.edit.type.member") }}
 									</IonLabel>
-								</IonSegmentButton>
-								<IonSegmentButton value="journal">
+								</MD3SegmentButton>
+								<MD3SegmentButton value="journal">
 									<IonLabel>
 										{{ $t("options:tagManagement.edit.type.journal") }}
 									</IonLabel>
-								</IonSegmentButton>
+								</MD3SegmentButton>
 							</IonSegment>
 							<p class="centered-text">{{ $t("options:tagManagement.edit.type.desc") }}</p>
 						</IonLabel>

diff --git a/src/router/index.ts b/src/router/index.ts
@@ -9,10 +9,6 @@ const routes: Array<RouteRecordRaw> = [
 		name: "TabbedHomeView",
 		component: () => import("../views/TabbedHomeView.vue"),
 		children: [
-			{
-				path: "/",
-				redirect: "/dashboard"
-			},
 			...tabbedRoutes
 		]
 	}, 

diff --git a/src/views/options/Accessibility.vue b/src/views/options/Accessibility.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
-	import { IonContent, IonHeader, IonItem, IonIcon, IonRange, IonLabel, IonToggle, IonList, IonPage, IonTitle, IonToolbar, IonBackButton, IonSegment, IonSegmentButton} from '@ionic/vue';
+	import { IonContent, IonHeader, IonItem, IonRange, IonLabel, IonToggle, IonList, IonPage, IonTitle, IonToolbar, IonBackButton, IonSegment } from '@ionic/vue';
 	import { inject, reactive, watch } from 'vue';
 	import { AccessibilityConfig } from '../../lib/config/types';
 	import { getConfigEntry, saveConfig } from '../../lib/config';
 	import { updateAccessibility, updateDarkMode } from '../../lib/mode';
 	import Color from '../../components/Color.vue';
 	import { updateMaterialColors } from '../../lib/theme';
 
-	import CheckMD from '@material-design-icons/svg/outlined/check.svg';
+	import MD3SegmentButton from '../../components/MD3SegmentButton.vue';
 
 	const config = reactive(getConfigEntry("accessibility") as AccessibilityConfig);
 	watch(config, () => {
@@ -50,15 +50,13 @@
 						<h3 class="centered-text">{{ $t("options:accessibility.highLegibilityFontType.title") }}</h3>
 						<IonSegment class="segment-alt" value="high-legibility-type" v-model="config.highLegibilityType">
 
-							<IonSegmentButton value="atkinson" layout="icon-start">
-								<IonIcon v-if="config.highLegibilityType == 'atkinson'" :md="CheckMD" aria-hidden="true"/>
+							<MD3SegmentButton value="atkinson">
 								<IonLabel>{{ $t("options:accessibility.highLegibilityFontType.atkinson") }}</IonLabel>
-							</IonSegmentButton>
+							</MD3SegmentButton>
 
-							<IonSegmentButton value="opendyslexic" layout="icon-start">
-								<IonIcon v-if="config.highLegibilityType == 'opendyslexic'" :md="CheckMD" aria-hidden="true"/>
+							<MD3SegmentButton value="opendyslexic">
 								<IonLabel>{{ $t("options:accessibility.highLegibilityFontType.opendyslexic") }}</IonLabel>
-							</IonSegmentButton>
+							</MD3SegmentButton>
 						</IonSegment>
 					</IonLabel>
 				</IonItem>
@@ -68,20 +66,17 @@
 						<h3 class="centered-text">{{ $t("options:accessibility.uiVariant.title") }}</h3>
 						<IonSegment class="segment-alt" value="ui-variant" v-model="config.theme">
 
-							<IonSegmentButton value="auto" layout="icon-start">
-								<IonIcon v-if="config.theme == 'auto'" :md="CheckMD" aria-hidden="true"/>
+							<MD3SegmentButton value="auto">
 								<IonLabel>{{ $t("options:accessibility.uiVariant.auto") }}</IonLabel>
-							</IonSegmentButton>
+							</MD3SegmentButton>
 
-							<IonSegmentButton value="light" layout="icon-start">
-								<IonIcon v-if="config.theme == 'light'" :md="CheckMD" aria-hidden="true"/>
+							<MD3SegmentButton value="light">
 								<IonLabel>{{ $t("options:accessibility.uiVariant.light") }}</IonLabel>
-							</IonSegmentButton>
+							</MD3SegmentButton>
 
-							<IonSegmentButton value="dark" layout="icon-start">
-								<IonIcon v-if="config.theme == 'dark'" :md="CheckMD" aria-hidden="true"/>
+							<MD3SegmentButton value="dark">
 								<IonLabel>{{ $t("options:accessibility.uiVariant.dark") }}</IonLabel>
-							</IonSegmentButton>
+							</MD3SegmentButton>
 						</IonSegment>
 					</IonLabel>
 				</IonItem>