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

made memberTemplate more cleaner

Browse source
This commit is contained in:
supertiger1234 2020-02-15 20:32:30 +00:00
parent d4087164fe
commit ed303363f0
3 changed files with 79 additions and 93 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -21,22 +21,9 @@
'show-message-animation': index === selectedChannelMessages.length - 1 'show-message-animation': index === selectedChannelMessages.length - 1
}" }"
:key="msg.tempID || msg.messageID" :key="msg.tempID || msg.messageID"
:date="msg.created" :creator="msg.creator"
:admin="msg.creator.admin" :message="msg"
:username="msg.creator.username"
:uniqueID="msg.creator.uniqueID"
:avatar="msg.creator.avatar"
:message="msg.message"
:embed="msg.embed"
:files="msg.files"
:status="msg.status"
:messageID="msg.messageID"
:channelID="msg.channelID"
:type="msg.type"
:timeEdited="msg.timeEdited"
:color="msg.color"
:isServer="isServer" :isServer="isServer"
:mentions="msg.mentions"
/> />
<uploadsQueue v-if="uploadQueue !== undefined" :queue="uploadQueue" /> <uploadsQueue v-if="uploadQueue !== undefined" :queue="uploadQueue" />

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

@ -789,7 +789,8 @@ export default {
}, },
selectedChannelID() { selectedChannelID() {
this.$nextTick(() => { this.$nextTick(() => {
if (!this.mobile) this.$refs["input-box"].focus(); if (!this.mobile && this.$refs["input-box"])
this.$refs["input-box"].focus();
}); });
} }
}, },

152
src/components/app/MessageTemplate.vue
View file

@ -6,19 +6,19 @@
@mouseleave="hover = false" @mouseleave="hover = false"
> >
<div <div
v-if="!type || type === 0" v-if="!message.type || message.type === 0"
:class="{ :class="{
message: true, message: true,
ownMessage: user.uniqueID === $props.uniqueID, ownMessage: user.uniqueID === creator.uniqueID,
ownMessageLeft: ownMessageRight:
user.uniqueID === $props.uniqueID && user.uniqueID === creator.uniqueID &&
apperance && apperance &&
apperance.own_message_right === true apperance.own_message_right === true
}" }"
> >
<div class="avatar"> <div class="avatar">
<profile-picture <profile-picture
:admin="$props.admin" :admin="creator.admin"
:url="`${userAvatar}${hover || !isGif ? '' : '?type=webp'}`" :url="`${userAvatar}${hover || !isGif ? '' : '?type=webp'}`"
size="50px" size="50px"
:hover="true" :hover="true"
@ -35,7 +35,7 @@
:style="{ color: roleColor }" :style="{ color: roleColor }"
@click="openUserInformation" @click="openUserInformation"
> >
{{ this.$props.username }} {{ creator.username }}
</div> </div>
<div class="date">{{ getDate }}</div> <div class="date">{{ getDate }}</div>
<div <div
@ -48,8 +48,12 @@
</div> </div>
<SimpleMarkdown <SimpleMarkdown
class="content-message" class="content-message"
:style="[color && color !== -2 ? { color: color } : '']" :style="[
:message="message" message.color && message.color !== -2
? { color: message.color }
: ''
]"
:message="message.message"
/> />
<div <div
class="file-content" class="file-content"
@ -79,8 +83,8 @@
<img :src="getImage" @click="imageClicked" /> <img :src="getImage" @click="imageClicked" />
</div> </div>
<message-embed-template <message-embed-template
v-if="embed && Object.keys(embed).length" v-if="message.embed && Object.keys(message.embed).length"
:embed="embed" :embed="message.embed"
/> />
</div> </div>
<div class="other-information"> <div class="other-information">
@ -93,41 +97,33 @@
</div> </div>
<div <div
class="sending-status" class="sending-status"
v-if="timeEdited && (status === undefined || status === 1)" v-if="
message.timeEdited &&
(message.status === undefined || message.status === 1)
"
:title="`Edited ${getEditedDate}`" :title="`Edited ${getEditedDate}`"
> >
<i class="material-icons">edit</i> <i class="material-icons">edit</i>
</div> </div>
<div class="sending-status" v-else-if="status === 0"> <div class="sending-status" v-else-if="message.status === 0">
<i class="material-icons">hourglass_full</i> <i class="material-icons">hourglass_full</i>
</div> </div>
<div class="sending-status" v-else-if="status === 1"> <div class="sending-status" v-else-if="message.status === 1">
<i class="material-icons">done</i> <i class="material-icons">done</i>
</div> </div>
<div class="sending-status" v-else-if="status === 2"> <div class="sending-status" v-else-if="message.status === 2">
<i class="material-icons">close</i> Failed <i class="material-icons">close</i> Failed
</div> </div>
</div> </div>
</div> </div>
<div <div v-if="messageType" class="presence-message" :class="messageType[1]">
v-if="type && (type === 1 || type === 2 || type === 3 || type === 4)"
class="presence-message"
:class="{
join: type === 1,
leave: type === 2,
kick: type === 3,
ban: type === 4
}"
>
<div class="presense-contain"> <div class="presense-contain">
<span> <span>
<span class="username" @click="openUserInformation">{{ <span class="username" @click="openUserInformation">{{
this.$props.username creator.username
}}</span> }}</span>
<span v-if="type === 1" class="text">joined the server!</span> <span class="text">{{ messageType[0] }}</span>
<span v-if="type === 2" class="text">left the server.</span>
<span v-if="type === 3" class="text">has been kicked.</span>
<span v-if="type === 4" class="text">has been banned.</span>
<span class="date">{{ getDate }}</span> <span class="date">{{ getDate }}</span>
</span> </span>
</div> </div>
@ -154,24 +150,7 @@ import windowProperties from "@/utils/windowProperties";
import { mapState } from "vuex"; import { mapState } from "vuex";
export default { export default {
props: [ props: ["creator", "message", "isServer"],
"message",
"status",
"username",
"avatar",
"date",
"uniqueID",
"files",
"admin",
"type",
"embed",
"messageID",
"channelID",
"timeEdited",
"color",
"isServer",
"mentions"
],
components: { components: {
ProfilePicture, ProfilePicture,
messageEmbedTemplate, messageEmbedTemplate,
@ -196,28 +175,28 @@ export default {
this.$store.dispatch("setMessageContext", { this.$store.dispatch("setMessageContext", {
x, x,
y, y,
channelID: this.channelID, channelID: this.message.channelID,
messageID: this.messageID, messageID: this.message.messageID,
message: this.message, message: this.message.message,
uniqueID: this.uniqueID, uniqueID: this.creator.uniqueID,
type: this.type, type: this.message.type,
color: this.color color: this.message.color
}); });
}, },
openUserInformation() { openUserInformation() {
this.$store.dispatch("setUserInformationPopout", this.uniqueID); this.$store.dispatch("setUserInformationPopout", this.creator.uniqueID);
}, },
imageClicked(event) { imageClicked(event) {
this.$store.dispatch("setImagePreviewURL", event.target.src); this.$store.dispatch("setImagePreviewURL", event.target.src);
}, },
editMessage() { editMessage() {
if (this.uniqueID !== this.user.uniqueID) return; if (this.creator.uniqueID !== this.user.uniqueID) return;
this.dropDownVisable = false; this.dropDownVisable = false;
this.$store.dispatch("setEditMessage", { this.$store.dispatch("setEditMessage", {
channelID: this.channelID, channelID: this.message.channelID,
messageID: this.messageID, messageID: this.message.messageID,
message: this.message, message: this.message.message,
color: this.color color: this.message.color
}); });
}, },
contentDoubleClickEvent(event) { contentDoubleClickEvent(event) {
@ -235,7 +214,7 @@ export default {
return { width: srcWidth * ratio, height: srcHeight * ratio }; return { width: srcWidth * ratio, height: srcHeight * ratio };
}, },
imageSize() { imageSize() {
const files = this.$props.files; const files = this.message.files;
if (!files || files.length === 0 || !files[0].dimensions) if (!files || files.length === 0 || !files[0].dimensions)
return undefined; return undefined;
@ -250,7 +229,7 @@ export default {
minHeight = h / 1.7; minHeight = h / 1.7;
} }
const dimensions = this.$props.files[0].dimensions; const dimensions = this.message.files[0].dimensions;
const srcWidth = dimensions.width; const srcWidth = dimensions.width;
const srcHeight = dimensions.height; const srcHeight = dimensions.height;
@ -276,8 +255,8 @@ export default {
}, },
checkMentioned() { checkMentioned() {
if ( if (
this.mentions && this.message.mentions &&
this.mentions.find(u => u.uniqueID === this.user.uniqueID) this.message.mentions.find(u => u.uniqueID === this.user.uniqueID)
) { ) {
this.mentioned = true; this.mentioned = true;
} else { } else {
@ -289,7 +268,7 @@ export default {
getWindowWidth(dimentions) { getWindowWidth(dimentions) {
this.onResize(dimentions); this.onResize(dimentions);
}, },
mentions() { message() {
this.checkMentioned(); this.checkMentioned();
} }
}, },
@ -303,9 +282,9 @@ export default {
computed: { computed: {
...mapState("settingsModule", ["apperance"]), ...mapState("settingsModule", ["apperance"]),
getImage() { getImage() {
if (!this.$props.files || this.$props.files.length === 0) if (!this.message.files || this.message.files.length === 0)
return undefined; return undefined;
const file = this.$props.files[0]; const file = this.message.files[0];
if (!file.fileID) return undefined; if (!file.fileID) return undefined;
const filetypes = /jpeg|jpg|gif|png/; const filetypes = /jpeg|jpg|gif|png/;
const extname = filetypes.test(path.extname(file.fileName).toLowerCase()); const extname = filetypes.test(path.extname(file.fileName).toLowerCase());
@ -313,9 +292,9 @@ export default {
return config.domain + "/media/" + file.fileID + "/" + file.fileName; return config.domain + "/media/" + file.fileID + "/" + file.fileName;
}, },
getFile() { getFile() {
if (!this.$props.files || this.$props.files.length === 0) if (!this.message.files || this.message.files.length === 0)
return undefined; return undefined;
let file = this.$props.files[0]; let file = this.message.files[0];
if (!file.fileID) return undefined; if (!file.fileID) return undefined;
const filetypes = /jpeg|jpg|gif|png/; const filetypes = /jpeg|jpg|gif|png/;
const extname = filetypes.test(path.extname(file.fileName).toLowerCase()); const extname = filetypes.test(path.extname(file.fileName).toLowerCase());
@ -325,18 +304,18 @@ export default {
}, },
getDate() { getDate() {
return friendlyDate( return friendlyDate(
this.$props.date, this.message.created,
this.apperance && this.apperance["12h_time"] ? "12h" : false this.apperance && this.apperance["12h_time"] ? "12h" : false
); );
}, },
getEditedDate() { getEditedDate() {
return friendlyDate( return friendlyDate(
this.timeEdited, this.message.timeEdited,
this.apperance && this.apperance["12h_time"] ? "12h" : false this.apperance && this.apperance["12h_time"] ? "12h" : false
); );
}, },
userAvatar() { userAvatar() {
return config.domain + "/avatars/" + this.$props.avatar; return config.domain + "/avatars/" + this.creator.avatar;
}, },
user() { user() {
return this.$store.getters.user; return this.$store.getters.user;
@ -354,7 +333,7 @@ export default {
const serverMembers = this.$store.getters["servers/serverMembers"]; const serverMembers = this.$store.getters["servers/serverMembers"];
return serverMembers.find( return serverMembers.find(
m => m =>
m.uniqueID === this.uniqueID && m.uniqueID === this.creator.uniqueID &&
m.server_id === this.$store.getters["servers/selectedServerID"] m.server_id === this.$store.getters["servers/selectedServerID"]
); );
}, },
@ -374,6 +353,25 @@ export default {
} else { } else {
return this.roles.find(r => r.default).color + " !important"; return this.roles.find(r => r.default).color + " !important";
} }
},
messageType() {
switch (this.message.type) {
case 1:
return ["joined the server!", "join"];
break;
case 2:
return ["left the server.", "leave"];
break;
case 3:
return ["has been kicked.", "kick"];
break;
case 4:
return ["has been banned.", "ban"];
break;
default:
return null;
break;
}
} }
} }
}; };
@ -435,19 +433,19 @@ $message-color: rgba(0, 0, 0, 0.3);
color: #d92121; color: #d92121;
} }
.ownMessageLeft { .ownMessageRight {
flex-direction: row-reverse; flex-direction: row-reverse;
} }
.ownMessageLeft .triangle-inner { .ownMessageRight .triangle-inner {
border-left: 8px solid $self-message-color; border-left: 8px solid $self-message-color;
border-right: none !important; border-right: none !important;
} }
.ownMessageLeft .avatar { .ownMessageRight .avatar {
margin-right: 0px; margin-right: 0px;
} }
.ownMessageLeft .sending-status { .ownMessageRight .sending-status {
margin-left: auto !important; margin-left: auto !important;
margin-right: 4px !important; margin-right: 4px !important;
} }
@ -546,7 +544,7 @@ $message-color: rgba(0, 0, 0, 0.3);
border-radius: 4px; border-radius: 4px;
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
} }
.ownMessageLeft .content { .ownMessageRight .content {
border-radius: 4px; border-radius: 4px;
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
} }