mirror of
https://github.com/danbulant/Nertivia-Client
synced 2026-06-14 20:11:10 +00:00
progress on the new design.Not completely finished
This commit is contained in:
supertiger1234
parent
8a37636ab8
commit
f525c2eea2
14 changed files with 451 additions and 107 deletions
|
|
@ -80,6 +80,7 @@ export default {
|
|||
}
|
||||
.inner-profile-picture {
|
||||
background-color: rgba(0, 0, 0, 0.315);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.20);
|
||||
border-radius: 50%;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
|
|
|
|||
375
src/components/app/MainNav.vue
Normal file
375
src/components/app/MainNav.vue
Normal file
|
|
@ -0,0 +1,375 @@
|
|||
<template>
|
||||
<div class="navigation" ref="navigation">
|
||||
<div
|
||||
class="tool-tip"
|
||||
ref="toolTip"
|
||||
:style="{top: toolTipTopPosition + 'px'}"
|
||||
v-if="toolTipShown"
|
||||
>{{toolTipLocalName || servers[toolTipServerID].name}}</div>
|
||||
<div class="container" @mouseleave="mouseLeaveEvent">
|
||||
<div class="navigation-items">
|
||||
<div
|
||||
class="item material-icons"
|
||||
:class="{selected: currentTab == 0}"
|
||||
@click="switchTab(0)"
|
||||
@mouseenter="localToolTipEvent('Explore', $event)"
|
||||
>explore</div>
|
||||
<div
|
||||
class="item material-icons"
|
||||
:class="{selected: currentTab == 1, notifyAnimation: DMNotification || friendRequestExists}"
|
||||
@click="switchTab(1)"
|
||||
@mouseenter="localToolTipEvent('Direct Message', $event)"
|
||||
>chat</div>
|
||||
<div
|
||||
class="item material-icons"
|
||||
:class="{selected: currentTab == 2, notifyAnimation: serverNotification}"
|
||||
@click="switchTab(2)"
|
||||
@mouseenter="localToolTipEvent('Servers', $event)"
|
||||
>forum</div>
|
||||
<div
|
||||
class="item material-icons"
|
||||
:class="{selected: currentTab == 3}"
|
||||
@click="switchTab(3)"
|
||||
@mouseenter="localToolTipEvent('Changelog', $event)"
|
||||
>import_contacts</div>
|
||||
<div
|
||||
v-if="!user.survey_completed"
|
||||
class="item material-icons"
|
||||
@click="openSurvey"
|
||||
@mouseenter="localToolTipEvent('Click Me', $event)"
|
||||
>error</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="item material-icons"
|
||||
@click="openSettings"
|
||||
@mouseenter="localToolTipEvent('Settings', $event)"
|
||||
>settings</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { bus } from "@/main.js";
|
||||
import config from "@/config.js";
|
||||
import settingsService from '@/services/settingsService';
|
||||
import ServerTemplate from "@/components/app/ServerTemplate/ServerTemplate";
|
||||
import draggable from 'vuedraggable'
|
||||
import { isMobile } from "@/utils/Mobile";
|
||||
export default {
|
||||
components: { ServerTemplate, draggable },
|
||||
data() {
|
||||
return {
|
||||
avatarDomain: config.domain + "/avatars",
|
||||
toolTipShown: false,
|
||||
toolTipTopPosition: 0,
|
||||
toolTipServerID: null,
|
||||
toolTipLocalName: null,
|
||||
mobile: isMobile(),
|
||||
|
||||
drag: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
async onEnd(event) {
|
||||
this.drag = false;
|
||||
const serverIDArr = this.serversArr.map(s => s.server_id);
|
||||
await settingsService.setServerPositions(serverIDArr);
|
||||
},
|
||||
onStart() {
|
||||
this.toolTipShown = false;
|
||||
this.drag = true;
|
||||
this.$store.dispatch("setAllPopout", {show: false});
|
||||
},
|
||||
dismissNotification(channelID) {
|
||||
const notifications = this.$store.getters.notifications.find(function(e) {
|
||||
return e.channelID === channelID;
|
||||
});
|
||||
|
||||
if (notifications && notifications.count >= 1 && document.hasFocus()) {
|
||||
this.$socket.emit("notification:dismiss", { channelID });
|
||||
}
|
||||
},
|
||||
openServer(serverID) {
|
||||
const server = this.servers[serverID];
|
||||
const lastSelectedChannel = JSON.parse(
|
||||
localStorage.getItem("selectedChannels") || "{}"
|
||||
)[serverID];
|
||||
const defaultChannelID = server.default_channel_id;
|
||||
const channels = this.$store.getters.channels;
|
||||
let channel = channels[lastSelectedChannel || defaultChannelID];
|
||||
if (!channel) {
|
||||
channel = channels[defaultChannelID];
|
||||
}
|
||||
|
||||
this.dismissNotification(channel.channelID);
|
||||
this.$store.dispatch("servers/setSelectedServerID", serverID);
|
||||
this.$store.dispatch("openChannel", channel);
|
||||
},
|
||||
switchChannel(isServer) {
|
||||
const serverChannelID = this.$store.state.channelModule.serverChannelID;
|
||||
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);
|
||||
} 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);
|
||||
}
|
||||
},
|
||||
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);
|
||||
}
|
||||
},
|
||||
openSettings() {
|
||||
this.$store.dispatch("setPopoutVisibility", {
|
||||
name: "settings",
|
||||
visibility: true
|
||||
});
|
||||
},
|
||||
localToolTipEvent(name, event) {
|
||||
const rect = event.target.getBoundingClientRect();
|
||||
this.toolTipLocalName = name;
|
||||
this.toolTipTopPosition = rect.top - this.getTopHeight() + 16;
|
||||
this.toolTipShown = true;
|
||||
},
|
||||
serverToolTipEvent({ serverID, top }) {
|
||||
if (this.drag) return;
|
||||
this.toolTipLocalName = null;
|
||||
this.toolTipServerID = serverID;
|
||||
this.toolTipTopPosition = top - this.getTopHeight() + 16;
|
||||
this.toolTipShown = true;
|
||||
},
|
||||
mouseLeaveEvent() {
|
||||
this.toolTipShown = false;
|
||||
this.toolTipServerID = null;
|
||||
this.toolTipLocalName = null;
|
||||
},
|
||||
getTopHeight() {
|
||||
return window.innerHeight - this.$refs["navigation"].offsetHeight;
|
||||
},
|
||||
addServer() {
|
||||
this.$store.dispatch("setPopoutVisibility", {
|
||||
name: "addServer",
|
||||
visibility: true
|
||||
});
|
||||
},
|
||||
addFriend() {
|
||||
this.$store.dispatch("setAllPopout", {
|
||||
show: true,
|
||||
type: "ADD_FRIEND"
|
||||
});
|
||||
},
|
||||
openSurvey() {
|
||||
this.$store.dispatch("setPopoutVisibility", {
|
||||
name: "surveyPopout",
|
||||
visibility: true
|
||||
});
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
user() {
|
||||
return this.$store.getters.user;
|
||||
},
|
||||
currentTab() {
|
||||
return this.$store.getters.currentTab;
|
||||
},
|
||||
servers() {
|
||||
return this.$store.getters["servers/servers"];
|
||||
},
|
||||
serversArr: {
|
||||
get() {
|
||||
const data = this.servers;
|
||||
return Object.keys(data)
|
||||
.map(key => {
|
||||
return data[key];
|
||||
})
|
||||
.reverse();
|
||||
},
|
||||
set(value) {
|
||||
const reversedServers = value.reverse()
|
||||
// convert array to json
|
||||
const json = {};
|
||||
for (let index = 0; index < reversedServers.length; index++) {
|
||||
const element = reversedServers[index];
|
||||
json[element.server_id] = element;
|
||||
}
|
||||
this.$store.dispatch("servers/setServers", json);
|
||||
}
|
||||
},
|
||||
selectedServerID() {
|
||||
return this.$store.getters["servers/selectedServerID"];
|
||||
},
|
||||
serverNotification() {
|
||||
const notifications = this.$store.getters.notifications;
|
||||
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 ||
|
||||
!document.hasFocus() ||
|
||||
this.currentTab !== 2)
|
||||
);
|
||||
});
|
||||
return notification;
|
||||
},
|
||||
DMNotification() {
|
||||
const notifications = this.$store.getters.notifications;
|
||||
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 ||
|
||||
!document.hasFocus() ||
|
||||
this.currentTab !== 1)
|
||||
);
|
||||
});
|
||||
// unopened dm
|
||||
if (!notification) {
|
||||
return notifications.find(e => {
|
||||
return !channels[e.channelID];
|
||||
});
|
||||
}
|
||||
return notification;
|
||||
},
|
||||
friendRequestExists() {
|
||||
const allFriend = this.$store.getters.user.friends;
|
||||
const result = Object.keys(allFriend).map(function(key) {
|
||||
return allFriend[key];
|
||||
});
|
||||
return result.find(friend => friend.status === 1);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
bus.$on("server-tool-tip", this.serverToolTipEvent);
|
||||
},
|
||||
destroyed() {
|
||||
bus.$off("server-tool-tip", this.serverToolTipEvent);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.navigation {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-shrink: 0;
|
||||
height: 60px;
|
||||
width: 100%;
|
||||
}
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
.navigation-items {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
align-self: flex-start;
|
||||
align-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
color: white;
|
||||
font-size: 30px;
|
||||
align-self: center;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin-left: 10px;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
opacity: 0.8;
|
||||
transition: 0.2s;
|
||||
&:hover {
|
||||
background: #093b4b;
|
||||
}
|
||||
&.selected {
|
||||
background: #072C38;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.notifyAnimation:before {
|
||||
content: "!";
|
||||
color: white;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
font-size: 15px;
|
||||
position: absolute;
|
||||
z-index: 115651;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
animation: notifyAnime;
|
||||
animation-duration: 1s;
|
||||
animation-iteration-count: infinite;
|
||||
animation-fill-mode: forwards;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 23, 23, 0.753);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
@keyframes notifyAnime {
|
||||
0% {
|
||||
opacity: 0.2;
|
||||
}
|
||||
40% {
|
||||
opacity: 1;
|
||||
}
|
||||
60% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0.2;
|
||||
}
|
||||
}
|
||||
|
||||
.tool-tip {
|
||||
color: white;
|
||||
position: absolute;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
backdrop-filter: blur(3px);
|
||||
padding: 5px;
|
||||
max-width: 150px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
left: 60px;
|
||||
z-index: 99999;
|
||||
user-select: none;
|
||||
cursor: default;
|
||||
transition: 0.2s;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -75,10 +75,13 @@ export default {
|
|||
cursor: pointer;
|
||||
user-select: none;
|
||||
overflow: hidden;
|
||||
border-radius: 4px;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.member:hover {
|
||||
background: #064d55;
|
||||
background: #063442;
|
||||
}
|
||||
|
||||
.information {
|
||||
|
|
|
|||
|
|
@ -82,15 +82,12 @@ export default {
|
|||
flex-direction: column;
|
||||
width: 300px;
|
||||
height: 100%;
|
||||
background-image: url("../../assets/leftPanelBackground.jpg");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
background: rgba(0, 0, 0, 0.14);
|
||||
}
|
||||
.header {
|
||||
height: 50px;
|
||||
height: 60px;
|
||||
width: 100%;
|
||||
background: rgba(0, 0, 0, 0.438);
|
||||
background: #083A4A;
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
|
@ -103,12 +100,12 @@ export default {
|
|||
overflow: auto;
|
||||
}
|
||||
.tab {
|
||||
background: #095a5c;
|
||||
padding: 5px;
|
||||
user-select: none;
|
||||
cursor: default;
|
||||
color: #cce4e3;
|
||||
color: #b5c4ca;
|
||||
font-size: 15px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
|||
|
|
@ -41,7 +41,6 @@
|
|||
</div>
|
||||
|
||||
<edit-panel v-if="editMessage" :data="editMessage" />
|
||||
<div class="seperater" />
|
||||
<div class="markdown-buttons" style="color: white;" v-if="sendMessagePermission === true || editMessage">
|
||||
<div class="material-icons markdown-icon" @click="addFormat('**')" title="Bold">format_bold</div>
|
||||
<div class="material-icons markdown-icon" @click="addFormat('_')" title="Italic">format_italic</div>
|
||||
|
|
@ -78,7 +77,7 @@
|
|||
@paste="onPaste"
|
||||
></textarea>
|
||||
<button class="emojis-button" @click="showEmojiPanel = !showEmojiPanel">
|
||||
<i class="material-icons">face</i>
|
||||
<i class="material-icons">tag_faces</i>
|
||||
</button>
|
||||
<button
|
||||
class="send-button"
|
||||
|
|
@ -734,26 +733,25 @@ export default {
|
|||
.chat-input-area {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 10px;
|
||||
padding-bottom: 10px;
|
||||
position: relative;
|
||||
background: #014757;
|
||||
}
|
||||
|
||||
.attachment-button {
|
||||
width: 50px;
|
||||
background: rgba(255, 255, 255, 0.07);
|
||||
margin-right: 2px;
|
||||
margin-left: 10px;
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
color: #a5bec4;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
transition: 0.3s;
|
||||
|
||||
&:hover {
|
||||
background: rgba(255, 255, 255, 0.13);
|
||||
color: white;
|
||||
}
|
||||
.material-icons {
|
||||
color: white;
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
|
|
@ -784,7 +782,7 @@ export default {
|
|||
|
||||
.chat-input {
|
||||
font-family: "Roboto", sans-serif;
|
||||
background: rgba(255, 255, 255, 0.07);
|
||||
background: transparent;
|
||||
color: white;
|
||||
width: 100%;
|
||||
min-height: 20px;
|
||||
|
|
@ -799,23 +797,17 @@ export default {
|
|||
overflow: hidden;
|
||||
max-height: 30vh;
|
||||
overflow-y: auto;
|
||||
&:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background: rgba(255, 255, 255, 0.13);
|
||||
&::placeholder{
|
||||
color: #597981;
|
||||
}
|
||||
}
|
||||
|
||||
.send-button {
|
||||
font-size: 20px;
|
||||
color: white;
|
||||
background: rgba(255, 255, 255, 0.07);
|
||||
color: #a5bec4;
|
||||
background: transparent;
|
||||
border: none;
|
||||
outline: none;
|
||||
margin-left: 2px;
|
||||
margin-right: 10px;
|
||||
min-height: 40px;
|
||||
width: 50px;
|
||||
transition: 0.3s;
|
||||
|
|
@ -830,7 +822,7 @@ export default {
|
|||
margin: auto;
|
||||
}
|
||||
&:hover {
|
||||
background: rgba(255, 255, 255, 0.13);
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -843,8 +835,8 @@ export default {
|
|||
|
||||
.emojis-button {
|
||||
font-size: 20px;
|
||||
color: white;
|
||||
background: rgba(255, 255, 255, 0.07);
|
||||
color: #a5bec4;
|
||||
background: transparent;
|
||||
border: none;
|
||||
outline: none;
|
||||
margin-left: 2px;
|
||||
|
|
@ -859,7 +851,7 @@ export default {
|
|||
margin: auto;
|
||||
}
|
||||
&:hover {
|
||||
background: rgba(255, 255, 255, 0.13);
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -905,9 +897,12 @@ export default {
|
|||
height: 35px;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
margin-left: 10px;
|
||||
margin-left: 2px;
|
||||
margin-bottom: 10px;
|
||||
flex-shrink: 0;
|
||||
background: #024B5C;
|
||||
.markdown-icon {
|
||||
font-size: 21px;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-content: center;
|
||||
|
|
@ -916,10 +911,10 @@ export default {
|
|||
user-select: none;
|
||||
cursor: pointer;
|
||||
height: 100%;
|
||||
width: 35px;
|
||||
margin-left: 2px;
|
||||
width: 30px;
|
||||
margin-left: 0px;
|
||||
transition: 0.2s;
|
||||
color: #d5dcdd;
|
||||
color: #a5bec4;
|
||||
&:hover {
|
||||
color: white;
|
||||
}
|
||||
|
|
@ -942,14 +937,14 @@ export default {
|
|||
cursor: pointer;
|
||||
}
|
||||
.reset-button {
|
||||
color: #a5bec4;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
margin-left: 5px;
|
||||
transition: 0.2s;
|
||||
opacity: 0.6;
|
||||
flex-shrink: 0;
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -61,9 +61,9 @@ export default {
|
|||
|
||||
<style scoped>
|
||||
.heading {
|
||||
background: #112c30;
|
||||
background: #073240;
|
||||
margin-bottom: 0;
|
||||
height: 50px;
|
||||
height: 60px;
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
padding-left: 10px;
|
||||
|
|
|
|||
|
|
@ -272,6 +272,10 @@ export default {
|
|||
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
$self-message-color: #236b7f;
|
||||
$message-color: #053746;
|
||||
|
||||
.container {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
|
@ -299,8 +303,7 @@ export default {
|
|||
display: table;
|
||||
color: white;
|
||||
overflow: hidden;
|
||||
border-radius: 5px;
|
||||
background: #0a1a1c;
|
||||
background: $message-color;
|
||||
}
|
||||
|
||||
.presence-message .text {
|
||||
|
|
@ -329,7 +332,7 @@ export default {
|
|||
}
|
||||
|
||||
.ownMessageLeft .triangle-inner {
|
||||
border-left: 8px solid #3a585c;
|
||||
border-left: 8px solid $self-message-color;
|
||||
border-right: none !important;
|
||||
}
|
||||
|
||||
|
|
@ -349,14 +352,14 @@ export default {
|
|||
}
|
||||
|
||||
.ownMessage .triangle-inner {
|
||||
border-right: 8px solid #3a585c;
|
||||
border-right: 8px solid $self-message-color;
|
||||
}
|
||||
.ownMessage .content {
|
||||
background: #3a585c;
|
||||
background: $self-message-color;
|
||||
}
|
||||
|
||||
.ownMessage .date {
|
||||
color: rgb(209, 209, 209);
|
||||
color: #d5e3e6;
|
||||
}
|
||||
|
||||
.file-content {
|
||||
|
|
@ -419,11 +422,11 @@ export default {
|
|||
height: 0;
|
||||
border-top: 9px solid transparent;
|
||||
border-bottom: 0px solid transparent;
|
||||
border-right: 8px solid #0a1a1c;
|
||||
border-right: 8px solid $message-color;
|
||||
}
|
||||
|
||||
.content {
|
||||
background: #0a1a1c;
|
||||
background: $message-color;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
|
@ -457,7 +460,7 @@ export default {
|
|||
display: flex;
|
||||
}
|
||||
.username {
|
||||
color: rgb(219, 219, 219);
|
||||
color: rgb(255, 255, 255);
|
||||
font-size: 14px;
|
||||
margin: auto 0;
|
||||
transition: 0.1s;
|
||||
|
|
@ -465,11 +468,11 @@ export default {
|
|||
}
|
||||
|
||||
.username:hover {
|
||||
color: rgb(199, 199, 199);
|
||||
color: rgb(255, 255, 255);
|
||||
text-decoration: underline;
|
||||
}
|
||||
.date {
|
||||
color: rgb(177, 177, 177);
|
||||
color: #d5e3e6;
|
||||
font-size: 10px;
|
||||
margin: auto auto auto 5px;
|
||||
font-weight: normal;
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
class="avatar"
|
||||
:url="`${avatar}${hover ? '' : '?type=png'}`"
|
||||
:admin="user.admin"
|
||||
size="40px"
|
||||
size="35px"
|
||||
:hover="true"
|
||||
@click.native="openUserInformation"
|
||||
/>
|
||||
|
|
@ -98,6 +98,7 @@ export default {
|
|||
align-items: center;
|
||||
height: 60px;
|
||||
transition: 0.3s;
|
||||
background-color: #083A4A
|
||||
}
|
||||
|
||||
.avatar {
|
||||
|
|
|
|||
|
|
@ -8,39 +8,6 @@
|
|||
>{{toolTipLocalName || servers[toolTipServerID].name}}</div>
|
||||
<div class="container" @mouseleave="mouseLeaveEvent">
|
||||
<div class="scrollable">
|
||||
<div class="navigation-items">
|
||||
<div
|
||||
class="item material-icons"
|
||||
:class="{selected: currentTab == 0}"
|
||||
@click="switchTab(0)"
|
||||
@mouseenter="localToolTipEvent('Explore', $event)"
|
||||
>explore</div>
|
||||
<div
|
||||
class="item material-icons"
|
||||
:class="{selected: currentTab == 1, notifyAnimation: DMNotification || friendRequestExists}"
|
||||
@click="switchTab(1)"
|
||||
@mouseenter="localToolTipEvent('Direct Message', $event)"
|
||||
>chat</div>
|
||||
<div
|
||||
class="item material-icons"
|
||||
:class="{selected: currentTab == 2, notifyAnimation: serverNotification}"
|
||||
@click="switchTab(2)"
|
||||
@mouseenter="localToolTipEvent('Servers', $event)"
|
||||
>forum</div>
|
||||
<div
|
||||
class="item material-icons"
|
||||
:class="{selected: currentTab == 3}"
|
||||
@click="switchTab(3)"
|
||||
@mouseenter="localToolTipEvent('Changelog', $event)"
|
||||
>list_alt</div>
|
||||
<div
|
||||
v-if="!user.survey_completed"
|
||||
class="item material-icons"
|
||||
@click="openSurvey"
|
||||
@mouseenter="localToolTipEvent('Click Me', $event)"
|
||||
>error</div>
|
||||
</div>
|
||||
<div class="seperater" />
|
||||
|
||||
<div class="server-items" v-if="currentTab === 2">
|
||||
<draggable v-model="serversArr" :animation="200" :delay="mobile ? 400 : 0" ghost-class="ghost" @end="onEnd" @start="onStart">
|
||||
|
|
@ -58,7 +25,6 @@
|
|||
</div>
|
||||
|
||||
</div>
|
||||
<div class="seperater" />
|
||||
<div
|
||||
class="item material-icons"
|
||||
v-if="currentTab === 1"
|
||||
|
|
@ -71,11 +37,6 @@
|
|||
@click="addServer"
|
||||
@mouseenter="localToolTipEvent('Add Server', $event)"
|
||||
>add</div>
|
||||
<div
|
||||
class="item material-icons"
|
||||
@click="openSettings"
|
||||
@mouseenter="localToolTipEvent('Settings', $event)"
|
||||
>settings</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -323,8 +284,7 @@ export default {
|
|||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
height: 100%;
|
||||
width: 60px;
|
||||
background-color: #085053;
|
||||
width: 70px;
|
||||
}
|
||||
|
||||
.container {
|
||||
|
|
@ -332,7 +292,7 @@ export default {
|
|||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
height: 100%;
|
||||
width: 60px;
|
||||
width: 70px;
|
||||
}
|
||||
.navigation-items {
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -247,11 +247,13 @@ export default {
|
|||
margin-left: 2px;
|
||||
.banner-image {
|
||||
position: relative;
|
||||
width: 240px;
|
||||
height: 150px;
|
||||
width: 250px;
|
||||
height: 130px;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.13);
|
||||
.banner-text {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
|
|
@ -259,7 +261,6 @@ export default {
|
|||
right: 0;
|
||||
width: 100%;
|
||||
height: 35px;
|
||||
backdrop-filter: blur(15px);
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
<div class="left-panel">
|
||||
<navigation />
|
||||
<div class="right">
|
||||
<MyMiniInformation />
|
||||
<div
|
||||
class="server-banner"
|
||||
@mouseenter="bannerHover = true"
|
||||
|
|
@ -26,8 +27,6 @@
|
|||
<div class="channels-list">
|
||||
<channels-list v-if="selectedServerID" :server-i-d="selectedServerID" />
|
||||
</div>
|
||||
<div class="seperater" />
|
||||
<MyMiniInformation />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -121,12 +120,12 @@ export default {
|
|||
<style scoped lang="scss" >
|
||||
.left-panel {
|
||||
height: 100%;
|
||||
width: 300px;
|
||||
width: 340px;
|
||||
max-width: 100%;
|
||||
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;
|
||||
|
|
@ -152,6 +151,8 @@ export default {
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background: rgba(0, 0, 0, 0.14);
|
||||
border-top-left-radius: 10px;
|
||||
}
|
||||
|
||||
.server-banner {
|
||||
|
|
@ -161,9 +162,12 @@ export default {
|
|||
flex-direction: row;
|
||||
background-color: rgba(32, 32, 32, 0.4);
|
||||
height: 35px;
|
||||
border-radius: 4px;
|
||||
margin: 10px;
|
||||
box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.13);
|
||||
}
|
||||
.extendBanner {
|
||||
height: 150px;
|
||||
height: 130px;
|
||||
background-color: rgb(32, 32, 32);
|
||||
}
|
||||
.banner-image {
|
||||
|
|
@ -186,7 +190,6 @@ export default {
|
|||
align-items: center;
|
||||
padding-left: 10px;
|
||||
position: relative;
|
||||
backdrop-filter: blur(15px);
|
||||
z-index: 2;
|
||||
user-select: none;
|
||||
overflow: hidden;
|
||||
|
|
|
|||
|
|
@ -70,12 +70,14 @@ export default {
|
|||
overflow: hidden;
|
||||
padding-right: 10px;
|
||||
padding-left: 10px;
|
||||
margin: 5px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.channel:hover {
|
||||
background: #08616b;
|
||||
background: #053c4c;
|
||||
}
|
||||
.channel.selected {
|
||||
background: #064c55;
|
||||
background: #053240;
|
||||
}
|
||||
|
||||
.channel-name {
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@
|
|||
>
|
||||
<profile-picture
|
||||
size="45px"
|
||||
class="avatar"
|
||||
:url="`${avatarDomain}/${serverData.avatar}${hover ? '' : '?type=png'}`"
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -101,7 +102,6 @@ export default {
|
|||
background: #042a2b;
|
||||
}
|
||||
}
|
||||
|
||||
.notifyAnimation:before {
|
||||
content: "!";
|
||||
color: white;
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@
|
|||
<electron-frame-buttons />
|
||||
</div>
|
||||
</div>
|
||||
<main-nav/>
|
||||
<div class="panel-layout">
|
||||
<news v-if="currentTab == 3" />
|
||||
<direct-message v-if="currentTab == 1" />
|
||||
|
|
@ -29,6 +30,7 @@ import windowProperties from "@/utils/windowProperties";
|
|||
import changelog from "@/utils/changelog.js";
|
||||
import ConnectingScreen from "./../components/app/ConnectingScreen.vue";
|
||||
import Spinner from "./../components/Spinner.vue";
|
||||
import MainNav from "./../components/app/MainNav.vue";
|
||||
|
||||
const ElectronFrameButtons = () =>
|
||||
import("@/components/ElectronJS/FrameButtons.vue");
|
||||
|
|
@ -63,7 +65,8 @@ export default {
|
|||
Popouts,
|
||||
News,
|
||||
ElectronFrameButtons,
|
||||
Explore
|
||||
Explore,
|
||||
MainNav
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -355,7 +358,7 @@ textarea {
|
|||
z-index: -1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #173d42;
|
||||
background: linear-gradient(#0B4155, #01677E);
|
||||
}
|
||||
|
||||
.panel-layout {
|
||||
|
|
|
|||
Loading…
Reference in a new issue