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') }}
</div>
<QCard
flat
bordered
class="q-pa-md q-mb-md"
style="max-width: 420px;"
>
<QCardSection class="q-pa-none">
<QSelect
v-model="selectedLanguage"
outlined
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 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"
style="max-width: 500px;"
>
<QCardSection class="q-pa-none">
<div class="text-subtitle1 q-mb-md">
{{ t('settingsShortcutTitle') }}
</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>
<div class="text-caption text-grey-5 q-mb-md">
{{ t('settingsShortcutDescription') }}
</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]"
outlined
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>
<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>
<QBtn
class="q-mt-md"
color="primary"
outline
:label="t('settingsShortcutReset')"
@click="shortcutSettingsStore.resetShortcuts"
/>
</QCardSection>
</QCard>
<QBtn
class="q-mt-md"
color="primary"
outline
:label="t('settingsShortcutReset')"
@click="shortcutSettingsStore.resetShortcuts"
/>
</QCardSection>
</QCard>
</div>
</div>
</QPage>
</template>