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

feat: add close task popup link (#880) 

Co-authored-by: kolaente <k@knt.li>
Reviewed-on: #880
Co-authored-by: konrad <k@knt.li>
Co-committed-by: konrad <k@knt.li>
This commit is contained in:
konrad 2021-10-21 20:00:45 +00:00 committed by Dominik Pschenitschni
parent c6b24dd8f1
commit 877b243c69
Signed by: dpschen
GPG Key ID: B257AC0149F43A77
4 changed files with 151 additions and 137 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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?",

2
src/icons.js
View File

@ -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)

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

@ -8,7 +8,7 @@
{{ getListTitle(parent.list) }} {{ getListTitle(parent.list) }}
</router-link> </router-link>
</h6> </h6>
<checklist-summary :task="task"/> <checklist-summary :task="task"/>
<!-- Content and buttons --> <!-- Content and buttons -->
@ -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">
@ -410,10 +418,10 @@
v-if="showDeleteModal" v-if="showDeleteModal"
> >
<template #header><span>{{ $t('task.detail.delete.header') }}</span></template> <template #header><span>{{ $t('task.detail.delete.header') }}</span></template>
<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) {

2
src/views/tasks/TaskDetailViewModal.vue
View File

@ -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>