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

Merge branch '482-show-list-of-seenBy' into 'dev'

Browse source 
Show member list of seen by

See merge request keanuapp/keanuapp-weblite!207
This commit is contained in:
N Pex 2023-06-26 12:22:35 +00:00
commit 791fa5936a
8 changed files with 91 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/components/BottomSheet.vue
View file

@ -182,7 +182,7 @@ export default {
bottom: 0;
overflow-x: hidden;
overflow-y: hidden;
z-index: 10;
z-index: 20;
}
.bottom-sheet-bg {

2
src/components/messages/MessageIncoming.vue
View file

@ -4,7 +4,7 @@
<div v-if="showSenderAndTime" class="senderAndTime">
<div class="sender">{{ eventSenderDisplayName(event) }}</div>
<div class="time">
{{ formatTime(event.event.origin_server_ts) }}
{{ utils.formatTime(event.event.origin_server_ts) }}
</div>
</div>
<v-avatar class="avatar" ref="avatar" size="32" color="#ededed" @click.stop="otherAvatarClicked($refs.avatar.$el)">

2
src/components/messages/MessageOutgoing.vue
View file

@ -3,7 +3,7 @@
<div class="messageOut">
<div class="senderAndTime">
<div class="time">
{{ formatTime(event.event.origin_server_ts) }}
{{ utils.formatTime(event.event.origin_server_ts) }}
</div>
<div class="status">{{ event.status }}</div>
</div>

77
src/components/messages/SeenBy.vue
View file

@ -1,27 +1,57 @@
<template>
<div class="seen-by-container">
<v-tooltip top open-delay="500" v-if="seenBy.length > 0">
<template v-slot:activator="{ on, attrs }">
<div v-bind="attrs" v-on="on" class="clickable">
<div class="more" v-if="seenBy.length > 0">{{ moreItems }}</div>
<transition-group name="list" tag="div" v-if="seenBy.length > 0">
<v-avatar v-for="(member, index) in seenBy" :key="member.userId" class="seen-by-user" size="16" color="grey"
v-show="index < SHOW_LIMIT">
<img v-if="memberAvatar(member)" :src="memberAvatar(member)" />
<div>
<div class="seen-by-container">
<v-tooltip top open-delay="500" v-if="seenBy.length > 0">
<template v-slot:activator="{ on, attrs }">
<div v-bind="attrs" v-on="on" class="clickable">
<div class="more" v-if="seenBy.length > 0">{{ moreItems }}</div>
<transition-group name="list" tag="div" v-if="seenBy.length > 0">
<v-avatar v-for="(member, index) in seenBy" :key="member.roomMember.userId" class="seen-by-user" size="16" color="grey"
v-show="index < SHOW_LIMIT" @click="open">
<img v-if="memberAvatar(member.roomMember)" :src="memberAvatar(member.roomMember)" />
<span v-else class="white--text headline">{{
member.roomMember.name.substring(0, 1).toUpperCase()
}}</span>
</v-avatar>
</transition-group>
</div>
</template>
<span>{{ $tc("message.seen_by_count", seenBy.length) }}</span>
</v-tooltip>
</div>
<BottomSheet
:halfY="0.12"
ref="seenByListBottomSheet"
>
<v-list>
<v-subheader class="text-uppercase"> {{ $tc("message.seen_by") }}</v-subheader>
<v-list-item v-for="(member, index) in seenBy" :key="index">
<v-list-item-icon>
<v-avatar size="40" color="grey">
<img v-if="memberAvatar(member.roomMember)" :src="memberAvatar(member.roomMember)" />
<span v-else class="white--text headline">{{
member.name.substring(0, 1).toUpperCase()
member.roomMember.name.substring(0, 1).toUpperCase()
}}</span>
</v-avatar>
</transition-group>
</div>
</template>
<span>{{ $tc("message.seen_by", seenBy.length) }}</span>
</v-tooltip>
</v-list-item-icon>
<v-list-item-content class="text-left">
<v-list-item-title>{{member.roomMember.name}}</v-list-item-title>
<v-list-item-subtitle>{{ seenByTimeStamp(member.readTimestamp) }}</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
</v-list>
</BottomSheet>
</div>
</template>
<script>
import BottomSheet from "../BottomSheet.vue"
import utils from "../../plugins/utils.js";
export default {
components: {
BottomSheet
},
props: {
room: {
type: Object,
@ -40,6 +70,7 @@ export default {
return {
seenBy: [],
SHOW_LIMIT: 5,
utils
}
},
mounted() {
@ -62,6 +93,17 @@ export default {
}
},
methods: {
seenByTimeStamp(timestamp) {
let dayDiff = utils.dayDiffToday(timestamp);
if (dayDiff < 3) {
return this.$tc("message.time_ago", dayDiff) + ' '+utils.formatTime(timestamp);
} else {
return utils.formatTime(timestamp);
}
},
open() {
this.$refs.seenByListBottomSheet.open();
},
onReceipt(ignoredevent) {
this.update();
},
@ -80,7 +122,10 @@ export default {
update() {
this.seenBy = ((this.room && this.event) ? this.room.getReceiptsForEvent(this.event) : [])
.filter(receipt => receipt.type == 'm.read' && receipt.userId !== this.$matrix.currentUserId)
.map(receipt => this.room.getMember(receipt.userId));
.map(receipt => {
return { readTimestamp: receipt.data.ts, roomMember: this.room.getMember(receipt.userId) }
}
);
},
},
watch: {

19
src/components/messages/messageMixin.js
View file

@ -1,6 +1,8 @@
import QuickReactions from "./QuickReactions.vue";
import * as linkify from 'linkifyjs';
import linkifyHtml from 'linkify-html';
import utils from "../../plugins/utils"
linkify.options.defaults.className = "link";
linkify.options.defaults.target = { url: "_blank" };
@ -39,6 +41,7 @@ export default {
event: {},
inReplyToEvent: null,
inReplyToSender: null,
utils
};
},
mounted() {
@ -231,22 +234,6 @@ export default {
return false;
},
formatTime(time) {
const date = new Date();
date.setTime(time);
const today = new Date();
if (
date.getDate() == today.getDate() &&
date.getMonth() == today.getMonth() &&
date.getFullYear() == today.getFullYear()
) {
// For today, skip the date part
return date.toLocaleTimeString();
}
return date.toLocaleString();
},
formatTimeAgo(time) {
const date = new Date();
date.setTime(time);