Some fixes in mentions window

This commit is contained in:
Pavel Djundik 2020-04-20 13:40:45 +03:00
parent 89edc6aa30
commit bcd2e7cb08
2 changed files with 38 additions and 20 deletions

View File

@ -3,7 +3,7 @@
v-if="isOpen" v-if="isOpen"
id="mentions-popup-container" id="mentions-popup-container"
@click="containerClick" @click="containerClick"
@contextmenu.prevent="containerClick" @contextmenu="containerClick"
> >
<div class="mentions-popup"> <div class="mentions-popup">
<div class="mentions-popup-title"> <div class="mentions-popup-title">
@ -15,24 +15,32 @@
</template> </template>
<template v-for="message in resolvedMessages" v-else> <template v-for="message in resolvedMessages" v-else>
<div :key="message.id" :class="['msg', message.type]"> <div :key="message.id" :class="['msg', message.type]">
<span class="from"> <div class="mentions-info">
<Username :user="message.from" /> <div>
<template v-if="message.channel"> <span class="from">
in {{ message.channel.channel.name }} on <Username :user="message.from" />
{{ message.channel.network.name }} <template v-if="message.channel">
</template> in {{ message.channel.channel.name }} on
<template v-else> {{ message.channel.network.name }}
in unknown channel </template>
</template> <template v-else>
</span> in unknown channel
<span :title="message.time | localetime" class="time"> </template>
{{ messageTime(message.time) }} </span>
</span> <span :title="message.localetime" class="time">
<button {{ messageTime(message.time) }}
class="msg-hide" </span>
aria-label="Hide this mention" </div>
@click="hideMention(message)" <div>
></button> <span class="close-tooltip tooltipped tooltipped-w" aria-label="Close">
<button
class="msg-hide"
aria-label="Hide this mention"
@click="hideMention(message)"
></button>
</span>
</div>
</div>
<div class="content" dir="auto"> <div class="content" dir="auto">
<ParsedMessage :network="null" :message="message" /> <ParsedMessage :network="null" :message="message" />
</div> </div>
@ -64,6 +72,11 @@
font-size: 20px; font-size: 20px;
} }
.mentions-popup .mentions-info {
display: flex;
justify-content: space-between;
}
.mentions-popup .msg { .mentions-popup .msg {
margin-bottom: 15px; margin-bottom: 15px;
user-select: text; user-select: text;
@ -89,6 +102,10 @@
content: "×"; content: "×";
} }
.mentions-popup .msg-hide:hover {
color: var(--link-color);
}
@media (max-width: 768px) { @media (max-width: 768px) {
.mentions-popup { .mentions-popup {
border-radius: 0; border-radius: 0;
@ -108,6 +125,7 @@
import Username from "./Username.vue"; import Username from "./Username.vue";
import ParsedMessage from "./ParsedMessage.vue"; import ParsedMessage from "./ParsedMessage.vue";
import socket from "../js/socket"; import socket from "../js/socket";
import localetime from "../js/helpers/localetime";
import dayjs from "dayjs"; import dayjs from "dayjs";
import relativeTime from "dayjs/plugin/relativeTime"; import relativeTime from "dayjs/plugin/relativeTime";
@ -130,6 +148,7 @@ export default {
const messages = this.$store.state.mentions.slice().reverse(); const messages = this.$store.state.mentions.slice().reverse();
for (const message of messages) { for (const message of messages) {
message.localetime = localetime(message.time);
message.channel = this.$store.getters.findChannel(message.chanId); message.channel = this.$store.getters.findChannel(message.chanId);
} }

View File

@ -549,7 +549,6 @@ function initializeClient(socket, client, token, lastMessage, openChannel) {
client.mentions.findIndex((m) => m.msgId === msgId), client.mentions.findIndex((m) => m.msgId === msgId),
1 1
); );
// TODO: emit to other clients?
}); });
if (!Helper.config.public) { if (!Helper.config.public) {