Locales Changing, PM Disabled Caption Added

website/client/components/userMenu/inbox.vue

@@ -37,14 +37,17 @@
              span(:class="userLevelStyle(conversation)") {{conversation.name}}
              span.timeago {{conversation.date | timeAgo}}
             div {{conversation.lastMessageText ? conversation.lastMessageText.substring(0, 30) : ''}}
-      .col-8.messages
+      .col-8.messages.d-flex.flex-column.justify-content-between
         .empty-messages.text-center(v-if='activeChat.length === 0 && !selectedConversation.key')
           .svg-icon.envelope(v-html="icons.messageIcon")
           h4(v-once) Nothing Here Yet
           p(v-once) Select a conversation on the left
         .empty-messages.text-center(v-if='activeChat.length === 0 && selectedConversation.key')
           p {{ $t('beginningOfConversation', {userName: selectedConversation.name})}}
-        chat-message.message-scroll(:chat.sync='activeChat', :inbox='true', ref="chatscroll")
+        chat-message.message-scroll(v-if="activeChat.length > 0", :chat.sync='activeChat', :inbox='true', ref="chatscroll")
+        .pm-disabled-caption.text-center(v-if="user.inbox.optOut && selectedConversation.key")
+          h4 {{$t('PMDisabledCaptionTitle')}}
+          p {{$t('PMDisabledCaptionText')}}
 
         // @TODO: Implement new message header here when we fix the above
 
@@ -97,7 +100,12 @@
 
   .message-scroll {
     max-height: 500px;
-    overflow: scroll;
+    overflow-x: scroll;
+
+    @media (min-width: 992px) {
+      overflow-x: hidden;
+      overflow-y: scroll;
+    }
   }
 
   .to-form input {
@@ -122,6 +130,27 @@
     }
   }
 
+  .pm-disabled-caption {
+
+    padding-top: 1em;
+    background-color: $gray-700;
+    z-index: 2;
+
+    h4, p {
+      color: $gray-300;
+    }
+
+    h4 {
+      margin-top: 0;
+      margin-bottom: 0.4em;
+    }
+
+    p {
+      font-size: 12px;
+      margin-bottom: 0;
+    }
+  }
+
   .new-message-row {
     background-color: $gray-700;
     position: absolute;
@@ -147,7 +176,8 @@
 
   .conversations {
     max-height: 400px;
-    overflow: scroll;
+    overflow-x: hidden;
+    overflow-y: scroll;
   }
 
   .conversation {
@@ -295,12 +325,12 @@ export default {
     optTextSet () {
       if (!this.user.inbox.optOut) {
         return {
-          switchDescription: this.$t('PMDisableFull'),
+          switchDescription: this.$t('PMDisable'),
           popoverText: this.$t('PMEnabledOptPopoverText'),
         };
       }
       return {
-        switchDescription: this.$t('PMEnableFull'),
+        switchDescription: this.$t('PMEnable'),
         popoverText: this.$t('PMDisabledOptPopoverText'),
       };
     },

website/common/locales/en/groups.json

@@ -128,18 +128,16 @@
   "send": "Send",
   "messageSentAlert": "Message sent",
   "pmHeading": "Private message to <%= name %>",
-  "pmsMarkedRead": "Your private messages have been marked as read",
+  "pmsMarkedRead": "Your Private Messages have been marked as read",
   "possessiveParty": "<%= name %>'s Party",
   "clearAll": "Delete All Messages",
   "confirmDeleteAllMessages": "Are you sure you want to delete all messages in your inbox? Other users will still see messages you have sent to them.",
-  "PMEnable": "Enable",
-  "PMEnableFull": "Enable private messages",
-  "PMDisable": "Disable",
-  "PMDisableFull": "Disable private messages",
-  "PMDisableConfirmation": "Are you sure you want to disable private messages? You still will be able to send messages, but no one will be able to send them to you.",
-  "PMEnabledOptPopoverText": "When private messages are disabled, you still can send messages, but no one can send them to you.",
+  "PMEnable": "Enable Private Messages",
+  "PMDisable": "Disable Private Messages",
+  "PMEnabledOptPopoverText": "When Private Messages are disabled, you still can send messages, but no one can send them to you.",
   "PMDisabledOptPopoverText": "Enable this option to be able to receive messages.",
-  "disabledPMCaptionTitle": "Private messages are disabled. You still can send messages, but no one can send them to you.",
+  "PMDisabledCaptionTitle": "Private Messages are disabled",
+  "PMDisabledCaptionText": "You still can send messages, but no one can send them to you.",
   "block": "Block",
   "unblock": "Un-block",
   "pm-reply": "Send a reply",