move toggle button to Message.vue, align styles with MessageButtonsBar.vue

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>

3 files changed, 73 insertions, 53 deletions

diff --git a/src/components/MessagesList/MessagesGroup/Message/Message.vue b/src/components/MessagesList/MessagesGroup/Message/Message.vue
index 0506a6454..f31fd184d 100644
--- a/src/components/MessagesList/MessagesGroup/Message/Message.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/Message.vue
@@ -38,7 +38,9 @@ the main body of the message as well as a quote.
 		@animationend="isHighlighted = false"
 		@mouseover="handleMouseover"
 		@mouseleave="handleMouseleave">
-		<div :class="{'normal-message-body': !isSystemMessage && !isDeletedMessage, 'system' : isSystemMessage}"
+		<div :class="{'normal-message-body': !isSystemMessage && !isDeletedMessage,
+			'system' : isSystemMessage,
+			'combined-system': isCombinedSystemMessage}"
 			class="message-body">
 			<div v-if="isFirstMessage && showAuthor"
 				class="message-body__author"
@@ -184,6 +186,7 @@ the main body of the message as well as a quote.
 		<div class="message-body__scroll">
 			<MessageButtonsBar v-if="showMessageButtonsBar"
 				ref="messageButtonsBar"
+				class="message-buttons-bar"
 				:is-translation-available="isTranslationAvailable"
 				:is-action-menu-open.sync="isActionMenuOpen"
 				:is-emoji-picker-open.sync="isEmojiPickerOpen"
@@ -201,6 +204,18 @@ the main body of the message as well as a quote.
 				:sent-icon-tooltip="sentIconTooltip"
 				@show-translate-dialog="isTranslateDialogOpen = true"
 				@delete="handleDelete" />
+			<div v-else-if="showCombinedSystemMessageToggle"
+				class="message-buttons-bar">
+				<NcButton type="tertiary"
+					:aria-label="t('spreed', 'Show or collapse system messages')"
+					:title="t('spreed', 'Show or collapse system messages')"
+					@click="toggleCombinedSystemMessage">
+					<template #icon>
+						<UnfoldMore v-if="isCombinedSystemMessageCollapsed" />
+						<UnfoldLess v-else />
+					</template>
+				</NcButton>
+			</div>
 		</div>
 
 		<MessageTranslateDialog v-if="isTranslateDialogOpen"
@@ -225,6 +240,8 @@ import Check from 'vue-material-design-icons/Check.vue'
 import CheckAll from 'vue-material-design-icons/CheckAll.vue'
 import EmoticonOutline from 'vue-material-design-icons/EmoticonOutline.vue'
 import Reload from 'vue-material-design-icons/Reload.vue'
+import UnfoldLess from 'vue-material-design-icons/UnfoldLessHorizontal.vue'
+import UnfoldMore from 'vue-material-design-icons/UnfoldMoreHorizontal.vue'
 
 import { getCapabilities } from '@nextcloud/capabilities'
 import { showError, showSuccess, showWarning, TOAST_DEFAULT_TIMEOUT } from '@nextcloud/dialogs'
@@ -276,6 +293,8 @@ export default {
 		CheckAll,
 		EmoticonOutline,
 		Reload,
+		UnfoldLess,
+		UnfoldMore,
 	},
 
 	mixins: [
@@ -380,6 +399,20 @@ export default {
 			required: true,
 		},
 		/**
+		 * Specifies if the message is a combined system message.
+		 */
+		isCombinedSystemMessage: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * Specifies whether the combined system message is collapsed.
+		 */
+		isCombinedSystemMessageCollapsed: {
+			type: Boolean,
+			default: undefined,
+		},
+		/**
 		 * The type of the message.
 		 */
 		messageType: {
@@ -426,6 +459,8 @@ export default {
 		},
 	},
 
+	emits: ['toggle-combined-system-message'],
+
 	setup() {
 		const isInCall = useIsInCall()
 		return { isInCall, isTranslationAvailable }
@@ -613,6 +648,11 @@ export default {
 					|| this.isReactionsMenuOpen || this.isForwarderOpen || this.isTranslateDialogOpen)
 		},
 
+		showCombinedSystemMessageToggle() {
+			return this.isSystemMessage && !this.isDeletedMessage && !this.isTemporary
+				&& this.isCombinedSystemMessage && (this.isHovered || !this.isCombinedSystemMessageCollapsed)
+		},
+
 		isTemporaryUpload() {
 			return this.isTemporary && this.messageParameters.file
 		},
@@ -851,6 +891,10 @@ export default {
 
 			return displayName
 		},
+
+		toggleCombinedSystemMessage() {
+			this.$emit('toggle-combined-system-message')
+		},
 	},
 }
 </script>
@@ -858,17 +902,18 @@ export default {
 <style lang="scss" scoped>
 @import '../../../../assets/variables';
 
-.message:hover .normal-message-body {
-	border-radius: 8px;
-	background-color: var(--color-background-hover);
-}
-
 .message {
 	position: relative;
 
 	&__last {
 		margin-bottom: 12px;
 	}
+
+	&:hover .normal-message-body,
+	&:hover .combined-system {
+		border-radius: 8px;
+		background-color: var(--color-background-hover);
+	}
 }
 
 .message-body {
@@ -1025,6 +1070,22 @@ export default {
 	padding: 8px;
 }
 
+.message-buttons-bar {
+	display: flex;
+	right: 14px;
+	top: 8px;
+	position: sticky;
+	background-color: var(--color-main-background);
+	border-radius: calc(var(--default-clickable-area) / 2);
+	box-shadow: 0 0 4px 0 var(--color-box-shadow);
+	height: 44px;
+	z-index: 1;
+
+	& h6 {
+		margin-left: auto;
+	}
+}
+
 .message-body__main__text--markdown {
 	:deep(.rich-text--wrapper) {
 		h1 {
diff --git a/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.vue b/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.vue
index 2e06284bc..18558d8cf 100644
--- a/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.vue
@@ -21,8 +21,7 @@
 
 <template>
 	<!-- Message Actions -->
-	<div v-click-outside="handleClickOutside"
-		class="message-buttons-bar">
+	<div v-click-outside="handleClickOutside">
 		<template v-if="!isReactionsMenuOpen">
 			<NcButton v-if="canReact"
 				type="tertiary"
@@ -578,24 +577,3 @@ export default {
 	},
 }
 </script>
-
-<style lang="scss" scoped>
-@import '../../../../../assets/variables';
-
-.message-buttons-bar {
-	display: flex;
-	right: 14px;
-	top: 8px;
-	position: sticky;
-	background-color: var(--color-main-background);
-	border-radius: calc(var(--default-clickable-area) / 2);
-	box-shadow: 0 0 4px 0 var(--color-box-shadow);
-	height: 44px;
-	z-index: 1;
-
-	& h6 {
-		margin-left: auto;
-	}
-}
-
-</style>
diff --git a/src/components/MessagesList/MessagesGroup/MessagesSystemGroup.vue b/src/components/MessagesList/MessagesGroup/MessagesSystemGroup.vue
index c2fbd660c..f30bb8730 100644
--- a/src/components/MessagesList/MessagesGroup/MessagesSystemGroup.vue
+++ b/src/components/MessagesList/MessagesGroup/MessagesSystemGroup.vue
@@ -34,17 +34,11 @@
 				<ul v-if="messagesCollapsed.messages?.length > 1"
 					class="messages messages--header">
 					<Message v-bind="createCombinedSystemMessage(messagesCollapsed)"
+						is-combined-system-message
+						:is-combined-system-message-collapsed="messagesCollapsed.collapsed"
 						:next-message-id="getNextMessageId(messagesCollapsed.messages.at(-1))"
-						:previous-message-id="getPrevMessageId(messagesCollapsed.messages.at(0))" />
-					<NcButton type="tertiary"
-						class="messages--header__toggle"
-						:aria-label="t('spreed', 'Show or collapse system messages')"
-						@click="toggleCollapsed(messagesCollapsed)">
-						<template #icon>
-							<UnfoldMore v-if="messagesCollapsed.collapsed" />
-							<UnfoldLess v-else />
-						</template>
-					</NcButton>
+						:previous-message-id="getPrevMessageId(messagesCollapsed.messages.at(0))"
+						@toggle-combined-system-message="toggleCollapsed(messagesCollapsed)" />
 				</ul>
 				<ul v-show="messagesCollapsed.messages?.length === 1 || !messagesCollapsed.collapsed"
 					class="messages"
@@ -61,11 +55,6 @@
 </template>
 
 <script>
-import UnfoldLess from 'vue-material-design-icons/UnfoldLessHorizontal.vue'
-import UnfoldMore from 'vue-material-design-icons/UnfoldMoreHorizontal.vue'
-
-import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
-
 import Message from './Message/Message.vue'
 
 import { useCombinedSystemMessage } from '../../../composables/useCombinedSystemMessage.js'
@@ -91,10 +80,8 @@ export default {
 
 	components: {
 		Message,
-		NcButton,
-		UnfoldLess,
-		UnfoldMore,
 	},
+
 	inheritAttrs: false,
 
 	props: {
@@ -341,12 +328,6 @@ export default {
 	min-width: 0;
 
 	&--header {
-		position: relative;
-		& &__toggle {
-			position: absolute;
-			top: -6px;
-			right: 0;
-		}
 	}
 	&--collapsed {
 		border-radius: var(--border-radius-large);