From 4e2fd7baf9a2c1d1e02ada6100b8c9aa91ffb81a Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 21 Mar 2022 20:39:56 +0200 Subject: [PATCH 1/2] fix bot indicator appearing on retweeter avatar --- src/components/status/status.js | 6 ++++++ src/components/status/status.vue | 2 +- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/src/components/status/status.js b/src/components/status/status.js index 4c0ef3e0..e54be241 100644 --- a/src/components/status/status.js +++ b/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)) diff --git a/src/components/status/status.vue b/src/components/status/status.vue index 1679834e..3de4c471 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -77,7 +77,7 @@ From 9478a462a7e3e83af0c9580f016cdc9f3654e274 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 21 Mar 2022 20:59:25 +0200 Subject: [PATCH 2/2] improve the looks of bot indicator --- src/components/user_avatar/user_avatar.vue | 104 +++++++++++++-------- 1 file changed, 63 insertions(+), 41 deletions(-) diff --git a/src/components/user_avatar/user_avatar.vue b/src/components/user_avatar/user_avatar.vue index 847d654b..b19ce89b 100644 --- a/src/components/user_avatar/user_avatar.vue +++ b/src/components/user_avatar/user_avatar.vue @@ -1,24 +1,28 @@ @@ -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 { - 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 { + &.-compact { width: 32px; height: 32px; border-radius: $fallback--avatarAltRadius; border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius); } - &.-placeholder { - background-color: $fallback--fg; - background-color: var(--fg, $fallback--fg); + .avatar { + width: 100%; + 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); + } + }