From 80b025fafe82c66eb65a5a7e3eb54681e13d6521 Mon Sep 17 00:00:00 2001
From: Jakob <jakob.roehrl@web.de>
Date: Tue, 3 Sep 2019 15:03:25 +0200
Subject: [PATCH 1/3] avatars now in a good looking way

Signed-off-by: Jakob <jakob.roehrl@web.de>
---
 src/components/cards/AvatarList.vue | 133 ++++++++++++++++++++++++++++
 src/components/cards/CardBadges.vue |   7 +-
 2 files changed, 136 insertions(+), 4 deletions(-)
 create mode 100644 src/components/cards/AvatarList.vue

diff --git a/src/components/cards/AvatarList.vue b/src/components/cards/AvatarList.vue
new file mode 100644
index 000000000..ff6e40b3d
--- /dev/null
+++ b/src/components/cards/AvatarList.vue
@@ -0,0 +1,133 @@
+<!--
+  - @copyright Copyright (c) 2019 Julius Härtl <jus@bitgrid.net>
+  -
+  - @author Julius Härtl <jus@bitgrid.net>
+  -
+  - @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/>.
+  -
+  -->
+
+<template>
+	<div class="session-list">
+		<div class="avatar-list" @click="popoverVisible=!popoverVisible">
+			<div v-if="sessionsPopover.length > 0" class="avatardiv icon-more" />
+			<avatar v-for="session in sessionsVisible" :key="session.id"
+				:url="avatarUrl(session)" :disable-tooltip="true" :size="32" />
+		</div>
+
+		<div v-show="popoverVisible" class="popovermenu menu-right">
+			<popover-menu :menu="sessionsPopover" />
+			<slot />
+		</div>
+	</div>
+</template>
+
+<script>
+import Avatar from 'nextcloud-vue/dist/Components/Avatar'
+import PopoverMenu from 'nextcloud-vue/dist/Components/PopoverMenu'
+import Tooltip from 'nextcloud-vue/dist/Directives/Tooltip'
+export default {
+	name: 'AvatarList',
+	components: {
+		Avatar,
+		PopoverMenu
+	},
+	directives: {
+		tooltip: Tooltip
+	},
+	props: {
+		sessions: {
+			type: Array,
+			default: () => { return {} }
+		}
+	},
+	data() {
+		return {
+			popoverVisible: false
+		}
+	},
+	computed: {
+		sessionsVisible() {
+			return this.sessions.slice(0, 3)
+		},
+		avatarUrl() {
+			return (session) => {
+				const user = session.participant.displayname
+				const size = 32
+				const avatarUrl = OC.generateUrl('/avatar/{user}/{size}',
+					{
+						user: user,
+						size: size
+					})
+				return window.location.protocol + '//' + window.location.host + avatarUrl
+			}
+		},
+		sessionsPopover() {
+			return [
+				...this.sessions.slice(3).map((session) => {
+					return {
+						href: '#',
+						icon: this.avatarUrl(session),
+						text: session.participant.displayname
+					}
+				})
+			]
+		}
+
+	}
+}
+</script>
+
+<style scoped lang="scss">
+	.session-list {
+		position: relative;
+		flex-grow: 1;
+		/deep/ .popovermenu {
+			margin-right: -4px;
+			img {
+				padding: 0;
+				width: 32px !important;
+				height: 32px !important;
+				margin: 6px;
+				border-radius: 50%;
+			}
+		}
+	}
+	.avatar-list {
+		float: right;
+		display: inline-flex;
+		flex-direction: row-reverse;
+		.avatardiv,
+		/deep/ .avatardiv {
+			width: 36px;
+			height: 36px;
+			margin-right: -8px;
+			border: 2px solid var(--color-main-background);
+			background-color: var(--color-main-background) !important;
+			box-sizing: content-box !important;
+			&.icon-more {
+				width: 32px;
+				height: 32px;
+				opacity: .5;
+				background-color: var(--color-background-dark) !important;
+				cursor: pointer;
+			}
+		}
+	}
+	.popovermenu {
+		display: block;
+	}
+</style>
diff --git a/src/components/cards/CardBadges.vue b/src/components/cards/CardBadges.vue
index f65568378..9091eedd7 100644
--- a/src/components/cards/CardBadges.vue
+++ b/src/components/cards/CardBadges.vue
@@ -36,17 +36,16 @@ cardbadges
 
 		<div v-if="card.attachments" class="card-files icon icon-files-dark" />
 
-		<div v-if="card.assignedUsers" class="card-assigned-users">
-			<avatar v-for="user in card.assignedUsers" :key="user.id" :user="user.participant.primaryKey" />
-		</div>
+		<avatar-list :sessions="card.assignedUsers" />
 	</div>
 </template>
 <script>
 import { Avatar } from 'nextcloud-vue'
+import AvatarList from './AvatarList'
 
 export default {
 	name: 'CardBadges',
-	components: { Avatar },
+	components: { Avatar, AvatarList },
 	props: {
 		id: {
 			type: Number,

From cba7525951873a01b68d46437d925f28c119d28f Mon Sep 17 00:00:00 2001
From: Jakob <jakob.roehrl@web.de>
Date: Wed, 4 Sep 2019 07:27:58 +0200
Subject: [PATCH 2/3] rename, position change

Signed-off-by: Jakob <jakob.roehrl@web.de>
---
 src/components/cards/AvatarList.vue | 24 +++++++++++++-----------
 src/components/cards/CardBadges.vue |  6 +++---
 2 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/src/components/cards/AvatarList.vue b/src/components/cards/AvatarList.vue
index ff6e40b3d..01c2f58f6 100644
--- a/src/components/cards/AvatarList.vue
+++ b/src/components/cards/AvatarList.vue
@@ -21,15 +21,15 @@
   -->
 
 <template>
-	<div class="session-list">
+	<div class="avatars">
 		<div class="avatar-list" @click="popoverVisible=!popoverVisible">
-			<div v-if="sessionsPopover.length > 0" class="avatardiv icon-more" />
-			<avatar v-for="session in sessionsVisible" :key="session.id"
-				:url="avatarUrl(session)" :disable-tooltip="true" :size="32" />
+			<div v-if="popover.length > 0" class="avatardiv icon-more" />
+			<avatar v-for="user in firstUsers" :key="user.id"
+				:url="avatarUrl(user)" :disable-tooltip="true" :size="32" />
 		</div>
 
 		<div v-show="popoverVisible" class="popovermenu menu-right">
-			<popover-menu :menu="sessionsPopover" />
+			<popover-menu :menu="popover" />
 			<slot />
 		</div>
 	</div>
@@ -49,7 +49,7 @@ export default {
 		tooltip: Tooltip
 	},
 	props: {
-		sessions: {
+		users: {
 			type: Array,
 			default: () => { return {} }
 		}
@@ -60,8 +60,8 @@ export default {
 		}
 	},
 	computed: {
-		sessionsVisible() {
-			return this.sessions.slice(0, 3)
+		firstUsers() {
+			return this.users.slice(0, 3)
 		},
 		avatarUrl() {
 			return (session) => {
@@ -75,9 +75,9 @@ export default {
 				return window.location.protocol + '//' + window.location.host + avatarUrl
 			}
 		},
-		sessionsPopover() {
+		popover() {
 			return [
-				...this.sessions.slice(3).map((session) => {
+				...this.users.slice(3).map((session) => {
 					return {
 						href: '#',
 						icon: this.avatarUrl(session),
@@ -92,7 +92,8 @@ export default {
 </script>
 
 <style scoped lang="scss">
-	.session-list {
+	.avatars {
+		margin: 0;
 		position: relative;
 		flex-grow: 1;
 		/deep/ .popovermenu {
@@ -129,5 +130,6 @@ export default {
 	}
 	.popovermenu {
 		display: block;
+		margin: 40px -6px;
 	}
 </style>
diff --git a/src/components/cards/CardBadges.vue b/src/components/cards/CardBadges.vue
index 9091eedd7..ee3b60029 100644
--- a/src/components/cards/CardBadges.vue
+++ b/src/components/cards/CardBadges.vue
@@ -36,7 +36,7 @@ cardbadges
 
 		<div v-if="card.attachments" class="card-files icon icon-files-dark" />
 
-		<avatar-list :sessions="card.assignedUsers" />
+		<avatar-list :users="card.assignedUsers" />
 	</div>
 </template>
 <script>
@@ -111,9 +111,9 @@ export default {
 		display: flex;
 		flex-grow: 1;
 
-		& > div {
+		/* & > div {
 			margin-right: 10px;
-		}
+		} */
 		.icon {
 			opacity: 0.5;
 			padding: 12px 3px;

From b75d1ef3fd07164ebeb934be1b7ac98e9549970d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Wed, 4 Sep 2019 18:15:27 +0200
Subject: [PATCH 3/3] Remove unused code and prevent click propagation on the
 avatar list
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Julius Härtl <jus@bitgrid.net>
---
 src/components/cards/AvatarList.vue |  2 +-
 src/components/cards/CardBadges.vue | 11 -----------
 2 files changed, 1 insertion(+), 12 deletions(-)

diff --git a/src/components/cards/AvatarList.vue b/src/components/cards/AvatarList.vue
index 01c2f58f6..3175977af 100644
--- a/src/components/cards/AvatarList.vue
+++ b/src/components/cards/AvatarList.vue
@@ -22,7 +22,7 @@
 
 <template>
 	<div class="avatars">
-		<div class="avatar-list" @click="popoverVisible=!popoverVisible">
+		<div class="avatar-list" @click.stop="popoverVisible=!popoverVisible">
 			<div v-if="popover.length > 0" class="avatardiv icon-more" />
 			<avatar v-for="user in firstUsers" :key="user.id"
 				:url="avatarUrl(user)" :disable-tooltip="true" :size="32" />
diff --git a/src/components/cards/CardBadges.vue b/src/components/cards/CardBadges.vue
index ee3b60029..dc3618960 100644
--- a/src/components/cards/CardBadges.vue
+++ b/src/components/cards/CardBadges.vue
@@ -111,9 +111,6 @@ export default {
 		display: flex;
 		flex-grow: 1;
 
-		/* & > div {
-			margin-right: 10px;
-		} */
 		.icon {
 			opacity: 0.5;
 			padding: 12px 3px;
@@ -125,14 +122,6 @@ export default {
 				opacity: 1;
 			}
 		}
-		.card-assigned-users {
-			flex-grow: 1;
-			padding: 6px 0;
-			margin-right: -5px;
-			.avatardiv {
-				float: right;
-			}
-		}
 	}
 
 	.badges .icon.due {