Segment component now looks less material 2 and more material 3, fixe…

…d back button disappearing in pages after reload
NyaomiDEV · May 11, 2024 · a08d2a0 · a08d2a0
1 parent 0544951
commit a08d2a0
Show file tree

Hide file tree

Showing 11 changed files with 50 additions and 22 deletions.
diff --git a/src/styles/override.css b/src/styles/override.css
@@ -1,3 +1,4 @@
+
 ion-list-header + ion-list.md {
 	padding-top: unset;
 }
@@ -12,8 +13,37 @@ ion-list.md {
 
 .centered-text {
 	text-align: center;
+	padding: 1em;
 }
 
 p {
 	text-wrap: wrap;
+}
+
+/* Segment Buttons */
+
+ion-segment-button.md::part(native) {
+	border: 1px solid var(--color);
+	text-transform: none;
+	letter-spacing: normal;
+	font-size: unset;
+}
+
+ion-segment-button.md.segment-button-checked::part(native) {
+	background-color: rgba(var(--ion-color-primary-rgb), 0.2);
+	color: var(--ion-text-color);
+}
+
+ion-segment-button.md:first-child::part(native) {
+	border-right: 0;
+	border-radius: 48px 0 0 48px;
+}
+
+ion-segment-button.md:last-child::part(native) {
+	border-left: 0;
+	border-radius: 0 48px 48px 0;
+}
+
+ion-segment-button.md::part(indicator-background) {
+	height: 0px;
 }
diff --git a/src/views/options/About.vue b/src/views/options/About.vue
@@ -9,7 +9,7 @@
 	<IonPage>
 		<IonHeader>
 			<IonToolbar>
-				<IonBackButton slot="start" />
+				<IonBackButton slot="start" defaultHref="/options/" />
 				<IonTitle>
 					About
 				</IonTitle>

diff --git a/src/views/options/Accessibility.vue b/src/views/options/Accessibility.vue
@@ -1,12 +1,14 @@
 <script setup lang="ts">
-	import { IonContent, IonHeader, IonItem, IonRange, IonLabel, IonToggle, IonList, IonPage, IonTitle, IonToolbar, IonBackButton, IonSegment, IonSegmentButton} from '@ionic/vue';
+	import { IonContent, IonHeader, IonItem, IonIcon, IonRange, IonLabel, IonToggle, IonList, IonPage, IonTitle, IonToolbar, IonBackButton, IonSegment, IonSegmentButton} from '@ionic/vue';
 	import { inject, reactive, watch } from 'vue';
 	import { AccessibilityConfig } from '../../lib/config/types';
 	import { getConfigEntry, saveConfig } from '../../lib/config';
 	import { 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';
+
 	const config = reactive(getConfigEntry("accessibility") as AccessibilityConfig);
 	watch(config, () => {
 		console.log(config);
@@ -16,24 +18,17 @@
 
 		updateDarkMode();
 		updateMaterialColors();
+
 	});
 
 	const isIOS = inject<boolean>("isIOS");
 </script>
 
-<style scoped>
-
-	ion-segment, ion-range {
-		margin-top: 8px;
-	}
-
-</style>
-
 <template>
 	<IonPage>
 		<IonHeader>
 			<IonToolbar>
-				<IonBackButton slot="start" />
+				<IonBackButton slot="start" defaultHref="/options/" />
 				<IonTitle>
 					Accessibility
 				</IonTitle>
@@ -56,15 +51,18 @@
 						<h3 class="centered-text">UI variant</h3>
 						<IonSegment value="ui-variant" v-model="config.theme">
 
-							<IonSegmentButton value="auto">
+							<IonSegmentButton value="auto" layout="icon-start">
+								<IonIcon v-if="config.theme == 'auto'" :md="CheckMD" aria-hidden="true"/>
 								<IonLabel>Auto</IonLabel>
 							</IonSegmentButton>
 
-							<IonSegmentButton value="light">
+							<IonSegmentButton value="light" layout="icon-start">
+								<IonIcon v-if="config.theme == 'light'" :md="CheckMD" aria-hidden="true"/>
 								<IonLabel>Light</IonLabel>
 							</IonSegmentButton>
 
-							<IonSegmentButton value="dark">
+							<IonSegmentButton value="dark" layout="icon-start">
+								<IonIcon v-if="config.theme == 'dark'" :md="CheckMD" aria-hidden="true"/>
 								<IonLabel>Dark</IonLabel>
 							</IonSegmentButton>
 						</IonSegment>

diff --git a/src/views/options/AppSettings.vue b/src/views/options/AppSettings.vue
@@ -9,7 +9,7 @@
 	<IonPage>
 		<IonHeader>
 			<IonToolbar>
-				<IonBackButton slot="start" />
+				<IonBackButton slot="start" defaultHref="/options/" />
 				<IonTitle>
 					App settings
 				</IonTitle>

diff --git a/src/views/options/FrontHistory.vue b/src/views/options/FrontHistory.vue
@@ -9,7 +9,7 @@
 	<IonPage>
 		<IonHeader>
 			<IonToolbar>
-				<IonBackButton slot="start" />
+				<IonBackButton slot="start" defaultHref="/options/" />
 				<IonTitle>
 					Front history
 				</IonTitle>

diff --git a/src/views/options/ImportExport.vue b/src/views/options/ImportExport.vue
@@ -26,7 +26,7 @@
 	<IonPage>
 		<IonHeader>
 			<IonToolbar>
-				<IonBackButton slot="start" />
+				<IonBackButton slot="start" defaultHref="/options/" />
 				<IonTitle>Import / Export</IonTitle>
 			</IonToolbar>
 		</IonHeader>

diff --git a/src/views/options/MessageBoard.vue b/src/views/options/MessageBoard.vue
@@ -9,7 +9,7 @@
 	<IonPage>
 		<IonHeader>
 			<IonToolbar>
-				<IonBackButton slot="start"/>
+				<IonBackButton slot="start" defaultHref="/options/" />
 				<IonTitle>
 					Message board
 				</IonTitle>

diff --git a/src/views/options/Reminders.vue b/src/views/options/Reminders.vue
@@ -9,7 +9,7 @@
 	<IonPage>
 		<IonHeader>
 			<IonToolbar>
-				<IonBackButton slot="start" />
+				<IonBackButton slot="start" defaultHref="/options/" />
 				<IonTitle>
 					Reminders
 				</IonTitle>

diff --git a/src/views/options/Security.vue b/src/views/options/Security.vue
@@ -9,7 +9,7 @@
 	<IonPage>
 		<IonHeader>
 			<IonToolbar>
-				<IonBackButton slot="start" />
+				<IonBackButton slot="start" defaultHref="/options/" />
 				<IonTitle>
 					Security
 				</IonTitle>

diff --git a/src/views/options/SystemSettings.vue b/src/views/options/SystemSettings.vue
@@ -9,7 +9,7 @@
 	<IonPage>
 		<IonHeader>
 			<IonToolbar>
-				<IonBackButton slot="start" />
+				<IonBackButton slot="start" defaultHref="/options/" />
 				<IonTitle>
 					System name and photo
 				</IonTitle>

diff --git a/src/views/options/TagManagement.vue b/src/views/options/TagManagement.vue
@@ -9,7 +9,7 @@
 	<IonPage>
 		<IonHeader>
 			<IonToolbar>
-				<IonBackButton slot="start" />
+				<IonBackButton slot="start" defaultHref="/options/" />
 				<IonTitle>
 					Tag management
 				</IonTitle>