hardlounge/client/components/Chat.vue

143 lines
3.1 KiB
Vue

<template>
<div
id="chat-container"
class="window"
>
<div
id="chat"
:data-id="channel.id"
:class="{
'hide-motd': !this.$root.settings.motd,
'colored-nicks': this.$root.settings.coloredNicks,
'show-seconds': this.$root.settings.showSeconds,
}"
>
<div
:id="'chan-' + channel.id"
:class="[channel.type, 'chan', 'active']"
:data-id="channel.id"
:data-type="channel.type"
:aria-label="channel.name"
role="tabpanel"
>
<div class="header">
<button
class="lt"
aria-label="Toggle channel list"
/>
<span class="title">{{ channel.name }}</span>
<span
:title="channel.topic"
class="topic"
><ParsedMessage
v-if="channel.topic"
:network="network"
:text="channel.topic"
/></span>
<button
class="menu"
aria-label="Open the context menu"
/>
<span
v-if="channel.type === 'channel'"
class="rt-tooltip tooltipped tooltipped-w"
aria-label="Toggle user list"
>
<button
class="rt"
aria-label="Toggle user list"
/>
</span>
</div>
<div
v-if="channel.type === 'special'"
class="chat-content"
>
<div class="chat">
<div class="messages">
<div class="msg">
<Component
:is="specialComponent"
:network="network"
:channel="channel"
/>
</div>
</div>
</div>
</div>
<div
v-else
class="chat-content"
>
<div
:class="['scroll-down tooltipped tooltipped-w', {'scroll-down-shown': !channel.scrolledToBottom}]"
aria-label="Jump to recent messages"
@click="$refs.messageList.jumpToBottom()"
>
<div class="scroll-down-arrow" />
</div>
<MessageList
ref="messageList"
:network="network"
:channel="channel"
/>
<ChatUserList
v-if="channel.type === 'channel'"
:channel="channel"
/>
</div>
</div>
</div>
<div
v-if="this.$root.currentUserVisibleError"
id="user-visible-error"
@click="hideUserVisibleError"
>{{ this.$root.currentUserVisibleError }}</div>
<span id="upload-progressbar" />
<ChatInput
:network="network"
:channel="channel"
/>
</div>
</template>
<script>
import ParsedMessage from "./ParsedMessage.vue";
import MessageList from "./MessageList.vue";
import ChatInput from "./ChatInput.vue";
import ChatUserList from "./ChatUserList.vue";
import ListBans from "./Special/ListBans.vue";
import ListChannels from "./Special/ListChannels.vue";
import ListIgnored from "./Special/ListIgnored.vue";
export default {
name: "Chat",
components: {
ParsedMessage,
MessageList,
ChatInput,
ChatUserList,
},
props: {
network: Object,
channel: Object,
},
computed: {
specialComponent() {
switch (this.channel.special) {
case "list_bans": return ListBans;
case "list_channels": return ListChannels;
case "list_ignored": return ListIgnored;
}
return undefined;
},
},
methods: {
hideUserVisibleError() {
this.$root.currentUserVisibleError = null;
},
},
};
</script>