From 4fcbd5a575d4b0364ca68aca64ccf3488a211e13 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 06:46:17 +0100
Subject: [PATCH 1/2] Add ListItemIcon component
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
---
 src/components/ListItemIcon/ListItemIcon.vue | 242 +++++++++++++++++++
 src/components/ListItemIcon/index.js         |  25 ++
 src/components/index.js                      |  10 +-
 3 files changed, 273 insertions(+), 4 deletions(-)
 create mode 100644 src/components/ListItemIcon/ListItemIcon.vue
 create mode 100644 src/components/ListItemIcon/index.js

diff --git a/src/components/ListItemIcon/ListItemIcon.vue b/src/components/ListItemIcon/ListItemIcon.vue
new file mode 100644
index 0000000000..767cb56026
--- /dev/null
+++ b/src/components/ListItemIcon/ListItemIcon.vue
@@ -0,0 +1,242 @@
+<!--
+  - @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>
+## This is used to display a avatar-title/subtitle + icon layout
+It might be used for list rendering or within the multiselect for example
+
+> **Note:** Any binding will be forwarded on the Avatar component root
+
+```vue
+<ListItemIcon title="User 1" />
+```
+```vue
+<ListItemIcon title="User 1" :size="44" icon="icon-user" />
+```
+
+### With icon
+```vue
+<ListItemIcon title="Group 1" subtitle="13 members" icon="icon-group" :is-no-user="true" />
+```
+
+### Searching
+```vue
+<ListItemIcon title="Test user 1" subtitle="callmetest@domain.com" search="test" />
+<ListItemIcon title="Testing admin" subtitle="testme@example.com" search="test" />
+<ListItemIcon title="Test group 2" subtitle="loremipsum@domain.com" icon="icon-group" :is-no-user="true" search="test" />
+```
+
+### With actions
+```vue
+<ListItemIcon title="Test user 1" subtitle="callmetest@domain.com">
+	<Actions>
+		<ActionButton icon="icon-edit" @click="alert('Edit')">Edit</ActionButton>
+		<ActionButton icon="icon-delete" @click="alert('Delete')">Delete</ActionButton>
+	</Actions>
+</ListItemIcon>
+```
+</docs>
+
+<template>
+	<span class="option" :style="cssVars">
+		<Avatar
+			v-bind="$attrs"
+			:disable-menu="true"
+			:disable-tooltip="true"
+			:display-name="displayName || title"
+			:is-no-user="isNoUser"
+			:size="size"
+			class="option__avatar" />
+		<div class="option__details">
+			<Highlight
+				class="option__lineone"
+				:text="title"
+				:search="search" />
+			<Highlight
+				v-if="subtitle !== ''"
+				class="option__linetwo"
+				:text="subtitle"
+				:search="search" />
+			<span v-else-if="hasStatus">
+				<span>{{ userStatus.icon }}</span>
+				<span>{{ userStatus.message }}</span>
+			</span>
+		</div>
+
+		<!-- @slot use this slot to add a custom icon or actions -->
+		<slot />
+		<span v-if="hasIcon && !hasSlot" class="icon option__icon" :class="icon" />
+	</span>
+</template>
+
+<script>
+import Avatar from '../Avatar'
+import Highlight from '../Highlight'
+import { userStatus } from '../../mixins'
+
+const margin = 6
+
+export default {
+	name: 'ListItemIcon',
+
+	components: {
+		Avatar,
+		Highlight,
+	},
+	mixins: [userStatus],
+
+	props: {
+		/**
+		 * Default first line text
+		 */
+		title: {
+			type: String,
+			required: true,
+		},
+
+		/**
+		 * Secondary optional line
+		 */
+		subtitle: {
+			type: String,
+			default: '',
+		},
+
+		/**
+		 * Icon class to be displayed at the end of the component
+		 */
+		icon: {
+			type: String,
+			default: '',
+		},
+
+		/**
+		 * Search within the highlight of title/subtitle
+		 */
+		search: {
+			type: String,
+			default: '',
+		},
+
+		/**
+		 * Set a size in px for the height
+		 */
+		size: {
+			type: Number,
+			default: 32,
+		},
+
+		/**
+		 * See the [Avatar](#Avatar) displayName prop
+		 * Fallback to title
+		 */
+		displayName: {
+			type: String,
+			default: null,
+		},
+		/**
+		 * See the [Avatar](#Avatar) isNoUser prop
+		 * Enable/disable the UserStatus fetching
+		 */
+		isNoUser: {
+			type: Boolean,
+			default: false,
+		},
+	},
+
+	data() {
+		return {
+			margin,
+		}
+	},
+
+	computed: {
+		hasIcon() {
+			return this.icon !== ''
+		},
+
+		hasSlot() {
+			return !!this.$slots.default
+		},
+		cssVars() {
+			return {
+				'--height': this.size + 2 * this.margin + 'px',
+				'--margin': this.margin + 'px',
+			}
+		},
+	},
+
+	beforeMount() {
+		// If we don't have a subtitle and if this is a user
+		if (!this.isNoUser && !this.subtitle) {
+			this.fetchUserStatus(this.user)
+		}
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.option {
+	display: flex;
+	align-items: center;
+	width: 100%;
+	height: var(--height);
+
+	&__avatar {
+		margin-right: var(--margin);
+	}
+
+	&__details {
+		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;
+		line-height: 1.1em;
+		strong {
+			font-weight: bold;
+		}
+	}
+
+	&__icon {
+		flex: 0 0 $clickable-area;
+		width: $clickable-area;
+		height: $clickable-area;
+		opacity: $opacity_disabled;
+		background-position: center;
+		background-size: 16px;
+	}
+}
+
+</style>
diff --git a/src/components/ListItemIcon/index.js b/src/components/ListItemIcon/index.js
new file mode 100644
index 0000000000..cd6fb144be
--- /dev/null
+++ b/src/components/ListItemIcon/index.js
@@ -0,0 +1,25 @@
+/**
+ * @copyright Copyright (c) 2020 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/>.
+ *
+ */
+
+import ListItemIcon from './ListItemIcon'
+
+export default ListItemIcon
diff --git a/src/components/index.js b/src/components/index.js
index a76e1391de..c44ff3c018 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -42,6 +42,8 @@ import AppNavigationItem from './AppNavigationItem'
 import AppNavigationNew from './AppNavigationNew'
 import AppNavigationSettings from './AppNavigationSettings'
 import AppNavigationSpacer from './AppNavigationSpacer'
+import AppSettingsDialog from './AppSettingsDialog'
+import AppSettingsSection from './AppSettingsSection'
 import AppSidebar from './AppSidebar'
 import AppSidebarTab from './AppSidebarTab'
 import Avatar from './Avatar'
@@ -51,6 +53,7 @@ import ColorPicker from './ColorPicker'
 import Content from './Content'
 import DatetimePicker from './DatetimePicker'
 import EmptyContent from './EmptyContent'
+import ListItemIcon from './ListItemIcon'
 import Modal from './Modal'
 import Multiselect from './Multiselect'
 import MultiselectTags from './MultiselectTags'
@@ -59,8 +62,6 @@ import PopoverMenu from './PopoverMenu'
 import RichContenteditable from './RichContenteditable'
 import SettingsSection from './SettingsSection'
 import UserBubble from './UserBubble'
-import AppSettingsDialog from './AppSettingsDialog'
-import AppSettingsSection from './AppSettingsSection'
 
 export {
 	ActionButton,
@@ -84,6 +85,8 @@ export {
 	AppNavigationNew,
 	AppNavigationSettings,
 	AppNavigationSpacer,
+	AppSettingsDialog,
+	AppSettingsSection,
 	AppSidebar,
 	AppSidebarTab,
 	Avatar,
@@ -93,6 +96,7 @@ export {
 	Content,
 	DatetimePicker,
 	EmptyContent,
+	ListItemIcon,
 	Modal,
 	Multiselect,
 	MultiselectTags,
@@ -101,6 +105,4 @@ export {
 	RichContenteditable,
 	SettingsSection,
 	UserBubble,
-	AppSettingsDialog,
-	AppSettingsSection,
 }

From dc9de62935cce7c5aef3318a4063ee8e82bfab3a 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 2/2] 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>
---
 src/components/ListItemIcon/ListItemIcon.vue  |  30 ++-
 .../Multiselect/AvatarSelectOption.vue        | 205 ------------------
 src/components/Multiselect/Multiselect.vue    |  50 ++++-
 3 files changed, 66 insertions(+), 219 deletions(-)
 delete mode 100644 src/components/Multiselect/AvatarSelectOption.vue

diff --git a/src/components/ListItemIcon/ListItemIcon.vue b/src/components/ListItemIcon/ListItemIcon.vue
index 767cb56026..69ac73cc5f 100644
--- a/src/components/ListItemIcon/ListItemIcon.vue
+++ b/src/components/ListItemIcon/ListItemIcon.vue
@@ -27,9 +27,10 @@ It might be used for list rendering or within the multiselect for example
 
 ```vue
 <ListItemIcon title="User 1" />
+<ListItemIcon title="User 1" subtitle="Hidden subtitle because size is too small" :avatar-size="24" />
 ```
 ```vue
-<ListItemIcon title="User 1" :size="44" icon="icon-user" />
+<ListItemIcon title="User 1" :avatar-size="44" icon="icon-user" />
 ```
 
 ### With icon
@@ -63,7 +64,7 @@ It might be used for list rendering or within the multiselect for example
 			:disable-tooltip="true"
 			:display-name="displayName || title"
 			:is-no-user="isNoUser"
-			:size="size"
+			:size="avatarSize"
 			class="option__avatar" />
 		<div class="option__details">
 			<Highlight
@@ -71,7 +72,7 @@ It might be used for list rendering or within the multiselect for example
 				:text="title"
 				:search="search" />
 			<Highlight
-				v-if="subtitle !== ''"
+				v-if="isValidSubtitle && isSizeBigEnough"
 				class="option__linetwo"
 				:text="subtitle"
 				:search="search" />
@@ -92,7 +93,9 @@ import Avatar from '../Avatar'
 import Highlight from '../Highlight'
 import { userStatus } from '../../mixins'
 
-const margin = 6
+// global margin, ^2 ratio
+const margin = 8
+const defaultSize = 32
 
 export default {
 	name: 'ListItemIcon',
@@ -114,6 +117,7 @@ export default {
 
 		/**
 		 * Secondary optional line
+		 * Only visible on size of 32 and above
 		 */
 		subtitle: {
 			type: String,
@@ -137,11 +141,12 @@ export default {
 		},
 
 		/**
-		 * Set a size in px for the height
+		 * Set a size in px that will define the avatar height/width
+		 * and therefore, the height of the component
 		 */
-		size: {
+		avatarSize: {
 			type: Number,
-			default: 32,
+			default: defaultSize,
 		},
 
 		/**
@@ -172,13 +177,20 @@ export default {
 		hasIcon() {
 			return this.icon !== ''
 		},
-
 		hasSlot() {
 			return !!this.$slots.default
 		},
+
+		isValidSubtitle() {
+			return this.subtitle?.trim?.() !== ''
+		},
+		isSizeBigEnough() {
+			return this.avatarSize >= defaultSize
+		},
+
 		cssVars() {
 			return {
-				'--height': this.size + 2 * this.margin + 'px',
+				'--height': this.avatarSize + 2 * this.margin + 'px',
 				'--margin': this.margin + 'px',
 			}
 		},
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..c02c906860 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: {