mirror of
https://github.com/danbulant/Nertivia-Client
synced 2026-06-15 12:31:15 +00:00
added fancy animations and bug fixes
This commit is contained in:
supertiger1234
parent
0b416612b3
commit
d951b7fc81
4 changed files with 89 additions and 60 deletions
|
|
@ -1,7 +1,5 @@
|
|||
<template>
|
||||
<div class="friend-left-panel">
|
||||
<!-- <navigation /> -->
|
||||
<MyMiniInformation />
|
||||
<div class="tabs">
|
||||
<div
|
||||
class="tab"
|
||||
|
|
@ -20,14 +18,11 @@
|
|||
Recents
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="currentTab === 0" class="list">
|
||||
<!-- <pending-friends />
|
||||
<online-friends />
|
||||
<offline-friends /> -->
|
||||
<friends-tab />
|
||||
</div>
|
||||
<div v-else class="list">
|
||||
<recent-friends-tab />
|
||||
<div class="list">
|
||||
<transition name="fade" mode="out-in">
|
||||
<friends-tab v-if="currentTab === 0" />
|
||||
<recent-friends-tab v-else />
|
||||
</transition>
|
||||
</div>
|
||||
<div
|
||||
class="button"
|
||||
|
|
@ -41,19 +36,12 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import MyMiniInformation from "../../components/app/MyMiniInformation.vue";
|
||||
// import PendingFriends from "./relationships/PendingFriends.vue";
|
||||
// import OnlineFriends from "./relationships/OnlineFriends.vue";
|
||||
// import OfflineFriends from "./relationships/OfflineFriends.vue";
|
||||
import RecentFriendsTab from "./relationships/RecentFriendsTab.vue";
|
||||
import FriendsTab from "./relationships/FriendsTab.vue";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
MyMiniInformation,
|
||||
// PendingFriends,
|
||||
// OnlineFriends,
|
||||
// OfflineFriends,
|
||||
|
||||
FriendsTab,
|
||||
RecentFriendsTab
|
||||
},
|
||||
|
|
@ -127,9 +115,17 @@ export default {
|
|||
z-index: 1;
|
||||
flex: 1;
|
||||
background: rgba(0, 0, 0, 0.14);
|
||||
border-top-left-radius: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.list {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
|
|
@ -250,10 +246,4 @@ export default {
|
|||
.notify {
|
||||
background: #ee3e34;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.friend-left-panel {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,5 @@
|
|||
<template>
|
||||
<div class="server-left-panel">
|
||||
<!-- <navigation /> -->
|
||||
<MyMiniInformation />
|
||||
<div
|
||||
class="server-banner"
|
||||
@mouseenter="bannerHover = true"
|
||||
|
|
@ -28,18 +26,20 @@
|
|||
</div>
|
||||
<div class="channels-list">
|
||||
<channels-list v-if="selectedServerID" :server-i-d="selectedServerID" />
|
||||
<div v-else class="not-selected">
|
||||
<div class="material-icons">dns</div>
|
||||
<div>Select a server</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MyMiniInformation from "@/components/app/MyMiniInformation.vue";
|
||||
import ChannelsList from "@/components/app/ServerTemplate/ChannelsList.vue";
|
||||
import config from "@/config";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
MyMiniInformation,
|
||||
ChannelsList
|
||||
},
|
||||
data() {
|
||||
|
|
@ -126,7 +126,6 @@ export default {
|
|||
flex: 1;
|
||||
background: rgba(0, 0, 0, 0.14);
|
||||
overflow: hidden;
|
||||
border-top-left-radius: 10px;
|
||||
}
|
||||
|
||||
.channels-list {
|
||||
|
|
@ -190,6 +189,22 @@ export default {
|
|||
width: 100%;
|
||||
}
|
||||
}
|
||||
.not-selected {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-size: 20px;
|
||||
.material-icons {
|
||||
font-size: 35px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
}
|
||||
.options-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -206,10 +221,4 @@ export default {
|
|||
background: rgba(0, 0, 0, 0.322);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.server-left-panel {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -10,8 +10,13 @@
|
|||
v-click-outside="hideLeftPanel"
|
||||
>
|
||||
<navigation />
|
||||
<server-list v-if="currentTab === 2" />
|
||||
<friends-list v-if="currentTab === 1" />
|
||||
<div class="wrapper">
|
||||
<MyMiniInformation />
|
||||
<transition name="fade" mode="out-in">
|
||||
<server-list :key="selectedServerID" v-if="currentTab === 2" />
|
||||
<friends-list v-if="currentTab === 1" />
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
<message-panel :type="currentTab === 1 ? 0 : currentTab === 2 ? 1 : null" />
|
||||
|
|
@ -35,6 +40,7 @@
|
|||
import { bus } from "@/main";
|
||||
import MessagePanel from "@/components/app/MessagePanel.vue";
|
||||
import Navigation from "@/components/app/Navigation.vue";
|
||||
import MyMiniInformation from "@/components/app/MyMiniInformation.vue";
|
||||
|
||||
const FriendsList = () => import("@/components/app/FriendsList.vue");
|
||||
const MembersList = () => import("@/components/app/MembersList.vue");
|
||||
|
|
@ -46,7 +52,8 @@ export default {
|
|||
FriendsList,
|
||||
MessagePanel,
|
||||
MembersList,
|
||||
Navigation
|
||||
Navigation,
|
||||
MyMiniInformation
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -108,6 +115,20 @@ export default {
|
|||
flex-direction: row;
|
||||
z-index: 1;
|
||||
}
|
||||
.wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
border-top-left-radius: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
|
||||
.slide-left-enter-active,
|
||||
.slide-left-leave-active {
|
||||
|
|
@ -142,6 +163,9 @@ export default {
|
|||
z-index: 2;
|
||||
background: linear-gradient(to bottom, #00477e 0, #016dc0);
|
||||
}
|
||||
.wrapper {
|
||||
border-radius: 0;
|
||||
}
|
||||
.darken::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
|
|
|
|||
|
|
@ -136,7 +136,7 @@ export default {
|
|||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<style scoped lang="scss">
|
||||
.username {
|
||||
width: 150px;
|
||||
white-space: nowrap;
|
||||
|
|
@ -150,7 +150,7 @@ export default {
|
|||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
.wrapper {
|
||||
.friend .wrapper {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
display: flex;
|
||||
height: 45px;
|
||||
|
|
@ -163,16 +163,31 @@ export default {
|
|||
padding-left: 10px;
|
||||
margin-left: 3px;
|
||||
margin-right: 3px;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
color: white;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
color: white;
|
||||
}
|
||||
|
||||
&:hover .status-name {
|
||||
opacity: 1;
|
||||
height: 13px;
|
||||
}
|
||||
|
||||
&:hover .close-button {
|
||||
display: flex;
|
||||
}
|
||||
&:hover .status {
|
||||
opacity: 1;
|
||||
bottom: -4px;
|
||||
}
|
||||
}
|
||||
|
||||
.wrapper:hover {
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
color: white;
|
||||
}
|
||||
.wrapper.selected {
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
color: white;
|
||||
}
|
||||
.profile-picture {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
|
|
@ -228,10 +243,7 @@ export default {
|
|||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.wrapper:hover .status {
|
||||
opacity: 1;
|
||||
bottom: -4px;
|
||||
}
|
||||
|
||||
|
||||
.status-name {
|
||||
opacity: 0;
|
||||
|
|
@ -240,10 +252,6 @@ export default {
|
|||
color: #b7cbce;
|
||||
height: 0;
|
||||
}
|
||||
.wrapper:hover .status-name {
|
||||
opacity: 1;
|
||||
height: 13px;
|
||||
}
|
||||
|
||||
.close-button {
|
||||
flex-shrink: 0;
|
||||
|
|
@ -257,7 +265,5 @@ export default {
|
|||
.close-button:hover {
|
||||
color: white;
|
||||
}
|
||||
.wrapper:hover .close-button {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in a new issue