Move user list from reactions to its own component, make favs and rts use it

This commit is contained in:
Shpuld Shpuldson 2020-07-16 17:42:16 +03:00
parent 950ae6d89a
commit 6079301ec4
6 changed files with 131 additions and 90 deletions

View file

@ -1,5 +1,5 @@
import UserAvatar from '../user_avatar/user_avatar.vue' import UserAvatar from '../user_avatar/user_avatar.vue'
import Popover from '../popover/popover.vue' import UserListPopover from '../user_list_popover/user_list_popover.vue'
const EMOJI_REACTION_COUNT_CUTOFF = 12 const EMOJI_REACTION_COUNT_CUTOFF = 12
@ -7,7 +7,7 @@ const EmojiReactions = {
name: 'EmojiReactions', name: 'EmojiReactions',
components: { components: {
UserAvatar, UserAvatar,
Popover UserListPopover
}, },
props: ['status'], props: ['status'],
data: () => ({ data: () => ({

View file

@ -1,44 +1,11 @@
<template> <template>
<div class="emoji-reactions"> <div class="emoji-reactions">
<Popover <UserListPopover
v-for="(reaction) in emojiReactions" v-for="(reaction) in emojiReactions"
:key="reaction.name" :key="reaction.name"
trigger="hover" :users="accountsForEmoji[reaction.name]"
placement="top"
:offset="{ y: 5 }"
> >
<div
slot="content"
class="reacted-users"
>
<div v-if="accountsForEmoji[reaction.name].length">
<div
v-for="(account) in accountsForEmoji[reaction.name]"
:key="account.id"
class="reacted-user"
>
<UserAvatar
:user="account"
class="avatar-small"
:compact="true"
/>
<div class="reacted-user-names">
<!-- eslint-disable vue/no-v-html -->
<span
class="reacted-user-name"
v-html="account.name_html"
/>
<!-- eslint-enable vue/no-v-html -->
<span class="reacted-user-screen-name">{{ account.screen_name }}</span>
</div>
</div>
</div>
<div v-else>
<i class="icon-spin4 animate-spin" />
</div>
</div>
<button <button
slot="trigger"
class="emoji-reaction btn btn-default" class="emoji-reaction btn btn-default"
:class="{ 'picked-reaction': reactedWith(reaction.name), 'not-clickable': !loggedIn }" :class="{ 'picked-reaction': reactedWith(reaction.name), 'not-clickable': !loggedIn }"
@click="emojiOnClick(reaction.name, $event)" @click="emojiOnClick(reaction.name, $event)"
@ -47,7 +14,7 @@
<span class="reaction-emoji">{{ reaction.name }}</span> <span class="reaction-emoji">{{ reaction.name }}</span>
<span>{{ reaction.count }}</span> <span>{{ reaction.count }}</span>
</button> </button>
</Popover> </UserListPopover>
<a <a
v-if="tooManyReactions" v-if="tooManyReactions"
class="emoji-reaction-expand faint" class="emoji-reaction-expand faint"
@ -69,32 +36,6 @@
flex-wrap: wrap; flex-wrap: wrap;
} }
.reacted-users {
padding: 0.5em;
}
.reacted-user {
padding: 0.25em;
display: flex;
flex-direction: row;
.reacted-user-names {
display: flex;
flex-direction: column;
margin-left: 0.5em;
min-width: 5em;
img {
width: 1em;
height: 1em;
}
}
.reacted-user-screen-name {
font-size: 9px;
}
}
.emoji-reaction { .emoji-reaction {
padding: 0 0.5em; padding: 0 0.5em;
margin-right: 0.5em; margin-right: 0.5em;

View file

@ -9,6 +9,7 @@ import AvatarList from '../avatar_list/avatar_list.vue'
import Timeago from '../timeago/timeago.vue' import Timeago from '../timeago/timeago.vue'
import StatusContent from '../status_content/status_content.vue' import StatusContent from '../status_content/status_content.vue'
import StatusPopover from '../status_popover/status_popover.vue' import StatusPopover from '../status_popover/status_popover.vue'
import UserListPopover from '../user_list_popover/user_list_popover.vue'
import EmojiReactions from '../emoji_reactions/emoji_reactions.vue' import EmojiReactions from '../emoji_reactions/emoji_reactions.vue'
import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator' import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js' import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
@ -18,6 +19,21 @@ import { mapGetters, mapState } from 'vuex'
const Status = { const Status = {
name: 'Status', name: 'Status',
components: {
FavoriteButton,
ReactButton,
RetweetButton,
ExtraButtons,
PostStatusForm,
UserCard,
UserAvatar,
AvatarList,
Timeago,
StatusPopover,
UserListPopover,
EmojiReactions,
StatusContent
},
props: [ props: [
'statusoid', 'statusoid',
'expandable', 'expandable',
@ -197,20 +213,6 @@ const Status = {
currentUser: state => state.users.currentUser currentUser: state => state.users.currentUser
}) })
}, },
components: {
FavoriteButton,
ReactButton,
RetweetButton,
ExtraButtons,
PostStatusForm,
UserCard,
UserAvatar,
AvatarList,
Timeago,
StatusPopover,
EmojiReactions,
StatusContent
},
methods: { methods: {
visibilityIcon (visibility) { visibilityIcon (visibility) {
switch (visibility) { switch (visibility) {

View file

@ -265,17 +265,22 @@
class="favs-repeated-users" class="favs-repeated-users"
> >
<div class="stats"> <div class="stats">
<div <UserListPopover
v-if="statusFromGlobalRepository.rebloggedBy && statusFromGlobalRepository.rebloggedBy.length > 0" v-if="statusFromGlobalRepository.rebloggedBy && statusFromGlobalRepository.rebloggedBy.length > 0"
class="stat-count" :users="statusFromGlobalRepository.rebloggedBy"
> >
<div class="stat-count">
<a class="stat-title">{{ $t('status.repeats') }}</a> <a class="stat-title">{{ $t('status.repeats') }}</a>
<div class="stat-number"> <div class="stat-number">
{{ statusFromGlobalRepository.rebloggedBy.length }} {{ statusFromGlobalRepository.rebloggedBy.length }}
</div> </div>
</div> </div>
<div </UserListPopover>
<UserListPopover
v-if="statusFromGlobalRepository.favoritedBy && statusFromGlobalRepository.favoritedBy.length > 0" v-if="statusFromGlobalRepository.favoritedBy && statusFromGlobalRepository.favoritedBy.length > 0"
:users="statusFromGlobalRepository.favoritedBy"
>
<div
class="stat-count" class="stat-count"
> >
<a class="stat-title">{{ $t('status.favorites') }}</a> <a class="stat-title">{{ $t('status.favorites') }}</a>
@ -283,6 +288,7 @@
{{ statusFromGlobalRepository.favoritedBy.length }} {{ statusFromGlobalRepository.favoritedBy.length }}
</div> </div>
</div> </div>
</UserListPopover>
<div class="avatar-row"> <div class="avatar-row">
<AvatarList :users="combinedFavsAndRepeatsUsers" /> <AvatarList :users="combinedFavsAndRepeatsUsers" />
</div> </div>
@ -722,6 +728,11 @@ $status-margin: 0.75em;
.stat-count { .stat-count {
margin-right: $status-margin; margin-right: $status-margin;
user-select: none;
&:hover .stat-title {
text-decoration: underline;
}
.stat-title { .stat-title {
color: var(--faint, $fallback--faint); color: var(--faint, $fallback--faint);

View file

@ -0,0 +1,13 @@
const UserListPopover = {
name: 'UserListPopover',
props: [
'users'
],
components: {
Popover: () => import('../popover/popover.vue'),
UserAvatar: () => import('../user_avatar/user_avatar.vue')
}
}
export default UserListPopover

View file

@ -0,0 +1,74 @@
<template>
<Popover
trigger="hover"
placement="top"
:offset="{ y: 5 }"
>
<template slot="trigger">
<slot />
</template>
<div
slot="content"
class="reacted-users"
>
<div v-if="users.length">
<div
v-for="(user) in users"
:key="user.id"
class="reacted-user"
>
<UserAvatar
:user="user"
class="avatar-small"
:compact="true"
/>
<div class="reacted-user-names">
<!-- eslint-disable vue/no-v-html -->
<span
class="reacted-user-name"
v-html="user.name_html"
/>
<!-- eslint-enable vue/no-v-html -->
<span class="reacted-user-screen-name">{{ user.screen_name }}</span>
</div>
</div>
</div>
<div v-else>
<i class="icon-spin4 animate-spin" />
</div>
</div>
</Popover>
</template>
<script src="./user_list_popover.js" ></script>
<style lang="scss">
@import '../../_variables.scss';
.reacted-users {
padding: 0.5em;
}
.reacted-user {
padding: 0.25em;
display: flex;
flex-direction: row;
.reacted-user-names {
display: flex;
flex-direction: column;
margin-left: 0.5em;
min-width: 5em;
img {
width: 1em;
height: 1em;
}
}
.reacted-user-screen-name {
font-size: 9px;
}
}
</style>