Merge remote-tracking branch 'origin/develop' into vue3-again

* origin/develop:
  improve the looks of bot indicator
  fix bot indicator appearing on retweeter avatar
  Update dependency localforage to v1.10.0
  Update dependency http-proxy-middleware to v0.21.0
  Update dependency eslint-plugin-standard to v4.1.0
  Update dependency eslint-plugin-import to v2.25.4
  Update babel monorepo to v7.17.8
  Update dependency iso-639-1 to v2.1.13
  Update dependency express to v4.17.3
  Update dependency eslint-plugin-promise to v4.3.1
  Update dependency eslint-loader to v2.2.1

package.json

@@ -16,7 +16,7 @@
     "lint-fix": "eslint --fix --ext .js,.vue src test/unit/specs test/e2e/specs"
   },
   "dependencies": {
-    "@babel/runtime": "7.17.7",
+    "@babel/runtime": "7.17.8",
     "@chenfengyuan/vue-qrcode": "1.0.2",
     "@fortawesome/fontawesome-svg-core": "1.3.0",
     "@fortawesome/free-regular-svg-icons": "5.15.4",
@@ -28,7 +28,7 @@
     "cropperjs": "1.5.12",
     "diff": "3.5.0",
     "escape-html": "1.0.3",
-    "localforage": "1.7.3",
+    "localforage": "1.10.0",
     "parse-link-header": "1.0.1",
     "phoenix": "1.4.0",
     "portal-vue": "2.1.7",
@@ -44,7 +44,7 @@
     "vuex": "4.0.2"
   },
   "devDependencies": {
-    "@babel/core": "7.17.7",
+    "@babel/core": "7.17.8",
     "@babel/plugin-transform-runtime": "7.17.0",
     "@babel/preset-env": "7.16.11",
     "@babel/register": "7.17.7",
@@ -69,20 +69,20 @@
     "eslint": "5.16.0",
     "eslint-config-standard": "12.0.0",
     "eslint-friendly-formatter": "2.0.7",
-    "eslint-loader": "2.1.2",
+    "eslint-loader": "2.2.1",
-    "eslint-plugin-import": "2.17.2",
+    "eslint-plugin-import": "2.25.4",
     "eslint-plugin-node": "7.0.1",
-    "eslint-plugin-promise": "4.1.1",
+    "eslint-plugin-promise": "4.3.1",
-    "eslint-plugin-standard": "4.0.0",
+    "eslint-plugin-standard": "4.1.0",
     "eslint-plugin-vue": "5.2.3",
     "eventsource-polyfill": "0.9.6",
-    "express": "4.16.4",
+    "express": "4.17.3",
     "file-loader": "3.0.1",
     "function-bind": "1.1.1",
     "html-webpack-plugin": "3.2.0",
-    "http-proxy-middleware": "0.17.4",
+    "http-proxy-middleware": "0.21.0",
     "inject-loader": "2.0.1",
-    "iso-639-1": "2.0.3",
+    "iso-639-1": "2.1.13",
     "isparta-loader": "2.0.0",
     "json-loader": "0.5.7",
     "karma": "3.1.4",

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

@@ -78,7 +78,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>
-  <StillImage
+  <span
-    v-if="user"
     class="Avatar"
-    :alt="user.screen_name_ui"
+    :class="{ '-compact': compact }"
-    :title="user.screen_name_ui"
+    >
-    :src="imgSrc(user.profile_image_url_original)"
+    <StillImage
-    :class="{ 'avatar-compact': compact, 'better-shadow': betterShadow }"
+      v-if="user"
-    :image-load-error="imageLoadError"
+      class="avatar"
-  >
+      :alt="user.screen_name_ui"
+      :title="user.screen_name_ui"
+      :src="imgSrc(user.profile_image_url_original)"
+      :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>
+  </span>
-  <div
-    v-else
-    class="Avatar -placeholder"
-    :class="{ 'avatar-compact': compact }"
-  />
 </template>
 
 <script src="./user_avatar.js"></script>
@@ -31,42 +35,60 @@
   --_avatarShadowInset: var(--avatarStatusShadowInset);
   --_still-image-label-visibility: hidden;
 
+  display: inline-block;
+  position: relative;
   width: 48px;
   height: 48px;
-  box-shadow: var(--_avatarShadowBox);
-  border-radius: $fallback--avatarRadius;
-  border-radius: var(--avatarRadius, $fallback--avatarRadius);
 
-  img {
+  &.-compact {
-    width: 100%;
-    height: 100%;
-  }
-
-  & > .bot-indicator {
-    position: absolute;
-    bottom: 0;
-    right: 0;
-  }
-
-  &.better-shadow {
-    box-shadow: var(--_avatarShadowInset);
-    filter: var(--_avatarShadowFilter);
-  }
-
-  &.animated::before {
-    display: none;
-  }
-
-  &.avatar-compact {
     width: 32px;
     height: 32px;
     border-radius: $fallback--avatarAltRadius;
     border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
   }
 
-  &.-placeholder {
+  .avatar {
-    background-color: $fallback--fg;
+    width: 100%;
-    background-color: var(--fg, $fallback--fg);
+    height: 100%;
+    box-shadow: var(--_avatarShadowBox);
+    border-radius: $fallback--avatarRadius;
+    border-radius: var(--avatarRadius, $fallback--avatarRadius);
+
+    &.-better-shadow {
+      box-shadow: var(--_avatarShadowInset);
+      filter: var(--_avatarShadowFilter);
+    }
+
+    &.-animated::before {
+      display: none;
+    }
+
+    &.-compact {
+      border-radius: $fallback--avatarAltRadius;
+      border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
+    }
+
+    &.-placeholder {
+      background-color: $fallback--fg;
+      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>