change avatar of servers

src/components/app/Popouts/Popouts/ServerSettingsPanels/DropDownMenu.vue

@@ -3,7 +3,9 @@
     <div class="title">{{name}}</div>
     <div class="current-select-box" ref="dropDown" @click="dropped = !dropped"><div class="name">{{selectedItem ? selectedItem.name : items[0].name}}</div><div class="material-icons">expand_more</div></div>
     <div class="drop" v-if="dropped">
-      <div v-for="(item, index) of items" :key="index" class="item" :class="{selected: selectedItem === item}" @click="itemClick(item)">{{item.name}}</div>
+      <div class="drop-container">
+        <div v-for="(item, index) of items" :key="index" class="item" :class="{selected: selectedItem === item}" @click="itemClick(item)">{{item.name}}</div>
+      </div>
     </div>
   </div>
 </template>
@@ -68,30 +70,38 @@ export default {
   margin: auto;
   margin-left: 2px;
 }
+
 .drop {
   position: absolute;
-  background: rgb(80, 80, 80);
-  border-radius: 10px;
+  background: rgb(39, 39, 39);
+  border-radius: 5px;
   left: 0;
   right: 0;
   z-index: 11111;
-  max-height: 100px;
-  overflow: auto;
+  overflow: hidden;
   padding: 2px;
   margin-top: 5px;
 }
+.drop-container {
+  border-radius: 5px;
+  overflow: auto;
+  max-height: 100px;
+}
+.drop-container::-webkit-scrollbar {
+  width: 5px;
+}
 .item {
   padding: 5px;
   border-radius: 5px;
   margin-top: 2px;
   margin-bottom: 2px;
-  background: rgba(37, 37, 37, 0.322);
+  transition: 0.2s;
 }
 .item:hover {
-  background: rgb(37, 37, 37);
+  background: rgb(46, 46, 46);
 }
 .item.selected {
-  background: rgb(41, 41, 41);
+  background: rgb(63, 63, 63);
 }
 </style>
 

src/components/app/Popouts/Popouts/ServerSettingsPanels/General.vue

@@ -1,7 +1,19 @@
 <template>
   <div class="content-inner">
     <div class="top">
-      <!-- <div class="server-avatar"></div> -->
+      <profile-picture
+        class="server-avatar"
+        size="100px"
+        :url="update.avatar || `${avatarDomain}/${server.avatar}` "
+      />
+      <div class="button" @click="$refs.avatarBrowser.click()">Edit Avatar</div>
+        <input
+          ref="avatarBrowser"
+          type="file"
+          accept=".jpeg, .jpg, .png, .gif"
+          class="hidden"
+          @change="avatarChangeEvent"
+        >
       <div class="input">
         <div class="input-title">Server Name</div>
         <input
@@ -22,7 +34,7 @@
           @change="changeEvent('default_channel_id', $event.channelID)"
         />
       </div>
-      <div class="button save-button" v-if="changed" @click="updateServer()">Save Changes</div>
+      <div class="button save-button" :class="{disabled: requestSent}" v-if="changed" @click="updateServer()">{{requestSent ? 'Saving...' : 'Save Changes'}}</div>
     </div>
   </div>
 </template>
@@ -31,15 +43,19 @@
 import config from "@/config.js";
 import { bus } from "@/main";
 import Spinner from "@/components/Spinner.vue";
+import ProfilePicture from "@/components/ProfilePictureTemplate.vue";
 import ServerService from "@/services/ServerService";
 import DropDown from "./DropDownMenu";
 import { mapState } from "vuex";
+import path from "path";
 
 export default {
-  components: { Spinner, DropDown },
+  components: { Spinner, DropDown, ProfilePicture },
   data() {
     return {
+      requestSent: false,
       changed: false,
+      avatarDomain: config.domain + "/avatars/",
       update: {}
     };
   },
@@ -51,10 +67,31 @@ export default {
       this.$set(this.update, name, value);
     },
     async updateServer() {
+      if (this.requestSent) return;
+      this.requestSent = true;
       const {ok, error, result} = await ServerService.updateServer(this.server.server_id, this.update);
       if (ok) {
         this.update = {};
+        this.requestSent = false;
       }
+    },
+    avatarChangeEvent(e) {
+      const file = event.target.files[0];
+      const _this = this;
+      event.target.value = "";
+      const allowedFormats = [".png", ".jpeg", ".gif", ".jpg"];
+      if (!allowedFormats.includes(path.extname(file.name).toLowerCase())) {
+        console.log("Invalid format.")
+      }
+      let reader = new FileReader();
+      reader.readAsDataURL(file);
+      
+      reader.onload = function () {
+        _this.$set(_this.update, 'avatar', reader.result);
+      };
+      reader.onerror = function (error) {
+        console.log('Error: ', error);
+      };
     }
   },
   watch: {
@@ -102,14 +139,12 @@ export default {
   flex-direction: column;
 }
 .server-avatar {
-  background: grey;
-  height: 90px;
-  width: 90px;
-  border-radius: 50%;
-  flex-shrink: 0;
+  align-self: center;
+  margin: 10px;
 }
 .top {
   display: flex;
+  flex-direction: column;
   width: 100%;
   justify-content: center;
 }
@@ -158,6 +193,13 @@ export default {
 .save-button {
   margin-top: 50px;
 }
+.save-button.disabled {
+  background: rgba(59, 59, 59, 0.692);
+}
+
+.hidden {
+  display: none;
+}
 </style>
 
 

src/components/app/Popouts/Popouts/ServerSettingsPanels/ServerSettings.vue

@@ -75,8 +75,8 @@ export default {
 }
 .inner {
   margin: auto;
-  height: 400px;
-  width: 600px;
+  height: 500px;
+  width: 700px;
   background: rgba(32, 32, 32, 0.87);
   display: flex;
   color: white;

src/components/app/Popouts/Popouts/SettingsPanels/MyProfile.vue

@@ -109,10 +109,10 @@ export default {
       if (!allowedFormats.includes(path.extname(file.name).toLowerCase())) {
         this.alert.content = "Upload failed - Unsupported image file.";
         return (this.alert.show = true);
-      } else if (file.size >= 10490000) {
-        // 10490000 = 10mb
+      } else if (file.size >= 2092000) {
+        // 2092000 = 2mb
         this.alert.content =
-          "Upload failed - Image size must be less than 10 megabytes.";
+          "Upload failed - Image size must be less than 2 megabytes.";
         return (this.alert.show = true);
       }
       const formData = new FormData();

src/components/app/ServerTemplate/ServerTemplate.vue

@@ -4,7 +4,7 @@
       <profile-picture
         v-if="!mode"
         size="50px"
-        :url="tempImage"
+        :url="`${avatarDomain}/${serverData.avatar}`"
       />
       <div
         v-if="mode === 'ADD_SERVER'"
@@ -74,7 +74,7 @@ export default {
     return {
       showContextMenu: false,
       showChannels: false,
-      tempImage: config.domain + "/avatars/noob"
+      avatarDomain: config.domain + "/avatars"
     };
   },
   computed: {