redesigned mini profile information

src/components/ProfilePictureTemplate.vue

@@ -90,6 +90,9 @@ export default {
   -webkit-transform: translateZ(0) scale(1, 1);
   transform: translateZ(0);
 }
+.hoverable {
+  cursor: pointer;
+}
 .hoverable:hover {
   filter: brightness(80%);
 }

src/components/app/MyMiniInformation.vue

@@ -1,54 +1,32 @@
 <template>
-  <div
+  <div class="my-mini-information">
-    class="my-mini-information"
+    <ProfilePicture
-
+      class="avatar"
-    @mouseover="hover = true" @mouseleave="hover = false"
+      :url="`${avatar}${hover ? '' : '?type=png'}`"
-    
+      :admin="user.admin"
-  >
+      size="40px"
-    <div class="profile-pic-outer">
+      :hover="true"
-      <profile-picture
+      @click.native="openUserInformation" 
-        :url="`${avatar}${hover ? '' : '?type=png'}`"
+    />
-        :admin="user.admin"
-        size="35px"
-        :hover="true"
-        @click.native="openUserInformation"
-      />
-    </div>
     <div class="information">
-      <div class="name">
+      <div class="username">{{user.username}}</div>
-        {{ user.username }}
+      <div class="tag">@{{user.tag}}</div>
-      </div>
-      <div class="tag">
-        @{{ user.tag }}
-      </div>
-
-      <div
-        class="status"
-        @click="status.isPoppedOut = !status.isPoppedOut"
-      >
-        <img
-          class="current-status"
-          :src="getStatus"
-        >
-        <i class="material-icons expand-status-icon">expand_less</i>
-        <transition name="show-status-list">
-          <statusList
-            v-if="status.isPoppedOut"
-            v-click-outside="closeMenus"
-            class="status-popout"
-          />
-        </transition>
-      </div>
     </div>
     <div 
-      v-if="!user.survey_completed || user.survey_completed === false"
+      class="status-button"
-      class="setting-icon survay-button"
+      @click="status.isPoppedOut = !status.isPoppedOut"
-      @click="openSurvey"
     >
-      <div class="survay-inner">
+      <statusList
-        <i class="material-icons">error</i>
+        v-if="status.isPoppedOut"
-      </div>
+        v-click-outside="closeMenus"
+        class="status-popout"
+      />
+      <img
+        class="status"
+        :src="getStatus"
+      />
     </div>
+
   </div>
 </template>
 
@@ -101,7 +79,7 @@ export default {
       this.$store.dispatch('setUserInformationPopout', this.user.uniqueID)
     },
     closeMenus(event) {
-      if (event.target.closest('.status')) return;
+      if (event.target.closest('.status-button')) return;
       this.status.isPoppedOut = false;
     },
     openSurvey() {
@@ -124,134 +102,62 @@ export default {
 
 
 
-<style scoped>
+<style scoped lang="scss">
-.profile-pic-outer{
-  z-index:9999;
-  display: flex;
-  margin-left: 10px;
-  margin-right: 10px;
-  cursor: pointer;
-}
-.survay-button {
-  padding: 10px;
-  height: 24px;
-  width: 24px;
-}
-.survay-inner {
-  display: inline-block;
-  box-shadow: 0px 0px 20px 3px cyan;
-  border-radius: 50%;
-}
-.survay-button .material-icons {
-  display: block;
-  margin-left: -3px !important;
-  margin-top: -3px !important;
-  height: 24px;
-  width: 24px;
-  font-size: 30px;
-  color: cyan;
-  cursor: pointer;
-}
-
-.show-status-list-enter-active,
-.show-status-list-leave-active {
-  transition: 0.2s;
-}
-.show-status-list-enter,
-.show-status-list-leave-to {
-  opacity: 0;
-  transform: translateY(20px);
-}
-
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.2s;
-}
-.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
-  opacity: 0;
-}
 
 .my-mini-information {
-  position: relative;
-  background: rgba(0, 0, 0, 0.3);;
-  height: 50px;
   display: flex;
+  position: relative;
+  background: rgba(0, 0, 0, 0.5);
+  flex-shrink: 0;
   align-items: center;
+  height: 60px;
   transition: 0.3s;
+}
+
+.avatar {
+  margin-left: 10px;
   flex-shrink: 0;
 }
 
-
 .information {
+  display: flex;
+  flex-direction: column;
   color: white;
-  margin-top: -4px;
-  flex: 1;
-  width: 100%;
-  overflow: hidden;
-}
-
-.setting-icon {
-  color: white;
-  margin: auto;
-  margin-right: 15px;
-  padding: 5px;
-  border-radius: 50%;
-  user-select: none;
-  transition: 0.3s;
-  cursor: pointer;
-}
-.setting-icon:hover {
-  background: rgba(0, 0, 0, 0.294);
-}
-.setting-icon .material-icons {
-  display: block;
-  margin: auto;
-}
-.status {
-  display: inline-block;
-  padding-top: 1px;
-  padding-left: 5px;
-  margin-left: 10px;
-  margin-top: -10px;
-  transition: 0.3s;
-  user-select: none;
-  border-radius: 10px;
-  cursor: pointer;
-}
-
-.status:hover {
-  background: rgba(26, 25, 25, 0.349);
-}
-
-.expand-status-icon {
-  opacity: 0;
-  transition: 0.3s;
-}
-
-.status:hover .expand-status-icon {
-  opacity: 1;
-}
-
-.status .current-status {
-  width: 20px;
-  height: 20px;
-  background-size: 100%;
-  background-position: center;
-}
-
-.name {
-  margin-top: 10px;
-  text-overflow: ellipsis;
-  width: 100%;
   font-size: 14px;
+  margin-left: 5px;
   overflow: hidden;
+  flex: 1;
+  .username, .tag {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .tag {
+    font-size: 13px;
+    color: rgb(187, 187, 187);
+  }
 }
 
-.tag {
+
-  color: rgb(199, 199, 199);
+.status-button {
-  font-size: 11px;
+  display: flex;
-  display: inline-block;
+  justify-content: center;
-  vertical-align: top;
+  align-items: center;
-  margin-top: 1px;
+  height: 60px;
+  width: 60px;
+  transition: 0.2s;
+  margin-left: 3px;
+  user-select: none;
+  cursor: pointer;
+  .status {
+    height: 25px;
+    width: 25px;
+    flex-shrink: 0;
+  }
+  &:hover {
+    background: rgba(44, 44, 44, 0.596);
+  }
 }
+
+
 </style>

src/components/app/Navigation.vue

@@ -33,6 +33,12 @@
             @click="switchTab(3)"
             @mouseenter="localToolTipEvent('Changelog', $event)"
           >list_alt</div>
+          <div
+            v-if="!user.survey_completed"
+            class="item material-icons"
+            @click="openSurvey"
+            @mouseenter="localToolTipEvent('Click Me', $event)"
+          >error</div>
         </div>
         <div class="seperater" />
         <div class="server-items" v-if="currentTab === 2">
@@ -174,9 +180,18 @@ export default {
         show: true,
         type: "ADD_FRIEND",
       })
+    },
+    openSurvey() {
+      this.$store.dispatch("setPopoutVisibility", {
+        name: "surveyPopout",
+        visibility: true
+      });
     }
   },
   computed: {
+    user() {
+      return this.$store.getters.user;
+    },
     currentTab() {
       return this.$store.getters.currentTab;
     },
@@ -249,7 +264,7 @@ export default {
   flex-shrink: 0;
   height: 100%;
   width: 60px;
-  background-color: rgba(0, 0, 0, 0.5);
+  background-color: rgba(0, 0, 0, 0.3);
 }
 
 .container {

src/components/app/statusList.vue

@@ -1,4 +1,5 @@
 <template>
+  <transition name="show-status-list" appear="true">
   <div class="status-popout">
     <div
       class="status-list"
@@ -46,6 +47,7 @@
       ></span><span class="text">Offline</span>
     </div>
   </div>
+  </transition>
 </template>
 
 <script>
@@ -65,10 +67,20 @@ export default {
 
 <style scoped>
 
+.show-status-list-enter-active,
+.show-status-list-leave-active {
+  transition: 0.2s;
+}
+.show-status-list-enter,
+.show-status-list-leave-to {
+  opacity: 0;
+  transform: translateY(20px);
+}
+
 .status-popout{
   position: absolute;
-  bottom: 55px;
+  bottom: 60px;
-  left: 30px;
+  right: 0px;
   background: rgba(0, 0, 0, 0.7);
   backdrop-filter: blur(5px);
   width: 180px;
@@ -76,11 +88,12 @@ export default {
 }
 .status-list {
   padding: 10px;
-  transition: 0.3s;
+  transition: 0.2s;
   display: flex;
   align-items: center;
   align-content: center;
   flex-shrink: 0;
+  color: white;
 
 }