ami/tl-vikunja
1
0
Fork 0
Code Activity

feat: add variant hint-modal to modal component (#764)

Browse Source 
Co-authored-by: Dominik Pschenitschni <mail@celement.de>
Co-authored-by: kolaente <k@knt.li>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/764
Reviewed-by: konrad <k@knt.li>
Co-authored-by: dpschen <dpschen@noreply.kolaente.de>
Co-committed-by: dpschen <dpschen@noreply.kolaente.de>
This commit is contained in:
dpschen
2021-09-24 18:08:48 +00:00
committed by konrad
parent 97416ab2d5
commit 4f2378ff02
17 changed files with 258 additions and 201 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/misc/keyboard-shortcuts.vue
View File

@ -1,7 +1,5 @@
<template>
<div class="modal-mask hint-modal">
<div @click.self="close()" class="modal-container">
<div class="modal-content">
<modal @close="close()">
<card class="has-background-white has-no-shadow" :title="$t('keyboardShortcuts.title')">
<div class="message is-primary">
<div class="message-body">
@ -55,9 +53,7 @@
<shortcut :keys="['r']"/>
</p>
</card>
</div>
</div>
</div>
</modal>
</template>
<script>
@ -73,4 +69,4 @@ export default {
},
},
}
</script>
</script>

23
src/components/misc/shortcut.vue
View File

@ -1,8 +1,8 @@
<template>
<span class="shortcuts">
<template v-for="(k, i) in keys">
<span :key="i">{{ k }}</span>
<i v-if="i < keys.length - 1" :key="`plus${i}`">+</i>
<kbd :key="i">{{ k }}</kbd>
<span v-if="i < keys.length - 1" :key="`plus${i}`">+</span>
</template>
</span>
</template>
@ -18,3 +18,22 @@ export default {
},
}
</script>
<style lang="scss" scoped>
.shortcuts {
display: flex;
align-items: center;
}
kbd {
padding: .1rem .35rem;
border: 1px solid $grey-300;
background: $grey-100;
border-radius: 3px;
font-size: .75rem;
}
span {
padding: 0 .25rem;
}
</style>