bug fix, sound new notification sound, mute busy.

src/components/ProfilePictureTemplate.vue

@@ -39,6 +39,7 @@ export default {
 .profile-picture {
   position: relative;
   border-radius: 50%;
+  flex-shrink: 0;
 }
 .inner-profile-picture {
   background-color: rgba(0, 0, 0, 0.315);

src/components/app/MyMiniInformation.vue

@@ -6,14 +6,18 @@
       <div class="tag">@{{user.tag}}</div>
 
       <div class="status" v-on:click="status.isPoppedOut = !status.isPoppedOut">
-        <img class="current-status" :src="getStatus"/>
+        <img class="current-status" :src="getStatus">
         <i class="material-icons expand-status-icon">expand_more</i>
         <transition name="show-status-list">
-          <statusList v-if="status.isPoppedOut" v-click-outside="closeMenus" class="status-popout" />
+          <statusList v-if="status.isPoppedOut" v-click-outside="closeMenus" class="status-popout"/>
         </transition>
       </div>
     </div>
-    <div class="setting-icon survay-button" v-if="!user.survey_completed || user.survey_completed === false" @click="openSurvey">
+    <div
+      class="setting-icon survay-button"
+      v-if="!user.survey_completed || user.survey_completed === false"
+      @click="openSurvey"
+    >
       <div class="survay-inner">
         <i class="material-icons">error</i>
       </div>
@@ -25,10 +29,10 @@
 </template>
 
 <script>
-import {bus} from '../../main';
+import { bus } from "../../main";
-import config from '@/config.js'
+import config from "@/config.js";
-import statusList from '../../components/app/statusList.vue'
+import statusList from "../../components/app/statusList.vue";
-import settingsService from '@/services/settingsService'
+import settingsService from "@/services/settingsService";
 import ProfilePicture from "@/components/ProfilePictureTemplate.vue";
 
 export default {
@@ -39,51 +43,54 @@ export default {
   data() {
     return {
       status: {
-        isPoppedOut: false,
+        isPoppedOut: false
       }
-    }
+    };
   },
   methods: {
     closeMenus() {
       this.status.isPoppedOut = false;
     },
-    openSurvey(){
+    openSurvey() {
       this.$store.dispatch("setPopoutVisibility", {
         name: "surveyPopout",
         visibility: true
       });
     },
-    async changeStatus (status){
+    async changeStatus(status) {
       // emit to server to change their status.
-      const {ok, error, result} = await settingsService.setStatus(status);
+      const { ok, error, result } = await settingsService.setStatus(status);
       if (ok && result.data.status == true) {
-        this.$store.dispatch('changeStatus', result.data.set)
+        this.$store.dispatch("changeStatus", result.data.set);
       }
     },
     openSettings() {
-      this.$store.dispatch('setPopoutVisibility', {name: 'settings', visibility: true})
+      this.$store.dispatch("setPopoutVisibility", {
+        name: "settings",
+        visibility: true
+      });
     }
   },
-   created() {
+  created() {
     //When user changes their own status (statusList.vue)
-    bus.$on('status-change', this.changeStatus)
+    bus.$on("status-change", this.changeStatus);
-
   },
-  beforeDestroy(){
+  beforeDestroy() {
-    bus.$off('status-change', this.changeStatus)
+    bus.$off("status-change", this.changeStatus);
   },
   computed: {
     user() {
-      return this.$store.getters.user
+      return this.$store.getters.user;
     },
     avatar() {
-      return config.domain + "/avatars/" +this.$store.getters.user.avatar
+      return config.domain + "/avatars/" + this.$store.getters.user.avatar;
     },
     getStatus() {
-      return require(`./../../assets/status/${this.$store.getters.user.status || 0}.svg`) 
+      return require(`./../../assets/status/${this.$store.getters.user.status ||
+        0}.svg`);
     }
   }
-}
+};
 </script>
 
 
@@ -91,7 +98,7 @@ export default {
 <style scoped>
 .survay-button {
   padding: 10px;
-    height: 24px;
+  height: 24px;
   width: 24px;
 }
 .survay-inner {
@@ -107,18 +114,21 @@ export default {
   width: 24px;
   font-size: 30px;
   color: cyan;
- }
-
-.show-status-list-enter-active, .show-status-list-leave-active {
-  transition: .1s;
 }
-.show-status-list-enter, .show-status-list-leave-to {
+
+.show-status-list-enter-active,
+.show-status-list-leave-active {
+  transition: 0.1s;
+}
+.show-status-list-enter,
+.show-status-list-leave-to {
   opacity: 0;
   transform: translateY(10px);
 }
 
-.fade-enter-active, .fade-leave-active {
+.fade-enter-active,
-  transition: opacity .2s;
+.fade-leave-active {
+  transition: opacity 0.2s;
 }
 .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
   opacity: 0;
@@ -132,18 +142,20 @@ export default {
   align-items: center;
 }
 
-.profile-picture{
+.profile-picture {
   margin-left: 10px;
   margin-right: 10px;
 }
 
-.information{
+.information {
   color: white;
   margin-top: -7px;
   flex: 1;
+  width: 100%;
+  overflow: hidden;
 }
 
-.setting-icon{
+.setting-icon {
   color: white;
   margin: auto;
   margin-right: 15px;
@@ -152,12 +164,11 @@ export default {
   cursor: default;
   user-select: none;
   transition: 0.3s;
-
 }
 .setting-icon:hover {
   background: rgba(0, 0, 0, 0.294);
 }
-.setting-icon .material-icons{
+.setting-icon .material-icons {
   display: block;
   margin: auto;
 }
@@ -170,19 +181,18 @@ export default {
   transition: 0.3s;
   user-select: none;
   border-radius: 10px;
-
 }
 
 .status:hover {
   background: rgba(26, 25, 25, 0.349);
 }
 
-.expand-status-icon{
+.expand-status-icon {
   opacity: 0;
   transition: 0.3s;
 }
 
-.status:hover .expand-status-icon{
+.status:hover .expand-status-icon {
   opacity: 1;
 }
 
@@ -195,6 +205,9 @@ export default {
 
 .name {
   margin-top: 10px;
+  text-overflow: ellipsis;
+  width: 100%;
+  overflow: hidden;
 }
 
 .tag {
@@ -204,7 +217,4 @@ export default {
   vertical-align: top;
   margin-top: 5px;
 }
-
-
-
 </style>

src/components/app/SettingsPanels/survey.vue

@@ -102,6 +102,16 @@ export default {
         const selectedCountryName = this.filterCountry[this.selected.country].name;
         countryIndex = this.surveyItems.countries.findIndex(el => el.name == selectedCountryName);
       }
+      if (this.selected.name && this.selected.name.length >100) {
+        this.surveyErrorMessage = "Name must be less that 100 characters."
+        this.surveyValidMessage = null;
+        return;
+      }
+      if (this.selected.about_me && this.selected.about_me.length >500) {
+        this.surveyErrorMessage = "About me must be less that 500 characters."
+        this.surveyValidMessage = null
+        return;
+      }
 
       const { ok, error, result } = await userService.setSurvey({
         name: this.selected.name,

src/components/app/userInformationPopout.vue

@@ -155,11 +155,11 @@ export default {
       );
     },
     openChat() {
-      // todo: find from friends array and later, create new channels for people who are not friends.
       this.$store.dispatch("openChat", {
         uniqueID: this.uniqueID,
         channelName: this.user.username
       });
+      this.$store.dispatch("setUserInformationPopout", null);
     },
     emojiParse(emoji) {
       if (emoji.startsWith("<img")) return emoji;

src/utils/changelog.js

@@ -1,4 +1,19 @@
 const config = [
+  {
+    version: 1.5,
+    title: 'New notification sound',
+    shortTitle: 'Profile Panel',
+    date: '22/04/2019',
+    headColor: "rgba(16, 0, 154, 0.77)",
+    new: [
+      "Do not disturb should now mute notification sounds.",
+      "New notification sound has been added."
+    ],
+    fix: [
+      "Clicking 'Send Message' should close the user panel.",
+      "Bug fixes with online status and notifications."
+    ]
+  },
   {
     version: 1,
     title: 'Profile Panel',

src/utils/notificationSound.js

@@ -1,13 +1,22 @@
 import notificationSound from '@/assets/sounds/Notification.mp3';
 import newFriendSound from '@/assets/sounds/FriendRequest.mp3';
+import {
+	store
+} from '@/store/index';
 
 export default  {
     notification: () => {
+        if (isBusy()) return;
         const audio = new Audio(notificationSound);
         audio.play();
     },
     newFriend: () => {
+        if (isBusy()) return;
         const audio = new Audio(newFriendSound);
         audio.play();
     }
 }
+
+function isBusy(){
+ return store.getters.user.status == 3
+}