From 9cb2087a4c24a9557123a9c2e6ac50a3677ee9b6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?=
 <skjnldsv@protonmail.com>
Date: Wed, 18 Nov 2020 07:19:36 +0100
Subject: [PATCH] Use ListItemIcon for Multiselect
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
---
 .../Multiselect/AvatarSelectOption.vue        | 205 ------------------
 src/components/Multiselect/Multiselect.vue    |  50 ++++-
 2 files changed, 45 insertions(+), 210 deletions(-)
 delete mode 100644 src/components/Multiselect/AvatarSelectOption.vue

diff --git a/src/components/Multiselect/AvatarSelectOption.vue b/src/components/Multiselect/AvatarSelectOption.vue
deleted file mode 100644
index a7ae014c2c..0000000000
--- a/src/components/Multiselect/AvatarSelectOption.vue
+++ /dev/null
@@ -1,205 +0,0 @@
-<!--
-  - @copyright Copyright (c) 2018 John Molakvoæ <skjnldsv@protonmail.com>
-  -
-  - @author John Molakvoæ <skjnldsv@protonmail.com>
-  -
-  - @license GNU AGPL version 3 or any later version
-  -
-  - This program is free software: you can redistribute it and/or modify
-  - it under the terms of the GNU Affero General Public License as
-  - published by the Free Software Foundation, either version 3 of the
-  - License, or (at your option) any later version.
-  -
-  - This program is distributed in the hope that it will be useful,
-  - but WITHOUT ANY WARRANTY; without even the implied warranty of
-  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-  - GNU Affero General Public License for more details.
-  -
-  - You should have received a copy of the GNU Affero General Public License
-  - along with this program. If not, see <http://www.gnu.org/licenses/>.
-  -
-  -->
-<docs>
-### User layout
-By specifying `:user-select="true"`, you can benefit from a fully formatted layout.
-
-> **Note:** Any extra binding from the object will be added as attribute (`$attrs`) on the AvatarSelectOption root
-
-```vue
-<template>
-	<Multiselect v-model="value" :options="formatedOptions"
-		label="displayName" track-by="user"
-		:user-select="true"
-		style="width: 250px" />
-</template>
-
-<script>
-import Multiselect from '../index'
-export default {
-	data() {
-		return {
-			value: null,
-			options: ['admin', 'user1', 'user2', 'guest', 'group1']
-		}
-	},
-
-	computed: {
-		formatedOptions() {
-			return this.options.map(item => {
-				return {
-					user: item,
-					displayName: item,
-					desc: `This is the ${item.startsWith('group') ? 'group' : 'user'} ${item}`,
-					icon: item.startsWith('group') ? 'icon-group' : 'icon-user',
-					isNoUser: item.startsWith('group')
-				}
-			})
-		}
-	}
-}
-</script>
-```
-</docs>
-
-<template>
-	<span class="option">
-		<Avatar :display-name="displayName"
-			:user="user"
-			:is-no-user="isNoUser"
-			:disable-menu="true"
-			:disable-tooltip="true"
-			class="option__avatar" />
-		<div class="option__desc">
-			<Highlight
-				class="option__desc--lineone"
-				:text="displayName"
-				:search="search" />
-			<Highlight
-				v-if="desc !== ''"
-				class="option__desc--linetwo"
-				:text="desc"
-				:search="search" />
-			<span v-else-if="hasStatus">
-				<span>{{ userStatus.icon }}</span>
-				<span>{{ userStatus.message }}</span>
-			</span>
-		</div>
-		<span v-if="icon !== ''" class="icon option__icon" :class="icon" />
-	</span>
-</template>
-
-<script>
-import Avatar from '../Avatar'
-import Highlight from '../Highlight'
-import { userStatus } from '../../mixins'
-
-export default {
-	name: 'AvatarSelectOption',
-	components: {
-		Avatar,
-		Highlight,
-	},
-	mixins: [userStatus],
-	props: {
-		/**
-		 * Secondary optional line
-		 */
-		desc: {
-			type: String,
-			default: '',
-		},
-		/**
-		 * Default text
-		 */
-		displayName: {
-			type: String,
-			required: true,
-		},
-		/**
-		 * Icon class to be displayed at the end of the component
-		 */
-		icon: {
-			type: String,
-			default: '',
-		},
-		/**
-		 * See the [Avatar](#Avatar) user prop
-		 */
-		user: {
-			type: String,
-			default: '',
-		},
-		/**
-		 * The status of the user
-		 */
-		status: {
-			type: Object,
-			default: null,
-		},
-		/**
-		 * See the [Avatar](#Avatar) isNoUser prop
-		 */
-		isNoUser: {
-			type: Boolean,
-			default: false,
-		},
-
-		search: {
-			type: String,
-			default: '',
-		},
-	},
-	beforeMount() {
-		if (!this.isNoUser) {
-			this.fetchUserStatus(this.user)
-		}
-	},
-}
-</script>
-
-<style lang="scss" scoped>
-.option {
-	display: flex;
-	align-items: center;
-	width: 100%;
-	height: 32px;
-	&__avatar {
-		flex: 0 0 32px;
-		width: 32px;
-		height: 32px;
-		margin-right: 6px;
-	}
-	&__desc {
-		display: flex;
-		flex: 1 1;
-		flex-direction: column;
-		justify-content: center;
-		min-width: 0;
-		&--lineone {
-			color: var(--color-text-light);
-		}
-		&--linetwo {
-			opacity: $opacity_normal;
-		}
-		&--lineone,
-		&--linetwo {
-			overflow: hidden;
-			white-space: nowrap;
-			text-overflow: ellipsis;
-			strong {
-				font-weight: bold;
-			}
-		}
-	}
-	&__icon {
-		flex: 0 0 $clickable-area;
-		width: $clickable-area;
-		height: $clickable-area;
-		margin: -6px;
-		opacity: $opacity_disabled;
-		background-position: center;
-		background-size: 16px;
-	}
-}
-
-</style>
diff --git a/src/components/Multiselect/Multiselect.vue b/src/components/Multiselect/Multiselect.vue
index 8140c725d1..1c07765b87 100644
--- a/src/components/Multiselect/Multiselect.vue
+++ b/src/components/Multiselect/Multiselect.vue
@@ -101,7 +101,45 @@ export default {
 ```
 
 ### User layout
-Please see the [AvatarSelectOption](#AvatarSelectOption) component
+By specifying `:user-select="true"`, you can benefit from a fully formatted layout.
+
+> **Note:** Any extra binding from the object will be added as attribute (`$attrs`) on the ListItemIcon component used here
+
+```vue
+<template>
+	<Multiselect v-model="value" :options="formatedOptions"
+			label="displayName" track-by="user"
+			:user-select="true"
+			style="width: 250px" />
+</template>
+
+<script>
+import Multiselect from '../index'
+export default {
+	data() {
+			return {
+					value: null,
+					options: ['admin', 'user1', 'user2', 'guest', 'group1']
+			}
+	},
+
+	computed: {
+			// Building fake data for the docs
+			formatedOptions() {
+					return this.options.map(item => {
+							return {
+									user: item,
+									displayName: item,
+									subtitle: `This is the ${item.startsWith('group') ? 'group' : 'user'} ${item}`,
+									icon: item.startsWith('group') ? 'icon-group' : 'icon-user',
+									isNoUser: item.startsWith('group')
+							}
+					})
+			}
+	}
+}
+</script>
+```
 </docs>
 
 <template>
@@ -140,8 +178,9 @@ Please see the [AvatarSelectOption](#AvatarSelectOption) component
 		<template #option="scope">
 			<!-- Avatar display select slot override.
 				You CANNOT use this scope, we will replace it by this -->
-			<AvatarSelectOption v-if="userSelect && !$scopedSlots['option']"
+			<ListItemIcon v-if="userSelect && !$scopedSlots['option']"
 				v-bind="scope.option"
+				:title="scope.option[label]"
 				:search="scope.search" />
 
 			<!-- Ellipsis in the middle if no option slot
@@ -176,17 +215,18 @@ Please see the [AvatarSelectOption](#AvatarSelectOption) component
 </template>
 
 <script>
-import AvatarSelectOption from './AvatarSelectOption'
+import VueMultiselect from 'vue-multiselect'
+
 import EllipsisedOption from './EllipsisedOption'
 import l10n from '../../mixins/l10n'
+import ListItemIcon from '../ListItemIcon'
 import Tooltip from '../../directives/Tooltip'
-import VueMultiselect from 'vue-multiselect'
 
 export default {
 	name: 'Multiselect',
 	components: {
-		AvatarSelectOption,
 		EllipsisedOption,
+		ListItemIcon,
 		VueMultiselect,
 	},
 	directives: {