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,27 +15,30 @@
selectedChannelID ? channelName : `Welcome back, ${user.username}!` selectedChannelID ? channelName : `Welcome back, ${user.username}!`
" "
/> />
<div class="loading" v-if="selectedChannelID && !selectedChannelMessages"> <transition name="fade" mode="out-in">
<spinner /> <div class="loading" v-if="selectedChannelID && !selectedChannelMessages">
</div> <spinner />
<message-logs
v-else-if="selectedChannelID && selectedChannelMessages"
:key="selectedChannelID"
/>
<div class="no-channel-selected" v-if="!selectedChannelID">
<div class="material-icons">
{{ type === 0 ? "forum" : type === 1 ? "dns" : "question" }}
</div> </div>
<div class="message"> <message-logs
{{ v-else-if="selectedChannelID && selectedChannelMessages"
type === 0 :key="selectedChannelID"
? "Select a person to message!" />
: type === 1
? "Select a server!" <div class="no-channel-selected" v-if="!selectedChannelID">
: "wot" <div class="material-icons">
}} {{ type === 0 ? "forum" : type === 1 ? "dns" : "question" }}
</div>
<div class="message">
{{
type === 0
? "Select a person to message!"
: type === 1
? "Select a server!"
: "wot"
}}
</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,17 +24,20 @@
</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'">
<members-list <transition name="fade" mode="out-in">
v-if=" <members-list
selectedServerID && v-if="
currentTab === 2 && selectedServerID &&
((($mq === 'members_panel' || $mq === 'mobile') && currentTab === 2 &&
showMembersPanel) || ((($mq === 'members_panel' || $mq === 'mobile') &&
$mq === 'desktop') showMembersPanel) ||
" $mq === 'desktop')
v-click-outside="hideMembersPanel" "
class="members-panel" :key="selectedServerID"
/> v-click-outside="hideMembersPanel"
class="members-panel"
/>
</transition>
</transition> </transition>
</div> </div>
</template> </template>