New client more misc (#8902)

* View party now opens member modal

* Clicking member in header opens member detail modal

* Began sticky header

* Added sleep

* Removed extra inbox and added name styles

* Lint fixes

* Added member filter

* Added task counts

* Updated quest start modal

* Updated members modal style

* Fixed editing party

* Updated tavern

* Updated my guilds

* More guild styles

* Many challenge styles and fixes

* Fixed notification menu display

* Added initial styles to groupplans

* Added syncing with inbox

* Fixed lint

* Added new edit profile layout

* Added initial achievement layout

* Began adding new stats layout

* Removed duplicate:

* fix(CI): attempt to address Travis Mongo connection issue

* fix(CI): don't strand us in Mongo shell

* Travis updates

* Try percise

website/client/components/userMenu/achievements.vue

@@ -1,48 +1,51 @@
 <template lang="pug">
-  .standard-page
-    h1 Achievements
+  .standard-page.container
+    .row(v-for='(category, key) in achievements')
+      h2.col-12 {{ $t(key+'Achievs') }}
+      .col-3.text-center(v-for='achievment in category.achievements')
+        div.achievement-container(:data-popover-html='achievment.title + achievment.text',
+          popover-placement='achievPopoverPlacement',
+          popover-append-to-body='achievAppendToBody')
+          div(popover-trigger='mouseenter',
+            :data-popover-html='achievment.title + achievment.text',
+            popover-placement='achievPopoverPlacement',
+            popover-append-to-body='achievAppendToBody')
+              .achievement(:class='achievment.icon + "2x"', v-if='achievment.earned')
+               .counter.badge.badge-info.stack-count(v-if='achievment.optionalCount') {{achievment.optionalCount}}
+              .achievement(class='achievement-unearned2x', v-if='!achievment.earned')
     .row
-      .col-12(v-for='(category, key) in achievements')
-        h2 {{ $t(key+'Achievs') }}
-        .row
-          .col-1(v-for='achievment in category.achievements')
-            div.achievement-container(:data-popover-html='achievment.title + achievment.text',
-              popover-placement='achievPopoverPlacement',
-              popover-append-to-body='achievAppendToBody')
-            div(popover-trigger='mouseenter',
-              :data-popover-html='achievment.title + achievment.text',
-              popover-placement='achievPopoverPlacement',
-              popover-append-to-body='achievAppendToBody')
-                .achievement(:class='achievment.icon + "2x"', v-if='achievment.earned')
-                 .counter.badge.badge-info.stack-count(v-if='achievment.optionalCount') {{achievment.optionalCount}}
-                .achievement(class='achievement-unearned2x', v-if='!achievment.earned')
-
-      .col-12(:class="{ muted: !user.achievements.challenges.length }")
-        h2(v-once) {{ $t('challengeWinner') }}
+      .col-6
+        h2 Challeges Won
         div(v-for='chal in user.achievements.challenges')
           span {{chal}}
-
-      .col-12(:class="{ muted: !user.achievements.quests }")
-        h2(v-once) {{ $t('completedQuests') }}
+      .col-6
+        h2 Quests Completed
         div(v-for='(value, key) in user.achievements.quests')
           span {{ content.quests[k].text() }}
           span {{ value }}
 </template>
 
-<style lang='scss' scoped>
+<style lang="scss" scoped>
   h2 {
     margin-top: 2em;
   }
 
   .achievement-container {
     margin-bottom: 1em;
+    padding: 2em;
+    background: #fff;
+  }
+
+  .achievement {
+    margin: 0 auto;
   }
 
   .counter.badge {
     color: #fff;
     position: absolute;
-    bottom: 0;
-    left: 44px;
+    top: 0;
+    right: 0;
+    background-color: #ff944c;
   }
 </style>
 

website/client/components/userMenu/inbox.vue

@@ -25,11 +25,11 @@
         .conversations(v-if='filtersConversations.length > 0')
           .conversation(v-for='conversation in conversations', @click='selectConversation(conversation.key)', :class="{active: selectedConversation === conversation.key}")
             div
-             span {{conversation.name}}
+             span(:class="userLevelStyle(conversation)") {{conversation.name}}
              span.timeago {{conversation.date}}
             div {{conversation.lastMessageText}}
       .col-8.messages
-        .message(v-for='message in currentMessages') {{message.text}}
+        chat-message.container-fluid(:chat.sync='activeChat')
 
         // @TODO: Implement new message header here when we fix the above
 
@@ -64,6 +64,7 @@
   .messages {
     position: relative;
     padding-left: 0;
+    padding-bottom: 6em;
   }
 
   .to-form input {
@@ -129,17 +130,22 @@
 <script>
 import moment from 'moment';
 import filter from 'lodash/filter';
+import sortBy from 'lodash/sortBy';
 import { mapState } from 'client/libs/store';
+import styleHelper from 'client/mixins/styleHelper';
 
 import bModal from 'bootstrap-vue/lib/components/modal';
 import bFormInput from 'bootstrap-vue/lib/components/form-input';
 
 import messageIcon from 'assets/svg/message.svg';
+import chatMessage from '../chat/chatMessages';
 
 export default {
+  mixins: [styleHelper],
   components: {
     bModal,
     bFormInput,
+    chatMessage,
   },
   data () {
     return {
@@ -150,6 +156,7 @@ export default {
       selectedConversation: '',
       search: '',
       newMessage: '',
+      activeChat: [],
     };
   },
   computed: {
@@ -160,7 +167,10 @@ export default {
         let message = this.user.inbox.messages[messageId];
         let userId = message.uuid;
 
-        if (!this.selectedConversation) this.selectedConversation = userId;
+        if (!this.selectedConversation) {
+          this.selectedConversation = userId;
+          this.selectConversation(userId);
+        }
 
         if (!conversations[userId]) {
           conversations[userId] = {
@@ -197,6 +207,10 @@ export default {
     },
     selectConversation (key) {
       this.selectedConversation = key;
+      this.activeChat = this.conversations[this.selectedConversation].messages;
+      this.activeChat = sortBy(this.activeChat, [(o) => {
+        return o.timestamp;
+      }]);
     },
     sendPrivateMessage () {
       this.$store.dispatch('members:sendPrivateMessage', {
@@ -208,6 +222,9 @@ export default {
         text: this.newMessage,
         timestamp: new Date(),
       });
+
+      this.activeChat = this.conversations[this.selectedConversation].messages;
+
       this.conversations[this.selectedConversation].lastMessageText = this.newMessage;
       this.conversations[this.selectedConversation].date = new Date();
 

website/client/components/userMenu/profile.vue

@@ -1,37 +1,44 @@
 <template lang="pug">
 .standard-page
-  h2 Profile
   .row
-    .col-md-12(v-if='!editing')
-      button.btn.btn-default(@click='editing = true') {{ $t('edit') }}
-      h2 {{ $t('displayName') }}
-      span(v-if='user.profile.name') {{user.profile.name}}
-      p
-        small.muted {{ $t('displayNameDescription1') }}
-          | &nbsp;
-          a(href='/#/options/settings/settings') {{ $t('displayNameDescription2') }}
-          | &nbsp;
-          | {{ $t('displayNameDescription3') }}
-      span.muted(ng-hide='user.profile.name') -&nbsp;
-        | {{ $t('none') }}
-        | &nbsp;-
+    .col-8
+      .header
+        h1 {{user.profile.name}}
+        h4
+          strong User Id:
+          | {{user._id}}
+    .col-4
+      button.btn.btn-secondary(@click='editing = !editing') Edit
+  .row(v-if='!editing')
+    .col-8
+      .about
+        h2 About
+        p {{user.profile.blurb}}
+      .photo
+        h2 Photo
+        img.img-rendering-auto(v-if='user.profile.imageUrl', :src='user.profile.imageUrl')
 
-      h2 {{ $t('displayPhoto') }}
-      img.img-rendering-auto(v-if='user.profile.imageUrl', :src='user.profile.imageUrl')
-      span.muted(ng-hide='user.profile.imageUrl') -&nbsp;
-        | {{ $t('none') }}
-        | &nbsp;-
+    .col-4
+      .info
+        h2 info
+        div
+          strong Joined:
+          | {{user.auth.timestamps.created}}
+        div
+          strong Total Log Ins:
+          span {{ $t('totalCheckins', {count: user.loginIncentives}) }}
+        div
+          | {{getProgressDisplay()}}
+          .progress
+            .progress-bar(role='progressbar', :aria-valuenow='incentivesProgress', aria-valuemin='0', aria-valuemax='100', :style='{width: incentivesProgress + "%"}')
+              span.sr-only {{ incentivesProgress }}% Complete
+      // @TODO: Implement in V2 .social
+
+  .row(v-if='editing')
+    h1 Edit Profile
+    .col-12
+      .alert.alert-info.alert-sm(v-html='$t("communityGuidelinesWarning", managerEmail)')
 
-      h2 {{ $t('displayBlurb') }}
-      markdown(v-if='user.profile.blurb', text='user.profile.blurb')
-      span.muted(ng-hide='user.profile.blurb') -&nbsp;
-        | {{ $t('none') }}
-        | &nbsp;-
-      //{{user.profile.blurb | linky:'_blank'}}
-    .col-md-12(v-if='editing')
-      .alert.alert-info.alert-sm
-        | {{ $t("communityGuidelinesWarning", managerEmail) }}
-      button.btn.btn-primary(type='submit', @click='save()') {{ $t("save") }}
       // TODO use photo-upload instead: https://groups.google.com/forum/?fromgroups=#!topic/derbyjs/xMmADvxBOak
       .form-group
         label {{ $t('displayName') }}
@@ -40,26 +47,35 @@
         label {{ $t('photoUrl') }}
         input.form-control(type='url', v-model='editingProfile.imageUrl', :placeholder="$t('imageUrl')")
       .form-group
-        label {{ $t('displayBlurb') }}
+        label {{ $t('about') }}
         textarea.form-control(rows=5, :placeholder="$t('displayBlurbPlaceholder')", v-model='editingProfile.blurb')
         // include ../../shared/formatting-help
-  .row
-    .col-md-6
-      h2 {{ $t('totalCheckinsTitle') }}
-      span {{ $t('totalCheckins', {count: user.loginIncentives}) }}
-    .col-md-6
-      h2
-        | {{getProgressDisplay()}}
-      .progress
-        .progress-bar(role='progressbar', :aria-valuenow='incentivesProgress', aria-valuemin='0', aria-valuemax='100', :style='{width: incentivesProgress + "%"}')
-          span.sr-only {{ incentivesProgress }}% Complete
+      .form-group
+        label Facebook
+        input.form-control(type='text', placeholder="Paste your link here", v-model='editingProfile.facebook')
+      .form-group
+        label Instagram
+        input.form-control(type='text', placeholder="Paste your link here", v-model='editingProfile.instagram')
+      .form-group
+        label Twitter
+        input.form-control(type='text', placeholder="Paste your link here", v-model='editingProfile.twitter')
+
+    .col-3.offset-6.text.center
+      button.btn.btn-primary(@click='save()') {{ $t("save") }}
+      button.btn.btn-warning(@click='editing = false') {{ $t("cancel") }}
 </template>
 
 <style lang="scss" scoped>
   @import '~client/assets/scss/colors.scss';
 
-  h2 {
-    margin-top: 2em;
+  .header {
+    h1 {
+      color: #4f2a93;
+    }
+
+    h4 {
+      color: #686274;
+    }
   }
 </style>
 

website/client/components/userMenu/stats.vue

@@ -1,6 +1,27 @@
 <template lang="pug">
   .standard-page
     h1 Stats
+    .row
+      .col-6
+        h2.text-center Equipment
+        .well.row
+          .col-4
+      .col-6
+        h2.text-center Costume
+    .row
+      .col-6
+        h2.text-center Pet
+      .col-6
+        h2.text-center Mount
+    .row
+      hr.col-12
+      h2.col-12 Attributes
+      .col-6
+      .col-6
+    .row
+      .col-6
+      .col-6
+
     .row
       .col-4
         div
@@ -147,7 +168,7 @@
                   :popover='$t(statInfo.allocatepop)') +
 </template>
 
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 
   .btn-xs {
     font-size: 12px;