Make network lobby a separate component
This commit is contained in:
Pavel Djundik
Pavel Djundik
parent
8931570c02
commit
3d43b96d5a
@ -14,7 +14,7 @@
|
||||
class="logo-inverted"
|
||||
alt="The Lounge">
|
||||
</div>
|
||||
<Network
|
||||
<NetworkList
|
||||
:networks="networks"
|
||||
:active-channel="activeChannel"/>
|
||||
</div>
|
||||
@ -93,13 +93,13 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Network from "./Network.vue";
|
||||
import NetworkList from "./NetworkList.vue";
|
||||
import Chat from "./Chat.vue";
|
||||
|
||||
export default {
|
||||
name: "App",
|
||||
components: {
|
||||
Network,
|
||||
NetworkList,
|
||||
Chat,
|
||||
},
|
||||
props: {
|
||||
|
||||
@ -1,121 +1,48 @@
|
||||
<template>
|
||||
<div
|
||||
v-if="!network.isCollapsed || channel.highlight || channel.type === 'lobby'"
|
||||
:class="[ channel.type, { active: activeChannel && channel === activeChannel.channel } ]"
|
||||
:aria-label="channel.name"
|
||||
:title="channel.name"
|
||||
:data-id="channel.id"
|
||||
:data-target="'#chan-' + channel.id"
|
||||
:aria-controls="'#chan-' + channel.id"
|
||||
:aria-selected="activeChannel && channel === activeChannel.channel"
|
||||
class="chan"
|
||||
role="tab"
|
||||
>
|
||||
<template v-if="channel.type === 'lobby'">
|
||||
<button
|
||||
v-if="network.channels.length > 1"
|
||||
:aria-controls="'network-' + network.uuid"
|
||||
:aria-label="getExpandLabel(network)"
|
||||
:aria-expanded="!network.isCollapsed"
|
||||
class="collapse-network"
|
||||
@click.prevent="onCollapseClick"
|
||||
>
|
||||
<span class="collapse-network-icon"/>
|
||||
</button>
|
||||
<ChannelWrapper
|
||||
:network="network"
|
||||
:channel="channel"
|
||||
:active-channel="activeChannel">
|
||||
<span
|
||||
:title="channel.name"
|
||||
class="name">{{ channel.name }}</span>
|
||||
<span
|
||||
v-if="channel.unread"
|
||||
:class="{ highlight: channel.highlight }"
|
||||
class="badge">{{ channel.unread | roundBadgeNumber }}</span>
|
||||
<template v-if="channel.type === 'channel'">
|
||||
<span
|
||||
v-else
|
||||
class="collapse-network"/>
|
||||
<div class="lobby-wrap">
|
||||
<span
|
||||
:title="channel.name"
|
||||
class="name">{{ channel.name }}</span>
|
||||
<span
|
||||
class="not-secure-tooltip tooltipped tooltipped-w"
|
||||
aria-label="Insecure connection">
|
||||
<span class="not-secure-icon"/>
|
||||
</span>
|
||||
<span
|
||||
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">
|
||||
class="close-tooltip tooltipped tooltipped-w"
|
||||
aria-label="Leave">
|
||||
<button
|
||||
:class="['add-channel', { opened: isJoinChannelShown }]"
|
||||
:aria-controls="'join-channel-' + channel.id"
|
||||
:aria-label="joinChannelLabel"
|
||||
@click.stop="$emit('toggleJoinChannel')"/>
|
||||
class="close"
|
||||
aria-label="Leave"/>
|
||||
</span>
|
||||
</template>
|
||||
<template v-else>
|
||||
<span
|
||||
:title="channel.name"
|
||||
class="name">{{ channel.name }}</span>
|
||||
<span
|
||||
v-if="channel.unread"
|
||||
:class="{ highlight: channel.highlight }"
|
||||
class="badge">{{ channel.unread | roundBadgeNumber }}</span>
|
||||
<template v-if="channel.type === 'channel'">
|
||||
<span
|
||||
class="close-tooltip tooltipped tooltipped-w"
|
||||
aria-label="Leave">
|
||||
<button
|
||||
class="close"
|
||||
aria-label="Leave"/>
|
||||
</span>
|
||||
</template>
|
||||
<template v-else>
|
||||
<span
|
||||
class="close-tooltip tooltipped tooltipped-w"
|
||||
aria-label="Close">
|
||||
<button
|
||||
class="close"
|
||||
aria-label="Close"/>
|
||||
</span>
|
||||
</template>
|
||||
class="close-tooltip tooltipped tooltipped-w"
|
||||
aria-label="Close">
|
||||
<button
|
||||
class="close"
|
||||
aria-label="Close"/>
|
||||
</span>
|
||||
</template>
|
||||
</div>
|
||||
</ChannelWrapper>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const storage = require("../js/localStorage");
|
||||
import ChannelWrapper from "./ChannelWrapper.vue";
|
||||
|
||||
export default {
|
||||
name: "Channel",
|
||||
components: {
|
||||
ChannelWrapper,
|
||||
},
|
||||
props: {
|
||||
activeChannel: Object,
|
||||
network: Object,
|
||||
channel: Object,
|
||||
isJoinChannelShown: Boolean,
|
||||
},
|
||||
computed: {
|
||||
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>
|
||||
|
||||
30
client/components/ChannelWrapper.vue
Normal file
30
client/components/ChannelWrapper.vue
Normal file
@ -0,0 +1,30 @@
|
||||
<template>
|
||||
<div
|
||||
v-if="!network.isCollapsed || channel.highlight || channel.type === 'lobby' || (activeChannel && channel === activeChannel.channel)"
|
||||
:class="[ channel.type, { active: activeChannel && channel === activeChannel.channel } ]"
|
||||
:aria-label="channel.name"
|
||||
:title="channel.name"
|
||||
:data-id="channel.id"
|
||||
:data-target="'#chan-' + channel.id"
|
||||
:aria-controls="'#chan-' + channel.id"
|
||||
:aria-selected="activeChannel && channel === activeChannel.channel"
|
||||
class="chan"
|
||||
role="tab"
|
||||
>
|
||||
<slot
|
||||
:network="network"
|
||||
:channel="channel"
|
||||
:activeChannel="activeChannel"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ChannelWrapper",
|
||||
props: {
|
||||
network: Object,
|
||||
channel: Object,
|
||||
activeChannel: Object,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -27,8 +27,7 @@
|
||||
class="network"
|
||||
role="region"
|
||||
>
|
||||
<Channel
|
||||
:channel="network.channels[0]"
|
||||
<NetworkLobby
|
||||
:network="network"
|
||||
:active-channel="activeChannel"
|
||||
:is-join-channel-shown="network.isJoinChannelShown"
|
||||
@ -63,8 +62,9 @@
|
||||
|
||||
<script>
|
||||
import Draggable from "vuedraggable";
|
||||
import JoinChannel from "./JoinChannel.vue";
|
||||
import NetworkLobby from "./NetworkLobby.vue";
|
||||
import Channel from "./Channel.vue";
|
||||
import JoinChannel from "./JoinChannel.vue";
|
||||
|
||||
// TODO: ignoreSortSync should be removed
|
||||
import {findChannel} from "../js/vue";
|
||||
@ -72,9 +72,10 @@ import socket from "../js/socket";
|
||||
// import options from "../js/options";
|
||||
|
||||
export default {
|
||||
name: "Network",
|
||||
name: "NetworkList",
|
||||
components: {
|
||||
JoinChannel,
|
||||
NetworkLobby,
|
||||
Channel,
|
||||
Draggable,
|
||||
},
|
||||
88
client/components/NetworkLobby.vue
Normal file
88
client/components/NetworkLobby.vue
Normal file
@ -0,0 +1,88 @@
|
||||
<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
|
||||
class="not-secure-tooltip tooltipped tooltipped-w"
|
||||
aria-label="Insecure connection">
|
||||
<span class="not-secure-icon"/>
|
||||
</span>
|
||||
<span
|
||||
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>
|
||||
Loading…
Reference in New Issue
Block a user