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

fixed typing indicator placement issues.

Browse source
This commit is contained in:
supertiger1234 2019-11-06 10:12:19 +00:00
parent 112f07fbc4
commit 6f095a2e0e
2 changed files with 17 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
src/components/app/MessageLogs.vue
View file

@ -23,28 +23,7 @@
:type="msg.type" :type="msg.type"
:timeEdited="msg.timeEdited" :timeEdited="msg.timeEdited"
/> />
<!-- <div class="typing-list">
<message-typing
class="message-container"
:username="user.username"
:uniqueID="user.uniqueID"
:avatar="user.avatar"
:channelID="'5865686142508030876'"
/>
<message-typing
class="message-container"
:username="user.username"
:uniqueID="user.uniqueID"
:avatar="user.avatar"
:channelID="'5865686142508030876'"
/>
</div>-->
<div class="typing-outer">
<typing-status
v-if="typingRecipients[selectedChannelID]"
:recipients="typingRecipients[selectedChannelID]"
/>
</div>
<uploadsQueue v-if="uploadQueue !== undefined" :queue="uploadQueue" /> <uploadsQueue v-if="uploadQueue !== undefined" :queue="uploadQueue" />
<div <div
class="load-more-button" class="load-more-button"
@ -63,17 +42,14 @@ import Message from "../../components/app/MessageTemplate.vue";
import Spinner from "@/components/Spinner.vue"; import Spinner from "@/components/Spinner.vue";
import uploadsQueue from "@/components/app/uploadsQueue.vue"; import uploadsQueue from "@/components/app/uploadsQueue.vue";
import debounce from "lodash/debounce"; import debounce from "lodash/debounce";
import TypingStatus from "@/components/app/TypingStatus.vue";
import windowProperties from "@/utils/windowProperties"; import windowProperties from "@/utils/windowProperties";
export default { export default {
props: ["typingRecipients"],
components: { components: {
Message, Message,
Spinner, Spinner,
uploadsQueue, uploadsQueue
TypingStatus
}, },
data() { data() {
return { return {
@ -347,13 +323,6 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.typing-outer {
display: flex;
flex: 1;
height: 20px;
margin-bottom: 5px;
margin-left: 10px;
}
.message-logs { .message-logs {
overflow: auto; overflow: auto;
flex: 1; flex: 1;

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

@ -9,7 +9,6 @@
<spinner /> <spinner />
</div> </div>
<message-logs <message-logs
:typingRecipients="typingRecipients"
v-else-if="selectedChannelID && selectedChannelMessages" v-else-if="selectedChannelID && selectedChannelMessages"
:key="selectedChannelID" :key="selectedChannelID"
/> />
@ -19,7 +18,12 @@
class="message" class="message"
>{{type === 0 ? 'Select a person to message!' : type === 1 ?'Select a server!' : "wot"}}</div> >{{type === 0 ? 'Select a person to message!' : type === 1 ?'Select a server!' : "wot"}}</div>
</div> </div>
<div class="typing-outer">
<typing-status
v-if="typingRecipients[selectedChannelID]"
:recipients="typingRecipients[selectedChannelID]"
/>
</div>
<div class="chat-input-area" v-if="selectedChannelID"> <div class="chat-input-area" v-if="selectedChannelID">
<div style="position: relative;"> <div style="position: relative;">
<transition name="show-up"> <transition name="show-up">
@ -96,6 +100,7 @@ import emojiSuggestions from "@/components/app/EmojiPanels/emojiSuggestions.vue"
import MessageLogs from "@/components/app/MessageLogs.vue"; import MessageLogs from "@/components/app/MessageLogs.vue";
import emojiParser from "@/utils/emojiParser.js"; import emojiParser from "@/utils/emojiParser.js";
import windowProperties from "@/utils/windowProperties"; import windowProperties from "@/utils/windowProperties";
import TypingStatus from "@/components/app/TypingStatus.vue";
const emojiPanel = () => import("@/components/app/EmojiPanels/emojiPanel.vue"); const emojiPanel = () => import("@/components/app/EmojiPanels/emojiPanel.vue");
const EditPanel = () => import("@/components/app/EditPanel.vue"); const EditPanel = () => import("@/components/app/EditPanel.vue");
@ -108,7 +113,8 @@ export default {
emojiPanel, emojiPanel,
heading, heading,
EditPanel, EditPanel,
MessageLogs MessageLogs,
TypingStatus
}, },
data() { data() {
return { return {
@ -641,6 +647,12 @@ export default {
font-size: 50px; font-size: 50px;
} }
} }
.typing-outer {
display: flex;
height: 20px;
margin-bottom: 5px;
margin-left: 10px;
}
.hidden { .hidden {
display: none; display: none;