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

bug fixes with notification

Browse source
This commit is contained in:
supertiger1234 2019-04-22 10:58:49 +01:00
parent ef32c8f528
commit c7c21c5383
6 changed files with 100 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/components/app/MyMiniInformation.vue
View file

@ -55,7 +55,6 @@ export default {
}, },
async changeStatus (status){ async changeStatus (status){
// emit to server to change their status. // emit to server to change their status.
console.log(status)
const {ok, error, result} = await settingsService.setStatus(status); const {ok, error, result} = await settingsService.setStatus(status);
if (ok && result.data.status == true) { if (ok && result.data.status == true) {
this.$store.dispatch('changeStatus', result.data.set) this.$store.dispatch('changeStatus', result.data.set)

123
src/components/app/RightPanel.vue
View file

@ -2,12 +2,15 @@
<div class="right-panel"> <div class="right-panel">
<div class="heading"> <div class="heading">
<div class="show-menu-button" @click="toggleLeftMenu"> <div class="show-menu-button" @click="toggleLeftMenu">
<i class="material-icons" >menu</i> <i class="material-icons">menu</i>
</div> </div>
<div class="current-channel"> <div class="current-channel">
<span v-if="!selectedChannelID">Welcome back, {{user.username}}!</span> <span class="channel-name" v-if="!selectedChannelID">Welcome back, {{user.username}}!</span>
<span class="channel-selected" v-else> <span class="channel-selected" v-else>
<div class="user-status" :style="`box-shadow: 0px 0px 14px 3px ${userStatusColor}; background-color: ${userStatusColor};`"></div> <div
class="user-status"
:style="`box-shadow: 0px 0px 14px 3px ${userStatusColor}; background-color: ${userStatusColor};`"
></div>
<div class="channel-name">{{channelName}}</div> <div class="channel-name">{{channelName}}</div>
</span> </span>
</div> </div>
@ -37,10 +40,9 @@
<div class="message">Select a person to message!</div> <div class="message">Select a person to message!</div>
</div> </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;" >
<emoji-suggestions v-if="emojiArray" :emojiArray="emojiArray"/> <emoji-suggestions v-if="emojiArray" :emojiArray="emojiArray"/>
<emoji-panel v-if="emojiPanelShow" /> <emoji-panel v-if="emojiPanelShow"/>
</div> </div>
<div class="message-area"> <div class="message-area">
@ -62,12 +64,14 @@
></textarea> ></textarea>
<button <button
class="emojis-button" class="emojis-button"
@click="$store.dispatch('setPopoutVisibility', {name: 'emojiPanel', visibility: true})"> @click="$store.dispatch('setPopoutVisibility', {name: 'emojiPanel', visibility: true})"
>
<i class="material-icons">face</i> <i class="material-icons">face</i>
</button> </button>
<button <button
:class="{'send-button': true, 'error-send-button': messageLength > 5000}" :class="{'send-button': true, 'error-send-button': messageLength > 5000}"
@click="sendMessage"> @click="sendMessage"
>
<i class="material-icons">send</i> <i class="material-icons">send</i>
</button> </button>
</div> </div>
@ -98,7 +102,7 @@ import uploadsQueue from "@/components/app/uploadsQueue.vue";
import emojiSuggestions from "@/components/app/emojiSuggestions.vue"; import emojiSuggestions from "@/components/app/emojiSuggestions.vue";
import emojiPanel from "@/components/app/emojiPanel.vue"; import emojiPanel from "@/components/app/emojiPanel.vue";
import emojiParser from "@/utils/emojiParser.js"; import emojiParser from "@/utils/emojiParser.js";
import statuses from '@/utils/statuses'; import statuses from "@/utils/statuses";
export default { export default {
components: { components: {
@ -116,7 +120,7 @@ export default {
postTimerID: null, postTimerID: null,
getTimerID: null, getTimerID: null,
typing: false, typing: false,
whosTyping: "", whosTyping: ""
}; };
}, },
methods: { methods: {
@ -143,7 +147,7 @@ export default {
if (this.message == "") return; if (this.message == "") return;
if (this.message.length > 5000) return; if (this.message.length > 5000) return;
(this.$store.dispatch('setEmojiArray', null)); this.$store.dispatch("setEmojiArray", null);
clearInterval(this.postTimerID); clearInterval(this.postTimerID);
this.postTimerID = null; this.postTimerID = null;
this.messageLength = 0; this.messageLength = 0;
@ -248,15 +252,16 @@ export default {
); );
if (cursorLetter.trim() == "" || cursorWord.endsWith(":")) if (cursorLetter.trim() == "" || cursorWord.endsWith(":"))
return (this.$store.dispatch('setEmojiArray', null)); return this.$store.dispatch("setEmojiArray", null);
if (!cursorWord.startsWith(":") || cursorWord.length <= 2) if (!cursorWord.startsWith(":") || cursorWord.length <= 2)
return (this.$store.dispatch('setEmojiArray', null)); return this.$store.dispatch("setEmojiArray", null);
const searchArr = emojiParser.searchEmoji(cursorWord.slice(1, -1)); const searchArr = emojiParser.searchEmoji(cursorWord.slice(1, -1));
if (searchArr.length <= 0) return (this.$store.dispatch('setEmojiArray', null)); if (searchArr.length <= 0)
return this.$store.dispatch("setEmojiArray", null);
(this.$store.dispatch('setEmojiArray', searchArr)); this.$store.dispatch("setEmojiArray", searchArr);
}, },
async onInput(event) { async onInput(event) {
this.resize(event); this.resize(event);
@ -271,25 +276,31 @@ export default {
this.resize(event); this.resize(event);
this.showEmojiPopout(event); this.showEmojiPopout(event);
}, },
enterEmojiSuggestion(){ enterEmojiSuggestion() {
const emoji = this.emojiArray[this.emojiIndex]; const emoji = this.emojiArray[this.emojiIndex];
this.$store.dispatch('settingsModule/addRecentEmoji', emoji.name || emoji.shortcodes[0]) this.$store.dispatch(
"settingsModule/addRecentEmoji",
emoji.name || emoji.shortcodes[0]
);
this.$refs["input-box"].focus(); this.$refs["input-box"].focus();
const emojiShortCode = `:${emoji.name || emoji.shortcodes[0]}: ` const emojiShortCode = `:${emoji.name || emoji.shortcodes[0]}: `;
const cursorPosition = this.$refs['input-box'].selectionStart; const cursorPosition = this.$refs["input-box"].selectionStart;
const cursorWord = this.ReturnWord(this.message, cursorPosition); const cursorWord = this.ReturnWord(this.message, cursorPosition);
const start = cursorPosition - cursorWord.length; const start = cursorPosition - cursorWord.length;
const end = cursorPosition; const end = cursorPosition;
this.message = this.message.substring(0, start) + emojiShortCode + this.message.substring(end); this.message =
this.$store.dispatch('setEmojiArray', null); this.message.substring(0, start) +
emojiShortCode +
this.message.substring(end);
this.$store.dispatch("setEmojiArray", null);
}, },
enterEmojiPanel(shortcode){ enterEmojiPanel(shortcode) {
const target = this.$refs["input-box"]; const target = this.$refs["input-box"];
target.focus(); target.focus();
document.execCommand('insertText', false, `:${shortcode}: `); document.execCommand("insertText", false, `:${shortcode}: `);
this.$store.dispatch('settingsModule/addRecentEmoji', shortcode) this.$store.dispatch("settingsModule/addRecentEmoji", shortcode);
}, },
keyDown(event) { keyDown(event) {
this.resize(event); this.resize(event);
@ -299,7 +310,7 @@ export default {
// and the shift key is not held // and the shift key is not held
if (!event.shiftKey) { if (!event.shiftKey) {
event.preventDefault(); event.preventDefault();
if (this.emojiArray){ if (this.emojiArray) {
this.enterEmojiSuggestion(); this.enterEmojiSuggestion();
return; return;
} }
@ -374,8 +385,8 @@ export default {
}, 2500); }, 2500);
}; };
bus.$on("newMessage", this.hideTypingStatus); bus.$on("newMessage", this.hideTypingStatus);
bus.$on("emojiSuggestions:Selected", this.enterEmojiSuggestion) bus.$on("emojiSuggestions:Selected", this.enterEmojiSuggestion);
bus.$on("emojiPanel:Selected", this.enterEmojiPanel) bus.$on("emojiPanel:Selected", this.enterEmojiPanel);
//dismiss notification on focus //dismiss notification on focus
window.onfocus = () => { window.onfocus = () => {
bus.$emit("title:change", "Nertivia"); bus.$emit("title:change", "Nertivia");
@ -392,8 +403,8 @@ export default {
}, },
beforeDestroy() { beforeDestroy() {
bus.$off("newMessage", this.hideTypingStatus); bus.$off("newMessage", this.hideTypingStatus);
bus.$off("emojiSuggestions:Selected", this.enterEmojiSuggestion) bus.$off("emojiSuggestions:Selected", this.enterEmojiSuggestion);
bus.$on("emojiPanel:Selected", this.enterEmojiPanel) bus.$on("emojiPanel:Selected", this.enterEmojiPanel);
delete this.$options.sockets.typingStatus; delete this.$options.sockets.typingStatus;
}, },
computed: { computed: {
@ -431,18 +442,32 @@ export default {
return this.$store.getters.emojiArray; return this.$store.getters.emojiArray;
}, },
emojiPanelShow() { emojiPanelShow() {
return this.$store.getters.popouts.emojiPanel return this.$store.getters.popouts.emojiPanel;
}, },
emojiIndex() { emojiIndex() {
return this.$store.getters.getEmojiIndex; return this.$store.getters.getEmojiIndex;
}, },
userStatusColor() { userStatusColor() {
const allFriends = this.$store.getters.user.friends;
const selectedChannel = this.$store.getters.selectedChannelID; const selectedChannel = this.$store.getters.selectedChannelID;
const arr = Object.keys(allFriends).map(el => allFriends[el]); const channel = this.$store.getters.channels[selectedChannel];
const find = arr.find(el => el.channelID === selectedChannel);
if (!find) return statuses[0].color; let status = 0;
return statuses[find.recipient.status || 0].color if (!channel) {
status = 0;
}else if (this.$store.getters.user.friends[channel.recipients[0].uniqueID]) {
status = this.$store.getters.user.friends[channel.recipients[0].uniqueID].recipient.status || 0
}
return statuses[status].color
// const allFriends = this.$store.getters.user.friends;
// const selectedChannel = this.$store.getters.selectedChannelID;
// const arr = Object.keys(allFriends).map(el => allFriends[el]);
// const find = arr.find(el => el.channelID === selectedChannel);
// console.log(find)
// if (!find) return statuses[0].color;
// return statuses[find.recipient.status || 0].color;
} }
} }
}; };
@ -451,9 +476,7 @@ export default {
<style scoped> <style scoped>
.no-channel-selected {
.no-channel-selected{
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
@ -463,23 +486,24 @@ export default {
justify-content: center; justify-content: center;
color: white; color: white;
font-size: 20px; font-size: 20px;
} }
.no-channel-selected .message{ .no-channel-selected .message {
margin-top: 20px; margin-top: 20px;
text-align: center;
} }
.no-channel-selected .material-icons{ .no-channel-selected .material-icons {
font-size: 50px; font-size: 50px;
} }
.channel-selected{ .channel-selected {
display: flex; display: flex;
align-items: center; align-items: center;
} }
.user-status{ .user-status {
border-radius: 4px; border-radius: 4px;
height: 10px; height: 10px;
width: 10px; width: 10px;
margin-right: 10px; margin-right: 10px;
flex-shrink: 0;
} }
.hidden { .hidden {
display: none; display: none;
@ -526,6 +550,15 @@ export default {
flex: 1; flex: 1;
padding: 5px; padding: 5px;
} }
.current-channel .channel-name {
display: block;
height: 26px;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: calc(100% - 17px);
}
.right-panel { .right-panel {
height: 100%; height: 100%;
@ -641,7 +674,7 @@ export default {
display: flex; display: flex;
flex-shrink: 0; flex-shrink: 0;
border-radius: 5px; border-radius: 5px;
user-select: none; user-select: none;
} }
.send-button .material-icons { .send-button .material-icons {
margin: auto; margin: auto;
@ -656,7 +689,7 @@ export default {
.error-send-button:hover { .error-send-button:hover {
background-color: rgba(255, 0, 0, 0.294); background-color: rgba(255, 0, 0, 0.294);
} }
.emojis-button{ .emojis-button {
font-size: 20px; font-size: 20px;
color: white; color: white;
background: rgba(0, 0, 0, 0.274); background: rgba(0, 0, 0, 0.274);

12
src/components/app/relationships/OnlineFriends.vue
View file

@ -23,12 +23,22 @@ export default {
return { return {
expanded: true expanded: true
} }
},
methods: {
}, },
computed: { computed: {
friends() { friends() {
const allFriend = this.$store.getters.user.friends; const allFriend = this.$store.getters.user.friends;
const notifications = this.$store.getters.notifications;
const result = Object.keys(allFriend).map(function(key) { const result = Object.keys(allFriend).map(function(key) {
return allFriend[key]; const friend = allFriend[key];
const findNotification = notifications.find( e => e.sender.uniqueID === friend.recipient.uniqueID )
if ( findNotification ){
friend.channelID = findNotification.channelID;
}
return friend
}); });
return result.filter(friend => friend.status == 2 && (friend.recipient.status !== undefined && friend.recipient.status > 0 )); return result.filter(friend => friend.status == 2 && (friend.recipient.status !== undefined && friend.recipient.status > 0 ));
} }

2
src/components/app/relationships/RecentFriends.vue
View file

@ -3,7 +3,7 @@
<transition name="list" appear> <transition name="list" appear>
<div class="list"> <div class="list">
<FriendsTemplate v-for="(channel, key) of channels" :key="key" notifications="1" :channelID="channel.channelID" :recipient="channel.recipients[0]"/> <FriendsTemplate v-for="(channel, key) of channels" :key="key" :channelID="channel.channelID" :recipient="channel.recipients[0]"/>
</div> </div>
</transition> </transition>
</div> </div>

4
src/store/modules/socketIOModule.js
View file

@ -62,8 +62,10 @@ const actions = {
context.commit('removeFriend', uniqueID) context.commit('removeFriend', uniqueID)
}, },
socket_receiveMessage(context, data) { socket_receiveMessage(context, data) {
if (context.getters.messages[data.message.channelID]) { if (context.getters.channels[data.message.channelID]){
context.dispatch('updateChannelLastMessage', data.message.channelID); context.dispatch('updateChannelLastMessage', data.message.channelID);
}
if (context.getters.messages[data.message.channelID]) {
context.dispatch('addMessage', { context.dispatch('addMessage', {
message: data.message, message: data.message,
channelID: data.message.channelID, channelID: data.message.channelID,

8
src/views/App.vue
View file

@ -147,7 +147,8 @@ export default {
display: flex; display: flex;
overflow-y: hidden; overflow-y: hidden;
overflow-x: auto; overflow-x: auto;
margin-top: 5px; height: 35px;
flex-shrink: 0;
} }
.tabs::-webkit-scrollbar { .tabs::-webkit-scrollbar {
height: 5px; height: 5px;
@ -214,6 +215,11 @@ export default {
background-color: rgba(39, 39, 39, 0.97); background-color: rgba(39, 39, 39, 0.97);
} }
} }
@media (max-width: 470px) {
.tabs {
height: 40px;
}
}
</style> </style>