From 977f9d517497f187a6764c9be22a8ba6b2999f70 Mon Sep 17 00:00:00 2001
From: Matteo Pagliazzi <matteopagliazzi@gmail.com>
Date: Thu, 8 Jun 2017 18:24:40 -0700
Subject: [PATCH] Client: party members in header (#8804)

* wip party members in header

* wip

* add inbox routes back

* polishing
---
 website/client/components/appHeader.vue     | 45 ++++++++++---
 website/client/components/appMenu.vue       |  2 +-
 website/client/components/avatar.vue        |  1 +
 website/client/components/memberDetails.vue | 75 +++++++++++++++++++--
 website/client/router.js                    | 41 ++++++-----
 website/common/locales/en/newClient.json    |  1 +
 6 files changed, 127 insertions(+), 38 deletions(-)

diff --git a/website/client/components/appHeader.vue b/website/client/components/appHeader.vue
index 8597139483..f632de7a0f 100644
--- a/website/client/components/appHeader.vue
+++ b/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();
diff --git a/website/client/components/appMenu.vue b/website/client/components/appMenu.vue
index adb44cff02..cd4d431f6a 100644
--- a/website/client/components/appMenu.vue
+++ b/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') }}
diff --git a/website/client/components/avatar.vue b/website/client/components/avatar.vue
index 1865c4ad5e..ce5ff5c483 100644
--- a/website/client/components/avatar.vue
+++ b/website/client/components/avatar.vue
@@ -52,6 +52,7 @@
   height: 147px;
   image-rendering: pixelated;
   position: relative;
+  cursor: pointer;
 }
 
 .character-sprites {
diff --git a/website/client/components/memberDetails.vue b/website/client/components/memberDetails.vue
index da78dff25d..ad7afde2a7 100644
--- a/website/client/components/memberDetails.vue
+++ b/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 {
diff --git a/website/client/router.js b/website/client/router.js
index 3a9618bb49..a835643494 100644
--- a/website/client/router.js
+++ b/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 },
diff --git a/website/common/locales/en/newClient.json b/website/common/locales/en/newClient.json
index 42b82b083f..8ea63085a6 100644
--- a/website/common/locales/en/newClient.json
+++ b/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.",