mirror of
https://github.com/danbulant/Nertivia-Client
synced 2026-06-17 13:31:11 +00:00
a lot of progress in servers
This commit is contained in:
supertiger1234
parent
f4a6f5866a
commit
62f725522a
26 changed files with 1101 additions and 318 deletions
6
.vs/VSWorkspaceState.json
Normal file
6
.vs/VSWorkspaceState.json
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
{
|
||||
"ExpandedNodes": [
|
||||
""
|
||||
],
|
||||
"PreviewInSolutionExplorer": false
|
||||
}
|
||||
BIN
.vs/slnx.sqlite
Normal file
BIN
.vs/slnx.sqlite
Normal file
Binary file not shown.
|
|
@ -39,6 +39,7 @@ export default {
|
|||
name: "cute",
|
||||
emotePath: this.flower
|
||||
};
|
||||
return ""
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -75,38 +76,16 @@ export default {
|
|||
margin-left: 0;
|
||||
flex-shrink: 0;
|
||||
margin: auto;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
#ffd828 1%,
|
||||
#ffd828 40%,
|
||||
#ffd828 50%,
|
||||
#ffe87f 60%,
|
||||
#ffd828 99%,
|
||||
#ffd828 100%,
|
||||
#ffd828 100%
|
||||
);
|
||||
background-size: 400% 400%;
|
||||
background: #ffd828 100%;
|
||||
|
||||
|
||||
animation: Anime 4s ease infinite;
|
||||
}
|
||||
.cute {
|
||||
margin-right: 5px;
|
||||
margin-left: 0;
|
||||
flex-shrink: 0;
|
||||
margin: auto;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
#ffb7ed 1%,
|
||||
#ffb7ed 40%,
|
||||
#ffb7ed 50%,
|
||||
#ffe2f8 60%,
|
||||
#ffb7ed 99%,
|
||||
#ffb7ed 100%,
|
||||
#ffb7ed 100%
|
||||
);
|
||||
background-size: 400% 400%;
|
||||
|
||||
animation: Anime 4s ease infinite;
|
||||
background: #ffb7ed;
|
||||
}
|
||||
.cute .emote {
|
||||
z-index: 999;
|
||||
|
|
@ -114,17 +93,6 @@ export default {
|
|||
left: -3px;
|
||||
}
|
||||
|
||||
@keyframes Anime {
|
||||
0% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
100% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
}
|
||||
.emote {
|
||||
position: absolute;
|
||||
height: 20px;
|
||||
|
|
|
|||
32
src/components/app/MembersList.vue
Normal file
32
src/components/app/MembersList.vue
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
<template>
|
||||
<div class="members-list">
|
||||
<div class="header">
|
||||
<div class="title">Members</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<style scoped>
|
||||
|
||||
.members-list {
|
||||
color: white;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: rgba(0, 0, 0, 0.671);
|
||||
width: 300px;
|
||||
height: 100%;
|
||||
}
|
||||
.header {
|
||||
height: 40px;
|
||||
width: 100%;
|
||||
background: rgba(0, 0, 0, 0.438);
|
||||
display: flex;
|
||||
}
|
||||
.header .title {
|
||||
user-select: none;
|
||||
font-size: 19px;
|
||||
margin: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -1,20 +1,11 @@
|
|||
<template>
|
||||
<div class="right-panel">
|
||||
<div class="heading">
|
||||
<div class="show-menu-button" @click="toggleLeftMenu">
|
||||
<i class="material-icons">menu</i>
|
||||
</div>
|
||||
<div class="current-channel">
|
||||
<span class="channel-name" v-if="!selectedChannelID">Welcome back, {{user.username}}!</span>
|
||||
<span class="channel-selected" v-else>
|
||||
<div
|
||||
class="user-status"
|
||||
:style="`box-shadow: 0px 0px 14px 3px ${userStatusColor}; background-color: ${userStatusColor};`"
|
||||
></div>
|
||||
<div class="channel-name">{{channelName}}</div>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<heading
|
||||
:uniqueID="recipients && recipients.length ? recipients[0].uniqueID : undefined"
|
||||
:type="selectedChannelID && channel && !channel.server_id ? 1 : 0"
|
||||
:status-color="userStatusColor"
|
||||
:name="selectedChannelID ? channelName : `Welcome back, ${user.username}!` "
|
||||
/>
|
||||
<div class="loading" v-if="selectedChannelID && !selectedChannelMessages">
|
||||
<spinner/>
|
||||
</div>
|
||||
|
|
@ -74,9 +65,10 @@
|
|||
</div>
|
||||
<div class="info">
|
||||
<div class="typing-outer">
|
||||
<transition name="typing-animate">
|
||||
<typing-status v-if="typing" :username="whosTyping"/>
|
||||
</transition>
|
||||
<typing-status
|
||||
v-if="typingRecipients[selectedChannelID]"
|
||||
:recipients="typingRecipients[selectedChannelID]"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
:class="{'message-count': true, 'error-info': messageLength > 5000 }"
|
||||
|
|
@ -96,6 +88,7 @@ import Message from "../../components/app/MessageTemplate.vue";
|
|||
import Spinner from "@/components/Spinner.vue";
|
||||
import TypingStatus from "@/components/app/TypingStatus.vue";
|
||||
import uploadsQueue from "@/components/app/uploadsQueue.vue";
|
||||
import heading from "@/components/app/MessagePanel/Heading.vue";
|
||||
import emojiSuggestions from "@/components/app/EmojiPanels/emojiSuggestions.vue";
|
||||
import emojiParser from "@/utils/emojiParser.js";
|
||||
import statuses from "@/utils/statuses";
|
||||
|
|
@ -109,23 +102,21 @@ export default {
|
|||
TypingStatus,
|
||||
uploadsQueue,
|
||||
emojiSuggestions,
|
||||
emojiPanel
|
||||
emojiPanel,
|
||||
heading
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
message: "",
|
||||
messageLength: 0,
|
||||
postTimerID: null,
|
||||
getTimerID: null,
|
||||
typingTimer: null,
|
||||
typing: false,
|
||||
whosTyping: "",
|
||||
typingRecipients: {},
|
||||
showEmojiPanel: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
toggleLeftMenu() {
|
||||
bus.$emit("toggleLeftMenu");
|
||||
},
|
||||
generateNum(n) {
|
||||
var add = 1,
|
||||
max = 12 - add; // 12 is the min safe number Math.random() can generate without it starting to pad the end with zeros.
|
||||
|
|
@ -193,13 +184,18 @@ export default {
|
|||
}
|
||||
},
|
||||
async postTimer() {
|
||||
this.postTimerID = setInterval(async () => {
|
||||
|
||||
|
||||
this.postTimerID = setTimeout(async () => {
|
||||
if (this.message.trim() == "") {
|
||||
clearInterval(this.postTimerID);
|
||||
return (this.postTimerID = null);
|
||||
this.postTimerID = null;
|
||||
}else {
|
||||
await typingService.post(this.selectedChannelID);
|
||||
this.postTimer()
|
||||
}
|
||||
await typingService.post(this.selectedChannelID);
|
||||
}, 2000);
|
||||
}, 2000)
|
||||
|
||||
},
|
||||
|
||||
resize(event) {
|
||||
|
|
@ -336,7 +332,14 @@ export default {
|
|||
},
|
||||
hideTypingStatus(data) {
|
||||
if (this.user.uniqueID === data.message.creator.uniqueID) return;
|
||||
this.typing = false;
|
||||
clearTimeout(
|
||||
this.typingRecipients[data.channelID][data.message.creator.uniqueID]
|
||||
.timer
|
||||
);
|
||||
this.$delete(
|
||||
this.typingRecipients[data.channelID],
|
||||
data.message.creator.uniqueID
|
||||
);
|
||||
},
|
||||
attachmentButton() {
|
||||
this.$refs.sendFileBrowse.click();
|
||||
|
|
@ -378,24 +381,50 @@ export default {
|
|||
},
|
||||
mounted() {
|
||||
this.$options.sockets.typingStatus = data => {
|
||||
const { channelID, userID } = data;
|
||||
if (channelID !== this.selectedChannelID) return;
|
||||
this.typing = true;
|
||||
this.whosTyping = this.channel.recipients.find(function(recipient) {
|
||||
return recipient.uniqueID == userID;
|
||||
}).username;
|
||||
clearTimeout(this.getTimerID);
|
||||
this.getTimerID = setTimeout(() => {
|
||||
this.typing = false;
|
||||
}, 2500);
|
||||
const { channel_id, user } = data;
|
||||
const typingRecipients = this.typingRecipients[channel_id];
|
||||
|
||||
if (
|
||||
this.selectedChannelID !== channel_id ||
|
||||
user.unique_id === this.user.uniqueID
|
||||
)
|
||||
return;
|
||||
|
||||
if (typingRecipients === undefined) {
|
||||
this.$set(this.typingRecipients, channel_id, {
|
||||
[user.unique_id]: { username: user.username }
|
||||
});
|
||||
} else if (!typingRecipients[user.unique_id]) {
|
||||
this.$set(this.typingRecipients[channel_id], user.unique_id, {
|
||||
username: user.username
|
||||
});
|
||||
}
|
||||
|
||||
clearTimeout(this.typingRecipients[channel_id][user.unique_id].timer);
|
||||
|
||||
this.typingRecipients[channel_id][user.unique_id].timer = setTimeout(
|
||||
() => {
|
||||
this.$delete(this.typingRecipients[channel_id], user.unique_id);
|
||||
},
|
||||
2500
|
||||
);
|
||||
};
|
||||
|
||||
bus.$on("newMessage", this.hideTypingStatus);
|
||||
bus.$on("emojiSuggestions:Selected", this.enterEmojiSuggestion);
|
||||
bus.$on("emojiPanel:Selected", this.enterEmojiPanel);
|
||||
//dismiss notification on focus
|
||||
window.onfocus = () => {
|
||||
window.onblur = () => {
|
||||
clearTimeout(this.postTimerID);
|
||||
this.postTimerID = null;
|
||||
}
|
||||
window.onfocus = async () => {
|
||||
if (this.message.trim() !== "") {
|
||||
await typingService.post(this.selectedChannelID);
|
||||
this.postTimer();
|
||||
}
|
||||
bus.$emit("title:change", "Nertivia");
|
||||
if (!this.$store.getters.selectedChannelID) return;
|
||||
//dismiss notification on focus
|
||||
const find = this.$store.getters.notifications.find(notification => {
|
||||
return notification.channelID === this.$store.getters.selectedChannelID;
|
||||
});
|
||||
|
|
@ -406,7 +435,10 @@ export default {
|
|||
}
|
||||
};
|
||||
},
|
||||
|
||||
beforeDestroy() {
|
||||
clearTimeout(this.postTimerID);
|
||||
this.postTimerID = null;
|
||||
bus.$off("newMessage", this.hideTypingStatus);
|
||||
bus.$off("emojiSuggestions:Selected", this.enterEmojiSuggestion);
|
||||
bus.$on("emojiPanel:Selected", this.enterEmojiPanel);
|
||||
|
|
@ -449,12 +481,17 @@ export default {
|
|||
emojiIndex() {
|
||||
return this.$store.getters.getEmojiIndex;
|
||||
},
|
||||
recipients() {
|
||||
const selectedChannel = this.$store.getters.selectedChannelID;
|
||||
const channel = this.$store.getters.channels[selectedChannel];
|
||||
return channel ? channel.recipients : undefined;
|
||||
},
|
||||
userStatusColor() {
|
||||
const selectedChannel = this.$store.getters.selectedChannelID;
|
||||
const channel = this.$store.getters.channels[selectedChannel];
|
||||
|
||||
let status = 0;
|
||||
if (!channel) {
|
||||
if (!channel || !channel.recipients || !channel.recipients.length) {
|
||||
status = 0;
|
||||
} else if (
|
||||
this.$store.getters.user.friends[channel.recipients[0].uniqueID]
|
||||
|
|
@ -464,14 +501,6 @@ export default {
|
|||
.recipient.status || 0;
|
||||
}
|
||||
return statuses[status].color;
|
||||
|
||||
// const allFriends = this.$store.getters.user.friends;
|
||||
// const selectedChannel = this.$store.getters.selectedChannelID;
|
||||
// const arr = Object.keys(allFriends).map(el => allFriends[el]);
|
||||
// const find = arr.find(el => el.channelID === selectedChannel);
|
||||
// console.log(find)
|
||||
// if (!find) return statuses[0].color;
|
||||
// return statuses[find.recipient.status || 0].color;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -500,71 +529,19 @@ export default {
|
|||
}
|
||||
.channel-selected {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
.user-status {
|
||||
border-radius: 4px;
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
margin-right: 10px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
.typing-animate-enter-active {
|
||||
transition: 0.1s;
|
||||
}
|
||||
.typing-animate-enter /* .fade-leave-active below version 2.1.8 */ {
|
||||
opacity: 0;
|
||||
transform: translateY(3px);
|
||||
}
|
||||
.typing-animate-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
|
||||
.error-info {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.heading {
|
||||
padding: 5px;
|
||||
background: rgba(0, 0, 0, 0.185);
|
||||
margin-bottom: 0;
|
||||
height: 40px;
|
||||
padding-bottom: 2spx;
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.show-menu-button {
|
||||
display: inline-block;
|
||||
margin: auto;
|
||||
color: white;
|
||||
margin-left: 10px;
|
||||
margin-right: 5px;
|
||||
margin-top: 8px;
|
||||
user-select: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.heading .current-channel {
|
||||
color: white;
|
||||
font-size: 20px;
|
||||
margin: auto;
|
||||
margin-left: 5px;
|
||||
flex: 1;
|
||||
padding: 5px;
|
||||
}
|
||||
.current-channel .channel-name {
|
||||
display: block;
|
||||
height: 26px;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
width: calc(100% - 17px);
|
||||
}
|
||||
|
||||
.right-panel {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
|
@ -649,7 +626,6 @@ export default {
|
|||
resize: none;
|
||||
border: none;
|
||||
outline: none;
|
||||
padding-left: 10px;
|
||||
transition: 0.3s;
|
||||
height: 1em;
|
||||
overflow: hidden;
|
||||
|
|
@ -718,10 +694,4 @@ export default {
|
|||
.emojis-button:hover {
|
||||
background: rgba(0, 0, 0, 0.514);
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.show-menu-button {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
|||
102
src/components/app/MessagePanel/Heading.vue
Normal file
102
src/components/app/MessagePanel/Heading.vue
Normal file
|
|
@ -0,0 +1,102 @@
|
|||
<template>
|
||||
<div class="heading">
|
||||
<div class="show-menu-button" @click="toggleLeftMenu">
|
||||
<i class="material-icons">menu</i>
|
||||
</div>
|
||||
<div
|
||||
v-if="type === 1"
|
||||
class="user-status"
|
||||
:style="`box-shadow: 0px 0px 14px 3px ${statusColor}; background-color: ${statusColor};`"/>
|
||||
<div class="information">
|
||||
<div :class="{name: true, clickable: !!uniqueID }" @click="openUserInfoPanel">{{name}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { bus } from "@/main";
|
||||
export default {
|
||||
props: [
|
||||
"type", // 0: without online status; 1: with online status
|
||||
"statusColor", // only if type is set to 1;
|
||||
"name",
|
||||
"uniqueID"
|
||||
],
|
||||
methods: {
|
||||
openUserInfoPanel() {
|
||||
if (this.uniqueID)
|
||||
this.$store.dispatch("setUserInformationPopout", this.uniqueID);
|
||||
},
|
||||
toggleLeftMenu() {
|
||||
bus.$emit("toggleLeftMenu");
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.heading {
|
||||
background: rgba(0, 0, 0, 0.185);
|
||||
margin-bottom: 0;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
padding-left: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
.show-menu-button {
|
||||
display: inline-block;
|
||||
margin-right: 5px;
|
||||
margin-top: 3px;
|
||||
user-select: none;
|
||||
display: none;
|
||||
}
|
||||
.show-menu-button .material-icons {
|
||||
color: rgb(207, 207, 207);
|
||||
transition: 0.3s;
|
||||
}
|
||||
.show-menu-button .material-icons:hover {
|
||||
color: rgb(255, 255, 255);
|
||||
}
|
||||
.information {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.name {
|
||||
color: white;
|
||||
font-size: 20px;
|
||||
width: 10px;
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.user-status {
|
||||
border-radius: 4px;
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
margin-right: 10px;
|
||||
margin-left: 5px;
|
||||
flex-shrink: 0;
|
||||
transition: 0.3s;
|
||||
}
|
||||
.clickable {
|
||||
color: white;
|
||||
transition: 0.3s;
|
||||
cursor: default;
|
||||
}
|
||||
.clickable:hover {
|
||||
color: rgb(219, 219, 219);
|
||||
text-decoration: underline;
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.show-menu-button {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -57,7 +57,7 @@ export default {
|
|||
],
|
||||
methods: {
|
||||
openUserInformation() {
|
||||
this.$store.dispatch('setUserInformationPopout', this.uniqueID)
|
||||
this.$store.dispatch('setUserInformationPopout', this.uniqueID)
|
||||
},
|
||||
imageClicked(event) {
|
||||
this.$store.dispatch("setImagePreviewURL", event.target.src);
|
||||
|
|
@ -140,8 +140,6 @@ export default {
|
|||
|
||||
.message {
|
||||
margin: 10px;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
display: flex;
|
||||
|
||||
animation: showMessage 0.3s ease-in-out;
|
||||
|
|
@ -203,20 +201,14 @@ export default {
|
|||
}
|
||||
|
||||
.avatar {
|
||||
margin: auto;
|
||||
margin-left: 0;
|
||||
margin-right: 5px;
|
||||
margin-bottom: 0;
|
||||
margin: auto 5px 0 0;
|
||||
}
|
||||
|
||||
.triangle {
|
||||
display: flex;
|
||||
justify-content: bottom;
|
||||
flex-direction: column;
|
||||
margin: auto;
|
||||
margin-left: 0;
|
||||
margin-right: 0px;
|
||||
margin-bottom: 8.7px;
|
||||
margin: auto 0 8.7px 0;
|
||||
}
|
||||
.triangle-inner {
|
||||
width: 0;
|
||||
|
|
@ -235,9 +227,7 @@ export default {
|
|||
flex-direction: column;
|
||||
border-radius: 10px;
|
||||
color: rgb(231, 231, 231);
|
||||
margin: auto;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
margin: auto 0;
|
||||
transition: 1s;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
|
@ -265,9 +255,7 @@ export default {
|
|||
.username {
|
||||
color: rgb(219, 219, 219);
|
||||
font-size: 14px;
|
||||
margin: auto;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
margin: auto 0;
|
||||
transition: 0.1s;
|
||||
cursor: default;
|
||||
}
|
||||
|
|
@ -278,8 +266,7 @@ export default {
|
|||
.date {
|
||||
color: rgb(161, 161, 161);
|
||||
font-size: 10px;
|
||||
margin: auto;
|
||||
margin-left: 5px;
|
||||
margin: auto auto auto 5px;
|
||||
}
|
||||
.content-message {
|
||||
word-wrap: break-word;
|
||||
|
|
@ -299,9 +286,7 @@ export default {
|
|||
padding-bottom: 5px;
|
||||
font-size: 15px;
|
||||
color: white;
|
||||
margin: auto;
|
||||
margin-left: 4px;
|
||||
margin-bottom: 0;
|
||||
margin: auto auto 0 4px;
|
||||
user-select: none;
|
||||
transition: 0.5;
|
||||
align-content: center;
|
||||
|
|
|
|||
|
|
@ -8,7 +8,8 @@
|
|||
<drag-drop-file-upload-dialog key="ddfud" v-if="showUploadDrapDrop"/>
|
||||
<user-information-popout key="uip" v-if="popouts.userInformationPopoutID"/>
|
||||
<take-survey-popout key="tsp" v-if="popouts.surveyPopout"/>
|
||||
<AddServer key="as" v-if="false"/>
|
||||
<add-server key="as" v-if="popouts.addServer"/>
|
||||
<server-invite key="sip" v-if="popouts.showServerInviteMenu" />
|
||||
</transition-group>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -24,6 +25,7 @@
|
|||
const GDriveLinkMenu = () => import('./Popouts/GDriveLinkMenu.vue');
|
||||
const imageLargePreview = () => import('./Popouts/imageLargePreview.vue');
|
||||
const DragDropFileUploadDialog = () => import('./Popouts/DragDropFileUploadDialog.vue');
|
||||
const ServerInvitePopout = () => import('./Popouts/ServerInvitePopout.vue');
|
||||
|
||||
|
||||
|
||||
|
|
@ -36,7 +38,8 @@ export default {
|
|||
DragDropFileUploadDialog,
|
||||
imageLargePreview,
|
||||
TakeSurveyPopout,
|
||||
AddServer
|
||||
AddServer,
|
||||
ServerInvite: ServerInvitePopout
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -1,20 +1,76 @@
|
|||
<template>
|
||||
<div class="dark-background" @click="backgroundClick">
|
||||
<div class="dark-background" @mousedown="backgroundClick">
|
||||
<div class="inner">
|
||||
|
||||
<div class="tabs">
|
||||
<div :class="{tab: true, selected: tab == 0}" @click="tab = 0; slideBack(); ">Create</div>
|
||||
<div :class="{tab: true, selected: tab == 1 || tab == 2}" @click="tab = 1; slideForward();">Join</div>
|
||||
</div>
|
||||
<transition-group tag="div" class="slider" :name="slideInDirection">
|
||||
<div class="content" v-if="tab == 0" key="add-server">
|
||||
<div class="title">Set your server's avatar</div>
|
||||
<profile-picture class="avatar" size="90px" :url="tempImage"/>
|
||||
<div class="button">Browse Avatar Coming Soon!</div>
|
||||
<div class="input">
|
||||
<div class="input-name">Server Name</div>
|
||||
<input type="text" v-model="serverName" placeholder="Server Name">
|
||||
</div>
|
||||
<span v-if="serverNameError" class="warn">{{serverNameError}}</span>
|
||||
<div class="button create-button" @click="createButton">Create</div>
|
||||
</div>
|
||||
<div class="content" v-if="tab == 1" key="check-invite">
|
||||
<i class="material-icons icon">forum</i>
|
||||
<div class="title">Join A Server</div>
|
||||
<div class="input">
|
||||
<div class="input-name">
|
||||
Invite Code
|
||||
<span v-if="inviteCodeError" class="warn">- {{inviteCodeError}}</span>
|
||||
</div>
|
||||
<input type="text" v-model="inviteCode" placeholder="Invite code">
|
||||
</div>
|
||||
<div class="button check-button" @click="checkInviteCode">Check</div>
|
||||
</div>
|
||||
<div class="content server" v-if="tab == 2" key="join-server">
|
||||
<profile-picture class="avatar" size="100px" :url="tempImage"/>
|
||||
<div class="server-name">{{server.name}}</div>
|
||||
<div class="buttons">
|
||||
<div class="button join-button" @click="joinButton" v-if="!servers[server.server_id]">Join {{server.name}}</div>
|
||||
<div class="button join-button button-clicked" v-if="servers[server.server_id]">Joined</div>
|
||||
<div
|
||||
class="button cancel-button"
|
||||
@click="server = null; inviteCode = ''; tab = 1; slideBack();"
|
||||
>Cancel</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition-group>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import config from "@/config.js";
|
||||
import { bus } from "@/main";
|
||||
import settingsService from "@/services/settingsService";
|
||||
import ServerService from "@/services/ServerService";
|
||||
import ProfilePicture from "@/components/ProfilePictureTemplate.vue";
|
||||
import serversModule from '../../../../store/modules/serversModule';
|
||||
|
||||
export default {
|
||||
components: { ProfilePicture },
|
||||
data() {
|
||||
return {
|
||||
tab: 0,
|
||||
tempImage: config.domain + "/avatars/noob",
|
||||
serverName: "",
|
||||
serverNameError: null,
|
||||
inviteCode: "",
|
||||
inviteCodeError: null,
|
||||
server: null,
|
||||
slideInDirection: "slide-forward"
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
closeMenu() {
|
||||
this.$store.dispatch("setPopoutVisibility", {
|
||||
name: "GDLinkMenu",
|
||||
name: "addServer",
|
||||
visibility: false
|
||||
});
|
||||
},
|
||||
|
|
@ -23,32 +79,280 @@ export default {
|
|||
this.closeMenu();
|
||||
}
|
||||
},
|
||||
slideForward() {
|
||||
this.slideInDirection = "slide-forward";
|
||||
},
|
||||
slideBack() {
|
||||
this.slideInDirection = "slide-back";
|
||||
},
|
||||
async createButton(event) {
|
||||
if (event.target.classList.contains("button-clicked")) return;
|
||||
this.serverNameError = null;
|
||||
const name = this.serverName.trim();
|
||||
if (!name) {
|
||||
this.serverNameError = "Enter a name!";
|
||||
return;
|
||||
}
|
||||
event.target.classList.add("button-clicked");
|
||||
const { ok, error, result } = await ServerService.post({ name });
|
||||
if (ok) {
|
||||
this.closeMenu();
|
||||
} else {
|
||||
if (error.response) {
|
||||
this.serverNameError = error.response.data.message;
|
||||
} else {
|
||||
this.serverNameError = "Something went wrong.";
|
||||
}
|
||||
event.target.classList.remove("button-clicked");
|
||||
}
|
||||
},
|
||||
async checkInviteCode(event) {
|
||||
if (event.target.classList.contains("button-clicked")) return;
|
||||
this.inviteCodeError = null;
|
||||
const inviteCode = this.inviteCode.trim();
|
||||
if (!inviteCode) {
|
||||
this.inviteCodeError = "Enter invite code!";
|
||||
return;
|
||||
}
|
||||
event.target.classList.add("button-clicked");
|
||||
|
||||
const { ok, error, result } = await ServerService.getInviteDetail(
|
||||
inviteCode
|
||||
);
|
||||
|
||||
if (!ok) {
|
||||
event.target.classList.remove("button-clicked");
|
||||
return (this.inviteCodeError = error.response.data.message);
|
||||
}
|
||||
event.target.classList.remove("button-clicked");
|
||||
this.slideForward();
|
||||
this.server = result.data;
|
||||
this.tab = 2;
|
||||
},
|
||||
async joinButton(event) {
|
||||
if (event.target.classList.contains("button-clicked")) return;
|
||||
event.target.classList.add("button-clicked");
|
||||
const { ok, error, result } = await ServerService.joinServer(this.inviteCode)
|
||||
if (ok) {
|
||||
this.closeMenu();
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
servers() {
|
||||
return this.$store.getters['servers/servers'];
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
.slide-forward-enter-active,
|
||||
.slide-forward-leave-active {
|
||||
transition: 0.3s;
|
||||
}
|
||||
.slide-forward-enter {
|
||||
transform: translate(100%, 0);
|
||||
}
|
||||
.slide-forward-leave-to {
|
||||
transform: translate(-100%, 0);
|
||||
}
|
||||
|
||||
.slide-back-enter-active,
|
||||
.slide-back-leave-active {
|
||||
transition: 0.3s;
|
||||
}
|
||||
.slide-back-enter {
|
||||
transform: translate(-100%, 0);
|
||||
}
|
||||
.slide-back-leave-to {
|
||||
transform: translate(100%, 0);
|
||||
}
|
||||
|
||||
.slider {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dark-background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: rgba(0, 0, 0, 0.781);
|
||||
background: rgba(0, 0, 0, 0.541);
|
||||
z-index: 111111;
|
||||
display: flex;
|
||||
}
|
||||
.inner {
|
||||
margin: auto;
|
||||
height: 400px;
|
||||
height: 450px;
|
||||
width: 400px;
|
||||
background: rgb(32, 32, 32);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: white;
|
||||
border-radius: 3px;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.tabs {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding-top: 15px;
|
||||
background: rgb(27, 27, 27);
|
||||
}
|
||||
.tab {
|
||||
flex-shrink: 0;
|
||||
border-radius: 1px;
|
||||
padding: 5px;
|
||||
padding-bottom: 5px;
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
border-bottom: solid 1px rgba(255, 255, 255, 0);
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
transition: 0.3s;
|
||||
font-size: 20px;
|
||||
}
|
||||
.selected {
|
||||
border-bottom: solid 1px white !important;
|
||||
}
|
||||
.tab:hover {
|
||||
border-bottom: solid 1px rgb(107, 107, 107);
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.input {
|
||||
align-self: center;
|
||||
margin-top: 15px;
|
||||
margin-bottom: 10px;
|
||||
background: rgb(44, 44, 44);
|
||||
padding: 5px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.input input {
|
||||
border-radius: 5px;
|
||||
}
|
||||
.title {
|
||||
text-align: center;
|
||||
margin: 20px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
align-self: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.button {
|
||||
padding: 5px;
|
||||
background: rgba(25, 151, 255, 0.699);
|
||||
border-radius: 5px;
|
||||
user-select: none;
|
||||
border: none;
|
||||
color: white;
|
||||
font-size: 17px;
|
||||
outline: none;
|
||||
transition: 0.2s;
|
||||
box-shadow: 3px 3px rgba(23, 112, 255, 0.479);
|
||||
align-self: center;
|
||||
margin: 5px;
|
||||
}
|
||||
.button:hover {
|
||||
background: rgb(25, 151, 255);
|
||||
}
|
||||
.button:focus {
|
||||
background: rgb(25, 151, 255);
|
||||
}
|
||||
.button:active {
|
||||
background: rgb(25, 151, 255);
|
||||
transform: translate(3px, 3px);
|
||||
box-shadow: 0px 0px rgba(0, 97, 207, 0.479);
|
||||
}
|
||||
|
||||
.button-clicked {
|
||||
background: rgb(126, 126, 126) !important;
|
||||
transform: translate(3px, 3px) !important;
|
||||
box-shadow: 0px 0px rgba(61, 61, 61, 0.479) !important;
|
||||
}
|
||||
|
||||
.create-button {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 20px;
|
||||
margin-bottom: 10px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.check-button {
|
||||
padding: 10px;
|
||||
}
|
||||
.warn {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.server-name {
|
||||
text-align: center;
|
||||
font-size: 25px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.server .buttons {
|
||||
display: flex;
|
||||
justify-items: center;
|
||||
align-content: center;
|
||||
}
|
||||
.server .button {
|
||||
margin: auto;
|
||||
padding: 10px;
|
||||
align-self: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.join-button {
|
||||
margin-right: 5px !important;
|
||||
}
|
||||
|
||||
.cancel-button {
|
||||
margin-left: 5px !important;
|
||||
background: rgba(238, 55, 55, 0.521);
|
||||
box-shadow: 3px 3px rgb(85, 28, 28);
|
||||
}
|
||||
|
||||
.cancel-button:hover {
|
||||
background: rgb(238, 55, 55);
|
||||
}
|
||||
.cancel-button:focus {
|
||||
background: rgb(25, 151, 255);
|
||||
}
|
||||
.cancel-button:active {
|
||||
background: rgb(238, 55, 55);
|
||||
transform: translate(3px, 3px);
|
||||
box-shadow: 0px 0px rgb(85, 28, 28);
|
||||
}
|
||||
.icon {
|
||||
font-size: 80px;
|
||||
margin-top: 40px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
|||
141
src/components/app/Popouts/Popouts/ServerInvitePopout.vue
Normal file
141
src/components/app/Popouts/Popouts/ServerInvitePopout.vue
Normal file
|
|
@ -0,0 +1,141 @@
|
|||
<template>
|
||||
<div class="dark-background" @mousedown="backgroundClick">
|
||||
<div class="inner">
|
||||
<div class="top">
|
||||
<div class="button" @click="createInviteButton">Create New Invite</div>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<div class="title">Invites created by you:</div>
|
||||
<spinner v-if="invites === null"/>
|
||||
<div class="invite-list" v-if="invites !== null">
|
||||
<div class="invite" v-for="invite in invites.slice().reverse()" :key="invite">{{invite}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import config from "@/config.js";
|
||||
import { bus } from "@/main";
|
||||
import Spinner from "@/components/Spinner.vue";
|
||||
import ServerService from "@/services/ServerService";
|
||||
import { mapState } from "vuex";
|
||||
|
||||
export default {
|
||||
components: {Spinner},
|
||||
data() {
|
||||
return {
|
||||
invites: null
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
closeMenu() {
|
||||
this.$store.dispatch("setPopoutVisibility", {
|
||||
name: "showServerInviteMenu",
|
||||
visibility: false
|
||||
});
|
||||
},
|
||||
backgroundClick(e) {
|
||||
if (e.target.classList.contains("dark-background")) {
|
||||
this.closeMenu();
|
||||
}
|
||||
},
|
||||
async createInviteButton() {
|
||||
if (!this.serverID) {
|
||||
console.log("Server ID is not defined");
|
||||
return;
|
||||
}
|
||||
const {ok, error, result} = await ServerService.postInvite(this.serverID);
|
||||
if (ok) {
|
||||
this.invites.push(result.data.invite_code)
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
async mounted() {
|
||||
// get invites created by you
|
||||
const {ok, error, result} = await ServerService.getInvites(this.serverID);
|
||||
if (ok) {
|
||||
let invites = [];
|
||||
for (let invite of result.data) {
|
||||
invites.push(invite.invite_code)
|
||||
}
|
||||
this.invites = invites;
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
serverID: state => state.popoutsModule.serverIDContextMenu
|
||||
})
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
.dark-background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: rgba(0, 0, 0, 0.541);
|
||||
z-index: 111111;
|
||||
display: flex;
|
||||
}
|
||||
.inner {
|
||||
margin: auto;
|
||||
height: 400px;
|
||||
width: 400px;
|
||||
background: rgb(32, 32, 32);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: white;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.top {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
min-height: 100px;
|
||||
background: rgba(0, 0, 0, 0.171);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.button {
|
||||
padding: 10px;
|
||||
background: rgba(0, 162, 255, 0.719);
|
||||
margin: auto;
|
||||
border-radius: 10px;
|
||||
transition: 0.3s;
|
||||
user-select: none;
|
||||
}
|
||||
.button:hover {
|
||||
background: rgb(0, 162, 255);
|
||||
}
|
||||
|
||||
.bottom {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.title {
|
||||
margin: 10px;
|
||||
user-select: none;
|
||||
}
|
||||
.invite-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
height: 100%;
|
||||
}
|
||||
.invite {
|
||||
display: flex;
|
||||
background: rgba(0, 0, 0, 0.274);
|
||||
margin: 5px;
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -145,6 +145,7 @@ export default {
|
|||
display: flex;
|
||||
width: 100%;
|
||||
margin-top: 20px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.avatar {
|
||||
display: flex;
|
||||
|
|
@ -233,11 +234,11 @@ export default {
|
|||
}
|
||||
@media (max-width: 815px) {
|
||||
.general-information {
|
||||
display: block;
|
||||
flex-direction: column;
|
||||
}
|
||||
.avatar{
|
||||
margin: auto;
|
||||
align-self: center;
|
||||
margin: 0;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.information {
|
||||
|
|
|
|||
|
|
@ -1,10 +1,9 @@
|
|||
<template>
|
||||
<div class="left-panel">
|
||||
<MyMiniInformation/>
|
||||
|
||||
<div class="list">
|
||||
<server v-for="(data, index) in serverData" :key="index" :server-data="data" @click.native="toggleChannel(index, $event)" :open-channel="openedServer && openedServer === index"/>
|
||||
<server mode="ADD_SERVER"/>
|
||||
<server v-for="(data, index) in servers" :key="index.server_id" :server-data="data" @click.native="toggleChannel(data.server_id, $event)" :open-channel="openedServer !== null && openedServer === data.server_id"/>
|
||||
<server mode="ADD_SERVER" @click.native="openAddServer"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -20,54 +19,30 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
openedServer: null,
|
||||
serverData: {
|
||||
"67574563576897": {
|
||||
name: "DevHelp",
|
||||
channels: [
|
||||
{ name: "General", channelID: 3563567574767467 },
|
||||
{ name: "NodeJS", channelID: 758546746747378 },
|
||||
{ name: "Java", channelID: 57355675747875 },
|
||||
{ name: "C#", channelID: 45656764765676 }
|
||||
]
|
||||
},
|
||||
"24325587980787": {
|
||||
name: "Musica",
|
||||
channels: [
|
||||
{ name: "General", channelID: 3563567574767467 },
|
||||
{ name: "NodeJS", channelID: 758546746747378 },
|
||||
{ name: "Java", channelID: 57355675747875 },
|
||||
{ name: "C#", channelID: 45656764765676 }
|
||||
]
|
||||
},
|
||||
"3468636435": {
|
||||
name: "IDK",
|
||||
channels: [
|
||||
{ name: "General", channelID: 3563567574767467 },
|
||||
{ name: "NodeJS", channelID: 758546746747378 },
|
||||
{ name: "Java", channelID: 57355675747875 },
|
||||
{ name: "C#", channelID: 45656764765676 }
|
||||
]
|
||||
},
|
||||
"63575764574645": {
|
||||
name: "OWO",
|
||||
channels: [
|
||||
{ name: "General", channelID: 3563567574767467 },
|
||||
{ name: "NodeJS", channelID: 758546746747378 },
|
||||
{ name: "Java", channelID: 57355675747875 },
|
||||
{ name: "C#", channelID: 45656764765676 }
|
||||
]
|
||||
}
|
||||
}
|
||||
openedServer: null
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
toggleChannel(index, event) {
|
||||
if (!event.target.closest('.small-view')) return;
|
||||
if (this.openedServer === index)
|
||||
openAddServer() {
|
||||
this.$store.dispatch("setPopoutVisibility", {
|
||||
name: "addServer",
|
||||
visibility: true
|
||||
});
|
||||
},
|
||||
toggleChannel(serverID, event) {
|
||||
if (!event.target.closest('.small-view') || event.target.closest('.options-context-button') || event.target.closest('.options-context-menu')) return;
|
||||
if (this.openedServer === serverID)
|
||||
this.openedServer = null;
|
||||
else
|
||||
this.openedServer = index;
|
||||
this.openedServer = serverID;
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
servers() {
|
||||
const data = this.$store.getters['servers/servers'];
|
||||
return Object.keys(data).map(key => {
|
||||
return data[key];
|
||||
}).slice().reverse()
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
69
src/components/app/ServerTemplate/ChannelsList.vue
Normal file
69
src/components/app/ServerTemplate/ChannelsList.vue
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
<template>
|
||||
<div class="channels-list">
|
||||
<spinner v-if="channels === undefined" size="40"/>
|
||||
<div class="wrapper" v-if="channels">
|
||||
<ChannelTemplate v-for="channel in channels" :key="channel.name" :channel-data="channel" @click.native="openChannel(channel)"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Spinner from "@/components/Spinner.vue";
|
||||
import ChannelTemplate from "@/components/app/ServerTemplate/ChannelTemplate.vue";
|
||||
import ServerService from "@/services/ServerService.js";
|
||||
|
||||
export default {
|
||||
components: { ChannelTemplate, Spinner },
|
||||
props: ["serverID"],
|
||||
methods: {
|
||||
openChannel(channel) {
|
||||
this.$store.dispatch('openChannel', channel)
|
||||
}
|
||||
},
|
||||
|
||||
async beforeMount() {
|
||||
if (this.channels !== undefined) return;
|
||||
const { ok, error, result } = await ServerService.getChannels(
|
||||
this.serverID
|
||||
);
|
||||
if (!ok) {
|
||||
console.log(error);
|
||||
} else {
|
||||
const channelsIDs = [];
|
||||
for (let index = 0; index < result.data.length; index++) {
|
||||
const element = result.data[index];
|
||||
element.server = undefined;
|
||||
element.server_id = this.serverID
|
||||
this.$store.dispatch('channel', element)
|
||||
channelsIDs.push(element.channelID)
|
||||
}
|
||||
this.$store.dispatch("servers/setChannelsIDs", {
|
||||
serverID: this.serverID,
|
||||
channelsIDs: channelsIDs
|
||||
});
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
channels() {
|
||||
const channelsIds = this.$store.getters["servers/channelsIDs"][this.serverID];
|
||||
if (channelsIds) {
|
||||
let channels = [];
|
||||
for ( let channelID of channelsIds ){
|
||||
channels.push(this.$store.getters.channels[channelID])
|
||||
}
|
||||
return channels;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.channel-list {
|
||||
background: rgba(0, 0, 0, 0.288);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
|
@ -1,44 +1,89 @@
|
|||
<template>
|
||||
<div :class="{server: true, 'add-server': mode === 'ADD_SERVER'}">
|
||||
<div class="small-view" @click="showChannels = !showChannels">
|
||||
<div class="small-view">
|
||||
<profile-picture size="50px" v-if="!mode" :url="tempImage"/>
|
||||
<div class="add-icon" v-if="mode === 'ADD_SERVER'">
|
||||
<i class="material-icons">add</i>
|
||||
</div>
|
||||
<div class="server-name">{{mode === 'ADD_SERVER'? 'Add Server' : ServerData.name}}</div>
|
||||
<div class="server-name">{{mode === 'ADD_SERVER'? 'Add Server' : ServerData.name }}</div>
|
||||
<div
|
||||
ref="contextMenuButton"
|
||||
class="options-context-button"
|
||||
v-if="mode !== 'ADD_SERVER'"
|
||||
@click="showContextMenu = !showContextMenu"
|
||||
>
|
||||
<i class="material-icons">more_vert</i>
|
||||
</div>
|
||||
<div class="options-context-menu" v-if="showContextMenu" v-click-outside="closeContextMenu">
|
||||
<div class="menu-button" @click="createInvite(ServerData.server_id)">Create Invite</div>
|
||||
<div
|
||||
class="menu-button warn"
|
||||
@click="leaveServer(ServerData.server_id)"
|
||||
v-if="ServerData.creator.uniqueID !== user.uniqueID"
|
||||
>Leave Server</div>
|
||||
<div
|
||||
class="menu-button warn"
|
||||
@click="leaveServer(ServerData.server_id)"
|
||||
v-if="ServerData.creator.uniqueID === user.uniqueID"
|
||||
>Delete Server</div>
|
||||
</div>
|
||||
</div>
|
||||
<div ref="container">
|
||||
<div class="channel-list" v-if="openChannel">
|
||||
<ChannelTemplate
|
||||
v-for="channel in ServerData.channels"
|
||||
:key="channel.name"
|
||||
:channel-data="channel"
|
||||
/>
|
||||
</div>
|
||||
<channels-list v-if="openChannel" :serverID="ServerData.server_id"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import config from "@/config.js";
|
||||
import ChannelTemplate from "@/components/app/ServerTemplate/ChannelTemplate.vue";
|
||||
import ChannelsList from "@/components/app/ServerTemplate/ChannelsList.vue";
|
||||
import ProfilePicture from "@/components/ProfilePictureTemplate.vue";
|
||||
import ServerService from "@/services/ServerService";
|
||||
import smoothReflow from "vue-smooth-reflow";
|
||||
|
||||
export default {
|
||||
mixins: [smoothReflow],
|
||||
props: ["ServerData", "openChannel", "mode"],
|
||||
components: { ProfilePicture, ChannelTemplate },
|
||||
components: { ProfilePicture, ChannelsList },
|
||||
data() {
|
||||
return {
|
||||
showContextMenu: false,
|
||||
showChannels: false,
|
||||
tempImage: config.domain + "/avatars/noob"
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
createInvite(serverID) {
|
||||
this.showContextMenu = false;
|
||||
this.$store.dispatch("setServerIDContextMenu", serverID);
|
||||
this.$store.dispatch("setPopoutVisibility", {
|
||||
name: "showServerInviteMenu",
|
||||
visibility: true
|
||||
});
|
||||
},
|
||||
closeContextMenu(event) {
|
||||
if (
|
||||
event.target.closest(".options-context-button") ===
|
||||
this.$refs.contextMenuButton
|
||||
)
|
||||
return;
|
||||
this.showContextMenu = false;
|
||||
},
|
||||
async leaveServer(serverID) {
|
||||
this.showContextMenu = false;
|
||||
const {ok, error, result} = await ServerService.leaveServer(serverID);
|
||||
console.log({ok, error, result})
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$smoothReflow({
|
||||
el: this.$refs.container
|
||||
});
|
||||
},
|
||||
computed: {
|
||||
user() {
|
||||
return this.$store.getters.user;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -54,14 +99,13 @@ export default {
|
|||
transition: 0.3s;
|
||||
}
|
||||
|
||||
|
||||
.server:hover {
|
||||
background: rgba(0, 0, 0, 0.288);
|
||||
}
|
||||
.material-icons {
|
||||
transition: 0.3s;
|
||||
}
|
||||
.add-server:hover .material-icons{
|
||||
.add-server:hover .material-icons {
|
||||
color: rgba(20, 255, 39, 0.726);
|
||||
}
|
||||
|
||||
|
|
@ -70,23 +114,18 @@ export default {
|
|||
display: flex;
|
||||
transition: 0.3s;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
align-items: center;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.channel-list {
|
||||
background: rgba(0, 0, 0, 0.288);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.server-name {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
margin-left: 5px;
|
||||
flex: 1;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.add-icon{
|
||||
.add-icon {
|
||||
height: 56px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -97,4 +136,38 @@ export default {
|
|||
.add-icon .material-icons {
|
||||
font-size: 40px;
|
||||
}
|
||||
.options-context-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 5px;
|
||||
color: rgba(255, 255, 255, 0.623);
|
||||
border-radius: 50%;
|
||||
transition: 0.3s;
|
||||
}
|
||||
.options-context-button .material-icons:hover {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.options-context-menu {
|
||||
position: absolute;
|
||||
background: rgba(0, 0, 0, 0.692);
|
||||
border-radius: 10px;
|
||||
z-index: 9999;
|
||||
padding: 5px;
|
||||
right: 40px;
|
||||
top: 20px;
|
||||
}
|
||||
.menu-button {
|
||||
padding: 5px;
|
||||
margin: 2px;
|
||||
border-radius: 5px;
|
||||
transition: 0.3s;
|
||||
}
|
||||
.menu-button:hover {
|
||||
background: rgb(47, 47, 47);
|
||||
}
|
||||
|
||||
.warn {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -65,6 +65,8 @@ export default {
|
|||
.left-panel {
|
||||
position: absolute;
|
||||
background-color: rgba(39, 39, 39, 0.97);
|
||||
bottom: 0;
|
||||
height: calc(100% - 40px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@
|
|||
/>
|
||||
</transition>
|
||||
<message-panel/>
|
||||
<members-list/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -16,11 +17,13 @@ import { bus } from "@/main";
|
|||
|
||||
import ServerList from "@/components/app/ServerList.vue";
|
||||
import MessagePanel from "@/components/app/MessagePanel.vue";
|
||||
import MembersList from "@/components/app/MembersList.vue";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
ServerList,
|
||||
MessagePanel
|
||||
MessagePanel,
|
||||
MembersList
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -1,22 +1,82 @@
|
|||
<template>
|
||||
<div class="typing-status">
|
||||
<object class="animation" type="image/svg+xml" :data="animation"></object>
|
||||
<div class="text"><strong>{{this.$props.username}}</strong> is typing...</div>
|
||||
</div>
|
||||
<transition name="typing-animate">
|
||||
<div class="typing-status" v-if="formatedRecipients">
|
||||
<object class="animation" type="image/svg+xml" :data="animation"></object>
|
||||
<div class="text" v-html="formatedRecipients"></div>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ['username'],
|
||||
props: ["recipients"],
|
||||
data() {
|
||||
return {
|
||||
animation: require('@/assets/typing-indicator.svg')
|
||||
animation: require("@/assets/typing-indicator.svg")
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
escapeHtml(unsafe) {
|
||||
return unsafe
|
||||
.replace(/&/g, "&")
|
||||
.replace(/</g, "<")
|
||||
.replace(/>/g, ">")
|
||||
.replace(/"/g, """)
|
||||
.replace(/'/g, "'");
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
formatedRecipients() {
|
||||
const arr = Object.values(this.recipients);
|
||||
if (!arr.length) return null;
|
||||
switch (true) {
|
||||
case arr.length == 1:
|
||||
return `<strong>${this.escapeHtml(
|
||||
arr[0].username
|
||||
)}</strong> is typing...`;
|
||||
break;
|
||||
case arr.length == 2:
|
||||
return `<strong>${this.escapeHtml(
|
||||
arr[0].username
|
||||
)}</strong> and <strong>${this.escapeHtml(
|
||||
arr[1].username
|
||||
)}</strong> are typing...`;
|
||||
break;
|
||||
case arr.length == 3:
|
||||
return `<strong>${this.escapeHtml(
|
||||
arr[0].username
|
||||
)}</strong>, <strong>${this.escapeHtml(
|
||||
arr[1].username
|
||||
)}</strong> and <strong>${this.escapeHtml(
|
||||
arr[2].username
|
||||
)}</strong> are typing...`;
|
||||
break;
|
||||
case arr.length > 3:
|
||||
return `<strong>${arr.length}</strong> people are typing...`;
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
return arr;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.typing-animate-enter-active {
|
||||
transition: 0.1s;
|
||||
}
|
||||
.typing-animate-enter /* .fade-leave-active below version 2.1.8 */ {
|
||||
opacity: 0;
|
||||
transform: translateY(3px);
|
||||
}
|
||||
.typing-animate-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
|
||||
.typing-status {
|
||||
color: white;
|
||||
display: flex;
|
||||
|
|
@ -34,5 +94,4 @@ export default {
|
|||
margin-left: 5px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ export default {
|
|||
const keys = Object.keys(json);
|
||||
let result = [];
|
||||
keys.forEach(function(key){
|
||||
if (json[key].recipients.length > 0)
|
||||
if (json[key].recipients.length > 0 && !json[key].servers)
|
||||
result.push(json[key]);
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -35,6 +35,7 @@ export default {
|
|||
margin-left: 70px;
|
||||
display: flex;
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.icon .material-icons {
|
||||
font-size: 40px;
|
||||
|
|
|
|||
26
src/services/ServerService.js
Normal file
26
src/services/ServerService.js
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
import {instance, wrapper} from './Api';
|
||||
|
||||
export default {
|
||||
post ( data ) {
|
||||
return wrapper(instance().post('/server', data));
|
||||
},
|
||||
getChannels(serverID) {
|
||||
return wrapper(instance().get(`/server/channels/${serverID}`));
|
||||
},
|
||||
postInvite (serverID) {
|
||||
return wrapper (instance().post(`/server/${serverID}/invite`))
|
||||
},
|
||||
getInvites (serverID) {
|
||||
return wrapper (instance().get(`/server/${serverID}/invites`))
|
||||
},
|
||||
getInviteDetail (inviteCode) {
|
||||
return wrapper (instance().get(`/server/invite/${inviteCode}`))
|
||||
},
|
||||
joinServer (inviteCode) {
|
||||
return wrapper (instance().post(`/server/invite/${inviteCode}`))
|
||||
},
|
||||
leaveServer (serverID) {
|
||||
return wrapper (instance().delete(`/server/${serverID}`))
|
||||
},
|
||||
|
||||
}
|
||||
|
|
@ -9,6 +9,7 @@ import settingsModule from './modules/settingsModule';
|
|||
import uploadFilesModule from './modules/uploadFilesModule';
|
||||
import popoutsModule from './modules/popoutsModule/popoutsModule.js';
|
||||
import emojiSuggestionModule from './modules/emojiSuggestionModule';
|
||||
import serversModule from './modules/serversModule';
|
||||
import {
|
||||
router
|
||||
} from './../router'
|
||||
|
|
@ -25,7 +26,8 @@ export const store = new Vuex.Store({
|
|||
settingsModule,
|
||||
uploadFilesModule,
|
||||
popoutsModule,
|
||||
emojiSuggestionModule
|
||||
emojiSuggestionModule,
|
||||
servers: serversModule
|
||||
},
|
||||
state: {
|
||||
|
||||
|
|
|
|||
|
|
@ -15,6 +15,14 @@ const getters = {
|
|||
};
|
||||
|
||||
const actions = {
|
||||
async openChannel(context, channel) {
|
||||
context.commit("setChannelName", channel.name);
|
||||
const messages = context.state.messages[channel.channelID];
|
||||
if (messages) return context.commit("selectedChannelID", channel.channelID);
|
||||
context.commit("selectedChannelID", "loading")
|
||||
getMessages(context, channel.channelID);
|
||||
|
||||
},
|
||||
async openChat(context, { uniqueID, channelID, channelName }) {
|
||||
|
||||
if (channelName) context.commit("setChannelName", channelName);
|
||||
|
|
@ -33,65 +41,21 @@ const actions = {
|
|||
}
|
||||
|
||||
if (messages) return;
|
||||
if (channel && !messages) return getMessages(channelID);
|
||||
if (channel && !messages) return getMessages(context, channelID);
|
||||
|
||||
|
||||
const { ok, error, result } = await channelService.post(uniqueID);
|
||||
if (ok) {
|
||||
context.commit("channel", result.data.channel);
|
||||
getMessages(result.data.channel.channelID);
|
||||
getMessages(context, result.data.channel.channelID);
|
||||
} else {
|
||||
// TODO handle this
|
||||
console.log(error);
|
||||
}
|
||||
|
||||
async function getMessages(channelID) {
|
||||
const { ok, error, result } = await messagesService.get(channelID);
|
||||
if (ok) {
|
||||
context.commit("selectedChannelID", channelID);
|
||||
context.commit("messages", {
|
||||
channelID: result.data.channelID,
|
||||
messages: result.data.messages.reverse()
|
||||
});
|
||||
} else {
|
||||
// TODO handle this
|
||||
console.log(error.response);
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
// OLD STUFF
|
||||
async openddChat(context, { channelID, channelName }) {
|
||||
context.commit("selectedChannelID", channelID);
|
||||
if (channelName) context.commit("setChannelName", channelName);
|
||||
|
||||
const messages = context.state.messages[channelID];
|
||||
const channel = context.rootState.channelModule.channels[channelID];
|
||||
if (messages) return;
|
||||
if (channel && !messages) return getMessages();
|
||||
|
||||
const { ok, error, result } = await channelService.post(channelID);
|
||||
if (ok) {
|
||||
context.commit("channel", result.data.channel);
|
||||
getMessages();
|
||||
} else {
|
||||
// TODO handle this
|
||||
console.log(error);
|
||||
}
|
||||
|
||||
async function getMessages() {
|
||||
const { ok, error, result } = await messagesService.get(channelID);
|
||||
if (ok) {
|
||||
context.commit("messages", {
|
||||
channelID: result.data.channelID,
|
||||
messages: result.data.messages.reverse()
|
||||
});
|
||||
} else {
|
||||
// TODO handle this
|
||||
console.log(error.response);
|
||||
}
|
||||
}
|
||||
},
|
||||
messages(context, data) {
|
||||
context.commit("messages", data);
|
||||
},
|
||||
|
|
@ -110,6 +74,21 @@ const actions = {
|
|||
}
|
||||
};
|
||||
|
||||
async function getMessages(context, channelID) {
|
||||
const { ok, error, result } = await messagesService.get(channelID);
|
||||
if (ok) {
|
||||
context.commit("selectedChannelID", channelID);
|
||||
context.commit("messages", {
|
||||
channelID: result.data.channelID,
|
||||
messages: result.data.messages.reverse()
|
||||
});
|
||||
} else {
|
||||
// TODO handle this
|
||||
console.log(error.response);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const mutations = {
|
||||
messages(state, data) {
|
||||
Vue.set(state.messages, data.channelID, data.messages);
|
||||
|
|
|
|||
|
|
@ -11,12 +11,16 @@ const state = {
|
|||
uploadDialog: false,
|
||||
ImagePreviewURL: null,
|
||||
|
||||
serverIDContextMenu: null,
|
||||
showServerInviteMenu: false,
|
||||
|
||||
userInformationPopoutID: null,
|
||||
|
||||
surveyPopout: false,
|
||||
dragDropFileUploadDialog: false,
|
||||
settings: false,
|
||||
GDLinkMenu: false,
|
||||
addServer: false,
|
||||
}
|
||||
|
||||
const getters = {
|
||||
|
|
@ -37,6 +41,9 @@ const actions = {
|
|||
},
|
||||
setImagePreviewURL(context, url) {
|
||||
context.commit('setImagePreviewURL', url);
|
||||
},
|
||||
setServerIDContextMenu(context, serverID) {
|
||||
context.commit('setServerIDContextMenu', serverID);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -52,6 +59,9 @@ const mutations = {
|
|||
},
|
||||
setImagePreviewURL(state, url) {
|
||||
Vue.set(state, 'ImagePreviewURL', url);
|
||||
},
|
||||
setServerIDContextMenu(state, serverID) {
|
||||
Vue.set(state, 'serverIDContextMenu', serverID);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
55
src/store/modules/serversModule.js
Normal file
55
src/store/modules/serversModule.js
Normal file
|
|
@ -0,0 +1,55 @@
|
|||
import { bus } from "../../main";
|
||||
import { router } from "./../../router";
|
||||
import Vue from "vue";
|
||||
|
||||
const state = {
|
||||
servers: {},
|
||||
channelsIDs: {}
|
||||
};
|
||||
|
||||
const getters = {
|
||||
servers(state) {
|
||||
return state.servers;
|
||||
},
|
||||
channelsIDs(state) {
|
||||
return state.channelsIDs;
|
||||
}
|
||||
};
|
||||
|
||||
const actions = {
|
||||
setChannelsIDs(context, {serverID, channelsIDs}) {
|
||||
context.commit('SET_CHANNELS_IDS', {serverID, channelsIDs});
|
||||
},
|
||||
setServers(context, servers) {
|
||||
context.commit('SET_SERVERS', servers);
|
||||
},
|
||||
setServer(context, server) {
|
||||
context.commit('SET_SERVER', server);
|
||||
},
|
||||
removeServer(context, serverID) {
|
||||
context.commit('REMOVE_SERVER', serverID);
|
||||
},
|
||||
};
|
||||
|
||||
const mutations = {
|
||||
SET_CHANNELS_IDS(state, {serverID, channelsIDs}) {
|
||||
Vue.set(state.channelsIDs, serverID, channelsIDs);
|
||||
},
|
||||
SET_SERVERS(state, servers) {
|
||||
state.servers = servers;
|
||||
},
|
||||
SET_SERVER(state, server) {
|
||||
Vue.set(state.servers, server.server_id, server);
|
||||
},
|
||||
REMOVE_SERVER(state, serverID) {
|
||||
Vue.delete(state.servers, serverID);
|
||||
},
|
||||
};
|
||||
|
||||
export default {
|
||||
namespaced: true,
|
||||
state,
|
||||
actions,
|
||||
mutations,
|
||||
getters
|
||||
};
|
||||
|
|
@ -34,9 +34,20 @@ const actions = {
|
|||
}
|
||||
}
|
||||
}
|
||||
data.user.friends = friendObject;
|
||||
}
|
||||
|
||||
let servers = user.servers || [];
|
||||
//convert array to object for servers
|
||||
servers = servers.reduce((obj, item) => {
|
||||
obj[item.server_id] = item
|
||||
return obj
|
||||
}, {})
|
||||
|
||||
context.dispatch('servers/setServers', servers)
|
||||
|
||||
data.user.servers = undefined;
|
||||
data.user.friends = friendObject;
|
||||
|
||||
context.commit('user', data.user)
|
||||
|
||||
// convert dms array to object
|
||||
|
|
@ -123,7 +134,13 @@ const actions = {
|
|||
},
|
||||
['socket_survey:completed'](context) {
|
||||
context.dispatch('surveyCompleted');
|
||||
}
|
||||
},
|
||||
['socket_server:joined'](context, server) {
|
||||
context.dispatch('servers/setServer', server)
|
||||
},
|
||||
['socket_server:leave'](context, {server_id}) {
|
||||
context.dispatch('servers/removeServer', server_id)
|
||||
},
|
||||
}
|
||||
|
||||
export default {
|
||||
|
|
|
|||
|
|
@ -32,8 +32,8 @@
|
|||
<div class="panel-layout">
|
||||
<news v-if="currentTab == 0"/>
|
||||
<direct-message v-if="currentTab == 1"/>
|
||||
<!-- <servers v-if="currentTab == 2"/> -->
|
||||
<div class="coming-soon" v-if="currentTab > 1">
|
||||
<servers v-if="currentTab == 2"/>
|
||||
<div class="coming-soon" v-if="currentTab > 2">
|
||||
<div class="icon">
|
||||
<i class="material-icons">cached</i>
|
||||
</div>
|
||||
|
|
@ -56,8 +56,9 @@ import Spinner from "./../components/Spinner.vue";
|
|||
|
||||
const ElectronFrameButtons = () =>
|
||||
import("./../components/ElectronJS/FrameButtons.vue");
|
||||
|
||||
const News = () => import(/* webpackChunkName: "News" */"./../components/app/Tabs/News.vue");
|
||||
|
||||
const News = () =>
|
||||
import(/* webpackChunkName: "News" */ "./../components/app/Tabs/News.vue");
|
||||
//const DirectMessage = () => import('./../components/app/Tabs/DirectMessage.vue');
|
||||
const DirectMessage = () => ({
|
||||
component: import("./../components/app/Tabs/DirectMessage.vue"),
|
||||
|
|
@ -233,7 +234,6 @@ export default {
|
|||
|
||||
|
||||
<style>
|
||||
|
||||
textarea {
|
||||
font-family: "Roboto", sans-serif;
|
||||
}
|
||||
|
|
@ -252,6 +252,8 @@ textarea {
|
|||
background-repeat: no-repeat;
|
||||
background-position: bottom;
|
||||
background-size: cover;
|
||||
filter: blur(15px);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.panel-layout {
|
||||
|
|
@ -262,8 +264,7 @@ textarea {
|
|||
border-top-right-radius: 5px;
|
||||
}
|
||||
|
||||
|
||||
input{
|
||||
input {
|
||||
padding: 10px;
|
||||
background: rgba(0, 0, 0, 0.301);
|
||||
outline: none;
|
||||
|
|
@ -275,13 +276,12 @@ input{
|
|||
transition: 0.3s;
|
||||
}
|
||||
|
||||
input:hover{
|
||||
input:hover {
|
||||
background: rgba(0, 0, 0, 0.452);
|
||||
}
|
||||
|
||||
input:focus {
|
||||
background: rgba(0, 0, 0, 0.603);
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue