Page MenuHomePhorge
Files F85830130

No OneTemporary
Actions

Authored By
Unknown
Size
3 KB
Referenced Files
None
Subscribers
None

View Options

diff --git a/src/components/user_avatar/user_avatar.js b/src/components/user_avatar/user_avatar.js
index 855ea60e85..8092ba62ba 100644
--- a/src/components/user_avatar/user_avatar.js
+++ b/src/components/user_avatar/user_avatar.js
@@ -1,43 +1,62 @@
import StillImage from '../still-image/still-image.vue'
import { useInterfaceStore } from 'src/stores/interface'
import { library } from '@fortawesome/fontawesome-svg-core'
import {
faRobot,
faPeopleGroup
} from '@fortawesome/free-solid-svg-icons'
library.add(
faRobot,
faPeopleGroup
)
const UserAvatar = {
- props: [
- 'user',
- 'compact',
- 'showActorTypeIndicator',
- 'url'
- ],
+ props: {
+ // User object to show avatar of
+ user: {
+ required: true,
+ type: Object
+ },
+ // Use less space and use alternative roundness
+ compact: {
+ required: false,
+ type: Boolean,
+ default: false
+ },
+ // Show small icon indicating if account is a bot or group
+ showActorTypeIndicator : {
+ required: false,
+ type: Boolean,
+ default: false
+ },
+ // Override avatar image URL, useful for profile editing
+ url: {
+ required: false,
+ type: String,
+ default: null
+ }
+ },
data () {
return {
showPlaceholder: false,
defaultAvatar: `${this.$store.state.instance.server + this.$store.state.instance.defaultAvatar}`,
betterShadow: useInterfaceStore().browserSupport.cssFilter
}
},
components: {
StillImage
},
methods: {
imgSrc (src) {
return (!src || this.showPlaceholder) ? this.defaultAvatar : src
},
imageLoadError () {
this.showPlaceholder = true
}
}
}
export default UserAvatar
diff --git a/src/components/user_avatar/user_avatar.vue b/src/components/user_avatar/user_avatar.vue
index e3398165ce..c0336d4072 100644
--- a/src/components/user_avatar/user_avatar.vue
+++ b/src/components/user_avatar/user_avatar.vue
@@ -1,92 +1,92 @@
<template>
<span
class="Avatar"
:class="{ '-compact': compact }"
>
<StillImage
v-if="user"
class="avatar"
:alt="user.screen_name_ui"
:title="user.screen_name_ui"
:src="url ? url : 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="showActorTypeIndicator && user?.actor_type === 'Service'"
icon="robot"
class="actor-type-indicator"
/>
<FAIcon
v-if="showActorTypeIndicator && user?.actor_type === 'Group'"
icon="people-group"
class="actor-type-indicator"
/>
</span>
</template>
<script src="./user_avatar.js"></script>
<style lang="scss">
.Avatar {
--_avatarShadowBox: var(--shadow);
--_avatarShadowFilter: var(--shadowFilter);
--_avatarShadowInset: var(--shadowInset);
--_still-image-label-visibility: hidden;
display: inline-block;
position: relative;
- width: 48px;
+ width: 3.5em;
height: 48px;
&.-compact {
- width: 32px;
- height: 32px;
+ width: 2.2em;
+ height: 2.2em;
border-radius: var(--roundness);
}
.avatar {
width: 100%;
height: 100%;
box-shadow: var(--_avatarShadowBox);
border-radius: var(--roundness);
&.-better-shadow {
box-shadow: var(--_avatarShadowInset);
filter: var(--_avatarShadowFilter);
}
&.-animated::before {
display: none;
}
&.-compact {
border-radius: var(--roundness);
}
&.-placeholder {
background-color: var(--background);
}
}
img {
width: 100%;
height: 100%;
}
.actor-type-indicator {
position: absolute;
bottom: 0;
right: 0;
margin: -0.2em;
padding: 0.2em;
background: rgb(127 127 127 / 50%);
color: #fff;
border-radius: var(--roundness);
}
}
</style>

File Metadata

Mime Type
text/x-diff
Expires
Sun, Nov 1, 2:10 AM (17 h, 45 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
1802217
Default Alt Text
(3 KB)

Event Timeline