local-it/vikunja-frontend
0
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

feat: re-style the keyboard shortcuts menu (#996)

Browse source 
Co-authored-by: kolaente <k@knt.li>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/996
Reviewed-by: dpschen <dpschen@noreply.kolaente.de>
Co-authored-by: konrad <k@knt.li>
Co-committed-by: konrad <k@knt.li>
This commit is contained in:
konrad 2021-11-14 16:35:41 +00:00
parent 7824ba089a
commit fcadbc352b
1 changed files with 29 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
src/components/misc/keyboard-shortcuts/index.vue
View file

@ -1,6 +1,6 @@
<template> <template>
<modal @close="close()"> <modal @close="close()">
<card class="has-background-white has-no-shadow" :title="$t('keyboardShortcuts.title')"> <card class="has-background-white has-no-shadow keyboard-shortcuts" :title="$t('keyboardShortcuts.title')">
<template v-for="(s, i) in shortcuts" :key="i"> <template v-for="(s, i) in shortcuts" :key="i">
<h3>{{ $t(s.title) }}</h3> <h3>{{ $t(s.title) }}</h3>
@ -12,10 +12,11 @@
</div> </div>
</div> </div>
<dl> <dl class="shortcut-list">
<template v-for="(sc, si) in s.shortcuts" :key="si"> <template v-for="(sc, si) in s.shortcuts" :key="si">
<dt>{{ $t(sc.title) }}</dt> <dt class="shortcut-title">{{ $t(sc.title) }}</dt>
<shortcut <shortcut
class="shortcut-keys"
is="dd" is="dd"
:keys="sc.keys" :keys="sc.keys"
:combination="typeof sc.combination !== 'undefined' ? $t(`keyboardShortcuts.${sc.combination}`) : null"/> :combination="typeof sc.combination !== 'undefined' ? $t(`keyboardShortcuts.${sc.combination}`) : null"/>
@ -47,8 +48,30 @@ export default {
} }
</script> </script>
<style> <style scoped>
dt { .keyboard-shortcuts {
font-weight: bold; text-align: left;
}
.message:not(:last-child) {
margin-bottom: 1rem;
}
.message-body {
padding: .75rem;
}
.shortcut-list {
display: grid;
grid-template-columns: 2fr 1fr;
}
.shortcut-title {
margin-bottom: .5rem;
}
.shortcut-keys {
justify-content: end;
margin-bottom: .5rem;
} }
</style> </style>