Client: party members in header (#8804)

* wip party members in header

* wip

* add inbox routes back

* polishing

website/client/components/appHeader.vue

@@ -1,18 +1,24 @@
 <template lang="pug">
 #app-header.row
-  member-details(:member="user", :expanded="true")
-  .no-party.d-flex.justify-content-center.text-center(v-if="!user.party._id")
+  member-details(:member="user", @click="$router.push({name: 'avatar'})")
+  .party-members.d-flex(v-if="partyMembers && partyMembers.length > 1")
+    member-details(
+      v-for="member in partyMembers",
+      :key="member._id",
+      v-if="member._id !== user._id",
+      :member="member",
+      condensed=true,
+      @click="expandMember(member._id)"
+      :expanded="member._id === expandedMember",
+    )
+    button.btn.btn-primary {{ $t('viewParty') }}
+  .no-party.d-flex.justify-content-center.text-center(v-else)
     .align-self-center(v-once)
       h3 {{ $t('battleWithFriends') }}
       span.small-text(v-html="$t('inviteFriendsParty')")
       br
+      // TODO link to party creation
       button.btn.btn-primary {{ $t('startAParty') }}
-  div(v-else)
-    member-details(
-      v-for="member in partyMembers",
-      :key="member._id",
-      :member="member",
-    )
 </template>
 
 <style lang="scss" scoped>
@@ -24,11 +30,18 @@
   background: $purple-50;
   height: 204px;
   color: $header-color;
+  flex-wrap: nowrap;
+}
+
+.no-party, .party-members {
+  flex-grow: 1;
+}
+
+.party-members {
+  overflow-x: auto;
 }
 
 .no-party {
-  flex-grow: 1;
-
   .small-text {
     color: $header-color;
   }
@@ -52,6 +65,11 @@ export default {
   components: {
     MemberDetails,
   },
+  data () {
+    return {
+      expandedMember: null,
+    };
+  },
   computed: {
     ...mapGetters({
       user: 'user:data',
@@ -62,6 +80,13 @@ export default {
     ...mapActions({
       getPartyMembers: 'party:getMembers',
     }),
+    expandMember (memberId) {
+      if (this.expandedMember === memberId) {
+        this.expandedMember = null;
+      } else {
+        this.expandedMember = memberId;
+      }
+    },
   },
   created () {
     this.getPartyMembers();

website/client/components/appMenu.vue

@@ -44,7 +44,7 @@ nav.navbar.navbar-inverse.fixed-top.navbar-toggleable-sm
         router-link.dropdown-item.edit-avatar(:to="{name: 'avatar'}") 
           h3 {{ user.profile.name }}
           span.small-text {{ $t('editAvatar') }}
-        //.dropdown-divider
+        router-link.dropdown-item(:to="{name: 'inbox'}") {{ $t('inbox') }}
         router-link.dropdown-item(:to="{name: 'stats'}") {{ $t('stats') }}
         router-link.dropdown-item(:to="{name: 'achievements'}") {{ $t('achievements') }}
         router-link.dropdown-item(:to="{name: 'settings'}") {{ $t('settings') }}

website/client/components/avatar.vue

@@ -52,6 +52,7 @@
   height: 147px;
   image-rendering: pixelated;
   position: relative;
+  cursor: pointer;
 }
 
 .character-sprites {

website/client/components/memberDetails.vue

@@ -1,7 +1,7 @@
 <template lang="pug">
-.d-flex
-  avatar#header-avatar(:member="member")
-  div(v-if="expanded")
+.d-flex.member-details(:class="{ condensed, expanded }")
+  avatar(:member="member", @click.native="$emit('click')",)
+  .member-stats
     h3.character-name 
       | {{member.profile.name}}
       .is-buffed(v-if="isBuffed")
@@ -27,12 +27,69 @@
 <style lang="scss" scoped>
 @import '~client/assets/scss/colors.scss';
 
+.member-details {
+  white-space: nowrap;
+  margin-top: 24px;
+  margin-bottom: 24px;
+  transition: all .15s ease;
+}
+
+.member-stats {
+  padding-left: 16px;
+  padding-right: 24px;
+  height: auto;
+  opacity: 1;
+  transition: all 0.15s ease-out;
+}
+
+.member-details.condensed:not(.expanded) .member-stats {
+  opacity: 0;
+  height: 0;
+  padding: 0;
+  width: 0;
+}
+
+// Condensed version
+.member-details.condensed.expanded {
+  background: $header-dark-background;
+  padding-top: 9px;
+  margin-top: 15px;
+  border-radius: 4px;
+  padding-left: 9px;
+  box-shadow: 0 2px 2px 0 rgba($black, 0.16), 0 1px 4px 0 rgba($black, 0.12);
+
+  .is-buffed {
+    background-color: $purple-50;
+  }
+
+  .member-stats {
+    padding-right: 16px;
+  }
+
+  .progress-container > .svg-icon {
+    width: 19px;
+    height: 19px;
+    margin-top: -2px;
+  }
+
+  .progress-container > .progress {
+    width: 152px;
+    border-radius: 0px;
+    height: 10px;
+    margin-top: 2px;
+  }
+
+  .progress-container > .progress > .progress-bar {
+    border-radius: 0px;
+    height: 10px;
+  }
+}
+
 .small-text {
   color: $header-color;
 }
 
 .character-name {
-  margin-top: 24px;
   margin-bottom: 1px;
   color: $white;
 }
@@ -60,7 +117,6 @@
 }
 
 #header-avatar {
-  margin-top: 24px;
   margin-right: 16px;
 }
 
@@ -118,7 +174,14 @@ export default {
       type: Object,
       required: true,
     },
-    expanded: Boolean,
+    condensed: {
+      type: Boolean,
+      default: false,
+    },
+    expanded: {
+      type: Boolean,
+      default: false,
+    },
   },
   data () {
     return {

website/client/router.js

@@ -1,7 +1,8 @@
 import Vue from 'vue';
 import VueRouter from 'vue-router';
 
-// import EmptyView from './components/emptyView';
+import EmptyView from './components/emptyView';
+
 // TODO Dummy elements used as placeholder until real components are implemented
 import ParentPage from './components/parentPage';
 import Page from './components/page';
@@ -21,9 +22,8 @@ const EquipmentPage = () => import(/* webpackChunkName: "inventory" */'./compone
 const StablePage = () => import(/* webpackChunkName: "inventory" */'./components/inventory/stable');
 
 // Social
-// TODO add inbox back
-// import InboxPage from './components/social/inbox/index';
-// import InboxConversationPage from './components/social/inbox/conversationPage';
+const InboxPage = () => import(/* webpackChunkName: "inbox" */ './components/social/inbox/index');
+const InboxConversationPage = () => import(/* webpackChunkName: "inbox" */ './components/social/inbox/conversationPage');
 
 // Guilds
 const GuildIndex = () => import(/* webpackChunkName: "guilds" */ './components/guilds/index');
@@ -80,28 +80,27 @@ export default new VueRouter({
     },
     { name: 'challenges', path: 'challenges', component: Page },
     { name: 'party', path: 'party', component: Page },
-    /* TODO add inbox back
-      {
-        path: 'inbox',
-        component: EmptyView,
-        children: [
-          {
-            name: 'inbox',
-            path: '',
-            component: InboxPage,
-          },
-          {
-            name: 'conversation',
-            path: 'conversation/:id',
-            component: InboxConversationPage,
-          },
-        ],
-      }, */
     {
       path: '/user',
       component: ParentPage,
       children: [
         { name: 'avatar', path: 'avatar', component: Page },
+        {
+          path: 'inbox',
+          component: EmptyView,
+          children: [
+            {
+              name: 'inbox',
+              path: '',
+              component: InboxPage,
+            },
+            {
+              name: 'conversation',
+              path: 'conversation/:id',
+              component: InboxConversationPage,
+            },
+          ],
+        },
         { name: 'stats', path: 'stats', component: Page },
         { name: 'achievements', path: 'achievements', component: Page },
         { name: 'settings', path: 'settings', component: Page },

website/common/locales/en/newClient.json

@@ -1,4 +1,5 @@
 {
+  "viewParty": "View Party",
   "shops": "Shops",
   "faq": "FAQ",
   "costumePopoverText": "Select \"Use Costume\" to equip items to your avatar without affecting the stats from your Battle Gear! This means that you can dress up your avatar in whatever outfit you like while still having your best Battle Gear equipped.",