99 lines
2.4 KiB
Vue
99 lines
2.4 KiB
Vue
<template>
|
|
<ChannelWrapper
|
|
:network="network"
|
|
:channel="channel"
|
|
:active-channel="activeChannel"
|
|
>
|
|
<button
|
|
v-if="network.channels.length > 1"
|
|
:aria-controls="'network-' + network.uuid"
|
|
:aria-label="getExpandLabel(network)"
|
|
:aria-expanded="!network.isCollapsed"
|
|
class="collapse-network"
|
|
@click.stop="onCollapseClick"
|
|
><span class="collapse-network-icon" /></button>
|
|
<span
|
|
v-else
|
|
class="collapse-network"
|
|
/>
|
|
<div class="lobby-wrap">
|
|
<span
|
|
:title="channel.name"
|
|
class="name"
|
|
>{{ channel.name }}</span>
|
|
<span
|
|
v-if="network.status.connected && !network.status.secure"
|
|
class="not-secure-tooltip tooltipped tooltipped-w"
|
|
aria-label="Insecure connection"
|
|
>
|
|
<span class="not-secure-icon" />
|
|
</span>
|
|
<span
|
|
v-if="!network.status.connected"
|
|
class="not-connected-tooltip tooltipped tooltipped-w"
|
|
aria-label="Disconnected"
|
|
>
|
|
<span class="not-connected-icon" />
|
|
</span>
|
|
<span
|
|
v-if="channel.unread"
|
|
:class="{ highlight: channel.highlight }"
|
|
class="badge"
|
|
>{{ channel.unread | roundBadgeNumber }}</span>
|
|
</div>
|
|
<span
|
|
:aria-label="joinChannelLabel"
|
|
class="add-channel-tooltip tooltipped tooltipped-w tooltipped-no-touch"
|
|
>
|
|
<button
|
|
:class="['add-channel', { opened: isJoinChannelShown }]"
|
|
:aria-controls="'join-channel-' + channel.id"
|
|
:aria-label="joinChannelLabel"
|
|
@click.stop="$emit('toggleJoinChannel')"
|
|
/>
|
|
</span>
|
|
</ChannelWrapper>
|
|
</template>
|
|
|
|
<script>
|
|
import ChannelWrapper from "./ChannelWrapper.vue";
|
|
const storage = require("../js/localStorage");
|
|
|
|
export default {
|
|
name: "Channel",
|
|
components: {
|
|
ChannelWrapper,
|
|
},
|
|
props: {
|
|
activeChannel: Object,
|
|
network: Object,
|
|
isJoinChannelShown: Boolean,
|
|
},
|
|
computed: {
|
|
channel() {
|
|
return this.network.channels[0];
|
|
},
|
|
joinChannelLabel() {
|
|
return this.isJoinChannelShown ? "Cancel" : "Join a channel…";
|
|
},
|
|
},
|
|
methods: {
|
|
onCollapseClick() {
|
|
const networks = new Set(JSON.parse(storage.get("thelounge.networks.collapsed")));
|
|
this.network.isCollapsed = !this.network.isCollapsed;
|
|
|
|
if (this.network.isCollapsed) {
|
|
networks.add(this.network.uuid);
|
|
} else {
|
|
networks.delete(this.network.uuid);
|
|
}
|
|
|
|
storage.set("thelounge.networks.collapsed", JSON.stringify([...networks]));
|
|
},
|
|
getExpandLabel(network) {
|
|
return network.isCollapsed ? "Expand" : "Collapse";
|
|
},
|
|
},
|
|
};
|
|
</script>
|