mirror of
https://github.com/MrUnknownDE/VRCX.git
synced 2026-05-02 21:16:07 +02:00
improve: Group all friends by the same instance (#1097)
* improve: Group all friends by the same instance * style
This commit is contained in:
pa
GitHub
@@ -70,34 +70,72 @@ mixin friendsListSidebar
|
||||
span.extra(v-else v-text='API.currentUser.statusDescription')
|
||||
.x-friend-group.x-link(
|
||||
@click='isVIPFriends = !isVIPFriends; saveFriendsGroupStates()'
|
||||
v-show='vipFriends.length')
|
||||
v-show='vipFriendsByGroupStatus.length')
|
||||
i.el-icon-arrow-right(:class='{ rotate: isVIPFriends }')
|
||||
span(style='margin-left: 5px') {{ $t('side_panel.favorite') }} ― {{ vipFriends.length }}
|
||||
span(style='margin-left: 5px') {{ $t('side_panel.favorite') }} ― {{ vipFriendsByGroupStatus.length }}
|
||||
div(v-show='isVIPFriends')
|
||||
template(v-if='isSidebarGroupByInstance')
|
||||
div(
|
||||
v-for='(friendArr, idx) in vipFriendsInSameInstance'
|
||||
:key='friendArr[0].ref?.location.tag')
|
||||
.x-friend-item(
|
||||
v-for='friend in vipFriendsByGroupStatus'
|
||||
:key='friend.id'
|
||||
@click='showUserDialog(friend.id)')
|
||||
template(v-if='friend.ref')
|
||||
.avatar(:class='userStatusClass(friend.ref, friend.pendingOffline)')
|
||||
img(v-lazy='userImage(friend.ref)')
|
||||
.detail
|
||||
span.name(
|
||||
v-if='!hideNicknames && friend.$nickName'
|
||||
:style='{ color: friend.ref.$userColour }') {{ friend.ref.displayName }} ({{ friend.$nickName }})
|
||||
span.name(
|
||||
v-else
|
||||
v-text='friend.ref.displayName'
|
||||
:style='{ color: friend.ref.$userColour }')
|
||||
span.extra(v-if='friend.pendingOffline') #[i.el-icon-warning-outline] {{ $t('side_panel.pending_offline') }}
|
||||
location.extra(
|
||||
v-else
|
||||
:location='friend.ref.location'
|
||||
:traveling='friend.ref.travelingToLocation'
|
||||
:link='false')
|
||||
template(v-else)
|
||||
span(v-text='friend.name || friend.id')
|
||||
el-button(
|
||||
type='text'
|
||||
icon='el-icon-close'
|
||||
size='mini'
|
||||
@click.stop='confirmDeleteFriend(friend.id)'
|
||||
style='margin-left: 5px')
|
||||
|
||||
//- Group By Instance
|
||||
template(v-if='isSidebarGroupByInstance && friendsInSameInstance.length')
|
||||
.x-friend-group.x-link(@click='toggleSwitchGroupByInstanceCollapsed')
|
||||
i.el-icon-arrow-right(:class='{ rotate: isSidebarGroupByInstanceCollapsed }')
|
||||
span(style='margin-left: 5px') {{ $t('side_panel.same_instance') }} ― {{ friendsInSameInstance.length }}
|
||||
div(v-show='!isSidebarGroupByInstanceCollapsed')
|
||||
div(v-for='friendArr in friendsInSameInstance' :key='friendArr[0].ref?.location.tag')
|
||||
div(style='margin-bottom: 3px')
|
||||
location.extra(:location='friendArr[0].ref?.location' style='color: #c7c7c7')
|
||||
location.extra(:location='getFriendsLocations(friendArr)' style='color: #c7c7c7')
|
||||
span(style='margin-left: 5px') {{ `(${friendArr.length})` }}
|
||||
div(style='margin-bottom: 10px')
|
||||
div
|
||||
.x-friend-item(
|
||||
v-if='friendArr && friendArr.length'
|
||||
v-for='friend in friendArr'
|
||||
v-for='(friend, idx) in friendArr'
|
||||
:key='friend.id'
|
||||
@click='showUserDialog(friend.id)')
|
||||
@click='showUserDialog(friend.id)'
|
||||
:style='{ "margin-bottom": idx === friendArr.length - 1 ? "5px" : undefined }')
|
||||
template(v-if='friend.ref')
|
||||
.avatar(:class='userStatusClass(friend.ref, friend.pendingOffline)')
|
||||
img(v-lazy='userImage(friend.ref)')
|
||||
.detail
|
||||
span.name(
|
||||
v-if='!hideNicknames && friend.$nickName'
|
||||
:style='{ color: friend.ref.$userColour }') {{ friend.ref.displayName }} ({{ friend.$nickName }})
|
||||
span.name(
|
||||
v-else
|
||||
v-text='friend.ref.displayName'
|
||||
:style='{ color: friend.ref.$userColour }')
|
||||
div(style='display: flex; align-items: center')
|
||||
span.name(
|
||||
v-if='!hideNicknames && friend.$nickName'
|
||||
:style='{ color: friend.ref.$userColour }') {{ friend.ref.displayName }} ({{ friend.$nickName }})
|
||||
span.name(
|
||||
v-else
|
||||
v-text='friend.ref.displayName'
|
||||
:style='{ color: friend.ref.$userColour }')
|
||||
i.el-icon-star-on(
|
||||
v-if='friend.isVIP'
|
||||
style='color: #ffd700; margin: 1px 0 0 2px')
|
||||
span.extra(v-if='friend.pendingOffline') #[i.el-icon-warning-outline] {{ $t('side_panel.pending_offline') }}
|
||||
template(v-else)
|
||||
i.el-icon.el-icon-loading(
|
||||
@@ -112,170 +150,42 @@ mixin friendsListSidebar
|
||||
size='mini'
|
||||
@click.stop='confirmDeleteFriend(friend.id)'
|
||||
style='margin-left: 5px')
|
||||
div(v-if='idx === vipFriendsInSameInstance.length - 1' style='color: #c7c7c7') {{ 'Others' }}
|
||||
.x-friend-item(
|
||||
v-for='friend in vipFriendsNotInSameInstance'
|
||||
:key='friend.id'
|
||||
@click='showUserDialog(friend.id)')
|
||||
template(v-if='friend.ref')
|
||||
.avatar(:class='userStatusClass(friend.ref, friend.pendingOffline)')
|
||||
img(v-lazy='userImage(friend.ref)')
|
||||
.detail
|
||||
span.name(
|
||||
v-if='!hideNicknames && friend.$nickName'
|
||||
:style='{ color: friend.ref.$userColour }') {{ friend.ref.displayName }} ({{ friend.$nickName }})
|
||||
span.name(
|
||||
v-else
|
||||
v-text='friend.ref.displayName'
|
||||
:style='{ color: friend.ref.$userColour }')
|
||||
span.extra(v-if='friend.pendingOffline') #[i.el-icon-warning-outline] {{ $t('side_panel.pending_offline') }}
|
||||
location.extra(
|
||||
v-else
|
||||
:location='friend.ref.location'
|
||||
:traveling='friend.ref.travelingToLocation'
|
||||
:link='false')
|
||||
template(v-else)
|
||||
span(v-text='friend.name || friend.id')
|
||||
el-button(
|
||||
type='text'
|
||||
icon='el-icon-close'
|
||||
size='mini'
|
||||
@click.stop='confirmDeleteFriend(friend.id)'
|
||||
style='margin-left: 5px')
|
||||
template(v-else)
|
||||
.x-friend-item(
|
||||
v-for='friend in vipFriends'
|
||||
:key='friend.id'
|
||||
@click='showUserDialog(friend.id)')
|
||||
template(v-if='friend.ref')
|
||||
.avatar(:class='userStatusClass(friend.ref, friend.pendingOffline)')
|
||||
img(v-lazy='userImage(friend.ref)')
|
||||
.detail
|
||||
span.name(
|
||||
v-if='!hideNicknames && friend.$nickName'
|
||||
:style='{ color: friend.ref.$userColour }') {{ friend.ref.displayName }} ({{ friend.$nickName }})
|
||||
span.name(
|
||||
v-else
|
||||
v-text='friend.ref.displayName'
|
||||
:style='{ color: friend.ref.$userColour }')
|
||||
span.extra(v-if='friend.pendingOffline') #[i.el-icon-warning-outline] {{ $t('side_panel.pending_offline') }}
|
||||
location.extra(
|
||||
v-else
|
||||
:location='friend.ref.location'
|
||||
:traveling='friend.ref.travelingToLocation'
|
||||
:link='false')
|
||||
template(v-else)
|
||||
span(v-text='friend.name || friend.id')
|
||||
el-button(
|
||||
type='text'
|
||||
icon='el-icon-close'
|
||||
size='mini'
|
||||
@click.stop='confirmDeleteFriend(friend.id)'
|
||||
style='margin-left: 5px')
|
||||
|
||||
.x-friend-group.x-link(
|
||||
@click='isOnlineFriends = !isOnlineFriends; saveFriendsGroupStates()'
|
||||
v-show='onlineFriends.length')
|
||||
v-show='onlineFriendsByGroupStatus.length')
|
||||
i.el-icon-arrow-right(:class='{ rotate: isOnlineFriends }')
|
||||
span(style='margin-left: 5px') {{ $t('side_panel.online') }} ― {{ onlineFriends.length }}
|
||||
span(style='margin-left: 5px') {{ $t('side_panel.online') }} ― {{ onlineFriendsByGroupStatus.length }}
|
||||
div(v-show='isOnlineFriends')
|
||||
template(v-if='isSidebarGroupByInstance')
|
||||
div(
|
||||
v-for='(friendArr, idx) in onlineFriendsInSameInstance'
|
||||
:key='friendArr[0].ref?.location.tag')
|
||||
div(style='margin-bottom: 3px')
|
||||
location.extra(:location='friendArr[0].ref?.location' style='color: #c7c7c7')
|
||||
span(style='margin-left: 5px') {{ `(${friendArr.length})` }}
|
||||
div(style='margin-bottom: 10px')
|
||||
.x-friend-item(
|
||||
v-if='friendArr && friendArr.length'
|
||||
v-for='friend in friendArr'
|
||||
:key='friend.id'
|
||||
@click='showUserDialog(friend.id)')
|
||||
template(v-if='friend.ref')
|
||||
.avatar(:class='userStatusClass(friend.ref, friend.pendingOffline)')
|
||||
img(v-lazy='userImage(friend.ref)')
|
||||
.detail
|
||||
span.name(
|
||||
v-if='!hideNicknames && friend.$nickName'
|
||||
:style='{ color: friend.ref.$userColour }') {{ friend.ref.displayName }} ({{ friend.$nickName }})
|
||||
span.name(
|
||||
v-else
|
||||
v-text='friend.ref.displayName'
|
||||
:style='{ color: friend.ref.$userColour }')
|
||||
span.extra(v-if='friend.pendingOffline') #[i.el-icon-warning-outline] {{ $t('side_panel.pending_offline') }}
|
||||
template(v-else)
|
||||
i.el-icon.el-icon-loading(
|
||||
v-if='friend.ref.travelingToLocation'
|
||||
style='display: inline-block; margin-right: 5px')
|
||||
timer(:epoch='friend.ref?.$location_at' style='color: #c7c7c7')
|
||||
template(v-else)
|
||||
span(v-text='friend.name || friend.id')
|
||||
el-button(
|
||||
type='text'
|
||||
icon='el-icon-close'
|
||||
size='mini'
|
||||
@click.stop='confirmDeleteFriend(friend.id)'
|
||||
style='margin-left: 5px')
|
||||
div(v-if='idx === onlineFriendsInSameInstance.length - 1' style='color: #c7c7c7') {{ 'Others' }}
|
||||
.x-friend-item(
|
||||
v-for='friend in onlineFriendsNotInSameInstance'
|
||||
:key='friend.id'
|
||||
@click='showUserDialog(friend.id)')
|
||||
template(v-if='friend.ref')
|
||||
.avatar(:class='userStatusClass(friend.ref, friend.pendingOffline)')
|
||||
img(v-lazy='userImage(friend.ref)')
|
||||
.detail
|
||||
span.name(
|
||||
v-if='!hideNicknames && friend.$nickName'
|
||||
:style='{ color: friend.ref.$userColour }') {{ friend.ref.displayName }} ({{ friend.$nickName }})
|
||||
span.name(
|
||||
v-else
|
||||
v-text='friend.ref.displayName'
|
||||
:style='{ color: friend.ref.$userColour }')
|
||||
span.extra(v-if='friend.pendingOffline') #[i.el-icon-warning-outline] {{ $t('side_panel.pending_offline') }}
|
||||
location.extra(
|
||||
v-else
|
||||
:location='friend.ref.location'
|
||||
:traveling='friend.ref.travelingToLocation'
|
||||
:link='false')
|
||||
template(v-else)
|
||||
span(v-text='friend.name || friend.id')
|
||||
el-button(
|
||||
type='text'
|
||||
icon='el-icon-close'
|
||||
size='mini'
|
||||
@click.stop='confirmDeleteFriend(friend.id)'
|
||||
style='margin-left: 5px')
|
||||
template(v-else)
|
||||
.x-friend-item(
|
||||
v-for='friend in onlineFriends'
|
||||
:key='friend.id'
|
||||
@click='showUserDialog(friend.id)')
|
||||
template(v-if='friend.ref')
|
||||
.avatar(:class='userStatusClass(friend.ref, friend.pendingOffline)')
|
||||
img(v-lazy='userImage(friend.ref)')
|
||||
.detail
|
||||
span.name(
|
||||
v-if='!hideNicknames && friend.$nickName'
|
||||
:style='{ color: friend.ref.$userColour }') {{ friend.ref.displayName }} ({{ friend.$nickName }})
|
||||
span.name(
|
||||
v-else
|
||||
v-text='friend.ref.displayName'
|
||||
:style='{ color: friend.ref.$userColour }')
|
||||
span.extra(v-if='friend.pendingOffline') #[i.el-icon-warning-outline] {{ $t('side_panel.pending_offline') }}
|
||||
location.extra(
|
||||
v-else
|
||||
:location='friend.ref.location'
|
||||
:traveling='friend.ref.travelingToLocation'
|
||||
:link='false')
|
||||
template(v-else)
|
||||
span(v-text='friend.name || friend.id')
|
||||
el-button(
|
||||
type='text'
|
||||
icon='el-icon-close'
|
||||
size='mini'
|
||||
@click.stop='confirmDeleteFriend(friend.id)'
|
||||
style='margin-left: 5px')
|
||||
.x-friend-item(
|
||||
v-for='friend in onlineFriendsByGroupStatus'
|
||||
:key='friend.id'
|
||||
@click='showUserDialog(friend.id)')
|
||||
template(v-if='friend.ref')
|
||||
.avatar(:class='userStatusClass(friend.ref, friend.pendingOffline)')
|
||||
img(v-lazy='userImage(friend.ref)')
|
||||
.detail
|
||||
span.name(
|
||||
v-if='!hideNicknames && friend.$nickName'
|
||||
:style='{ color: friend.ref.$userColour }') {{ friend.ref.displayName }} ({{ friend.$nickName }})
|
||||
span.name(
|
||||
v-else
|
||||
v-text='friend.ref.displayName'
|
||||
:style='{ color: friend.ref.$userColour }')
|
||||
span.extra(v-if='friend.pendingOffline') #[i.el-icon-warning-outline] {{ $t('side_panel.pending_offline') }}
|
||||
location.extra(
|
||||
v-else
|
||||
:location='friend.ref.location'
|
||||
:traveling='friend.ref.travelingToLocation'
|
||||
:link='false')
|
||||
template(v-else)
|
||||
span(v-text='friend.name || friend.id')
|
||||
el-button(
|
||||
type='text'
|
||||
icon='el-icon-close'
|
||||
size='mini'
|
||||
@click.stop='confirmDeleteFriend(friend.id)'
|
||||
style='margin-left: 5px')
|
||||
.x-friend-group.x-link(
|
||||
@click='isActiveFriends = !isActiveFriends; saveFriendsGroupStates()'
|
||||
v-show='activeFriends.length')
|
||||
|
||||
Reference in New Issue
Block a user