feat: add keyboard shortcut to toggle task description edit #2332

Merged
konrad merged 1 commits from feature/toggle-task-description-edit into main 2022-09-07 17:56:01 +00:00
5 changed files with 39 additions and 5 deletions

View File

@ -16,14 +16,29 @@
<p class="has-text-centered has-text-grey is-italic my-5" v-if="showPreviewText">
{{ emptyText }}
<template v-if="isEditEnabled">
<ButtonLink @click="toggleEdit" class="d-print-none">{{ $t('input.editor.edit') }}</ButtonLink>.
<ButtonLink
@click="toggleEdit"
v-shortcut="editShortcut"
class="d-print-none">
{{ $t('input.editor.edit') }}
</ButtonLink>.
</template>
</p>
<ul class="actions d-print-none" v-if="bottomActions.length > 0">
<li v-if="isEditEnabled && !showPreviewText && showSave">
<BaseButton v-if="showEditButton" @click="toggleEdit">{{ $t('input.editor.edit') }}</BaseButton>
<BaseButton v-else-if="isEditActive" @click="toggleEdit" class="done-edit">{{ $t('misc.save') }}</BaseButton>
<BaseButton
v-if="showEditButton"
@click="toggleEdit"
v-shortcut="editShortcut">
{{ $t('input.editor.edit') }}
</BaseButton>
<BaseButton
v-else-if="isEditActive"
@click="toggleEdit"
class="done-edit">
{{ $t('misc.save') }}
</BaseButton>
</li>
<li v-for="(action, k) in bottomActions" :key="k">
<BaseButton @click="action.action">{{ action.title }}</BaseButton>
@ -32,7 +47,11 @@
<template v-else-if="isEditEnabled && showSave">
<ul v-if="showEditButton" class="actions d-print-none">
<li>
<BaseButton @click="toggleEdit">{{ $t('input.editor.edit') }}</BaseButton>
<BaseButton
@click="toggleEdit"
v-shortcut="editShortcut">
{{ $t('input.editor.edit') }}
</BaseButton>
</li>
</ul>
<x-button
@ -110,6 +129,12 @@ export default defineComponent({
type: Boolean,
default: false,
},
// If a key is passed the editor will go in "edit" mode when the key is pressed.
// Disabled if an empty string is passed.
editShortcut: {
type: String,
default: '',
},
},
emits: ['update:modelValue', 'change'],
computed: {

View File

@ -136,6 +136,10 @@ export const KEYBOARD_SHORTCUTS : ShortcutGroup[] = [
title: 'keyboardShortcuts.task.reminder',
keys: ['alt', 'r'],
},
{
title: 'keyboardShortcuts.task.description',
keys: ['e'],
},
],
},
]

View File

@ -24,6 +24,7 @@
:placeholder="$t('task.description.placeholder')"
:empty-text="$t('task.description.empty')"
:show-save="true"
edit-shortcut="e"
v-model="task.description"
/>
</div>

View File

@ -4,6 +4,9 @@ import {isAppleDevice} from '@/helpers/isAppleDevice'
const directive: Directive = {
mounted(el, {value}) {
if(value === '') {
return
}
if (isAppleDevice() && value.includes('Control')) {
value = value.replace('Control', 'Meta')
}

View File

@ -873,7 +873,8 @@
"related": "Modify related tasks of this task",
"color": "Change the color of this task",
"move": "Move this task to another list",
"reminder": "Manage reminders of this task"
"reminder": "Manage reminders of this task",
"description": "Toggle editing of the task description"
},
"list": {
"title": "List Views",