Add bot indication to user icon on statuses

This commit is contained in:
Alexander Tumin 2022-03-01 00:35:00 +03:00
parent fe0ed7e8f0
commit 2b7f12613e
10 changed files with 43 additions and 3 deletions

View file

@ -115,6 +115,7 @@ const setSettings = async ({ apiConfig, staticConfig, store }) => {
copyInstanceOption('nsfwCensorImage') copyInstanceOption('nsfwCensorImage')
copyInstanceOption('background') copyInstanceOption('background')
copyInstanceOption('hidePostStats') copyInstanceOption('hidePostStats')
copyInstanceOption('hideBotIndication')
copyInstanceOption('hideUserStats') copyInstanceOption('hideUserStats')
copyInstanceOption('hideFilteredStatuses') copyInstanceOption('hideFilteredStatuses')
copyInstanceOption('logo') copyInstanceOption('logo')

View file

@ -47,6 +47,11 @@
{{ $t('settings.hide_post_stats') }} {{ $t('settings.hide_post_stats') }}
</BooleanSetting> </BooleanSetting>
</li> </li>
<li>
<BooleanSetting path="hideBotIndication">
{{ $t('settings.hide_bot_indication') }}
</BooleanSetting>
</li>
<ChoiceSetting <ChoiceSetting
id="replyVisibility" id="replyVisibility"
path="replyVisibility" path="replyVisibility"

View file

@ -169,6 +169,9 @@ const Status = {
botStatus () { botStatus () {
return this.status.user.bot return this.status.user.bot
}, },
botIndicator () {
return this.botStatus && !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))
@ -301,6 +304,9 @@ const Status = {
muteBotStatuses () { muteBotStatuses () {
return this.mergedConfig.muteBotStatuses return this.mergedConfig.muteBotStatuses
}, },
hideBotIndication () {
return this.mergedConfig.hideBotIndication
},
currentUser () { currentUser () {
return this.$store.state.users.currentUser return this.$store.state.users.currentUser
}, },

View file

@ -77,6 +77,7 @@
<UserAvatar <UserAvatar
v-if="retweet" v-if="retweet"
class="left-side repeater-avatar" class="left-side repeater-avatar"
:bot="botIndicator"
:better-shadow="betterShadow" :better-shadow="betterShadow"
:user="statusoid.user" :user="statusoid.user"
/> />
@ -124,6 +125,7 @@
@click.stop.prevent.capture.native="toggleUserExpanded" @click.stop.prevent.capture.native="toggleUserExpanded"
> >
<UserAvatar <UserAvatar
:bot="botIndicator"
:compact="compact" :compact="compact"
:better-shadow="betterShadow" :better-shadow="betterShadow"
:user="status.user" :user="status.user"
@ -407,7 +409,10 @@
class="gravestone" class="gravestone"
> >
<div class="left-side"> <div class="left-side">
<UserAvatar :compact="compact" /> <UserAvatar
:compact="compact"
:bot="botIndicator"
/>
</div> </div>
<div class="right-side"> <div class="right-side">
<div class="deleted-text"> <div class="deleted-text">

View file

@ -19,6 +19,7 @@
@load="onLoad" @load="onLoad"
@error="onError" @error="onError"
> >
<slot/>
</div> </div>
</template> </template>

View file

@ -1,10 +1,21 @@
import StillImage from '../still-image/still-image.vue' import StillImage from '../still-image/still-image.vue'
import { library } from '@fortawesome/fontawesome-svg-core'
import {
faRobot
} from '@fortawesome/free-solid-svg-icons'
library.add(
faRobot
)
const UserAvatar = { const UserAvatar = {
props: [ props: [
'user', 'user',
'betterShadow', 'betterShadow',
'compact' 'compact',
'bot'
], ],
data () { data () {
return { return {

View file

@ -7,7 +7,9 @@
:src="imgSrc(user.profile_image_url_original)" :src="imgSrc(user.profile_image_url_original)"
:class="{ 'avatar-compact': compact, 'better-shadow': betterShadow }" :class="{ 'avatar-compact': compact, 'better-shadow': betterShadow }"
:image-load-error="imageLoadError" :image-load-error="imageLoadError"
/> >
<FAIcon v-if="bot" icon="robot" class="bot-indicator" />
</StillImage>
<div <div
v-else v-else
class="Avatar -placeholder" class="Avatar -placeholder"
@ -36,6 +38,12 @@
height: 100%; height: 100%;
} }
& > .bot-indicator {
position: absolute;
bottom: 0;
right: 0;
}
&.better-shadow { &.better-shadow {
box-shadow: var(--_avatarShadowInset); box-shadow: var(--_avatarShadowInset);
filter: var(--_avatarShadowFilter); filter: var(--_avatarShadowFilter);

View file

@ -352,6 +352,7 @@
"hide_media_previews": "Hide media previews", "hide_media_previews": "Hide media previews",
"hide_muted_posts": "Hide posts of muted users", "hide_muted_posts": "Hide posts of muted users",
"mute_bot_posts": "Mute bot posts", "mute_bot_posts": "Mute bot posts",
"hide_bot_indication": "Hide bot indication in posts",
"hide_all_muted_posts": "Hide muted posts", "hide_all_muted_posts": "Hide muted posts",
"max_thumbnails": "Maximum amount of thumbnails per post (empty = no limit)", "max_thumbnails": "Maximum amount of thumbnails per post (empty = no limit)",
"hide_isp": "Hide instance-specific panel", "hide_isp": "Hide instance-specific panel",

View file

@ -80,6 +80,7 @@ export const defaultState = {
mentionLinkShowYous: undefined, // instance default mentionLinkShowYous: undefined, // instance default
mentionLinkBoldenYou: undefined, // instance default mentionLinkBoldenYou: undefined, // instance default
hidePostStats: undefined, // instance default hidePostStats: undefined, // instance default
hideBotIndication: undefined, // instance default
hideUserStats: undefined, // instance default hideUserStats: undefined, // instance default
virtualScrolling: undefined, // instance default virtualScrolling: undefined, // instance default
sensitiveByDefault: undefined // instance default sensitiveByDefault: undefined // instance default

View file

@ -33,6 +33,7 @@ const defaultState = {
hideMutedThreads: true, hideMutedThreads: true,
hideWordFilteredPosts: false, hideWordFilteredPosts: false,
hidePostStats: false, hidePostStats: false,
hideBotIndication: false,
hideSitename: false, hideSitename: false,
hideUserStats: false, hideUserStats: false,
muteBotStatuses: false, muteBotStatuses: false,