dan/Nertivia-Client
1
0
Fork 0
mirror of https://github.com/danbulant/Nertivia-Client synced 2026-06-14 20:11:10 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

a lot of things changed x_x

Browse source
This commit is contained in:
supertiger1234 2019-11-01 20:42:32 +00:00
parent 52135c7d21
commit 8594fc5cc5
40 changed files with 1297 additions and 1692 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/Main.vue
View file

@ -8,7 +8,6 @@
<style>
html {
height: 100%;
}
@ -35,18 +34,15 @@ body {
/* Track */
::-webkit-scrollbar-track {
background: #8080806b;
border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #f5f5f559;
border-radius: 10px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #f5f5f59e;
border-radius: 10px;
}
</style>

BIN
src/assets/graphics/HomeGraphics.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 63 KiB

After

Width:  |  Height:  |  Size: 122 KiB

BIN
src/assets/graphics/HomeGraphics2.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 379 KiB

BIN
src/assets/halloween_background.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 182 KiB

BIN
src/assets/leftPanelBackground.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 19 KiB

49
src/components/app/FriendsList.vue
View file

@ -3,13 +3,16 @@
<navigation />
<div class="content">
<div class="tabs">
<div :class="{selector: true, right: currentTab === 1}" />
<div
class="tab"
:class="{notifyAnimation: friendRequestExists}"
:class="{notifyAnimation: friendRequestExists, selected: currentTab === 0}"
@click="currentTab = 0"
>Friends</div>
<div class="tab" :class="{notifyAnimation: DMNotification}" @click="currentTab = 1">Recents</div>
<div
class="tab"
:class="{notifyAnimation: DMNotification, selected: currentTab === 1 }"
@click="currentTab = 1"
>Recents</div>
</div>
<div v-if="currentTab === 0" class="list">
<pending-friends />
@ -19,6 +22,7 @@
<div v-else class="list">
<recent-friends />
</div>
<div class="seperater" />
<MyMiniInformation />
</div>
</div>
@ -89,12 +93,15 @@ export default {
<style scoped>
.left-panel {
height: 100%;
background: rgba(0, 0, 0, 0.6);
width: 300px;
flex-shrink: 0;
display: flex;
flex-direction: row;
z-index: 1;
background-image: url("../../assets/leftPanelBackground.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.content {
display: flex;
@ -102,8 +109,6 @@ export default {
flex-shrink: 0;
flex: 1;
overflow: hidden;
}
.list {
flex: 1;
@ -128,29 +133,17 @@ export default {
user-select: none;
cursor: default;
height: 50px;
background: rgba(0, 0, 0, 0.171);
margin-left: 1px;
margin-right: 1px;
transition: 0.3s;
transition: 0.2s;
cursor: pointer;
}
.tab:hover {
background: rgba(255, 255, 255, 0.096);
}
.selector {
background: rgba(255, 255, 255, 0.322);
width: 118px;
height: 50px;
top: 0;
left: 1px;
position: absolute;
z-index: -1;
transition: 0.3s;
}
.right {
transform: translateX(120px);
background: #097279;
}
.tab.selected {
background: #075e64;
}
/* ------- SCROLL BAR -------*/
/* width */
.list::-webkit-scrollbar {
@ -172,6 +165,14 @@ export default {
background: #f5f5f59e;
}
.seperater {
height: 1px;
width: calc(100% - 10px);
align-self: center;
background-color: #a0c8d5;
flex-shrink: 0;
}
.notifyAnimation {
animation: notifyAnime;
animation-duration: 1s;

58
src/components/app/MemberTemplate.vue
View file

@ -2,10 +2,11 @@
<div
class="member"
@click="openUserInformation()"
@mouseover="hover = true" @mouseleave="hover = false"
@mouseover="hover = true"
@mouseleave="hover = false"
@contextmenu.prevent="rightClickEvent"
>
<Profile-picture
<Profile-picture
class="avatar"
:url="`${userAvatar}${hover ? '' : '?type=png'}`"
size="30px"
@ -13,57 +14,54 @@
:status="presense"
/>
<div class="information">
<div class="username">
{{ user.username }}
</div>
</div>
<div
v-if="type === 'OWNER'"
class="type-box"
>
Owner
<div class="username">{{ user.username }}</div>
</div>
<div v-if="type === 'OWNER'" class="type-box">Owner</div>
</div>
</template>
<script>
import ProfilePicture from '@/components/ProfilePictureTemplate';
import config from '@/config';
import ProfilePicture from "@/components/ProfilePictureTemplate";
import config from "@/config";
export default {
components: { ProfilePicture },
props: ['user', 'avatar', 'type'],
props: ["user", "avatar", "type"],
data() {
return {
hover: false
}
};
},
computed: {
userAvatar() {
return config.domain + "/avatars/" + this.avatar
return config.domain + "/avatars/" + this.avatar;
},
presense(){
presense() {
//attach presense
if (this.user.uniqueID === this.$store.getters.user.uniqueID) {
return this.$store.getters.user.status || 0
return this.$store.getters.user.status || 0;
}
const presences = this.$store.getters['members/presences'];
const presences = this.$store.getters["members/presences"];
const userPresense = presences[this.user.uniqueID];
return userPresense || 0
return userPresense || 0;
}
},
methods: {
openUserInformation() {
this.$store.dispatch('setUserInformationPopout', this.user.uniqueID)
this.$store.dispatch("setUserInformationPopout", this.user.uniqueID);
},
rightClickEvent(event) {
const x = event.clientX;
const y = event.clientY;
this.$store.dispatch('setServerMemberContext', {serverID: this.$store.getters['servers/selectedServerID'], uniqueID: this.user.uniqueID, x, y});
this.$store.dispatch("setServerMemberContext", {
serverID: this.$store.getters["servers/selectedServerID"],
uniqueID: this.user.uniqueID,
x,
y
});
}
}
}
};
</script>
@ -73,14 +71,14 @@ export default {
padding: 3px;
align-items: center;
align-content: center;
transition: 0.3s;
transition: 0.2s;
cursor: pointer;
user-select: none;
overflow: hidden;
}
.member:hover {
background: rgba(255, 255, 255, 0.07);
background: #064d55;
}
.information {
@ -88,13 +86,13 @@ export default {
overflow: hidden;
flex: 1;
}
.username {
white-space: nowrap;
.username {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.type-box{
.type-box {
padding: 3px;
border-radius: 5px;
height: 100%;
@ -102,7 +100,5 @@ export default {
}
.avatar {
}
</style>

74
src/components/app/MembersList.vue
View file

@ -1,19 +1,17 @@
<template>
<div class="members-list">
<div class="header">
<div class="title">
Members ({{ members.length }})
</div>
<div class="title">Members ({{ members.length }})</div>
</div>
<div class="members">
<div class="tab" v-if="onlineMembers.length">Online ({{onlineMembers.length}})</div>
<member-template
v-for="member in onlineMembers"
:key="member.member.uniqueID"
:type="member.type"
:avatar="member.member.avatar"
:user="member.member"
/>
<member-template
v-for="member in onlineMembers"
:key="member.member.uniqueID"
:type="member.type"
:avatar="member.member.avatar"
:user="member.member"
/>
<div class="tab" v-if="offlineMembers.length">Offline ({{offlineMembers.length}})</div>
<member-template
@ -28,29 +26,31 @@
</template>
<script>
import MemberTemplate from '@/components/app/MemberTemplate';
import MemberTemplate from "@/components/app/MemberTemplate";
export default {
components: { MemberTemplate },
computed: {
members() {
const members = this.$store.getters['members/members'];
const serverMembers = this.$store.getters['servers/serverMembers']
const selectedServerID = this.$store.getters['servers/selectedServerID'];
const presences = this.$store.getters['members/presences'];
const members = this.$store.getters["members/members"];
const serverMembers = this.$store.getters["servers/serverMembers"];
const selectedServerID = this.$store.getters["servers/selectedServerID"];
const presences = this.$store.getters["members/presences"];
let filteredSM = serverMembers.filter(sm => sm.server_id === selectedServerID);
let filteredSM = serverMembers.filter(
sm => sm.server_id === selectedServerID
);
let getMember = filteredSM.map(sm => {
sm.member = members[sm.uniqueID];
// attach presense
if (sm.uniqueID === this.$store.getters.user.uniqueID) {
sm.presense = this.$store.getters.user.status || 0
sm.presense = this.$store.getters.user.status || 0;
} else {
sm.presense = presences[sm.uniqueID] || 0
sm.presense = presences[sm.uniqueID] || 0;
}
return sm;
})
});
const sort = getMember.sort((a, b) => {
var nameA = a.member.username.toUpperCase();
var nameB = b.member.username.toUpperCase();
@ -61,53 +61,53 @@ export default {
return 1;
}
return 0;
})
});
return sort;
},
onlineMembers() {
return this.members.filter(sm => sm.presense >= 1)
return this.members.filter(sm => sm.presense >= 1);
},
offlineMembers() {
return this.members.filter(sm => sm.presense == 0)
return this.members.filter(sm => sm.presense == 0);
}
}
}
};
</script>
<style scoped>
.members-list {
color: white;
display: flex;
flex-direction: column;
background: rgba(0, 0, 0, 0.6);
flex-direction: column;
width: 300px;
height: 100%;
background-image: url("../../assets/leftPanelBackground.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.header {
height: 50px;
width: 100%;
background: rgba(0, 0, 0, 0.438);
display: flex;
height: 50px;
width: 100%;
background: rgba(0, 0, 0, 0.438);
display: flex;
flex-shrink: 0;
}
.header .title {
user-select: none;
font-size: 19px;
margin: auto;
font-size: 19px;
margin: auto;
}
.members{
padding-top: 10px;
.members {
overflow: auto;
}
.tab {
background: rgba(255, 255, 255, 0.13);
background: #095a5c;
padding: 5px;
user-select: none;
cursor: default;
color: rgb(200, 200, 200);
color: #cce4e3;
font-size: 15px;
}
</style>

307
src/components/app/MessageLogs.vue
View file

@ -1,36 +1,59 @@
<template>
<div ref="msg-logs" class="message-logs" @scroll.passive="scrollEvent" @resize="onResize">
<div class="load-more-button" v-if="loadMoreTop.show && selectedChannelMessages.length >= 50">
<spinner :size="30" v-if="loadMoreTop.loading" />
<div class="text" v-if="!loadMoreTop.loading" @click="loadMoreMessages">Load more</div>
</div>
<message
class="message-container"
v-for="(msg, index) in selectedChannelMessages"
:class="{'show-message-animation': index === selectedChannelMessages.length - 1}"
:key="msg.tempID || msg.messageID"
:date="msg.created"
:admin="msg.creator.admin"
:username="msg.creator.username"
:uniqueID="msg.creator.uniqueID"
:avatar="msg.creator.avatar"
:message="msg.message"
:embed="msg.embed"
:files="msg.files"
:status="msg.status"
:messageID="msg.messageID"
:channelID="msg.channelID"
:type="msg.type"
:timeEdited="msg.timeEdited"
/>
<uploadsQueue v-if="uploadQueue !== undefined" :queue="uploadQueue"/>
<div class="load-more-button" v-if="loadMoreBottom.show && selectedChannelMessages.length >= 50">
<spinner :size="30" v-if="loadMoreBottom.loading" />
<div class="text" v-if="!loadMoreBottom.loading" @click="loadBottomMessages">Load more</div>
</div>
<div ref="msg-logs" class="message-logs" @scroll.passive="scrollEvent" @resize="onResize">
<div class="load-more-button" v-if="loadMoreTop.show && selectedChannelMessages.length >= 50">
<spinner :size="30" v-if="loadMoreTop.loading" />
<div class="text" v-if="!loadMoreTop.loading" @click="loadMoreMessages">Load more</div>
</div>
<message
class="message-container"
v-for="(msg, index) in selectedChannelMessages"
:class="{'show-message-animation': index === selectedChannelMessages.length - 1}"
:key="msg.tempID || msg.messageID"
:date="msg.created"
:admin="msg.creator.admin"
:username="msg.creator.username"
:uniqueID="msg.creator.uniqueID"
:avatar="msg.creator.avatar"
:message="msg.message"
:embed="msg.embed"
:files="msg.files"
:status="msg.status"
:messageID="msg.messageID"
:channelID="msg.channelID"
:type="msg.type"
:timeEdited="msg.timeEdited"
/>
<!-- <div class="typing-list">
<message-typing
class="message-container"
:username="user.username"
:uniqueID="user.uniqueID"
:avatar="user.avatar"
:channelID="'5865686142508030876'"
/>
<message-typing
class="message-container"
:username="user.username"
:uniqueID="user.uniqueID"
:avatar="user.avatar"
:channelID="'5865686142508030876'"
/>
</div>-->
<div class="typing-outer">
<typing-status
v-if="typingRecipients[selectedChannelID]"
:recipients="typingRecipients[selectedChannelID]"
/>
</div>
<uploadsQueue v-if="uploadQueue !== undefined" :queue="uploadQueue" />
<div
class="load-more-button"
v-if="loadMoreBottom.show && selectedChannelMessages.length >= 50"
>
<spinner :size="30" v-if="loadMoreBottom.loading" />
<div class="text" v-if="!loadMoreBottom.loading" @click="loadBottomMessages">Load more</div>
</div>
</div>
</template>
<script>
@ -40,15 +63,17 @@ import Message from "../../components/app/MessageTemplate.vue";
import Spinner from "@/components/Spinner.vue";
import uploadsQueue from "@/components/app/uploadsQueue.vue";
import debounce from "lodash/debounce";
import TypingStatus from "@/components/app/TypingStatus.vue";
import windowProperties from '@/utils/windowProperties';
import windowProperties from "@/utils/windowProperties";
export default {
props: ["typingRecipients"],
components: {
Message,
Spinner,
uploadsQueue,
TypingStatus
},
data() {
return {
@ -61,36 +86,52 @@ export default {
},
loadMoreBottom: {
show: false,
loading: false,
loading: false
},
selectedChannelID: null,
currentScrollTopPos: null,
backToBottomLoading: false,
backToBottomLoading: false
};
},
methods: {
scrollEvent: debounce(function(event) {
const { target: { scrollTop, clientHeight, scrollHeight} } = event;
this.scrolledDown = Math.abs(scrollHeight - scrollTop - clientHeight) <= 3.0;
const {
target: { scrollTop, clientHeight, scrollHeight }
} = event;
this.scrolledDown =
Math.abs(scrollHeight - scrollTop - clientHeight) <= 3.0;
this.scrolledTop = scrollTop === 0;
this.currentScrollTopPos = scrollTop;
}, 20),
scrollDown(data) {
const element = this.$refs['msg-logs']
const element = this.$refs["msg-logs"];
const force = data && data.force ? data.force : false;
const pos = data && data.pos ? data.pos : undefined;
if (!force && !this.scrolledDown) return;
if (!element) return;
element.scrollTop = pos || element.scrollHeight;
},
unloadTopMessages(){
if (this.selectedChannelMessages && this.selectedChannelMessages.length >= 100)
this.$store.dispatch('unloadTopMessages', {channelID: this.selectedChannelID});
unloadTopMessages() {
if (
this.selectedChannelMessages &&
this.selectedChannelMessages.length >= 100
)
this.$store.dispatch("unloadTopMessages", {
channelID: this.selectedChannelID
});
},
unloadBottomMessages(){
if (this.selectedChannelMessages && this.selectedChannelMessages.length >= 100){
this.$store.dispatch('setBottomUnloadStatus', {channelID: this.selectedChannelID, status: true})
this.$store.dispatch('unloadBottomMessages', {channelID: this.selectedChannelID});
unloadBottomMessages() {
if (
this.selectedChannelMessages &&
this.selectedChannelMessages.length >= 100
) {
this.$store.dispatch("setBottomUnloadStatus", {
channelID: this.selectedChannelID,
status: true
});
this.$store.dispatch("unloadBottomMessages", {
channelID: this.selectedChannelID
});
}
},
onResize(dimentions) {
@ -98,152 +139,163 @@ export default {
},
async loadMoreMessages() {
if (this.loadMoreTop.loading) return;
const msgLogs = this.$refs['msg-logs'];
const msgLogs = this.$refs["msg-logs"];
const scrollTop = msgLogs.scrollTop;
const scrollHeight = msgLogs.scrollHeight;
const continueMessageID = this.selectedChannelMessages[0].messageID;
this.$set(this.loadMoreTop, 'loading', true);
const {ok, result, error} = await messagesService.get(this.selectedChannelID, continueMessageID)
this.$set(this.loadMoreTop, "loading", true);
const { ok, result, error } = await messagesService.get(
this.selectedChannelID,
continueMessageID
);
if (ok) {
if (!result.data.messages.length) {
this.$set(this.loadMoreTop, 'loading', false);
this.$set(this.loadMoreTop, 'show', false);
this.$set(this.loadMoreTop, "loading", false);
this.$set(this.loadMoreTop, "show", false);
return;
}
this.$store.dispatch('addMessages', result.data.messages)
this.$store.dispatch("addMessages", result.data.messages);
this.$nextTick(_ => {
this.$set(this.loadMoreTop, 'loading', false);
this.$set(this.loadMoreTop, "loading", false);
msgLogs.scrollTop = msgLogs.scrollHeight - scrollHeight;
})
});
}
},
async loadBottomMessages() {
if (this.loadMoreBottom.loading) return;
const msgLogs = this.$refs['msg-logs'];
const msgLogs = this.$refs["msg-logs"];
const scrollTop = msgLogs.scrollTop;
const scrollHeight = msgLogs.scrollHeight;
const channelID = this.selectedChannelID;
const beforeMessageID = this.selectedChannelMessages[this.selectedChannelMessages.length - 1].messageID;
this.$set(this.loadMoreBottom, 'loading', true);
const {ok, result, error} = await messagesService.get(channelID, null, beforeMessageID)
const beforeMessageID = this.selectedChannelMessages[
this.selectedChannelMessages.length - 1
].messageID;
this.$set(this.loadMoreBottom, "loading", true);
const { ok, result, error } = await messagesService.get(
channelID,
null,
beforeMessageID
);
if (ok) {
if (!result.data.messages.length) {
this.$store.dispatch('setBottomUnloadStatus', {channelID, status: false})
this.$set(this.loadMoreBottom, 'loading', false);
this.$set(this.loadMoreBottom, 'show', false);
this.$store.dispatch("setBottomUnloadStatus", {
channelID,
status: false
});
this.$set(this.loadMoreBottom, "loading", false);
this.$set(this.loadMoreBottom, "show", false);
return;
}
this.$store.dispatch('addMessagesBefore', result.data.messages)
this.$store.dispatch("addMessagesBefore", result.data.messages);
this.$nextTick(_ => {
this.$set(this.loadMoreBottom, 'loading', false);
this.$set(this.loadMoreBottom, "loading", false);
this.scrolledDown = false;
msgLogs.scrollTop = scrollTop
this.$set(this.loadMoreBottom, 'show', true);
})
msgLogs.scrollTop = scrollTop;
this.$set(this.loadMoreBottom, "show", true);
});
}
},
scrolledUpEvent() {
this.unloadBottomMessages();
const msgLogs = this.$refs['msg-logs'];
const msgLogs = this.$refs["msg-logs"];
const scrollTop = msgLogs.scrollTop;
const scrollHeight = msgLogs.scrollHeight;
this.$set(this.loadMoreBottom, 'show', true);
this.$set(this.loadMoreBottom, "show", true);
this.$nextTick(_ => {
msgLogs.scrollTop = 0;
if (this.loadMoreTop.show)
this.loadMoreMessages();
})
if (this.loadMoreTop.show) this.loadMoreMessages();
});
},
scrolledDownEvent(){
this.unloadTopMessages()
this.$set(this.loadMoreTop, 'show', true);
this.$nextTick(_ => {
if (this.loadMoreBottom.show)
this.loadBottomMessages();
})
scrolledDownEvent() {
this.unloadTopMessages();
this.$set(this.loadMoreTop, "show", true);
this.$nextTick(_ => {
if (this.loadMoreBottom.show) this.loadBottomMessages();
});
},
async backToBottomEvent() {
if (this.backToBottomLoading) return;
const channelID = this.selectedChannelID;
const bottomUnloaded = this.bottomUnloaded;
if (!bottomUnloaded) {
this.scrollDown({force: true});
this.scrollDown({ force: true });
this.unloadTopMessages();
return;
}
this.backToBottomLoading = true;
const {ok, result, error} = await messagesService.get(this.selectedChannelID)
const { ok, result, error } = await messagesService.get(
this.selectedChannelID
);
if (ok) {
this.$store.dispatch('messages', {messages: result.data.messages.reverse(), channelID});
this.$set(this.loadMoreBottom, 'show', false);
this.$store.dispatch('setBottomUnloadStatus', {channelID, status: false})
this.$nextTick(_ => {this.scrollDown({force: true});})
this.$store.dispatch("messages", {
messages: result.data.messages.reverse(),
channelID
});
this.$set(this.loadMoreBottom, "show", false);
this.$store.dispatch("setBottomUnloadStatus", {
channelID,
status: false
});
this.$nextTick(_ => {
this.scrollDown({ force: true });
});
}
this.backToBottomLoading = false;
},
}
},
mounted() {
this.selectedChannelID = this.$store.getters.selectedChannelID;
const pos = this.$store.getters.scrollPosition[this.selectedChannelID];
bus.$on('backToBottom', this.backToBottomEvent)
bus.$on('scrollDown', this.scrollDown)
bus.$emit('scrolledDown',this.scrolledDown);
bus.$on("backToBottom", this.backToBottomEvent);
bus.$on("scrollDown", this.scrollDown);
bus.$emit("scrolledDown", this.scrolledDown);
if (this.bottomUnloaded) {
this.$set(this.loadMoreBottom, 'show', true);
this.$set(this.loadMoreBottom, "show", true);
}
this.$nextTick( _ => {
this.scrollDown({force: pos, pos: pos});
})
this.$nextTick(_ => {
this.scrollDown({ force: pos, pos: pos });
});
},
beforeDestroy() {
this.$store.dispatch("setEditMessage", null);
this.$store.dispatch('changeScrollPosition',{
this.$store.dispatch("changeScrollPosition", {
channelID: this.selectedChannelID,
pos: !this.scrolledDown ? this.currentScrollTopPos : null
});
bus.$off('backToBottom', this.backToBottomEvent);
bus.$off('scrollDown', this.scrollDown)
bus.$off("backToBottom", this.backToBottomEvent);
bus.$off("scrollDown", this.scrollDown);
},
watch: {
selectedChannelMessages(newMessages, oldMessages){
this.$set(this.loadMoreTop, 'show', true);
const msgLogs = this.$refs['msg-logs'];
this.$nextTick(function () {
selectedChannelMessages(newMessages, oldMessages) {
this.$set(this.loadMoreTop, "show", true);
const msgLogs = this.$refs["msg-logs"];
this.$nextTick(function() {
this.scrollDown();
})
});
},
uploadQueue() {
this.$nextTick(function () {
this.scrollDown({force: true});
})
this.$nextTick(function() {
this.scrollDown({ force: true });
});
},
getWindowWidth(dimentions) {
this.onResize();
},
scrolledTop(scrolledTop) {
if (scrolledTop)
this.scrolledUpEvent();
if (scrolledTop) this.scrolledUpEvent();
},
scrolledDown(scrolledDown) {
bus.$emit('scrolledDown',scrolledDown);
if (scrolledDown)
this.scrolledDownEvent();
bus.$emit("scrolledDown", scrolledDown);
if (scrolledDown) this.scrolledDownEvent();
}
},
computed: {
@ -277,24 +329,34 @@ export default {
return editMessage;
},
getWindowWidth() {
return {width: windowProperties.resizeWidth, height: windowProperties.resizeHeight};
return {
width: windowProperties.resizeWidth,
height: windowProperties.resizeHeight
};
},
scrollPosition() {
return this.$store.getters.scrollPosition;
},
bottomUnloaded() {
return this.$store.getters.bottomUnloaded[this.selectedChannelID] || false;
return (
this.$store.getters.bottomUnloaded[this.selectedChannelID] || false
);
}
}
};
</script>
<style lang="scss" scoped>
.typing-outer {
display: flex;
flex: 1;
height: 20px;
margin-bottom: 5px;
margin-left: 10px;
}
.message-logs {
overflow: auto;
flex: 1;
margin-right: 1px;
position: relative;
}
@ -317,7 +379,7 @@ export default {
}
.back-to-bottom-button {
&:hover {
background: rgb(23, 124, 255);
background: rgb(23, 124, 255);
box-shadow: 0px 0px 15px 0px #0000008a;
}
transition: 0.2s;
@ -345,7 +407,6 @@ export default {
}
}
.show-message-animation {
animation: showMessage 0.3s ease-in-out;
}

112
src/components/app/MessagePanel.vue
View file

@ -8,15 +8,26 @@
<div class="loading" v-if="selectedChannelID && !selectedChannelMessages">
<spinner />
</div>
<message-logs v-else-if="selectedChannelID && selectedChannelMessages" :key="selectedChannelID" />
<message-logs
:typingRecipients="typingRecipients"
v-else-if="selectedChannelID && selectedChannelMessages"
:key="selectedChannelID"
/>
<div class="no-channel-selected" v-if="!selectedChannelID">
<div class="material-icons">{{type === 0 ? 'chat' : type === 1 ? 'forum' : 'question'}}</div>
<div class="message">{{type === 0 ? 'Select a person to message!' : type === 1 ?'Select a server!' : "wot"}}</div>
<div
class="message"
>{{type === 0 ? 'Select a person to message!' : type === 1 ?'Select a server!' : "wot"}}</div>
</div>
<div class="chat-input-area" v-if="selectedChannelID">
<div style="position: relative;">
<transition name="show-up">
<div class="back-to-bottom-button" @click="backToTopButton" v-if="!scrolledDown && selectedChannelMessages">
<div
class="back-to-bottom-button"
@click="backToTopButton"
v-if="!scrolledDown && selectedChannelMessages"
>
Back to bottom
<i class="material-icons">keyboard_arrow_down</i>
</div>
@ -26,6 +37,14 @@
</div>
<edit-panel v-if="editMessage" :data="editMessage" />
<div class="seperater" />
<!-- <div class="info">
<div
v-if=" messageLength >= 4500 && (sendMessagePermission === true || editMessage)"
:class="{'message-count': true, 'error-info': messageLength > 5000 }"
>{{messageLength}}/5000</div>
</div>-->
<div class="message-area" v-if="sendMessagePermission === true || editMessage">
<input type="file" ref="sendFileBrowse" @change="attachmentChange" class="hidden" />
<div class="attachment-button" @click="attachmentButton">
@ -52,21 +71,17 @@
@click="editMessage ? updateMessage() : sendMessage()"
>
<i class="material-icons">{{editMessage ? 'edit' : 'send'}}</i>
<div
v-if=" messageLength >= 4500 && (sendMessagePermission === true || editMessage)"
:class="{'message-count': true, 'error-info': messageLength > 5000 }"
>{{messageLength}} / 5000</div>
</button>
</div>
<div class="info">
<div class="typing-outer">
<typing-status
v-if="typingRecipients[selectedChannelID]"
:recipients="typingRecipients[selectedChannelID]"
/>
</div>
<div v-if=" messageLength >= 4500 && (sendMessagePermission === true || editMessage)"
:class="{'message-count': true, 'error-info': messageLength > 5000 }"
>{{messageLength}}/5000</div>
</div>
</div>
<div class="no-message-permission" v-if="sendMessagePermission === false">You don't have permission to send messages in this channel.</div>
<div
class="no-message-permission"
v-if="sendMessagePermission === false"
>You don't have permission to send messages in this channel.</div>
</div>
</template>
@ -76,21 +91,19 @@ import typingService from "@/services/TypingService";
import { bus } from "../../main";
import JQuery from "jquery";
import Spinner from "@/components/Spinner.vue";
import TypingStatus from "@/components/app/TypingStatus.vue";
import heading from "@/components/app/MessagePanel/Heading.vue";
import emojiSuggestions from "@/components/app/EmojiPanels/emojiSuggestions.vue";
import MessageLogs from "@/components/app/MessageLogs.vue";
import emojiParser from "@/utils/emojiParser.js";
import emojiParser from "@/utils/emojiParser.js";
import windowProperties from "@/utils/windowProperties";
const emojiPanel = () => import("@/components/app/EmojiPanels/emojiPanel.vue");
const EditPanel = () => import("@/components/app/EditPanel.vue");
export default {
props: ['type'], // type 0: dm; type 1: server
props: ["type"], // type 0: dm; type 1: server
components: {
Spinner,
TypingStatus,
emojiSuggestions,
emojiPanel,
heading,
@ -243,7 +256,7 @@ export default {
input.style.height = "auto";
input.style.height = `calc(${input.scrollHeight}px - 1em)`;
}
bus.$emit('scrollDown');
bus.$emit("scrollDown");
},
emojiSwitchKey(event) {
if (!this.emojiArray) return;
@ -449,10 +462,12 @@ export default {
}
},
backToTopButton() {
bus.$emit('backToBottom');
bus.$emit("backToBottom");
},
editMessageEvent(editMessage) {
this.message = editMessage ? emojiParser.emojiToShortcode(editMessage.message) : '';
this.message = editMessage
? emojiParser.emojiToShortcode(editMessage.message)
: "";
},
onBlur() {
clearTimeout(this.postTimerID);
@ -469,7 +484,6 @@ export default {
user.unique_id === this.user.uniqueID
)
return;
if (typingRecipients === undefined) {
this.$set(this.typingRecipients, channel_id, {
[user.unique_id]: { username: user.username }
@ -494,11 +508,11 @@ export default {
bus.$on("emojiSuggestions:Selected", this.enterEmojiSuggestion);
bus.$on("emojiPanel:Selected", this.enterEmojiPanel);
bus.$on('scrolledDown', (scrolledDown) => {
bus.$on("scrolledDown", scrolledDown => {
this.scrolledDown = scrolledDown;
})
});
window.addEventListener('blur', this.onBlur)
window.addEventListener("blur", this.onBlur);
window.addEventListener("focus", this.onFocus);
},
@ -520,7 +534,7 @@ export default {
},
message(message) {
this.messageLength = message.length;
this.$nextTick(this.resize)
this.$nextTick(this.resize);
}
},
computed: {
@ -544,16 +558,19 @@ export default {
channel() {
return this.$store.getters.channels[this.selectedChannelID];
},
server () {
server() {
if (!this.channel) return false;
if (!this.channel.server_id) return false;
return this.$store.getters["servers/servers"][this.channel.server_id] || undefined;
return (
this.$store.getters["servers/servers"][this.channel.server_id] ||
undefined
);
},
sendMessagePermission() {
if (this.type !== 1) return true;
if (!this.channel) return null
if (!this.channel) return null;
if (!this.server) return false;
if (!this.server) return false;
if (this.server.creator.uniqueID === this.user.uniqueID) return true;
if (!this.channel.permissions) return true;
@ -591,7 +608,7 @@ export default {
width: windowProperties.resizeWidth,
height: windowProperties.resizeHeight
};
},
}
}
};
</script>
@ -636,7 +653,6 @@ export default {
.right-panel {
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0.650);
flex: 1;
display: flex;
flex-direction: column;
@ -646,7 +662,6 @@ export default {
.message-logs {
overflow: auto;
flex: 1;
margin-right: 2px;
position: relative;
}
@ -657,8 +672,7 @@ export default {
.chat-input-area {
display: flex;
flex-direction: column;
padding-top: 5px;
margin-bottom: 5px;
margin-bottom: 10px;
position: relative;
}
@ -682,23 +696,24 @@ export default {
}
}
.seperater {
height: 1px;
width: calc(100% - 10px);
align-self: center;
background-color: #a0c8d5;
flex-shrink: 0;
margin-bottom: 10px;
}
.chat-input-area .info {
color: rgba(255, 255, 255, 0.466);
font-size: 12px;
margin-left: 25px;
margin-left: 13px;
margin-top: 5px;
display: flex;
}
.typing-outer {
flex: 1;
height: 20px;
}
.message-count {
float: right;
margin-right: 20px;
margin-top: 3px;
font-size: 15px;
}
.message-area {
@ -724,7 +739,7 @@ export default {
max-height: 30vh;
overflow-y: auto;
&:hover {
background: rgba(255, 255, 255, 0.10);
background: rgba(255, 255, 255, 0.1);
}
&:focus {
@ -744,9 +759,12 @@ export default {
width: 50px;
transition: 0.3s;
display: flex;
flex-direction: column;
flex-shrink: 0;
user-select: none;
overflow: hidden;
cursor: pointer;
align-items: center;
.material-icons {
margin: auto;
}
@ -780,7 +798,7 @@ export default {
margin: auto;
}
&:hover {
background: rgba(255, 255, 255, 0.13);
background: rgba(255, 255, 255, 0.13);
}
}

2
src/components/app/MessagePanel/Heading.vue
View file

@ -61,7 +61,7 @@ export default {
<style scoped>
.heading {
background: rgba(0, 0, 0, 0.185);
background: #112c30;
margin-bottom: 0;
height: 50px;
display: flex;

23
src/components/app/MessageTemplate.vue
View file

@ -18,10 +18,7 @@
</div>
<div class="content" @dblclick="contentDoubleClickEvent">
<div class="user-info">
<div
class="username"
@click="openUserInformation"
>{{ this.$props.username }}</div>
<div class="username" @click="openUserInformation">{{ this.$props.username }}</div>
<div class="date">{{ getDate }}</div>
</div>
<div class="content-message" v-html="formatMessage" />
@ -135,7 +132,8 @@ export default {
channelID: this.channelID,
messageID: this.messageID,
message: this.message,
uniqueID: this.uniqueID
uniqueID: this.uniqueID,
type: this.type
});
},
openUserInformation() {
@ -285,7 +283,7 @@ export default {
}
.presence-message {
margin: 10px;
display: flex;
display: flex;
color: white;
overflow: hidden;
}
@ -296,10 +294,9 @@ export default {
color: white;
overflow: hidden;
border-radius: 5px;
background: rgba(0, 0, 0, 0.356);
background: #0a1a1c;
}
.presence-message .text {
margin-left: 5px;
font-size: 15px;
@ -330,7 +327,6 @@ export default {
border-right: none !important;
}
.ownMessageLeft .avatar {
margin-right: 0px;
margin-left: 5px;
@ -352,14 +348,13 @@ export default {
background: rgba(184, 184, 184, 0.219);
}
.ownMessage .date {
color: rgb(209, 209, 209);
}
.file-content {
display: flex;
background: rgba(0, 0, 0, 0.089);
background: #0a1a1c;
padding: 10px;
margin-top: 5px;
}
@ -410,11 +405,11 @@ export default {
height: 0;
border-top: 9px solid transparent;
border-bottom: 0px solid transparent;
border-right: 8px solid rgba(0, 0, 0, 0.301);
border-right: 8px solid #0a1a1c;
}
.content {
background: rgba(0, 0, 0, 0.301);
background: #0a1a1c;
padding: 10px;
display: flex;
justify-content: center;
@ -433,7 +428,7 @@ export default {
margin-top: 10px;
padding: 5px;
border-radius: 5px;
background: rgba(0, 0, 0, 0.493);
background: #1d2c2e;
display: -ms-flexbox;
display: flex;
flex-direction: column;

50
src/components/app/MyMiniInformation.vue
View file

@ -6,27 +6,16 @@
:admin="user.admin"
size="40px"
:hover="true"
@click.native="openUserInformation"
@click.native="openUserInformation"
/>
<div class="information">
<div class="username">{{user.username}}</div>
<div class="tag">@{{user.tag}}</div>
</div>
<div
class="status-button"
@click="status.isPoppedOut = !status.isPoppedOut"
>
<statusList
v-if="status.isPoppedOut"
v-click-outside="closeMenus"
class="status-popout"
/>
<img
class="status"
:src="getStatus"
/>
<div class="status-button" @click="status.isPoppedOut = !status.isPoppedOut">
<statusList v-if="status.isPoppedOut" v-click-outside="closeMenus" class="status-popout" />
<img class="status" :src="getStatus" />
</div>
</div>
</template>
@ -36,7 +25,7 @@ import config from "@/config.js";
import statusList from "../../components/app/statusList.vue";
import settingsService from "@/services/settingsService";
import ProfilePicture from "@/components/ProfilePictureTemplate.vue";
import statuses from '@/utils/statuses';
import statuses from "@/utils/statuses";
export default {
components: {
@ -63,8 +52,8 @@ export default {
0}.svg`);
},
getStatusColor() {
const status = this.$store.getters.user.status || 0
return statuses[parseInt(status)].bgColor
const status = this.$store.getters.user.status || 0;
return statuses[parseInt(status)].bgColor;
}
},
created() {
@ -76,10 +65,10 @@ export default {
},
methods: {
openUserInformation() {
this.$store.dispatch('setUserInformationPopout', this.user.uniqueID)
this.$store.dispatch("setUserInformationPopout", this.user.uniqueID);
},
closeMenus(event) {
if (event.target.closest('.status-button')) return;
if (event.target.closest(".status-button")) return;
this.status.isPoppedOut = false;
},
openSurvey() {
@ -94,8 +83,7 @@ export default {
if (ok && result.data.status == true) {
this.$store.dispatch("changeStatus", result.data.set);
}
},
}
}
};
</script>
@ -103,11 +91,9 @@ export default {
<style scoped lang="scss">
.my-mini-information {
display: flex;
position: relative;
background: rgba(0, 0, 0, 0.5);
flex-shrink: 0;
align-items: center;
height: 60px;
@ -127,26 +113,28 @@ export default {
margin-left: 5px;
overflow: hidden;
flex: 1;
.username, .tag {
.username,
.tag {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tag {
font-size: 13px;
color: rgb(187, 187, 187);
color: #b2d1d9;
}
}
.status-button {
display: flex;
justify-content: center;
align-items: center;
height: 60px;
width: 60px;
height: 40px;
width: 40px;
border-radius: 50%;
transition: 0.2s;
margin-left: 3px;
margin-right: 5px;
user-select: none;
cursor: pointer;
.status {
@ -155,9 +143,7 @@ export default {
flex-shrink: 0;
}
&:hover {
background: rgba(44, 44, 44, 0.596);
background: rgba(0, 0, 0, 0.3);
}
}
</style>

13
src/components/app/Navigation.vue
View file

@ -176,10 +176,10 @@ export default {
});
},
addFriend() {
this.$store.dispatch('setAllPopout', {
this.$store.dispatch("setAllPopout", {
show: true,
type: "ADD_FRIEND",
})
type: "ADD_FRIEND"
});
},
openSurvey() {
this.$store.dispatch("setPopoutVisibility", {
@ -264,7 +264,7 @@ export default {
flex-shrink: 0;
height: 100%;
width: 60px;
background-color: rgba(0, 0, 0, 0.3);
background-color: #085053;
}
.container {
@ -311,11 +311,10 @@ export default {
opacity: 0.8;
transition: 0.2s;
&:hover {
background: rgba(255, 255, 255, 0.07);
background: #074447;
}
&.selected {
background: rgba(255, 255, 255, 0.13);
opacity: 1;
background: #042a2b;
}
}

100
src/components/app/Popouts/Popouts/SettingsPanels/EditProfile.vue
View file

@ -7,24 +7,49 @@
<div class="outer-input">
<div class="title">Username</div>
<div class="user-tag">
<input type="text" class="username" :default-value.prop="user.username" @input="inputEvent('username', $event)"/>
<input
type="text"
class="username"
:default-value.prop="user.username"
@input="inputEvent('username', $event)"
/>
<input type="text" class="tag" :default-value.prop="user.tag" @input="inputEvent('tag', $event)"/>
<input
type="text"
class="tag"
:default-value.prop="user.tag"
@input="inputEvent('tag', $event)"
/>
</div>
</div>
<div class="outer-input">
<div class="title">Email</div>
<input type="email" autocomplete="off" :default-value.prop="user.email" @input="inputEvent('email', $event)"/>
<input
type="email"
autocomplete="off"
:default-value.prop="user.email"
@input="inputEvent('email', $event)"
/>
</div>
<div class="outer-input">
<div class="title">Current Password</div>
<input type="password" autocomplete="new-password" ref="passwordInput" @input="inputEvent('password', $event)" />
<input
type="password"
autocomplete="new-password"
ref="passwordInput"
@input="inputEvent('password', $event)"
/>
</div>
<div class="link" v-if="!resetPassword" @click="resetPassword = true">Reset Password</div>
<div class="outer-input" v-if="resetPassword">
<div class="title">New Password</div>
<input type="password" autocomplete="new-password" @input="inputEvent('new_password', $event)" />
<input
type="password"
autocomplete="new-password"
@input="inputEvent('new_password', $event)"
/>
</div>
<div class="link" @click="linkGoogleDrive">Re-link Google Drive</div>
</form>
</div>
@ -45,11 +70,16 @@
accept=".jpeg, .jpg, .png, .gif"
class="hidden"
@change="avatarChangeEvent"
>
/>
</div>
</div>
</div>
<div class="button save-button" :class="{disabled: requestSent}" @click="updateProfile" v-if="changed">{{requestSent ? 'Saving...' : 'Update'}}</div>
<div
class="button save-button"
:class="{disabled: requestSent}"
@click="updateProfile"
v-if="changed"
>{{requestSent ? 'Saving...' : 'Update'}}</div>
</div>
</template>
@ -69,12 +99,12 @@ export default {
changed: false,
resetPassword: false,
update: {},
key: 0,
key: 0
};
},
methods: {
inputEvent(name, event) {
this.$set(this.update, name, event.target.value)
this.$set(this.update, name, event.target.value);
},
avatarChangeEvent(event) {
if (!this.googleDriveLinked) {
@ -86,62 +116,77 @@ export default {
}
const file = event.target.files[0];
const _this = this;
const maxSize = 2092000;
const maxSize = 2092000;
if (file.size > maxSize) {
return this.$store.dispatch('setGenericMessage', "Image is larger than 2MB")
return this.$store.dispatch(
"setGenericMessage",
"Image is larger than 2MB"
);
}
event.target.value = "";
const allowedFormats = [".png", ".jpeg", ".gif", ".jpg"];
if (!allowedFormats.includes(path.extname(file.name).toLowerCase())) {
return this.$store.dispatch('setGenericMessage', "That file format is not allowed!");
return this.$store.dispatch(
"setGenericMessage",
"That file format is not allowed!"
);
}
let reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function () {
_this.$set(_this.update, 'avatar', reader.result);
reader.onload = function() {
_this.$set(_this.update, "avatar", reader.result);
};
reader.onerror = function (error) {
console.log('Error: ', error);
return this.$store.dispatch('setGenericMessage', "Something went wrong. Try again later.")
reader.onerror = function(error) {
console.log("Error: ", error);
return this.$store.dispatch(
"setGenericMessage",
"Something went wrong. Try again later."
);
};
},
async updateProfile() {
if (this.requestSent) return;
this.errors = null;
this.requestSent = true;
const {ok, result, error} = await userService.update(this.update)
const { ok, result, error } = await userService.update(this.update);
if (!ok) {
if (error.response === undefined) {
this.errors = { message: 'Cant connect to server' }
this.errors = { message: "Cant connect to server" };
return;
}
const data = error.response.data;
if (data.message) {
this.errors = [{msg: data.message}];
this.errors = [{ msg: data.message }];
return;
}
this.errors = data.errors;
} else {
this.$refs['passwordInput'].value = "";
this.resetPassword = false
this.$set(this, 'update', {})
this.$refs["passwordInput"].value = "";
this.resetPassword = false;
this.$set(this, "update", {});
this.key = Math.random();
}
this.requestSent = false;
},
linkGoogleDrive() {
this.$store.dispatch("setPopoutVisibility", {
name: "GDLinkMenu",
visibility: true
});
}
},
watch: {
update(obj) {
if ( Object.keys(obj).length === 0 ){
return this.changed = false
if (Object.keys(obj).length === 0) {
return (this.changed = false);
}
this.changed = true;
}
},
computed: {
googleDriveLinked() {
return this.$store.getters['settingsModule/settings'].GDriveLinked
return this.$store.getters["settingsModule/settings"].GDriveLinked;
},
avatar() {
return config.domain + "/avatars/" + this.$store.getters.user.avatar;
@ -283,5 +328,4 @@ export default {
text-align: center;
}
}
</style>

75
src/components/app/Popouts/Popouts/messageContextMenu.vue
View file

@ -1,27 +1,29 @@
<template>
<div class="drop-down-menu" v-click-outside="outsideClick">
<div class="item" @click="copyMessage" >Copy</div>
<div class="item" @click="editMessage" v-if="showEditOption">Edit</div>
<div class="item" @click="copyMessage" v-if="!isPrecense">Copy</div>
<div class="item" @click="editMessage" v-if="showEditOption && !isPrecense">Edit</div>
<div class="item warn" @click="deleteMessage" v-if="showDeleteOption">Delete</div>
</div>
</template>
<script>
import messagesService from '@/services/messagesService';
import messagesService from "@/services/messagesService";
export default {
data() {
return {
};
return {};
},
methods: {
closeMenu() {
this.$store.dispatch('setMessageContext', {messageID: null, x: null, y: null});
this.$store.dispatch("setMessageContext", {
messageID: null,
x: null,
y: null
});
},
outsideClick(event) {
const target = event.target;
if (target.closest('.drop-down-button')) return;
if (target.closest(".drop-down-button")) return;
this.closeMenu();
},
editMessage() {
@ -37,14 +39,17 @@ export default {
this.closeMenu();
},
async deleteMessage() {
messagesService.delete(this.contextDetails.messageID, this.contextDetails.channelID);
messagesService.delete(
this.contextDetails.messageID,
this.contextDetails.channelID
);
this.closeMenu();
},
setPosition() {
const y = this.contextDetails.y + 20;
const x = this.contextDetails.x - 20;
this.$el.style.top = y + "px";
this.$el.style.top = y + "px";
this.$el.style.left = x + "px";
}
},
@ -58,45 +63,62 @@ export default {
},
computed: {
contextDetails() {
const { x, y, messageID, message, channelID, uniqueID } = this.$store.getters.popouts.messageContextMenu;
return {
const {
x,
y,
messageID,
message,
channelID,
uniqueID
}
uniqueID,
type
} = this.$store.getters.popouts.messageContextMenu;
return {
x,
y,
messageID,
message,
channelID,
uniqueID,
type
};
},
serverID() {
const serverChannelIDs = Object.entries(this.$store.getters['servers/channelsIDs']);
const serverChannelIDs = Object.entries(
this.$store.getters["servers/channelsIDs"]
);
const find = serverChannelIDs.find(c => {
return c[1].includes(this.contextDetails.channelID)
return c[1].includes(this.contextDetails.channelID);
});
return find ? find[0] : undefined;
return find ? find[0] : undefined;
},
serverMember () {
const serverMembers = this.$store.getters['servers/serverMembers'];
return serverMembers.find(m =>
m.uniqueID === this.user.uniqueID && m.server_id === this.serverID && m.type === "OWNER"
)
serverMember() {
const serverMembers = this.$store.getters["servers/serverMembers"];
return serverMembers.find(
m =>
m.uniqueID === this.user.uniqueID &&
m.server_id === this.serverID &&
m.type === "OWNER"
);
},
user() {
return this.$store.getters.user;
},
//if precense
isPrecense() {
return this.contextDetails.type >= 1;
},
showEditOption() {
// Only show edit option if the user is us.
return this.user.uniqueID === this.contextDetails.uniqueID
return this.user.uniqueID === this.contextDetails.uniqueID;
},
showDeleteOption() {
// Only show delete option if the user is us or server owner is us.
if (this.user.uniqueID === this.contextDetails.uniqueID){
if (this.user.uniqueID === this.contextDetails.uniqueID) {
return true;
}
return !!this.serverMember;
}
},
}
};
</script>
@ -125,5 +147,4 @@ export default {
color: rgb(255, 59, 59);
}
}
</style>

201
src/components/app/Popouts/Popouts/userInformationPopout.vue
View file

@ -1,67 +1,102 @@
<template>
<div
class="drop-background"
@click="backgroundClickEvent"
>
<div class="drop-background" @click="backgroundClickEvent">
<div class="box">
<div class="back-button" @click="close">
<div class="material-icons">
keyboard_arrow_left
</div>
<div class="material-icons">keyboard_arrow_left</div>
</div>
<spinner class="spinner" v-if="!user" />
<div class="inner" v-if="user">
<div class="profile">
<profile-picture
class="avatar"
size="120px"
:url="`${avatarDomain}${user.avatar}`"
/>
<profile-picture class="avatar" size="120px" :url="`${avatarDomain}${user.avatar}`" />
<div class="uesrname-tag">
<div class="username">{{user.username}}</div>
<div class="tag">@{{user.tag}}</div>
</div>
<!-- <div class="details">
</div>
<!-- <div class="details">
Pancake • Male • 17-19 • United Kingdom
</div> -->
<div class="actions" v-if="uniqueID !== selfUniqueID">
<div class="action-buttons">
<div class="button" v-if="this.relationshipStatus === null" @click="AddFriendButton"><div class="material-icons">person_add</div><div>Add Friend</div></div>
<div class="button" v-if="this.relationshipStatus === 0" @click="RemoveFriendButton"><div class="material-icons">hourglass_empty</div><div>Request Sent</div></div>
<div class="button green" v-if="this.relationshipStatus === 1" @click="AcceptFriendButton"><div class="material-icons">check</div><div>Accept Friend</div></div>
<div class="button" @click="openChat"><div class="material-icons">message</div><div>Message</div></div>
<div class="button warn" v-if="this.relationshipStatus === 2" @click="RemoveFriendButton"><div class="material-icons">person_add_disabled</div><div>Remove Friend</div></div>
<div class="button warn"><div class="material-icons">block</div><div>Block</div></div>
</div>-->
<div class="actions" v-if="uniqueID !== selfUniqueID">
<div class="action-buttons">
<div class="button" v-if="this.relationshipStatus === null" @click="AddFriendButton">
<div class="material-icons">person_add</div>
<div>Add Friend</div>
</div>
<div class="button" v-if="this.relationshipStatus === 0" @click="RemoveFriendButton">
<div class="material-icons">hourglass_empty</div>
<div>Request Sent</div>
</div>
<div
class="button green"
v-if="this.relationshipStatus === 1"
@click="AcceptFriendButton"
>
<div class="material-icons">check</div>
<div>Accept Friend</div>
</div>
<div class="button" @click="openChat">
<div class="material-icons">message</div>
<div>Message</div>
</div>
<div
class="button warn"
v-if="this.relationshipStatus === 2"
@click="RemoveFriendButton"
>
<div class="material-icons">person_add_disabled</div>
<div>Remove Friend</div>
</div>
<div class="button warn">
<div class="material-icons">block</div>
<div>Block</div>
</div>
</div>
</div>
</div>
<div class="scrollable">
<div class="badges" v-if="user.badges && filteredBadges.length">
<div class="title">Badges</div>
<div class="badges-list">
<div class="badge" v-for="(badge, index) of filteredBadges" v-bind:style="{ 'border-color': badges[badge].color }" :key="index">
<img class="icon" :src="badges[badge].icon"/>
<div
class="badge"
v-for="(badge, index) of filteredBadges"
v-bind:style="{ 'border-color': badges[badge].color }"
:key="index"
>
<img class="icon" :src="badges[badge].icon" />
<div class="name">{{badges[badge].name}}</div>
</div>
</div>
</div>
<div class="about-me" v-if="aboutMe">
<div class="about-me">
<div class="title">Profile</div>
<div class="about-item" v-for="(aboutItem) of aboutMe" :key="aboutItem.name" :class="{infoAboutMe: aboutItem.key === 'About me'}">
<div class="key">{{aboutItem.key}}: </div>
<div
v-if="aboutMe"
class="about-item"
v-for="(aboutItem) of aboutMe"
:key="aboutItem.name"
:class="{infoAboutMe: aboutItem.key === 'About me'}"
>
<div class="key">{{aboutItem.key}}:</div>
<div class="emoji" v-if="aboutItem.emoji" v-html="aboutItem.emoji"></div>
<div class="name" v-if="aboutItem.key === 'About me'" v-html="formatAboutMe(aboutItem.name)"></div>
<div
class="name"
v-if="aboutItem.key === 'About me'"
v-html="formatAboutMe(aboutItem.name)"
></div>
<div class="name" v-else>{{aboutItem.name}}</div>
</div>
<div class="about-item">
<div class="key">Joined:</div>
<div class="name">{{joinedDate}}</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import {bus} from '@/main'
import { bus } from "@/main";
import config from "@/config.js";
import Spinner from "@/components/Spinner.vue";
import profilePicture from "@/components/ProfilePictureTemplate.vue";
@ -71,6 +106,7 @@ import surveyItems from "@/utils/surveyItems.js";
import emojiParser from "@/utils/emojiParser.js";
import messageFormatter from "@/utils/messageFormatter.js";
import badges from "@/utils/Badges";
import friendlyDate from "@/utils/date";
export default {
components: { Spinner, profilePicture },
@ -108,7 +144,7 @@ export default {
);
},
openChat() {
this.$store.dispatch('setCurrentTab', 1)
this.$store.dispatch("setCurrentTab", 1);
this.$store.dispatch("openChat", {
uniqueID: this.uniqueID,
channelName: this.user.username
@ -122,9 +158,9 @@ export default {
formatAboutMe(string) {
return messageFormatter(string);
},
capitalize(s){
if (typeof s !== 'string') return ''
return s.charAt(0).toUpperCase() + s.slice(1)
capitalize(s) {
if (typeof s !== "string") return "";
return s.charAt(0).toUpperCase() + s.slice(1);
}
},
async mounted() {
@ -134,26 +170,34 @@ export default {
}
},
computed: {
aboutMe(){
const about_me = this.user.about_me
joinedDate() {
return friendlyDate(this.user.created);
},
aboutMe() {
const about_me = this.user.about_me;
if (!about_me) return null;
if (about_me._id) delete about_me._id;
const arr = [];
for (let index in about_me) {
const item = {key: this.capitalize(index.replace('_', " ")), name: about_me[index]};
if (item.name && item.name.length && item.name !== "Rather not say"){
if (surveyItems.constants[index]){
const i = surveyItems[surveyItems.constants[index]].find(i => i.name === item.name);
item.emoji = i ? this.emojiParse(i.emoji) : undefined;
const item = {
key: this.capitalize(index.replace("_", " ")),
name: about_me[index]
};
if (item.name && item.name.length && item.name !== "Rather not say") {
if (surveyItems.constants[index]) {
const i = surveyItems[surveyItems.constants[index]].find(
i => i.name === item.name
);
item.emoji = i ? this.emojiParse(i.emoji) : undefined;
}
arr.push(item)
arr.push(item);
}
}
return arr
return arr;
},
filteredBadges() {
if (!this.user.badges) return;
return this.user.badges.filter(b => this.badges[b])
return this.user.badges.filter(b => this.badges[b]);
},
selfUniqueID() {
return this.$store.getters.user.uniqueID;
@ -167,14 +211,10 @@ export default {
if (!allFriend[userUniqueID]) return null;
return allFriend[userUniqueID].status;
}
},
}
};
</script>
<style scoped>
.drop-background {
position: absolute;
background: rgba(0, 0, 0, 0.2);
@ -194,21 +234,13 @@ export default {
display: flex;
flex-direction: row;
position: relative;
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(10px);
box-shadow: 0px 0px 20px 11px #151515c4;
background-image: url("../../../../assets/leftPanelBackground.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
@supports ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))) {
.box{
background: rgba(0, 0, 0, 0.3);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
}
.spinner {
align-self: center;
}
@ -229,7 +261,7 @@ export default {
scrollbar-width: thin;
}
.scrollable::-webkit-scrollbar {
width: 3px;
width: 3px;
}
.profile {
display: flex;
@ -254,11 +286,11 @@ export default {
user-select: auto !important;
}
.tag {
color: rgb(139, 139, 139);
color: #ccdadd;
}
.button {
padding: 8px;
padding: 8px;
align-self: center;
user-select: none;
cursor: default;
@ -267,8 +299,8 @@ export default {
z-index: 1;
cursor: pointer;
}
.button::after{
content: '';
.button::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
@ -286,17 +318,17 @@ export default {
opacity: 1;
}
.badges{
.badges {
display: flex;
flex-direction: column;
width: 100%;
margin-top: 10px;
border-bottom: solid 2px rgba(0, 0, 0, 0.3);
border-bottom: solid 1px #84b7be;
padding-bottom: 10px;
user-select: none;
cursor: default;
flex-shrink: 0
flex-shrink: 0;
}
.actions {
display: flex;
@ -306,14 +338,14 @@ export default {
user-select: none;
cursor: default;
flex-shrink: 0
flex-shrink: 0;
}
.title {
font-size: 20px;
margin-bottom: 3px;
margin-left: 10px;
}
.badges-list{
.badges-list {
display: flex;
flex-wrap: wrap;
flex-shrink: 0;
@ -328,7 +360,7 @@ export default {
border-radius: 6px;
margin: 3px;
display: flex;
flex-shrink: 0
flex-shrink: 0;
}
.badge .name {
margin-top: 1px;
@ -344,25 +376,26 @@ export default {
width: 20px;
}
.about-me{
.about-me {
display: flex;
flex-direction: column;
width: 100%;
margin-top: 10px;
cursor: default;
flex-shrink: 0
flex-shrink: 0;
}
.about-item{
.about-item {
display: flex;
align-items: center;
margin-top: 2px;
margin-bottom: 2px;
padding: 10px;
flex-shrink: 0
padding-top: 5px;
padding-bottom: 5px;
flex-shrink: 0;
}
.about-item .key {
color: rgb(0, 153, 255);
color: #b6dbe1;
}
.about-item .name {
white-space: nowrap;
@ -431,7 +464,7 @@ export default {
user-select: none;
}
.back-button:hover {
background: rgba(49, 49, 49, 0.712);
background: #0c484e;
}
@media (max-width: 432px) {
.box {
@ -443,8 +476,8 @@ export default {
}
</style>
<style>
.emoji img {
height: 20px;
width: 20px;
}
.emoji img {
height: 20px;
width: 20px;
}
</style>

52
src/components/app/ServerList.vue
View file

@ -4,14 +4,18 @@
<div class="right">
<div class="server-banner" v-if="selectedServerID">
<div class="banner-image"></div>
<div class="sub-banner" >
<div class="text" :title="servers[selectedServerID].name">{{servers[selectedServerID].name}}</div>
<div class="sub-banner">
<div
class="text"
:title="servers[selectedServerID].name"
>{{servers[selectedServerID].name}}</div>
<div class="options-button material-icons" @click="openServerContext">more_vert</div>
</div>
</div>
<div class="channels-list">
<channels-list v-if="selectedServerID" :server-i-d="selectedServerID" />
</div>
<div class="seperater" />
<MyMiniInformation />
</div>
</div>
@ -48,25 +52,25 @@ export default {
this.$store.dispatch("servers/setSelectedServerID", serverID);
},
openExploreTab() {
this.$store.dispatch('setCurrentTab', 0)
this.$store.dispatch("setCurrentTab", 0);
},
openServerContext(event) {
const rect = event.target.getBoundingClientRect();
if (this.checkServerContextOpened) {
this.$store.dispatch('setAllPopout', {
this.$store.dispatch("setAllPopout", {
show: false,
type: null
})
});
return;
}
this.$store.dispatch('setAllPopout', {
this.$store.dispatch("setAllPopout", {
show: true,
type: 'SERVER',
type: "SERVER",
serverID: this.servers[this.selectedServerID].server_id,
creatorUniqueID: this.servers[this.selectedServerID].creator.uniqueID,
x: rect.left - 30,
y: rect.top + 35,
})
y: rect.top + 35
});
}
},
computed: {
@ -95,13 +99,24 @@ export default {
<style scoped lang="scss" >
.left-panel {
background-color: rgba(0, 0, 0, 0.6);
height: 100%;
width: 300px;
flex-shrink: 0;
display: flex;
flex-direction: row;
z-index: 1;
background-image: url("../../assets/leftPanelBackground.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.seperater {
height: 1px;
width: calc(100% - 10px);
align-self: center;
background-color: #a0c8d5;
flex-shrink: 0;
}
.channels-list {
@ -109,18 +124,6 @@ export default {
flex: 1;
height: 100%;
}
.left {
display: flex;
align-content: center;
align-items: center;
flex-direction: column;
flex-shrink: 0;
background: rgba(29, 29, 29, 0.37);
width: 70px;
overflow-x: auto;
}
.right {
display: flex;
flex-direction: column;
@ -150,7 +153,7 @@ export default {
.sub-banner {
display: flex;
color: white;
background-color: rgba(0, 0, 0, 0.507);
background-color: rgba(0, 0, 0, 0.5);
align-self: flex-end;
height: 35px;
width: 100%;
@ -169,7 +172,7 @@ export default {
width: 100%;
}
}
.options-button {
.options-button {
display: flex;
align-items: center;
align-content: center;
@ -184,6 +187,5 @@ export default {
&:hover {
background: rgba(0, 0, 0, 0.322);
}
}
</style>

39
src/components/app/ServerTemplate/ChannelTemplate.vue
View file

@ -1,9 +1,10 @@
<template>
<div class="channel" :class="{notifyAnimation: hasNotifications, selected: selectedChannelID === channelData.channelID}">
<div
class="channel"
:class="{notifyAnimation: hasNotifications, selected: selectedChannelID === channelData.channelID}"
>
<i class="material-icons">storage</i>
<div class="channel-name">
{{ channelData.name }}
</div>
<div class="channel-name">{{ channelData.name }}</div>
</div>
</template>
@ -13,50 +14,47 @@ export default {
computed: {
hasNotifications() {
const notifications = this.$store.getters.notifications;
const find = notifications.find(n => n.channelID === this.channelData.channelID)
return find
const find = notifications.find(
n => n.channelID === this.channelData.channelID
);
return find;
},
selectedChannelID() {
return this.$store.getters.selectedChannelID;
},
}
}
};
</script>
<style scoped>
.notifyAnimation{
.notifyAnimation {
animation: notifyAnime;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-fill-mode: forwards;
}
@keyframes notifyAnime {
0%{
0% {
background: rgba(255, 0, 0, 0.198);
}
40%{
40% {
background: rgba(255, 0, 0, 0.411);
}
60%{
60% {
background: rgba(255, 0, 0, 0.411);
}
100%{
100% {
background: rgba(255, 0, 0, 0.198);
}
}
.channel {
display: flex;
align-items: center;
padding: 5px;
transition: 0.3s;
font-size: 14px;
font-size: 14px;
cursor: pointer;
color: white;
user-select: none;
@ -65,13 +63,12 @@ export default {
padding-left: 10px;
}
.channel:hover {
background: rgba(255, 255, 255, 0.07);
background: #08616b;
}
.channel.selected {
background: rgba(255, 255, 255, 0.13);
background: #064c55;
}
.channel-name {
white-space: nowrap;
overflow: hidden;

40
src/components/app/ServerTemplate/ServerTemplate.vue
View file

@ -1,11 +1,21 @@
<template>
<div class="server" :class="{selected: selectedServerID === serverData.server_id, notifyAnimation: notification }" @contextmenu.prevent="contextEvent" @mouseenter="hoverEvent" @mouseover="hover = true" @mouseleave="hover = false">
<profile-picture size="45px" :url="`${avatarDomain}/${serverData.avatar}${hover ? '' : '?type=png'}`" />
<div
class="server"
:class="{selected: selectedServerID === serverData.server_id, notifyAnimation: notification }"
@contextmenu.prevent="contextEvent"
@mouseenter="hoverEvent"
@mouseover="hover = true"
@mouseleave="hover = false"
>
<profile-picture
size="45px"
:url="`${avatarDomain}/${serverData.avatar}${hover ? '' : '?type=png'}`"
/>
</div>
</template>
<script>
import {bus} from "../../../main.js"
import { bus } from "../../../main.js";
import config from "@/config.js";
import ProfilePicture from "@/components/ProfilePictureTemplate.vue";
import ServerService from "@/services/ServerService";
@ -43,26 +53,28 @@ export default {
methods: {
hoverEvent(event) {
const rect = event.target.getBoundingClientRect();
//let centerX = targetNode.offsetLeft + targetNode.offsetWidth / 2;
//let centerY = targetNode.offsetTop + targetNode.offsetHeight / 2;
bus.$emit('server-tool-tip', {serverID: this.serverData.server_id, top: rect.top})
//let centerX = targetNode.offsetLeft + targetNode.offsetWidth / 2;
//let centerY = targetNode.offsetTop + targetNode.offsetHeight / 2;
bus.$emit("server-tool-tip", {
serverID: this.serverData.server_id,
top: rect.top
});
},
contextEvent(event) {
this.$store.dispatch('setAllPopout', {
this.$store.dispatch("setAllPopout", {
show: true,
type: 'SERVER',
type: "SERVER",
serverID: this.serverData.server_id,
creatorUniqueID: this.serverData.creator.uniqueID,
x: event.clientX,
y: event.clientY
})
});
}
},
}
};
</script>
<style scoped lang="scss">
.server {
position: relative;
z-index: 1;
@ -78,11 +90,10 @@ export default {
transition: 0.2s;
cursor: pointer;
&:hover {
background: rgba(255, 255, 255, 0.07);
background: #074447;
}
&.selected {
background: rgba(255, 255, 255, 0.13);
opacity: 1;
background: #042a2b;
}
}
@ -122,5 +133,4 @@ export default {
opacity: 0.2;
}
}
</style>

7
src/components/app/Tabs/DirectMessage.vue
View file

@ -7,7 +7,7 @@
class="left-panel"
/>
</transition>
<message-panel :type="0"/>
<message-panel :type="0" />
</div>
</template>
@ -53,7 +53,7 @@ export default {
height: 100%;
width: 100%;
}
.left-panel{
.left-panel {
z-index: 2;
}
.slidein-enter-active,
@ -62,7 +62,7 @@ export default {
}
.slidein-enter, .slidein-leave-to /* .fade-leave-active below version 2.1.8 */ {
/* margin-left: -300px; */
transform: translateX(-300px)
transform: translateX(-300px);
}
@media (max-width: 600px) {
.left-panel {
@ -70,7 +70,6 @@ export default {
bottom: 0;
height: calc(100% - 50px);
z-index: 2;
backdrop-filter: blur(15px);
}
}
</style>

20
src/components/app/Tabs/Explore.vue
View file

@ -72,7 +72,7 @@
import { bus } from "@/main";
import Servers from "./Explore/servers";
import ServerService from "@/services/ServerService";
import Navigation from '@/components/app/Navigation';
import Navigation from "@/components/app/Navigation";
export default {
components: { Servers, Navigation },
data() {
@ -89,7 +89,7 @@ export default {
nertiviaServerID: "6572915451527958528",
nertiviaServerHide:
localStorage.getItem("exploreTabNertiviaServerPromoHide") === "true",
donateHide: localStorage.getItem("exploreTabDonateHide") === "true",
donateHide: localStorage.getItem("exploreTabDonateHide") === "true"
};
},
@ -142,10 +142,13 @@ export default {
.left-panel {
display: flex;
flex-direction: row;
background: rgba(0, 0, 0, 0.6);
width: 300px;
flex-shrink: 0;
z-index: 2;
background-image: url("../../../assets/leftPanelBackground.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
.content {
display: flex;
flex-direction: column;
@ -169,17 +172,17 @@ export default {
cursor: pointer;
transition: 0.3s;
&:hover {
background: rgba(255, 255, 255, 0.07);
background: #08616b;
}
&.selected {
background: rgba(255, 255, 255, 0.13);
background: #064c55;
}
}
}
.header {
display: flex;
height: 100px;
background: rgba(0, 0, 0, 0.226);
background: #086974;
user-select: none;
flex-shrink: 0;
.icon {
@ -213,7 +216,7 @@ export default {
position: relative;
}
.description {
opacity: 0.7;
color: #b2d1d4;
font-size: 14px;
}
}
@ -285,7 +288,6 @@ export default {
flex-direction: column;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.39);
color: white;
.material-icons {
font-size: 100px;
@ -293,7 +295,6 @@ export default {
}
.right-panel {
background: rgba(0, 0, 0, 0.65);
.header {
background: rgba(0, 0, 0, 0.448);
padding: 10px;
@ -337,7 +338,6 @@ export default {
position: absolute;
bottom: 0;
height: calc(100% - 44px);
backdrop-filter: blur(15px);
z-index: 2;
}
}

22
src/components/app/Tabs/Explore/searchHeader.vue
View file

@ -54,23 +54,23 @@ export default {
};
},
methods: {
param(){
param() {
const filter = this.filters[this.filterSelected];
const sort = this.sortBys[this.sortSelected];
const sort = this.sortBys[this.sortSelected];
const query = {};
!!filter.param && (query[filter.param] = filter.value);
!!sort.param && (query[sort.param] = sort.value);
return '?' + qs.stringify(query);
return "?" + qs.stringify(query);
}
},
watch:{
},
watch: {
filterSelected() {
this.$emit('params', this.param())
this.$emit("params", this.param());
},
sortSelected() {
this.$emit('params', this.param())
this.$emit("params", this.param());
}
}
};
@ -79,7 +79,7 @@ export default {
<style lang="scss" scoped>
.search-header {
display: flex;
background: rgba(0, 0, 0, 0.231);
background: #0a1d20;
width: 100%;
height: 70px;
flex-shrink: 0;
@ -138,7 +138,6 @@ input {
}
}
@media (max-width: 945px) {
.search-header {
flex-direction: column;
@ -153,13 +152,10 @@ input {
overflow: hidden;
border-radius: 0;
margin-top: 1px;
}
}
.filter-area{
.filter-area {
order: 2;
}
}
</style>

6
src/components/app/Tabs/News.vue
View file

@ -65,7 +65,6 @@ export default {
height: 100%;
color: white;
overflow: auto;
background: #0000005d;
position: relative;
}
@ -91,7 +90,7 @@ export default {
}
.heading {
padding: 10px;
background: rgba(0, 0, 0, 0.555);
background: #071415;
margin-bottom: 10px;
}
.information {
@ -102,7 +101,7 @@ export default {
background: rgba(38, 139, 255, 0.87);
}
.change-log {
background: rgba(0, 0, 0, 0.561);
background: #0a1e20;
overflow-y: auto;
max-width: 700px;
margin: auto;
@ -113,7 +112,6 @@ export default {
height: 100%;
overflow: hidden;
overflow: auto;
}
.plan-list {
color: white;

16
src/components/app/Tabs/Servers.vue
View file

@ -66,18 +66,17 @@ export default {
},
computed: {
selectedServerID() {
return this.$store.getters['servers/selectedServerID'];
},
return this.$store.getters["servers/selectedServerID"];
}
}
};
</script>
<style scoped>
.direct-message-tab{
.direct-message-tab {
overflow: hidden;
}
.left-panel{
.left-panel {
z-index: 2;
}
@ -86,20 +85,17 @@ export default {
transition: 0.5s;
}
.slide-left-enter, .slide-left-leave-to /* .fade-leave-active below version 2.1.8 */ {
transform: translateX(-300px)
transform: translateX(-300px);
}
.slide-right-enter-active,
.slide-right-leave-active {
transition: 0.5s;
}
.slide-right-enter, .slide-right-leave-to /* .fade-leave-active below version 2.1.8 */ {
transform: translateX(300px);
}
@media (max-width: 949px) {
.members-panel {
position: absolute;
@ -107,7 +103,6 @@ export default {
bottom: 0;
height: calc(100% - 50px);
z-index: 1;
backdrop-filter: blur(15px);
}
}
@ -117,7 +112,6 @@ export default {
bottom: 0;
height: calc(100% - 50px);
z-index: 2;
backdrop-filter: blur(15px);
}
}
</style>

83
src/components/app/messageEmbedTemplate.vue
View file

@ -1,10 +1,18 @@
<template>
<div class="embed" ref="embed" :class="{article: embed.type === 'article' || embed.type === 'video.other', website: embed.type === 'website'}">
<div
class="embed"
ref="embed"
:class="{article: embed.type === 'article' || embed.type === 'video.other', website: embed.type === 'website'}"
>
<div class="right">
<div class="image" v-if="imageURL" @click="embedImgClicked"><img ref="image" :src="`//images.weserv.nl/?url=${imageURL }`" alt=""></div>
<div class="image" v-if="imageURL" @click="embedImgClicked">
<img ref="image" :src="`//images.weserv.nl/?url=${imageURL }`" alt />
</div>
</div>
<div class="left">
<div class="title" v-if="embed.url"><a target=”_blank” :href="embed.url">{{embed.title}}</a></div>
<div class="title" v-if="embed.url">
<a target="”_blank”" :href="embed.url">{{embed.title}}</a>
</div>
<div class="title" v-else>{{embed.title}}</div>
<div class="description">{{embed.description}}</div>
</div>
@ -12,51 +20,58 @@
</template>
<script>
import windowProperties from '@/utils/windowProperties';
import windowProperties from "@/utils/windowProperties";
export default {
props: ["embed"],
methods: {
embedImgClicked() {
this.$store.dispatch("setImagePreviewURL", "//images.weserv.nl/?url=" + this.imageURL);
this.$store.dispatch(
"setImagePreviewURL",
"//images.weserv.nl/?url=" + this.imageURL
);
},
clamp(num, min, max) {
return num <= min ? min : num >= max ? max : num;
},
calculateAspectRatioFit(srcWidth, srcHeight, maxWidth, maxHeight) {
let ratio = Math.min(maxWidth / srcWidth, maxHeight / srcHeight);
return { width: srcWidth*ratio, height: srcHeight*ratio };
return { width: srcWidth * ratio, height: srcHeight * ratio };
},
articleSize() {
const image = this.embed.image;
if (!image || !image.dimensions )
if (!image || !image.dimensions) return undefined;
if (this.embed.type !== "article" && this.embed.type !== "video.other")
return undefined;
if (this.embed.type !== "article" && this.embed.type !== "video.other")
return undefined;
const embed = this.$refs['embed'];
const messageLog = document.querySelector('.message-logs');
const embed = this.$refs["embed"];
const messageLog = document.querySelector(".message-logs");
const w = messageLog.offsetWidth;
const h = messageLog.offsetHeight;
const minWidth = this.clamp(w / 2, 0, 200);
const minHeight = h / 2;
const dimensions = image.dimensions
const dimensions = image.dimensions;
const srcWidth = dimensions.width;
const srcHeight = dimensions.height;
const newDimentions = this.calculateAspectRatioFit(
srcWidth,
srcHeight,
minWidth,
minHeight
);
const newDimentions = this.calculateAspectRatioFit(srcWidth, srcHeight, minWidth, minHeight);
const imageTag = this.$refs['image'];
const imageTag = this.$refs["image"];
//embed.style.width = this.clamp(newDimentions.width, 0, srcWidth) + "px"
imageTag.style.width = this.clamp(newDimentions.width, 0, srcWidth) + "px"
imageTag.style.height = this.clamp(newDimentions.height, 0, srcHeight) + "px"
imageTag.style.width =
this.clamp(newDimentions.width, 0, srcWidth) + "px";
imageTag.style.height =
this.clamp(newDimentions.height, 0, srcHeight) + "px";
},
onResize(dimensions) {
this.articleSize();
@ -67,27 +82,30 @@ export default {
},
watch: {
getWindowWidth(dimensions) {
this.onResize(dimensions)
this.onResize(dimensions);
}
},
computed: {
getWindowWidth() {
return {width: windowProperties.resizeWidth, height: windowProperties.resizeHeight};
getWindowWidth() {
return {
width: windowProperties.resizeWidth,
height: windowProperties.resizeHeight
};
},
imageURL() {
const image = this.embed.image;
if (!image) return undefined;
if (typeof image === 'string') return undefined;
if (typeof image === "string") return undefined;
if (image.url) return image.url;
return undefined;
}
}
}
};
</script>
<style scoped>
.embed{
background: rgba(0, 0, 0, 0.507);
.embed {
background: #1d2b2d;
border-radius: 10px;
padding: 5px;
display: flex;
@ -98,7 +116,6 @@ export default {
overflow: hidden;
}
.embed.article {
}
.embed.website {
height: 100px;
@ -145,10 +162,10 @@ export default {
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
word-wrap: break-word;
word-break: break-word;
white-space: pre-wrap;
overflow-wrap: anywhere;
word-wrap: break-word;
word-break: break-word;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.image img {
width: auto;
@ -165,7 +182,7 @@ export default {
position: relative;
}
.image:after {
content: '';
content: "";
position: absolute;
top: 0;
bottom: 0;

127
src/components/app/relationships/FriendsTemplate.vue
View file

@ -1,7 +1,6 @@
<template>
<div
class="friend"
:style="{background: status.status !== 0 ? status.bgColor : ''}"
:class="{selected: uniqueIDSelected, notifyAnimation: (notifications && notifications > 0), tree }"
@click="openChat"
@mouseover="hover = true"
@ -12,67 +11,57 @@
:style="`border-color: ${status.statusColor}; background-image: url(${userAvatar}${hover ? '' : '?type=png'})`"
@click="openUserInformation"
>
<div
class="status"
:style="`background-image: url(${status.statusURL})`"
/>
<div class="status" :style="`background-image: url(${status.statusURL})`" />
</div>
<div class="information">
<div class="username">
{{ recipient.username }}
</div>
<div
class="status-name"
:style="`color: ${status.statusColor}`"
>
{{ status.statusName }}
</div>
<div class="username">{{ recipient.username }}</div>
<div class="status-name">{{ status.statusName }}</div>
</div>
<div
v-if="notifications && notifications >0"
class="notification"
>
<div class="notification-inner">
{{ notifications }}
</div>
<div v-if="notifications && notifications >0" class="notification">
<div class="notification-inner">{{ notifications }}</div>
</div>
</div>
</template>
<script>
import channelService from '@/services/channelService';
import messagesService from '@/services/messagesService';
import config from '@/config.js'
import statuses from '@/utils/statuses';
import {bus} from '@/main'
import channelService from "@/services/channelService";
import messagesService from "@/services/messagesService";
import config from "@/config.js";
import statuses from "@/utils/statuses";
import { bus } from "@/main";
export default {
// tree will add padding to the left.
props: ['username', 'tag', 'channelID', 'uniqueID', 'recipient', 'tree'],
props: ["username", "tag", "channelID", "uniqueID", "recipient", "tree"],
data() {
return {
hover: false
}
};
},
computed: {
notifications () {
notifications() {
const channelID = this.$props.channelID;
const channels = this.$store.getters.channels;
const notifications = this.$store.getters.notifications.find(function(e) {
if (channels[e.channelID] && channels[e.channelID].server_id) return;
return e.channelID == channelID
})
if (!notifications || (this.$props.channelID === this.$store.getters.selectedChannelID && document.hasFocus())) return;
return e.channelID == channelID;
});
if (
!notifications ||
(this.$props.channelID === this.$store.getters.selectedChannelID &&
document.hasFocus())
)
return;
return notifications.count;
},
userAvatar() {
return config.domain + "/avatars/" + this.recipient.avatar
return config.domain + "/avatars/" + this.recipient.avatar;
},
status() {
const presences = this.$store.getters['members/presences'];
const presences = this.$store.getters["members/presences"];
let status = 0;
if (presences[this.recipient.uniqueID]) {
status = presences[this.recipient.uniqueID] || 0
status = presences[this.recipient.uniqueID] || 0;
}
return {
@ -81,40 +70,47 @@ export default {
statusURL: statuses[parseInt(status)].url,
statusColor: statuses[parseInt(status)].color,
bgColor: statuses[parseInt(status)].bgColor
}
};
},
uniqueIDSelected() {
return this.$store.getters.selectedUserUniqueID === this.recipient.uniqueID
return (
this.$store.getters.selectedUserUniqueID === this.recipient.uniqueID
);
}
},
methods: {
async openChat(event) {
if (event.target.closest(".profile-picture")) return;
bus.$emit('closeLeftMenu');
// dismiss notification if exists
bus.$emit("closeLeftMenu");
// dismiss notification if exists
// TODO move this into openchat or something :/
if (this.notifications && this.notifications >= 1 && document.hasFocus()) {
this.$socket.emit('notification:dismiss', {channelID: this.channelID});
if (
this.notifications &&
this.notifications >= 1 &&
document.hasFocus()
) {
this.$socket.emit("notification:dismiss", {
channelID: this.channelID
});
}
this.$store.dispatch('openChat', {
this.$store.dispatch("openChat", {
uniqueID: this.recipient.uniqueID,
channelID: this.channelID,
channelName: this.recipient.username
})
});
},
openUserInformation() {
this.$store.dispatch('setUserInformationPopout', this.recipient.uniqueID)
this.$store.dispatch("setUserInformationPopout", this.recipient.uniqueID);
}
}
}
};
</script>
<style scoped>
.username{
.username {
width: 150px;
white-space: nowrap;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
@ -130,36 +126,34 @@ export default {
.tree {
padding-left: 22px;
}
.notifyAnimation{
.notifyAnimation {
animation: notifyAnime;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-fill-mode: forwards
animation-fill-mode: forwards;
}
@keyframes notifyAnime {
0%{
0% {
background: rgba(255, 0, 0, 0.198);
}
40%{
40% {
background: rgba(255, 0, 0, 0.411);
}
60%{
60% {
background: rgba(255, 0, 0, 0.411);
}
100%{
100% {
background: rgba(255, 0, 0, 0.198);
}
}
.friend:hover {
background: rgba(255, 255, 255, 0.07);
background: #08616b;
}
.friend.selected {
background: rgba(255, 255, 255, 0.13);
background: #064c55;
}
.profile-picture{
.profile-picture {
height: 30px;
width: 30px;
background-color: rgba(0, 0, 0, 0.425);
@ -175,14 +169,14 @@ export default {
transition: 0.3s;
flex-shrink: 0;
}
.information{
.information {
margin: auto;
margin-left: 5px;
margin-right: 5px;
flex: 1;
}
.notification{
.notification {
position: absolute;
display: flex;
background: rgba(134, 134, 134, 0.315);
@ -193,7 +187,7 @@ export default {
width: 50px;
border-radius: 1px;
}
.notification-inner{
.notification-inner {
margin: auto;
}
@ -211,19 +205,20 @@ export default {
transition: 0.3s;
}
.friend:hover .status {
.friend:hover .status {
opacity: 1;
bottom: -4px;
}
.status-name{
.status-name {
opacity: 0;
font-size: 13px;
transition: 0.3s;
color: #b7cbce;
height: 0;
}
.friend:hover .status-name {
opacity: 0.8;
.friend:hover .status-name {
opacity: 1;
height: 13px;
}
</style>

46
src/components/app/relationships/OfflineFriends.vue
View file

@ -1,19 +1,10 @@
<template>
<div class="friends">
<div
class="tab"
@click="expanded = !expanded"
>
<Tab
:expanded="expanded"
tabname="Offline"
/>
<div class="tab" @click="expanded = !expanded">
<Tab :expanded="expanded" tabname="Offline" />
</div>
<transition name="list">
<div
v-if="expanded"
class="list"
>
<div v-if="expanded" class="list">
<FriendsTemplate
v-for="(friend, key) of friends"
:key="key"
@ -27,8 +18,8 @@
</template>
<script>
import Tab from './Tab.vue'
import FriendsTemplate from './FriendsTemplate.vue'
import Tab from "./Tab.vue";
import FriendsTemplate from "./FriendsTemplate.vue";
export default {
components: {
Tab,
@ -37,43 +28,48 @@ export default {
data() {
return {
expanded: true
}
};
},
computed: {
friends() {
const allFriend = this.$store.getters.user.friends;
const members = this.$store.getters['members/members'];
const presences = this.$store.getters['members/presences'];
const members = this.$store.getters["members/members"];
const presences = this.$store.getters["members/presences"];
const result = Object.keys(allFriend).map(function(key) {
allFriend[key].recipient = members[allFriend[key].uniqueID];
return allFriend[key];
});
return result.filter(friend => friend.status == 2 && (!presences[friend.uniqueID] || presences[friend.uniqueID] == 0 ));
return result.filter(
friend =>
friend.status == 2 &&
(!presences[friend.uniqueID] || presences[friend.uniqueID] == 0)
);
}
}
}
};
</script>
<style scoped>
.list-enter-active, .list-leave-active {
transition: .3s;
.list-enter-active,
.list-leave-active {
transition: 0.3s;
}
.list-enter, .list-leave-to /* .fade-leave-active below version 2.1.8 */ {
transform: translateY(-20px);
opacity: 0;
}
.friends{
.friends {
background-color: rgba(0, 0, 0, 0);
user-select: none;
padding-bottom: 3px;
border-radius: 5px;
transition: 0.3s;
}
.tab{
.tab {
transition: 0.3s;
}
.tab:hover{
background-color: rgba(0, 0, 0, 0.123);
.tab:hover {
background: #08616b;
}
</style>

67
src/components/app/relationships/OnlineFriends.vue
View file

@ -1,19 +1,10 @@
<template>
<div class="friends">
<div
class="tab"
@click="expanded = !expanded"
>
<Tab
:expanded="expanded"
tabname="Online"
/>
<div class="tab" @click="expanded = !expanded">
<Tab :expanded="expanded" tabname="Online" />
</div>
<transition name="list">
<div
v-if="expanded"
class="list"
>
<div v-if="expanded" class="list">
<FriendsTemplate
v-for="(friend, key) of friends"
:key="key"
@ -27,8 +18,8 @@
</template>
<script>
import Tab from './Tab.vue'
import FriendsTemplate from './FriendsTemplate.vue'
import Tab from "./Tab.vue";
import FriendsTemplate from "./FriendsTemplate.vue";
export default {
components: {
Tab,
@ -37,58 +28,64 @@ export default {
data() {
return {
expanded: true
}
};
},
computed: {
friends() {
const allFriend = this.$store.getters.user.friends;
const members = this.$store.getters['members/members'];
const presences = this.$store.getters['members/presences'];
const members = this.$store.getters["members/members"];
const presences = this.$store.getters["members/presences"];
const notifications = this.$store.getters.notifications;
const channels = this.$store.getters.channels;
const result = Object.keys(allFriend).map(function(key) {
const friend = allFriend[key];
const friend = allFriend[key];
friend.recipient = members[friend.uniqueID];
const findNotification = notifications.find( e => {
return e.sender.uniqueID === friend.recipient.uniqueID && !channels[e.channelID].server_id
})
if ( findNotification ){
const findNotification = notifications.find(e => {
return (
e.sender.uniqueID === friend.recipient.uniqueID &&
!channels[e.channelID].server_id
);
});
if (findNotification) {
friend.channelID = findNotification.channelID;
}
return friend
return friend;
});
return result.filter(friend => friend.status == 2 && (presences[friend.uniqueID] && presences[friend.uniqueID] > 0 ));
return result.filter(
friend =>
friend.status == 2 &&
(presences[friend.uniqueID] && presences[friend.uniqueID] > 0)
);
}
},
methods: {
}
}
methods: {}
};
</script>
<style scoped>
.list-enter-active, .list-leave-active {
transition: .3s;
.list-enter-active,
.list-leave-active {
transition: 0.3s;
}
.list-enter, .list-leave-to /* .fade-leave-active below version 2.1.8 */ {
transform: translateY(-20px);
opacity: 0;
}
.friends{
.friends {
background-color: rgba(0, 0, 0, 0);
user-select: none;
padding-bottom: 3px;
transition: 0.3s;
}
.tab{
.tab {
transition: 0.3s;
}
.tab:hover{
background-color: rgba(0, 0, 0, 0.123);
.tab:hover {
background: #08616b;
}
</style>

113
src/components/app/statusList.vue
View file

@ -1,72 +1,56 @@
<template>
<transition name="show-status-list" :appear="true">
<div class="status-popout">
<div
class="status-list"
@click="changeStatus(1)"
>
<span class="status-icon"><img
class="icon"
:src="getStatusLogo(1)"
></span><span class="text">Online</span>
<div class="status-popout">
<div class="status-list" @click="changeStatus(1)">
<span class="status-icon">
<img class="icon" :src="getStatusLogo(1)" />
</span>
<span class="text">Online</span>
</div>
<div class="status-list" @click="changeStatus(2)">
<span class="status-icon">
<img class="icon" :src="getStatusLogo(2)" />
</span>
<span class="text">Away</span>
</div>
<div class="status-list" @click="changeStatus(3)">
<span class="status-icon">
<img class="icon" :src="getStatusLogo(3)" />
</span>
<span class="text">Busy</span>
</div>
<div class="status-list" @click="changeStatus(4)">
<span class="status-icon">
<img class="icon" :src="getStatusLogo(4)" />
</span>
<span class="text">Looking to play</span>
</div>
<div class="status-list" @click="changeStatus(0)">
<span class="status-icon">
<img class="icon" :src="getStatusLogo(0)" />
</span>
<span class="text">Offline</span>
</div>
</div>
<div
class="status-list"
@click="changeStatus(2)"
>
<span class="status-icon"><img
class="icon"
:src="getStatusLogo(2)"
></span><span class="text">Away</span>
</div>
<div
class="status-list"
@click="changeStatus(3)"
>
<span class="status-icon"><img
class="icon"
:src="getStatusLogo(3)"
></span><span class="text">Busy</span>
</div>
<div
class="status-list"
@click="changeStatus(4)"
>
<span class="status-icon"><img
class="icon"
:src="getStatusLogo(4)"
></span><span class="text">Looking to play</span>
</div>
<div
class="status-list"
@click="changeStatus(0)"
>
<span class="status-icon"><img
class="icon"
:src="getStatusLogo(0)"
></span><span class="text">Offline</span>
</div>
</div>
</transition>
</template>
<script>
import {bus} from '../../main';
import { bus } from "../../main";
export default {
methods: {
getStatusLogo(status){
return require(`./../../assets/status/${status}.svg`)
},
changeStatus(status) {
bus.$emit('status-change', status)
}
methods: {
getStatusLogo(status) {
return require(`./../../assets/status/${status}.svg`);
},
changeStatus(status) {
bus.$emit("status-change", status);
}
}
}
};
</script>
<style scoped>
.show-status-list-enter-active,
.show-status-list-leave-active {
transition: 0.2s;
@ -77,11 +61,11 @@ export default {
transform: translateY(20px);
}
.status-popout{
.status-popout {
position: absolute;
bottom: 60px;
right: 0px;
background: rgba(0, 0, 0, 0.7);
bottom: 66px;
right: 5px;
background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(5px);
width: 180px;
z-index: 4;
@ -94,25 +78,24 @@ export default {
align-content: center;
flex-shrink: 0;
color: white;
}
.status-list:hover {
background: rgba(46, 46, 46, 0.651);
background: #042f33;
}
.status-icon{
.status-icon {
display: inline-block;
flex-shrink: 0;
}
.icon{
.icon {
height: 20px;
width: 20px;
margin-top: 3px;
flex-shrink: 0;
}
.text{
.text {
display: inline-block;
vertical-align: top;
flex-shrink: 0;

33
src/components/homePage/ProfilePopout.vue
View file

@ -11,24 +11,12 @@
emote-size="17px"
/>
<div class="information">
<div
class="username"
>
{{ user.username }}
</div>
<div class="tag">
@{{ user.tag }}
</div>
<div class="username">{{ user.username }}</div>
<div class="tag">@{{ user.tag }}</div>
</div>
<div class="buttons">
<i
class="material-icons warn"
@click="logOut"
>exit_to_app</i>
<i
class="material-icons"
@click="openApp"
>message</i>
<i class="material-icons warn" @click="logOut">exit_to_app</i>
<i class="material-icons" @click="openApp">message</i>
</div>
</div>
</div>
@ -51,7 +39,7 @@ export default {
window.location.href = "/app";
},
logOut() {
this.$emit('logout');
this.$emit("logout");
}
}
};
@ -72,14 +60,14 @@ export default {
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 15px solid rgba(0, 0, 0, 0.826);
border-bottom: 15px solid #0f272a;
}
.inner {
right: 0;
top: 15px;
position: absolute;
display: flex;
background: rgba(0, 0, 0, 0.826);
background: #0f272a;
border-radius: 5px;
width: 300px;
height: 60px;
@ -117,6 +105,7 @@ export default {
cursor: default;
font-size: 27px;
user-select: none;
cursor: pointer;
}
.buttons .material-icons:hover {
color: white;
@ -130,12 +119,12 @@ export default {
@media (max-width: 342px) {
.inner {
left: 0;
right:0;
right: 0;
width: 100%;
}
.profile-popout{
.profile-popout {
left: 0;
right:20px;
right: 20px;
}
}
</style>

111
src/store/modules/popoutsModule/popoutsModule.js
View file

@ -1,10 +1,8 @@
import axios from 'axios'
import Vue from 'vue'
import {
bus
} from '@/main'
import VueRouter from 'vue-router';
import NotificationSounds from '@/utils/notificationSound';
import axios from "axios";
import Vue from "vue";
import { bus } from "@/main";
import VueRouter from "vue-router";
import NotificationSounds from "@/utils/notificationSound";
const state = {
fileToUpload: null,
@ -22,15 +20,15 @@ const state = {
GDLinkMenu: false,
addServer: false,
genericMessage: null,
genericMessage: null,
serverSettings:{
serverSettings: {
serverID: null,
index: null
},
},
editMessage: null,
messageContextMenu: {
messageID: null,
messageID: null,
message: null,
channelID: null,
uniqueID: null,
@ -51,90 +49,99 @@ const state = {
serverID: null,
uniqueID: null,
creatorUniqueID: null,
x: null,
y: null,
x: null,
y: null
}
}
};
const getters = {
popouts(state) {
return state;
}
}
};
const actions = {
setAllPopout({commit, state}, data) {
commit('setAllPopout', {...state.allPopout, ...data})
setAllPopout({ commit, state }, data) {
commit("setAllPopout", { ...state.allPopout, ...data });
},
setServerSettings({commit}, {serverID, index}){
commit('setServerSettings', {serverID, index})
setServerSettings({ commit }, { serverID, index }) {
commit("setServerSettings", { serverID, index });
},
setUserInformationPopout({commit}, id){
commit('setUserInformationPopout', id)
setUserInformationPopout({ commit }, id) {
commit("setUserInformationPopout", id);
},
setPopoutVisibility(context, data) {
context.commit('setPopoutVisibility', data)
context.commit("setPopoutVisibility", data);
},
setFile(context, file) {
context.commit('setFileToUpload', file);
context.commit("setFileToUpload", file);
},
setImagePreviewURL(context, url) {
context.commit('setImagePreviewURL', url);
context.commit("setImagePreviewURL", url);
},
setServerIDContextMenu(context, serverID) {
context.commit('setServerIDContextMenu', serverID);
context.commit("setServerIDContextMenu", serverID);
},
setGenericMessage(context, message) {
context.commit('setGenericMessage', message);
context.commit("setGenericMessage", message);
},
setEditMessage(context, data){
context.commit('setEditMessage', data)
setEditMessage(context, data) {
context.commit("setEditMessage", data);
},
setMessageContext(context, {messageID, x, y, channelID, message, uniqueID}) {
context.commit('setMessageContext', {messageID, x, y, channelID, message, uniqueID});
setMessageContext(
context,
{ messageID, x, y, channelID, message, uniqueID, type }
) {
context.commit("setMessageContext", {
messageID,
x,
y,
channelID,
message,
uniqueID,
type
});
},
setServerMemberContext(context, {uniqueID, x, y, serverID}) {
context.commit('setServerMemberContext', {uniqueID, x, y, serverID});
setServerMemberContext(context, { uniqueID, x, y, serverID }) {
context.commit("setServerMemberContext", { uniqueID, x, y, serverID });
}
}
};
const mutations = {
setAllPopout(state, data) {
Vue.set(state, 'allPopout', data)
},
Vue.set(state, "allPopout", data);
},
setServerMemberContext(state, data) {
Vue.set(state, 'serverMemberContext', data);
Vue.set(state, "serverMemberContext", data);
},
setMessageContext(state, data) {
Vue.set(state, 'messageContextMenu', data);
Vue.set(state, "messageContextMenu", data);
},
setEditMessage(state, data){
Vue.set(state, 'editMessage', data);
setEditMessage(state, data) {
Vue.set(state, "editMessage", data);
},
setGenericMessage(state, message){
Vue.set(state, 'genericMessage', message)
setGenericMessage(state, message) {
Vue.set(state, "genericMessage", message);
},
setServerSettings(state, {serverID, index}){
Vue.set(state, 'serverSettings', {serverID, index});
setServerSettings(state, { serverID, index }) {
Vue.set(state, "serverSettings", { serverID, index });
},
setUserInformationPopout(state, id) {
Vue.set(state, 'userInformationPopoutID', id)
Vue.set(state, "userInformationPopoutID", id);
},
setPopoutVisibility(state, data) {
Vue.set(state, data.name, data.visibility)
Vue.set(state, data.name, data.visibility);
},
setFileToUpload(state, file) {
Vue.set(state, 'fileToUpload', file);
Vue.set(state, "fileToUpload", file);
},
setImagePreviewURL(state, url) {
Vue.set(state, 'ImagePreviewURL', url);
Vue.set(state, "ImagePreviewURL", url);
},
setServerIDContextMenu(state, serverID) {
Vue.set(state, 'serverIDContextMenu', serverID);
Vue.set(state, "serverIDContextMenu", serverID);
}
}
};
export default {
namespace: true,
@ -142,4 +149,4 @@ export default {
getters,
actions,
mutations
}
};

246
src/utils/changelog.js
View file

@ -1,44 +1,39 @@
const prototype = {
version: 4,
title: "",
shortTitle: "",
date: "1/06/2019",
headColor: "rgba(155, 244, 66, 0.77)",
new: [
"",
"",
],
next: [""]
}
const prototype = {
version: 4,
title: "",
shortTitle: "",
date: "1/06/2019",
headColor: "rgba(155, 244, 66, 0.77)",
new: ["", ""],
next: [""]
};
const config = [
{
version: 7.8,
title: "Redesigns!",
shortTitle: "",
date: "25/10/2019",
headColor: "rgba(25, 130, 255, 0.77)",
date: "01/11/2019",
headColor: "#0c7b7f",
new: [
'Layout has been redesigned.',
'Added an option to mute notification sounds.',
'Last clicked channels should be remembered for each server.',
'You can now delete Join, Left and Ban messages from the chat.',
"Layout has been redesigned.",
"Added an option to mute notification sounds.",
"Last clicked channels should be remembered for each server.",
"You can now delete Join, Left and Ban messages from the chat.",
"Files not being uploaded? Try re-linking Google drive in the settings."
],
next: ['Custom server banners.'],
next: ["Custom server banners."],
msg:
"Since this is a major re-design, there could be a lot of bugs. Please help me fix these bugs by sending me a message and I will give you a bug catcher badge in Nertivia. Thanks."
},
{
version: 7.6,
title: "👻Spooky bug fixes👻",
shortTitle: "",
date: "16/10/2019",
new: [
'Better handled Google Drive linking.',
'👻👻👻',
],
fix: ['Spooked away a lot of bugs behind the scenes.'],
msg: '👻'
new: ["Better handled Google Drive linking.", "👻👻👻"],
fix: ["Spooked away a lot of bugs behind the scenes."],
msg: "👻"
},
{
version: 7.5,
@ -46,10 +41,13 @@ const config = [
shortTitle: "",
date: "09/10/2019",
new: [
'Design changes to some elements such as the tabs, Window controls and more.',
"Design changes to some elements such as the tabs, Window controls and more."
],
fix: ['Fixed a bug where presence status would not show properly in the header.'],
msg: 'I just want to say thanks to everyone who gave me feedback, it helps a lot! 😉 Native mobile app is coming soon!'
fix: [
"Fixed a bug where presence status would not show properly in the header."
],
msg:
"I just want to say thanks to everyone who gave me feedback, it helps a lot! 😉 Native mobile app is coming soon!"
},
{
version: 7.4,
@ -57,11 +55,11 @@ const config = [
shortTitle: "",
date: "03/10/2019",
new: [
'Added send message permission. You can use this to allow other people to not write in your channel such as the "rules" channel.',
'Added send message permission. You can use this to allow other people to not write in your channel such as the "rules" channel.'
],
fix: [
"Fixed a lot of bugs in our cache system. This means that messages should send faster!",
],
"Fixed a lot of bugs in our cache system. This means that messages should send faster!"
]
},
{
version: 7.3,
@ -69,12 +67,12 @@ const config = [
shortTitle: "",
date: "29/09/2019",
new: [
'You can now kick/back members of a server by right clicking on their names in the server members list.',
'Slightly changed message bubble design.'
"You can now kick/back members of a server by right clicking on their names in the server members list.",
"Slightly changed message bubble design."
],
fix: [
"Fixed a bug where Join and Leave messages would not get notified when reloading client.",
],
"Fixed a bug where Join and Leave messages would not get notified when reloading client."
]
},
{
version: 7.2,
@ -85,7 +83,7 @@ const config = [
"Online and offline is now a category in the server members list.",
"Moved add server to the top of the servers list with new design.",
"Added Explore button to the top of the servers list."
],
]
},
{
version: 7.1,
@ -97,9 +95,9 @@ const config = [
"Swapped the changelog and the explore tab."
],
fix: [
'Fixed a bug where edit and delete buttons would show for all members.',
"Fixed a bug where edit and delete buttons would show for all members.",
'Fixed a bug where when clicking on "message" in the server tab, in someones profile, the tab wouldnt change to dm.'
],
]
},
{
version: 7.0,
@ -107,9 +105,8 @@ const config = [
shortTitle: "",
date: "13/09/2019",
new: [
'Nertivia app now starts up when you start your pc. You can change the behaviour in the settings.',
],
"Nertivia app now starts up when you start your pc. You can change the behaviour in the settings."
]
},
{
version: 6.9,
@ -117,26 +114,35 @@ const config = [
shortTitle: "",
date: "06/09/2019",
new: [
'Added filter options to public servers list. Verified servers will be the default filter. Servers will be verified by me (Fishie). If your server does not get verified, Join the official nertivia server and message me.',
'Added blur effect to user information popout for an experiment. (Only works in chrome and edge.) Blur effect may be added in more places in the future.'
"Added filter options to public servers list. Verified servers will be the default filter. Servers will be verified by me (Fishie). If your server does not get verified, Join the official nertivia server and message me.",
"Added blur effect to user information popout for an experiment. (Only works in chrome and edge.) Blur effect may be added in more places in the future."
],
fix: ['Fixed a bug where when someone leaves the server, the whole members list would disappear for that server.', 'Fixed bugs with emoji sugestions panel.'],
fix: [
"Fixed a bug where when someone leaves the server, the whole members list would disappear for that server.",
"Fixed bugs with emoji sugestions panel."
]
},
{
version: 6.8,
title: "Bug fixes",
shortTitle: "",
date: "02/09/2019",
fix: ['You can no longer turn on popup notifications on mobile as it causes issues.'],
msg: "Notice: If you don't receive real time notifications inside the app, log out, and in again to fix it."
fix: [
"You can no longer turn on popup notifications on mobile as it causes issues."
],
msg:
"Notice: If you don't receive real time notifications inside the app, log out, and in again to fix it."
},
{
version: 6.7,
title: "New Explore tab!",
shortTitle: "",
date: "01/09/2019",
new: ['You can now make your servers go public by posting them in the explore tab.', 'Some pop ups have been improved for mobile users.',],
fix: ['Some bugs have been fixed.']
new: [
"You can now make your servers go public by posting them in the explore tab.",
"Some pop ups have been improved for mobile users."
],
fix: ["Some bugs have been fixed."]
},
{
version: 6.6,
@ -144,9 +150,7 @@ const config = [
shortTitle: "",
date: "29/08/2019",
new: ['Sneak peak of the new "Explore" tab :D (Unfinished)'],
fix: [
'Improved backend code. This should improve performance.',
],
fix: ["Improved backend code. This should improve performance."]
},
{
version: 6.5,
@ -154,9 +158,9 @@ const config = [
shortTitle: "",
date: "22/08/2019",
fix: [
'Fixed a bug where when being scrolled up, new messages would cause it to not load more.',
'Fixed a bug where scroll to bottom button wouldnt work'
],
"Fixed a bug where when being scrolled up, new messages would cause it to not load more.",
"Fixed a bug where scroll to bottom button wouldnt work"
]
},
{
version: 6.4,
@ -164,16 +168,18 @@ const config = [
shortTitle: "",
date: "19/08/2019",
new: [
'Scrolling up should be smoother now as messages below get unloaded.'
"Scrolling up should be smoother now as messages below get unloaded."
],
msg: 'Known issue: When scrolled up and messages get unloaded below, new messages sent get appended at the bottom and messes up things D: going to fix asap.'
msg:
"Known issue: When scrolled up and messages get unloaded below, new messages sent get appended at the bottom and messes up things D: going to fix asap."
},
{
version: 6.3,
title: "Performance Improvements!",
shortTitle: "",
date: "18/08/2019",
msg: "I finally managed to find out why the chat is choppy when scrolling. The rotated emote is the cause. In this update, emotes only appear when hovering over the profile picture."
msg:
"I finally managed to find out why the chat is choppy when scrolling. The rotated emote is the cause. In this update, emotes only appear when hovering over the profile picture."
},
{
@ -181,9 +187,7 @@ const config = [
title: "Bug fixes",
shortTitle: "",
date: "17/08/2019",
new: [
"Added a copy button in the message context menu."
],
new: ["Added a copy button in the message context menu."],
fix: [
"Fixed bugs with textarea not resizing properly",
"Fixed a bug where message context menu would be not visible.",
@ -211,10 +215,9 @@ const config = [
title: "Desktop app!",
shortTitle: "",
date: "11/08/2019",
new: [
"Desktop app is available to download!"
],
msg: 'Download: https://github.com/supertiger1234/nertivia-desktop-app/releases'
new: ["Desktop app is available to download!"],
msg:
"Download: https://github.com/supertiger1234/nertivia-desktop-app/releases"
},
{
@ -227,7 +230,8 @@ const config = [
"Fixed a bug where scrolling would be inverted for some devices.",
"Responsive images and embeds."
],
msg: 'Notice: If your message history loads mid way, this is because of our new message scrolling down system. This will be fixed after you send few messages.'
msg:
"Notice: If your message history loads mid way, this is because of our new message scrolling down system. This will be fixed after you send few messages."
},
{
version: 5.8,
@ -236,11 +240,11 @@ const config = [
date: "05/08/2019",
new: [
"Added more badges (Bug Catcher, Idea Queen)",
"You can now change your password.",
"You can now change your password."
],
fix: [
"Fixed a bug where desktop notifications would show for your own messages.",
"Fixed a bug where editing custom emojis would break.",
"Fixed a bug where editing custom emojis would break."
]
},
{
@ -267,9 +271,7 @@ const config = [
"We have re-added syntax highlighting and also improved the performance of message formatting. (Thanks to Bree!)",
"Profile Setting has been re-designed. You can now edit your username, email and password!"
],
fix: [
'Fixed some bugs with edit message',
],
fix: ["Fixed some bugs with edit message"]
},
{
version: 5.5,
@ -277,8 +279,8 @@ const config = [
shortTitle: "",
date: "25/07/2019",
fix: [
'Removed codeblock highlighter due to some problems. Will be back in the future.',
],
"Removed codeblock highlighter due to some problems. Will be back in the future."
]
},
{
@ -287,15 +289,13 @@ const config = [
shortTitle: "",
date: "24/07/2019",
fix: [
'Fixed a bug where when pressing the up arrow key to edit while there is text in the text box, it would discard the message and edit.',
'Fixed a bug where when editing a message and going to a different tab, the message is still editing.',
'Fixed a bug where if an emoji is in the recents, and then removed in the settings, the emoji would stay in the recents.',
'Fixed bugs with html escape :scream:',
],
"Fixed a bug where when pressing the up arrow key to edit while there is text in the text box, it would discard the message and edit.",
"Fixed a bug where when editing a message and going to a different tab, the message is still editing.",
"Fixed a bug where if an emoji is in the recents, and then removed in the settings, the emoji would stay in the recents.",
"Fixed bugs with html escape :scream:"
]
},
{
version: 5.3,
title: "Edit messages, More performance!",
@ -306,17 +306,15 @@ const config = [
"Avatar and message pictures should now be disk cached.",
"Gif avatars will now only animate when being hovered. This will improve performance.",
"You can now click on embed images to get a full screen preview.",
"Server channels now show a gray background when selected.",
"Server channels now show a gray background when selected."
],
fix: [
'Fixed a bug where when deleting a server channel, the notification would still stay.',
'Fixed a bug where when sending a message, the friend wouldnt go at the top in the recents list.',
],
next: ["HTML channel for servers", "Change username, email and password."],
"Fixed a bug where when deleting a server channel, the notification would still stay.",
"Fixed a bug where when sending a message, the friend wouldnt go at the top in the recents list."
],
next: ["HTML channel for servers", "Change username, email and password."]
},
{
version: 5.2,
title: "Delete messages, URL Embeds",
@ -324,9 +322,9 @@ const config = [
date: "19/07/2019",
new: [
"You can now delete your own messages.",
"URLs now show open graph embeds.",
"URLs now show open graph embeds."
],
next: ["Edit messages."],
next: ["Edit messages."]
},
{
@ -335,13 +333,12 @@ const config = [
shortTitle: "Change server avatar!",
date: "17/07/2019",
new: [
"You can now change your server avatar from the server settings menu!",
"You can now change your server avatar from the server settings menu!"
],
fix: ['Some bugs have been fixed.'],
next: ["Not decided yet."],
fix: ["Some bugs have been fixed."],
next: ["Not decided yet."]
},
{
version: 5.0,
title: "Change server name and default server channel",
@ -349,28 +346,12 @@ const config = [
date: "15/07/2019",
new: [
"You can now change the name of your server.",
"You can now change the default channel to something else.",
"You can now change the default channel to something else."
],
fix: ['Some bugs have been fixed.'],
next: ["Change servers avatar."],
fix: ["Some bugs have been fixed."],
next: ["Change servers avatar."]
},
{
version: 4.9,
title: "Color codeblocks and create multiple channels!",
@ -382,8 +363,10 @@ const config = [
"The 'Recents' tab should now flash red when you get a notification.",
"Friends and Recents tabs position will be saved when visiting the site."
],
fix: ['Fixed a bug where, when you are on the changelog or the server browser tab, the notifications get dismissed.'],
next: ["more server settings"],
fix: [
"Fixed a bug where, when you are on the changelog or the server browser tab, the notifications get dismissed."
],
next: ["more server settings"]
},
{
version: 4.8,
@ -393,9 +376,11 @@ const config = [
new: [
"Nertivia has a new cat logo! (Thanks to Fullipsp for the design!)",
"You can now see online status of server members!",
"You can now click on links that start with 'http'",
"You can now click on links that start with 'http'"
],
fix: [
"Fixed a bug where when creating a server, a reload is required to show yourself in the server members list."
],
fix: ['Fixed a bug where when creating a server, a reload is required to show yourself in the server members list.'],
next: ["Create multiple channels in a server."],
msg: `You might be wondering, where did the official Nertivia server go? Well, I accidentally deleted it :/ sorry. Here's the new one though! <a style="color: #00b6ff;" href="http://nertivia.supertiger.tk/invites/Db3p5n">http://nertivia.supertiger.tk/invites/Db3p5n</a>`
},
@ -404,14 +389,12 @@ const config = [
title: "Bug fixes",
shortTitle: "Bug fixes",
date: "24/06/2019",
new: [
"Emoji character limit expanded to 30 characters!"
],
new: ["Emoji character limit expanded to 30 characters!"],
fix: [
"Fixed a bug with the notification where it wouldn't dismiss on changing tabs.",
"Fixed a bug where unopened dms wouldn't show notifications on the tabs.",
"Fixed emoji character limit bypass.",
"Emojis can now be inserted in firefox!",
"Emojis can now be inserted in firefox!"
],
next: ["Online status for server members list."]
},
@ -425,7 +408,7 @@ const config = [
"Adjusted some padding with the tabs."
],
fix: [
"Fixed a vulnerability where after leaving a server, you could still send messages.",
"Fixed a vulnerability where after leaving a server, you could still send messages."
],
next: ["Online status for server members list."]
},
@ -434,14 +417,12 @@ const config = [
title: "Server bug fixes",
shortTitle: "Server bug fixes",
date: "03/06/2019",
new: [
"Notifications for servers has been added."
],
new: ["Notifications for servers has been added."],
fix: [
"Fixed notification bug where server notification are shown in dms.",
"When switching from server to direct message tab (and vice versa), the channels should now be separated.",
'You can now only create 30 invites per server.'
],
"You can now only create 30 invites per server."
]
},
{
version: 4,
@ -450,11 +431,10 @@ const config = [
date: "23/05/2019",
new: [
"You can now make servers! Note that this is in alpha stage which means that it's not complete and there could be a ton of bugs everywhere :c get reporting!",
"Adjusted padding in some areas.",
"Adjusted padding in some areas."
],
next: ["Members list for servers"],
msg:
`
msg: `
<div style='color: red;'>
Please note that this update could be unstable and could involve of resetting the database.
</div>Join the official Nertivia server by clicking
@ -474,9 +454,7 @@ color: #27a3ff;
"Padding and margin adjusted and small design changes throughout the app.",
"Added Oceania to the survey list."
],
fix: [
'Fixed bugs with appearance settings not correctly working.'
],
fix: ["Fixed bugs with appearance settings not correctly working."],
next: ["Servers (If nothing else distracts me -_-)"]
},
{

189
src/views/404.vue
View file

@ -3,28 +3,18 @@
<div class="app-content">
<header-login />
<div class="content">
<div
v-if="visible"
class="box"
>
<div class="title">
<div>404</div>
</div>
<div class="info">
Nothing exists here.
<br>
<a style="color: #00ceff;" href="https://nertivia.tk">Go home</a>
</div>
<div v-if="visible" class="box">
<div class="title">
<div>404</div>
</div>
<div class="info">
Nothing exists here.
<br />
<a style="color: #00ceff;" href="https://nertivia.tk">Go home</a>
</div>
</div>
</div>
</div>
<div class="background">
<div :class="{background: true, 'night-background': true}">
</div>
<div class="background day-background" />
</div>
</div>
</template>
@ -34,15 +24,15 @@ export default {
components: { HeaderLogin },
data() {
return {
visible: true,
visible: true
};
},
}
};
</script>
<style>
html, body {
html,
body {
height: 100%;
}
</style>
@ -71,20 +61,11 @@ html, body {
}
}
/* .fade-up-enter-active, .fade-up-leave-active {
transition: .5s;
transition-delay: 0.5s
}
.fade-up-enter, .fade-up-leave-to /* .fade-leave-active {
opacity: 0;
transform: translateX(20px)
} */
#app {
display: flex;
flex-direction: column;
transition: background 10s;
color: white;
background: #173d42;
}
.app-content {
display: flex;
@ -96,31 +77,6 @@ html, body {
z-index: 9999;
padding-bottom: 100px;
}
.background {
position: fixed;
height: 100%;
width: 100%;
transition: background 10s;
}
.night-background {
opacity: 0;
transition: 10s;
background: linear-gradient(to bottom, #000000 0%,#606060 100%) !important;
}
.day-background {
opacity: 1;
background: linear-gradient(to bottom, #165dc0 0%,#5482bf 100%);
z-index: -1
}
.night-background.chosen {
opacity: 1 !important;
}
.night-background .particles {
opacity: 1;
}
.content {
display: flex;
@ -131,15 +87,16 @@ html, body {
.box {
width: 100%;
max-width: 400px;
background: rgba(44, 44, 44, 0.774);
margin: auto;
margin-top: 20px;
border-radius: 10px;
display: flex;
flex-direction: column;
align-items: center;
z-index: 9999;
padding-bottom: 20px;
background-image: url("../assets/leftPanelBackground.jpg");
background-position: center;
background-size: cover;
}
.box .title {
text-align: center;
@ -152,119 +109,9 @@ html, body {
align-items: center;
height: 60px;
}
.box .title .material-icons {
margin-right: 5px;
font-size: 40px;
}
.info {
text-align: center;
margin-bottom: 10px;
}
form {
display: flex;
flex-direction: column;
width: 100%;
}
.input {
display: flex;
flex-direction: column;
margin: 10px;
width: 80%;
align-self: center;
background: rgb(59, 59, 59);
padding: 10px;
border-radius: 10px;
}
.input-text {
margin-bottom: 5px;
margin-left: 3px;
}
input {
outline: none;
padding: 10px;
border: solid 1px rgba(0, 0, 0, 0);
background: none;
border-radius: 5px;
background: rgb(36, 36, 36);
color: white;
}
.buttons {
display: flex;
align-items: center;
align-content: center;
justify-content: center;
justify-items: center;
}
.button {
padding: 10px;
background: rgba(25, 151, 255, 0.699);
border-radius: 5px;
margin: 10px;
margin-top: 10px;
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);
}
.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.deactive {
background: rgba(70, 70, 70, 0.699);
box-shadow: 3px 3px rgba(0, 0, 0, 0.479);
}
.button.deactive :hover {
background: rgba(70, 70, 70, 0.699);
}
.button.deactive :focus {
background: rgba(70, 70, 70, 0.699);
}
.button.deactive:active {
background: rgba(70, 70, 70, 0.699);
transform: translate(3px, 3px);
box-shadow: 0px 0px rgba(0, 0, 0, 0.479);
}
.register-button {
background: rgba(46, 204, 112, 0.67);
box-shadow: 3px 3px #0f7e3d;
}
.register-button.button:hover {
background: #2ecc71;
}
.register-button.button:focus {
background: #2ecc71;
}
.register-button.button:active {
background: #2ecc71;
transform: translate(3px, 3px);
box-shadow: 0px 0px #0f7e3d;
}
.captcha-input {
width: initial;
}
.captcha {
opacity: 0.7;
transition: 0.3s;
}
.captcha:hover {
opacity: 1;
}
.error {
color: red;
}
</style>

126
src/views/App.vue
View file

@ -1,25 +1,24 @@
<template>
<div id="app" ref="app">
<vue-headful :title="title" description="Nertivia Chat Client"/>
<vue-headful :title="title" description="Nertivia Chat Client" />
<div class="background-image"></div>
<transition name="fade-between-two" appear>
<ConnectingScreen v-if="!loggedIn"/>
<ConnectingScreen v-if="!loggedIn" />
<div class="box" v-if="loggedIn">
<div class="frame" v-if="isElectron">
<div class="window-buttons">
<electron-frame-buttons />
</div>
</div>
<div class="panel-layout">
<news v-if="currentTab == 3"/>
<direct-message v-if="currentTab == 1"/>
<servers v-if="currentTab == 2"/>
<explore v-if="currentTab == 0"/>
<news v-if="currentTab == 3" />
<direct-message v-if="currentTab == 1" />
<servers v-if="currentTab == 2" />
<explore v-if="currentTab == 0" />
</div>
</div>
</transition>
<Popouts v-if="loggedIn"/>
<Popouts v-if="loggedIn" />
</div>
</template>
@ -73,14 +72,13 @@ export default {
};
},
methods: {
dismissNotification (channelID) {
dismissNotification(channelID) {
const notifications = this.$store.getters.notifications.find(function(e) {
return e.channelID === channelID
})
return e.channelID === channelID;
});
if (notifications && notifications.count >= 1 && document.hasFocus()) {
this.$socket.emit('notification:dismiss', {channelID});
this.$socket.emit("notification:dismiss", { channelID });
}
},
switchChannel(isServer) {
@ -88,56 +86,60 @@ export default {
const DMChannelID = this.$store.state.channelModule.DMChannelID;
if (isServer) {
this.$store.dispatch('selectedChannelID', serverChannelID)
const channel = this.$store.state.channelModule.channels[serverChannelID];
this.$store.dispatch("setChannelName", channel ? channel.name : "")
this.dismissNotification(serverChannelID)
this.$store.dispatch("selectedChannelID", serverChannelID);
const channel = this.$store.state.channelModule.channels[
serverChannelID
];
this.$store.dispatch("setChannelName", channel ? channel.name : "");
this.dismissNotification(serverChannelID);
} else {
const channel = this.$store.state.channelModule.channels[DMChannelID];
this.$store.dispatch("setChannelName", channel ? channel.recipients[0].username : "");
this.$store.dispatch('selectedChannelID', DMChannelID)
this.dismissNotification(DMChannelID)
this.$store.dispatch(
"setChannelName",
channel ? channel.recipients[0].username : ""
);
this.$store.dispatch("selectedChannelID", DMChannelID);
this.dismissNotification(DMChannelID);
}
},
switchTab(index) {
localStorage.setItem("currentTab", index);
this.$store.dispatch('setCurrentTab', index)
if (index == 1) { //1: direct message tab.
this.switchChannel(false)
} else if (index === 2) { //2: server tab
this.switchChannel(true)
this.$store.dispatch("setCurrentTab", index);
if (index == 1) {
//1: direct message tab.
this.switchChannel(false);
} else if (index === 2) {
//2: server tab
this.switchChannel(true);
}
},
resizeEvent(dimensions) {
const width = dimensions.width;
const height = dimensions.height;
this.$refs.app.style.height = height + 'px';
this.$refs.app.style.width = width + 'px';
this.$refs.app.style.height = height + "px";
this.$refs.app.style.width = width + "px";
}
},
watch: {
getWindowWidth(dimensions) {
this.resizeEvent(dimensions)
this.resizeEvent(dimensions);
}
},
mounted() {
const currentTab = localStorage.getItem("currentTab");
if(currentTab) {
this.$store.dispatch('setCurrentTab', parseInt(currentTab))
if (currentTab) {
this.$store.dispatch("setCurrentTab", parseInt(currentTab));
}
// check if changelog is updated
const seenVersion = localStorage.getItem("changelog-version-seen");
if (seenVersion && seenVersion < changelog[0].version) {
localStorage.setItem("currentTab", 3);
this.$store.dispatch('setCurrentTab', 3)
this.$store.dispatch("setCurrentTab", 3);
}
localStorage.setItem("changelog-version-seen", changelog[0].version);
bus.$on("title:change", title => {
this.title = title;
});
},
computed: {
@ -149,23 +151,31 @@ export default {
},
serverNotification() {
const notifications = this.$store.getters.notifications;
const channels = this.$store.getters.channels
const channels = this.$store.getters.channels;
const notification = notifications.find(e => {
return channels[e.channelID] && channels[e.channelID].server_id && e.channelID !== this.$store.getters.selectedChannelID
})
return (
channels[e.channelID] &&
channels[e.channelID].server_id &&
e.channelID !== this.$store.getters.selectedChannelID
);
});
return notification;
},
DMNotification() {
const notifications = this.$store.getters.notifications;
const channels = this.$store.getters.channels
const channels = this.$store.getters.channels;
const notification = notifications.find(e => {
return channels[e.channelID] && !channels[e.channelID].server_id && e.channelID !== this.$store.getters.selectedChannelID
})
return (
channels[e.channelID] &&
!channels[e.channelID].server_id &&
e.channelID !== this.$store.getters.selectedChannelID
);
});
// unopened dm
if (!notification) {
return notifications.find(e => {
return !channels[e.channelID]
})
return !channels[e.channelID];
});
}
return notification;
},
@ -177,8 +187,11 @@ export default {
return result.find(friend => friend.status === 1);
},
getWindowWidth() {
return {width: windowProperties.resizeWidth, height: windowProperties.resizeHeight};
},
return {
width: windowProperties.resizeWidth,
height: windowProperties.resizeHeight
};
}
}
};
</script>
@ -191,7 +204,7 @@ export default {
height: 100%;
}
.notifyAnimation{
.notifyAnimation {
animation: notifyAnime;
animation-duration: 1s;
animation-iteration-count: infinite;
@ -204,22 +217,20 @@ export default {
width: 100%;
}
@keyframes notifyAnime {
0%{
0% {
background: rgba(121, 3, 3, 0.541);
}
40%{
40% {
background: rgba(255, 0, 0, 0.568);
}
60%{
60% {
background: rgba(255, 0, 0, 0.568);
}
100%{
100% {
background: rgba(121, 3, 3, 0.541);
}
}
.coming-soon {
display: flex;
align-items: center;
@ -289,7 +300,7 @@ export default {
-webkit-app-region: no-drag;
cursor: pointer;
position: relative;
border-right:solid 1px rgba(0, 0, 0, 0.5);
border-right: solid 1px rgba(0, 0, 0, 0.5);
}
.tab:hover {
@ -301,8 +312,6 @@ export default {
color: white;
}
.tab .material-icons {
font-size: 15px;
vertical-align: -2px;
@ -332,28 +341,21 @@ export default {
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
}
</style>
<style>
textarea {
font-family: "Roboto", sans-serif;
}
.background-image {
background: url(./../assets/background.jpg);
position: fixed;
z-index: -1;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: bottom;
background-size: cover;
filter: blur(15px);
transform: scale(1.1);
background-color: #173d42;
}
.panel-layout {

42
src/views/GDriveCallback.vue
View file

@ -1,11 +1,11 @@
<template>
<div id="app">
<div class="app-content">
<header-login @isDay="isDayEvent" />
<header-login />
<div class="content">
<transition appear name="fade-up">
<div class="box">
<div class="loading" v-if="showSpinner" >
<div class="loading" v-if="showSpinner">
<spinner />
<div class="text">Linking...</div>
</div>
@ -33,31 +33,25 @@ export default {
components: { HeaderLogin, Spinner },
data() {
return {
isDay: true,
showSpinner: true,
error: false,
showSuccess: false,
showSuccess: false
};
},
async mounted() {
const url = new URL(location.href);
const token = url.searchParams.get("state");
const code = url.searchParams.get("code");
const {ok, error, result} = await settingsService.GDriveAuth(code, token);
const { ok, error, result } = await settingsService.GDriveAuth(code, token);
if (!ok) {
this.showSpinner = false;
this.error = true;
} else {
this.showSpinner = false
this.showSpinner = false;
this.showSuccess = true;
}
},
methods: {
isDayEvent(data) {
this.isDay = data;
}
}
methods: {}
};
</script>
@ -94,9 +88,9 @@ body {
#app {
display: flex;
flex-direction: column;
transition: background 10s;
color: white;
height: 100%;
background: #173d42;
}
.app-content {
display: flex;
@ -108,23 +102,6 @@ body {
z-index: 9999;
padding-bottom: 100px;
}
.background {
position: fixed;
height: 100%;
width: 100%;
transition: background 10s;
}
.night-background {
opacity: 0;
transition: 10s;
background: linear-gradient(to bottom, #000000 0%, #606060 100%) !important;
}
.day-background {
opacity: 1;
background: linear-gradient(to bottom, #165dc0 0%, #5482bf 100%);
z-index: -1;
}
.night-background.chosen {
opacity: 1 !important;
@ -143,17 +120,18 @@ body {
.box {
width: 100%;
max-width: 400px;
background: rgba(75, 75, 75, 0.774);
transition: 0.3s;
margin: auto;
margin-top: 20px;
border-radius: 10px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 9999;
padding: 20px;
background-image: url("../assets/leftPanelBackground.jpg");
background-position: center;
background-size: cover;
}
.loading {

79
src/views/HomePage.vue
View file

@ -2,8 +2,7 @@
<div id="app">
<vue-headful title="Nertivia" description="Nertivia Chat Client" />
<div ref="backgroundImage" class="background-image" />
<spinner v-if="!showPage" />
<div v-if="showPage" class="content">
<div class="content">
<transition name="fall-down" appear>
<div class="header">
<div class="logo" />
@ -38,7 +37,7 @@
<div
class="title"
>The best chat client that won't restrict you from important and fun features.</div>
<img class="graphic" src="@/assets/graphics/HomeGraphics2.png" />
<img class="graphic" src="@/assets/graphics/HomeGraphics.png" />
<div class="buttons">
<div class="button" @click="openApp">Open In Browser</div>
<div class="button download" @click="showDownloadsPopout = true">Download App</div>
@ -65,7 +64,7 @@
</div>
<div class="popouts">
<transition name="fade">
<download-app-popout v-if="showDownloadsPopout" @close="showDownloadsPopout = false"/>
<download-app-popout v-if="showDownloadsPopout" @close="showDownloadsPopout = false" />
</transition>
</div>
</div>
@ -85,7 +84,6 @@ export default {
return {
showDownloadsPopout: false,
showProfilePopout: false,
showPage: false,
loggedIn: localStorage.getItem("hauthid") || null,
user: null,
avatarDomain: config.domain + "/avatars/"
@ -93,7 +91,6 @@ export default {
},
async mounted() {
if (this.loggedIn) this.getUser();
this.preloadImages();
},
methods: {
closeProfilePopout(event) {
@ -112,34 +109,6 @@ export default {
openApp() {
window.location.href = "/app";
},
async imagePreloader(srcArray) {
srcArray.forEach(async element => {
await wrapper(element);
});
function wrapper(src) {
return new Promise(resolve => {
const image = new Image();
image.src = src;
image.onload = () => resolve("done");
});
}
},
async preloadImages() {
await this.imagePreloader([
require("@/assets/logo.png"),
require("@/assets/graphics/HomeGraphics2.png")
]);
const src = require("@/assets/background.jpg");
const background = new Image();
setTimeout(() => {
background.src = src;
background.onload = () => {
this.$refs.backgroundImage.style.backgroundImage = `url(${background.src})`;
this.$refs.backgroundImage.style.opacity = 0.7;
setTimeout(() => (this.showPage = true), 500);
};
}, 500);
},
async getUser() {
const { ok, error, result } = await AuthenticationService.user();
if (!ok) {
@ -163,9 +132,9 @@ export default {
<style scoped>
.fade-enter-active, .fade-leave-active {
transition: opacity .2s;
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.2s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
@ -247,14 +216,15 @@ body {
height: 100%;
}
.header {
background: rgba(0, 0, 0, 0.52);
display: flex;
height: 70px;
margin: 5px;
border-radius: 10px;
flex-shrink: 0;
border: 10px;
position: relative;
background-image: url("../assets/leftPanelBackground.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.logo {
background-image: url("../assets/logo.png");
@ -279,11 +249,8 @@ body {
position: fixed;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: bottom;
background-size: cover;
opacity: 0;
transition: 0.5s;
background-color: #173d42;
}
.content {
position: fixed;
@ -312,6 +279,7 @@ body {
margin-bottom: 0;
user-select: none;
flex-shrink: 0;
border: solid 5px #0f272a;
}
.title {
font-size: 25px;
@ -329,36 +297,24 @@ body {
.button {
padding: 15px;
background: rgba(24, 132, 255, 0.733);
border-radius: 5px;
color: white;
box-shadow: 3px 3px rgb(5, 86, 179);
user-select: none;
transition: 0.3s;
margin: 10px;
cursor: pointer;
}
.button:hover {
background: rgb(24, 132, 255);
}
.button:active {
transform: translate(3px, 3px);
box-shadow: 0 0 rgb(5, 86, 179);
}
.button.download {
background: rgba(0, 223, 67, 0.733);
box-shadow: 3px 3px rgb(0, 121, 36);
}
.button.download:hover {
background: rgba(0, 223, 67, 0.777);
background: rgba(0, 223, 67, 0.904);
}
.button.download:active {
transform: translate(3px, 3px);
box-shadow: 0 0 rgb(0, 121, 36);
}
.features-list {
margin-top: 20px;
@ -368,7 +324,7 @@ body {
justify-content: center;
}
.feature {
background: rgba(0, 0, 0, 0.541);
background: #102a2e;
color: white;
margin: 10px;
padding: 2px;
@ -379,7 +335,6 @@ body {
justify-content: center;
height: 200px;
width: 200px;
border-radius: 10px;
flex-shrink: 0;
transition: 0.3s;
}
@ -397,12 +352,12 @@ body {
display: flex;
}
.link {
padding: 5px;
padding: 10px;
background: rgba(0, 0, 0, 0.219);
border-radius: 5px;
user-select: none;
margin-left: 5px;
transition: 0.3s;
cursor: pointer;
}
.link:hover {
background: rgba(255, 255, 255, 0.26);

117
src/views/Invites.vue
View file

@ -1,76 +1,46 @@
<template>
<div id="app">
<div class="app-content">
<header-login @isDay="isDayEvent" />
<header-login />
<div class="content">
<transition
appear
name="fade-up"
>
<transition appear name="fade-up">
<div :class="{box: true, red: server === undefined}">
<spinner v-if="server === null" />
<div v-if="server === undefined">
<div class="invalid">
{{ errorMsg }}
</div>
<div class="invalid">{{ errorMsg }}</div>
</div>
<div
v-if="server"
class="server"
>
<profile-picture
class="avatar"
size="100px"
:url="domain + server.avatar"
/>
<div class="server-name">
{{ server.name }}
</div>
<div v-if="server" class="server">
<profile-picture class="avatar" size="100px" :url="domain + server.avatar" />
<div class="server-name">{{ server.name }}</div>
<div class="buttons">
<div
v-if="loggedIn"
class="button join-button"
@click="joinServerButton"
>
Join {{ server.name }}
</div>
<div
v-else
class="button join-button"
@click="loginButton"
>
Login to join
</div>
>Join {{ server.name }}</div>
<div v-else class="button join-button" @click="loginButton">Login to join</div>
</div>
</div>
</div>
</transition>
</div>
</div>
<div class="background">
<div :class="{background: true, 'night-background': true, chosen: !isDay}">
<particlesJS class="particles" />
</div>
<div class="background day-background" />
</div>
</div>
</template>
<script>
import config from "@/config";
import particlesJS from "@/components/ParticlesJS.vue";
import HeaderLogin from "@/components/HeaderLoginTemplate.vue";
import ProfilePicture from "@/components/ProfilePictureTemplate.vue";
import Spinner from "@/components/Spinner.vue";
import ServerService from "@/services/ServerService";
export default {
components: { HeaderLogin, particlesJS, Spinner, ProfilePicture},
components: { HeaderLogin, Spinner, ProfilePicture },
data() {
return {
isDay: true,
server: null,
domain: config.domain + "/avatars/",
loggedIn: localStorage.getItem('hauthid'),
loggedIn: localStorage.getItem("hauthid"),
errorMsg: ""
};
},
@ -83,23 +53,21 @@ export default {
if (error.response === undefined) {
this.errorMsg = "Cannot connect to server. Try again later.";
} else {
this.errorMsg = "The invite code is either invalid, expired or blocked.";
this.errorMsg =
"The invite code is either invalid, expired or blocked.";
}
this.server = undefined;
}
},
methods: {
isDayEvent(data) {
this.isDay = data;
},
async joinServerButton(event) {
if (event.target.classList.contains("button-clicked")) return;
event.target.classList.add("button-clicked");
const inviteID = this.$route.params.invite_id;
if (!localStorage.getItem("hauthid")) {
return this.loggedIn = undefined;
return (this.loggedIn = undefined);
}
const { ok, error, result } = await ServerService.joinServer(inviteID)
const { ok, error, result } = await ServerService.joinServer(inviteID);
if (ok) {
this.$router.push(`/app`);
} else {
@ -109,11 +77,11 @@ export default {
this.errorMsg = "Cannot connect to server. Try again later.";
} else {
const status = error.response.status;
if (status === 409){
if (status === 409) {
return this.$router.push(`/app`);
}
if (status === 404){
return this.errorMsg = "Invite does not exist.";
if (status === 404) {
return (this.errorMsg = "Invite does not exist.");
}
this.errorMsg = "Something went wrong. Try again later.";
}
@ -161,9 +129,9 @@ body {
#app {
display: flex;
flex-direction: column;
transition: background 10s;
color: white;
height: 100%;
background: #173d42;
}
.app-content {
display: flex;
@ -175,32 +143,6 @@ body {
z-index: 9999;
padding-bottom: 100px;
}
.background {
position: fixed;
height: 100%;
width: 100%;
transition: background 10s;
}
.night-background {
opacity: 0;
transition: 10s;
background: linear-gradient(to bottom, #000000 0%, #606060 100%) !important;
}
.day-background {
opacity: 1;
background: linear-gradient(to bottom, #165dc0 0%, #5482bf 100%);
z-index: -1;
}
.night-background.chosen {
opacity: 1 !important;
}
.night-background .particles {
opacity: 1;
}
.content {
display: flex;
height: 100%;
@ -210,17 +152,17 @@ body {
.box {
width: 100%;
max-width: 400px;
background: rgba(44, 44, 44, 0.774);
transition: 0.3s;
margin: auto;
margin-top: 20px;
border-radius: 10px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 9999;
padding-bottom: 20px;
background-image: url("../assets/leftPanelBackground.jpg");
background-position: center;
background-size: cover;
}
.server {
display: flex;
@ -230,11 +172,11 @@ body {
height: 300px;
}
.invalid{
.invalid {
margin-top: 15px;
}
.red{
background: rgba(117, 10, 10, 0.774)
.red {
background: #9e1a1c;
}
.avatar {
align-self: center;
@ -250,18 +192,16 @@ body {
.button {
padding: 10px;
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;
flex-shrink: 0;
text-align: center;
cursor: pointer;
}
.button:hover {
background: rgb(25, 151, 255);
@ -269,15 +209,8 @@ body {
.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;
}
</style>

172
src/views/LoginPage.vue
View file

@ -2,95 +2,50 @@
<div id="app">
<electron-frame-buttons v-if="isElectron" />
<div class="app-content">
<header-login @isDay="isDayEvent" />
<header-login />
<div class="content">
<transition
appear
name="fade-up"
>
<div
v-if="visible"
class="box"
>
<transition appear name="fade-up">
<div v-if="visible" class="box">
<div class="title">
<i class="material-icons">account_circle</i>
Login
</div>
<div class="info">
Login to access Nertivia
</div>
<form
v-if="!showCaptcha"
action="#"
@submit.prevent="submitForm"
>
<div class="info">Login to access Nertivia</div>
<form v-if="!showCaptcha" action="#" @submit.prevent="submitForm">
<div class="input">
<div class="input-text">
Email
<span
v-if="email.alert"
class="error"
>- {{ email.alert }}</span>
<span v-if="email.alert" class="error">- {{ email.alert }}</span>
</div>
<input
v-model="email.value"
type="email"
placeholder="Email"
>
<input v-model="email.value" type="email" placeholder="Email" />
</div>
<div class="input">
<div class="input-text">
Password
<span
v-if="password.alert"
class="error"
>- {{ password.alert }}</span>
<span v-if="password.alert" class="error">- {{ password.alert }}</span>
</div>
<input
v-model="password.value"
type="password"
autocomplete="password"
placeholder="Password"
>
/>
</div>
<span
v-if="otherError"
class="error"
style="text-align: center;"
>{{ otherError }}</span>
<span v-if="otherError" class="error" style="text-align: center;">{{ otherError }}</span>
<div class="buttons">
<button
type="submit"
:class="{button: true, deactive: deactive}"
>
Login
</button>
<button
class="button register-button"
@click.prevent="registerButton"
>
I'm new!
</button>
<button class="button register-button" @click.prevent="registerButton">I'm new!</button>
<button type="submit" :class="{button: true, deactive: deactive}">Login</button>
</div>
</form>
<div
v-if="showCaptcha"
class="captcha-box"
>
<div v-if="showCaptcha" class="captcha-box">
<div class="input captcha-input">
<div class="input-text">
Beep Boop
<span
v-if="reCaptcha.alert"
class="error"
>- {{ reCaptcha.alert }}</span>
<span v-if="reCaptcha.alert" class="error">- {{ reCaptcha.alert }}</span>
</div>
<div class="captcha">
<Recaptcha
ref="recaptcha"
@verify="captchaSubmit"
/>
<Recaptcha ref="recaptcha" @verify="captchaSubmit" />
</div>
</div>
</div>
@ -98,12 +53,6 @@
</transition>
</div>
</div>
<div class="background">
<div :class="{background: true, 'night-background': true, chosen: !isDay}">
<particlesJS class="particles" />
</div>
<div class="background day-background" />
</div>
</div>
</template>
@ -111,13 +60,12 @@
import Recaptcha from "@/components/Recaptcha.vue";
import HeaderLogin from "@/components/HeaderLoginTemplate.vue";
import AuthenticationService from "@/services/AuthenticationService";
import particlesJS from "@/components/ParticlesJS.vue";
const ElectronFrameButtons = () =>
import("@/components/ElectronJS/FrameButtons.vue");
export default {
components: { HeaderLogin, Recaptcha, particlesJS, ElectronFrameButtons },
components: { HeaderLogin, Recaptcha, ElectronFrameButtons },
data() {
return {
isElectron: window && window.process && window.process.type,
@ -130,7 +78,6 @@ export default {
otherError: "",
captchaToken: "",
isDay: true,
deactive: false
};
},
@ -142,9 +89,7 @@ export default {
this.reCaptcha.alert = "";
this.otherError = "";
},
isDayEvent(data) {
this.isDay = data;
},
captchaSubmit(token) {
this.captchaToken = token;
this.login();
@ -171,14 +116,14 @@ export default {
this.visible = false;
this.$store.dispatch("token", result.data.token);
setTimeout(_ => {
const {to, id} = this.$route.query;
const { to, id } = this.$route.query;
if (to) {
return window.location.href = `/${to}/${id}`
return (window.location.href = `/${to}/${id}`);
}
window.location.href = "/app";
}, 1000);
} else {
this.showCaptcha = false
this.showCaptcha = false;
this.deactive = false;
this.captchaToken = null;
this.$refs.recaptcha.resetRecaptcha();
@ -206,7 +151,8 @@ export default {
</script>
<style>
html, body {
html,
body {
height: 100%;
}
</style>
@ -235,21 +181,12 @@ html, body {
}
}
/* .fade-up-enter-active, .fade-up-leave-active {
transition: .5s;
transition-delay: 0.5s
}
.fade-up-enter, .fade-up-leave-to /* .fade-leave-active {
opacity: 0;
transform: translateX(20px)
} */
#app {
display: flex;
flex-direction: column;
transition: background 10s;
color: white;
height: 100%;
height: 100%;
background: #173d42;
}
.app-content {
display: flex;
@ -259,50 +196,26 @@ html, body {
overflow: auto;
z-index: 9999;
}
.background {
position: fixed;
height: 100%;
width: 100%;
transition: background 10s;
}
.night-background {
opacity: 0;
transition: 10s;
background: linear-gradient(to bottom, #000000 0%,#606060 100%) !important;
}
.day-background {
opacity: 1;
background: linear-gradient(to bottom, #165dc0 0%,#5482bf 100%);
z-index: -1
}
.night-background.chosen {
opacity: 1 !important;
}
.night-background .particles {
opacity: 1;
}
.content {
display: flex;
height: 100%;
margin: 10px;
flex-shrink:0;
flex-shrink: 0;
}
.box {
width: 100%;
max-width: 400px;
background: rgba(44, 44, 44, 0.774);
margin: auto;
margin-top: 20px;
border-radius: 10px;
display: flex;
flex-direction: column;
align-items: center;
z-index: 9999;
padding-bottom: 20px;
background-image: url("../assets/leftPanelBackground.jpg");
background-position: center;
background-size: cover;
}
.box .title {
text-align: center;
@ -334,9 +247,8 @@ form {
margin: 10px;
width: 80%;
align-self: center;
background: rgb(59, 59, 59);
background: #074d57;
padding: 10px;
border-radius: 10px;
}
.input-text {
margin-bottom: 5px;
@ -345,10 +257,8 @@ form {
input {
outline: none;
padding: 10px;
border: solid 1px rgba(0, 0, 0, 0);
background: none;
border-radius: 5px;
background: rgb(36, 36, 36);
border: none;
background: #03262b;
color: white;
}
.buttons {
@ -361,7 +271,6 @@ input {
.button {
padding: 10px;
background: rgba(25, 151, 255, 0.699);
border-radius: 5px;
margin: 10px;
margin-top: 10px;
user-select: none;
@ -370,7 +279,7 @@ input {
font-size: 17px;
outline: none;
transition: 0.2s;
box-shadow: 3px 3px rgba(23, 112, 255, 0.479);
cursor: pointer;
}
.button:hover {
background: rgb(25, 151, 255);
@ -378,15 +287,9 @@ input {
.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.deactive {
background: rgba(70, 70, 70, 0.699);
box-shadow: 3px 3px rgba(0, 0, 0, 0.479);
}
.button.deactive :hover {
@ -395,15 +298,9 @@ input {
.button.deactive :focus {
background: rgba(70, 70, 70, 0.699);
}
.button.deactive:active {
background: rgba(70, 70, 70, 0.699);
transform: translate(3px, 3px);
box-shadow: 0px 0px rgba(0, 0, 0, 0.479);
}
.register-button {
background: rgba(46, 204, 112, 0.67);
box-shadow: 3px 3px #0f7e3d;
}
.register-button.button:hover {
background: #2ecc71;
@ -411,11 +308,6 @@ input {
.register-button.button:focus {
background: #2ecc71;
}
.register-button.button:active {
background: #2ecc71;
transform: translate(3px, 3px);
box-shadow: 0px 0px #0f7e3d;
}
.captcha-input {
width: initial;

168
src/views/RegisterPage.vue
View file

@ -2,108 +2,63 @@
<div id="app">
<electron-frame-buttons v-if="isElectron" />
<div class="app-content">
<header-login @isDay="isDayEvent" />
<header-login />
<div class="content">
<transition
appear
name="fade-up"
>
<div
v-if="visible"
class="box"
>
<transition appear name="fade-up">
<div v-if="visible" class="box">
<div class="title">
<i class="material-icons">account_circle</i>
Register
</div>
<div class="info">
Welcome, new user! I Hope you enjoy Nertivia!
</div>
<form
v-if="!showCaptcha"
action="#"
@submit.prevent="formSubmit"
>
<div class="info">Welcome, new user! I Hope you enjoy Nertivia!</div>
<form v-if="!showCaptcha" action="#" @submit.prevent="formSubmit">
<div class="input">
<div class="input-text">
Email
<span
v-if="email.alert"
class="error"
>- {{ email.alert }}</span>
<span v-if="email.alert" class="error">- {{ email.alert }}</span>
</div>
<input
v-model="email.value"
type="email"
placeholder="Email"
autocomplete="off"
>
<input v-model="email.value" type="email" placeholder="Email" autocomplete="off" />
</div>
<div class="input">
<div class="input-text">
Username
<span
v-if="username.alert"
class="error"
>- {{ username.alert }}</span>
<span v-if="username.alert" class="error">- {{ username.alert }}</span>
</div>
<input
v-model="username.value"
type="text"
placeholder="Username"
autocomplete="off"
>
/>
</div>
<div class="input">
<div class="input-text">
Password
<span
v-if="password.alert"
class="error"
>- {{ password.alert }}</span>
<span v-if="password.alert" class="error">- {{ password.alert }}</span>
</div>
<input
v-model="password.value"
type="password"
autocomplete="off"
placeholder="Password"
>
/>
</div>
<span
v-if="otherError"
class="error"
style="text-align: center;"
>{{ otherError }}</span>
<span v-if="otherError" class="error" style="text-align: center;">{{ otherError }}</span>
<div class="buttons">
<button
type="submit"
:class="{button: true, deactive: deactive}"
>
Register
</button>
<button
class="button register-button"
@click.prevent="loginButton"
>
I'm already a user!
</button>
>I'm already a user!</button>
<button type="submit" :class="{button: true, deactive: deactive}">Register</button>
</div>
</form>
<div
v-if="showCaptcha"
class="captcha-box"
>
<div v-if="showCaptcha" class="captcha-box">
<div class="input captcha-input">
<div class="input-text">
Beep Boop
</div>
<div class="input-text">Beep Boop</div>
<div class="captcha">
<Recaptcha
ref="recaptcha"
@verify="captchaSubmit"
/>
<Recaptcha ref="recaptcha" @verify="captchaSubmit" />
</div>
</div>
</div>
@ -111,26 +66,18 @@
</transition>
</div>
</div>
<div class="background">
<div :class="{background: true, 'night-background': true, chosen: !isDay}">
<particlesJS class="particles" />
</div>
<div class="background day-background" />
</div>
</div>
</template>
<script>
import Recaptcha from "@/components/Recaptcha.vue";
import HeaderLogin from "@/components/HeaderLoginTemplate.vue";
import AuthenticationService from "@/services/AuthenticationService";
import particlesJS from "@/components/ParticlesJS.vue";
const ElectronFrameButtons = () =>
import("@/components/ElectronJS/FrameButtons.vue");
export default {
components: { HeaderLogin, Recaptcha, particlesJS, ElectronFrameButtons },
components: { HeaderLogin, Recaptcha, ElectronFrameButtons },
data() {
return {
isElectron: window && window.process && window.process.type,
@ -143,7 +90,6 @@ export default {
otherError: "",
captchaToken: "",
isDay: true,
deactive: false
};
},
@ -155,9 +101,6 @@ export default {
this.password.alert = "";
this.otherError = "";
},
isDayEvent(data) {
this.isDay = data;
},
captchaSubmit(token) {
this.captchaToken = token;
this.register();
@ -171,7 +114,6 @@ export default {
const username = this.username.value.trim();
const password = this.password.value.trim();
const { ok, error, result } = await AuthenticationService.register({
email,
username,
@ -185,7 +127,7 @@ export default {
window.location.href = "/app";
}, 1000);
} else {
this.showCaptcha = false
this.showCaptcha = false;
this.deactive = false;
this.captchaToken = null;
this.$refs.recaptcha.resetRecaptcha();
@ -213,7 +155,8 @@ export default {
</script>
<style>
html, body {
html,
body {
height: 100%;
}
</style>
@ -242,20 +185,11 @@ html, body {
}
}
/* .fade-up-enter-active, .fade-up-leave-active {
transition: .5s;
transition-delay: 0.5s
}
.fade-up-enter, .fade-up-leave-to /* .fade-leave-active {
opacity: 0;
transform: translateX(20px)
} */
#app {
display: flex;
flex-direction: column;
transition: background 10s;
color: white;
background: #173d42;
}
.app-content {
display: flex;
@ -265,31 +199,6 @@ html, body {
overflow: auto;
z-index: 9999;
}
.background {
position: fixed;
height: 100%;
width: 100%;
transition: background 10s;
}
.night-background {
opacity: 0;
transition: 10s;
background: linear-gradient(to bottom, #000000 0%,#606060 100%) !important;
}
.day-background {
opacity: 1;
background: linear-gradient(to bottom, #165dc0 0%,#5482bf 100%);
z-index: -1
}
.night-background.chosen {
opacity: 1 !important;
}
.night-background .particles {
opacity: 1;
}
.content {
display: flex;
@ -300,15 +209,16 @@ html, body {
.box {
width: 100%;
max-width: 400px;
background: rgba(44, 44, 44, 0.774);
margin: auto;
margin-top: 20px;
border-radius: 10px;
display: flex;
flex-direction: column;
align-items: center;
z-index: 9999;
padding-bottom: 20px;
background-image: url("../assets/leftPanelBackground.jpg");
background-position: center;
background-size: cover;
}
.box .title {
text-align: center;
@ -340,9 +250,8 @@ form {
margin: 10px;
width: 80%;
align-self: center;
background: rgb(59, 59, 59);
background: #074d57;
padding: 10px;
border-radius: 10px;
}
.input-text {
margin-bottom: 5px;
@ -351,10 +260,9 @@ form {
input {
outline: none;
padding: 10px;
border: solid 1px rgba(0, 0, 0, 0);
border: none;
background: none;
border-radius: 5px;
background: rgb(36, 36, 36);
background: #03262b;
color: white;
}
.buttons {
@ -367,7 +275,6 @@ input {
.button {
padding: 10px;
background: rgba(25, 151, 255, 0.699);
border-radius: 5px;
margin: 10px;
margin-top: 10px;
user-select: none;
@ -376,7 +283,7 @@ input {
font-size: 17px;
outline: none;
transition: 0.2s;
box-shadow: 3px 3px rgba(23, 112, 255, 0.479);
cursor: pointer;
}
.button:hover {
background: rgb(25, 151, 255);
@ -384,15 +291,9 @@ input {
.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.deactive {
background: rgba(70, 70, 70, 0.699);
box-shadow: 3px 3px rgba(0, 0, 0, 0.479);
}
.button.deactive :hover {
@ -401,15 +302,9 @@ input {
.button.deactive :focus {
background: rgba(70, 70, 70, 0.699);
}
.button.deactive:active {
background: rgba(70, 70, 70, 0.699);
transform: translate(3px, 3px);
box-shadow: 0px 0px rgba(0, 0, 0, 0.479);
}
.register-button {
background: rgba(46, 204, 112, 0.67);
box-shadow: 3px 3px #0f7e3d;
}
.register-button.button:hover {
background: #2ecc71;
@ -417,11 +312,6 @@ input {
.register-button.button:focus {
background: #2ecc71;
}
.register-button.button:active {
background: #2ecc71;
transform: translate(3px, 3px);
box-shadow: 0px 0px #0f7e3d;
}
.captcha-input {
width: initial;