From 526eee361ff495114ac9abcf8f5ca83d2b470d85 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Thu, 14 Jan 2021 22:06:22 +0100
Subject: [PATCH] Show label colors when searching for labels

---
 src/components/input/multiselect.vue         |  6 ++++--
 src/components/tasks/partials/editLabels.vue | 13 +++++++++++++
 src/styles/components/base/multiselect.scss  |  6 ++++--
 3 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/src/components/input/multiselect.vue b/src/components/input/multiselect.vue
index 8487fb901..a64e758df 100644
--- a/src/components/input/multiselect.vue
+++ b/src/components/input/multiselect.vue
@@ -44,7 +44,9 @@
 				>
 					<span>
 						<slot name="searchResult" :option="query">
-							{{ query }}
+							<span class="search-result">
+								{{ query }}
+							</span>
 						</slot>
 					</span>
 					<span class="hint-text">
@@ -63,7 +65,7 @@
 				>
 					<span>
 						<slot name="searchResult" :option="data">
-							{{ label !== '' ? data[label] : data }}
+							<span class="search-result">{{ label !== '' ? data[label] : data }}</span>
 						</slot>
 					</span>
 					<span class="hint-text">
diff --git a/src/components/tasks/partials/editLabels.vue b/src/components/tasks/partials/editLabels.vue
index 919dd9c2a..c1c9b75c6 100644
--- a/src/components/tasks/partials/editLabels.vue
+++ b/src/components/tasks/partials/editLabels.vue
@@ -20,6 +20,19 @@
 				<a @click="removeLabel(props.item)" class="delete is-small"></a>
 			</span>
 		</template>
+		<template v-slot:searchResult="props">
+			<span
+				v-if="typeof props.option === 'string'"
+				class="tag ml-2">
+				<span>{{ props.option }}</span>
+			</span>
+			<span
+				v-else
+				:style="{'background': props.option.hexColor, 'color': props.option.textColor}"
+				class="tag ml-2">
+				<span>{{ props.option.title }}</span>
+			</span>
+		</template>
 	</multiselect>
 </template>
 
diff --git a/src/styles/components/base/multiselect.scss b/src/styles/components/base/multiselect.scss
index 16a0496e2..f8f40e50b 100644
--- a/src/styles/components/base/multiselect.scss
+++ b/src/styles/components/base/multiselect.scss
@@ -80,23 +80,25 @@
 			text-transform: none;
 			font-family: $family-sans-serif;
 			font-weight: normal;
+			padding: 0;
 
 			display: flex;
 			justify-content: space-between;
 			align-items: center;
 			overflow: hidden;
 
-			span:first-child {
+			.search-result {
 				white-space: nowrap;
 				text-overflow: ellipsis;
 				overflow: hidden;
+				padding: .5rem 1rem;
 			}
 
 			.hint-text {
 				font-size: .75rem;
 				color: transparent;
 				transition: color $transition;
-				padding-left: .5rem;
+				padding: 0 .5rem;
 			}
 
 			&:focus, &:hover {