fixup! feat: add recipient info on the right side of the composer

Signed-off-by: greta <[email protected]>

src/components/Message.vue

@@ -113,7 +113,7 @@ export default {
 		replyButtonLabel: {
 			required: true,
 			type: String,
-		}
+		},
 	},
 	computed: {
 		from() {

src/components/NewMessageModal.vue

@@ -4,7 +4,7 @@
 -->
 <template>
 	<Modal v-if="showMessageComposer"
-		:size="largerModal ? 'large' : 'normal'"
+		:size="modalSize"
 		:name="modalTitle"
 		:additional-trap-elements="toolbarElements"
 		@close="$event.type === 'click' ? onClose() : onMinimize()">
@@ -51,7 +51,7 @@
 			</template>
 		</EmptyContent>
 		<template v-else>
-			<div class="modal-content">
+			<div :class="['modal-content', { 'with-recipient': composerData.to && composerData.to.length > 0 }]">
 				<div class="left-pane">
 					<NcButton class="maximize-button"
 						type="tertiary-no-background"
@@ -113,8 +113,9 @@
 						@send="onSend"
 						@show-toolbar="handleShow" />
 				</div>
-				<div class="right-pane">
-					<RecipientInfo :recipient="recipient" />
+
+				<div v-if="composerData.to && composerData.to.length > 0" class="right-pane">
+					<RecipientInfo :recipient-info="composerData.to" />
 				</div>
 			</div>
 		</template>
@@ -219,6 +220,9 @@ export default {
 		smartReply() {
 			return this.composerData?.smartReply ?? null
 		},
+		modalSize() {
+			return this.composerData.to && this.composerData.to.length > 0 ? 'full' : (this.largerModal ? 'large' : 'normal')
+		},
 	},
 	created() {
 		const id = this.composerData?.id
@@ -604,17 +608,28 @@ export default {
 }
 .modal-content {
 	display: flex;
-	height: 100%
+	height: 100%;
+	flex-direction: row;
+	width: 100%;
 }
 
 .left-pane {
-	flex: 2;
-	padding: 10px;
+	flex: 1;
+	overflow-y: auto;
 }
 
 .right-pane {
+	flex: 0 0 400px;
+	overflow-y: auto;
+	padding-left: 5px;
+	border-left: 1px solid #ccc;
+}
+
+.modal-content.with-recipient .left-pane {
 	flex: 1;
-	padding: 10px;
-	border-left: 1px solid #ddd;
+	width: calc(100% - 400px);
+}
+.modal-content .left-pane {
+	width: 100%;
 }
 </style>

src/components/RecipientInfo.vue

@@ -1,18 +1,117 @@
 <template>
-	<div>
-		<h5>Recipient Info</h5>
-		<p>Name: {{ recipient.name }}</p>
-		<p>Email: {{ recipient.email }}</p>
+	<div class="recipient-info">
+		<div v-if="recipientInfo.length === 1" class="recipient-single">
+			<Avatar :user="recipientInfo[0].uid"
+				:display-name="recipientInfo[0].displayName"
+				:email="recipientInfo[0].email"
+				:size="128"
+				:disable-tooltip="true"
+				:disable-menu="true" />
+			<div class="recipient-details">
+				<p>{{ recipientInfo[0].displayName }}</p>
+				<p class="recipient-email">
+					{{ recipientInfo[0].email }}
+				</p>
+			</div>
+		</div>
+		<div v-else class="recipient-multiple">
+			<div class="recipient-list">
+				<div v-for="(recipient, index) in recipientInfo"
+					:key="recipient.uid"
+					class="recipient-item">
+					<Avatar :user="recipient.uid"
+						:display-name="recipient.displayName"
+						:email="recipient.email"
+						:size="64"
+						:disable-tooltip="true"
+						:disable-menu="true" />
+					<div class="recipient-item-details">
+						<p>{{ recipient.displayName }}</p>
+						<p class="recipient-email">
+							{{ recipient.email }}
+							<span class="expand-toggle" @click="toggleExpand(index)">
+								<IconArrowUp v-if="expandedIndex === index" size="16" />
+								<IconArrowDown v-else size="16" />
+							</span>
+						</p>
+						<div v-if="expandedIndex === index" class="expanded-recipient-details">
+							<p>{{ recipient.displayName }}</p>
+							<p class="recipient-email">
+								{{ recipient.email }}
+							</p>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
 	</div>
 </template>
 
 <script>
+import Avatar from './Avatar.vue'
+import IconArrowUp from 'vue-material-design-icons/ArrowUp.vue'
+import IconArrowDown from 'vue-material-design-icons/ArrowDown.vue'
+
 export default {
+	components: {
+		Avatar,
+		IconArrowUp,
+		IconArrowDown,
+	},
 	props: {
-		recipient: {
-			type: Object,
+		recipientInfo: {
+			type: Array,
 			required: true,
 		},
 	},
+	data() {
+		return {
+			expandedIndex: null,
+		}
+	},
+	methods: {
+		toggleExpand(index) {
+			this.expandedIndex = this.expandedIndex === index ? null : index
+		},
+	},
 }
 </script>
+
+<style scoped lang="scss">
+.recipient-info {
+	display: flex;
+	flex-direction: column;
+	padding: 10px;
+}
+
+.recipient-single {
+	display: flex;
+	align-items: center;
+}
+
+.recipient-multiple {
+	margin-top: 10px;
+}
+
+.recipient-list {
+	display: flex;
+	flex-direction: column;
+}
+
+.recipient-item {
+	display: flex;
+	align-items: center;
+	margin-right: 20px;
+	margin-bottom: 10px;
+}
+
+.recipient-item-details {
+	margin-left: 10px;
+}
+
+.expand-toggle {
+	cursor: pointer;
+	margin-top: 10px;
+}
+
+</style>