@ -1,24 +1,28 @@
< template >
< StillImage
v - if = "user"
< span
class = "Avatar"
: alt = "user.screen_name_ui"
: title = "user.screen_name_ui"
: src = "imgSrc(user.profile_image_url_original)"
: class = "{ 'avatar-compact': compact, 'better-shadow': betterShadow }"
: image - load - error = "imageLoadError"
>
: class = "{ '-compact': compact }"
>
< StillImage
v - if = "user"
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 >
< div
v - else
class = "Avatar -placeholder"
: class = "{ 'avatar-compact': compact }"
/ >
< / span >
< / 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 : 48 px ;
height : 48 px ;
box - shadow : var ( -- _avatarShadowBox ) ;
border - radius : $fallback -- avatarRadius ;
border - radius : var ( -- avatarRadius , $fallback -- avatarRadius ) ;
img {
& . - compact {
width : 32 px ;
height : 32 px ;
border - radius : $fallback -- avatarAltRadius ;
border - radius : var ( -- avatarAltRadius , $fallback -- avatarAltRadius ) ;
}
. avatar {
width : 100 % ;
height : 100 % ;
}
box - shadow : var ( -- _avatarShadowBox ) ;
border - radius : $fallback -- avatarRadius ;
border - radius : var ( -- avatarRadius , $fallback -- avatarRadius ) ;
& > . bot - indicator {
position : absolute ;
bottom : 0 ;
right : 0 ;
}
& . - better - shadow {
box - shadow : var ( -- _avatarShadowInset ) ;
filter : var ( -- _avatarShadowFilter ) ;
}
& . better - shadow {
box - shadow : var ( -- _avatarShadowInset ) ;
filter : var ( -- _avatarShadowFilter ) ;
}
& . - animated : : before {
display : none ;
}
& . - compact {
border - radius : $fallback -- avatarAltRadius ;
border - radius : var ( -- avatarAltRadius , $fallback -- avatarAltRadius ) ;
}
& . animated : : before {
display : none ;
& . - placeholder {
background - color : $fallback -- fg ;
background - color : var ( -- fg , $fallback -- fg ) ;
}
}
& . avatar - compact {
width : 32 px ;
height : 32 px ;
border - radius : $fallback -- avatarAltRadius ;
border - radius : var ( -- avatarAltRadius , $fallback -- avatarAltRadius ) ;
img {
width : 100 % ;
height : 100 % ;
}
& . - placeholder {
background - color : $fallback -- fg ;
background - color : var ( -- fg , $fallback -- fg ) ;
. bot - indicator {
position : absolute ;
bottom : 0 ;
right : 0 ;
margin : - 0.2 em ;
padding : 0.2 em ;
background : rgba ( 127 , 127 , 127 , 0.5 ) ;
color : # fff ;
border - radius : var ( -- tooltipRadius ) ;
}
}
< / style >