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

Bot indicator fixes

See merge request pleroma/pleroma-fe!1477
This commit is contained in:
HJ 2022-03-21 19:04:21 +00:00
commit 0ef58696bf
3 changed files with 70 additions and 42 deletions

View file

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

View file

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

View file

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