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:
parent
cf4a776a93
commit
531ea920e0
@ -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;
|
||||
|
@ -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)) {
|
||||
|
Loading…
Reference in New Issue
Block a user