gorb/frontend
4
0
Fork 0
Code Issues 7 Pull requests 3 Projects Releases Packages 1 Wiki Activity Actions

feat: finish radio buttons

Browse source
This commit is contained in:
Twig 2025-07-12 20:35:05 +02:00
parent 562409b660
commit de6c9bb7eb
No known key found for this signature in database
2 changed files with 57 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

9
components/Settings/AppSettings/Appearance.vue
View file

@ -23,19 +23,21 @@
<p class="subtitle">TIME FORMAT</p>
<div class="icons">
<RadioButtons :button-count="3" :text-strings="['Auto', '12-hour', '24-hour']"
:default-button-index="0" :callback="onTimeFormatClicked"></RadioButtons>
<RadioButtons :button-count="3" :text-strings="timeFormatTextStrings"
: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>

63
components/UserInterface/RadioButtons.vue
View file

@ -1,15 +1,15 @@
<template>
<div class="radio-button-container" ref="radioButtonContainer">
<span v-for="index in incidies" :key="index"
class="radio-button" @click="onClick(index)">
{{ textStrings[index] }}
</span>
<div class="radio-buttons-container" ref="radioButtonsContainer">
<div v-for="index in incidies" :key="index" class="radio-button" @click="onClick(index)">
<span class="radio-button-radio"></span>
<span class="radio-button-text">{{ textStrings[index] }}</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) {
const children = radioButtonContainer.value.children
if (radioButtonsContainer.value) {
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>