diff options
| author | Shpuld Shpludson <shp@cock.li> | 2020-11-06 17:27:25 +0000 |
|---|---|---|
| committer | Shpuld Shpludson <shp@cock.li> | 2020-11-06 17:27:25 +0000 |
| commit | 23232e1c8f35d7ddc8adb7a6dbf813b2831c90ec (patch) | |
| tree | b0c8c409d3af0901cb47de648ccbea53da89c16d /src/components/user_avatar/user_avatar.vue | |
| parent | b225c3578f3c89af5ed3a0be3f8f3a6bbcedcc7d (diff) | |
| parent | 60983ae42b584694de0211ca67ef72d492a293c9 (diff) | |
Merge branch 'develop' into 'master'
Merge develop into master for 2.2.0
See merge request pleroma/pleroma-fe!1278
Diffstat (limited to 'src/components/user_avatar/user_avatar.vue')
| -rw-r--r-- | src/components/user_avatar/user_avatar.vue | 22 |
1 files changed, 18 insertions, 4 deletions
diff --git a/src/components/user_avatar/user_avatar.vue b/src/components/user_avatar/user_avatar.vue index e4e4127c..0f7c584b 100644 --- a/src/components/user_avatar/user_avatar.vue +++ b/src/components/user_avatar/user_avatar.vue @@ -1,5 +1,6 @@ <template> <StillImage + v-if="user" class="Avatar" :alt="user.screen_name" :title="user.screen_name" @@ -7,6 +8,11 @@ :class="{ 'avatar-compact': compact, 'better-shadow': betterShadow }" :image-load-error="imageLoadError" /> + <div + v-else + class="Avatar -placeholder" + :class="{ 'avatar-compact': compact }" + /> </template> <script src="./user_avatar.js"></script> @@ -14,11 +20,14 @@ @import '../../_variables.scss'; .Avatar { - --still-image-label-visibility: hidden; + --_avatarShadowBox: var(--avatarStatusShadow); + --_avatarShadowFilter: var(--avatarStatusShadowFilter); + --_avatarShadowInset: var(--avatarStatusShadowInset); + --_still-image-label-visibility: hidden; width: 48px; height: 48px; - box-shadow: var(--avatarStatusShadow); + box-shadow: var(--_avatarShadowBox); border-radius: $fallback--avatarRadius; border-radius: var(--avatarRadius, $fallback--avatarRadius); @@ -28,8 +37,8 @@ } &.better-shadow { - box-shadow: var(--avatarStatusShadowInset); - filter: var(--avatarStatusShadowFilter) + box-shadow: var(--_avatarShadowInset); + filter: var(--_avatarShadowFilter); } &.animated::before { @@ -42,5 +51,10 @@ border-radius: $fallback--avatarAltRadius; border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius); } + + &.-placeholder { + background-color: $fallback--fg; + background-color: var(--fg, $fallback--fg); + } } </style> |