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

a lot of changes and redesigns

Browse source
This commit is contained in:
supertiger1234 2019-11-20 15:11:10 +00:00
parent f525c2eea2
commit 3711cdf647
20 changed files with 245 additions and 159 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -2,6 +2,7 @@
<div class="left-panel"> <div class="left-panel">
<navigation /> <navigation />
<div class="content"> <div class="content">
<MyMiniInformation />
<div class="tabs"> <div class="tabs">
<div <div
class="tab" class="tab"
@ -22,8 +23,6 @@
<div v-else class="list"> <div v-else class="list">
<recent-friends /> <recent-friends />
</div> </div>
<div class="seperater" />
<MyMiniInformation />
</div> </div>
</div> </div>
</template> </template>
@ -94,15 +93,12 @@ export default {
<style scoped> <style scoped>
.left-panel { .left-panel {
height: 100%; height: 100%;
width: 300px; width: 340px;
max-width: calc(100% - 60px);
flex-shrink: 0; flex-shrink: 0;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
z-index: 1; z-index: 1;
background-image: url("../../assets/leftPanelBackground.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
} }
.content { .content {
display: flex; display: flex;
@ -110,6 +106,9 @@ export default {
flex-shrink: 0; flex-shrink: 0;
flex: 1; flex: 1;
overflow: hidden; overflow: hidden;
background: rgba(0, 0, 0, 0.14);
border-top-left-radius: 10px;
} }
.list { .list {
flex: 1; flex: 1;
@ -136,7 +135,6 @@ export default {
height: 50px; height: 50px;
transition: 0.2s; transition: 0.2s;
cursor: pointer; cursor: pointer;
background: #075e64;
position: relative; position: relative;
} }
.tab .material-icons { .tab .material-icons {
@ -220,4 +218,10 @@ export default {
background: rgba(121, 3, 3, 0.541); background: rgba(121, 3, 3, 0.541);
} }
} }
@media (max-width: 600px) {
.content{
border-radius: 0;
}
}
</style> </style>

154
src/components/app/MainNav.vue
View file

@ -3,57 +3,78 @@
<div <div
class="tool-tip" class="tool-tip"
ref="toolTip" ref="toolTip"
:style="{top: toolTipTopPosition + 'px'}" :style="{ left: toolTipLeftPosition + 'px' }"
v-if="toolTipShown" v-if="toolTipShown"
>{{toolTipLocalName || servers[toolTipServerID].name}}</div> >
<div class="container" @mouseleave="mouseLeaveEvent"> {{ toolTipLocalName || servers[toolTipServerID].name }}
<div class="navigation-items"> </div>
<div <div class="container" @mouseleave="mouseLeaveEvent">
class="item material-icons" <div class="navigation-items">
:class="{selected: currentTab == 0}" <div
@click="switchTab(0)" class="item material-icons"
@mouseenter="localToolTipEvent('Explore', $event)" :class="{ selected: currentTab == 0 }"
>explore</div> @click="switchTab(0)"
<div @mouseenter="localToolTipEvent('Explore', $event)"
class="item material-icons" >
:class="{selected: currentTab == 1, notifyAnimation: DMNotification || friendRequestExists}" explore
@click="switchTab(1)" </div>
@mouseenter="localToolTipEvent('Direct Message', $event)" <div
>chat</div> class="item material-icons"
<div :class="{
class="item material-icons" selected: currentTab == 1,
:class="{selected: currentTab == 2, notifyAnimation: serverNotification}" notifyAnimation: DMNotification || friendRequestExists
@click="switchTab(2)" }"
@mouseenter="localToolTipEvent('Servers', $event)" @click="switchTab(1)"
>forum</div> @mouseenter="localToolTipEvent('Direct Message', $event)"
<div >
class="item material-icons" chat
:class="{selected: currentTab == 3}" </div>
@click="switchTab(3)" <div
@mouseenter="localToolTipEvent('Changelog', $event)" class="item material-icons"
>import_contacts</div> :class="{
<div selected: currentTab == 2,
v-if="!user.survey_completed" notifyAnimation: serverNotification
class="item material-icons" }"
@click="openSurvey" @click="switchTab(2)"
@mouseenter="localToolTipEvent('Click Me', $event)" @mouseenter="localToolTipEvent('Servers', $event)"
>error</div> >
</div> 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"
@mouseleave="mouseLeaveEvent"
@mouseenter="localToolTipEvent('Settings', $event)"
>
settings
</div> </div>
<div
class="item material-icons"
@click="openSettings"
@mouseenter="localToolTipEvent('Settings', $event)"
>settings</div>
</div> </div>
</template> </template>
<script> <script>
import { bus } from "@/main.js"; import { bus } from "@/main.js";
import config from "@/config.js"; import config from "@/config.js";
import settingsService from '@/services/settingsService'; import settingsService from "@/services/settingsService";
import ServerTemplate from "@/components/app/ServerTemplate/ServerTemplate"; import ServerTemplate from "@/components/app/ServerTemplate/ServerTemplate";
import draggable from 'vuedraggable' import draggable from "vuedraggable";
import { isMobile } from "@/utils/Mobile"; import { isMobile } from "@/utils/Mobile";
export default { export default {
components: { ServerTemplate, draggable }, components: { ServerTemplate, draggable },
@ -61,12 +82,12 @@ export default {
return { return {
avatarDomain: config.domain + "/avatars", avatarDomain: config.domain + "/avatars",
toolTipShown: false, toolTipShown: false,
toolTipTopPosition: 0, toolTipLeftPosition: 0,
toolTipServerID: null, toolTipServerID: null,
toolTipLocalName: null, toolTipLocalName: null,
mobile: isMobile(), mobile: isMobile(),
drag: false, drag: false
}; };
}, },
methods: { methods: {
@ -78,7 +99,7 @@ export default {
onStart() { onStart() {
this.toolTipShown = false; this.toolTipShown = false;
this.drag = true; this.drag = true;
this.$store.dispatch("setAllPopout", {show: false}); this.$store.dispatch("setAllPopout", { show: false });
}, },
dismissNotification(channelID) { dismissNotification(channelID) {
const notifications = this.$store.getters.notifications.find(function(e) { const notifications = this.$store.getters.notifications.find(function(e) {
@ -144,26 +165,22 @@ export default {
}); });
}, },
localToolTipEvent(name, event) { localToolTipEvent(name, event) {
const rect = event.target.getBoundingClientRect();
this.toolTipLocalName = name; 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; this.toolTipShown = true;
this.$nextTick(() => {
const width = window.innerWidth;
const tooltipWidth = this.$refs.toolTip.clientWidth;
const rect = event.target.getBoundingClientRect();
this.toolTipLeftPosition = rect.left - tooltipWidth / 2 + 25;
});
}, },
mouseLeaveEvent() { mouseLeaveEvent() {
this.toolTipShown = false; this.toolTipShown = false;
this.toolTipServerID = null; this.toolTipServerID = null;
this.toolTipLocalName = null; this.toolTipLocalName = null;
}, },
getTopHeight() {
return window.innerHeight - this.$refs["navigation"].offsetHeight;
},
addServer() { addServer() {
this.$store.dispatch("setPopoutVisibility", { this.$store.dispatch("setPopoutVisibility", {
name: "addServer", name: "addServer",
@ -197,13 +214,13 @@ export default {
get() { get() {
const data = this.servers; const data = this.servers;
return Object.keys(data) return Object.keys(data)
.map(key => { .map(key => {
return data[key]; return data[key];
}) })
.reverse(); .reverse();
}, },
set(value) { set(value) {
const reversedServers = value.reverse() const reversedServers = value.reverse();
// convert array to json // convert array to json
const json = {}; const json = {};
for (let index = 0; index < reversedServers.length; index++) { for (let index = 0; index < reversedServers.length; index++) {
@ -257,19 +274,11 @@ export default {
}); });
return result.find(friend => friend.status === 1); return result.find(friend => friend.status === 1);
} }
},
mounted() {
bus.$on("server-tool-tip", this.serverToolTipEvent);
},
destroyed() {
bus.$off("server-tool-tip", this.serverToolTipEvent);
} }
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.navigation { .navigation {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -314,11 +323,10 @@ export default {
background: #093b4b; background: #093b4b;
} }
&.selected { &.selected {
background: #072C38; background: #072c38;
} }
} }
.notifyAnimation:before { .notifyAnimation:before {
content: "!"; content: "!";
color: white; color: white;
@ -366,7 +374,7 @@ export default {
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
left: 60px; top: 60px;
z-index: 99999; z-index: 99999;
user-select: none; user-select: none;
cursor: default; cursor: default;

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

@ -81,6 +81,7 @@ export default {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 300px; width: 300px;
max-width: calc(100% - 60px);
height: 100%; height: 100%;
background: rgba(0, 0, 0, 0.14); background: rgba(0, 0, 0, 0.14);
} }

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

@ -145,6 +145,7 @@ export default {
methods: { methods: {
messageColorChange(e) { messageColorChange(e) {
const hexColor = e.target.value; const hexColor = e.target.value;
e.target.value = ""
this.customColor = hexColor; this.customColor = hexColor;
}, },
addFormat(type, customEnding, customPos) { addFormat(type, customEnding, customPos) {
@ -857,11 +858,11 @@ export default {
.back-to-bottom-button { .back-to-bottom-button {
&:hover { &:hover {
background: #748b8e; background: rgba(0, 0, 0, 0.90);
box-shadow: 0px 0px 15px 0px #0000008a;
} }
transition: 0.2s; transition: 0.2s;
background: #516e72; background: rgba(0, 0, 0, 0.80);
border-radius: 100px;
color: white; color: white;
position: absolute; position: absolute;
bottom: 15px; bottom: 15px;
@ -871,7 +872,7 @@ export default {
display: flex; display: flex;
justify-content: center; justify-content: center;
flex-shrink: 0; flex-shrink: 0;
box-shadow: 0px 0px 7px 0px #0000008a; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.20);
align-content: center; align-content: center;
align-items: center; align-items: center;
padding-left: 10px; padding-left: 10px;
@ -935,6 +936,7 @@ export default {
background: rgb(231, 231, 231); background: rgb(231, 231, 231);
flex-shrink: 0; flex-shrink: 0;
cursor: pointer; cursor: pointer;
border-radius: 3px;
} }
.reset-button { .reset-button {
color: #a5bec4; color: #a5bec4;

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

@ -273,7 +273,7 @@ export default {
<style scoped lang="scss"> <style scoped lang="scss">
$self-message-color: #236b7f; $self-message-color: #26778a;
$message-color: #053746; $message-color: #053746;
.container { .container {

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

@ -9,7 +9,7 @@
<div class="container" @mouseleave="mouseLeaveEvent"> <div class="container" @mouseleave="mouseLeaveEvent">
<div class="scrollable"> <div class="scrollable">
<div class="server-items" v-if="currentTab === 2"> <div class="server-items">
<draggable v-model="serversArr" :animation="200" :delay="mobile ? 400 : 0" ghost-class="ghost" @end="onEnd" @start="onStart"> <draggable v-model="serversArr" :animation="200" :delay="mobile ? 400 : 0" ghost-class="ghost" @end="onEnd" @start="onStart">
<transition-group type="transition" :name="!drag ? 'flip-list' : null"> <transition-group type="transition" :name="!drag ? 'flip-list' : null">
<server-template <server-template
@ -27,13 +27,11 @@
</div> </div>
<div <div
class="item material-icons" class="item material-icons"
v-if="currentTab === 1"
@click="addFriend" @click="addFriend"
@mouseenter="localToolTipEvent('Add Friend', $event)" @mouseenter="localToolTipEvent('Add Friend', $event)"
>person_add</div> >person_add</div>
<div <div
class="item material-icons" class="item material-icons"
v-if="currentTab === 2"
@click="addServer" @click="addServer"
@mouseenter="localToolTipEvent('Add Server', $event)" @mouseenter="localToolTipEvent('Add Server', $event)"
>add</div> >add</div>
@ -83,6 +81,7 @@ export default {
} }
}, },
openServer(serverID) { openServer(serverID) {
this.switchTab(2);
const server = this.servers[serverID]; const server = this.servers[serverID];
const lastSelectedChannel = JSON.parse( const lastSelectedChannel = JSON.parse(
localStorage.getItem("selectedChannels") || "{}" localStorage.getItem("selectedChannels") || "{}"
@ -146,7 +145,7 @@ export default {
if (this.drag) return; if (this.drag) return;
this.toolTipLocalName = null; this.toolTipLocalName = null;
this.toolTipServerID = serverID; this.toolTipServerID = serverID;
this.toolTipTopPosition = top - this.getTopHeight() + 16; this.toolTipTopPosition = top - this.getTopHeight() + 20;
this.toolTipShown = true; this.toolTipShown = true;
}, },
mouseLeaveEvent() { mouseLeaveEvent() {
@ -324,8 +323,8 @@ export default {
color: white; color: white;
font-size: 30px; font-size: 30px;
align-self: center; align-self: center;
width: 60px; width: 70px;
height: 60px; height: 70px;
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
opacity: 0.8; opacity: 0.8;
@ -398,10 +397,16 @@ export default {
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
left: 60px; left: 70px;
z-index: 99999; z-index: 99999;
user-select: none; user-select: none;
cursor: default; cursor: default;
transition: 0.2s; transition: 0.2s;
} }
@media (max-width: 600px) {
.navigation{
background: linear-gradient(#136A8A, #00B4DB);
}
}
</style> </style>

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

@ -121,14 +121,11 @@ export default {
.left-panel { .left-panel {
height: 100%; height: 100%;
width: 340px; width: 340px;
max-width: 100%; max-width: calc(100% - 60px);
flex-shrink: 0; flex-shrink: 0;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
z-index: 1; z-index: 1;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
} }
.seperater { .seperater {
@ -217,4 +214,11 @@ export default {
background: rgba(0, 0, 0, 0.322); background: rgba(0, 0, 0, 0.322);
} }
} }
@media (max-width: 600px) {
.right{
border-radius: 0;
}
}
</style> </style>

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

@ -86,8 +86,8 @@ export default {
z-index: 1; z-index: 1;
display: flex; display: flex;
align-self: center; align-self: center;
width: 60px; width: 70px;
height: 60px; height: 70px;
flex-shrink: 0; flex-shrink: 0;
justify-content: center; justify-content: center;
align-content: center; align-content: center;
@ -95,11 +95,23 @@ export default {
user-select: none; user-select: none;
transition: background 0.2s; transition: background 0.2s;
cursor: pointer; cursor: pointer;
&:hover { &:hover::before {
background: #074447; content: "";
position: absolute;
top: 15px;
bottom: 15px;
left: 0;
width: 3px;
background: #ffffff5e;
} }
&.selected { &.selected::before {
background: #042a2b; content: "";
position: absolute;
top: 10px;
bottom: 10px;
left: 0;
width: 3px;
background: #ffffffc5;
} }
} }
.notifyAnimation:before { .notifyAnimation:before {

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

@ -1,5 +1,5 @@
<template> <template>
<div class="direct-message-tab"> <div class="direct-message-tab" :class="{darken: showLeftPanel}">
<transition name="slidein"> <transition name="slidein">
<friends-list <friends-list
v-show="$mq === 'mobile' && showLeftPanel || ($mq !== 'mobile')" v-show="$mq === 'mobile' && showLeftPanel || ($mq !== 'mobile')"
@ -24,7 +24,7 @@ export default {
}, },
data() { data() {
return { return {
showLeftPanel: false showLeftPanel: true
}; };
}, },
mounted() { mounted() {
@ -62,14 +62,24 @@ export default {
} }
.slidein-enter, .slidein-leave-to /* .fade-leave-active below version 2.1.8 */ { .slidein-enter, .slidein-leave-to /* .fade-leave-active below version 2.1.8 */ {
/* margin-left: -300px; */ /* margin-left: -300px; */
transform: translateX(-300px); transform: translateX(-340px);
} }
@media (max-width: 600px) { @media (max-width: 600px) {
.left-panel { .left-panel {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
height: calc(100% - 50px);
z-index: 2; z-index: 2;
background: rgba(19, 107, 139, 0.9);
}
.darken::after {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 1;
background: rgba(0, 0, 0, 0.4);
} }
} }
</style> </style>

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

@ -1,5 +1,5 @@
<template> <template>
<div class="explore-tab"> <div class="explore-tab" :class="{darken: showLeftPanel}">
<transition name="slidein"> <transition name="slidein">
<div <div
class="left-panel" class="left-panel"
@ -8,6 +8,7 @@
> >
<navigation /> <navigation />
<div class="content"> <div class="content">
<MyMiniInformation />
<div class="header"> <div class="header">
<div class="icon"> <div class="icon">
<i class="material-icons">explore</i> <i class="material-icons">explore</i>
@ -73,8 +74,9 @@ import { bus } from "@/main";
import Servers from "./Explore/servers"; import Servers from "./Explore/servers";
import ServerService from "@/services/ServerService"; import ServerService from "@/services/ServerService";
import Navigation from "@/components/app/Navigation"; import Navigation from "@/components/app/Navigation";
import MyMiniInformation from "@/components/app/MyMiniInformation.vue";
export default { export default {
components: { Servers, Navigation }, components: { Servers, Navigation, MyMiniInformation },
data() { data() {
return { return {
showLeftPanel: false, showLeftPanel: false,
@ -142,17 +144,18 @@ export default {
.left-panel { .left-panel {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
width: 300px; width: 340px;
max-width: calc(100% - 60px);
flex-shrink: 0; flex-shrink: 0;
z-index: 2; z-index: 2;
background-image: url("../../../assets/leftPanelBackground.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
.content { .content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100%; height: 100%;
background: rgba(0, 0, 0, 0.14);
border-top-left-radius: 10px;
overflow: hidden;
} }
.items { .items {
user-select: none; user-select: none;
@ -169,20 +172,22 @@ export default {
align-content: center; align-content: center;
align-items: center; align-items: center;
padding: 10px; padding: 10px;
margin: 5px;
border-radius: 4px;
cursor: pointer; cursor: pointer;
transition: 0.3s; transition: 0.3s;
&:hover { &:hover {
background: #08616b; background: #053c4c;
} }
&.selected { &.selected {
background: #064c55; background: #053240;
} }
} }
} }
.header { .header {
display: flex; display: flex;
height: 100px; height: 100px;
background: #086974; background: rgba(0, 0, 0, 0.3);
user-select: none; user-select: none;
flex-shrink: 0; flex-shrink: 0;
.icon { .icon {
@ -296,8 +301,9 @@ export default {
.right-panel { .right-panel {
.header { .header {
background: rgba(0, 0, 0, 0.448); background: #063443;
padding: 10px; padding-left: 10px;
height: 64px;
display: flex; display: flex;
align-items: center; align-items: center;
align-content: center; align-content: center;
@ -327,7 +333,7 @@ export default {
} }
.slidein-enter, .slidein-leave-to /* .fade-leave-active below version 2.1.8 */ { .slidein-enter, .slidein-leave-to /* .fade-leave-active below version 2.1.8 */ {
/* margin-left: -300px; */ /* margin-left: -300px; */
transform: translateX(-300px); transform: translateX(-340px);
} }
@media (max-width: 600px) { @media (max-width: 600px) {
@ -337,8 +343,19 @@ export default {
.left-panel { .left-panel {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
height: calc(100% - 44px);
z-index: 2; z-index: 2;
background: rgba(19, 107, 139, 0.9);
height: 100%;
}
.darken::after {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 1;
background: rgba(0, 0, 0, 0.4);
} }
} }
</style> </style>

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

@ -2,7 +2,7 @@
<div class="search-header"> <div class="search-header">
<div class="filter-area"> <div class="filter-area">
<div class="filter"> <div class="filter">
<div class="title">Filter:</div> <div class="title">Filter</div>
<div class="filter-item"> <div class="filter-item">
<div <div
class="item" class="item"
@ -14,7 +14,7 @@
</div> </div>
</div> </div>
<div class="filter"> <div class="filter">
<div class="title">Sort By:</div> <div class="title">Sort By</div>
<div class="filter-item"> <div class="filter-item">
<div <div
class="item" class="item"
@ -79,9 +79,9 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.search-header { .search-header {
display: flex; display: flex;
background: #0a1d20; background: #073847;
width: 100%; width: 100%;
height: 70px; height: 100px;
flex-shrink: 0; flex-shrink: 0;
} }
.search-area { .search-area {
@ -113,11 +113,12 @@ input {
flex-direction: column; flex-direction: column;
flex-wrap: wrap; flex-wrap: wrap;
height: 57px; height: 57px;
margin-top: 5px;
} }
.title { .title {
font-size: 17px; font-size: 19px;
color: white; color: white;
border-bottom: solid 1px rgba(255, 255, 255, 0.575); margin-top: 10px;
padding-left: 2px; padding-left: 2px;
padding-right: 5px; padding-right: 5px;
padding-bottom: 2px; padding-bottom: 2px;
@ -127,6 +128,7 @@ input {
color: white; color: white;
opacity: 0.5; opacity: 0.5;
cursor: pointer; cursor: pointer;
font-size: 15px;
margin: 2px; margin: 2px;
transition: 0.3s; transition: 0.3s;
&.selected { &.selected {

33
src/components/app/Tabs/Explore/serverTemplate.vue
View file

@ -83,9 +83,10 @@ export default {
position: relative; position: relative;
width: 250px; width: 250px;
height: 300px; height: 300px;
background: rgba(0, 0, 0, 0.479); background: #024253;
opacity: 0.9; opacity: 0.9;
margin: 5px; margin: 5px;
border-radius: 4px;
flex-shrink: 0; flex-shrink: 0;
transition: 0.3s; transition: 0.3s;
display: flex; display: flex;
@ -157,7 +158,7 @@ export default {
.bottom { .bottom {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background: rgba(0, 0, 0, 0.541); background: #04333F;
flex: 1; flex: 1;
height: 100%; height: 100%;
flex-shrink: 0; flex-shrink: 0;
@ -178,39 +179,37 @@ export default {
display: flex; display: flex;
width: 100%; width: 100%;
flex-direction: row; flex-direction: row;
margin-bottom: 10px;
} }
.member-count { .member-count {
display: flex; display: flex;
align-items: center; align-items: center;
align-content: center; align-content: center;
padding-left: 5px;
padding-right: 5px;
margin-left: 10px; margin-left: 10px;
margin-top: 0px; margin-top: 0px;
width: 100%; border-radius: 4px;
margin-right: 10px;
flex: 1;
background: #022730;
.material-icons { .material-icons {
margin-right: 5px; margin-right: 5px;
} }
} }
.button { .button {
display: flex; display: flex;
align-content: center;
align-items: center; align-items: center;
flex-direction: column;
justify-content: center; justify-content: center;
flex-shrink: 0; width: 100%;
background: rgba(40, 140, 255, 0.8); height: 40px;
align-self: flex-end; border-radius: 4px;
flex-shrink: 0; background: rgba(0, 179, 219, 0.8);
margin: auto; transition: 0.2s;
margin-right: 10px; margin-right: 10px;
margin-left: 0;
margin-bottom: 10px;
padding: 7px;
transition: 0.3s;
width: 80px;
height: 20px;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background: rgb(40, 140, 255); background: #00B4DB;
} }
&.selected { &.selected {
background: grey; background: grey;

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

@ -97,7 +97,7 @@ export default {
} }
.heading { .heading {
padding: 10px; padding: 10px;
background: #15282a; background: #042f3a;
margin-bottom: 10px; margin-bottom: 10px;
} }
.information { .information {
@ -108,7 +108,7 @@ export default {
background: rgba(38, 139, 255, 0.87); background: rgba(38, 139, 255, 0.87);
} }
.change-log { .change-log {
background: #294c51; background: #054151;
overflow-y: auto; overflow-y: auto;
max-width: 700px; max-width: 700px;
width: 100%; width: 100%;

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

@ -1,5 +1,5 @@
<template> <template>
<div class="direct-message-tab"> <div class="direct-message-tab" :class="{darken: (showLeftPanel || showMembersPanel) }">
<transition name="slide-left"> <transition name="slide-left">
<server-list <server-list
v-if="$mq === 'mobile' && showLeftPanel || ($mq !== 'mobile')" v-if="$mq === 'mobile' && showLeftPanel || ($mq !== 'mobile')"
@ -85,7 +85,7 @@ export default {
transition: 0.5s; transition: 0.5s;
} }
.slide-left-enter, .slide-left-leave-to /* .fade-leave-active below version 2.1.8 */ { .slide-left-enter, .slide-left-leave-to /* .fade-leave-active below version 2.1.8 */ {
transform: translateX(-300px); transform: translateX(-340px);
} }
.slide-right-enter-active, .slide-right-enter-active,
@ -101,8 +101,8 @@ export default {
position: absolute; position: absolute;
right: 0; right: 0;
bottom: 0; bottom: 0;
height: calc(100% - 50px); z-index: 2;
z-index: 1; background: rgba(19, 107, 139, 0.9);
} }
} }
@ -110,8 +110,18 @@ export default {
.left-panel { .left-panel {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
height: calc(100% - 50px);
z-index: 2; z-index: 2;
background: rgba(19, 107, 139, 0.9);
}
.darken::after {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 1;
background: rgba(0, 0, 0, 0.4);
} }
} }
</style> </style>

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

@ -130,6 +130,8 @@ export default {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
cursor: pointer; cursor: pointer;
margin: 5px;
border-radius: 4px;
} }
.tree { .tree {
padding-left: 22px; padding-left: 22px;
@ -156,10 +158,10 @@ export default {
} }
.friend:hover { .friend:hover {
background: #08616b; background: #053c4c;
} }
.friend.selected { .friend.selected {
background: #064c55; background: #053240;
} }
.profile-picture { .profile-picture {
height: 30px; height: 30px;

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

@ -67,9 +67,11 @@ export default {
} }
.tab { .tab {
transition: 0.3s; transition: 0.3s;
margin: 4px;
border-radius: 4px;
} }
.tab:hover { .tab:hover {
background: #08616b; background: #053240;
} }
</style> </style>

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

@ -83,9 +83,11 @@ export default {
} }
.tab { .tab {
transition: 0.3s; transition: 0.3s;
margin: 4px;
border-radius: 4px;
} }
.tab:hover { .tab:hover {
background: #08616b; background: #053240;
} }
</style> </style>

2
src/utils/changelog.js
View file

@ -14,7 +14,7 @@ const config = [
title: "Format buttons and color text!", title: "Format buttons and color text!",
shortTitle: "", shortTitle: "",
date: "18/11/2019", date: "18/11/2019",
headColor: "#0c7b7f", headColor: "#007792",
new: [ new: [
"Enter will now create new lines on mobile.", "Enter will now create new lines on mobile.",
"You can now easily format your messages using the format buttons above.", "You can now easily format your messages using the format buttons above.",

2
src/utils/markdown-rules/codeblock.js
View file

@ -18,7 +18,7 @@ export default (order) => { return {
const className = node.lang ? `language-${node.lang}` : undefined const className = node.lang ? `language-${node.lang}` : undefined
let content = SimpleMarkdown.sanitizeText(node.content) let content = SimpleMarkdown.sanitizeText(node.content)
if(node.lang) { if(node.lang && hljs.getLanguage(node.lang)) {
content = hljs.highlight(node.lang, node.content, true).value content = hljs.highlight(node.lang, node.content, true).value
} }

6
src/utils/messageFormatter.js
View file

@ -42,6 +42,12 @@ const rules = {
text: Object.assign({}, SimpleMarkdown.defaultRules.text, { text: Object.assign({}, SimpleMarkdown.defaultRules.text, {
order: order++, order: order++,
match: function(source) {
// copied and modified from simple-markdown.js
return /^[\s\S][0-9A-Za-z\u00c0-\uffff]*\s?/.exec(source);
},
parse: SimpleMarkdown.defaultRules.text.parse,
html: SimpleMarkdown.defaultRules.text.html,
}), }),
}; };