Merge pull request #9439 from nextcloud/enh/smart-reply-ui-improvement

Enh: Improve smart reply UI

src/components/Message.vue

@@ -56,22 +56,22 @@
 			:message="message" />
 		<MessageAttachments :attachments="message.attachments" :envelope="envelope" />
 		<div id="reply-composer" />
-		<div v-if="smartReplies.length>0" class="reply-buttons">
-			<NcButton v-for="(reply,index) in smartReplies"
-				:key="index"
-				type="secondary"
-				@click="onReply(reply)">
-				<template #icon>
-					<ReplyIcon />
-				</template>
-				{{ reply }}
-			</NcButton>
+		<div class="reply-buttons">
+			<div v-if="smartReplies.length>0" class="reply-buttons__suggested">
+				<NcButton v-for="(reply,index) in smartReplies"
+					:key="index"
+					class="reply-buttons__suggested__button"
+					type="secondary"
+					@click="onReply(reply)">
+					{{ reply }}
+				</NcButton>
+			</div>
 			<NcButton type="primary"
 				@click="onReply">
 				<template #icon>
 					<ReplyIcon />
 				</template>
-				{{t('mail','Reply')}}
+				{{ multipleRecipients ? t('mail','Reply all') :t('mail','Reply') }}
 			</NcButton>
 		</div>
 	</div>
@@ -124,6 +124,10 @@ export default {
 			type: Array,
 			default: () => [],
 		},
+		multipleRecipients: {
+			required: true,
+			type: Boolean,
+		},
 	},
 	computed: {
 		from() {
@@ -177,14 +181,19 @@ export default {
 	}
 }
 .reply-buttons{
+	margin: 0 10px 0 50px;
 	display: flex;
-	justify-content: end;
-
-	& > * {
-		margin: 5px;
-		top: 0 !important;
-		left: 0 !important;
-
+	justify-content: space-between;
+	&__suggested {
+		display: flex;
+		justify-content: space-between;
+		&__button {
+			margin-right:5px;
+			border-radius: 12px;
+			:deep(.button-vue__text){
+				font-weight: normal;
+			}
+		}
 	}
 
 }

src/components/ThreadEnvelope.vue

@@ -109,19 +109,6 @@
 						<!-- TODO: display information about signer and/or CA certificate -->
 					</NcActions>
 					<NcActions :inline="inlineMenuSize">
-						<NcActionButton v-if="inlineMenuSize >= 1 || !moreActionsOpen"
-							:class="{ primary: expanded}"
-							:aria-label="hasMultipleRecipients ? t('mail', 'Reply all') : t('mail', 'Reply')"
-							:name="hasMultipleRecipients ? t('mail', 'Reply all') : t('mail', 'Reply')"
-							type="tertiary-no-background"
-							@click="onReply">
-							<template #icon>
-								<ReplyAllIcon v-if="hasMultipleRecipients"
-									:size="20" />
-								<ReplyIcon v-else
-									:size="20" />
-							</template>
-						</NcActionButton>
 						<NcActionButton v-if="hasWriteAcl && (inlineMenuSize >= 2 || !moreActionsOpen)"
 							type="tertiary-no-background"
 							class="action--primary"
@@ -176,10 +163,11 @@
 						<MenuEnvelope class="app-content-list-item-menu"
 							:envelope="envelope"
 							:mailbox="mailbox"
-							:with-reply="false"
+							:with-reply="true"
 							:with-select="false"
 							:with-show-source="true"
 							:more-actions-open.sync="moreActionsOpen"
+							@reply="onReply"
 							@delete="$emit('delete',envelope.databaseId)"
 							@show-source-modal="onShowSourceModal"
 							@open-tag-modal="onOpenTagModal"
@@ -220,6 +208,7 @@
 			:message="message"
 			:full-height="fullHeight"
 			:smart-replies="smartReplies"
+			:multiple-recipients="hasMultipleRecipients"
 			@load="loading = LOADING_DONE"
 			@reply="onReply" />
 		<Error v-else-if="error"
@@ -268,8 +257,6 @@ import MenuEnvelope from './MenuEnvelope.vue'
 import Moment from './Moment.vue'
 import { smartReply } from '../service/AiIntergrationsService.js'
 import { mailboxHasRights } from '../util/acl.js'
-import ReplyIcon from 'vue-material-design-icons/Reply.vue'
-import ReplyAllIcon from 'vue-material-design-icons/ReplyAll.vue'
 import StarOutline from 'vue-material-design-icons/StarOutline.vue'
 import DeleteIcon from 'vue-material-design-icons/Delete.vue'
 import ArchiveIcon from 'vue-material-design-icons/PackageDown.vue'
@@ -319,8 +306,6 @@ export default {
 		MenuEnvelope,
 		Moment,
 		Message,
-		ReplyIcon,
-		ReplyAllIcon,
 		StarOutline,
 		EmailRead,
 		EmailUnread,