Merge branch 'bot-indicator-fixes' into 'develop'

Bot indicator fixes

See merge request pleroma/pleroma-fe!1477

src/components/status/status.js

@@ -225,12 +225,18 @@ const Status = {
     muteWordHits () {
       return muteWordHits(this.status, this.muteWords)
     },
+    rtBotStatus () {
+      return this.statusoid.user.bot
+    },
     botStatus () {
       return this.status.user.bot
     },
     botIndicator () {
       return this.botStatus && !this.hideBotIndication
     },
+    rtBotIndicator () {
+      return this.rtBotStatus && !this.hideBotIndication
+    },
     mentionsLine () {
       if (!this.headTailLinks) return []
       const writtenSet = new Set(this.headTailLinks.writtenMentions.map(_ => _.url))

src/components/status/status.vue

@@ -77,7 +77,7 @@
         <UserAvatar
           v-if="retweet"
           class="left-side repeater-avatar"
-          :bot="botIndicator"
+          :bot="rtBotIndicator"
           :better-shadow="betterShadow"
           :user="statusoid.user"
         />

src/components/user_avatar/user_avatar.vue

@@ -1,24 +1,28 @@
 <template>
+  <span
+    class="Avatar"
+    :class="{ '-compact': compact }"
+    >
     <StillImage
       v-if="user"
-    class="Avatar"
+      class="avatar"
       :alt="user.screen_name_ui"
       :title="user.screen_name_ui"
       :src="imgSrc(user.profile_image_url_original)"
-    :class="{ 'avatar-compact': compact, 'better-shadow': betterShadow }"
       :image-load-error="imageLoadError"
-  >
+      :class="{ '-compact': compact, '-better-shadow': betterShadow }"
+    />
+    <div
+      v-else
+      class="avatar -placeholder"
+      :class="{ '-compact': compact }"
+    />
     <FAIcon
       v-if="bot"
       icon="robot"
       class="bot-indicator"
     />
-  </StillImage>
-  <div
-    v-else
-    class="Avatar -placeholder"
-    :class="{ 'avatar-compact': compact }"
-  />
+  </span>
 </template>
 
 <script src="./user_avatar.js"></script>
@@ -31,35 +35,35 @@
   --_avatarShadowInset: var(--avatarStatusShadowInset);
   --_still-image-label-visibility: hidden;
 
+  display: inline-block;
+  position: relative;
   width: 48px;
   height: 48px;
+
+  &.-compact {
+    width: 32px;
+    height: 32px;
+    border-radius: $fallback--avatarAltRadius;
+    border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
+  }
+
+  .avatar {
+    width: 100%;
+    height: 100%;
     box-shadow: var(--_avatarShadowBox);
     border-radius: $fallback--avatarRadius;
     border-radius: var(--avatarRadius, $fallback--avatarRadius);
 
-  img {
-    width: 100%;
-    height: 100%;
-  }
-
-  & > .bot-indicator {
-    position: absolute;
-    bottom: 0;
-    right: 0;
-  }
-
-  &.better-shadow {
+    &.-better-shadow {
       box-shadow: var(--_avatarShadowInset);
       filter: var(--_avatarShadowFilter);
     }
 
-  &.animated::before {
+    &.-animated::before {
       display: none;
     }
 
-  &.avatar-compact {
-    width: 32px;
-    height: 32px;
+    &.-compact {
       border-radius: $fallback--avatarAltRadius;
       border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
     }
@@ -69,4 +73,22 @@
       background-color: var(--fg, $fallback--fg);
     }
   }
+
+  img {
+    width: 100%;
+    height: 100%;
+  }
+
+  .bot-indicator {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    margin: -0.2em;
+    padding: 0.2em;
+    background: rgba(127, 127, 127, 0.5);
+    color: #fff;
+    border-radius: var(--tooltipRadius);
+  }
+
+}
 </style>