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

Style channel message operations (edit & pin/unpin)

Browse source
This commit is contained in:
N-Pex 2024-10-16 15:33:35 +02:00
parent ca777a83be
commit d3ffc3d15b
5 changed files with 74 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

42
src/components/Chat.vue
View file

@ -35,22 +35,28 @@
<div v-if="!useVoiceMode && !useFileModeNonAdmin" :class="{'chat-content': true, 'flex-grow-1': true, 'flex-shrink-1': true, 'invisible': !initialLoadDone}" ref="chatContainer"
v-on:scroll="onScroll" @click="closeContextMenusIfOpen">
<div ref="messageOperationsStrut" class="message-operations-strut">
<message-operations-channel ref="messageOperations" :style="opStyle" v-on:close="showContextMenu = false;" v-if="showMessageOperations && room.displayType == ROOM_TYPE_CHANNEL" :userCanPin="true"
:originalEvent="selectedEvent" :timelineSet="timelineSet"
v-on:pin="pin(selectedEvent)"
v-on:unpin="unpin(selectedEvent)"
/>
<message-operations ref="messageOperations" :style="opStyle" :emojis="recentEmojis" v-on:close="
showContextMenu = false;
" v-else-if="showMessageOperations" v-on:addreaction="addReaction" v-on:addquickreaction="addQuickReaction"
v-on:addreply="addReply(selectedEvent)" v-on:edit="edit(selectedEvent)" v-on:redact="redact(selectedEvent)"
v-on:download="download(selectedEvent)" v-on:more="
<component :is="messageOperationsComponent" ref="messageOperations" :style="opStyle"
v-if="showMessageOperations"
v-on:close="showContextMenu = false;"
:emojis="recentEmojis"
:originalEvent="selectedEvent"
:timelineSet="timelineSet"
v-on:pin="pin(selectedEvent)"
v-on:unpin="unpin(selectedEvent)"
v-on:addreaction="addReaction"
v-on:addquickreaction="addQuickReaction"
v-on:addreply="addReply(selectedEvent)"
v-on:edit="edit(selectedEvent)"
v-on:redact="redact(selectedEvent)"
v-on:download="download(selectedEvent)"
v-on:more="
isEmojiQuickReaction= true
showMoreMessageOperations({event: selectedEvent, anchor: $event.anchor})
" :originalEvent="selectedEvent" :timelineSet="timelineSet"
"
:userCanSendReactionAndAnswerPoll="$matrix.userCanSendReactionAndAnswerPollInCurrentRoom"
:userCanSendMessage="$matrix.userCanSendMessageInCurrentRoom"
/>
:userCanPin="canCreatePoll"
/>
</div>
<!-- Handle resizes, e.g. when soft keyboard is shown/hidden -->
@ -723,11 +729,12 @@ export default {
// Add read marker, if it is not newer than the "latest" message we are going to display
//
let showReadMarker = false;
let lastDisplayedEvent = undefined;
events = events.flatMap((e) => {
let result = [];
Vue.set(e, "component", this.componentForEvent(e, false));
if (e.getId() == this.readMarker && lastDisplayedEvent !== undefined) {
if (e.getId() == this.readMarker && showReadMarker) {
const readMarkerEvent = ROOM_READ_MARKER_EVENT_PLACEHOLDER;
Vue.set(readMarkerEvent, "component", this.componentForEvent(readMarkerEvent, false));
if (readMarkerEvent.component) {
@ -738,6 +745,9 @@ export default {
if (e.component) {
Vue.set(e, "nextDisplayedEvent", lastDisplayedEvent);
lastDisplayedEvent = e;
if (e.getSender() !== this.$matrix.currentUserId) {
showReadMarker = true;
}
}
result.push(e);
return result;
@ -777,6 +787,12 @@ export default {
}
return null;
},
messageOperationsComponent() {
if (this.room.displayType == ROOM_TYPE_CHANNEL) {
return MessageOperationsChannel;
}
return MessageOperations;
},
chatContainerStyle() {
if (this.$config.chat_backgrounds && this.room && this.roomId) {
const roomType = this.isDirectRoom ? "direct" : this.isPublicRoom ? "public" : "invite";

28
src/components/messages/channel/MessageOperationsChannel.vue
View file

@ -1,11 +1,25 @@
<template>
<div :class="{'message-operations':true,'incoming':incoming,'outgoing':!incoming}">
<v-btn id="btn-pin" icon @click.stop="pin" class="ma-0 pa-0" v-if="userCanPin && !event.isPinned">
<v-icon small>$vuetify.icons.ic_pin_filled</v-icon>
</v-btn>
<v-btn id="btn-unpin" icon @click.stop="unpin" class="ma-0 pa-0" v-if="userCanPin && event.isPinned">
<v-icon small>$vuetify.icons.ic_pin</v-icon>
</v-btn>
<div :class="{ 'message-operations': true, 'incoming': incoming, 'outgoing': !incoming }">
<v-list dense>
<v-list-item key="edit" v-if="isEditable" @click.stop="edit">
<v-list-item-icon><v-icon>$vuetify.icons.ic_edit</v-icon></v-list-item-icon>
<v-list-item-content>
<v-list-item-title>{{ $t("menu.edit") }}</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-item key="pin" v-if="userCanPin && !event.isPinned" @click.stop="pin">
<v-list-item-icon><v-icon>$vuetify.icons.ic_pin</v-icon></v-list-item-icon>
<v-list-item-content>
<v-list-item-title>{{ $t("menu.pin") }}</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-item key="unpin" v-if="userCanPin && event.isPinned" @click.stop="unpin">
<v-list-item-icon><v-icon>$vuetify.icons.ic_pin</v-icon></v-list-item-icon>
<v-list-item-content>
<v-list-item-title>{{ $t("menu.unpin") }}</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>
</div>
</template>