Sept 22 2 (#9067)

* Added show member modal when hero is clicked

* Added drag for checklist and fixed display system messages

* Fixed party modal showing from group page

* Delete new message key

* Adjusted column sizes for chat

* Fixed key

website/client/components/appHeader.vue

@@ -1,32 +1,33 @@
 <template lang="pug">
-#app-header.row(:class="{'hide-header': $route.name === 'groupPlan'}")
+div
   create-party-modal
-  members-modal(:hide-badge="true")
-  member-details(:member="user")
-  .view-party(v-if="user.party && user.party._id && partyMembers && partyMembers.length > 1")
-    // TODO button should open the party members modal
-    button.btn.btn-primary(@click='openPartyModal()') {{ $t('viewParty') }}
-  .party-members.d-flex(
-    v-if="partyMembers && partyMembers.length > 1",
-    v-resize="1500",
-    @resized="setPartyMembersWidth($event)"
-  )
-    member-details(
-      v-for="(member, $index) in partyMembers",
-      :key="member._id",
-      v-if="member._id !== user._id && $index < membersToShow",
-      :member="member",
-      condensed=true,
-      @onHover="expandMember(member._id)",
-      :expanded="member._id === expandedMember",
+  #app-header.row(:class="{'hide-header': $route.name === 'groupPlan'}")
+    members-modal(:hide-badge="true")
+    member-details(:member="user")
+    .view-party(v-if="user.party && user.party._id && partyMembers && partyMembers.length > 1")
+      // TODO button should open the party members modal
+      button.btn.btn-primary(@click='openPartyModal()') {{ $t('viewParty') }}
+    .party-members.d-flex(
+      v-if="partyMembers && partyMembers.length > 1",
+      v-resize="1500",
+      @resized="setPartyMembersWidth($event)"
     )
-  .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 or party page if partying solo
-      button.btn.btn-primary(@click='openPartyModal()') {{ $t('startAParty') }}
+      member-details(
+        v-for="(member, $index) in partyMembers",
+        :key="member._id",
+        v-if="member._id !== user._id && $index < membersToShow",
+        :member="member",
+        condensed=true,
+        @onHover="expandMember(member._id)",
+        :expanded="member._id === expandedMember",
+      )
+    .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 or party page if partying solo
+        button.btn.btn-primary(@click='openPartyModal()') {{ $t('startAParty') }}
 </template>
 
 <style lang="scss" scoped>

website/client/components/chat/chatMessages.vue

@@ -5,20 +5,20 @@
       copy-as-todo-modal(:copying-message='copyingMessage', :group-name='groupName', :group-id='groupId')
       report-flag-modal
 
-  div(v-for="(msg, index) in chat", v-if='chat && (inbox || Object.keys(cachedProfileData).length > 0) && canViewFlag(msg)')
+  div(v-for="(msg, index) in chat", v-if='chat && canViewFlag(msg)')
     // @TODO: is there a different way to do these conditionals? This creates an infinite loop
     //.hr(v-if='displayDivider(msg)')
       .hr-middle(v-once) {{ msg.timestamp }}
     .row(v-if='user._id !== msg.uuid')
-      .col-4
+      .col-2
         avatar(
           v-if='cachedProfileData[msg.uuid]',
-          :member="cachedProfileData[msg.uuid]", 
+          :member="cachedProfileData[msg.uuid]",
           :avatarOnly="true",
           :hideClassBadge='true',
           @click.native="showMemberModal(msg.uuid)",
         )
-      .card.col-8
+      .card.col-10
         .message-hidden(v-if='msg.flagCount > 0 && user.contributor.admin') Message Hidden
         .card-block
             h3.leader(
@@ -49,7 +49,7 @@
     // @TODO can we avoid duplicating all this code? Cannot we just push everything
     // to the right if the user is the author?
     .row(v-if='user._id === msg.uuid')
-      .card.col-8
+      .card.col-10
         .message-hidden(v-if='msg.flagCount > 0 && user.contributor.admin') Message Hidden - {{ msg.flagCount }} Flags
         .card-block
             h3.leader(
@@ -77,10 +77,10 @@
             span.action.float-right(v-if='likeCount(msg) > 0')
               .svg-icon(v-html="icons.liked")
               | + {{ likeCount(msg) }}
-      .col-4
+      .col-2
         avatar(
           v-if='cachedProfileData[msg.uuid]',
-          :member="cachedProfileData[msg.uuid]", 
+          :member="cachedProfileData[msg.uuid]",
           :avatarOnly="true",
           :hideClassBadge='true',
           @click.native="showMemberModal(msg.uuid)",

website/client/components/groups/group.vue

@@ -588,6 +588,7 @@ export default {
 
     if (this.user.newMessages[this.searchId]) {
       this.$store.dispatch('chat:markChatSeen', {groupId: this.searchId});
+      this.$delete(this.user.newMessages, this.searchId);
     }
   },
   beforeRouteUpdate (to, from, next) {

website/client/components/hall/heroes.vue

@@ -14,7 +14,7 @@
 
       .row
         .form.col-6(v-if='hero && hero.profile', submit='saveHero(hero)')
-          a(@click='clickMember(hero._id, true)')
+          a(@click='clickMember(hero, true)')
             h3 {{hero.profile.name}}
           .form-group
             input.form-control(type='text', v-model='hero.contributor.text', :placeholder="$t('contribTitle')")
@@ -82,11 +82,11 @@
             tr(v-for='(hero, index) in heroes')
               td
                 span(v-if='hero.contributor && hero.contributor.admin', :popover="$t('gamemaster')", popover-trigger='mouseenter', popover-placement='right')
-                  a.label.label-default(:class='userLevelStyle(hero)', @click='clickMember(hero._id, true)')
+                  a.label.label-default(:class='userLevelStyle(hero)', @click='clickMember(hero, true)')
                     | {{hero.profile.name}} 
                     //- span(v-class='userAdminGlyphiconStyle(hero)')
                 span(v-if='!hero.contributor || !hero.contributor.admin')
-                  a.label.label-default(v-if='hero.profile', v-class='userLevelStyle(hero)', @click='clickMember(hero._id, true)') {{hero.profile.name}}
+                  a.label.label-default(v-if='hero.profile', v-class='userLevelStyle(hero)', @click='clickMember(hero, true)') {{hero.profile.name}}
               td(v-if='user.contributor.admin', @click='populateContributorInput(hero._id, index)').btn-link {{hero._id}}
               td {{hero.contributor.level}}
               td {{hero.contributor.text}}
@@ -185,8 +185,10 @@ export default {
       window.scrollTo(0, 200);
       this.loadHero(id, index);
     },
-    clickMember () {
-      // @TODO: implement
+    clickMember (hero) {
+      this.$store.state.profileUser = hero;
+      this.$store.state.profileOptions.startingPage = 'profile';
+      this.$root.$emit('show::modal', 'profile');
     },
     userLevelStyle () {
       // @TODO: implement

website/client/components/tasks/taskModal.vue

@@ -23,6 +23,7 @@
           br
           div(v-sortable='', @onsort='sortedChecklist')
             .inline-edit-input-group.checklist-group.input-group(v-for="(item, $index) in checklist")
+              span.grippy
               input.inline-edit-input.checklist-item.form-control(type="text", v-model="item.text")
               span.input-group-btn(@click="removeChecklistItem($index)")
                 .svg-icon.destroy-icon(v-html="icons.destroy")
@@ -330,6 +331,30 @@
       border-top: 1px solid $gray-500;
     }
 
+    // From: https://codepen.io/zachariab/pen/wkrbc
+    span.grippy {
+      content: '....';
+      width: 20px;
+      height: 20px;
+      display: inline-block;
+      overflow: hidden;
+      line-height: 5px;
+      padding: 3px 4px;
+      cursor: move;
+      vertical-align: middle;
+      margin-top: .5em;
+      margin-right: .3em;
+      font-size: 12px;
+      font-family: sans-serif;
+      letter-spacing: 2px;
+      color: #cccccc;
+      text-shadow: 1px 0 1px black;
+    }
+
+    span.grippy::after {
+      content: '.. .. .. ..';
+    }
+
     .checklist-item {
       margin-bottom: 0px;
       border-radius: 0px;