butter/keanu-weblite
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Unify room welcome header handling

Browse source 
Also, add the "WelcomeHeaderChannel" component
This commit is contained in:
N-Pex 2024-04-03 09:35:20 +02:00
parent 0dc449feaa
commit e28c58d8ba
8 changed files with 134 additions and 56 deletions
Download patch file Download diff file Expand all files Collapse all files

59
src/components/Chat.vue
View file

@ -49,8 +49,7 @@
<!-- Handle resizes, e.g. when soft keyboard is shown/hidden -->
<resize-observer ref="chatContainerResizer" @notify="handleChatContainerResize" />
<CreatedRoomWelcomeHeader v-if="showCreatedRoomWelcomeHeader" v-on:close="closeCreateRoomWelcomeHeader" />
<DirectChatWelcomeHeader v-if="showDirectChatWelcomeHeader" v-on:close="closeDirectChatWelcomeHeader" />
<component :is="roomWelcomeHeader" v-on:close="closeRoomWelcomeHeader"></component>
<div v-for="(event, index) in filteredEvents" :key="event.getId()" :eventId="event.getId()">
<!-- DAY Marker, shown for every new day in the timeline -->
@ -328,14 +327,15 @@
<script>
import Vue from "vue";
import { TimelineWindow, EventTimeline } from "matrix-js-sdk";
import util, { ROOM_TYPE_VOICE_MODE, ROOM_TYPE_FILE_MODE } from "../plugins/utils";
import util, { ROOM_TYPE_VOICE_MODE, ROOM_TYPE_FILE_MODE, ROOM_TYPE_CHANNEL } from "../plugins/utils";
import MessageOperations from "./messages/MessageOperations.vue";
import ChatHeader from "./ChatHeader";
import ChatHeaderPrivate from "./ChatHeaderPrivate.vue";
import VoiceRecorder from "./VoiceRecorder";
import RoomInfoBottomSheet from "./RoomInfoBottomSheet";
import CreatedRoomWelcomeHeader from "./CreatedRoomWelcomeHeader";
import DirectChatWelcomeHeader from "./DirectChatWelcomeHeader";
import WelcomeHeaderRoom from "./welcome_headers/WelcomeHeaderRoom";
import WelcomeHeaderDirectChat from "./welcome_headers/WelcomeHeaderDirectChat";
import WelcomeHeaderChannel from "./welcome_headers/WelcomeHeaderChannel";
import NoHistoryRoomWelcomeHeader from "./NoHistoryRoomWelcomeHeader.vue";
import MessageOperationsBottomSheet from "./MessageOperationsBottomSheet";
import StickerPickerBottomSheet from "./StickerPickerBottomSheet";
@ -391,8 +391,8 @@ export default {
MessageOperations,
VoiceRecorder,
RoomInfoBottomSheet,
CreatedRoomWelcomeHeader,
DirectChatWelcomeHeader,
WelcomeHeaderRoom,
WelcomeHeaderDirectChat,
NoHistoryRoomWelcomeHeader,
MessageOperationsBottomSheet,
StickerPickerBottomSheet,
@ -455,10 +455,7 @@ export default {
lastRR: null,
/** If we just created this room, show a small welcome header with info */
hideCreatedRoomWelcomeHeader: false,
/** For direct chats, show a small welcome header with info about the other party */
hideDirectChatWelcomeHeader: false,
hideRoomWelcomeHeader: false,
/** An array of recent emojis. Used in the "message operations" popup. */
recentEmojis: [],
@ -688,14 +685,21 @@ export default {
return this.room && this.room.getJoinRule() == "public";
},
showCreatedRoomWelcomeHeader() {
return !this.hideCreatedRoomWelcomeHeader && this.roomCreatedByUsRecently && !this.isDirectRoom;
showRoomWelcomeHeader() {
return this.roomWelcomeHeader != null;
},
showDirectChatWelcomeHeader() {
return !this.hideDirectChatWelcomeHeader && this.roomCreatedByUsRecently && this.isDirectRoom;
roomWelcomeHeader() {
if (!this.hideRoomWelcomeHeader && this.roomCreatedByUsRecently) {
if (this.roomDisplayType == ROOM_TYPE_CHANNEL) {
return WelcomeHeaderChannel;
}
if (this.isDirectRoom) {
return WelcomeHeaderDirectChat;
}
return WelcomeHeaderRoom;
}
return null;
},
chatContainerStyle() {
if (this.$config.chat_backgrounds && this.room && this.roomId) {
const roomType = this.isDirectRoom ? "direct" : this.isPublicRoom ? "public" : "invite";
@ -788,8 +792,7 @@ export default {
this.timelineWindow = null;
this.typingMembers = [];
this.initialLoadDone = false;
this.hideDirectChatWelcomeHeader = false;
this.hideCreatedRoomWelcomeHeader = false;
this.hideRoomWelcomeHeader = false;
// Stop RR timer
this.stopRRTimer();
@ -961,7 +964,7 @@ export default {
// unknownRelations.forEach((event) => this.room.relations.aggregateChildEvent(event));
this.setInitialLoadDone();
if (initialEventId && !this.showCreatedRoomWelcomeHeader) {
if (initialEventId && !this.showRoomWelcomeHeader) {
const event = this.room.findEventById(initialEventId);
this.$nextTick(() => {
if (event && event.parentThread) {
@ -970,7 +973,7 @@ export default {
self.scrollToEvent(initialEventId);
}
});
} else if (this.showCreatedRoomWelcomeHeader || this.showDirectChatWelcomeHeader) {
} else if (this.showRoomWelcomeHeader) {
self.onScroll();
}
self.restartRRTimer();
@ -1806,18 +1809,8 @@ export default {
this.$analytics.event("Audio", "Voice message sent");
},
closeCreateRoomWelcomeHeader() {
this.hideCreatedRoomWelcomeHeader = true;
this.$nextTick(() => {
// We change the layout when removing the welcome header, so call
// onScroll here to handle updates (e.g. remove the "scroll to last" if we now
// can see all messages).
this.onScroll();
});
},
closeDirectChatWelcomeHeader() {
this.hideDirectChatWelcomeHeader = true;
closeRoomWelcomeHeader() {
this.hideRoomWelcomeHeader = true;
this.$nextTick(() => {
// We change the layout when removing the welcome header, so call
// onScroll here to handle updates (e.g. remove the "scroll to last" if we now