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

Adjust settings layout and use underlined inputs

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