From 13ea21c91df8719f57e6e6c7ebd835ce662882bd Mon Sep 17 00:00:00 2001
From: Richard Steinmetz <richard@steinmetz.cloud>
Date: Mon, 22 Feb 2021 17:17:19 +0100
Subject: [PATCH 1/2] Show recipients in each thread envelope

Signed-off-by: Richard Steinmetz <richard@steinmetz.cloud>
---
 src/components/RecipientList.vue  | 205 ++++++++++++++++++++++++++++++
 src/components/Thread.vue         | 104 +--------------
 src/components/ThreadEnvelope.vue |  38 +++++-
 3 files changed, 242 insertions(+), 105 deletions(-)
 create mode 100644 src/components/RecipientList.vue

diff --git a/src/components/RecipientList.vue b/src/components/RecipientList.vue
new file mode 100644
index 0000000000..bac07c2d2d
--- /dev/null
+++ b/src/components/RecipientList.vue
@@ -0,0 +1,205 @@
+<template>
+	<div ref="avatarHeader" class="avatar-header">
+		<div v-if="label" ref="label" class="label">
+			<span>{{ label }}</span>
+		</div>
+		<!-- Participants that can fit in the parent div -->
+		<RecipientBubble v-for="participant in participants.slice(0,participantsToDisplay)"
+			:key="participant.email"
+			class="avatar"
+			:email="participant.email"
+			:label="participant.label" />
+		<!-- Indicator to show that there are more participants than displayed -->
+		<Popover v-if="participants.length > participantsToDisplay" class="avatar-more">
+			<span slot="trigger">
+				{{ moreParticipantsString }}
+			</span>
+			<RecipientBubble v-for="participant in participants.slice(participantsToDisplay)"
+				:key="participant.email"
+				:email="participant.email"
+				:label="participant.label" />
+		</Popover>
+		<!-- Optional caret for showing more information -->
+		<div v-if="showCaret" class="caret">
+			<div :class="expandCaret ? 'icon-triangle-n' : 'icon-triangle-s'"
+				@click="$emit('click-caret')" />
+		</div>
+		<!-- Remaining participants, if any (Needed to have avatarHeader reactive) -->
+		<RecipientBubble v-for="participant in participants.slice(participantsToDisplay)"
+			:key="participant.email"
+			class="avatar avatar-hidden"
+			:email="participant.email"
+			:label="participant.label" />
+	</div>
+</template>
+
+<script>
+import Popover from '@nextcloud/vue/dist/Components/Popover'
+import RecipientBubble from './RecipientBubble'
+import debounce from 'lodash/fp/debounce'
+
+export default {
+	name: 'RecipientList',
+	components: {
+		RecipientBubble,
+		Popover,
+	},
+	props: {
+		label: {
+			type: String,
+			required: false,
+			default: '',
+		},
+		participants: {
+			type: Array,
+			required: true,
+		},
+		showCaret: {
+			type: Boolean,
+			required: false,
+			default: false,
+		},
+		expandCaret: {
+			type: Boolean,
+			required: false,
+			default: false,
+		},
+	},
+	data() {
+		return {
+			participantsToDisplay: 999,
+			resizeDebounced: debounce(500, this.updateParticipantsToDisplay),
+		}
+	},
+	computed: {
+		moreParticipantsString() {
+			// Returns a number showing the number of thread participants that are not shown in the avatar-header
+			return `+${this.participants.length - this.participantsToDisplay}`
+		},
+	},
+	watch: {
+		participants() {
+			this.updateParticipantsToDisplay()
+		},
+	},
+	created() {
+		window.addEventListener('resize', this.resizeDebounced)
+	},
+	mounted() {
+		this.updateParticipantsToDisplay()
+	},
+	beforeDestroy() {
+		window.removeEventListener('resize', this.resizeDebounced)
+	},
+	methods: {
+		updateParticipantsToDisplay() {
+			// Wait until everything is in place
+			if (!this.$refs.avatarHeader || !this.participants) {
+				return
+			}
+
+			// Only include recipient bubbles
+			const children = Array
+				.from(this.$refs.avatarHeader.childNodes)
+				.filter((node) => node.nodeType === Node.ELEMENT_NODE)
+				.filter((node) => node.classList.contains('avatar'))
+
+			// Reserve 100px for the avatar-more span
+			const maxWidth = this.$refs.avatarHeader.clientWidth - 100
+
+			let childrenWidth = 0
+			let fits = 0
+
+			// Calculate full width including margins
+			const getFullWidth = (node) => {
+				const styles = window.getComputedStyle(node)
+				const margins = parseFloat(styles.marginLeft) + parseFloat(styles.marginRight)
+				return node.clientWidth + margins
+			}
+
+			// Measure label width if present
+			if (this.$refs.label) {
+				childrenWidth += getFullWidth(this.$refs.label)
+			}
+
+			for (const child of children) {
+				const newWidth = childrenWidth + getFullWidth(child)
+				if (newWidth > maxWidth) {
+					break
+				}
+
+				fits++
+				childrenWidth = newWidth
+			}
+
+			this.participantsToDisplay = fits
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.avatar + .avatar {
+	margin-left: 4px;
+}
+
+.avatar-header {
+	max-height: 24px;
+	overflow: hidden;
+}
+
+.avatar-more {
+	display: inline-block;
+	vertical-align: middle;
+
+	span {
+		display: inline-block;
+		vertical-align: top;
+		height: 20px;
+		line-height: 20px;
+		background-color: var(--color-background-dark);
+		border-radius: 10px;
+		cursor: pointer;
+		padding: 0 4px;
+	}
+}
+
+.avatar-hidden {
+	visibility: hidden;
+}
+
+.popover__wrapper {
+	max-width: 500px;
+}
+
+::v-deep .user-bubble__title {
+	cursor: pointer;
+}
+
+.label {
+	display: inline-block;
+	margin-right: 2px;
+	vertical-align: middle;
+
+	span {
+		height: 20px;
+		line-height: 20px;
+		vertical-align: top;
+	}
+}
+
+.caret {
+	display: inline-block;
+	vertical-align: middle;
+
+	div {
+		display: inline-block;
+		vertical-align: top;
+		width: 20px;
+		height: 20px;
+		background-color: var(--color-background-dark);
+		border-radius: 10px;
+		cursor: pointer;
+	}
+}
+</style>
diff --git a/src/components/Thread.vue b/src/components/Thread.vue
index db69655d31..4f243ffbac 100644
--- a/src/components/Thread.vue
+++ b/src/components/Thread.vue
@@ -7,30 +7,7 @@
 					<h2 :title="threadSubject">
 						{{ threadSubject }}
 					</h2>
-					<div ref="avatarHeader" class="avatar-header">
-						<!-- Participants that can fit in the parent div -->
-						<RecipientBubble v-for="participant in threadParticipants.slice(0,participantsToDisplay)"
-							:key="participant.email"
-							:email="participant.email"
-							:label="participant.label" />
-						<!-- Indicator to show that there are more participants than displayed -->
-						<Popover v-if="threadParticipants.length > participantsToDisplay"
-							class="avatar-more">
-							<span slot="trigger" class="avatar-more">
-								{{ moreParticipantsString }}
-							</span>
-							<RecipientBubble v-for="participant in threadParticipants.slice(participantsToDisplay)"
-								:key="participant.email"
-								:email="participant.email"
-								:label="participant.label" />
-						</Popover>
-						<!-- Remaining participants, if any (Needed to have avatarHeader reactive) -->
-						<RecipientBubble v-for="participant in threadParticipants.slice(participantsToDisplay)"
-							:key="participant.email"
-							class="avatar-hidden"
-							:email="participant.email"
-							:label="participant.label" />
-					</div>
+					<RecipientList :participants="threadParticipants" />
 				</div>
 			</div>
 			<ThreadEnvelope v-for="env in thread"
@@ -47,25 +24,22 @@
 
 <script>
 import AppContentDetails from '@nextcloud/vue/dist/Components/AppContentDetails'
-import Popover from '@nextcloud/vue/dist/Components/Popover'
 
 import { prop, uniqBy } from 'ramda'
-import debounce from 'lodash/fp/debounce'
 
 import { getRandomMessageErrorMessage } from '../util/ErrorMessageFactory'
 import Loading from './Loading'
 import logger from '../logger'
-import RecipientBubble from './RecipientBubble'
 import ThreadEnvelope from './ThreadEnvelope'
+import RecipientList from './RecipientList'
 
 export default {
 	name: 'Thread',
 	components: {
-		RecipientBubble,
 		AppContentDetails,
 		Loading,
 		ThreadEnvelope,
-		Popover,
+		RecipientList,
 	},
 
 	data() {
@@ -75,16 +49,10 @@ export default {
 			errorMessage: '',
 			error: undefined,
 			expandedThreads: [],
-			participantsToDisplay: 999,
-			resizeDebounced: debounce(500, this.updateParticipantsToDisplay),
 		}
 	},
 
 	computed: {
-		moreParticipantsString() {
-			// Returns a number showing the number of thread participants that are not shown in the avatar-header
-			return `+${this.threadParticipants.length - this.participantsToDisplay}`
-		},
 		threadId() {
 			return parseInt(this.$route.params.threadId, 10)
 		},
@@ -123,49 +91,8 @@ export default {
 	},
 	created() {
 		this.resetThread()
-		window.addEventListener('resize', this.resizeDebounced)
-	},
-	beforeDestroy() {
-		window.removeEventListener('resize', this.resizeDebounced)
 	},
 	methods: {
-		updateParticipantsToDisplay() {
-			// Wait until everything is in place
-			if (!this.$refs.avatarHeader || !this.threadParticipants) {
-				return
-			}
-
-			// Compute the number of participants to display depending on the width available
-			const avatarHeader = this.$refs.avatarHeader
-			const maxWidth = (avatarHeader.clientWidth - 100) // Reserve 100px for the avatar-more span
-			let childrenWidth = 0
-			let fits = 0
-			let idx = 0
-			while (childrenWidth < maxWidth && fits < this.threadParticipants.length) {
-				// Skipping the 'avatar-more' span
-				if (avatarHeader.childNodes[idx].clientWidth === undefined) {
-					idx += 3
-					continue
-				}
-				childrenWidth += avatarHeader.childNodes[idx].clientWidth
-				fits++
-				idx++
-			}
-
-			if (childrenWidth > maxWidth) {
-				// There's not enough space to show all thread participants
-				if (fits > 1) {
-					this.participantsToDisplay = fits - 1
-				} else if (fits === 0) {
-					this.participantsToDisplay = 1
-				} else {
-					this.participantsToDisplay = fits
-				}
-			} else {
-				// There's enough space to show all thread participants
-				this.participantsToDisplay = this.threadParticipants.length
-			}
-		},
 		toggleExpand(threadId) {
 			if (!this.expandedThreads.includes(threadId)) {
 				console.debug(`expand thread ${threadId}`)
@@ -191,7 +118,6 @@ export default {
 		async resetThread() {
 			this.expandedThreads = [this.threadId]
 			await this.fetchThread()
-			this.updateParticipantsToDisplay()
 		},
 		async fetchThread() {
 			this.loading = true
@@ -376,31 +302,7 @@ export default {
 	user-select: text;
 }
 
-.avatar-header {
-	max-height: 24px;
-	overflow: hidden;
-}
-.avatar-more {
-	display: inline;
-	background-color: var(--color-background-dark);
-	padding: 0px 0px 1px 1px;
-	border-radius: 10px;
-	cursor: pointer;
-}
-.avatar-hidden {
-	visibility: hidden;
-}
-.popover__wrapper {
-	max-width: 500px;
-}
-
 .app-content-list-item-star.icon-starred {
 	display: none;
 }
-.user-bubble__wrapper {
-	margin-right: 4px;
-}
-.user-bubble__title {
-	cursor: pointer;
-}
 </style>
diff --git a/src/components/ThreadEnvelope.vue b/src/components/ThreadEnvelope.vue
index 9ec3377837..5cdc288e81 100644
--- a/src/components/ThreadEnvelope.vue
+++ b/src/components/ThreadEnvelope.vue
@@ -71,10 +71,27 @@
 			</div>
 		</div>
 		<Loading v-if="loading" />
-		<Message v-else-if="message"
-			:envelope="envelope"
-			:message="message"
-			:full-height="fullHeight" />
+		<template v-else-if="message">
+			<RecipientList
+				v-if="envelope.to.length > 0 || needsHeaderToggle"
+				class="recipients"
+				:label="`${t('mail', 'To')}:`"
+				:participants="envelope.to"
+				:show-caret="needsHeaderToggle"
+				:expand-caret="expandHeader"
+				@click-caret="onToggleHeader" />
+			<template v-if="expandHeader">
+				<RecipientList
+					v-if="envelope.cc.length > 0"
+					class="recipients"
+					:label="`${t('mail', 'Cc')}:`"
+					:participants="envelope.cc" />
+			</template>
+			<Message
+				:envelope="envelope"
+				:message="message"
+				:full-height="fullHeight" />
+		</template>
 		<Error v-else-if="error"
 			:error="error && error.message ? error.message : t('mail', 'Not found')"
 			:message="errorMessage"
@@ -91,6 +108,7 @@ import MenuEnvelope from './MenuEnvelope'
 import Moment from './Moment'
 import Avatar from './Avatar'
 import importantSvg from '../../img/important.svg'
+import RecipientList from './RecipientList'
 import { buildRecipients as buildReplyRecipients } from '../ReplyBuilder'
 
 export default {
@@ -102,6 +120,7 @@ export default {
 		Moment,
 		Message,
 		Avatar,
+		RecipientList,
 	},
 	props: {
 		envelope: {
@@ -134,6 +153,7 @@ export default {
 			message: undefined,
 			importantSvg,
 			seenTimer: undefined,
+			expandHeader: false,
 		}
 	},
 	computed: {
@@ -187,6 +207,9 @@ export default {
 				},
 			}
 		},
+		needsHeaderToggle() {
+			return this.envelope.cc.length > 0
+		},
 	},
 	watch: {
 		expanded(expanded) {
@@ -248,6 +271,9 @@ export default {
 		onToggleFlagged() {
 			this.$store.dispatch('toggleEnvelopeFlagged', this.envelope)
 		},
+		onToggleHeader() {
+			this.expandHeader = !this.expandHeader
+		},
 	},
 }
 </script>
@@ -349,5 +375,9 @@ export default {
 	.left:not(.seen) {
 		font-weight: bold;
 	}
+	.recipients {
+		margin-left: 60px;
+		margin-right: 38px;
+	}
 
 </style>

From 0b9afd3bb7378ec158b1c7e0e172e9e84fb181df Mon Sep 17 00:00:00 2001
From: Richard Steinmetz <richard@steinmetz.cloud>
Date: Mon, 8 Mar 2021 15:32:17 +0100
Subject: [PATCH 2/2] fixup! Show recipients in each thread envelope

Signed-off-by: Richard Steinmetz <richard@steinmetz.cloud>
---
 src/components/RecipientBubble.vue |  1 +
 src/components/RecipientList.vue   | 10 +++++-----
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/components/RecipientBubble.vue b/src/components/RecipientBubble.vue
index 897f542a5a..ed74f6f159 100644
--- a/src/components/RecipientBubble.vue
+++ b/src/components/RecipientBubble.vue
@@ -22,6 +22,7 @@
 <template>
 	<UserBubble :display-name="label"
 		:avatar-image="avatarUrlAbsolute"
+		:avatar-only="true"
 		@click="onClick">
 		<span class="user-bubble-email">{{ email }}</span>
 	</UserBubble>
diff --git a/src/components/RecipientList.vue b/src/components/RecipientList.vue
index bac07c2d2d..1ff98d9a31 100644
--- a/src/components/RecipientList.vue
+++ b/src/components/RecipientList.vue
@@ -1,5 +1,5 @@
 <template>
-	<div ref="avatarHeader" class="avatar-header">
+	<div class="avatar-header">
 		<div v-if="label" ref="label" class="label">
 			<span>{{ label }}</span>
 		</div>
@@ -94,18 +94,18 @@ export default {
 	methods: {
 		updateParticipantsToDisplay() {
 			// Wait until everything is in place
-			if (!this.$refs.avatarHeader || !this.participants) {
+			if (!this.participants) {
 				return
 			}
 
 			// Only include recipient bubbles
 			const children = Array
-				.from(this.$refs.avatarHeader.childNodes)
+				.from(this.$el.childNodes)
 				.filter((node) => node.nodeType === Node.ELEMENT_NODE)
 				.filter((node) => node.classList.contains('avatar'))
 
-			// Reserve 100px for the avatar-more span
-			const maxWidth = this.$refs.avatarHeader.clientWidth - 100
+			// Reserve 100px for the avatar-more span and header toggle caret
+			const maxWidth = this.$el.clientWidth - 100
 
 			let childrenWidth = 0
 			let fits = 0