mirror of
https://github.com/danbulant/Nertivia-Client
synced 2026-06-14 20:11:10 +00:00
a lot of changes and redesigns
This commit is contained in:
supertiger1234
parent
f525c2eea2
commit
3711cdf647
20 changed files with 245 additions and 159 deletions
|
|
@ -2,6 +2,7 @@
|
|||
<div class="left-panel">
|
||||
<navigation />
|
||||
<div class="content">
|
||||
<MyMiniInformation />
|
||||
<div class="tabs">
|
||||
<div
|
||||
class="tab"
|
||||
|
|
@ -22,8 +23,6 @@
|
|||
<div v-else class="list">
|
||||
<recent-friends />
|
||||
</div>
|
||||
<div class="seperater" />
|
||||
<MyMiniInformation />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -94,15 +93,12 @@ export default {
|
|||
<style scoped>
|
||||
.left-panel {
|
||||
height: 100%;
|
||||
width: 300px;
|
||||
width: 340px;
|
||||
max-width: calc(100% - 60px);
|
||||
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;
|
||||
|
|
@ -110,6 +106,9 @@ export default {
|
|||
flex-shrink: 0;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
background: rgba(0, 0, 0, 0.14);
|
||||
border-top-left-radius: 10px;
|
||||
|
||||
}
|
||||
.list {
|
||||
flex: 1;
|
||||
|
|
@ -136,7 +135,6 @@ export default {
|
|||
height: 50px;
|
||||
transition: 0.2s;
|
||||
cursor: pointer;
|
||||
background: #075e64;
|
||||
position: relative;
|
||||
}
|
||||
.tab .material-icons {
|
||||
|
|
@ -220,4 +218,10 @@ export default {
|
|||
background: rgba(121, 3, 3, 0.541);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.content{
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -3,57 +3,78 @@
|
|||
<div
|
||||
class="tool-tip"
|
||||
ref="toolTip"
|
||||
:style="{top: toolTipTopPosition + 'px'}"
|
||||
:style="{ left: toolTipLeftPosition + '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>
|
||||
>
|
||||
{{ 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"
|
||||
@mouseleave="mouseLeaveEvent"
|
||||
@mouseenter="localToolTipEvent('Settings', $event)"
|
||||
>
|
||||
settings
|
||||
</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 settingsService from "@/services/settingsService";
|
||||
import ServerTemplate from "@/components/app/ServerTemplate/ServerTemplate";
|
||||
import draggable from 'vuedraggable'
|
||||
import draggable from "vuedraggable";
|
||||
import { isMobile } from "@/utils/Mobile";
|
||||
export default {
|
||||
components: { ServerTemplate, draggable },
|
||||
|
|
@ -61,12 +82,12 @@ export default {
|
|||
return {
|
||||
avatarDomain: config.domain + "/avatars",
|
||||
toolTipShown: false,
|
||||
toolTipTopPosition: 0,
|
||||
toolTipLeftPosition: 0,
|
||||
toolTipServerID: null,
|
||||
toolTipLocalName: null,
|
||||
mobile: isMobile(),
|
||||
|
||||
drag: false,
|
||||
drag: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -78,7 +99,7 @@ export default {
|
|||
onStart() {
|
||||
this.toolTipShown = false;
|
||||
this.drag = true;
|
||||
this.$store.dispatch("setAllPopout", {show: false});
|
||||
this.$store.dispatch("setAllPopout", { show: false });
|
||||
},
|
||||
dismissNotification(channelID) {
|
||||
const notifications = this.$store.getters.notifications.find(function(e) {
|
||||
|
|
@ -144,26 +165,22 @@ export default {
|
|||
});
|
||||
},
|
||||
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;
|
||||
|
||||
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() {
|
||||
this.toolTipShown = false;
|
||||
this.toolTipServerID = null;
|
||||
this.toolTipLocalName = null;
|
||||
},
|
||||
getTopHeight() {
|
||||
return window.innerHeight - this.$refs["navigation"].offsetHeight;
|
||||
},
|
||||
addServer() {
|
||||
this.$store.dispatch("setPopoutVisibility", {
|
||||
name: "addServer",
|
||||
|
|
@ -197,13 +214,13 @@ export default {
|
|||
get() {
|
||||
const data = this.servers;
|
||||
return Object.keys(data)
|
||||
.map(key => {
|
||||
return data[key];
|
||||
})
|
||||
.reverse();
|
||||
.map(key => {
|
||||
return data[key];
|
||||
})
|
||||
.reverse();
|
||||
},
|
||||
set(value) {
|
||||
const reversedServers = value.reverse()
|
||||
const reversedServers = value.reverse();
|
||||
// convert array to json
|
||||
const json = {};
|
||||
for (let index = 0; index < reversedServers.length; index++) {
|
||||
|
|
@ -257,19 +274,11 @@ export default {
|
|||
});
|
||||
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;
|
||||
|
|
@ -314,11 +323,10 @@ export default {
|
|||
background: #093b4b;
|
||||
}
|
||||
&.selected {
|
||||
background: #072C38;
|
||||
background: #072c38;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.notifyAnimation:before {
|
||||
content: "!";
|
||||
color: white;
|
||||
|
|
@ -366,10 +374,10 @@ export default {
|
|||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
left: 60px;
|
||||
top: 60px;
|
||||
z-index: 99999;
|
||||
user-select: none;
|
||||
cursor: default;
|
||||
transition: 0.2s;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -81,6 +81,7 @@ export default {
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 300px;
|
||||
max-width: calc(100% - 60px);
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.14);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -145,6 +145,7 @@ export default {
|
|||
methods: {
|
||||
messageColorChange(e) {
|
||||
const hexColor = e.target.value;
|
||||
e.target.value = ""
|
||||
this.customColor = hexColor;
|
||||
},
|
||||
addFormat(type, customEnding, customPos) {
|
||||
|
|
@ -857,11 +858,11 @@ export default {
|
|||
|
||||
.back-to-bottom-button {
|
||||
&:hover {
|
||||
background: #748b8e;
|
||||
box-shadow: 0px 0px 15px 0px #0000008a;
|
||||
background: rgba(0, 0, 0, 0.90);
|
||||
}
|
||||
transition: 0.2s;
|
||||
background: #516e72;
|
||||
background: rgba(0, 0, 0, 0.80);
|
||||
border-radius: 100px;
|
||||
color: white;
|
||||
position: absolute;
|
||||
bottom: 15px;
|
||||
|
|
@ -871,7 +872,7 @@ export default {
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
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-items: center;
|
||||
padding-left: 10px;
|
||||
|
|
@ -935,6 +936,7 @@ export default {
|
|||
background: rgb(231, 231, 231);
|
||||
flex-shrink: 0;
|
||||
cursor: pointer;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.reset-button {
|
||||
color: #a5bec4;
|
||||
|
|
|
|||
|
|
@ -273,7 +273,7 @@ export default {
|
|||
|
||||
<style scoped lang="scss">
|
||||
|
||||
$self-message-color: #236b7f;
|
||||
$self-message-color: #26778a;
|
||||
$message-color: #053746;
|
||||
|
||||
.container {
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
<div class="container" @mouseleave="mouseLeaveEvent">
|
||||
<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">
|
||||
<transition-group type="transition" :name="!drag ? 'flip-list' : null">
|
||||
<server-template
|
||||
|
|
@ -27,13 +27,11 @@
|
|||
</div>
|
||||
<div
|
||||
class="item material-icons"
|
||||
v-if="currentTab === 1"
|
||||
@click="addFriend"
|
||||
@mouseenter="localToolTipEvent('Add Friend', $event)"
|
||||
>person_add</div>
|
||||
<div
|
||||
class="item material-icons"
|
||||
v-if="currentTab === 2"
|
||||
@click="addServer"
|
||||
@mouseenter="localToolTipEvent('Add Server', $event)"
|
||||
>add</div>
|
||||
|
|
@ -83,6 +81,7 @@ export default {
|
|||
}
|
||||
},
|
||||
openServer(serverID) {
|
||||
this.switchTab(2);
|
||||
const server = this.servers[serverID];
|
||||
const lastSelectedChannel = JSON.parse(
|
||||
localStorage.getItem("selectedChannels") || "{}"
|
||||
|
|
@ -146,7 +145,7 @@ export default {
|
|||
if (this.drag) return;
|
||||
this.toolTipLocalName = null;
|
||||
this.toolTipServerID = serverID;
|
||||
this.toolTipTopPosition = top - this.getTopHeight() + 16;
|
||||
this.toolTipTopPosition = top - this.getTopHeight() + 20;
|
||||
this.toolTipShown = true;
|
||||
},
|
||||
mouseLeaveEvent() {
|
||||
|
|
@ -324,8 +323,8 @@ export default {
|
|||
color: white;
|
||||
font-size: 30px;
|
||||
align-self: center;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
opacity: 0.8;
|
||||
|
|
@ -398,10 +397,16 @@ export default {
|
|||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
left: 60px;
|
||||
left: 70px;
|
||||
z-index: 99999;
|
||||
user-select: none;
|
||||
cursor: default;
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.navigation{
|
||||
background: linear-gradient(#136A8A, #00B4DB);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -121,14 +121,11 @@ export default {
|
|||
.left-panel {
|
||||
height: 100%;
|
||||
width: 340px;
|
||||
max-width: 100%;
|
||||
max-width: calc(100% - 60px);
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
z-index: 1;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.seperater {
|
||||
|
|
@ -217,4 +214,11 @@ export default {
|
|||
background: rgba(0, 0, 0, 0.322);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.right{
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -86,8 +86,8 @@ export default {
|
|||
z-index: 1;
|
||||
display: flex;
|
||||
align-self: center;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
flex-shrink: 0;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
|
|
@ -95,11 +95,23 @@ export default {
|
|||
user-select: none;
|
||||
transition: background 0.2s;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
background: #074447;
|
||||
&:hover::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
bottom: 15px;
|
||||
left: 0;
|
||||
width: 3px;
|
||||
background: #ffffff5e;
|
||||
}
|
||||
&.selected {
|
||||
background: #042a2b;
|
||||
&.selected::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
bottom: 10px;
|
||||
left: 0;
|
||||
width: 3px;
|
||||
background: #ffffffc5;
|
||||
}
|
||||
}
|
||||
.notifyAnimation:before {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="direct-message-tab">
|
||||
<div class="direct-message-tab" :class="{darken: showLeftPanel}">
|
||||
<transition name="slidein">
|
||||
<friends-list
|
||||
v-show="$mq === 'mobile' && showLeftPanel || ($mq !== 'mobile')"
|
||||
|
|
@ -24,7 +24,7 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
showLeftPanel: false
|
||||
showLeftPanel: true
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
|
|
@ -62,14 +62,24 @@ export default {
|
|||
}
|
||||
.slidein-enter, .slidein-leave-to /* .fade-leave-active below version 2.1.8 */ {
|
||||
/* margin-left: -300px; */
|
||||
transform: translateX(-300px);
|
||||
transform: translateX(-340px);
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.left-panel {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
height: calc(100% - 50px);
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="explore-tab">
|
||||
<div class="explore-tab" :class="{darken: showLeftPanel}">
|
||||
<transition name="slidein">
|
||||
<div
|
||||
class="left-panel"
|
||||
|
|
@ -8,6 +8,7 @@
|
|||
>
|
||||
<navigation />
|
||||
<div class="content">
|
||||
<MyMiniInformation />
|
||||
<div class="header">
|
||||
<div class="icon">
|
||||
<i class="material-icons">explore</i>
|
||||
|
|
@ -73,8 +74,9 @@ import { bus } from "@/main";
|
|||
import Servers from "./Explore/servers";
|
||||
import ServerService from "@/services/ServerService";
|
||||
import Navigation from "@/components/app/Navigation";
|
||||
import MyMiniInformation from "@/components/app/MyMiniInformation.vue";
|
||||
export default {
|
||||
components: { Servers, Navigation },
|
||||
components: { Servers, Navigation, MyMiniInformation },
|
||||
data() {
|
||||
return {
|
||||
showLeftPanel: false,
|
||||
|
|
@ -142,17 +144,18 @@ export default {
|
|||
.left-panel {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 300px;
|
||||
width: 340px;
|
||||
max-width: calc(100% - 60px);
|
||||
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;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.14);
|
||||
border-top-left-radius: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.items {
|
||||
user-select: none;
|
||||
|
|
@ -169,20 +172,22 @@ export default {
|
|||
align-content: center;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
margin: 5px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: 0.3s;
|
||||
&:hover {
|
||||
background: #08616b;
|
||||
background: #053c4c;
|
||||
}
|
||||
&.selected {
|
||||
background: #064c55;
|
||||
background: #053240;
|
||||
}
|
||||
}
|
||||
}
|
||||
.header {
|
||||
display: flex;
|
||||
height: 100px;
|
||||
background: #086974;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
user-select: none;
|
||||
flex-shrink: 0;
|
||||
.icon {
|
||||
|
|
@ -296,8 +301,9 @@ export default {
|
|||
|
||||
.right-panel {
|
||||
.header {
|
||||
background: rgba(0, 0, 0, 0.448);
|
||||
padding: 10px;
|
||||
background: #063443;
|
||||
padding-left: 10px;
|
||||
height: 64px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
|
|
@ -327,7 +333,7 @@ export default {
|
|||
}
|
||||
.slidein-enter, .slidein-leave-to /* .fade-leave-active below version 2.1.8 */ {
|
||||
/* margin-left: -300px; */
|
||||
transform: translateX(-300px);
|
||||
transform: translateX(-340px);
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
|
|
@ -337,8 +343,19 @@ export default {
|
|||
.left-panel {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
height: calc(100% - 44px);
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<div class="search-header">
|
||||
<div class="filter-area">
|
||||
<div class="filter">
|
||||
<div class="title">Filter:</div>
|
||||
<div class="title">Filter</div>
|
||||
<div class="filter-item">
|
||||
<div
|
||||
class="item"
|
||||
|
|
@ -14,7 +14,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="filter">
|
||||
<div class="title">Sort By:</div>
|
||||
<div class="title">Sort By</div>
|
||||
<div class="filter-item">
|
||||
<div
|
||||
class="item"
|
||||
|
|
@ -79,9 +79,9 @@ export default {
|
|||
<style lang="scss" scoped>
|
||||
.search-header {
|
||||
display: flex;
|
||||
background: #0a1d20;
|
||||
background: #073847;
|
||||
width: 100%;
|
||||
height: 70px;
|
||||
height: 100px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.search-area {
|
||||
|
|
@ -113,11 +113,12 @@ input {
|
|||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
height: 57px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.title {
|
||||
font-size: 17px;
|
||||
font-size: 19px;
|
||||
color: white;
|
||||
border-bottom: solid 1px rgba(255, 255, 255, 0.575);
|
||||
margin-top: 10px;
|
||||
padding-left: 2px;
|
||||
padding-right: 5px;
|
||||
padding-bottom: 2px;
|
||||
|
|
@ -127,6 +128,7 @@ input {
|
|||
color: white;
|
||||
opacity: 0.5;
|
||||
cursor: pointer;
|
||||
font-size: 15px;
|
||||
margin: 2px;
|
||||
transition: 0.3s;
|
||||
&.selected {
|
||||
|
|
|
|||
|
|
@ -83,9 +83,10 @@ export default {
|
|||
position: relative;
|
||||
width: 250px;
|
||||
height: 300px;
|
||||
background: rgba(0, 0, 0, 0.479);
|
||||
background: #024253;
|
||||
opacity: 0.9;
|
||||
margin: 5px;
|
||||
border-radius: 4px;
|
||||
flex-shrink: 0;
|
||||
transition: 0.3s;
|
||||
display: flex;
|
||||
|
|
@ -157,7 +158,7 @@ export default {
|
|||
.bottom {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: rgba(0, 0, 0, 0.541);
|
||||
background: #04333F;
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
flex-shrink: 0;
|
||||
|
|
@ -178,39 +179,37 @@ export default {
|
|||
display: flex;
|
||||
width: 100%;
|
||||
flex-direction: row;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.member-count {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
margin-left: 10px;
|
||||
margin-top: 0px;
|
||||
width: 100%;
|
||||
border-radius: 4px;
|
||||
margin-right: 10px;
|
||||
flex: 1;
|
||||
background: #022730;
|
||||
.material-icons {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
.button {
|
||||
display: flex;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
background: rgba(40, 140, 255, 0.8);
|
||||
align-self: flex-end;
|
||||
flex-shrink: 0;
|
||||
margin: auto;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
border-radius: 4px;
|
||||
background: rgba(0, 179, 219, 0.8);
|
||||
transition: 0.2s;
|
||||
margin-right: 10px;
|
||||
margin-left: 0;
|
||||
margin-bottom: 10px;
|
||||
padding: 7px;
|
||||
transition: 0.3s;
|
||||
width: 80px;
|
||||
height: 20px;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
background: rgb(40, 140, 255);
|
||||
background: #00B4DB;
|
||||
}
|
||||
&.selected {
|
||||
background: grey;
|
||||
|
|
|
|||
|
|
@ -97,7 +97,7 @@ export default {
|
|||
}
|
||||
.heading {
|
||||
padding: 10px;
|
||||
background: #15282a;
|
||||
background: #042f3a;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.information {
|
||||
|
|
@ -108,7 +108,7 @@ export default {
|
|||
background: rgba(38, 139, 255, 0.87);
|
||||
}
|
||||
.change-log {
|
||||
background: #294c51;
|
||||
background: #054151;
|
||||
overflow-y: auto;
|
||||
max-width: 700px;
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="direct-message-tab">
|
||||
<div class="direct-message-tab" :class="{darken: (showLeftPanel || showMembersPanel) }">
|
||||
<transition name="slide-left">
|
||||
<server-list
|
||||
v-if="$mq === 'mobile' && showLeftPanel || ($mq !== 'mobile')"
|
||||
|
|
@ -85,7 +85,7 @@ 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(-340px);
|
||||
}
|
||||
|
||||
.slide-right-enter-active,
|
||||
|
|
@ -101,8 +101,8 @@ export default {
|
|||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: calc(100% - 50px);
|
||||
z-index: 1;
|
||||
z-index: 2;
|
||||
background: rgba(19, 107, 139, 0.9);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -110,8 +110,18 @@ export default {
|
|||
.left-panel {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
height: calc(100% - 50px);
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -130,6 +130,8 @@ export default {
|
|||
position: relative;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
margin: 5px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.tree {
|
||||
padding-left: 22px;
|
||||
|
|
@ -156,10 +158,10 @@ export default {
|
|||
}
|
||||
|
||||
.friend:hover {
|
||||
background: #08616b;
|
||||
background: #053c4c;
|
||||
}
|
||||
.friend.selected {
|
||||
background: #064c55;
|
||||
background: #053240;
|
||||
}
|
||||
.profile-picture {
|
||||
height: 30px;
|
||||
|
|
|
|||
|
|
@ -67,9 +67,11 @@ export default {
|
|||
}
|
||||
.tab {
|
||||
transition: 0.3s;
|
||||
margin: 4px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.tab:hover {
|
||||
background: #08616b;
|
||||
background: #053240;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
|||
|
|
@ -83,9 +83,11 @@ export default {
|
|||
}
|
||||
.tab {
|
||||
transition: 0.3s;
|
||||
margin: 4px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.tab:hover {
|
||||
background: #08616b;
|
||||
background: #053240;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ const config = [
|
|||
title: "Format buttons and color text!",
|
||||
shortTitle: "",
|
||||
date: "18/11/2019",
|
||||
headColor: "#0c7b7f",
|
||||
headColor: "#007792",
|
||||
new: [
|
||||
"Enter will now create new lines on mobile.",
|
||||
"You can now easily format your messages using the format buttons above.",
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ export default (order) => { return {
|
|||
const className = node.lang ? `language-${node.lang}` : undefined
|
||||
|
||||
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
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -41,7 +41,13 @@ const rules = {
|
|||
}),
|
||||
|
||||
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,
|
||||
}),
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue