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') }} {{ t('settingsDescription') }}
</div> </div>
<div class="row q-col-gutter-lg items-start"> <QCard
<div class="col-12 col-md-4"> flat
<QCard bordered
flat class="q-pa-md settings-card"
bordered >
class="q-pa-md" <QCardSection class="q-pa-none q-mb-lg">
> <div class="text-subtitle1 q-mb-sm">
<QCardSection class="q-pa-none"> {{ t('settingsLanguageLabel') }}
<QSelect </div>
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>
<div class="col-12 col-md-8"> <QSelect
<QCard v-model="selectedLanguage"
flat emit-value
bordered map-options
class="q-pa-md" :label="t('settingsLanguageLabel')"
> :options="languageOptions"
<QCardSection class="q-pa-none"> />
<div class="text-subtitle1 q-mb-md">
{{ t('settingsShortcutTitle') }}
</div>
<div class="text-caption text-grey-5 q-mb-md"> <div class="text-caption text-grey-5 q-mt-sm">
{{ t('settingsShortcutDescription') }} {{ t('settingsLanguageHint') }}
</div> </div>
</QCardSection>
<div class="column q-gutter-md"> <QSeparator class="q-mb-lg" />
<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>
<QBtn <QCardSection class="q-pa-none">
class="q-mt-md" <div class="row items-center justify-between q-mb-sm">
color="primary" <div class="text-subtitle1">
outline {{ t('settingsShortcutTitle') }}
:label="t('settingsShortcutReset')" </div>
@click="shortcutSettingsStore.resetShortcuts" <QBtn
/> round
</QCardSection> dense
</QCard> flat
</div> color="primary"
</div> 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> </QPage>
</template> </template>
<style scoped>
.settings-card {
max-width: 720px;
}
</style>