refactor: favorites tab (#1177)

* refactor: favorites tab

* rm useless characters
This commit is contained in:
pa
2025-03-11 23:26:26 +09:00
committed by GitHub
parent 3cbe0a7047
commit 7a449ad383
21 changed files with 2154 additions and 1317 deletions
-485
View File
@@ -1,485 +0,0 @@
mixin favoritesTab
.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') }}
el-button(size='small' @click='bulkCopyFavoriteSelection') {{ $t('view.favorite.copy') }}
el-button(size='small' @click='showBulkUnfavoriteSelectionConfirm') {{ $t('view.favorite.bulk_unfavorite') }}
div(style='display: flex; align-items: center; margin-right: 10px')
span.name {{ $t('view.favorite.edit_mode') }}
el-switch(v-model='editFavoritesMode' style='margin-left: 5px')
el-tooltip(placement='bottom' :content='$t("view.favorite.refresh_tooltip")' :disabled='hideTooltips')
el-button(
type='default'
:loading='API.isFavoriteLoading'
@click='API.refreshFavorites(); getLocalWorldFavorites()'
size='small'
icon='el-icon-refresh'
circle)
el-tabs(type='card' v-loading='API.isFavoriteLoading' style='height: 100%')
el-tab-pane(:label='$t("view.favorite.friends.header")' lazy)
div(style='display: flex; align-items: center; justify-content: space-between')
div
el-button(size='small' @click='showFriendExportDialog') {{ $t('view.favorite.export') }}
el-button(size='small' @click='showFriendImportDialog' style='margin-left: 5px') {{ $t('view.favorite.import') }}
div(style='display: flex; align-items: center; font-size: 13px; margin-right: 10px')
span.name(style='margin-right: 5px; line-height: 10px') {{ $t('view.favorite.sort_by') }}
el-radio-group(v-model='sortFavorites' @change='saveSortFavoritesOption')
el-radio(:label='false') {{ $t('view.settings.appearance.appearance.sort_favorite_by_name') }}
el-radio(:label='true') {{ $t('view.settings.appearance.appearance.sort_favorite_by_date') }}
span(style='display: block; margin-top: 30px') {{ $t('view.favorite.avatars.vrchat_favorites') }}
el-collapse(style='border: 0')
el-collapse-item(v-for='group in API.favoriteFriendGroups' :key='group.name')
template(slot='title')
span(
v-text='group.displayName'
style='font-weight: bold; font-size: 14px; margin-left: 10px')
span(style='color: #909399; font-size: 12px; margin-left: 10px') {{ group.count }}/{{ group.capacity }}
el-tooltip(
placement='top'
:content='$t("view.favorite.rename_tooltip")'
:disabled='hideTooltips')
el-button(
@click.stop='changeFavoriteGroupName(group)'
size='mini'
icon='el-icon-edit'
circle
style='margin-left: 10px')
el-tooltip(
placement='right'
:content='$t("view.favorite.clear_tooltip")'
:disabled='hideTooltips')
el-button(
@click.stop='clearFavoriteGroup(group)'
size='mini'
icon='el-icon-delete'
circle
style='margin-left: 5px')
.x-friend-list(v-if='group.count' style='margin-top: 10px')
div(
style='display: inline-block; width: 300px; margin-right: 15px'
v-for='favorite in groupedByGroupKeyFavoriteFriends[group.key]'
:key='favorite.id'
@click='showUserDialog(favorite.id)')
.x-friend-item
template(v-if='favorite.ref')
.avatar(:class='userStatusClass(favorite.ref)')
img(v-lazy='userImage(favorite.ref)')
.detail
span.name(
v-text='favorite.ref.displayName'
:style='{ color: favorite.ref.$userColour }')
location.extra(
v-if='favorite.ref.location !== "offline"'
:location='favorite.ref.location'
:traveling='favorite.ref.travelingToLocation'
:link='false')
span(v-else v-text='favorite.ref.statusDescription')
template(v-if='editFavoritesMode')
el-dropdown(
trigger='click'
@click.native.stop
size='mini'
style='margin-left: 5px')
el-tooltip(
placement='left'
:content='$t("view.favorite.move_tooltip")'
:disabled='hideTooltips')
el-button(type='default' icon='el-icon-back' size='mini' circle)
el-dropdown-menu(#default='dropdown')
template(
v-if='groupAPI.name !== group.name'
v-for='groupAPI in API.favoriteFriendGroups')
el-dropdown-item(
:key='groupAPI.name'
style='display: block; margin: 10px 0'
@click.native='moveFavorite(favorite.ref, groupAPI, "friend")'
:disabled='groupAPI.count >= groupAPI.capacity') {{ groupAPI.displayName }} ({{ groupAPI.count }} / {{ groupAPI.capacity }})
el-button(type='text' size='mini' @click.stop style='margin-left: 5px')
el-checkbox(v-model='favorite.$selected')
template(v-else)
el-tooltip(
placement='right'
:content='$t("view.favorite.unfavorite_tooltip")'
:disabled='hideTooltips')
el-button(
v-if='shiftHeld'
@click.stop='deleteFavorite(favorite.id)'
size='mini'
icon='el-icon-close'
circle
style='color: #f56c6c; margin-left: 5px')
el-button(
v-else
@click.stop='showFavoriteDialog("friend", favorite.id)'
type='default'
icon='el-icon-star-on'
size='mini'
circle
style='margin-left: 5px')
template(v-else)
.avatar
.detail
span(v-text='favorite.name || favorite.id')
el-button(
type='text'
icon='el-icon-close'
size='mini'
@click.stop='deleteFavorite(favorite.id)'
style='margin-left: 5px')
div(
v-else
style='padding-top: 25px; width: 100%; display: flex; align-items: center; justify-content: center; color: rgb(144, 147, 153)')
span No Data
el-tab-pane(:label='$t("view.favorite.worlds.header")' lazy)
favorites-world-tab(
@show-world-export-dialog='showWorldExportDialog'
@show-world-import-dialog='showWorldImportDialog'
@save-sort-favorites-option='saveSortFavoritesOption'
@show-world-dialog='showWorldDialog'
@change-favorite-group-name='changeFavoriteGroupName'
@clear-favorite-group='clearFavoriteGroup'
@new-instance-self-invite='newInstanceSelfInvite'
@show-favorite-dialog='showFavoriteDialog'
@refresh-local-world-favorite='refreshLocalWorldFavorites'
@delete-local-world-favorite-group='deleteLocalWorldFavoriteGroup'
@search-world-favorites='searchWorldFavorites'
@remove-local-world-favorite='removeLocalWorldFavorite'
:sort-favorites.sync='sortFavorites'
:world-favorite-search-results='worldFavoriteSearchResults'
:hide-tooltips='hideTooltips'
:favorite-worlds='favoriteWorlds'
:edit-favorites-mode='editFavoritesMode'
:shift-held='shiftHeld'
:refresh-local-world-favorites='refreshLocalWorldFavorites'
:local-world-favorite-groups='localWorldFavoriteGroups'
:local-world-favorites='localWorldFavorites')
el-tab-pane(:label='$t("view.favorite.avatars.header")' lazy)
div(style='display: flex; align-items: center; justify-content: space-between')
div
el-button(size='small' @click='showAvatarExportDialog') {{ $t('view.favorite.export') }}
el-button(size='small' @click='showAvatarImportDialog' style='margin-left: 5px') {{ $t('view.favorite.import') }}
div(style='display: flex; align-items: center; font-size: 13px; margin-right: 10px')
span.name(style='margin-right: 5px; line-height: 10px') {{ $t('view.favorite.sort_by') }}
el-radio-group(
v-model='sortFavorites'
@change='saveSortFavoritesOption'
style='margin-right: 12px')
el-radio(:label='false') {{ $t('view.settings.appearance.appearance.sort_favorite_by_name') }}
el-radio(:label='true') {{ $t('view.settings.appearance.appearance.sort_favorite_by_date') }}
el-input(
v-model='avatarFavoriteSearch'
@input='searchAvatarFavorites'
clearable
size='mini'
:placeholder='$t("view.favorite.avatars.search")'
style='width: 200px')
.x-friend-list(style='margin-top: 10px')
div(
style='display: inline-block; width: 300px; margin-right: 15px'
v-for='favorite in avatarFavoriteSearchResults'
:key='favorite.id'
@click='showAvatarDialog(favorite.id)')
.x-friend-item
template(v-if='favorite.name')
.avatar
img(v-lazy='favorite.thumbnailImageUrl')
.detail
span.name(v-text='favorite.name')
span.extra(v-text='favorite.authorName')
template(v-else)
.avatar
.detail
span.name(v-text='favorite.id')
span(style='display: block; margin-top: 20px') {{ $t('view.favorite.avatars.vrchat_favorites') }}
el-collapse(style='border: 0')
el-collapse-item(v-for='group in API.favoriteAvatarGroups' :key='group.name')
template(slot='title')
span(
v-text='group.displayName'
style='font-weight: bold; font-size: 14px; margin-left: 10px')
span(style='color: #909399; font-size: 12px; margin-left: 10px') {{ group.count }}/{{ group.capacity }}
el-tooltip(
placement='top'
:content='$t("view.favorite.rename_tooltip")'
:disabled='hideTooltips')
el-button(
@click.stop='changeFavoriteGroupName(group)'
size='mini'
icon='el-icon-edit'
circle
style='margin-left: 10px')
el-tooltip(
placement='right'
:content='$t("view.favorite.clear_tooltip")'
:disabled='hideTooltips')
el-button(
@click.stop='clearFavoriteGroup(group)'
size='mini'
icon='el-icon-delete'
circle
style='margin-left: 5px')
.x-friend-list(v-if='group.count' style='margin-top: 10px')
div(
style='display: inline-block; width: 300px; margin-right: 15px'
v-for='favorite in groupedByGroupKeyFavoriteAvatars[group.key]'
:key='favorite.id'
@click='showAvatarDialog(favorite.id)')
.x-friend-item
template(v-if='favorite.ref')
.avatar
img(v-lazy='favorite.ref.thumbnailImageUrl')
.detail
span.name(v-text='favorite.ref.name')
span.extra(v-text='favorite.ref.authorName')
template(v-if='editFavoritesMode')
el-dropdown(
trigger='click'
@click.native.stop
size='mini'
style='margin-left: 5px')
el-tooltip(
placement='top'
:content='$t("view.favorite.move_tooltip")'
:disabled='hideTooltips')
el-button(type='default' icon='el-icon-back' size='mini' circle)
el-dropdown-menu(#default='dropdown')
template(
v-if='groupAPI.name !== group.name'
v-for='groupAPI in API.favoriteAvatarGroups')
el-dropdown-item(
:key='groupAPI.name'
style='display: block; margin: 10px 0'
@click.native='moveFavorite(favorite.ref, groupAPI, "avatar")'
:disabled='groupAPI.count >= groupAPI.capacity') {{ groupAPI.displayName }} ({{ groupAPI.count }} / {{ groupAPI.capacity }})
el-button(type='text' size='mini' @click.stop style='margin-left: 5px')
el-checkbox(v-model='favorite.$selected')
template(v-else)
el-tooltip(
v-if='favorite.deleted'
placement='left'
:content='$t("view.favorite.unavailable_tooltip")')
i.el-icon-warning(style='color: #f56c6c; margin-left: 5px')
el-tooltip(
v-if='favorite.ref.releaseStatus === "private"'
placement='left'
:content='$t("view.favorite.private")')
i.el-icon-warning(style='color: #e6a23c; margin-left: 5px')
el-tooltip(
v-if='favorite.ref.releaseStatus !== "private" && !favorite.deleted'
placement='left'
:content='$t("view.favorite.select_avatar_tooltip")'
:disabled='hideTooltips')
el-button(
@click.stop='selectAvatarWithConfirmation(favorite.id)'
:disabled='API.currentUser.currentAvatar === favorite.id'
size='mini'
icon='el-icon-check'
circle
style='margin-left: 5px')
el-tooltip(
placement='right'
:content='$t("view.favorite.unfavorite_tooltip")'
:disabled='hideTooltips')
el-button(
v-if='shiftHeld'
@click.stop='deleteFavorite(favorite.id)'
size='mini'
icon='el-icon-close'
circle
style='color: #f56c6c; margin-left: 5px')
el-button(
v-else
@click.stop='showFavoriteDialog("avatar", favorite.id)'
type='default'
icon='el-icon-star-on'
size='mini'
circle
style='margin-left: 5px')
template(v-else)
.avatar
.detail
span.name(v-text='favorite.name || favorite.id')
el-button(
type='text'
icon='el-icon-close'
size='mini'
@click.stop='deleteFavorite(favorite.id)'
style='margin-left: 5px')
div(
v-else
style='padding-top: 25px; width: 100%; display: flex; align-items: center; justify-content: center; color: rgb(144, 147, 153)')
span No Data
el-collapse-item
template(slot='title')
span(style='font-weight: bold; font-size: 14px; margin-left: 10px') Local History
span(style='color: #909399; font-size: 12px; margin-left: 10px') {{ avatarHistoryArray.length }}/100
el-tooltip(placement='right' content='Clear' :disabled='hideTooltips')
el-button(
@click.stop='promptClearAvatarHistory'
size='mini'
icon='el-icon-delete'
circle
style='margin-left: 5px')
.x-friend-list(v-if='avatarHistoryArray.length' style='margin-top: 10px')
div(
style='display: inline-block; width: 300px; margin-right: 15px'
v-for='favorite in avatarHistoryArray'
:key='favorite.id'
@click='showAvatarDialog(favorite.id)')
.x-friend-item
.avatar
img(v-lazy='favorite.thumbnailImageUrl')
.detail
span.name(v-text='favorite.name')
span.extra(v-text='favorite.authorName')
el-tooltip(
placement='left'
:content='$t("view.favorite.select_avatar_tooltip")'
:disabled='hideTooltips')
el-button(
@click.stop='selectAvatarWithConfirmation(favorite.id)'
:disabled='API.currentUser.currentAvatar === favorite.id'
size='mini'
icon='el-icon-check'
circle
style='margin-left: 5px')
template(v-if='API.cachedFavoritesByObjectId.has(favorite.id)')
el-tooltip(placement='right' content='Unfavorite' :disabled='hideTooltips')
el-button(
@click.stop='showFavoriteDialog("avatar", favorite.id)'
type='default'
icon='el-icon-star-on'
size='mini'
circle
style='margin-left: 5px')
template(v-else)
el-tooltip(placement='right' content='Favorite' :disabled='hideTooltips')
el-button(
@click.stop='showFavoriteDialog("avatar", favorite.id)'
type='default'
icon='el-icon-star-off'
size='mini'
circle
style='margin-left: 5px')
div(
v-else
style='padding-top: 25px; width: 100%; display: flex; align-items: center; justify-content: center; color: rgb(144, 147, 153)')
span No Data
span(style='display: block; margin-top: 20px') {{ $t('view.favorite.avatars.local_favorites') }}
br
el-button(
size='small'
:disabled='!isLocalUserVrcplusSupporter()'
@click='promptNewLocalAvatarFavoriteGroup') {{ $t('view.favorite.avatars.new_group') }}
el-button(
v-if='!refreshingLocalFavorites'
size='small'
@click='refreshLocalAvatarFavorites'
style='margin-left: 5px') {{ $t('view.favorite.avatars.refresh') }}
el-button(v-else size='small' @click='refreshingLocalFavorites = false' style='margin-left: 5px')
i.el-icon-loading(style='margin-right: 5px')
span {{ $t('view.favorite.avatars.cancel_refresh') }}
el-collapse-item(
v-for='group in localAvatarFavoriteGroups'
v-if='localAvatarFavorites[group]'
:key='group')
template(slot='title')
span(v-text='group' style='font-weight: bold; font-size: 14px; margin-left: 10px')
span(style='color: #909399; font-size: 12px; margin-left: 10px') {{ getLocalAvatarFavoriteGroupLength(group) }}
el-tooltip(
placement='top'
:content='$t("view.favorite.rename_tooltip")'
:disabled='hideTooltips')
el-button(
@click.stop='promptLocalAvatarFavoriteGroupRename(group)'
size='mini'
icon='el-icon-edit'
circle
style='margin-left: 5px')
el-tooltip(
placement='right'
:content='$t("view.favorite.delete_tooltip")'
:disabled='hideTooltips')
el-button(
@click.stop='promptLocalAvatarFavoriteGroupDelete(group)'
size='mini'
icon='el-icon-delete'
circle
style='margin-left: 5px')
.x-friend-list(style='margin-top: 10px' v-if='localAvatarFavorites[group].length')
div(
style='display: inline-block; width: 300px; margin-right: 15px'
v-for='favorite in localAvatarFavorites[group]'
:key='favorite.id'
@click='showAvatarDialog(favorite.id)')
.x-friend-item
template(v-if='favorite.name')
.avatar
img(v-lazy='favorite.thumbnailImageUrl')
.detail
span.name(v-text='favorite.name')
span.extra(v-text='favorite.authorName')
template(v-if='editFavoritesMode')
el-dropdown(
trigger='click'
@click.native.stop
size='mini'
style='margin-left: 5px')
el-tooltip(
placement='left'
:content='$t("view.favorite.copy_tooltip")'
:disabled='hideTooltips')
el-button(type='default' icon='el-icon-back' size='mini' circle)
el-dropdown-menu(#default='dropdown')
template(v-for='groupAPI in API.favoriteAvatarGroups')
el-dropdown-item(
:key='groupAPI.name'
style='display: block; margin: 10px 0'
@click.native='addFavoriteAvatar(favorite, groupAPI, true)'
:disabled='groupAPI.count >= groupAPI.capacity') {{ groupAPI.displayName }} ({{ groupAPI.count }} / {{ groupAPI.capacity }})
template(v-else)
el-tooltip(
placement='left'
:content='$t("view.favorite.select_avatar_tooltip")'
:disabled='hideTooltips')
el-button(
@click.stop='selectAvatarWithConfirmation(favorite.id)'
:disabled='API.currentUser.currentAvatar === favorite.id'
size='mini'
icon='el-icon-check'
circle
style='margin-left: 5px')
el-tooltip(
placement='right'
:content='$t("view.favorite.unfavorite_tooltip")'
:disabled='hideTooltips')
el-button(
v-if='shiftHeld'
@click.stop='removeLocalAvatarFavorite(favorite.id, group)'
size='mini'
icon='el-icon-close'
circle
style='color: #f56c6c; margin-left: 5px')
el-button(
v-else
@click.stop='showFavoriteDialog("avatar", favorite.id)'
type='default'
icon='el-icon-star-on'
size='mini'
circle
style='margin-left: 5px')
template(v-else)
.avatar
.detail
span(v-text='favorite.id')
el-button(
type='text'
icon='el-icon-close'
size='mini'
@click.stop='removeLocalAvatarFavorite(favorite.id, group)'
style='margin-left: 5px')
div(
v-else
style='padding-top: 25px; width: 100%; display: flex; align-items: center; justify-content: center; color: rgb(144, 147, 153)')
span No Data