colored messages, format buttons

src/components/app/MessageLogs.vue

@@ -22,6 +22,7 @@
       :channelID="msg.channelID"
       :type="msg.type"
       :timeEdited="msg.timeEdited"
+      :color="msg.color"
     />
 
     <uploadsQueue v-if="uploadQueue !== undefined" :queue="uploadQueue" />

src/components/app/MessagePanel.vue

@@ -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>

src/components/app/MessageTemplate.vue

@@ -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) {

src/components/app/Popouts/Popouts/messageContextMenu.vue

@@ -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() {

src/components/app/SimpleMarkdown.vue

@@ -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>

src/components/app/Tabs/News.vue

@@ -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>

src/store/modules/popoutsModule/popoutsModule.js

@@ -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 }) {

src/utils/changelog.js

@@ -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.",