From 8e6e52bf02c66a8159223b2c7281ec726bc04e1f Mon Sep 17 00:00:00 2001
From: dpschen <dpschen@noreply.kolaente.de>
Date: Sat, 13 Nov 2021 14:13:56 +0000
Subject: [PATCH] feat: wrap edit-task with card (#948)

Co-authored-by: Dominik Pschenitschni <mail@celement.de>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/948
Reviewed-by: konrad <k@knt.li>
Co-authored-by: dpschen <dpschen@noreply.kolaente.de>
Co-committed-by: dpschen <dpschen@noreply.kolaente.de>
---
 src/components/misc/card.vue                  | 10 +++-
 src/components/misc/create-edit.vue           |  1 -
 src/components/misc/keyboard-shortcuts.vue    |  2 +-
 src/components/tasks/edit-task.vue            |  7 +++
 src/components/tasks/gantt-component.vue      |  9 ++--
 .../tasks/partials/quick-add-magic.vue        |  2 +-
 src/views/About.vue                           | 47 +++++++++----------
 src/views/filters/CreateSavedFilter.vue       |  2 +-
 src/views/list/views/List.vue                 | 12 +++--
 9 files changed, 51 insertions(+), 41 deletions(-)

diff --git a/src/components/misc/card.vue b/src/components/misc/card.vue
index 8db04b3a6..a9632f7bd 100644
--- a/src/components/misc/card.vue
+++ b/src/components/misc/card.vue
@@ -4,7 +4,13 @@
 			<p class="card-header-title">
 				{{ title }}
 			</p>
-			<a @click="$emit('close')" class="card-header-icon" v-if="hasClose">
+			<a
+				v-if="hasClose"
+				class="card-header-icon"
+				:aria-label="$t('misc.close')"
+				@click="$emit('close')"
+				v-tooltip="$t('misc.close')"
+			>	
 				<span class="icon">
 					<icon :icon="closeIcon"/>
 				</span>
@@ -36,7 +42,7 @@ export default {
 		},
 		closeIcon: {
 			type: String,
-			default: 'angle-right',
+			default: 'times',
 		},
 		shadow: {
 			type: Boolean,
diff --git a/src/components/misc/create-edit.vue b/src/components/misc/create-edit.vue
index 11966e6d4..4e802fd20 100644
--- a/src/components/misc/create-edit.vue
+++ b/src/components/misc/create-edit.vue
@@ -6,7 +6,6 @@
 			:padding="false"
 			class="has-text-left has-overflow"
 			:has-close="true"
-			close-icon="times"
 			@close="$router.back()"
 			:loading="loading"
 		>
diff --git a/src/components/misc/keyboard-shortcuts.vue b/src/components/misc/keyboard-shortcuts.vue
index 10ac3c0cd..aa3afa63f 100644
--- a/src/components/misc/keyboard-shortcuts.vue
+++ b/src/components/misc/keyboard-shortcuts.vue
@@ -1,6 +1,6 @@
 <template>
 	<modal @close="close()">
-				<card class="has-background-white has-no-shadow" :title="$t('keyboardShortcuts.title')">
+				<card class="has-no-shadow" :title="$t('keyboardShortcuts.title')">
 					<div class="message is-primary">
 						<div class="message-body">
 							{{ $t('keyboardShortcuts.allPages') }}
diff --git a/src/components/tasks/edit-task.vue b/src/components/tasks/edit-task.vue
index d032fc94c..4cb8d8574 100644
--- a/src/components/tasks/edit-task.vue
+++ b/src/components/tasks/edit-task.vue
@@ -1,4 +1,10 @@
 <template>
+	<card
+		class="taskedit"
+		:title="$t('list.list.editTask')"
+		@close="$emit('close')"
+		:has-close="true"
+	>
 	<form @submit.prevent="editTaskSubmit()">
 		<div class="field">
 			<label class="label" for="tasktext">{{ $t('task.attributes.title') }}</label>
@@ -66,6 +72,7 @@
 			{{ $t('task.openDetail') }}
 		</router-link>
 	</form>
+	</card>
 </template>
 
 <script>
diff --git a/src/components/tasks/gantt-component.vue b/src/components/tasks/gantt-component.vue
index 874977dc7..ac1df28d8 100644
--- a/src/components/tasks/gantt-component.vue
+++ b/src/components/tasks/gantt-component.vue
@@ -167,15 +167,13 @@
 			</x-button>
 		</form>
 		<transition name="fade">
-			<card
+			<edit-task 
 				v-if="isTaskEdit"
 				class="taskedit"
 				:title="$t('list.list.editTask')"
 				@close="() => {isTaskEdit = false;taskToEdit = null}"
-				:has-close="true"
-			>
-				<edit-task :task="taskToEdit"/>
-			</card>
+				:task="taskToEdit"
+			/>
 		</transition>
 	</div>
 </template>
@@ -612,7 +610,6 @@ $gantt-vertical-border-color: $grey-100;
 
 	.taskedit {
 		position: fixed;
-		min-height: 0;
 		top: 10vh;
 		right: 10vw;
 		z-index: 5;
diff --git a/src/components/tasks/partials/quick-add-magic.vue b/src/components/tasks/partials/quick-add-magic.vue
index 3bf463039..c28c6a7c8 100644
--- a/src/components/tasks/partials/quick-add-magic.vue
+++ b/src/components/tasks/partials/quick-add-magic.vue
@@ -11,7 +11,7 @@
 			:overflow="true"
 			variant="hint-modal"
 		>
-			<card class="has-background-white has-no-shadow" :title="$t('task.quickAddMagic.title')">
+			<card class="has-no-shadow" :title="$t('task.quickAddMagic.title')">
 				<p>{{ $t('task.quickAddMagic.intro') }}</p>
 
 				<h3>{{ $t('task.attributes.labels') }}</h3>
diff --git a/src/views/About.vue b/src/views/About.vue
index 5ca41da34..769eaa3e0 100644
--- a/src/views/About.vue
+++ b/src/views/About.vue
@@ -5,30 +5,29 @@
 		variant="hint-modal"
 	>
 		<card
-						class="has-background-white has-no-shadow"
-						:title="$t('about.title')"
-						:has-close="true"
-						close-icon="times"
-						@close="$router.back()"
-						:padding="false"
-					>
-						<div class="p-4">
-							<p>
-								{{ $t('about.frontendVersion', {version: this.frontendVersion}) }}
-							</p>
-							<p>
-								{{ $t('about.apiVersion', {version: this.apiVersion}) }}
-							</p>
-						</div>
-						<footer class="modal-card-foot is-flex is-justify-content-flex-end">
-							<x-button
-								type="secondary"
-								@click.prevent.stop="$router.back()"
-							>
-								{{ $t('misc.close') }}
-							</x-button>
-						</footer>
-					</card>
+			class="has-no-shadow"
+			:title="$t('about.title')"
+			:has-close="true"
+			@close="$router.back()"
+			:padding="false"
+		>
+			<div class="p-4">
+				<p>
+					{{ $t('about.frontendVersion', {version: this.frontendVersion}) }}
+				</p>
+				<p>
+					{{ $t('about.apiVersion', {version: this.apiVersion}) }}
+				</p>
+			</div>
+			<footer class="modal-card-foot is-flex is-justify-content-flex-end">
+				<x-button
+					type="secondary"
+					@click.prevent.stop="$router.back()"
+				>
+					{{ $t('misc.close') }}
+				</x-button>
+			</footer>
+		</card>
 	</modal>
 
 </template>
diff --git a/src/views/filters/CreateSavedFilter.vue b/src/views/filters/CreateSavedFilter.vue
index 27523f1f3..43296fe28 100644
--- a/src/views/filters/CreateSavedFilter.vue
+++ b/src/views/filters/CreateSavedFilter.vue
@@ -3,7 +3,7 @@
 		@close="$router.back()"
 		variant="hint-modal"
 	>
-				<card class="has-background-white has-no-shadow" :title="$t('filters.create.title')">
+				<card class="has-no-shadow" :title="$t('filters.create.title')">
 					<p>
 						{{ $t('filters.create.description') }}
 					</p>
diff --git a/src/views/list/views/List.vue b/src/views/list/views/List.vue
index 11ce974f5..04e0dc6f6 100644
--- a/src/views/list/views/List.vue
+++ b/src/views/list/views/List.vue
@@ -116,13 +116,14 @@
 						</template>
 					</draggable>
 				</div>
-				<card
+				<edit-task 
 					v-if="isTaskEdit"
-					class="taskedit mt-0" :title="$t('list.list.editTask')" :has-close="true"
+					class="taskedit mt-0"
+					:title="$t('list.list.editTask')"
 					@close="() => isTaskEdit = false"
-					:shadow="false">
-					<edit-task :task="taskEditTask"/>
-				</card>
+					:shadow="false"
+					:task="taskEditTask"
+				/>
 			</div>
 
 			<Pagination 
@@ -344,6 +345,7 @@ export default {
 		width: 33%;
 		margin-right: 1rem;
 		margin-left: .5rem;
+		min-height: calc(100% - 1rem);
 
 		@media screen and (max-width: $tablet) {
 			width: 100%;