mirror of
https://github.com/MrUnknownDE/VRCX.git
synced 2026-05-04 13:56:07 +02:00
refactor: Friends List Tab (#1173)
This commit is contained in:
pa
GitHub
@@ -1,194 +0,0 @@
|
||||
mixin friendsListTab
|
||||
.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')
|
||||
div(v-if='friendsListBulkUnfriendMode' style='display: inline-block; margin-right: 10px')
|
||||
el-button(size='small' @click='showBulkUnfriendSelectionConfirm') {{ $t('view.friend_list.bulk_unfriend_selection') }}
|
||||
//- el-button(size="small" @click="showBulkUnfriendAllConfirm" style="margin-right:5px") Bulk Unfriend All
|
||||
div(style='display: inline-block; margin-right: 10px')
|
||||
span.name {{ $t('view.friend_list.bulk_unfriend') }}
|
||||
el-switch(
|
||||
@change='toggleFriendsListBulkUnfriendMode'
|
||||
v-model='friendsListBulkUnfriendMode'
|
||||
style='margin-left: 5px')
|
||||
span {{ $t('view.friend_list.load') }}
|
||||
template(v-if='friendsListLoading')
|
||||
span(v-text='friendsListLoadingProgress' style='margin-left: 5px')
|
||||
el-tooltip(
|
||||
placement='top'
|
||||
:content='$t("view.friend_list.cancel_tooltip")'
|
||||
:disabled='hideTooltips')
|
||||
el-button(
|
||||
@click='friendsListLoading = false'
|
||||
size='mini'
|
||||
icon='el-icon-loading'
|
||||
circle
|
||||
style='margin-left: 5px')
|
||||
template(v-else)
|
||||
el-tooltip(placement='top' :content='$t("view.friend_list.load_tooltip")' :disabled='hideTooltips')
|
||||
el-button(
|
||||
@click='friendsListLoadUsers'
|
||||
size='mini'
|
||||
icon='el-icon-refresh-left'
|
||||
circle
|
||||
style='margin-left: 5px')
|
||||
div(style='margin: 10px 0 0 10px; display: flex; align-items: center')
|
||||
div(style='flex: none; margin-right: 10px; display: flex; align-items: center')
|
||||
el-tooltip(
|
||||
placement='bottom'
|
||||
:content='$t("view.friend_list.favorites_only_tooltip")'
|
||||
:disabled='hideTooltips')
|
||||
el-switch(
|
||||
v-model='friendsListSearchFilterVIP'
|
||||
@change='friendsListSearchChange'
|
||||
active-color='#13ce66')
|
||||
el-input(
|
||||
v-model='friendsListSearch'
|
||||
:placeholder='$t("view.friend_list.search_placeholder")'
|
||||
@change='friendsListSearchChange'
|
||||
clearable
|
||||
style='flex: 1')
|
||||
el-select(
|
||||
v-model='friendsListSearchFilters'
|
||||
multiple
|
||||
clearable
|
||||
collapse-tags
|
||||
style='flex: none; width: 200px; margin: 0 10px'
|
||||
@change='friendsListSearchChange'
|
||||
:placeholder='$t("view.friend_list.filter_placeholder")')
|
||||
el-option(
|
||||
v-for='type in ["Display Name", "User Name", "Rank", "Status", "Bio", "Memo"]'
|
||||
:key='type'
|
||||
:label='type'
|
||||
:value='type')
|
||||
el-tooltip(placement='top' :content='$t("view.friend_list.refresh_tooltip")' :disabled='hideTooltips')
|
||||
el-button(
|
||||
type='default'
|
||||
@click='friendsListSearchChange'
|
||||
icon='el-icon-refresh'
|
||||
circle
|
||||
style='flex: none')
|
||||
data-tables(
|
||||
v-bind='friendsListTable'
|
||||
@row-click='selectFriendsListRow'
|
||||
:table-props='{ height: "calc(100vh - 170px)", size: "mini" }'
|
||||
style='margin-top: 10px; cursor: pointer')
|
||||
el-table-column(
|
||||
width='55'
|
||||
prop='$selected'
|
||||
v-if='friendsListBulkUnfriendMode'
|
||||
:key='friendsListBulkUnfriendForceUpdate')
|
||||
template(#default='scope')
|
||||
el-button(type='text' size='mini' @click.stop)
|
||||
el-checkbox(v-model='scope.row.$selected' @change='friendsListBulkUnfriendForceUpdate++')
|
||||
el-table-column(:label='$t("table.friendList.no")' width='70' prop='$friendNumber' sortable='custom')
|
||||
template(#default='scope')
|
||||
span {{ scope.row.$friendNumber ? scope.row.$friendNumber : '' }}
|
||||
el-table-column(:label='$t("table.friendList.avatar")' width='70' prop='photo')
|
||||
template(#default='scope')
|
||||
el-popover(placement='right' height='500px' trigger='hover')
|
||||
img.friends-list-avatar(slot='reference' v-lazy='userImage(scope.row)')
|
||||
img.friends-list-avatar(
|
||||
v-lazy='userImageFull(scope.row)'
|
||||
style='height: 500px; cursor: pointer'
|
||||
@click='showFullscreenImageDialog(userImageFull(scope.row))')
|
||||
el-table-column(
|
||||
:label='$t("table.friendList.displayName")'
|
||||
min-width='140'
|
||||
prop='displayName'
|
||||
sortable
|
||||
:sort-method='(a, b) => sortAlphabetically(a, b, "displayName")')
|
||||
template(#default='scope')
|
||||
span.name(
|
||||
v-if='randomUserColours'
|
||||
v-text='scope.row.displayName'
|
||||
:style='{ color: scope.row.$userColour }')
|
||||
span.name(v-else v-text='scope.row.displayName')
|
||||
el-table-column(
|
||||
:label='$t("table.friendList.rank")'
|
||||
width='110'
|
||||
prop='$trustSortNum'
|
||||
sortable='custom')
|
||||
template(#default='scope')
|
||||
span.name(
|
||||
v-if='randomUserColours'
|
||||
v-text='scope.row.$trustLevel'
|
||||
:class='scope.row.$trustClass')
|
||||
span.name(v-else v-text='scope.row.$trustLevel' :style='{ color: scope.row.$userColour }')
|
||||
el-table-column(
|
||||
:label='$t("table.friendList.status")'
|
||||
min-width='180'
|
||||
prop='status'
|
||||
sortable
|
||||
:sort-method='(a, b) => sortStatus(a.status, b.status)')
|
||||
template(#default='scope')
|
||||
i.x-user-status(
|
||||
v-if='scope.row.status !== "offline"'
|
||||
:class='statusClass(scope.row.status)'
|
||||
style='margin-right: 3px')
|
||||
span(v-text='scope.row.statusDescription')
|
||||
el-table-column(
|
||||
:label='$t("table.friendList.language")'
|
||||
width='110'
|
||||
prop='$languages'
|
||||
sortable
|
||||
:sort-method='(a, b) => sortLanguages(a, b)')
|
||||
template(#default='scope')
|
||||
el-tooltip(v-for='item in scope.row.$languages' :key='item.key' placement='top')
|
||||
template(#content)
|
||||
span {{ item.value }} ({{ item.key }})
|
||||
span.flags(
|
||||
:class='languageClass(item.key)'
|
||||
style='display: inline-block; margin-right: 5px')
|
||||
el-table-column(:label='$t("table.friendList.bioLink")' width='100' prop='bioLinks')
|
||||
template(#default='scope')
|
||||
el-tooltip(v-if='link' v-for='(link, index) in scope.row.bioLinks' :key='index')
|
||||
template(#content)
|
||||
span(v-text='link')
|
||||
img(
|
||||
:src='getFaviconUrl(link)'
|
||||
style='width: 16px; height: 16px; vertical-align: middle; margin-right: 5px; cursor: pointer'
|
||||
@click.stop='openExternalLink(link)')
|
||||
el-table-column(:label='$t("table.friendList.joinCount")' width='120' prop='$joinCount' sortable)
|
||||
el-table-column(:label='$t("table.friendList.timeTogether")' width='140' prop='$timeSpent' sortable)
|
||||
template(#default='scope')
|
||||
span(v-if='scope.row.$timeSpent') {{ timeToText(scope.row.$timeSpent) }}
|
||||
el-table-column(
|
||||
:label='$t("table.friendList.lastSeen")'
|
||||
width='170'
|
||||
prop='$lastSeen'
|
||||
sortable
|
||||
:sort-method='(a, b) => sortAlphabetically(a, b, "$lastSeen")')
|
||||
template(#default='scope')
|
||||
span {{ scope.row.$lastSeen | formatDate('long') }}
|
||||
el-table-column(
|
||||
:label='$t("table.friendList.lastActivity")'
|
||||
width='170'
|
||||
prop='last_activity'
|
||||
sortable
|
||||
:sort-method='(a, b) => sortAlphabetically(a, b, "last_activity")')
|
||||
template(#default='scope')
|
||||
span {{ scope.row.last_activity | formatDate('long') }}
|
||||
el-table-column(
|
||||
:label='$t("table.friendList.lastLogin")'
|
||||
width='170'
|
||||
prop='last_login'
|
||||
sortable
|
||||
:sort-method='(a, b) => sortAlphabetically(a, b, "last_login")')
|
||||
template(#default='scope')
|
||||
span {{ scope.row.last_login | formatDate('long') }}
|
||||
el-table-column(
|
||||
:label='$t("table.friendList.dateJoined")'
|
||||
width='120'
|
||||
prop='date_joined'
|
||||
sortable
|
||||
:sort-method='(a, b) => sortAlphabetically(a, b, "date_joined")')
|
||||
el-table-column(:label='$t("table.friendList.unfriend")' width='100' align='center')
|
||||
template(#default='scope')
|
||||
el-button(
|
||||
type='text'
|
||||
icon='el-icon-close'
|
||||
style='color: #f56c6c'
|
||||
size='mini'
|
||||
@click.stop='confirmDeleteFriend(scope.row.id)')
|
||||
Reference in New Issue
Block a user