fabio286/antares
1
1
Fork 0
mirror of https://github.com/Fabio286/antares.git synced 2025-06-05 21:59:22 +02:00
Code Issues Releases Wiki Activity

feat(UI): shortcuts setting UI improved

Browse Source
This commit is contained in:
Fabio Di Stasio
2022-08-09 16:10:08 +02:00
parent 44bb75bc60
commit 49b63bc6f2
15 changed files with 229 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
src/renderer/components/ModalSettingsShortcuts.vue
View File

@ -1,5 +1,13 @@
<template>
<div class="p-relative">
<div class="shortcuts-tools pb-2 px-2">
<button class="btn btn-dark btn-sm d-flex ml-2">
<i class="mdi mdi-24px mdi-plus mr-1" /><span>{{ t('message.addShortcut') }}</span>
</button>
<button class="btn btn-dark btn-sm d-flex ml-2">
<i class="mdi mdi-24px mdi-undo mr-1" /><span>{{ t('message.restoreDefaults') }}</span>
</button>
</div>
<div class="container workspace-query-results">
<div class="table table-hover">
<div class="thead">
@ -14,6 +22,7 @@
{{ t('word.key', 2) }}
</div>
</div>
<div class="th no-border" />
</div>
</div>
@ -25,9 +34,21 @@
tabindex="0"
>
<div class="td py-1">
{{ shortcut.description }}
{{ t(shortcut.l18nSlug, {param: shortcut.l18nParam}) }}
</div>
<div
class="td py-1"
style="border-right: 0;"
v-html="parseKeys(shortcut.keys)"
/>
<div class="td py-1 pr-2">
<button class="shortcut-button btn btn-link btn-sm d-flex p-0 mr-2">
<span>{{ t('word.edit') }}</span><i class="mdi mdi-pencil ml-1" />
</button>
<button class="shortcut-button btn btn-link btn-sm d-flex p-0">
<span>{{ t('word.delete') }}</span><i class="mdi mdi-delete-outline ml-1" />
</button>
</div>
<div class="td py-1" v-html="parseKeys(shortcut.keys)" />
</div>
</div>
</div>
@ -57,9 +78,34 @@ const parseKeys = (keys: {[key: number]: string}[]) => {
).join(', ');
};
</script>
<style scoped>
.table .td {
border-right: 3px solid;
border-bottom: 3px solid;
<style lang="scss" scoped>
.table {
.tr{
.td {
border-right: 3px solid;
border-bottom: 3px solid;
}
&:hover {
.shortcut-button {
opacity: 1;
}
}
.shortcut-button {
font-size: 0.7rem;
height: 1rem;
line-height: 1rem;
display: inline-flex;
align-items: center;
justify-content: center;
opacity: 0;
}
}
}
.shortcuts-tools{
display: flex;
justify-content: flex-end;
}
</style>