improve favorite edit mode performance

src/views/Favorites/components/FavoritesAvatarItem.vue

@@ -9,7 +9,7 @@
                     <span class="name" v-text="localFavFakeRef.name"></span>
                     <span class="extra" v-text="localFavFakeRef.authorName"></span>
                 </div>
-                <template v-if="editFavoritesMode">
+                <div class="editing">
                     <el-dropdown trigger="click" size="small" style="margin-left: 5px">
                         <div>
                             <el-tooltip placement="top" :content="tooltipContent">
@@ -33,40 +33,73 @@
                     <el-button v-if="!isLocalFavorite" type="text" size="small" style="margin-left: 5px" @click.stop>
                         <el-checkbox v-model="isSelected"></el-checkbox>
                     </el-button>
-                </template>
+                </div>
-                <template v-else-if="!isLocalFavorite">
+                <div class="default">
+                    <template v-if="!isLocalFavorite">
+                        <el-tooltip
+                            v-if="favorite.deleted"
+                            placement="left"
+                            :content="t('view.favorite.unavailable_tooltip')">
+                            <el-icon><Warning /></el-icon>
+                        </el-tooltip>
+                        <el-tooltip
+                            v-if="favorite.ref.releaseStatus === 'private'"
+                            placement="left"
+                            :content="t('view.favorite.private')">
+                            <el-icon><Warning /></el-icon>
+                        </el-tooltip>
+                        <el-tooltip
+                            v-if="favorite.ref.releaseStatus !== 'private' && !favorite.deleted"
+                            placement="left"
+                            :content="t('view.favorite.select_avatar_tooltip')">
+                            <el-button
+                                :disabled="currentUser.currentAvatar === favorite.id"
+                                size="small"
+                                :icon="Check"
+                                circle
+                                style="margin-left: 5px"
+                                @click.stop="selectAvatarWithConfirmation(favorite.id)"></el-button>
+                        </el-tooltip>
+                        <el-tooltip placement="right" :content="t('view.favorite.unfavorite_tooltip')">
+                            <el-button
+                                v-if="shiftHeld"
+                                size="small"
+                                :icon="Close"
+                                circle
+                                style="color: #f56c6c; margin-left: 5px"
+                                @click.stop="deleteFavorite(favorite.id)"></el-button>
+                            <el-button
+                                v-else
+                                type="default"
+                                :icon="Star"
+                                size="small"
+                                circle
+                                style="margin-left: 5px"
+                                @click.stop="showFavoriteDialog('avatar', favorite.id)"></el-button>
+                        </el-tooltip>
+                    </template>
+                    <template v-else>
+                        <el-tooltip placement="left" :content="t('view.favorite.select_avatar_tooltip')">
+                            <el-button
+                                :disabled="currentUser.currentAvatar === favorite.id"
+                                size="small"
+                                circle
+                                style="margin-left: 5px"
+                                :icon="Check"
+                                @click.stop="selectAvatarWithConfirmation(favorite.id)" />
+                        </el-tooltip>
+                    </template>
                     <el-tooltip
-                        v-if="favorite.deleted"
+                        v-if="isLocalFavorite"
-                        placement="left"
+                        placement="right"
-                        :content="t('view.favorite.unavailable_tooltip')">
+                        :content="t('view.favorite.unfavorite_tooltip')">
-                        <el-icon><Warning /></el-icon>
-                    </el-tooltip>
-                    <el-tooltip
-                        v-if="favorite.ref.releaseStatus === 'private'"
-                        placement="left"
-                        :content="t('view.favorite.private')">
-                        <el-icon><Warning /></el-icon>
-                    </el-tooltip>
-                    <el-tooltip
-                        v-if="favorite.ref.releaseStatus !== 'private' && !favorite.deleted"
-                        placement="left"
-                        :content="t('view.favorite.select_avatar_tooltip')">
-                        <el-button
-                            :disabled="currentUser.currentAvatar === favorite.id"
-                            size="small"
-                            :icon="Check"
-                            circle
-                            style="margin-left: 5px"
-                            @click.stop="selectAvatarWithConfirmation(favorite.id)"></el-button>
-                    </el-tooltip>
-                    <el-tooltip placement="right" :content="t('view.favorite.unfavorite_tooltip')">
                         <el-button
                             v-if="shiftHeld"
                             size="small"
                             :icon="Close"
                             circle
                             style="color: #f56c6c; margin-left: 5px"
-                            @click.stop="deleteFavorite(favorite.id)"></el-button>
+                            @click.stop="removeLocalAvatarFavorite(favorite.id, favoriteGroupName)" />
                         <el-button
                             v-else
                             type="default"
@@ -74,37 +107,9 @@
                             size="small"
                             circle
                             style="margin-left: 5px"
-                            @click.stop="showFavoriteDialog('avatar', favorite.id)"></el-button>
+                            @click.stop="showFavoriteDialog('avatar', favorite.id)" />
                     </el-tooltip>
-                </template>
+                </div>
-                <template v-else>
-                    <el-tooltip placement="left" :content="t('view.favorite.select_avatar_tooltip')">
-                        <el-button
-                            :disabled="currentUser.currentAvatar === favorite.id"
-                            size="small"
-                            circle
-                            style="margin-left: 5px"
-                            :icon="Check"
-                            @click.stop="selectAvatarWithConfirmation(favorite.id)" />
-                    </el-tooltip>
-                </template>
-                <el-tooltip v-if="isLocalFavorite" placement="right" :content="t('view.favorite.unfavorite_tooltip')">
-                    <el-button
-                        v-if="shiftHeld"
-                        size="small"
-                        :icon="Close"
-                        circle
-                        style="color: #f56c6c; margin-left: 5px"
-                        @click.stop="removeLocalAvatarFavorite(favorite.id, favoriteGroupName)" />
-                    <el-button
-                        v-else
-                        type="default"
-                        :icon="Star"
-                        size="small"
-                        circle
-                        style="margin-left: 5px"
-                        @click.stop="showFavoriteDialog('avatar', favorite.id)"
-                /></el-tooltip>
             </template>
             <template v-else>
                 <div class="avatar"></div>
@@ -142,7 +147,6 @@
     const props = defineProps({
         favorite: Object,
         group: [Object, String],
-        editFavoritesMode: Boolean,
         isLocalFavorite: Boolean
     });
     const emit = defineEmits(['click', 'handle-select']);

src/views/Favorites/components/FavoritesAvatarTab.vue

@@ -82,13 +82,16 @@
                             @click.stop="clearFavoriteGroup(group)" />
                     </el-tooltip>
                 </template>
-                <div v-if="group.count" class="x-friend-list" style="margin-top: 10px">
+                <div
+                    v-if="group.count"
+                    class="x-friend-list"
+                    :class="{ 'is-editing': editFavoritesMode }"
+                    style="margin-top: 10px">
                     <FavoritesAvatarItem
                         v-for="favorite in groupedByGroupKeyFavoriteAvatars[group.key]"
                         :key="favorite.id"
                         :favorite="favorite"
                         :group="group"
-                        :edit-favorites-mode="editFavoritesMode"
                         style="display: inline-block; width: 300px; margin-right: 15px"
                         @handle-select="favorite.$selected = $event"
                         @click="showAvatarDialog(favorite.id)" />
@@ -181,7 +184,11 @@
                             @click.stop="promptLocalAvatarFavoriteGroupDelete(group)"></el-button>
                     </el-tooltip>
                 </template>
-                <div v-if="localAvatarFavorites[group].length" class="x-friend-list" :style="{ marginTop: '10px' }">
+                <div
+                    v-if="localAvatarFavorites[group].length"
+                    class="x-friend-list"
+                    :class="{ 'is-editing': editFavoritesMode }"
+                    :style="{ marginTop: '10px' }">
                     <FavoritesAvatarItem
                         v-for="favorite in localAvatarFavorites[group]"
                         :key="favorite.id"
@@ -189,7 +196,6 @@
                         :style="{ display: 'inline-block', width: '300px', marginRight: '15px' }"
                         :favorite="favorite"
                         :group="group"
-                        :edit-favorites-mode="editFavoritesMode"
                         @handle-select="favorite.$selected = $event"
                         @click="showAvatarDialog(favorite.id)" />
                 </div>
@@ -246,8 +252,7 @@
         getLocalAvatarFavoriteGroupLength,
         deleteLocalAvatarFavoriteGroup,
         renameLocalAvatarFavoriteGroup,
-        newLocalAvatarFavoriteGroup,
+        newLocalAvatarFavoriteGroup
-        saveSortFavoritesOption
     } = useFavoriteStore();
     const { avatarHistoryArray } = storeToRefs(useAvatarStore());
     const { promptClearAvatarHistory, showAvatarDialog } = useAvatarStore();
@@ -419,3 +424,15 @@
             .catch(() => {});
     }
 </script>
+
+<style scoped>
+    .x-friend-list :deep(.editing) {
+        display: none;
+    }
+    .x-friend-list.is-editing :deep(.editing) {
+        display: block;
+    }
+    .x-friend-list.is-editing :deep(.default) {
+        display: none;
+    }
+</style>

src/views/Favorites/components/FavoritesFriendItem.vue

@@ -18,7 +18,7 @@
                         :link="false" />
                     <span v-else v-text="favorite.ref.statusDescription"></span>
                 </div>
-                <template v-if="editFavoritesMode">
+                <div class="editing">
                     <el-dropdown trigger="click" size="small" style="margin-left: 5px">
                         <div>
                             <el-tooltip placement="left" :content="t('view.favorite.move_tooltip')">
@@ -42,8 +42,8 @@
                     <el-button type="text" size="small" style="margin-left: 5px" @click.stop>
                         <el-checkbox v-model="favorite.$selected"></el-checkbox>
                     </el-button>
-                </template>
+                </div>
-                <template v-else>
+                <div class="default">
                     <el-tooltip placement="right" :content="t('view.favorite.unfavorite_tooltip')">
                         <el-button
                             v-if="shiftHeld"
@@ -61,7 +61,7 @@
                             style="margin-left: 5px"
                             @click.stop="showFavoriteDialog('friend', favorite.id)"></el-button>
                     </el-tooltip>
-                </template>
+                </div>
             </template>
             <template v-else>
                 <div class="avatar"></div>
@@ -89,8 +89,7 @@
 
     defineProps({
         favorite: { type: Object, required: true },
-        group: { type: Object, required: true },
+        group: { type: Object, required: true }
-        editFavoritesMode: Boolean
     });
 
     defineEmits(['click']);

src/views/Favorites/components/FavoritesFriendTab.vue

@@ -46,13 +46,16 @@
                             @click.stop="clearFavoriteGroup(group)"></el-button>
                     </el-tooltip>
                 </template>
-                <div v-if="group.count" class="x-friend-list" style="margin-top: 10px">
+                <div
+                    v-if="group.count"
+                    class="x-friend-list"
+                    :class="{ 'is-editing': editFavoritesMode }"
+                    style="margin-top: 10px">
                     <FavoritesFriendItem
                         v-for="favorite in groupedByGroupKeyFavoriteFriends[group.key]"
                         :key="favorite.id"
                         style="display: inline-block; width: 300px; margin-right: 15px"
                         :favorite="favorite"
-                        :edit-favorites-mode="editFavoritesMode"
                         :group="group"
                         @click="showUserDialog(favorite.id)" />
                 </div>
@@ -99,7 +102,7 @@
     const { setSortFavorites } = useAppearanceSettingsStore();
     const { showUserDialog } = useUserStore();
     const { favoriteFriendGroups, groupedByGroupKeyFavoriteFriends } = storeToRefs(useFavoriteStore());
-    const { showFriendImportDialog, saveSortFavoritesOption } = useFavoriteStore();
+    const { showFriendImportDialog } = useFavoriteStore();
     const { t } = useI18n();
 
     const friendExportDialogVisible = ref(false);
@@ -138,3 +141,15 @@
         emit('change-favorite-group-name', group);
     }
 </script>
+
+<style scoped>
+    .x-friend-list :deep(.editing) {
+        display: none;
+    }
+    .x-friend-list.is-editing :deep(.editing) {
+        display: block;
+    }
+    .x-friend-list.is-editing :deep(.default) {
+        display: none;
+    }
+</style>

src/views/Favorites/components/FavoritesWorldItem.vue

@@ -12,7 +12,7 @@
                     </span>
                     <span v-else class="extra">{{ localFavFakeRef.authorName }}</span>
                 </div>
-                <template v-if="editFavoritesMode">
+                <div class="editing">
                     <el-dropdown trigger="click" size="small" style="margin-left: 5px">
                         <div>
                             <el-tooltip
@@ -40,8 +40,8 @@
                     <el-button v-if="!isLocalFavorite" type="text" size="small" @click.stop style="margin-left: 5px">
                         <el-checkbox v-model="isSelected"></el-checkbox>
                     </el-button>
-                </template>
+                </div>
-                <template v-else>
+                <div class="default">
                     <el-tooltip
                         v-if="!isLocalFavorite && favorite.deleted"
                         placement="left"
@@ -89,7 +89,7 @@
                             type="default"
                             @click.stop="showFavoriteDialog('world', favorite.id)"></el-button>
                     </el-tooltip>
-                </template>
+                </div>
                 <el-tooltip v-if="isLocalFavorite" placement="right" :content="t('view.favorite.unfavorite_tooltip')">
                     <el-button
                         v-if="shiftHeld"
@@ -142,7 +142,6 @@
     const props = defineProps({
         group: [Object, String],
         favorite: Object,
-        editFavoritesMode: Boolean,
         isLocalFavorite: { type: Boolean, default: false }
     });
 

src/views/Favorites/components/FavoritesWorldTab.vue

@@ -108,13 +108,16 @@
                         </el-tooltip>
                     </div>
                 </template>
-                <div v-if="group.count" class="x-friend-list" style="margin-top: 10px">
+                <div
+                    v-if="group.count"
+                    class="x-friend-list"
+                    :class="{ 'is-editing': editFavoritesMode }"
+                    style="margin-top: 10px">
                     <FavoritesWorldItem
                         v-for="favorite in groupedByGroupKeyFavoriteWorlds[group.key]"
                         :key="favorite.id"
                         :group="group"
                         :favorite="favorite"
-                        :edit-favorites-mode="editFavoritesMode"
                         @click="showWorldDialog(favorite.id)"
                         @handle-select="favorite.$selected = $event" />
                 </div>
@@ -172,14 +175,17 @@
                             @click.stop="promptLocalWorldFavoriteGroupDelete(group)" />
                     </el-tooltip>
                 </template>
-                <div v-if="localWorldFavorites[group].length" class="x-friend-list" style="margin-top: 10px">
+                <div
+                    v-if="localWorldFavorites[group].length"
+                    class="x-friend-list"
+                    :class="{ 'is-editing': editFavoritesMode }"
+                    style="margin-top: 10px">
                     <FavoritesWorldItem
                         v-for="favorite in localWorldFavorites[group]"
                         :key="favorite.id"
                         is-local-favorite
                         :group="group"
                         :favorite="favorite"
-                        :edit-favorites-mode="editFavoritesMode"
                         @click="showWorldDialog(favorite.id)"
                         @remove-local-world-favorite="removeLocalWorldFavorite" />
                 </div>
@@ -440,10 +446,16 @@
     function refreshLocalWorldFavorite() {
         emit('refresh-local-world-favorite');
     }
-
-    function saveSortFavoritesOption() {
-        emit('save-sort-favorites-option');
-    }
 </script>
 
-<style scoped></style>
+<style scoped>
+    .x-friend-list :deep(.editing) {
+        display: none;
+    }
+    .x-friend-list.is-editing :deep(.editing) {
+        display: block;
+    }
+    .x-friend-list.is-editing :deep(.default) {
+        display: none;
+    }
+</style>