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>

src/i18n/lang/en.json

@@ -527,6 +527,7 @@
       "deleteSuccess": "The task has been deleted successfully.",
       "belongsToList": "This task belongs to list '{list}'",
       "due": "Due {at}",
+      "closePopup": "Close popup",
       "delete": {
         "header": "Delete this task",
         "text1": "Are you sure you want to remove this task?",

src/icons.js

@@ -3,6 +3,7 @@ import {
 	faAlignLeft,
 	faAngleRight,
 	faArchive,
+	faArrowLeft,
 	faBars,
 	faBell,
 	faCalendar,
@@ -67,6 +68,7 @@ import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome'
 library.add(faAlignLeft)
 library.add(faAngleRight)
 library.add(faArchive)
+library.add(faArrowLeft)
 library.add(faBars)
 library.add(faBell)
 library.add(faBellSlash)

src/views/tasks/TaskDetailView.vue

@@ -246,7 +246,12 @@
 					<!-- Comments -->
 					<comments :can-write="canWrite" :task-id="taskId"/>
 				</div>
-				<div class="column is-one-third action-buttons" v-if="canWrite">
+				<div class="column is-one-third action-buttons">
+					<a @click="$router.back()" class="is-fullwidth is-block has-text-centered mb-4" v-if="shouldShowClosePopup">
+						<icon icon="arrow-left"/>
+						{{ $t('task.detail.closePopup') }}
+					</a>
+					<template v-if="canWrite">
 						<x-button
 							:class="{'is-success': !task.done}"
 							:shadow="task.done"
@@ -368,7 +373,9 @@
 							type="secondary"
 							:icon="task.isFavorite ? 'star' : ['far', 'star']"
 						>
-						{{ task.isFavorite ? $t('task.detail.actions.unfavorite') : $t('task.detail.actions.favorite') }}
+							{{
+								task.isFavorite ? $t('task.detail.actions.unfavorite') : $t('task.detail.actions.favorite')
+							}}
 						</x-button>
 						<x-button
 							@click="showDeleteModal = true"
@@ -378,6 +385,7 @@
 						>
 							{{ $t('task.detail.actions.delete') }}
 						</x-button>
+					</template>
 
 					<!-- Created / Updated [by] -->
 					<p class="created">
@@ -520,7 +528,7 @@ export default {
 	},
 	computed: {
 		taskId() {
-			const { id } = this.$route.params
+			const {id} = this.$route.params
 			return id === undefined ? id : Number(id)
 		},
 		currentList() {
@@ -558,6 +566,9 @@ export default {
 		hasAttachments() {
 			return this.$store.state.attachments.attachments.length > 0
 		},
+		shouldShowClosePopup() {
+			return this.$route.name.includes('kanban')
+		},
 	},
 	methods: {
 		attachmentUpload(...args) {

src/views/tasks/TaskDetailViewModal.vue

@@ -57,7 +57,7 @@ export default {
 	font-size: 2rem;
 
 	@media screen and (max-width: $desktop) {
-		display: none;
+		color: $dark;
 	}
 }
 </style>