Files
VRCX/src/mixins/tabs/favorites.pug
T
2025-01-26 07:33:44 +13:00

327 lines
35 KiB
Plaintext

mixin favoritesTab()
.x-container(v-show="$refs.menu && $refs.menu.activeIndex === '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(ref="favoriteTabRef" type="card" v-loading="API.isFavoriteLoading" style="height:100%")
el-tab-pane(:label="$t('view.favorite.friends.header')")
el-collapse(v-if="$refs.menu && $refs.menu.activeIndex === 'favorite' && $refs.favoriteTabRef && $refs.favoriteTabRef.currentName === '0'" style="border:0")
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') }}
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 favoriteFriends" v-if="favorite.groupKey === 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-tooltip(placement="left" :content="$t('view.favorite.move_tooltip')" :disabled="hideTooltips")
el-dropdown(trigger="click" @click.native.stop size="mini" style="margin-left:5px")
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" :key="groupAPI.name")
el-dropdown-item(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="height:20px;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')")
el-collapse(v-if="$refs.menu && $refs.menu.activeIndex === 'favorite' && $refs.favoriteTabRef && $refs.favoriteTabRef.currentName === '1'" style="border:0")
div(style="display:flex;align-items:center;justify-content:space-between")
div
el-button(size="small" @click="showWorldExportDialog") {{ $t('view.favorite.export') }}
el-button(size="small" @click="showWorldImportDialog" 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="worldFavoriteSearch" @input="searchWorldFavorites" clearable size="mini" :placeholder="$t('view.favorite.worlds.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 worldFavoriteSearchResults" :key="favorite.id" @click="showWorldDialog(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-if="favorite.occupants") {{ favorite.authorName }} ({{ favorite.occupants }})
span.extra(v-else v-text="favorite.authorName")
template(v-else)
.avatar
.detail
span(v-text="favorite.id")
span(style="display:block;margin-top:20px") {{ $t('view.favorite.worlds.vrchat_favorites') }}
el-collapse-item(v-for="group in API.favoriteWorldGroups" :key="group.name")
template(slot="title")
div(style="display:flex;align-items:center;")
span(v-text="group.displayName" style="font-weight:bold;font-size:14px;margin-left:10px")
el-tag(style="margin:1px 0 0 5px" size="mini" :type="userFavoriteWorldsStatusForFavTab(group.visibility)" effect="plain") {{ group.visibility.charAt(0).toUpperCase() + group.visibility.slice(1) }}
span(style="color:#909399;font-size:12px;margin-left:10px") {{ group.count }}/{{ group.capacity }}
el-tooltip(placement="top" :content="$t('view.favorite.visibility_tooltip')" :disabled="hideTooltips")
el-dropdown(trigger="click" @click.native.stop size="mini" style="margin-left:10px")
el-button(type="default" icon="el-icon-view" size="mini" circle)
el-dropdown-menu(#default="dropdown")
el-dropdown-item(v-if="group.visibility !== visibility" v-for="visibility in worldGroupVisibilityOptions" :key="visibility" style="display:block;margin:10px 0" v-text="visibility.charAt(0).toUpperCase() + visibility.slice(1)" @click.native="changeWorldGroupVisibility(group.name, visibility)")
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:5px")
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 favoriteWorlds" v-if="favorite.groupKey === group.key" :key="favorite.id" @click="showWorldDialog(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-if="favorite.ref.occupants") {{ favorite.ref.authorName }} ({{ favorite.ref.occupants }})
span.extra(v-else v-text="favorite.ref.authorName")
template(v-if="editFavoritesMode")
el-tooltip(placement="left" :content="$t('view.favorite.move_tooltip')" :disabled="hideTooltips")
el-dropdown(trigger="click" @click.native.stop size="mini" style="margin-left:5px")
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.favoriteWorldGroups" :key="groupAPI.name")
el-dropdown-item(style="display:block;margin:10px 0" @click.native="moveFavorite(favorite.ref, groupAPI, 'world')" :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(placement="left" :content="$t('view.favorite.self_invite_tooltip')" :disabled="hideTooltips")
el-button(@click.stop="newInstanceSelfInvite(favorite.id)" size="mini" icon="el-icon-message" 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('world', 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-tooltip(v-if="favorite.deleted" placement="left" :content="$t('view.favorite.unavailable_tooltip')")
i.el-icon-warning(style="color:#f56c6c;margin-left:5px")
el-button(type="text" icon="el-icon-close" size="mini" @click.stop="deleteFavorite(favorite.id)" style="margin-left:5px")
div(v-else style="height:20px;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.worlds.local_favorites') }}
br
el-button(size="small" @click="promptNewLocalWorldFavoriteGroup") {{ $t('view.favorite.worlds.new_group') }}
el-button(v-if="!refreshingLocalFavorites" size="small" @click="refreshLocalWorldFavorites" style="margin-left:5px") {{ $t('view.favorite.worlds.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.worlds.cancel_refresh') }}
el-collapse-item(v-for="group in localWorldFavoriteGroups" v-if="localWorldFavorites[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") {{ getLocalWorldFavoriteGroupLength(group) }}
el-tooltip(placement="top" :content="$t('view.favorite.rename_tooltip')" :disabled="hideTooltips")
el-button(@click.stop="promptLocalWorldFavoriteGroupRename(group)" size="mini" icon="el-icon-edit" circle style="margin-left:10px")
el-tooltip(placement="right" :content="$t('view.favorite.delete_tooltip')" :disabled="hideTooltips")
el-button(@click.stop="promptLocalWorldFavoriteGroupDelete(group)" size="mini" icon="el-icon-delete" circle style="margin-left:5px")
.x-friend-list(style="margin-top:10px" v-if="localWorldFavorites[group].length")
div(style="display:inline-block;width:300px;margin-right:15px" v-for="favorite in localWorldFavorites[group]" :key="favorite.id" @click="showWorldDialog(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-if="favorite.occupants") {{ favorite.authorName }} ({{ favorite.occupants }})
span.extra(v-else v-text="favorite.authorName")
template(v-if="editFavoritesMode")
el-tooltip(placement="left" :content="$t('view.favorite.copy_tooltip')" :disabled="hideTooltips")
el-dropdown(trigger="click" @click.native.stop size="mini" style="margin-left:5px")
el-button(type="default" icon="el-icon-s-order" size="mini" circle)
el-dropdown-menu(#default="dropdown")
template(v-for="groupAPI in API.favoriteWorldGroups" :key="groupAPI.name")
el-dropdown-item(style="display:block;margin:10px 0" @click.native="addFavoriteWorld(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.self_invite_tooltip')" :disabled="hideTooltips")
el-button(@click.stop="newInstanceSelfInvite(favorite.id)" size="mini" icon="el-icon-message" circle style="margin-left:5px")
el-tooltip(placement="right" :content="$t('view.favorite.unfavorite_tooltip')" :disabled="hideTooltips")
el-button(v-if="shiftHeld" @click.stop="removeLocalWorldFavorite(favorite.id, group)" size="mini" icon="el-icon-close" circle style="color:#f56c6c;margin-left:5px")
el-button(v-else @click.stop="showFavoriteDialog('world', 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="removeLocalWorldFavorite(favorite.id, group)" style="margin-left:5px")
div(v-else style="height:20px;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.avatars.header')")
el-collapse(v-if="$refs.menu && $refs.menu.activeIndex === 'favorite' && $refs.favoriteTabRef && $refs.favoriteTabRef.currentName === '2'" style="border:0")
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-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 favoriteAvatars" v-if="favorite.groupKey === 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-tooltip(placement="top" :content="$t('view.favorite.move_tooltip')" :disabled="hideTooltips")
el-dropdown(trigger="click" @click.native.stop size="mini" style="margin-left:5px")
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" :key="groupAPI.name")
el-dropdown-item(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="height:20px;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="height:20px;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-tooltip(placement="left" :content="$t('view.favorite.copy_tooltip')" :disabled="hideTooltips")
el-dropdown(trigger="click" @click.native.stop size="mini" style="margin-left:5px")
el-button(type="default" icon="el-icon-s-order" size="mini" circle)
el-dropdown-menu(#default="dropdown")
template(v-for="groupAPI in API.favoriteAvatarGroups" :key="groupAPI.name")
el-dropdown-item(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="height:20px;width:100%;display:flex;align-items:center;justify-content:center;color:rgb(144, 147, 153)")
span No Data