Improvements to mentions window

- Add hide all button
- Only show overflow scroll when necessary
- Fix key in v-for loop
- Increase window height if browser size allows for it
This commit is contained in:
Pavel Djundik 2020-07-19 17:29:52 +03:00
parent cf4a776a93
commit 531ea920e0
2 changed files with 31 additions and 3 deletions

View file

@ -8,13 +8,20 @@
<div class="mentions-popup">
<div class="mentions-popup-title">
Recent mentions
<button
v-if="resolvedMessages.length"
class="btn hide-all-mentions"
@click="hideAllMentions()"
>
Hide all
</button>
</div>
<template v-if="resolvedMessages.length === 0">
<p v-if="isLoading">Loading</p>
<p v-else>There are no recent mentions.</p>
<p v-else>You have no recent mentions.</p>
</template>
<template v-for="message in resolvedMessages" v-else>
<div :key="message.id" :class="['msg', message.type]">
<div :key="message.msgId" :class="['msg', message.type]">
<div class="mentions-info">
<div>
<span class="from">
@ -62,12 +69,14 @@
right: 80px;
top: 55px;
max-height: 400px;
overflow-y: scroll;
overflow-y: auto;
z-index: 2;
padding: 10px;
}
.mentions-popup > .mentions-popup-title {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
font-size: 20px;
}
@ -106,6 +115,17 @@
color: var(--link-color);
}
.mentions-popup .hide-all-mentions {
margin: 0;
padding: 4px 6px;
}
@media (min-height: 500px) {
.mentions-popup {
max-height: 60vh;
}
}
@media (max-width: 768px) {
.mentions-popup {
border-radius: 0;
@ -179,6 +199,10 @@ export default {
socket.emit("mentions:hide", message.msgId);
},
hideAllMentions() {
this.$store.state.mentions = [];
socket.emit("mentions:hide_all");
},
containerClick(event) {
if (event.currentTarget === event.target) {
this.isOpen = false;

View file

@ -548,6 +548,10 @@ function initializeClient(socket, client, token, lastMessage, openChannel) {
);
});
socket.on("mentions:hide_all", () => {
client.mentions = [];
});
if (!Helper.config.public) {
socket.on("push:register", (subscription) => {
if (!Object.prototype.hasOwnProperty.call(client.config.sessions, token)) {