feat: add close task popup link (#880)
Co-authored-by: kolaente <k@knt.li> Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/880 Co-authored-by: konrad <k@knt.li> Co-committed-by: konrad <k@knt.li>
This commit is contained in:
konrad
Dominik Pschenitschni
parent
c6b24dd8f1
commit
877b243c69
4 changed files with 151 additions and 137 deletions
|
|
@ -527,6 +527,7 @@
|
||||||
"deleteSuccess": "The task has been deleted successfully.",
|
"deleteSuccess": "The task has been deleted successfully.",
|
||||||
"belongsToList": "This task belongs to list '{list}'",
|
"belongsToList": "This task belongs to list '{list}'",
|
||||||
"due": "Due {at}",
|
"due": "Due {at}",
|
||||||
|
"closePopup": "Close popup",
|
||||||
"delete": {
|
"delete": {
|
||||||
"header": "Delete this task",
|
"header": "Delete this task",
|
||||||
"text1": "Are you sure you want to remove this task?",
|
"text1": "Are you sure you want to remove this task?",
|
||||||
|
|
|
||||||
|
|
@ -3,6 +3,7 @@ import {
|
||||||
faAlignLeft,
|
faAlignLeft,
|
||||||
faAngleRight,
|
faAngleRight,
|
||||||
faArchive,
|
faArchive,
|
||||||
|
faArrowLeft,
|
||||||
faBars,
|
faBars,
|
||||||
faBell,
|
faBell,
|
||||||
faCalendar,
|
faCalendar,
|
||||||
|
|
@ -67,6 +68,7 @@ import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome'
|
||||||
library.add(faAlignLeft)
|
library.add(faAlignLeft)
|
||||||
library.add(faAngleRight)
|
library.add(faAngleRight)
|
||||||
library.add(faArchive)
|
library.add(faArchive)
|
||||||
|
library.add(faArrowLeft)
|
||||||
library.add(faBars)
|
library.add(faBars)
|
||||||
library.add(faBell)
|
library.add(faBell)
|
||||||
library.add(faBellSlash)
|
library.add(faBellSlash)
|
||||||
|
|
|
||||||
|
|
@ -246,138 +246,146 @@
|
||||||
<!-- Comments -->
|
<!-- Comments -->
|
||||||
<comments :can-write="canWrite" :task-id="taskId"/>
|
<comments :can-write="canWrite" :task-id="taskId"/>
|
||||||
</div>
|
</div>
|
||||||
<div class="column is-one-third action-buttons" v-if="canWrite">
|
<div class="column is-one-third action-buttons">
|
||||||
<x-button
|
<a @click="$router.back()" class="is-fullwidth is-block has-text-centered mb-4" v-if="shouldShowClosePopup">
|
||||||
:class="{'is-success': !task.done}"
|
<icon icon="arrow-left"/>
|
||||||
:shadow="task.done"
|
{{ $t('task.detail.closePopup') }}
|
||||||
@click="toggleTaskDone()"
|
</a>
|
||||||
class="is-outlined has-no-border"
|
<template v-if="canWrite">
|
||||||
icon="check-double"
|
<x-button
|
||||||
type="secondary"
|
:class="{'is-success': !task.done}"
|
||||||
>
|
:shadow="task.done"
|
||||||
{{ task.done ? $t('task.detail.undone') : $t('task.detail.done') }}
|
@click="toggleTaskDone()"
|
||||||
</x-button>
|
class="is-outlined has-no-border"
|
||||||
<task-subscription
|
icon="check-double"
|
||||||
entity="task"
|
type="secondary"
|
||||||
:entity-id="task.id"
|
>
|
||||||
:subscription="task.subscription"
|
{{ task.done ? $t('task.detail.undone') : $t('task.detail.done') }}
|
||||||
@change="sub => task.subscription = sub"
|
</x-button>
|
||||||
/>
|
<task-subscription
|
||||||
<x-button
|
entity="task"
|
||||||
@click="setFieldActive('assignees')"
|
:entity-id="task.id"
|
||||||
@shortkey="setFieldActive('assignees')"
|
:subscription="task.subscription"
|
||||||
type="secondary"
|
@change="sub => task.subscription = sub"
|
||||||
v-shortkey="['a']">
|
/>
|
||||||
<span class="icon is-small"><icon icon="users"/></span>
|
<x-button
|
||||||
{{ $t('task.detail.actions.assign') }}
|
@click="setFieldActive('assignees')"
|
||||||
</x-button>
|
@shortkey="setFieldActive('assignees')"
|
||||||
<x-button
|
type="secondary"
|
||||||
@click="setFieldActive('labels')"
|
v-shortkey="['a']">
|
||||||
@shortkey="setFieldActive('labels')"
|
<span class="icon is-small"><icon icon="users"/></span>
|
||||||
type="secondary"
|
{{ $t('task.detail.actions.assign') }}
|
||||||
v-shortkey="['l']"
|
</x-button>
|
||||||
icon="tags"
|
<x-button
|
||||||
>
|
@click="setFieldActive('labels')"
|
||||||
{{ $t('task.detail.actions.label') }}
|
@shortkey="setFieldActive('labels')"
|
||||||
</x-button>
|
type="secondary"
|
||||||
<x-button
|
v-shortkey="['l']"
|
||||||
@click="setFieldActive('priority')"
|
icon="tags"
|
||||||
type="secondary"
|
>
|
||||||
:icon="['far', 'star']"
|
{{ $t('task.detail.actions.label') }}
|
||||||
>
|
</x-button>
|
||||||
{{ $t('task.detail.actions.priority') }}
|
<x-button
|
||||||
</x-button>
|
@click="setFieldActive('priority')"
|
||||||
<x-button
|
type="secondary"
|
||||||
@click="setFieldActive('dueDate')"
|
:icon="['far', 'star']"
|
||||||
@shortkey="setFieldActive('dueDate')"
|
>
|
||||||
type="secondary"
|
{{ $t('task.detail.actions.priority') }}
|
||||||
v-shortkey="['d']"
|
</x-button>
|
||||||
icon="calendar"
|
<x-button
|
||||||
>
|
@click="setFieldActive('dueDate')"
|
||||||
{{ $t('task.detail.actions.dueDate') }}
|
@shortkey="setFieldActive('dueDate')"
|
||||||
</x-button>
|
type="secondary"
|
||||||
<x-button
|
v-shortkey="['d']"
|
||||||
@click="setFieldActive('startDate')"
|
icon="calendar"
|
||||||
type="secondary"
|
>
|
||||||
icon="calendar-week"
|
{{ $t('task.detail.actions.dueDate') }}
|
||||||
>
|
</x-button>
|
||||||
{{ $t('task.detail.actions.startDate') }}
|
<x-button
|
||||||
</x-button>
|
@click="setFieldActive('startDate')"
|
||||||
<x-button
|
type="secondary"
|
||||||
@click="setFieldActive('endDate')"
|
icon="calendar-week"
|
||||||
type="secondary"
|
>
|
||||||
icon="calendar-week"
|
{{ $t('task.detail.actions.startDate') }}
|
||||||
>
|
</x-button>
|
||||||
{{ $t('task.detail.actions.endDate') }}
|
<x-button
|
||||||
</x-button>
|
@click="setFieldActive('endDate')"
|
||||||
<x-button
|
type="secondary"
|
||||||
@click="setFieldActive('reminders')"
|
icon="calendar-week"
|
||||||
type="secondary"
|
>
|
||||||
icon="history"
|
{{ $t('task.detail.actions.endDate') }}
|
||||||
>
|
</x-button>
|
||||||
{{ $t('task.detail.actions.reminders') }}
|
<x-button
|
||||||
</x-button>
|
@click="setFieldActive('reminders')"
|
||||||
<x-button
|
type="secondary"
|
||||||
@click="setFieldActive('repeatAfter')"
|
icon="history"
|
||||||
type="secondary"
|
>
|
||||||
:icon="['far', 'clock']"
|
{{ $t('task.detail.actions.reminders') }}
|
||||||
>
|
</x-button>
|
||||||
{{ $t('task.detail.actions.repeatAfter') }}
|
<x-button
|
||||||
</x-button>
|
@click="setFieldActive('repeatAfter')"
|
||||||
<x-button
|
type="secondary"
|
||||||
@click="setFieldActive('percentDone')"
|
:icon="['far', 'clock']"
|
||||||
type="secondary"
|
>
|
||||||
icon="percent"
|
{{ $t('task.detail.actions.repeatAfter') }}
|
||||||
>
|
</x-button>
|
||||||
{{ $t('task.detail.actions.percentDone') }}
|
<x-button
|
||||||
</x-button>
|
@click="setFieldActive('percentDone')"
|
||||||
<x-button
|
type="secondary"
|
||||||
@click="setFieldActive('attachments')"
|
icon="percent"
|
||||||
@shortkey="setFieldActive('attachments')"
|
>
|
||||||
type="secondary"
|
{{ $t('task.detail.actions.percentDone') }}
|
||||||
v-shortkey="['f']"
|
</x-button>
|
||||||
icon="paperclip"
|
<x-button
|
||||||
>
|
@click="setFieldActive('attachments')"
|
||||||
{{ $t('task.detail.actions.attachments') }}
|
@shortkey="setFieldActive('attachments')"
|
||||||
</x-button>
|
type="secondary"
|
||||||
<x-button
|
v-shortkey="['f']"
|
||||||
@click="setFieldActive('relatedTasks')"
|
icon="paperclip"
|
||||||
@shortkey="setFieldActive('relatedTasks')"
|
>
|
||||||
type="secondary"
|
{{ $t('task.detail.actions.attachments') }}
|
||||||
v-shortkey="['r']"
|
</x-button>
|
||||||
icon="tasks"
|
<x-button
|
||||||
>
|
@click="setFieldActive('relatedTasks')"
|
||||||
{{ $t('task.detail.actions.relatedTasks') }}
|
@shortkey="setFieldActive('relatedTasks')"
|
||||||
</x-button>
|
type="secondary"
|
||||||
<x-button
|
v-shortkey="['r']"
|
||||||
@click="setFieldActive('moveList')"
|
icon="tasks"
|
||||||
type="secondary"
|
>
|
||||||
icon="list"
|
{{ $t('task.detail.actions.relatedTasks') }}
|
||||||
>
|
</x-button>
|
||||||
{{ $t('task.detail.actions.moveList') }}
|
<x-button
|
||||||
</x-button>
|
@click="setFieldActive('moveList')"
|
||||||
<x-button
|
type="secondary"
|
||||||
@click="setFieldActive('color')"
|
icon="list"
|
||||||
type="secondary"
|
>
|
||||||
icon="fill-drip"
|
{{ $t('task.detail.actions.moveList') }}
|
||||||
>
|
</x-button>
|
||||||
{{ $t('task.detail.actions.color') }}
|
<x-button
|
||||||
</x-button>
|
@click="setFieldActive('color')"
|
||||||
<x-button
|
type="secondary"
|
||||||
@click="toggleFavorite"
|
icon="fill-drip"
|
||||||
type="secondary"
|
>
|
||||||
:icon="task.isFavorite ? 'star' : ['far', 'star']"
|
{{ $t('task.detail.actions.color') }}
|
||||||
>
|
</x-button>
|
||||||
{{ task.isFavorite ? $t('task.detail.actions.unfavorite') : $t('task.detail.actions.favorite') }}
|
<x-button
|
||||||
</x-button>
|
@click="toggleFavorite"
|
||||||
<x-button
|
type="secondary"
|
||||||
@click="showDeleteModal = true"
|
:icon="task.isFavorite ? 'star' : ['far', 'star']"
|
||||||
icon="trash-alt"
|
>
|
||||||
:shadow="false"
|
{{
|
||||||
class="is-danger is-outlined has-no-border"
|
task.isFavorite ? $t('task.detail.actions.unfavorite') : $t('task.detail.actions.favorite')
|
||||||
>
|
}}
|
||||||
{{ $t('task.detail.actions.delete') }}
|
</x-button>
|
||||||
</x-button>
|
<x-button
|
||||||
|
@click="showDeleteModal = true"
|
||||||
|
icon="trash-alt"
|
||||||
|
:shadow="false"
|
||||||
|
class="is-danger is-outlined has-no-border"
|
||||||
|
>
|
||||||
|
{{ $t('task.detail.actions.delete') }}
|
||||||
|
</x-button>
|
||||||
|
</template>
|
||||||
|
|
||||||
<!-- Created / Updated [by] -->
|
<!-- Created / Updated [by] -->
|
||||||
<p class="created">
|
<p class="created">
|
||||||
|
|
@ -413,7 +421,7 @@
|
||||||
|
|
||||||
<template #text>
|
<template #text>
|
||||||
<p>{{ $t('task.detail.delete.text1') }}<br/>
|
<p>{{ $t('task.detail.delete.text1') }}<br/>
|
||||||
{{ $t('task.detail.delete.text2') }}</p>
|
{{ $t('task.detail.delete.text2') }}</p>
|
||||||
</template>
|
</template>
|
||||||
</modal>
|
</modal>
|
||||||
</transition>
|
</transition>
|
||||||
|
|
@ -520,7 +528,7 @@ export default {
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
taskId() {
|
taskId() {
|
||||||
const { id } = this.$route.params
|
const {id} = this.$route.params
|
||||||
return id === undefined ? id : Number(id)
|
return id === undefined ? id : Number(id)
|
||||||
},
|
},
|
||||||
currentList() {
|
currentList() {
|
||||||
|
|
@ -558,6 +566,9 @@ export default {
|
||||||
hasAttachments() {
|
hasAttachments() {
|
||||||
return this.$store.state.attachments.attachments.length > 0
|
return this.$store.state.attachments.attachments.length > 0
|
||||||
},
|
},
|
||||||
|
shouldShowClosePopup() {
|
||||||
|
return this.$route.name.includes('kanban')
|
||||||
|
},
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
attachmentUpload(...args) {
|
attachmentUpload(...args) {
|
||||||
|
|
|
||||||
|
|
@ -57,7 +57,7 @@ export default {
|
||||||
font-size: 2rem;
|
font-size: 2rem;
|
||||||
|
|
||||||
@media screen and (max-width: $desktop) {
|
@media screen and (max-width: $desktop) {
|
||||||
display: none;
|
color: $dark;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
Loading…
Reference in a new issue