From 70f48eaaca00a7b1bdceaeb051b391d69418bdce Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Tue, 6 Feb 2024 18:29:17 +0100
Subject: [PATCH] fix(task): make sure the drag handle is shown as intended

Due to a previous refactoring, the drag handle was always shown instead of only on hover. The css class was moved out of the task component, but its styles weren't

Related to https://kolaente.dev/vikunja/frontend/issues/3934
---
 .../home/ProjectsNavigationItem.vue           |  2 +-
 .../tasks/partials/singleTaskInProject.vue    | 15 +++------------
 src/views/project/ProjectList.vue             | 19 +++++++++++++++++++
 3 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/src/components/home/ProjectsNavigationItem.vue b/src/components/home/ProjectsNavigationItem.vue
index 4a32ad322..a2ae6ebe3 100644
--- a/src/components/home/ProjectsNavigationItem.vue
+++ b/src/components/home/ProjectsNavigationItem.vue
@@ -30,7 +30,7 @@
 					</span>
 					<span
 						v-if="project.id > 0"
-						class="icon menu-item-icon handle lines-handle"
+						class="icon menu-item-icon handle"
 						:class="{'has-color-bubble': project.hexColor !== ''}"
 					>
 						<icon icon="grip-lines"/>
diff --git a/src/components/tasks/partials/singleTaskInProject.vue b/src/components/tasks/partials/singleTaskInProject.vue
index 0d8ad4d6f..e300fee96 100644
--- a/src/components/tasks/partials/singleTaskInProject.vue
+++ b/src/components/tasks/partials/singleTaskInProject.vue
@@ -2,7 +2,7 @@
 	<div>
 		<div
 			:class="{'is-loading': taskService.loading}"
-			class="task loader-container"
+			class="task loader-container single-task"
 			@mouseup.stop.self="openTaskDetail"
 			@mousedown.stop.self="focusTaskLink"
 			ref="taskContainerRef"
@@ -435,21 +435,12 @@ function focusTaskLink() {
 		}
 	}
 
-	.handle {
-		opacity: 1;
-		transition: opacity $transition;
-		margin-right: .25rem;
-		cursor: grab;
-	}
-
 	@media(hover: hover) and (pointer: fine) {
-		& .favorite,
-		& .handle {
+		& .favorite {
 			opacity: 0;
 		}
 
-		&:hover .favorite,
-		&:hover .handle {
+		&:hover .favorite {
 			opacity: 1;
 		}
 	}
diff --git a/src/views/project/ProjectList.vue b/src/views/project/ProjectList.vue
index 90f54b934..e5c0aefa2 100644
--- a/src/views/project/ProjectList.vue
+++ b/src/views/project/ProjectList.vue
@@ -333,4 +333,23 @@ function prepareFiltersAndLoadTasks() {
 .control.has-icons-right .icon {
 	transition: all $transition;
 }
+
+:deep(.single-task) {
+	.handle {
+		opacity: 1;
+		transition: opacity $transition;
+		margin-right: .25rem;
+		cursor: grab;
+	}
+
+	@media(hover: hover) and (pointer: fine) {
+		& .handle {
+			opacity: 0;
+		}
+
+		&:hover .handle {
+			opacity: 1;
+		}
+	}
+}
 </style>
\ No newline at end of file