WIP(inbox): restyle and refactor

website/client/components/chat/chatCard.vue

@@ -1,8 +1,8 @@
 <template lang="pug">
 div
   .mentioned-icon(v-if='isUserMentioned')
-  .message-hidden(v-if='!inbox && msg.flagCount === 1 && user.contributor.admin') Message flagged once, not hidden
-  .message-hidden(v-if='!inbox && msg.flagCount > 1 && user.contributor.admin') Message hidden
+  .message-hidden(v-if='msg.flagCount === 1 && user.contributor.admin') Message flagged once, not hidden
+  .message-hidden(v-if='msg.flagCount > 1 && user.contributor.admin') Message hidden
   .card-body
     user-link(:userId="msg.uuid", :name="msg.user", :backer="msg.backer", :contributor="msg.contributor")
     p.time
@@ -11,28 +11,24 @@ div
       span(v-b-tooltip="", :title="msg.timestamp | date") {{ msg.timestamp | timeAgo }}&nbsp;
       span(v-if="msg.client && user.contributor.level >= 4")  ({{ msg.client }})
     .text(v-html='atHighlight(parseMarkdown(msg.text))')
-    .reported(v-if="isMessageReported && (inbox === true)")
-      span(v-once) {{ $t('reportedMessage')}}
-      br
-      span(v-once) {{ $t('canDeleteNow') }}
     hr
     .d-flex(v-if='msg.id')
-      .action.d-flex.align-items-center(v-if='!inbox', @click='copyAsTodo(msg)')
-        .svg-icon(v-html="icons.copy")
-        div {{$t('copyAsTodo')}}
-      .action.d-flex.align-items-center(v-if='(inbox || (user.flags.communityGuidelinesAccepted && msg.uuid !== "system")) && !isMessageReported', @click='report(msg)')
+      .action.d-flex.align-items-center(@click='copyAsTodo(msg)')
+        .svg-icon(v-html="icons.copy", v-once)
+        div(v-once) {{ $t('copyAsTodo') }}
+      .action.d-flex.align-items-center(v-if='user.flags.communityGuidelinesAccepted && msg.uuid !== "system" && !isMessageReported', @click='report(msg)')
         .svg-icon(v-html="icons.report", v-once)
-        div(v-once) {{$t('report')}}
-      .action.d-flex.align-items-center(v-if='msg.uuid === user._id || inbox || user.contributor.admin', @click='remove()')
+        div(v-once) {{ $t('report') }}
+      .action.d-flex.align-items-center(v-if='msg.uuid === user._id || user.contributor.admin', @click='remove()')
         .svg-icon(v-html="icons.delete", v-once)
-        div(v-once) {{$t('delete')}}
-      .ml-auto.d-flex(v-b-tooltip="{title: likeTooltip(msg.likes[user._id])}", v-if='!inbox')
+        div(v-once) {{ $t('delete') }}
+      .ml-auto.d-flex(v-b-tooltip="{title: likeTooltip(msg.likes[user._id])}")
         .action.d-flex.align-items-center.mr-0(@click='like()', v-if='likeCount > 0', :class='{active: msg.likes[user._id]}')
           .svg-icon(v-html="icons.liked", :title='$t("liked")')
           | +{{ likeCount }}
         .action.d-flex.align-items-center.mr-0(@click='like()', v-if='likeCount === 0', :class='{active: msg.likes[user._id]}')
           .svg-icon(v-html="icons.like", :title='$t("like")')
-      span(v-if='!msg.likes[user._id] && !inbox') {{ $t('like') }}
+      span(v-if='!msg.likes[user._id]') {{ $t('like') }}
 </template>
 
 <style lang="scss">
@@ -122,7 +118,6 @@ div
 </style>
 
 <script>
-import axios from 'axios';
 import moment from 'moment';
 import cloneDeep from 'lodash/cloneDeep';
 import escapeRegExp from 'lodash/escapeRegExp';
@@ -143,10 +138,6 @@ export default {
   components: {userLink},
   props: {
     msg: {},
-    inbox: {
-      type: Boolean,
-      default: false,
-    },
     groupId: {},
   },
   data () {
@@ -255,11 +246,6 @@ export default {
       const message = this.msg;
       this.$emit('message-removed', message);
 
-      if (this.inbox) {
-        await axios.delete(`/api/v4/inbox/messages/${message.id}`);
-        return;
-      }
-
       await this.$store.dispatch('chat:deleteChat', {
         groupId: this.groupId,
         chatId: message.id,

website/client/components/chat/chatMessages.vue

@@ -3,30 +3,27 @@
   .row
     .col-12
       copy-as-todo-modal(:group-type='groupType', :group-name='groupName', :group-id='groupId')
-  div(v-for="(msg, index) in messages", v-if='chat && canViewFlag(msg)', :class='{row: inbox}')
-    .d-flex(v-if='user._id !== msg.uuid', :class='{"flex-grow-1": inbox}')
+  div(v-for="(msg, index) in messages", v-if='chat && canViewFlag(msg)')
+    .d-flex(v-if='user._id !== msg.uuid')
       avatar.avatar-left(
         v-if='msg.userStyles || (cachedProfileData[msg.uuid] && !cachedProfileData[msg.uuid].rejected)',
         :member="msg.userStyles || cachedProfileData[msg.uuid]",
         :avatarOnly="true",
         :overrideTopPadding='"14px"',
         :hideClassBadge='true',
         @click.native="showMemberModal(msg.uuid)",
-        :class='{"inbox-avatar-left": inbox}'
       )
-      .card(:class='{"col-10": inbox}')
+      .card
         chat-card(
           :msg='msg',
-          :inbox='inbox',
           :groupId='groupId',
           @message-liked='messageLiked',
           @message-removed='messageRemoved',
           @show-member-modal='showMemberModal')
-    .d-flex(v-if='user._id === msg.uuid', :class='{"flex-grow-1": inbox}')
-      .card(:class='{"col-10": inbox}')
+    .d-flex(v-if='user._id === msg.uuid')
+      .card
         chat-card(
           :msg='msg',
-          :inbox='inbox',
           :groupId='groupId',
           @message-liked='messageLiked',
           @message-removed='messageRemoved',
@@ -38,7 +35,6 @@
         :hideClassBadge='true',
         :overrideTopPadding='"14px"',
         @click.native="showMemberModal(msg.uuid)",
-        :class='{"inbox-avatar-right": inbox}'
       )
 </template>
 
@@ -55,16 +51,6 @@
     margin-right: 2rem;
   }
 
-  .inbox-avatar-left {
-    margin-left: -1rem;
-    margin-right: 2.5rem;
-    min-width: 5rem;
-  }
-
-  .inbox-avatar-right {
-    margin-left: -3.5rem;
-  }
-
   .hr {
     width: 100%;
     height: 20px;
@@ -109,10 +95,6 @@ import chatCard from './chatCard';
 export default {
   props: {
     chat: {},
-    inbox: {
-      type: Boolean,
-      default: false,
-    },
     groupType: {},
     groupId: {},
     groupName: {},
@@ -255,11 +237,6 @@ export default {
       this.chat.splice(chatIndex, 1, message);
     },
     messageRemoved (message) {
-      if (this.inbox) {
-        this.$emit('message-removed', message);
-        return;
-      }
-
       const chatIndex = findIndex(this.chat, chatMessage => {
         return chatMessage.id === message.id;
       });

website/client/components/groups/membersModal.vue

@@ -353,7 +353,7 @@ export default {
   },
   methods: {
     sendMessage (member) {
-      this.$root.$emit('habitica::new-inbox-message', {
+      this.$root.$emit('habitica::new-private-message', {
         userIdToMessage: member._id,
         displayName: member.profile.name,
         username: member.auth.local.username,

website/client/components/header/menu.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
 div
-  inbox-modal
+  messages-modal
   creator-intro
   profileModal
   report-flag-modal
@@ -346,7 +346,7 @@ import svgHourglasses from 'assets/svg/hourglass.svg';
 import logo from 'assets/svg/logo.svg';
 
 import creatorIntro from '../creatorIntro';
-import InboxModal from '../userMenu/inbox.vue';
+import messagesModal from '../messages/messages.vue';
 import notificationMenu from './notificationsDropdown';
 import profileModal from '../userMenu/profileModal';
 import sendGemsModal from 'client/components/payments/sendGemsModal';
@@ -357,7 +357,7 @@ import reportFlagModal from '../chat/reportFlagModal';
 export default {
   components: {
     creatorIntro,
-    InboxModal,
+    messagesModal,
     notificationMenu,
     profileModal,
     reportFlagModal,

website/client/components/header/notifications/newPrivateMessage.vue

@@ -0,0 +1,28 @@
+<template lang="pug">
+  base-notification(
+    :can-remove="canRemove",
+    :has-icon="false",
+    :notification="notification",
+    :read-after-click="true",
+    @click="action"
+  )
+    div(slot="content")
+      span(v-html="$t('userSentMessage', {user: notification.data.sender.name})")
+      .notification-small.notification-ellipses {{ notification.data.excerpt }}
+</template>
+
+<script>
+  import BaseNotification from './base';
+
+  export default {
+    props: ['notification', 'canRemove'],
+    components: {
+      BaseNotification,
+    },
+    methods: {
+      action () {
+        this.$root.$emit('bv::show::modal', 'messages-modal');
+      },
+    },
+  };
+</script>

website/client/components/header/notificationsDropdown.vue

@@ -90,7 +90,7 @@ import GROUP_TASK_APPROVED from './notifications/groupTaskApproved';
 import UNALLOCATED_STATS_POINTS from './notifications/unallocatedStatsPoints';
 import NEW_MYSTERY_ITEMS from './notifications/newMysteryItems';
 import CARD_RECEIVED from './notifications/cardReceived';
-import NEW_INBOX_MESSAGE from './notifications/newInboxMessage';
+import NEW_INBOX_MESSAGE from './notifications/newPrivateMessage';
 import NEW_CHAT_MESSAGE from './notifications/newChatMessage';
 import WORLD_BOSS from './notifications/worldBoss';
 import VERIFY_USERNAME from './notifications/verifyUsername';

website/client/components/header/userDropdown.vue

@@ -8,7 +8,7 @@ menu-dropdown.item-user(:right="true")
     a.dropdown-item.edit-avatar.dropdown-separated(@click='showAvatar()')
       h3 {{ user.profile.name }}
       span.small-text {{ $t('editAvatar') }}
-    a.nav-link.dropdown-item.dropdown-separated.d-flex.justify-content-between.align-items-center(@click.prevent='showInbox()')
+    a.nav-link.dropdown-item.dropdown-separated.d-flex.justify-content-between.align-items-center(@click.prevent='showPrivateMessages()')
       div {{ $t('messages') }}
       message-count(v-if='user.inbox.newMessages > 0', :count="user.inbox.newMessages")
     a.dropdown-item(@click='showAvatar("backgrounds", "2019")') {{ $t('backgrounds') }}
@@ -96,10 +96,10 @@ export default {
       this.$store.state.avatarEditorOptions.subpage = subpage;
       this.$root.$emit('bv::show::modal', 'avatar-modal');
     },
-    showInbox () {
+    showPrivateMessages () {
       markPMSRead(this.user);
       axios.post('/api/v4/user/mark-pms-read');
-      this.$root.$emit('bv::show::modal', 'inbox-modal');
+      this.$root.$emit('bv::show::modal', 'messages-modal');
     },
     showProfile (startingPage) {
       this.$router.push({name: startingPage});