vikunja
/
frontend
Archived
6
39
Fork 49
Code Issues 1 Pull Requests 4 Projects Releases 26 Activity

feat(task): group related task action buttons
continuous-integration/drone/push Build is failing Details

This commit is contained in:
kolaente 2023-09-06 16:30:00 +02:00
parent 3fec92283b
commit 3bb5308141
Signed by: konrad
GPG Key ID: F40E70337AB24C9B
2 changed files with 78 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/i18n/lang/en.json
View File

@ -610,6 +610,9 @@
"belongsToProject": "This task belongs to project '{project}'",
"due": "Due {at}",
"closePopup": "Close popup",
"organization": "Organization",
"management": "Management",
"dateAndTime": "Date and time",
"delete": {
"header": "Delete this task",
"text1": "Are you sure you want to remove this task?",

130
src/views/tasks/TaskDetailView.vue
View File

@ -281,6 +281,8 @@
<!-- Comments -->
<comments :can-write="canWrite" :task-id="taskId"/>
</div>
<!-- Task Actions -->
<div class="column is-one-third action-buttons d-print-none" v-if="canWrite || isModal">
<template v-if="canWrite">
<x-button
@ -301,14 +303,18 @@
@update:model-value="sub => task.subscription = sub"
/>
<x-button
@click="setFieldActive('assignees')"
@click="toggleFavorite"
variant="secondary"
v-shortcut="'a'"
v-cy="'taskDetail.assign'"
:icon="task.isFavorite ? 'star' : ['far', 'star']"
v-shortcut="'s'"
>
<span class="icon is-small"><icon icon="users"/></span>
{{ $t('task.detail.actions.assign') }}
{{
task.isFavorite ? $t('task.detail.actions.unfavorite') : $t('task.detail.actions.favorite')
}}
</x-button>
<span class="action-heading">{{ $t('task.detail.organization') }}</span>
<x-button
@click="setFieldActive('labels')"
variant="secondary"
@ -325,6 +331,61 @@
>
{{ $t('task.detail.actions.priority') }}
</x-button>
<x-button
@click="setFieldActive('percentDone')"
variant="secondary"
icon="percent"
>
{{ $t('task.detail.actions.percentDone') }}
</x-button>
<x-button
@click="setFieldActive('color')"
variant="secondary"
icon="fill-drip"
:icon-color="color"
v-shortcut="'c'"
>
{{ $t('task.detail.actions.color') }}
</x-button>
<span class="action-heading">{{ $t('task.detail.management') }}</span>
<x-button
@click="setFieldActive('assignees')"
variant="secondary"
v-shortcut="'a'"
v-cy="'taskDetail.assign'"
>
<span class="icon is-small"><icon icon="users"/></span>
{{ $t('task.detail.actions.assign') }}
</x-button>
<x-button
@click="setFieldActive('attachments')"
variant="secondary"
icon="paperclip"
v-shortcut="'f'"
>
{{ $t('task.detail.actions.attachments') }}
</x-button>
<x-button
@click="setRelatedTasksActive()"
variant="secondary"
icon="sitemap"
v-shortcut="'r'"
>
{{ $t('task.detail.actions.relatedTasks') }}
</x-button>
<x-button
@click="setFieldActive('moveProject')"
variant="secondary"
icon="list"
v-shortcut="'m'"
>
{{ $t('task.detail.actions.moveProject') }}
</x-button>
<span class="action-heading">{{ $t('task.detail.dateAndTime') }}</span>
<x-button
@click="setFieldActive('dueDate')"
variant="secondary"
@ -362,56 +423,6 @@
>
{{ $t('task.detail.actions.repeatAfter') }}
</x-button>
<x-button
@click="setFieldActive('percentDone')"
variant="secondary"
icon="percent"
>
{{ $t('task.detail.actions.percentDone') }}
</x-button>
<x-button
@click="setFieldActive('attachments')"
variant="secondary"
icon="paperclip"
v-shortcut="'f'"
>
{{ $t('task.detail.actions.attachments') }}
</x-button>
<x-button
@click="setRelatedTasksActive()"
variant="secondary"
icon="sitemap"
v-shortcut="'r'"
>
{{ $t('task.detail.actions.relatedTasks') }}
</x-button>
<x-button
@click="setFieldActive('moveProject')"
variant="secondary"
icon="list"
v-shortcut="'m'"
>
{{ $t('task.detail.actions.moveProject') }}
</x-button>
<x-button
@click="setFieldActive('color')"
variant="secondary"
icon="fill-drip"
:icon-color="color"
v-shortcut="'c'"
>
{{ $t('task.detail.actions.color') }}
</x-button>
<x-button
@click="toggleFavorite"
variant="secondary"
:icon="task.isFavorite ? 'star' : ['far', 'star']"
v-shortcut="'s'"
>
{{
task.isFavorite ? $t('task.detail.actions.unfavorite') : $t('task.detail.actions.favorite')
}}
</x-button>
<x-button
@click="showDeleteModal = true"
icon="trash-alt"
@ -1000,4 +1011,13 @@ h3 .button {
width: 100% !important;
}
}
.action-heading {
text-transform: uppercase;
color: var(--grey-700);
font-size: .75rem;
font-weight: 700;
margin: .5rem 0;
display: inline-block;
}
</style>