AkkomaGang/akkoma-fe
5
13
Fork 64
Code Issues 82 Pull requests 20 Projects Releases 1 Wiki Activity

Improve reusability of UserAvatar component

Browse source
This commit is contained in:
taehoon 2019-02-02 15:33:02 -05:00
parent 89b9aed134
commit 0b66a43a83
7 changed files with 25 additions and 61 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/components/notification/notification.js
View file

@ -1,5 +1,5 @@
import Status from '../status/status.vue'
import StillImage from '../still-image/still-image.vue'
import UserAvatar from '../user_avatar/user_avatar.vue'
import UserCardContent from '../user_card_content/user_card_content.vue'
import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
@ -13,7 +13,7 @@ const Notification = {
},
props: [ 'notification' ],
components: {
Status, StillImage, UserCardContent
Status, UserAvatar, UserCardContent
},
methods: {
toggleUserExpanded () {

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

@ -2,7 +2,7 @@
<status v-if="notification.type === 'mention'" :compact="true" :statusoid="notification.status"></status>
<div class="non-mention" :class="[userClass, { highlighted: userStyle }]" :style="[ userStyle ]"v-else>
<a class='avatar-container' :href="notification.action.user.statusnet_profile_url" @click.stop.prevent.capture="toggleUserExpanded">
<StillImage class='avatar-compact' :class="{'better-shadow': betterShadow}" :src="notification.action.user.profile_image_url_original"/>
<UserAvatar :compact="true" :betterShadow="betterShadow" :src="notification.action.user.profile_image_url_original"/>
</a>
<div class='notification-right'>
<div class="usercard notification-usercard" v-if="userExpanded">

21
src/components/notifications/notifications.scss
View file

@ -36,26 +36,7 @@
border-color: $fallback--border;
border-color: var(--border, $fallback--border);
.avatar-compact {
width: 32px;
height: 32px;
box-shadow: var(--avatarStatusShadow);
border-radius: $fallback--avatarAltRadius;
border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
overflow: hidden;
line-height: 0;
&.better-shadow {
box-shadow: var(--avatarStatusShadowInset);
filter: var(--avatarStatusShadowFilter)
}
&.animated::before {
display: none;
}
}
&:hover .animated.avatar-compact {
&:hover .animated.avatar {
canvas {
display: none;
}

25
src/components/status/status.vue
View file

@ -13,7 +13,7 @@
</template>
<template v-else>
<div v-if="retweet && !noHeading" :class="[repeaterClass, { highlighted: repeaterStyle }]" :style="[repeaterStyle]" class="media container retweet-info">
<UserAvatar v-if="retweet" :class='{ "better-shadow": betterShadow }' :src="statusoid.user.profile_image_url_original"/>
<UserAvatar v-if="retweet" :betterShadow="betterShadow" :src="statusoid.user.profile_image_url_original"/>
<div class="media-body faint">
<a v-if="retweeterHtml" :href="statusoid.user.statusnet_profile_url" class="user-name" :title="'@'+statusoid.user.screen_name" v-html="retweeterHtml"></a>
<a v-else :href="statusoid.user.statusnet_profile_url" class="user-name" :title="'@'+statusoid.user.screen_name">{{retweeter}}</a>
@ -25,7 +25,7 @@
<div :class="[userClass, { highlighted: userStyle, 'is-retweet': retweet }]" :style="[ userStyle ]" class="media status">
<div v-if="!noHeading" class="media-left">
<router-link :to="userProfileLink" @click.stop.prevent.capture.native="toggleUserExpanded">
<UserAvatar :class="{'avatar-compact': compact, 'better-shadow': betterShadow}" :src="status.user.profile_image_url_original"/>
<UserAvatar :compact="compact" :betterShadow="betterShadow" :src="status.user.profile_image_url_original"/>
</router-link>
</div>
<div class="status-body">
@ -489,19 +489,6 @@
color: var(--cBlue, $fallback--cBlue);
}
.status .avatar-compact {
width: 32px;
height: 32px;
box-shadow: var(--avatarStatusShadow);
border-radius: $fallback--avatarAltRadius;
border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
&.better-shadow {
box-shadow: var(--avatarStatusShadowInset);
filter: var(--avatarStatusShadowFilter)
}
}
.status:hover .animated.avatar {
canvas {
display: none;
@ -571,11 +558,11 @@ a.unmute {
.status .avatar {
width: 40px;
height: 40px;
}
.status .avatar-compact {
width: 32px;
height: 32px;
&.avatar-compact {
width: 32px;
height: 32px;
}
}
}

4
src/components/user_avatar/user_avatar.js
View file

@ -3,7 +3,9 @@ import avatarPlaceholderImage from '../../assets/avatar-placeholder.png'
const UserAvatar = {
props: [
'src'
'src',
'betterShadow',
'compact'
],
data () {
return {

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

@ -1,5 +1,5 @@
<template>
<StillImage class="avatar" :src="imgSrc" :imageLoadError="imageLoadError"/>
<StillImage class="avatar" :class="{ 'avatar-compact': compact, 'better-shadow': betterShadow }" :src="imgSrc" :imageLoadError="imageLoadError"/>
</template>
<script src="./user_avatar.js"></script>
@ -12,8 +12,11 @@
box-shadow: var(--avatarStatusShadow);
border-radius: $fallback--avatarRadius;
border-radius: var(--avatarRadius, $fallback--avatarRadius);
overflow: hidden;
position: relative;
img {
width: 100%;
height: 100%;
}
&.better-shadow {
box-shadow: var(--avatarStatusShadowInset);
@ -24,9 +27,11 @@
display: none;
}
img {
width: 100%;
height: 100%;
&.avatar-compact {
width: 32px;
height: 32px;
border-radius: $fallback--avatarAltRadius;
border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
}
}
</style>

13
src/components/user_card_content/user_card_content.vue
View file

@ -4,7 +4,7 @@
<div class='user-info'>
<div class='container'>
<router-link :to="userProfileLink(user)">
<UserAvatar :class='{ "better-shadow": betterShadow }' :src="user.profile_image_url_original"/>
<UserAvatar :betterShadow="betterShadow" :src="user.profile_image_url_original"/>
</router-link>
<div class="name-and-screen-name">
<div class="top-line">
@ -169,23 +169,12 @@
max-height: 56px;
.avatar {
border-radius: $fallback--avatarRadius;
border-radius: var(--avatarRadius, $fallback--avatarRadius);
flex: 1 0 100%;
width: 56px;
height: 56px;
box-shadow: 0px 1px 8px rgba(0,0,0,0.75);
box-shadow: var(--avatarShadow);
object-fit: cover;
&.better-shadow {
box-shadow: var(--avatarShadowInset);
filter: var(--avatarShadowFilter)
}
&.animated::before {
display: none;
}
}
}