mirror of
https://github.com/danbulant/Nertivia-Client
synced 2026-06-14 20:11:10 +00:00
colored messages, format buttons
This commit is contained in:
supertiger1234
parent
7160a1fd88
commit
0f297f3274
8 changed files with 167 additions and 22 deletions
|
|
@ -22,6 +22,7 @@
|
|||
:channelID="msg.channelID"
|
||||
:type="msg.type"
|
||||
:timeEdited="msg.timeEdited"
|
||||
:color="msg.color"
|
||||
/>
|
||||
|
||||
<uploadsQueue v-if="uploadQueue !== undefined" :queue="uploadQueue" />
|
||||
|
|
|
|||
|
|
@ -42,6 +42,17 @@
|
|||
|
||||
<edit-panel v-if="editMessage" :data="editMessage" />
|
||||
<div class="seperater" />
|
||||
<div class="markdown-buttons" style="color: white;" v-if="sendMessagePermission === true || editMessage">
|
||||
<div class="material-icons markdown-icon" @click="addFormat('**')" title="Bold">format_bold</div>
|
||||
<div class="material-icons markdown-icon" @click="addFormat('_')" title="Italic">format_italic</div>
|
||||
<div class="material-icons markdown-icon" @click="addFormat('__')" title="Underline">format_underlined</div>
|
||||
<div class="material-icons markdown-icon" @click="addFormat('```\n', '\n```', 4)" title="Code block">code</div>
|
||||
<div class="color-picker" title="Message color">
|
||||
<input type="color" ref="colorPic" style="display: none" @change="messageColorChange" value="#e7e7e7">
|
||||
<div class="color" :style="{background: customColor}" @click="$refs.colorPic.click()"></div>
|
||||
<div class="reset-button" @click="customColor = null" v-if="customColor">Reset</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="info">
|
||||
|
||||
<div
|
||||
|
|
@ -101,6 +112,7 @@ import MessageLogs from "@/components/app/MessageLogs.vue";
|
|||
import emojiParser from "@/utils/emojiParser.js";
|
||||
import windowProperties from "@/utils/windowProperties";
|
||||
import TypingStatus from "@/components/app/TypingStatus.vue";
|
||||
import { isMobile } from '../../utils/Mobile';
|
||||
|
||||
const emojiPanel = () => import("@/components/app/EmojiPanels/emojiPanel.vue");
|
||||
const EditPanel = () => import("@/components/app/EditPanel.vue");
|
||||
|
|
@ -126,10 +138,41 @@ export default {
|
|||
typingRecipients: {},
|
||||
showEmojiPanel: false,
|
||||
|
||||
scrolledDown: true
|
||||
customColor: null,
|
||||
scrolledDown: true,
|
||||
mobile: isMobile(),
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
messageColorChange(e) {
|
||||
const hexColor = e.target.value;
|
||||
this.customColor = hexColor;
|
||||
},
|
||||
addFormat(type, customEnding, customPos) {
|
||||
const msgBox = this.$refs['input-box'];
|
||||
msgBox.focus()
|
||||
const startPos = msgBox.selectionStart;
|
||||
const endPos = msgBox.selectionEnd;
|
||||
|
||||
const selection = window.getSelection();
|
||||
const selected = selection.toString();
|
||||
console.log(selected)
|
||||
|
||||
if (selected === ""){
|
||||
this.message = [this.message.slice(0, endPos), type+ (customEnding||type ), this.message.slice(endPos)].join('');
|
||||
this.$nextTick(() => {
|
||||
const offsetCursorPos = customPos || type.length
|
||||
msgBox.focus()
|
||||
msgBox.setSelectionRange(endPos+ offsetCursorPos, endPos+ offsetCursorPos);
|
||||
})
|
||||
return;
|
||||
}
|
||||
this.message = [this.message.slice(0, startPos), type + selected + (customEnding||type ), this.message.slice(endPos)].join('');
|
||||
this.$nextTick(() => {
|
||||
msgBox.focus()
|
||||
msgBox.setSelectionRange(startPos + type.length, endPos + type.length);
|
||||
})
|
||||
},
|
||||
generateNum(n) {
|
||||
var add = 1,
|
||||
max = 12 - add; // 12 is the min safe number Math.random() can generate without it starting to pad the end with zeros.
|
||||
|
|
@ -179,6 +222,7 @@ export default {
|
|||
this.selectedChannelID,
|
||||
{
|
||||
message: msg,
|
||||
color: this.customColor,
|
||||
socketID: this.$socket.id,
|
||||
tempID
|
||||
}
|
||||
|
|
@ -199,7 +243,7 @@ export default {
|
|||
const editMessage = this.editMessage;
|
||||
this.$refs["input-box"].focus();
|
||||
this.message = this.message.trim();
|
||||
if (this.message === this.editMessage.message) {
|
||||
if (this.message === this.editMessage.message && (this.customColor || undefined) === (this.editMessage.color)) {
|
||||
this.$store.dispatch("setEditMessage", null);
|
||||
this.message = "";
|
||||
return;
|
||||
|
|
@ -223,6 +267,7 @@ export default {
|
|||
editMessage.messageID,
|
||||
editMessage.channelID,
|
||||
{
|
||||
color: this.customColor || -1,
|
||||
message: msg
|
||||
}
|
||||
);
|
||||
|
|
@ -364,6 +409,7 @@ export default {
|
|||
this.emojiSwitchKey(event);
|
||||
// when enter is press
|
||||
if (event.keyCode == 13) {
|
||||
if (this.mobile) {return}
|
||||
// and the shift key is not held
|
||||
if (!event.shiftKey) {
|
||||
event.preventDefault();
|
||||
|
|
@ -393,7 +439,8 @@ export default {
|
|||
this.$store.dispatch("setEditMessage", {
|
||||
messageID: lastMessage.messageID,
|
||||
channelID: lastMessage.channelID,
|
||||
message: lastMessage.message
|
||||
message: lastMessage.message,
|
||||
color: lastMessage.color,
|
||||
});
|
||||
}
|
||||
},
|
||||
|
|
@ -474,6 +521,8 @@ export default {
|
|||
this.message = editMessage
|
||||
? emojiParser.emojiToShortcode(editMessage.message)
|
||||
: "";
|
||||
if (editMessage)
|
||||
this.customColor = editMessage.color || null;
|
||||
},
|
||||
onBlur() {
|
||||
clearTimeout(this.postTimerID);
|
||||
|
|
@ -714,7 +763,6 @@ export default {
|
|||
align-self: center;
|
||||
background-color: #a0c8d5;
|
||||
flex-shrink: 0;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.chat-input-area .info {
|
||||
color: rgba(255, 255, 255, 0.466);
|
||||
|
|
@ -851,4 +899,57 @@ export default {
|
|||
user-select: none;
|
||||
cursor: default;
|
||||
}
|
||||
.markdown-buttons {
|
||||
display: flex;
|
||||
height: 35px;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
margin-left: 10px;
|
||||
flex-shrink: 0;
|
||||
.markdown-icon {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
height: 100%;
|
||||
width: 35px;
|
||||
margin-left: 2px;
|
||||
transition: 0.2s;
|
||||
color: #d5dcdd;
|
||||
&:hover {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.color-picker {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
transition: 0.2s;
|
||||
flex-shrink: 0;
|
||||
min-width: 35px;
|
||||
.color {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
background: rgb(231, 231, 231);
|
||||
flex-shrink: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
.reset-button {
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
margin-left: 5px;
|
||||
transition: 0.2s;
|
||||
opacity: 0.6;
|
||||
flex-shrink: 0;
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
<div class="username" @click="openUserInformation">{{ this.$props.username }}</div>
|
||||
<div class="date">{{ getDate }}</div>
|
||||
</div>
|
||||
<SimpleMarkdown class="content-message" :message="message" />
|
||||
<SimpleMarkdown class="content-message" :style="[color && color !== -2 ? {color: color}: '']" :message="message" />
|
||||
<div class="file-content" v-if="getFile && !getFile.fileName.endsWith('.mp3')">
|
||||
<div class="icon">
|
||||
<i class="material-icons">insert_drive_file</i>
|
||||
|
|
@ -116,7 +116,8 @@ export default {
|
|||
"embed",
|
||||
"messageID",
|
||||
"channelID",
|
||||
"timeEdited"
|
||||
"timeEdited",
|
||||
"color"
|
||||
],
|
||||
components: {
|
||||
ProfilePicture,
|
||||
|
|
@ -139,7 +140,8 @@ export default {
|
|||
messageID: this.messageID,
|
||||
message: this.message,
|
||||
uniqueID: this.uniqueID,
|
||||
type: this.type
|
||||
type: this.type,
|
||||
color: this.color
|
||||
});
|
||||
},
|
||||
openUserInformation() {
|
||||
|
|
@ -154,7 +156,8 @@ export default {
|
|||
this.$store.dispatch("setEditMessage", {
|
||||
channelID: this.channelID,
|
||||
messageID: this.messageID,
|
||||
message: this.message
|
||||
message: this.message,
|
||||
color: this.color,
|
||||
});
|
||||
},
|
||||
contentDoubleClickEvent(event) {
|
||||
|
|
|
|||
|
|
@ -30,7 +30,8 @@ export default {
|
|||
this.$store.dispatch("setEditMessage", {
|
||||
channelID: this.contextDetails.channelID,
|
||||
messageID: this.contextDetails.messageID,
|
||||
message: this.contextDetails.message
|
||||
message: this.contextDetails.message,
|
||||
color: this.contextDetails.color,
|
||||
});
|
||||
this.closeMenu();
|
||||
},
|
||||
|
|
@ -70,7 +71,8 @@ export default {
|
|||
message,
|
||||
channelID,
|
||||
uniqueID,
|
||||
type
|
||||
type,
|
||||
color
|
||||
} = this.$store.getters.popouts.messageContextMenu;
|
||||
return {
|
||||
x,
|
||||
|
|
@ -79,7 +81,8 @@ export default {
|
|||
message,
|
||||
channelID,
|
||||
uniqueID,
|
||||
type
|
||||
type,
|
||||
color
|
||||
};
|
||||
},
|
||||
serverID() {
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@
|
|||
}
|
||||
|
||||
.codeblock {
|
||||
background-color: rgba(0, 0, 0, 0.397);
|
||||
background-color: #233538;
|
||||
padding: 5px;
|
||||
word-wrap: break-word;
|
||||
word-break: break-word;
|
||||
|
|
@ -44,10 +44,10 @@
|
|||
|
||||
|
||||
.inline-code {
|
||||
background: rgba(0, 0, 0, 0.322);
|
||||
background: #273c3e;
|
||||
}
|
||||
|
||||
.link {
|
||||
color: rgb(86, 159, 253);
|
||||
color: #68aaff;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -3,8 +3,6 @@
|
|||
<navigation />
|
||||
<div class="changelog">
|
||||
<div class="change-log">
|
||||
<span class="news-title">Changes in this release</span>
|
||||
|
||||
<div v-for="(change, index) in changelog" :key="index" class="change">
|
||||
<div
|
||||
class="heading"
|
||||
|
|
@ -38,6 +36,7 @@
|
|||
<div v-if="change.msg" v-html="change.msg" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="see-all-button" v-if="!showAll" @click="showAll = true">View older changes</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -51,8 +50,16 @@ export default {
|
|||
components: { Navigation },
|
||||
data() {
|
||||
return {
|
||||
changelog
|
||||
showAll: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
changelog() {
|
||||
if (this.showAll) {
|
||||
return changelog;
|
||||
}
|
||||
return [changelog[0]];
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -90,7 +97,7 @@ export default {
|
|||
}
|
||||
.heading {
|
||||
padding: 10px;
|
||||
background: #071415;
|
||||
background: #15282a;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.information {
|
||||
|
|
@ -101,9 +108,10 @@ export default {
|
|||
background: rgba(38, 139, 255, 0.87);
|
||||
}
|
||||
.change-log {
|
||||
background: #0a1e20;
|
||||
background: #294c51;
|
||||
overflow-y: auto;
|
||||
max-width: 700px;
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
}
|
||||
.changelog {
|
||||
|
|
@ -130,4 +138,20 @@ export default {
|
|||
margin-top: -5px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.see-all-button {
|
||||
background: #172a2c;
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
height: 40px;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
transition: 0.2s;
|
||||
|
||||
}
|
||||
.see-all-button:hover {
|
||||
background: #0b1415;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -90,7 +90,7 @@ const actions = {
|
|||
},
|
||||
setMessageContext(
|
||||
context,
|
||||
{ messageID, x, y, channelID, message, uniqueID, type }
|
||||
{ messageID, x, y, channelID, message, uniqueID, type, color }
|
||||
) {
|
||||
context.commit("setMessageContext", {
|
||||
messageID,
|
||||
|
|
@ -99,7 +99,8 @@ const actions = {
|
|||
channelID,
|
||||
message,
|
||||
uniqueID,
|
||||
type
|
||||
type,
|
||||
color
|
||||
});
|
||||
},
|
||||
setServerMemberContext(context, { uniqueID, x, y, serverID }) {
|
||||
|
|
|
|||
|
|
@ -9,12 +9,24 @@ const prototype = {
|
|||
};
|
||||
|
||||
const config = [
|
||||
{
|
||||
version: 8.5,
|
||||
title: "format buttons and color text!",
|
||||
shortTitle: "",
|
||||
date: "18/11/2019",
|
||||
headColor: "#0c7b7f",
|
||||
new: [
|
||||
"Enter will now create new lines on mobile.",
|
||||
"You can now easily format your messages using the format buttons above.",
|
||||
"You can now color your messages! <font color='pink'>WOO!</font>",
|
||||
],
|
||||
},
|
||||
{
|
||||
version: 8.4,
|
||||
title: "Redesigns and built in mp3 player!",
|
||||
shortTitle: "",
|
||||
date: "17/11/2019",
|
||||
headColor: "#0c7b7f",
|
||||
|
||||
new: [
|
||||
"You can now play mp3 files within nertivia! (mp4 coming soon)",
|
||||
"Redesigned some components such as file upload, edit messages and more.",
|
||||
|
|
|
|||
Loading…
Reference in a new issue