mirror of
https://github.com/MrUnknownDE/VRCX.git
synced 2026-05-06 22:46:06 +02:00
Split component, improve UI, fix and refactor (#1162)
This commit is contained in:
pa
GitHub
@@ -1,296 +0,0 @@
|
||||
mixin friendsListSidebar
|
||||
#aside.x-aside-container(
|
||||
:style='{ width: `${asideWidth}px` }'
|
||||
v-show='$refs.menu && !($refs.menu.activeIndex === "friendsList" || $refs.menu.activeIndex === "charts") ')
|
||||
div(style='display: flex; align-items: baseline')
|
||||
el-select(
|
||||
v-model='quickSearch'
|
||||
clearable
|
||||
:placeholder='$t("side_panel.search_placeholder")'
|
||||
filterable
|
||||
remote
|
||||
:remote-method='quickSearchRemoteMethod'
|
||||
popper-class='x-quick-search'
|
||||
@change='quickSearchChange'
|
||||
@visible-change='quickSearchVisibleChange'
|
||||
style='flex: 1; padding: 10px')
|
||||
el-option(v-for='item in quickSearchItems' :key='item.value' :value='item.value' :label='item.label')
|
||||
.x-friend-item
|
||||
template(v-if='item.ref')
|
||||
.detail
|
||||
span.name(v-text='item.ref.displayName' :style='{ color: item.ref.$userColour }')
|
||||
span.extra(v-if='!item.ref.isFriend')
|
||||
span.extra(v-else-if='item.ref.state === "offline"') {{ $t('side_panel.search_result_active') }}
|
||||
span.extra(v-else-if='item.ref.state === "active"') {{ $t('side_panel.search_result_offline') }}
|
||||
location.extra(
|
||||
v-else
|
||||
:location='item.ref.location'
|
||||
:traveling='item.ref.travelingToLocation'
|
||||
:link='false')
|
||||
img.avatar(v-lazy='userImage(item.ref)')
|
||||
span(v-else) {{ $t('side_panel.search_result_more') }} #[span(v-text='item.label' style='font-weight: bold')]
|
||||
el-tooltip(placement='bottom' :content='$t("side_panel.direct_access_tooltip")' :disabled='hideTooltips')
|
||||
el-button(type='default' @click='directAccessPaste' size='mini' icon='el-icon-discover' circle)
|
||||
el-tooltip(placement='bottom' :content='$t("side_panel.refresh_tooltip")' :disabled='hideTooltips')
|
||||
el-button(
|
||||
type='default'
|
||||
@click='refreshFriendsList'
|
||||
:loading='API.isRefreshFriendsLoading'
|
||||
size='mini'
|
||||
icon='el-icon-refresh'
|
||||
circle
|
||||
style='margin-right: 10px')
|
||||
el-tabs.zero-margin-tabs(stretch style='height: calc(100% - 60px); margin-top: 5px')
|
||||
el-tab-pane
|
||||
template(#label)
|
||||
span {{ $t('side_panel.friends') }}
|
||||
span(style='color: #909399; font-size: 12px; margin-left: 10px') ({{ onlineFriendCount }}/{{ friends.size }})
|
||||
.x-friend-list(style='padding: 10px 5px')
|
||||
.x-friend-group.x-link(
|
||||
@click='isFriendsGroupMe = !isFriendsGroupMe; saveFriendsGroupStates()'
|
||||
style='padding: 0px 0px 5px')
|
||||
i.el-icon-arrow-right(:class='{ rotate: isFriendsGroupMe }')
|
||||
span(style='margin-left: 5px') {{ $t('side_panel.me') }}
|
||||
div(v-show='isFriendsGroupMe')
|
||||
.x-friend-item(:key='API.currentUser.id' @click='showUserDialog(API.currentUser.id)')
|
||||
.avatar(:class='userStatusClass(API.currentUser)')
|
||||
img(v-lazy='userImage(API.currentUser)')
|
||||
.detail
|
||||
span.name(
|
||||
v-text='API.currentUser.displayName'
|
||||
:style='{ color: API.currentUser.$userColour }')
|
||||
location.extra(
|
||||
v-if='isGameRunning && !gameLogDisabled'
|
||||
:location='lastLocation.location'
|
||||
:traveling='lastLocationDestination'
|
||||
:link='false')
|
||||
location.extra(
|
||||
v-else-if='isRealInstance(API.currentUser.$locationTag) || isRealInstance(API.currentUser.$travelingToLocation)'
|
||||
:location='API.currentUser.$locationTag'
|
||||
:traveling='API.currentUser.$travelingToLocation'
|
||||
:link='false')
|
||||
span.extra(v-else v-text='API.currentUser.statusDescription')
|
||||
.x-friend-group.x-link(
|
||||
@click='isVIPFriends = !isVIPFriends; saveFriendsGroupStates()'
|
||||
v-show='vipFriendsByGroupStatus.length')
|
||||
i.el-icon-arrow-right(:class='{ rotate: isVIPFriends }')
|
||||
span(style='margin-left: 5px') {{ $t('side_panel.favorite') }} ― {{ vipFriendsByGroupStatus.length }}
|
||||
div(v-show='isVIPFriends')
|
||||
template(v-if='isSidebarDivideByFriendGroup')
|
||||
div(v-for='(group, idx) in vipFriendsDivideByGroup' :key='idx')
|
||||
div(style='margin-bottom: 3px')
|
||||
span.extra {{ group.displayName }}
|
||||
span.extra(style='margin-left: 5px') {{ `(${group.value.length})` }}
|
||||
div(style='margin-bottom: 10px')
|
||||
.x-friend-item(
|
||||
v-if='group.value && group.value.length'
|
||||
v-for='friend in group.value'
|
||||
: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 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='getFriendsLocations(friendArr)')
|
||||
span.extra(style='margin-left: 5px') {{ `(${friendArr.length})` }}
|
||||
div
|
||||
.x-friend-item(
|
||||
v-if='friendArr && friendArr.length'
|
||||
v-for='(friend, idx) in friendArr'
|
||||
:key='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(style='display: flex; align-items: center')
|
||||
span(
|
||||
v-if='!hideNicknames && friend.$nickName'
|
||||
:style='{ color: friend.ref.$userColour }') {{ friend.ref.displayName }} ({{ friend.$nickName }})
|
||||
span(
|
||||
v-else
|
||||
v-text='friend.ref.displayName'
|
||||
:style='{ color: friend.ref.$userColour }')
|
||||
span(v-if='friend.isVIP' style='margin-left: 2px') ⭐
|
||||
span.extra(v-if='friend.pendingOffline') #[i.el-icon-warning-outline] {{ $t('side_panel.pending_offline') }}
|
||||
template(v-else)
|
||||
template(v-if='friend.ref.location === "traveling"')
|
||||
i.el-icon.el-icon-loading(
|
||||
style='display: inline-block; margin-right: 5px')
|
||||
timer.extra(
|
||||
:epoch='friend.ref?.$travelingToTime'
|
||||
style='display: inline-block; overflow: unset')
|
||||
template(v-else)
|
||||
timer.extra(:epoch='friend.ref?.$location_at')
|
||||
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='onlineFriendsByGroupStatus.length')
|
||||
i.el-icon-arrow-right(:class='{ rotate: isOnlineFriends }')
|
||||
span(style='margin-left: 5px') {{ $t('side_panel.online') }} ― {{ onlineFriendsByGroupStatus.length }}
|
||||
div(v-show='isOnlineFriends')
|
||||
.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')
|
||||
i.el-icon-arrow-right(:class='{ rotate: isActiveFriends }')
|
||||
span(style='margin-left: 5px') {{ $t('side_panel.active') }} ― {{ activeFriends.length }}
|
||||
div(v-show='isActiveFriends')
|
||||
.x-friend-item(
|
||||
v-for='friend in activeFriends'
|
||||
:key='friend.id'
|
||||
@click='showUserDialog(friend.id)')
|
||||
template(v-if='friend.ref')
|
||||
.avatar
|
||||
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-text='friend.ref.statusDescription' :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='isOfflineFriends = !isOfflineFriends; saveFriendsGroupStates()'
|
||||
v-show='offlineFriends.length')
|
||||
i.el-icon-arrow-right(:class='{ rotate: isOfflineFriends }')
|
||||
span(style='margin-left: 5px') {{ $t('side_panel.offline') }} ― {{ offlineFriends.length }}
|
||||
div(v-show='isOfflineFriends')
|
||||
.x-friend-item(
|
||||
v-for='friend in offlineFriends'
|
||||
:key='friend.id'
|
||||
@click='showUserDialog(friend.id)')
|
||||
template(v-if='friend.ref')
|
||||
.avatar
|
||||
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-text='friend.ref.statusDescription')
|
||||
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')
|
||||
el-tab-pane(lazy)
|
||||
template(#label)
|
||||
span {{ $t('side_panel.groups') }}
|
||||
span(style='color: #909399; font-size: 12px; margin-left: 10px') ({{ groupInstances.length }})
|
||||
groups-sidebar(
|
||||
:group-instances='groupInstances'
|
||||
:group-order='inGameGroupOrder'
|
||||
@show-group-dialog='showGroupDialog')
|
||||
@@ -1,5 +1,5 @@
|
||||
mixin favoritesTab
|
||||
.x-container(v-show='$refs.menu && $refs.menu.activeIndex === "favorite"')
|
||||
.x-container(v-show='menuActiveIndex === "favorite"')
|
||||
div(style='font-size: 13px; position: absolute; display: flex; right: 0; z-index: 1; margin-right: 15px')
|
||||
div(v-if='editFavoritesMode' style='display: inline-block; margin-right: 10px')
|
||||
el-button(size='small' @click='clearBulkFavoriteSelection') {{ $t('view.favorite.clear') }}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
mixin feedTab
|
||||
.x-container(v-show='$refs.menu && $refs.menu.activeIndex === \'feed\'')
|
||||
.x-container(v-show='menuActiveIndex === "feed"')
|
||||
div(style='margin: 0 0 10px; display: flex; align-items: center')
|
||||
div(style='flex: none; margin-right: 10px; display: flex; align-items: center')
|
||||
el-tooltip(
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
mixin friendLogTab
|
||||
.x-container(v-if='$refs.menu && $refs.menu.activeIndex === "friendLog"')
|
||||
.x-container(v-if='menuActiveIndex === "friendLog"')
|
||||
data-tables(v-bind='friendLogTable' ref='friendLogTableRef')
|
||||
template(#tool)
|
||||
div(style='margin: 0 0 10px; display: flex; align-items: center')
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
mixin friendsListTab
|
||||
.x-container(v-show='$refs.menu && $refs.menu.activeIndex === "friendsList"')
|
||||
.x-container(v-show='menuActiveIndex === "friendsList"')
|
||||
div(style='padding: 0px 10px 0px 10px')
|
||||
span.header {{ $t('view.friend_list.header') }}
|
||||
div(style='float: right; font-size: 13px')
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
mixin gameLogTab
|
||||
.x-container(v-show='$refs.menu && $refs.menu.activeIndex === \'gameLog\'')
|
||||
.x-container(v-show='menuActiveIndex === "gameLog"')
|
||||
data-tables(v-bind='gameLogTable' v-loading='gameLogTable.loading')
|
||||
template(#tool)
|
||||
div(style='margin: 0 0 10px; display: flex; align-items: center')
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
mixin notificationsTab
|
||||
.x-container(v-if='$refs.menu && $refs.menu.activeIndex === "notification"' v-loading='API.isNotificationsLoading')
|
||||
.x-container(v-if='menuActiveIndex === "notification"' v-loading='API.isNotificationsLoading')
|
||||
data-tables.notification-table(v-bind='notificationTable' ref='notificationTableRef')
|
||||
template(#tool)
|
||||
div(style='margin: 0 0 10px; display: flex; align-items: center')
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
mixin playerListTab
|
||||
.x-container(v-show='$refs.menu && $refs.menu.activeIndex === \'playerList\'' style='padding-top: 5px')
|
||||
.x-container(v-show='menuActiveIndex === "playerList"' style='padding-top: 5px')
|
||||
div(style='display: flex; flex-direction: column; height: 100%')
|
||||
div(v-if='currentInstanceWorld.ref.id' style='display: flex')
|
||||
el-popover(placement='right' width='500px' trigger='click' style='height: 120px')
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
mixin profileTab
|
||||
.x-container(v-if='$refs.menu && $refs.menu.activeIndex === "profile"')
|
||||
.x-container(v-if='menuActiveIndex === "profile"')
|
||||
.options-container(style='margin-top: 0')
|
||||
span.header {{ $t('view.profile.profile.header') }}
|
||||
.x-friend-list(style='margin-top: 10px')
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
mixin searchTab
|
||||
.x-container(v-show='$refs.menu && $refs.menu.activeIndex === \'search\'')
|
||||
.x-container(v-show='menuActiveIndex === "search"')
|
||||
div(style='margin: 0 0 10px; display: flex; align-items: center')
|
||||
el-input(
|
||||
v-model='searchText'
|
||||
@@ -14,7 +14,10 @@ mixin searchTab
|
||||
circle
|
||||
style='flex: none; margin-left: 10px')
|
||||
el-tabs(ref='searchTab' type='card' style='margin-top: 15px' @tab-click='searchText = ""')
|
||||
el-tab-pane(:label='$t("view.search.user.header")' v-loading='isSearchUserLoading' style='min-height: 60px')
|
||||
el-tab-pane(
|
||||
:label='$t("view.search.user.header")'
|
||||
v-loading='isSearchUserLoading'
|
||||
style='min-height: 60px')
|
||||
el-checkbox(v-model='searchUserByBio' style='margin-left: 10px') {{ $t('view.search.user.search_by_bio') }}
|
||||
el-checkbox(v-model='searchUserSortByLastLoggedIn' style='margin-left: 10px') {{ $t('view.search.user.sort_by_last_logged_in') }}
|
||||
.x-friend-list(style='min-height: 500px')
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
mixin settingsTab
|
||||
.x-container(v-if='$refs.menu && $refs.menu.activeIndex === "settings"')
|
||||
.x-container(v-if='menuActiveIndex === "settings"')
|
||||
.options-container(style='margin-top: 0; padding: 5px')
|
||||
span.header {{ $t('view.settings.header') }}
|
||||
el-tabs(type='card' style='height: calc(100% - 51px)')
|
||||
|
||||
Reference in New Issue
Block a user