fixed some bugs with members list

This commit is contained in:
supertiger1234 2020-03-04 14:34:58 +00:00
parent fc19d47e42
commit 3d53a78d79
2 changed files with 43 additions and 31 deletions

View file

@ -15,6 +15,7 @@
selectedChannelID ? channelName : `Welcome back, ${user.username}!` selectedChannelID ? channelName : `Welcome back, ${user.username}!`
" "
/> />
<transition name="fade" mode="out-in">
<div class="loading" v-if="selectedChannelID && !selectedChannelMessages"> <div class="loading" v-if="selectedChannelID && !selectedChannelMessages">
<spinner /> <spinner />
</div> </div>
@ -22,6 +23,7 @@
v-else-if="selectedChannelID && selectedChannelMessages" v-else-if="selectedChannelID && selectedChannelMessages"
:key="selectedChannelID" :key="selectedChannelID"
/> />
<div class="no-channel-selected" v-if="!selectedChannelID"> <div class="no-channel-selected" v-if="!selectedChannelID">
<div class="material-icons"> <div class="material-icons">
{{ type === 0 ? "forum" : type === 1 ? "dns" : "question" }} {{ type === 0 ? "forum" : type === 1 ? "dns" : "question" }}
@ -36,6 +38,7 @@
}} }}
</div> </div>
</div> </div>
</transition>
<div class="chat-input-area" v-if="selectedChannelID"> <div class="chat-input-area" v-if="selectedChannelID">
<div class="typing-outer"> <div class="typing-outer">
<typing-status <typing-status
@ -1143,6 +1146,13 @@ export default {
} }
} }
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.1s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
}
.emojis-button { .emojis-button {
font-size: 20px; font-size: 20px;
color: #a5bec4; color: #a5bec4;

View file

@ -9,7 +9,6 @@
v-show="($mq === 'mobile' && showLeftPanel) || $mq !== 'mobile'" v-show="($mq === 'mobile' && showLeftPanel) || $mq !== 'mobile'"
v-click-outside="hideLeftPanel" v-click-outside="hideLeftPanel"
> >
<div class="inner"> <div class="inner">
<navigation /> <navigation />
<div class="wrapper"> <div class="wrapper">
@ -25,6 +24,7 @@
</transition> </transition>
<message-panel :type="currentTab === 1 ? 0 : currentTab === 2 ? 1 : null" /> <message-panel :type="currentTab === 1 ? 0 : currentTab === 2 ? 1 : null" />
<transition :name="$mq !== 'desktop' ? 'slide-right' : 'none'"> <transition :name="$mq !== 'desktop' ? 'slide-right' : 'none'">
<transition name="fade" mode="out-in">
<members-list <members-list
v-if=" v-if="
selectedServerID && selectedServerID &&
@ -33,10 +33,12 @@
showMembersPanel) || showMembersPanel) ||
$mq === 'desktop') $mq === 'desktop')
" "
:key="selectedServerID"
v-click-outside="hideMembersPanel" v-click-outside="hideMembersPanel"
class="members-panel" class="members-panel"
/> />
</transition> </transition>
</transition>
</div> </div>
</template> </template>