Merge branch 'fix-mentions-new-bugs' into shigusegubu

* fix-mentions-new-bugs:
  fix amps in links
  make chat messages behave same as posts for animated gifs
  support width/height img attributes
  lint
  better phrasing?
  options to disable (You)s and highlighting of yourself
  fix poast mentions tripping
  fix alignment issues

src/components/chat_message/chat_message.scss

@@ -1,6 +1,7 @@
 @import '../../_variables.scss';
 
 .chat-message-wrapper {
+
   &.hovered-message-chain {
     .animated.Avatar {
       canvas {
@@ -40,6 +41,12 @@
   .chat-message {
     display: flex;
     padding-bottom: 0.5em;
+
+    .status-body:hover {
+      --_still-image-img-visibility: visible;
+      --_still-image-canvas-visibility: hidden;
+      --_still-image-label-visibility: hidden;
+    }
   }
 
   .avatar-wrapper {

src/components/mention_link/mention_link.js

@@ -87,7 +87,7 @@ const MentionLink = {
     classnames () {
       return [
         {
-          '-you': this.isYou,
+          '-you': this.isYou && this.shouldBoldenYou,
           '-highlighted': this.highlight
         },
         this.highlightType
@@ -115,6 +115,12 @@ const MentionLink = {
     shouldShowAvatar () {
       return this.mergedConfig.mentionLinkShowAvatar
     },
+    shouldShowYous () {
+      return this.mergedConfig.mentionLinkShowYous
+    },
+    shouldBoldenYou () {
+      return this.mergedConfig.mentionLinkBoldenYou
+    },
     shouldFadeDomain () {
       return this.mergedConfig.mentionLinkFadeDomain
     },

src/components/mention_link/mention_link.scss

@@ -3,7 +3,7 @@
 .MentionLink {
   position: relative;
   white-space: normal;
-  display: inline-block;
+  display: inline-flex;
   color: var(--link);
 
   & .new,

src/components/mention_link/mention_link.vue

@@ -45,8 +45,8 @@
           v-html="'@' + serverName"
         /></span>
         <span
-          v-if="isYou"
+          v-if="isYou && shouldShowYous"
-          class="you"
+          :class="{ '-you': shouldBoldenYou }"
         >{{ $t('status.you') }}</span>
         <!-- eslint-enable vue/no-v-html -->
       </a>

src/components/popover/popover.vue

@@ -33,7 +33,7 @@
 @import '../../_variables.scss';
 
 .popover-trigger-button {
-  display: block;
+  display: inline-block;
 }
 
 .popover {

src/components/rich_content/rich_content.jsx

@@ -60,7 +60,7 @@ export default Vue.component('RichContent', {
   // NEVER EVER TOUCH DATA INSIDE RENDER
   render (h) {
     // Pre-process HTML
-    const { newHtml: html } = preProcessPerLine(this.html, this.greentext)
+    const { newHtml: html } = preProcessPerLine(unescape(this.html), this.greentext)
     let currentMentions = null // Current chain of mentions, we group all mentions together
     // This is used to recover spacing removed when parsing mentions
     let lastSpacing = ''
@@ -120,7 +120,8 @@ export default Vue.component('RichContent', {
           // don't include spaces when processing mentions - we'll include them
           // in MentionsLine
           lastSpacing = item
-          return currentMentions !== null ? item.trim() : item
+          // Don't remove last space in a container (fixes poast mentions)
+          return (index !== array.length - 1) && (currentMentions !== null) ? item.trim() : item
         }
 
         currentMentions = null

src/components/settings_modal/tabs/general_tab.vue

@@ -152,6 +152,11 @@
             {{ $t('settings.greentext') }}
           </BooleanSetting>
         </li>
+        <li>
+          <BooleanSetting path="mentionLinkShowYous">
+            {{ $t('settings.show_yous') }}
+          </BooleanSetting>
+        </li>
         <li>
           <ChoiceSetting
             id="mentionLinkDisplay"
@@ -186,6 +191,11 @@
               {{ $t('settings.mention_link_fade_domain') }}
             </BooleanSetting>
           </li>
+          <li>
+            <BooleanSetting path="mentionLinkBoldenYou">
+              {{ $t('settings.mention_link_bolden_you') }}
+            </BooleanSetting>
+          </li>
         </ul>
       </ul>
     </div>

src/components/status/status.scss

@@ -164,18 +164,24 @@ $status-margin: 0.75em;
     position: relative;
     align-content: baseline;
     font-size: 12px;
-    line-height: 160%;
+    margin-top: 0.2em;
+    line-height: 130%;
     max-width: 100%;
     align-items: stretch;
   }
 
   & .reply-to-popover,
-  & .reply-to-no-popover {
+  & .reply-to-no-popover,
+  & .mentions {
     min-width: 0;
     margin-right: 0.4em;
     flex-shrink: 0;
   }
 
+  .reply-glued-label {
+    margin-right: 0.5em;
+  }
+
   .reply-to-popover {
     .reply-to:hover::before {
       content: '';
@@ -209,7 +215,6 @@ $status-margin: 0.75em;
   & .reply-to {
     white-space: nowrap;
     position: relative;
-    padding-right: 0.25em;
   }
 
   & .mentions-text,

src/components/status/status.vue

@@ -227,7 +227,7 @@
             >
               <span
                 v-if="isReply"
-                class="glued-label"
+                class="glued-label reply-glued-label"
               >
                 <StatusPopover
                   v-if="!isPreview"

src/components/still-image/still-image.js

@@ -5,7 +5,9 @@ const StillImage = {
     'mimetype',
     'imageLoadError',
     'imageLoadHandler',
-    'alt'
+    'alt',
+    'height',
+    'width'
   ],
   data () {
     return {
@@ -15,6 +17,13 @@ const StillImage = {
   computed: {
     animated () {
       return this.stopGifs && (this.mimetype === 'image/gif' || this.src.endsWith('.gif'))
+    },
+    style () {
+      const appendPx = (str) => /\d$/.test(str) ? str + 'px' : str
+      return {
+        height: this.height ? appendPx(this.height) : null,
+        width: this.width ? appendPx(this.width) : null
+      }
     }
   },
   methods: {

src/components/still-image/still-image.vue

@@ -2,6 +2,7 @@
   <div
     class="still-image"
     :class="{ animated: animated }"
+    :style="style"
   >
     <canvas
       v-if="animated"

src/i18n/en.json

@@ -495,8 +495,10 @@
     "mention_link_show_tooltip": "Show full user names as tooltip for remote users",
     "mention_link_show_avatar": "Show user avatar beside the link",
     "mention_link_fade_domain": "Fade domains (e.g. @example.org in @foo@example.org)",
+    "mention_link_bolden_you": "Highlight mention of you when you are mentioned",
     "fun": "Fun",
     "greentext": "Meme arrows",
+    "show_yous": "Show (You)s",
     "notifications": "Notifications",
     "notification_setting_filters": "Filters",
     "notification_setting_block_from_strangers": "Block notifications from users who you do not follow",

src/modules/config.js

@@ -76,6 +76,8 @@ export const defaultState = {
   mentionLinkShowTooltip: undefined, // instance default
   mentionLinkShowAvatar: undefined, // instance default
   mentionLinkFadeDomain: undefined, // instance default
+  mentionLinkShowYous: undefined, // instance default
+  mentionLinkBoldenYou: undefined, // instance default
   hidePostStats: undefined, // instance default
   hideUserStats: undefined, // instance default
   virtualScrolling: undefined, // instance default

src/modules/instance.js

@@ -25,6 +25,8 @@ const defaultState = {
   mentionLinkShowTooltip: true,
   mentionLinkShowAvatar: false,
   mentionLinkFadeDomain: true,
+  mentionLinkShowYous: false,
+  mentionLinkBoldenYou: true,
   hideFilteredStatuses: false,
   // bad name: actually hides posts of muted USERS
   hideMutedPosts: false,