fix(ChatView): partial revert of commit 35c0da1.

Use slot to move dragover inside MessagesList Signed-off-by: Dorra Jaouad <[email protected]>
nextcloud · Jan 31, 2025 · 63e04b7 · 63e04b7
1 parent d769d94
commit 63e04b7
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 30 deletions.
diff --git a/src/components/ChatView.vue b/src/components/ChatView.vue
@@ -9,25 +9,25 @@
 		@dragleave.prevent="handleDragLeave"
 		@drop.prevent="handleDropFiles">
 		<GuestWelcomeWindow v-if="isGuestWithoutDisplayName" :token="token" />
-		<div class="messages-list-dragover-wrapper">
-			<TransitionWrapper name="slide-up" mode="out-in">
-				<NcEmptyContent v-show="isDraggingOver"
-					:name="dropHintText"
-					class="dragover">
-					<template #icon>
-						<IconTrayArrowUp v-if="!isGuest && !isReadOnly" />
-						<IconAccount v-else-if="isGuest" />
-						<IconAlertOctagon v-else-if="isReadOnly" />
-					</template>
-				</NcEmptyContent>
-			</TransitionWrapper>
-			<MessagesList role="region"
-				:aria-label="t('spreed', 'Conversation messages')"
-				:token="token"
-				:is-chat-scrolled-to-bottom.sync="isChatScrolledToBottom"
-				:is-visible="isVisible" />
-		</div>
-
+		<MessagesList role="region"
+			:aria-label="t('spreed', 'Conversation messages')"
+			:token="token"
+			:is-chat-scrolled-to-bottom.sync="isChatScrolledToBottom"
+			:is-visible="isVisible">
+			<template #dragover>
+				<TransitionWrapper name="slide-up" mode="out-in">
+					<NcEmptyContent v-show="isDraggingOver"
+						:name="dropHintText"
+						class="dragover">
+						<template #icon>
+							<IconTrayArrowUp v-if="!isGuest && !isReadOnly" />
+							<IconAccount v-else-if="isGuest" />
+							<IconAlertOctagon v-else-if="isReadOnly" />
+						</template>
+					</NcEmptyContent>
+				</TransitionWrapper>
+			</template>
+		</MessagesList>
 		<div class="scroll-to-bottom">
 			<TransitionWrapper name="fade">
 				<NcButton v-show="!isChatScrolledToBottom && !isLoadingChat"
@@ -223,20 +223,13 @@ export default {
 	min-height: 0;
 }
 
-.messages-list-dragover-wrapper {
-	position: relative;
-	width: 100%;
-	height: 100%;
-	display: flex;
-	min-height: 0;
-}
-
 .dragover {
-	position: absolute;
-	inset: 5%;
+	position: sticky;
+	inset: calc(var(--default-grid-baseline) * 2);
+	height: calc(100% - var(--default-grid-baseline) * 4);
+	width: calc(100% - var(--default-grid-baseline) * 4);
 	background: var(--color-primary-element-light);
 	z-index: 11;
-	display: flex;
 	box-shadow: 0 0 36px var(--color-box-shadow);
 	border-radius: var(--border-radius);
 	opacity: 90%;

diff --git a/src/components/MessagesList/MessagesList.vue b/src/components/MessagesList/MessagesList.vue
@@ -13,6 +13,7 @@
 			'scroller--isScrolling': isScrolling}"
 		@scroll="onScroll"
 		@scrollend="endScroll">
+		<slot name="dragover" />
 		<TransitionWrapper name="fade">
 			<div class="scroller__loading">
 				<NcLoadingIcon v-if="displayMessagesLoader" class="scroller__loading-element" :size="32" />