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

Small delay on hint

Browse source
This commit is contained in:
N Pex 2023-03-29 08:19:42 +00:00
parent 385ab8486e
commit 4c06796c02
2 changed files with 25 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

25
src/components/ChatHeader.vue
View file

@ -20,8 +20,8 @@
<v-icon class="icon-dropdown" size="11">$vuetify.icons.ic_dropdown</v-icon> <v-icon class="icon-dropdown" size="11">$vuetify.icons.ic_dropdown</v-icon>
<div :class="{ 'notification-alert': true, 'popup-open': showMissedItemsInfo }" v-if="notifications"> <div :class="{ 'notification-alert': true, 'popup-open': showMissedItemsInfo }" v-if="notifications">
<!-- MISSED ITEMS POPUP --> <!-- MISSED ITEMS POPUP -->
<div class="missed-items-popup-background" v-if="showMissedItemsInfo" @click.stop=""></div> <!-- <div class="missed-items-popup-background" v-if="showMissedItemsInfo" @click.stop="setHasShownMissedItemsHint()"></div> -->
<div class="missed-items-popup" v-if="showMissedItemsInfo"> <div class="missed-items-popup" v-if="showMissedItemsInfo" @click.stop="setHasShownMissedItemsHint()">
<div class="text">{{ notificationsText }}</div> <div class="text">{{ notificationsText }}</div>
<div class="button clickable" @click.stop="setHasShownMissedItemsHint()">{{$t('menu.ok')}}</div> <div class="button clickable" @click.stop="setHasShownMissedItemsHint()">{{$t('menu.ok')}}</div>
</div> </div>
@ -100,12 +100,16 @@ export default {
showPurgeConfirmation: false, showPurgeConfirmation: false,
showMoreMenu: false, showMoreMenu: false,
downloadingChat: false, downloadingChat: false,
hasShownMissedItemsInfo: false,
showMissedItemsInfo: false, showMissedItemsInfo: false,
/** Timer for showing the "missed items" hint */
timerMissedItems: null
}; };
}, },
mounted() { mounted() {
this.$matrix.on("Room.timeline", this.onEvent); this.$matrix.on("Room.timeline", this.onEvent);
this.showMissedItemsInfo = this.$store.state.hasShownMissedItemsHint !== "1"; this.hasShownMissedItemsInfo = this.$store.state.hasShownMissedItemsHint === "1";
this.updateMemberCount(); this.updateMemberCount();
}, },
@ -138,7 +142,7 @@ export default {
return null; return null;
}, },
notifications() { notifications() {
return this.$matrix.joinedRooms.some(room => room.roomId !== this.$matrix.currentRoomId && room.getUnreadNotificationCount("total") > 0) || return this.$matrix.joinedRooms.some(r => (r.roomId !== this.$matrix.currentRoomId && r.getCanonicalAlias() !== this.$matrix.currentRoomId) && r.getUnreadNotificationCount("total") > 0) ||
this.$matrix.invites.length > 0; this.$matrix.invites.length > 0;
}, },
notificationsText() { notificationsText() {
@ -146,7 +150,7 @@ export default {
if (invitationCount > 0) { if (invitationCount > 0) {
return this.$tc('room.invitations', invitationCount); return this.$tc('room.invitations', invitationCount);
} }
const missedMessagesCount = this.$matrix.joinedRooms.reduce((value, room) => (room.roomId !== this.$matrix.currentRoomId ? (value + room.getUnreadNotificationCount("total")) : value), 0); const missedMessagesCount = this.$matrix.joinedRooms.reduce((value, r) => ((r.roomId !== this.$matrix.currentRoomId && r.getCanonicalAlias() !== this.$matrix.currentRoomId) ? (value + r.getUnreadNotificationCount("total")) : value), 0);
if (missedMessagesCount > 0) { if (missedMessagesCount > 0) {
return this.$tc('room.unseen_messages', missedMessagesCount); return this.$tc('room.unseen_messages', missedMessagesCount);
} }
@ -211,12 +215,23 @@ export default {
} }
}, },
}, },
notifications: {
immediate: true,
handler(val) {
if (!this.hasShownMissedItemsHint && val > 0 && !this.showMissedItemsInfo && this.timerMissedItems == null) {
this.timerMissedItems = setTimeout(() => {
this.showMissedItemsInfo = true;
}, 3500);
}
}
}
}, },
methods: { methods: {
setHasShownMissedItemsHint() { setHasShownMissedItemsHint() {
this.$store.commit('setHasShownMissedItemsHint', "1"); this.$store.commit('setHasShownMissedItemsHint', "1");
this.showMissedItemsInfo = false; this.showMissedItemsInfo = false;
this.hasShownMissedItemsInfo = true;
}, },
onEvent(event) { onEvent(event) {
if (!this.room || event.getRoomId() !== this.room.roomId) { if (!this.room || event.getRoomId() !== this.room.roomId) {

11
src/plugins/utils.js
View file

@ -548,24 +548,23 @@ class Util {
isChildVisible(parentNode, childNode) { isChildVisible(parentNode, childNode) {
const rect1 = parentNode.getBoundingClientRect(); const rect1 = parentNode.getBoundingClientRect();
const rect2 = childNode.getBoundingClientRect(); const rect2 = childNode.getBoundingClientRect();
var overlap = !(rect1.right < rect2.left || var overlap = !(rect1.right <= rect2.left ||
rect1.left > rect2.right || rect1.left >= rect2.right ||
rect1.bottom < rect2.top || rect1.bottom <= rect2.top ||
rect1.top > rect2.bottom) rect1.top >= rect2.bottom)
return overlap; return overlap;
} }
findOneVisibleElement(parentNode) { findOneVisibleElement(parentNode) {
let start = 0; let start = 0;
let end = parentNode.children.length - 1; let end = parentNode.children.length - 1;
let top = parentNode.scrollTop;
while (start <= end) { while (start <= end) {
let middle = Math.floor((start + end) / 2); let middle = Math.floor((start + end) / 2);
let childNode = parentNode.children[middle]; let childNode = parentNode.children[middle];
if (this.isChildVisible(parentNode, childNode)) { if (this.isChildVisible(parentNode, childNode)) {
// found the key // found the key
return middle; return middle;
} else if (childNode.offsetTop < top) { } else if (childNode.getBoundingClientRect().top <= parentNode.getBoundingClientRect().top) {
// continue searching to the right // continue searching to the right
start = middle + 1; start = middle + 1;
} else { } else {