[AP-121]-Friend req count (#554)

components/tailored/friends/nav/Nav.html

@@ -1,34 +1,44 @@
 <div id="friends-nav">
   <div v-if="$device.isMobile" class="spacer"></div>
-  <InteractablesButton 
-    size="small" 
-    :text="`${$device.isMobile ? '' : 'Active'}`" 
+  <InteractablesButton
+    size="small"
+    :text="$device.isMobile ? '' : 'Active'"
     :type="route === 'active' ? 'primary': 'dark'"
     :action="() => setRoute('active')"
-    >
+  >
     <user-icon size="1x" />
   </InteractablesButton>
-  <InteractablesButton 
-    size="small" 
-    :text="`${$device.isMobile ? '' : 'Requests'}`" 
-    :type="route === 'requests' ? 'primary' : 'dark'"
-    :action="() => setRoute('requests')"
+  <div>
+    <InteractablesButton
+      size="small"
+      :text="$device.isMobile ? '' : 'Requests'"
+      :type="route === 'requests' ? 'primary' : 'dark'"
+      :action="() => setRoute('requests')"
+      :style="`padding-right: ${friendRequestPadding}px`"
     >
-    <user-check-icon size="1x" />
-  </InteractablesButton>
-  <InteractablesButton 
+      <user-check-icon size="1x" />
+      <span
+        v-if="friends.incomingRequests.length"
+        :class="route === 'requests' ? 'label tag-inverted' : 'label tag'"
+      >
+        {{makeFriendReqTag}}
+      </span>
+    </InteractablesButton>
+  </div>
+  <InteractablesButton
     size="small"
-    :text="`${$device.isMobile ? '' : 'Blocked'}`" 
+    :text="$device.isMobile ? '' : 'Blocked'"
     :type="route === 'blocked' ? 'primary' : 'dark'"
-    :action="() => setRoute('blocked')">
+    :action="() => setRoute('blocked')"
+  >
     <user-x-icon size="1x" />
   </InteractablesButton>
-  <InteractablesButton 
+  <InteractablesButton
     size="small"
-    :text="`${$device.isMobile ? 'Add' : 'Add Friend'}`" 
+    :text="$device.isMobile ? 'Add' : 'Add Friend'"
     :type="route === 'add' ? 'primary' : 'dark'"
-    :action="() => setRoute('add')">
+    :action="() => setRoute('add')"
+  >
     <user-plus-icon size="1x" />
   </InteractablesButton>
-
-</div>
+</div>

components/tailored/friends/nav/Nav.less

@@ -10,7 +10,20 @@
     margin: 0 (@light-spacing / 2);
     justify-self: flex-end;
   }
+  .label {
+    position: absolute;
+    top: @xlight-spacing;
+    right: @xlight-spacing;
+    font-size: @micro-text-size;
+    background-color: @primary-color;
+    border-radius: 2px;
+    line-height: 1.2;
+    padding: 0.15rem 0.5rem;
+    color: @text;
+    font-family: @primary-font;
+  }
 }
+
 @media only screen and (max-width: @mobile-breakpoint) {
   #friends-nav {
     display: inline-flex;
@@ -21,4 +34,4 @@
       margin-left: 0.25rem;
     }
   }
-}
+}

components/tailored/friends/nav/Nav.vue

@@ -1,6 +1,7 @@
 <template src="./Nav.html" />
 <script lang="ts">
 import Vue from 'vue'
+import { mapState } from 'vuex'
 
 import {
   UserIcon,
@@ -26,6 +27,38 @@ export default Vue.extend({
       default: 'active',
     },
   },
+  computed: {
+    ...mapState(['friends']),
+    /**
+     * friendRequestPadding: calculates how much padding to add to a button depending on friendRequest length
+     * depending on the number of ongoing friend requests, it will generate a different px amount for padding-right
+     */
+    friendRequestPadding() {
+      const currentIncomingRequests =
+        this.friends.incomingRequests.length.toString()
+      const length = currentIncomingRequests.length
+
+      if (currentIncomingRequests === '0') {
+        return 11
+      }
+
+      if (length >= 3) {
+        return 46
+      }
+      return 22 + length * 8
+    },
+    /**
+     * makeFriendReqTag: generates the Request tag number on the Request Button
+     * depending on the number of ongoing friend requests, it will generate a different replyLength
+     */
+    makeFriendReqTag() {
+      const replyLength = this.friends.incomingRequests.length
+      if (replyLength >= 100) {
+        return '99+'
+      }
+      return replyLength
+    },
+  },
 })
 </script>
 <style scoped lang="less" src="./Nav.less"></style>