mirrors/elk
1
0
Fork 0
mirror of https://github.com/elk-zone/elk.git synced 2024-11-24 02:06:12 +03:00
Code Issues Projects Releases Packages Wiki Activity

refactor: button creation with v-for to remove redundancy (#2020)

Browse source
This commit is contained in:
Phojie Rengel 2023-04-28 15:42:23 +08:00 committed by GitHub
parent 5c3b8be055
commit 5dc136372b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 25 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
components/settings/SettingsColorMode.vue
View file

@ -6,36 +6,38 @@ const colorMode = useColorMode()
function setColorMode(mode: ColorMode) { function setColorMode(mode: ColorMode) {
colorMode.preference = mode colorMode.preference = mode
} }
const modes = [
{
icon: 'i-ri-moon-line',
label: 'settings.interface.dark_mode',
mode: 'dark',
},
{
icon: 'i-ri-sun-line',
label: 'settings.interface.light_mode',
mode: 'light',
},
{
icon: 'i-ri-computer-line',
label: 'settings.interface.system_mode',
mode: 'system',
},
] as const
</script> </script>
<template> <template>
<div flex="~ gap4 wrap" w-full> <div flex="~ gap4 wrap" w-full>
<button <button
v-for="{ icon, label, mode } in modes"
:key="mode"
btn-text flex-1 flex="~ gap-1 center" p4 border="~ base rounded" bg-base ws-nowrap btn-text flex-1 flex="~ gap-1 center" p4 border="~ base rounded" bg-base ws-nowrap
:tabindex="colorMode.preference === 'dark' ? 0 : -1" :tabindex="colorMode.preference === mode ? 0 : -1"
:class="colorMode.preference === 'dark' ? 'pointer-events-none' : 'filter-saturate-0'" :class="colorMode.preference === mode ? 'pointer-events-none' : 'filter-saturate-0'"
@click="setColorMode('dark')" @click="setColorMode(mode)"
> >
<div i-ri:moon-line /> <span :class="`${icon}`" />
{{ $t('settings.interface.dark_mode') }} {{ $t(label) }}
</button>
<button
btn-text flex-1 flex="~ gap-1 center" p4 border="~ base rounded" bg-base ws-nowrap
:tabindex="colorMode.preference === 'light' ? 0 : -1"
:class="colorMode.preference === 'light' ? 'pointer-events-none' : 'filter-saturate-0'"
@click="setColorMode('light')"
>
<div i-ri:sun-line />
{{ $t('settings.interface.light_mode') }}
</button>
<button
btn-text flex-1 flex="~ gap-1 center" p4 border="~ base rounded" bg-base ws-nowrap
:tabindex="colorMode.preference === 'system' ? 0 : -1"
:class="colorMode.preference === 'system' ? 'pointer-events-none' : 'filter-saturate-0'"
@click="setColorMode('system')"
>
<div i-ri:computer-line />
{{ $t('settings.interface.system_mode') }}
</button> </button>
</div> </div>
</template> </template>