feat: finish radio buttons

components/Settings/AppSettings/Appearance.vue

@@ -23,19 +23,21 @@
 
     <p class="subtitle">TIME FORMAT</p>
     <div class="icons">
-      <RadioButtons :button-count="3" :text-strings="['Auto', '12-hour', '24-hour']"
+      <RadioButtons :button-count="3" :text-strings="timeFormatTextStrings"
-          :default-button-index="0" :callback="onTimeFormatClicked"></RadioButtons>
+          :default-button-index="settingLoad('timeFormat')?.index ?? 0" :callback="onTimeFormatClicked"></RadioButtons>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
 import RadioButtons from '~/components/UserInterface/RadioButtons.vue';
+import VerticalSpacer from '~/components/UserInterface/VerticalSpacer.vue';
 import settingSave from '~/utils/settingSave';
 
 const runtimeConfig = useRuntimeConfig()
 const defaultThemes = runtimeConfig.public.defaultThemes
 const baseURL = runtimeConfig.app.baseURL;
+const timeFormatTextStrings = ["Auto", "12-Hour", "24-Hour"]
 let themeLinkElement: HTMLLinkElement | null = null;
 
 const themes: Array<Theme> = []
@@ -76,9 +78,8 @@ async function fetchThemes() {
 
 await fetchThemes()
 
-
 async function onTimeFormatClicked(index: number) {
-    console.log(index)
+  settingSave("timeFormat", {index, timeFormat: timeFormatTextStrings[index].toLowerCase()})
 }
 </script>
 

components/UserInterface/RadioButtons.vue

@@ -1,15 +1,15 @@
 <template>
-	<div class="radio-button-container" ref="radioButtonContainer">
+	<div class="radio-buttons-container" ref="radioButtonsContainer">
-		<span v-for="index in incidies" :key="index"
+		<div v-for="index in incidies" :key="index" class="radio-button" @click="onClick(index)">
-				class="radio-button" @click="onClick(index)">
+			<span class="radio-button-radio"></span>
-			{{ textStrings[index] }}
+			<span class="radio-button-text">{{ textStrings[index] }}</span>
-		</span>
+		</div>
 	</div>
 </template>
 
 <script lang="ts" setup>
 
-const radioButtonContainer = ref<HTMLDivElement>()
+const radioButtonsContainer = ref<HTMLDivElement>()
 
 const props = defineProps<{
 	textStrings: string[],
@@ -21,15 +21,30 @@ const props = defineProps<{
 // makes an array from 0 to buttonCount - 1
 const incidies = Array.from({ length: props.buttonCount }, (_, i) => i) 
 
+// select default selected button
+onMounted(async () => {
+	await nextTick()
+	
+	if (props.defaultButtonIndex != undefined && radioButtonsContainer.value) {
+		const children = radioButtonsContainer.value.children
+		const defaultButton = children.item(props.defaultButtonIndex)
+		defaultButton?.classList.add("selected-radio-button")
+		defaultButton?.children.item(0)?.classList.add("selected-radio-button-radio")
+	}
+})
+
+
 function onClick(clickedIndex: number) {
 	// remove selected-radio-button class from all buttons except the clicked one	
-	if (radioButtonContainer.value) {
+	if (radioButtonsContainer.value) {
-		const children = radioButtonContainer.value.children
+		const children = radioButtonsContainer.value.children
 		for (let i = 0; i < children.length; i++) {
 			children.item(i)?.classList.remove("selected-radio-button")
+			children.item(i)?.children.item(0)?.classList.remove("selected-radio-button-radio")
 		}
 
 		children.item(clickedIndex)?.classList.add("selected-radio-button")
+		children.item(clickedIndex)?.children.item(0)?.classList.add("selected-radio-button-radio")
 	}
 	
 	props.callback(clickedIndex)
@@ -37,7 +52,7 @@ function onClick(clickedIndex: number) {
 </script>
 
 <style scoped>
-.radio-button-container {
+.radio-buttons-container {
 	display: flex;
 	flex-direction: column;
 }
@@ -45,7 +60,10 @@ function onClick(clickedIndex: number) {
 .radio-button {
 	cursor: pointer;
 
-	border-radius: 1em;
+	display: flex;
+	align-items: center;
+
+	border-radius: .66em;
 	background-color: unset;
 	color: var(--text-color);
 
@@ -60,11 +78,34 @@ function onClick(clickedIndex: number) {
 }
 
 .selected-radio-button {
-	background-color: var(--primary-color);
+	background-color: var(--accent-color);
 }
 
 .selected-radio-button:hover {
+	background-color: var(--accent-highlighted-color);
+}
+
+.radio-button-radio, .selected-radio-button-radio {
+	position: relative;
+	
+	display: inline-block;
+	border-radius: 1em;
+}
+
+.radio-button-radio {
+	height: 1em;
+	width: 1em;
+	border: .15em solid var(--primary-color);
+}
+
+.selected-radio-button-radio {
+    height: 1em;
+    width: 1em;
+	border: 0.15em solid var(--primary-color);
 	background-color: var(--primary-highlighted-color);
 }
 
+.radio-button-text {
+	margin-left: .5em;
+}
 </style>