mirror of https://github.com/elk-zone/elk.git
116 lines
3.3 KiB
Vue
116 lines
3.3 KiB
Vue
|
<script setup lang="ts">
|
||
|
|
const emit = defineEmits(['close'])
|
||
|
|
const { t } = useI18n()
|
||
|
|
|
||
|
|
/* TODOs:
|
||
|
|
* - I18n
|
||
|
|
*/
|
||
|
|
|
||
|
|
interface ShortcutDef {
|
||
|
|
keys: string[]
|
||
|
|
isSequence: boolean
|
||
|
|
}
|
||
|
|
|
||
|
|
interface ShortcutItem {
|
||
|
|
description: string
|
||
|
|
shortcut: ShortcutDef
|
||
|
|
}
|
||
|
|
|
||
|
|
interface ShortcutItemGroup {
|
||
|
|
name: string
|
||
|
|
items: ShortcutItem[]
|
||
|
|
}
|
||
|
|
|
||
|
|
const shortcutItemGroups: ShortcutItemGroup[] = [
|
||
|
|
{
|
||
|
|
name: t('magic_keys.groups.navigation.title'),
|
||
|
|
items: [
|
||
|
|
{
|
||
|
|
description: t('magic_keys.groups.navigation.shortcut_help'),
|
||
|
|
shortcut: { keys: ['?'], isSequence: false },
|
||
|
|
},
|
||
|
|
// {
|
||
|
|
// description: t('magic_keys.groups.navigation.next_status'),
|
||
|
|
// shortcut: { keys: ['j'], isSequence: false },
|
||
|
|
// },
|
||
|
|
// {
|
||
|
|
// description: t('magic_keys.groups.navigation.previous_status'),
|
||
|
|
// shortcut: { keys: ['k'], isSequence: false },
|
||
|
|
// },
|
||
|
|
{
|
||
|
|
description: t('magic_keys.groups.navigation.go_to_home'),
|
||
|
|
shortcut: { keys: ['g', 'h'], isSequence: true },
|
||
|
|
},
|
||
|
|
{
|
||
|
|
description: t('magic_keys.groups.navigation.go_to_notifications'),
|
||
|
|
shortcut: { keys: ['g', 'n'], isSequence: true },
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: t('magic_keys.groups.actions.title'),
|
||
|
|
items: [
|
||
|
|
{
|
||
|
|
description: t('magic_keys.groups.actions.command_mode'),
|
||
|
|
shortcut: { keys: ['cmd', '/'], isSequence: false },
|
||
|
|
},
|
||
|
|
{
|
||
|
|
description: t('magic_keys.groups.actions.compose'),
|
||
|
|
shortcut: { keys: ['c'], isSequence: false },
|
||
|
|
},
|
||
|
|
{
|
||
|
|
description: t('magic_keys.groups.actions.favourite'),
|
||
|
|
shortcut: { keys: ['f'], isSequence: false },
|
||
|
|
},
|
||
|
|
{
|
||
|
|
description: t('magic_keys.groups.actions.boost'),
|
||
|
|
shortcut: { keys: ['b'], isSequence: false },
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: t('magic_keys.groups.media.title'),
|
||
|
|
items: [],
|
||
|
|
},
|
||
|
|
]
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div px-3 sm:px-5 py-2 sm:py-4 max-w-220 relative max-h-screen>
|
||
|
|
<button btn-action-icon absolute top-1 sm:top-2 right-1 sm:right-2 m1 :aria-label="$t('modals.aria_label_close')" @click="emit('close')">
|
||
|
|
<div i-ri:close-fill />
|
||
|
|
</button>
|
||
|
|
<h2 text-xl font-700 mb3>
|
||
|
|
{{ $t('magic_keys.dialog_header') }}
|
||
|
|
</h2>
|
||
|
|
<div mb2 grid grid-cols-1 md:grid-cols-3 gap-y- md:gap-x-6 lg:gap-x-8>
|
||
|
|
<div
|
||
|
|
v-for="group in shortcutItemGroups"
|
||
|
|
:key="group.name"
|
||
|
|
>
|
||
|
|
<h3 font-700 my-2 text-lg>
|
||
|
|
{{ group.name }}
|
||
|
|
</h3>
|
||
|
|
<div
|
||
|
|
v-for="item in group.items"
|
||
|
|
:key="item.description"
|
||
|
|
flex my-1 lg:my-2 justify-between place-items-center max-w-full text-base
|
||
|
|
>
|
||
|
|
<div mr-2 break-words overflow-hidden leading-4 h-full inline-block align-middle>
|
||
|
|
{{ item.description }}
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<template
|
||
|
|
v-for="(key, idx) in item.shortcut.keys"
|
||
|
|
:key="idx"
|
||
|
|
>
|
||
|
|
<span v-if="idx !== 0" mx1 text-sm op80>{{ item.shortcut.isSequence ? $t('magic_keys.sequence_then') : '+' }}</span>
|
||
|
|
<code class="px2 md:px1.5 lg:px2 lg:px2 py0 lg:py-0.5" rounded bg-code border="px $c-border-code" shadow-sm my1 font-mono font-600>{{ key }}</code>
|
||
|
|
</template>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|