Small delay on hint

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

View file

@ -20,8 +20,8 @@
<v-icon class="icon-dropdown" size="11">$vuetify.icons.ic_dropdown</v-icon>
<div :class="{ 'notification-alert': true, 'popup-open': showMissedItemsInfo }" v-if="notifications">
<!-- MISSED ITEMS POPUP -->
<div class="missed-items-popup-background" v-if="showMissedItemsInfo" @click.stop=""></div>
<div class="missed-items-popup" v-if="showMissedItemsInfo">
<!-- <div class="missed-items-popup-background" v-if="showMissedItemsInfo" @click.stop="setHasShownMissedItemsHint()"></div> -->
<div class="missed-items-popup" v-if="showMissedItemsInfo" @click.stop="setHasShownMissedItemsHint()">
<div class="text">{{ notificationsText }}</div>
<div class="button clickable" @click.stop="setHasShownMissedItemsHint()">{{$t('menu.ok')}}</div>
</div>
@ -100,12 +100,16 @@ export default {
showPurgeConfirmation: false,
showMoreMenu: false,
downloadingChat: false,
hasShownMissedItemsInfo: false,
showMissedItemsInfo: false,
/** Timer for showing the "missed items" hint */
timerMissedItems: null
};
},
mounted() {
this.$matrix.on("Room.timeline", this.onEvent);
this.showMissedItemsInfo = this.$store.state.hasShownMissedItemsHint !== "1";
this.hasShownMissedItemsInfo = this.$store.state.hasShownMissedItemsHint === "1";
this.updateMemberCount();
},
@ -138,7 +142,7 @@ export default {
return null;
},
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;
},
notificationsText() {
@ -146,7 +150,7 @@ export default {
if (invitationCount > 0) {
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) {
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: {
setHasShownMissedItemsHint() {
this.$store.commit('setHasShownMissedItemsHint', "1");
this.showMissedItemsInfo = false;
this.hasShownMissedItemsInfo = true;
},
onEvent(event) {
if (!this.room || event.getRoomId() !== this.room.roomId) {

View file

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