groove/audiobookshelf
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf.git synced 2026-03-01 05:29:41 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

fix(ui): use correct modals-modal component for Shortcuts modal

Browse source
This commit is contained in:
Tiberiu Ichim 2026-02-22 08:26:54 +02:00
parent d7a2f4a515
commit fe3638548d
1 changed files with 22 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

37
client/components/modals/ShortcutsModal.vue
View file

@ -1,24 +1,31 @@
<template>
<ui-modal v-model="show" :width="600" title="Keyboard Shortcuts" @close="close">
<div class="p-6 text-sm text-gray-200">
<div v-for="(section, index) in shortcutSections" :key="index" class="mb-6 last:mb-0">
<h3 class="text-lg font-semibold text-white mb-3">{{ section.title }}</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-y-2 gap-x-4">
<div v-for="shortcut in section.shortcuts" :key="shortcut.keys" class="flex justify-between items-center py-1 border-b border-white/10 last:border-b-0">
<span>{{ shortcut.action }}</span>
<div class="flex gap-1">
<span v-for="(key, i) in shortcut.keys.replace(/Key/g, '').split('-')" :key="i" class="px-2 py-0.5 bg-bg font-mono text-xs rounded-sm border border-gray-600 text-gray-300">
{{ key }}
</span>
<modals-modal v-model="show" name="shortcuts" :width="600">
<template #outer>
<div class="absolute top-0 left-0 p-5 w-2/3 overflow-hidden">
<p class="text-3xl text-white truncate">Keyboard Shortcuts</p>
</div>
</template>
<div class="px-6 py-6 w-full text-sm rounded-lg bg-bg shadow-lg border border-black-300 overflow-y-auto overflow-x-hidden" style="max-height: 80vh">
<div class="text-sm text-gray-200">
<div v-for="(section, index) in shortcutSections" :key="index" class="mb-6 last:mb-0">
<h3 class="text-lg font-semibold text-white mb-3">{{ section.title }}</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-y-2 gap-x-4">
<div v-for="shortcut in section.shortcuts" :key="shortcut.keys" class="flex justify-between items-center py-1 border-b border-white/10 last:border-b-0">
<span>{{ shortcut.action }}</span>
<div class="flex gap-1">
<span v-for="(key, i) in shortcut.keys.replace(/Key/g, '').split('-')" :key="i" class="px-2 py-0.5 bg-bg font-mono text-xs rounded-sm border border-gray-600 text-gray-300">
{{ key }}
</span>
</div>
</div>
</div>
</div>
</div>
<div class="flex justify-end pt-4 border-t border-white/10 mt-4">
<ui-btn @click="close">Close</ui-btn>
</div>
</div>
<div class="flex justify-end p-4 border-t border-white/10">
<ui-btn @click="close">Close</ui-btn>
</div>
</ui-modal>
</modals-modal>
</template>
<script>