Troplo/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

fixed some issues related to user avatar

Browse source
This commit is contained in:
Henry Jameson 2020-08-18 23:57:42 +03:00
parent 7de78b1401
commit 815f230ac7
7 changed files with 17 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/components/attachment/attachment.vue
View file

@ -60,6 +60,7 @@
@click="openModal" @click="openModal"
> >
<StillImage <StillImage
class="image"
:referrerpolicy="referrerpolicy" :referrerpolicy="referrerpolicy"
:mimetype="attachment.mimetype" :mimetype="attachment.mimetype"
:src="attachment.large_thumb_url || attachment.url" :src="attachment.large_thumb_url || attachment.url"
@ -281,8 +282,11 @@
} }
.image-attachment { .image-attachment {
&,
& .image {
width: 100%; width: 100%;
height: 100%; height: 100%;
}
&.hidden { &.hidden {
display: none; display: none;

2
src/components/chat_list_item/chat_list_item.scss
View file

@ -72,7 +72,7 @@
} }
} }
.avatar.still-image { .Avatar {
border-radius: $fallback--avatarAltRadius; border-radius: $fallback--avatarAltRadius;
border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius); border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
} }

2
src/components/chat_title/chat_title.vue
View file

@ -51,7 +51,7 @@
} }
} }
.still-image.avatar { .Avatar {
width: 23px; width: 23px;
height: 23px; height: 23px;
margin-right: 0.5em; margin-right: 0.5em;

2
src/components/status/status.scss
View file

@ -6,7 +6,7 @@ $status-margin: 0.75em;
.Status { .Status {
min-width: 0; min-width: 0;
&:hover .avatar { &:hover {
--still-image-img: visible; --still-image-img: visible;
--still-image-canvas: hidden; --still-image-canvas: hidden;
} }

3
src/components/still-image/still-image.vue
View file

@ -30,8 +30,6 @@
position: relative; position: relative;
line-height: 0; line-height: 0;
overflow: hidden; overflow: hidden;
width: 100%;
height: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
@ -68,6 +66,7 @@
border-radius: $fallback--tooltipRadius; border-radius: $fallback--tooltipRadius;
border-radius: var(--tooltipRadius, $fallback--tooltipRadius); border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
z-index: 2; z-index: 2;
visibility: var(--still-image-label-visibility, visible);
} }
&:hover canvas { &:hover canvas {

6
src/components/user_avatar/user_avatar.vue
View file

@ -1,6 +1,6 @@
<template> <template>
<StillImage <StillImage
class="avatar" class="Avatar"
:alt="user.screen_name" :alt="user.screen_name"
:title="user.screen_name" :title="user.screen_name"
:src="imgSrc(user.profile_image_url_original)" :src="imgSrc(user.profile_image_url_original)"
@ -13,7 +13,9 @@
<style lang="scss"> <style lang="scss">
@import '../../_variables.scss'; @import '../../_variables.scss';
.avatar.still-image { .Avatar {
--still-image-label-visibility: hidden;
width: 48px; width: 48px;
height: 48px; height: 48px;
box-shadow: var(--avatarStatusShadow); box-shadow: var(--avatarStatusShadow);

10
src/components/user_card/user_card.vue
View file

@ -364,13 +364,9 @@
} }
} }
&:hover .animated.avatar { &:hover .avatar {
canvas { --still-image-img: visible;
display: none; --still-image-canvas: hidden;
}
img {
visibility: visible;
}
} }
&-avatar-link { &-avatar-link {