Pandipipas/scoreko-dev
1
0
Fork 0
mirror of https://github.com/Pandipipas/scoreko-dev.git synced 2026-06-06 03:32:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

Reorganize settings view into single sectioned card

Browse Source
This commit is contained in:
Pandipipas
2026-02-25 14:29:04 +01:00
parent 54ab922e12
commit eeab438ea7
1 changed files with 74 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/dashboard/scoreko-dev/views/Settings.vue
+74 -68
View File
@@ -90,77 +90,83 @@ useHead(() => ({ title: t('settingsTitle') }));
{{ t('settingsDescription') }}
</div>
<div class="row q-col-gutter-lg items-start">
<div class="col-12 col-md-4">
<QCard
flat
bordered
class="q-pa-md"
>
<QCardSection class="q-pa-none">
<QSelect
v-model="selectedLanguage"
emit-value
map-options
:label="t('settingsLanguageLabel')"
:options="languageOptions"
/>
<div class="text-caption text-grey-5 q-mt-sm">
{{ t('settingsLanguageHint') }}
</div>
</QCardSection>
</QCard>
</div>
<QCard
flat
bordered
class="q-pa-md settings-card"
>
<QCardSection class="q-pa-none q-mb-lg">
<div class="text-subtitle1 q-mb-sm">
{{ t('settingsLanguageLabel') }}
</div>
<div class="col-12 col-md-8">
<QCard
flat
bordered
class="q-pa-md"
>
<QCardSection class="q-pa-none">
<div class="text-subtitle1 q-mb-md">
{{ t('settingsShortcutTitle') }}
</div>
<QSelect
v-model="selectedLanguage"
emit-value
map-options
:label="t('settingsLanguageLabel')"
:options="languageOptions"
/>
<div class="text-caption text-grey-5 q-mb-md">
{{ t('settingsShortcutDescription') }}
</div>
<div class="text-caption text-grey-5 q-mt-sm">
{{ t('settingsLanguageHint') }}
</div>
</QCardSection>
<div class="column q-gutter-md">
<QInput
v-for="field in shortcutFields"
:key="field.action"
:model-value="shortcutSettingsStore.shortcuts[field.action]"
readonly
:label="field.label"
>
<template #append>
<QBtn
flat
round
dense
:icon="recordingAction === field.action ? 'stop_circle' : 'keyboard'"
:color="recordingAction === field.action ? 'negative' : 'primary'"
@click="startRecording(field.action)"
/>
</template>
<template #hint>
{{ recordingAction === field.action ? t('settingsShortcutRecordingHint') : field.hint }}
</template>
</QInput>
</div>
<QSeparator class="q-mb-lg" />
<QBtn
class="q-mt-md"
color="primary"
outline
:label="t('settingsShortcutReset')"
@click="shortcutSettingsStore.resetShortcuts"
/>
</QCardSection>
</QCard>
</div>
</div>
<QCardSection class="q-pa-none">
<div class="row items-center justify-between q-mb-sm">
<div class="text-subtitle1">
{{ t('settingsShortcutTitle') }}
</div>
<QBtn
round
dense
flat
color="primary"
icon="restart_alt"
:aria-label="t('settingsShortcutReset')"
@click="shortcutSettingsStore.resetShortcuts"
>
<QTooltip>{{ t('settingsShortcutReset') }}</QTooltip>
</QBtn>
</div>
<div class="text-caption text-grey-5 q-mb-md">
{{ t('settingsShortcutDescription') }}
</div>
<div class="column q-gutter-md">
<QInput
v-for="field in shortcutFields"
:key="field.action"
:model-value="shortcutSettingsStore.shortcuts[field.action]"
readonly
:label="field.label"
>
<template #append>
<QBtn
flat
round
dense
:icon="recordingAction === field.action ? 'stop_circle' : 'keyboard'"
:color="recordingAction === field.action ? 'negative' : 'primary'"
@click="startRecording(field.action)"
/>
</template>
<template #hint>
{{ recordingAction === field.action ? t('settingsShortcutRecordingHint') : field.hint }}
</template>
</QInput>
</div>
</QCardSection>
</QCard>
</QPage>
</template>
<style scoped>
.settings-card {
max-width: 720px;
}
</style>