From 877b243c6980916c468588e23931d39e2db65b6e Mon Sep 17 00:00:00 2001
From: konrad <k@knt.li>
Date: Thu, 21 Oct 2021 20:00:45 +0000
Subject: [PATCH] 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                   |   1 +
 src/icons.js                            |   2 +
 src/views/tasks/TaskDetailView.vue      | 283 ++++++++++++------------
 src/views/tasks/TaskDetailViewModal.vue |   2 +-
 4 files changed, 151 insertions(+), 137 deletions(-)

diff --git a/src/i18n/lang/en.json b/src/i18n/lang/en.json
index 1e14b3338..5cd14c0cd 100644
--- a/src/i18n/lang/en.json
+++ b/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?",
diff --git a/src/icons.js b/src/icons.js
index f0f59e80f..e050d3bdc 100644
--- a/src/icons.js
+++ b/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)
diff --git a/src/views/tasks/TaskDetailView.vue b/src/views/tasks/TaskDetailView.vue
index b27f3ef67..c48e9d40b 100644
--- a/src/views/tasks/TaskDetailView.vue
+++ b/src/views/tasks/TaskDetailView.vue
@@ -8,7 +8,7 @@
 					{{ getListTitle(parent.list) }}
 				</router-link>
 			</h6>
-			
+
 			<checklist-summary :task="task"/>
 
 			<!-- Content and buttons -->
@@ -246,138 +246,146 @@
 					<!-- Comments -->
 					<comments :can-write="canWrite" :task-id="taskId"/>
 				</div>
-				<div class="column is-one-third action-buttons" v-if="canWrite">
-					<x-button
-						:class="{'is-success': !task.done}"
-						:shadow="task.done"
-						@click="toggleTaskDone()"
-						class="is-outlined has-no-border"
-						icon="check-double"
-						type="secondary"
-					>
-						{{ task.done ? $t('task.detail.undone') : $t('task.detail.done') }}
-					</x-button>
-					<task-subscription
-						entity="task"
-						:entity-id="task.id"
-						:subscription="task.subscription"
-						@change="sub => task.subscription = sub"
-					/>
-					<x-button
-						@click="setFieldActive('assignees')"
-						@shortkey="setFieldActive('assignees')"
-						type="secondary"
-						v-shortkey="['a']">
-						<span class="icon is-small"><icon icon="users"/></span>
-						{{ $t('task.detail.actions.assign') }}
-					</x-button>
-					<x-button
-						@click="setFieldActive('labels')"
-						@shortkey="setFieldActive('labels')"
-						type="secondary"
-						v-shortkey="['l']"
-						icon="tags"
-					>
-						{{ $t('task.detail.actions.label') }}
-					</x-button>
-					<x-button
-						@click="setFieldActive('priority')"
-						type="secondary"
-						:icon="['far', 'star']"
-					>
-						{{ $t('task.detail.actions.priority') }}
-					</x-button>
-					<x-button
-						@click="setFieldActive('dueDate')"
-						@shortkey="setFieldActive('dueDate')"
-						type="secondary"
-						v-shortkey="['d']"
-						icon="calendar"
-					>
-						{{ $t('task.detail.actions.dueDate') }}
-					</x-button>
-					<x-button
-						@click="setFieldActive('startDate')"
-						type="secondary"
-						icon="calendar-week"
-					>
-						{{ $t('task.detail.actions.startDate') }}
-					</x-button>
-					<x-button
-						@click="setFieldActive('endDate')"
-						type="secondary"
-						icon="calendar-week"
-					>
-						{{ $t('task.detail.actions.endDate') }}
-					</x-button>
-					<x-button
-						@click="setFieldActive('reminders')"
-						type="secondary"
-						icon="history"
-					>
-						{{ $t('task.detail.actions.reminders') }}
-					</x-button>
-					<x-button
-						@click="setFieldActive('repeatAfter')"
-						type="secondary"
-						:icon="['far', 'clock']"
-					>
-						{{ $t('task.detail.actions.repeatAfter') }}
-					</x-button>
-					<x-button
-						@click="setFieldActive('percentDone')"
-						type="secondary"
-						icon="percent"
-					>
-						{{ $t('task.detail.actions.percentDone') }}
-					</x-button>
-					<x-button
-						@click="setFieldActive('attachments')"
-						@shortkey="setFieldActive('attachments')"
-						type="secondary"
-						v-shortkey="['f']"
-						icon="paperclip"
-					>
-						{{ $t('task.detail.actions.attachments') }}
-					</x-button>
-					<x-button
-						@click="setFieldActive('relatedTasks')"
-						@shortkey="setFieldActive('relatedTasks')"
-						type="secondary"
-						v-shortkey="['r']"
-						icon="tasks"
-					>
-						{{ $t('task.detail.actions.relatedTasks') }}
-					</x-button>
-					<x-button
-						@click="setFieldActive('moveList')"
-						type="secondary"
-						icon="list"
-					>
-						{{ $t('task.detail.actions.moveList') }}
-					</x-button>
-					<x-button
-						@click="setFieldActive('color')"
-						type="secondary"
-						icon="fill-drip"
-					>
-						{{ $t('task.detail.actions.color') }}
-					</x-button>
-					<x-button
-						@click="toggleFavorite"
-						type="secondary"
-						:icon="task.isFavorite ? 'star' : ['far', 'star']"
-					>
-						{{ task.isFavorite ? $t('task.detail.actions.unfavorite') : $t('task.detail.actions.favorite') }}
-					</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>
+				<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"
+							@click="toggleTaskDone()"
+							class="is-outlined has-no-border"
+							icon="check-double"
+							type="secondary"
+						>
+							{{ task.done ? $t('task.detail.undone') : $t('task.detail.done') }}
+						</x-button>
+						<task-subscription
+							entity="task"
+							:entity-id="task.id"
+							:subscription="task.subscription"
+							@change="sub => task.subscription = sub"
+						/>
+						<x-button
+							@click="setFieldActive('assignees')"
+							@shortkey="setFieldActive('assignees')"
+							type="secondary"
+							v-shortkey="['a']">
+							<span class="icon is-small"><icon icon="users"/></span>
+							{{ $t('task.detail.actions.assign') }}
+						</x-button>
+						<x-button
+							@click="setFieldActive('labels')"
+							@shortkey="setFieldActive('labels')"
+							type="secondary"
+							v-shortkey="['l']"
+							icon="tags"
+						>
+							{{ $t('task.detail.actions.label') }}
+						</x-button>
+						<x-button
+							@click="setFieldActive('priority')"
+							type="secondary"
+							:icon="['far', 'star']"
+						>
+							{{ $t('task.detail.actions.priority') }}
+						</x-button>
+						<x-button
+							@click="setFieldActive('dueDate')"
+							@shortkey="setFieldActive('dueDate')"
+							type="secondary"
+							v-shortkey="['d']"
+							icon="calendar"
+						>
+							{{ $t('task.detail.actions.dueDate') }}
+						</x-button>
+						<x-button
+							@click="setFieldActive('startDate')"
+							type="secondary"
+							icon="calendar-week"
+						>
+							{{ $t('task.detail.actions.startDate') }}
+						</x-button>
+						<x-button
+							@click="setFieldActive('endDate')"
+							type="secondary"
+							icon="calendar-week"
+						>
+							{{ $t('task.detail.actions.endDate') }}
+						</x-button>
+						<x-button
+							@click="setFieldActive('reminders')"
+							type="secondary"
+							icon="history"
+						>
+							{{ $t('task.detail.actions.reminders') }}
+						</x-button>
+						<x-button
+							@click="setFieldActive('repeatAfter')"
+							type="secondary"
+							:icon="['far', 'clock']"
+						>
+							{{ $t('task.detail.actions.repeatAfter') }}
+						</x-button>
+						<x-button
+							@click="setFieldActive('percentDone')"
+							type="secondary"
+							icon="percent"
+						>
+							{{ $t('task.detail.actions.percentDone') }}
+						</x-button>
+						<x-button
+							@click="setFieldActive('attachments')"
+							@shortkey="setFieldActive('attachments')"
+							type="secondary"
+							v-shortkey="['f']"
+							icon="paperclip"
+						>
+							{{ $t('task.detail.actions.attachments') }}
+						</x-button>
+						<x-button
+							@click="setFieldActive('relatedTasks')"
+							@shortkey="setFieldActive('relatedTasks')"
+							type="secondary"
+							v-shortkey="['r']"
+							icon="tasks"
+						>
+							{{ $t('task.detail.actions.relatedTasks') }}
+						</x-button>
+						<x-button
+							@click="setFieldActive('moveList')"
+							type="secondary"
+							icon="list"
+						>
+							{{ $t('task.detail.actions.moveList') }}
+						</x-button>
+						<x-button
+							@click="setFieldActive('color')"
+							type="secondary"
+							icon="fill-drip"
+						>
+							{{ $t('task.detail.actions.color') }}
+						</x-button>
+						<x-button
+							@click="toggleFavorite"
+							type="secondary"
+							:icon="task.isFavorite ? 'star' : ['far', 'star']"
+						>
+							{{
+								task.isFavorite ? $t('task.detail.actions.unfavorite') : $t('task.detail.actions.favorite')
+							}}
+						</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] -->
 					<p class="created">
@@ -410,10 +418,10 @@
 				v-if="showDeleteModal"
 			>
 				<template #header><span>{{ $t('task.detail.delete.header') }}</span></template>
-		
+
 				<template #text>
 					<p>{{ $t('task.detail.delete.text1') }}<br/>
-					{{ $t('task.detail.delete.text2') }}</p>
+						{{ $t('task.detail.delete.text2') }}</p>
 				</template>
 			</modal>
 		</transition>
@@ -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) {
diff --git a/src/views/tasks/TaskDetailViewModal.vue b/src/views/tasks/TaskDetailViewModal.vue
index d79339f94..6deb7421f 100644
--- a/src/views/tasks/TaskDetailViewModal.vue
+++ b/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>
\ No newline at end of file