move editFavoritesMode to store

This commit is contained in:
pa
2025-10-28 23:04:05 +09:00
committed by Natsumi
parent a3f5f938b2
commit 69cb2c8259
9 changed files with 115 additions and 202 deletions

View File

@@ -122,6 +122,8 @@ export const useFavoriteStore = defineStore('Favorite', () => {
const localAvatarFavorites = ref({});
const editFavoritesMode = ref(false);
const favoriteDialog = ref({
visible: false,
loading: false,
@@ -1583,6 +1585,7 @@ export const useFavoriteStore = defineStore('Favorite', () => {
currentFavoriteTab,
localWorldFavGroupLength,
localAvatarFavGroupLength,
editFavoritesMode,
initFavorites,
applyFavorite,

View File

@@ -29,19 +29,13 @@
</div>
<el-tabs v-model="currentFavoriteTab" v-loading="isFavoriteLoading" type="card" style="height: 100%">
<el-tab-pane name="friend" :label="t('view.favorite.friends.header')">
<FavoritesFriendTab
:edit-favorites-mode="editFavoritesMode"
@change-favorite-group-name="changeFavoriteGroupName" />
<FavoritesFriendTab @change-favorite-group-name="changeFavoriteGroupName" />
</el-tab-pane>
<el-tab-pane name="world" :label="t('view.favorite.worlds.header')" lazy>
<FavoritesWorldTab
:edit-favorites-mode="editFavoritesMode"
@change-favorite-group-name="changeFavoriteGroupName" />
<FavoritesWorldTab @change-favorite-group-name="changeFavoriteGroupName" />
</el-tab-pane>
<el-tab-pane name="avatar" :label="t('view.favorite.avatars.header')" lazy>
<FavoritesAvatarTab
:edit-favorites-mode="editFavoritesMode"
@change-favorite-group-name="changeFavoriteGroupName" />
<FavoritesAvatarTab @change-favorite-group-name="changeFavoriteGroupName" />
</el-tab-pane>
</el-tabs>
</div>
@@ -50,7 +44,6 @@
<script setup>
import { ElMessage, ElMessageBox } from 'element-plus';
import { Refresh } from '@element-plus/icons-vue';
import { ref } from 'vue';
import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n';
@@ -70,7 +63,8 @@
avatarImportDialogInput,
worldImportDialogInput,
friendImportDialogInput,
currentFavoriteTab
currentFavoriteTab,
editFavoritesMode
} = storeToRefs(useFavoriteStore());
const {
refreshFavorites,
@@ -83,8 +77,6 @@
showAvatarImportDialog
} = useFavoriteStore();
const editFavoritesMode = ref(false);
function showBulkUnfavoriteSelectionConfirm() {
const elementsTicked = [];
// check favorites type

View File

@@ -9,7 +9,7 @@
<span class="name" v-text="localFavFakeRef.name"></span>
<span class="extra" v-text="localFavFakeRef.authorName"></span>
</div>
<div class="editing">
<div v-if="editFavoritesMode">
<FavoritesMoveDropdown
:favoriteGroup="favoriteAvatarGroups"
:currentFavorite="props.favorite"
@@ -19,82 +19,42 @@
<el-checkbox v-model="isSelected"></el-checkbox>
</el-button>
</div>
<div class="default">
<template v-if="!isLocalFavorite">
<el-tooltip
v-if="favorite.deleted"
placement="left"
:content="t('view.favorite.unavailable_tooltip')"
:teleported="false">
<el-icon><Warning /></el-icon>
</el-tooltip>
<el-tooltip
v-if="favorite.ref.releaseStatus === 'private'"
placement="left"
:content="t('view.favorite.private')"
:teleported="false">
<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')"
:teleported="false">
<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')"
:teleported="false">
<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')"
:teleported="false">
<el-button
:disabled="currentUser.currentAvatar === favorite.id"
size="small"
circle
style="margin-left: 5px"
:icon="Check"
@click.stop="selectAvatarWithConfirmation(favorite.id)" />
</el-tooltip>
</template>
<template v-else-if="!isLocalFavorite">
<el-tooltip
v-if="isLocalFavorite"
placement="right"
:content="t('view.favorite.unfavorite_tooltip')"
v-if="favorite.deleted"
placement="left"
:content="t('view.favorite.unavailable_tooltip')"
:teleported="false">
<el-icon><Warning /></el-icon>
</el-tooltip>
<el-tooltip
v-if="favorite.ref.releaseStatus === 'private'"
placement="left"
:content="t('view.favorite.private')"
:teleported="false">
<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')"
:teleported="false">
<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')" :teleported="false">
<el-button
v-if="shiftHeld"
size="small"
:icon="Close"
circle
style="color: #f56c6c; margin-left: 5px"
@click.stop="removeLocalAvatarFavorite(favorite.id, favoriteGroupName)" />
@click.stop="deleteFavorite(favorite.id)"></el-button>
<el-button
v-else
type="default"
@@ -102,9 +62,44 @@
size="small"
circle
style="margin-left: 5px"
@click.stop="showFavoriteDialog('avatar', favorite.id)" />
@click.stop="showFavoriteDialog('avatar', favorite.id)"></el-button>
</el-tooltip>
</div>
</template>
<template v-else>
<el-tooltip
placement="left"
:content="t('view.favorite.select_avatar_tooltip')"
:teleported="false">
<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')"
:teleported="false">
<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>
@@ -150,7 +145,7 @@
const { t } = useI18n();
const { favoriteAvatarGroups } = storeToRefs(useFavoriteStore());
const { favoriteAvatarGroups, editFavoritesMode } = storeToRefs(useFavoriteStore());
const { removeLocalAvatarFavorite, showFavoriteDialog } = useFavoriteStore();
const { selectAvatarWithConfirmation } = useAvatarStore();
const { shiftHeld } = storeToRefs(useUiStore());

View File

@@ -82,11 +82,7 @@
@click.stop="clearFavoriteGroup(group)" />
</el-tooltip>
</template>
<div
v-if="group.count"
class="x-friend-list"
:class="{ 'is-editing': editFavoritesMode }"
style="margin-top: 10px">
<div v-if="group.count" class="x-friend-list" style="margin-top: 10px">
<FavoritesAvatarItem
v-for="favorite in groupedByGroupKeyFavoriteAvatars[group.key]"
:key="favorite.id"
@@ -184,11 +180,7 @@
@click.stop="promptLocalAvatarFavoriteGroupDelete(group)"></el-button>
</el-tooltip>
</template>
<div
v-if="localAvatarFavorites[group].length"
class="x-friend-list"
:class="{ 'is-editing': editFavoritesMode }"
:style="{ marginTop: '10px' }">
<div v-if="localAvatarFavorites[group].length" class="x-friend-list" :style="{ marginTop: '10px' }">
<FavoritesAvatarItem
v-for="favorite in localAvatarFavorites[group]"
:key="favorite.id"
@@ -233,13 +225,6 @@
import * as workerTimers from 'worker-timers';
defineProps({
editFavoritesMode: {
type: Boolean,
default: false
}
});
const emit = defineEmits(['change-favorite-group-name', 'refresh-local-avatar-favorites']);
const { sortFavorites } = storeToRefs(useAppearanceSettingsStore());
@@ -488,15 +473,3 @@
cancelLocalAvatarRefresh();
});
</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>

View File

@@ -18,7 +18,7 @@
:link="false" />
<span v-else v-text="favorite.ref.statusDescription"></span>
</div>
<div class="editing">
<div v-if="editFavoritesMode">
<FavoritesMoveDropdown
:favoriteGroup="favoriteFriendGroups"
:currentGroup="group"
@@ -28,7 +28,8 @@
<el-checkbox v-model="favorite.$selected"></el-checkbox>
</el-button>
</div>
<div class="default">
<template v-else>
<el-tooltip placement="right" :content="t('view.favorite.unfavorite_tooltip')" :teleported="false">
<el-button
v-if="shiftHeld"
@@ -46,7 +47,7 @@
style="margin-left: 5px"
@click.stop="showFavoriteDialog('friend', favorite.id)"></el-button>
</el-tooltip>
</div>
</template>
</template>
<template v-else>
<div class="avatar"></div>
@@ -82,7 +83,7 @@
defineEmits(['click']);
const { favoriteFriendGroups } = storeToRefs(useFavoriteStore());
const { favoriteFriendGroups, editFavoritesMode } = storeToRefs(useFavoriteStore());
const { showFavoriteDialog } = useFavoriteStore();
const { shiftHeld } = storeToRefs(useUiStore());
const { t } = useI18n();

View File

@@ -46,11 +46,7 @@
@click.stop="clearFavoriteGroup(group)"></el-button>
</el-tooltip>
</template>
<div
v-if="group.count"
class="x-friend-list"
:class="{ 'is-editing': editFavoritesMode }"
style="margin-top: 10px">
<div v-if="group.count" class="x-friend-list" style="margin-top: 10px">
<FavoritesFriendItem
v-for="favorite in groupedByGroupKeyFavoriteFriends[group.key]"
:key="favorite.id"
@@ -90,13 +86,6 @@
import FavoritesFriendItem from './FavoritesFriendItem.vue';
import FriendExportDialog from '../dialogs/FriendExportDialog.vue';
defineProps({
editFavoritesMode: {
type: Boolean,
default: false
}
});
const emit = defineEmits(['change-favorite-group-name']);
const { sortFavorites } = storeToRefs(useAppearanceSettingsStore());
@@ -142,15 +131,3 @@
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>

View File

@@ -12,7 +12,7 @@
</span>
<span v-else class="extra">{{ props.favorite.ref.authorName }}</span>
</div>
<div class="editing">
<div v-if="editFavoritesMode">
<FavoritesMoveDropdown
:favoriteGroup="favoriteWorldGroups"
:currentFavorite="props.favorite"
@@ -22,7 +22,7 @@
<el-checkbox v-model="isSelected"></el-checkbox>
</el-button>
</div>
<div class="default">
<template v-else>
<el-tooltip
v-if="favorite.deleted"
placement="left"
@@ -69,7 +69,7 @@
type="default"
@click.stop="showFavoriteDialog('world', favorite.id)"></el-button>
</el-tooltip>
</div>
</template>
</template>
<template v-else>
<div class="avatar"></div>
@@ -112,7 +112,7 @@
});
const emit = defineEmits(['handle-select', 'remove-local-world-favorite', 'click']);
const { favoriteWorldGroups } = storeToRefs(useFavoriteStore());
const { favoriteWorldGroups, editFavoritesMode } = storeToRefs(useFavoriteStore());
const { showFavoriteDialog } = useFavoriteStore();
const { newInstanceSelfInvite } = useInviteStore();
const { shiftHeld } = storeToRefs(useUiStore());

View File

@@ -12,14 +12,13 @@
</span>
<span v-else class="extra">{{ props.favorite.authorName }}</span>
</div>
<div class="editing">
<FavoritesMoveDropdown
:favoriteGroup="favoriteWorldGroups"
:currentFavorite="props.favorite"
isLocalFavorite
type="world" />
</div>
<div class="default">
<FavoritesMoveDropdown
v-if="editFavoritesMode"
:favoriteGroup="favoriteWorldGroups"
:currentFavorite="props.favorite"
isLocalFavorite
type="world" />
<template v-else>
<el-tooltip placement="left">
<template #content>
{{
@@ -35,24 +34,24 @@
@click.stop="newInstanceSelfInvite(favorite.id)"
circle></el-button>
</el-tooltip>
</div>
<el-tooltip placement="right" :content="t('view.favorite.unfavorite_tooltip')" :teleported="false">
<el-button
v-if="shiftHeld"
size="small"
:icon="Close"
circle
style="color: #f56c6c; margin-left: 5px"
@click.stop="$emit('remove-local-world-favorite', favorite.id, group)"></el-button>
<el-button
v-else
:icon="Star"
size="small"
circle
style="margin-left: 5px"
type="default"
@click.stop="showFavoriteDialog('world', favorite.id)"></el-button>
</el-tooltip>
<el-tooltip placement="right" :content="t('view.favorite.unfavorite_tooltip')" :teleported="false">
<el-button
v-if="shiftHeld"
size="small"
:icon="Close"
circle
style="color: #f56c6c; margin-left: 5px"
@click.stop="$emit('remove-local-world-favorite', favorite.id, group)"></el-button>
<el-button
v-else
:icon="Star"
size="small"
circle
style="margin-left: 5px"
type="default"
@click.stop="showFavoriteDialog('world', favorite.id)"></el-button>
</el-tooltip>
</template>
</template>
<template v-else>
<div class="avatar"></div>
@@ -86,7 +85,7 @@
});
const emit = defineEmits(['handle-select', 'remove-local-world-favorite', 'click']);
const { favoriteWorldGroups } = storeToRefs(useFavoriteStore());
const { favoriteWorldGroups, editFavoritesMode } = storeToRefs(useFavoriteStore());
const { showFavoriteDialog } = useFavoriteStore();
const { newInstanceSelfInvite } = useInviteStore();
const { shiftHeld } = storeToRefs(useUiStore());

View File

@@ -111,11 +111,7 @@
</el-tooltip>
</div>
</template>
<div
v-if="group.count"
class="x-friend-list"
:class="{ 'is-editing': editFavoritesMode }"
style="margin-top: 10px">
<div v-if="group.count" class="x-friend-list" style="margin-top: 10px">
<el-scrollbar height="700px" @end-reached="worldFavoritesLoadMore">
<FavoritesWorldItem
v-for="favorite in sliceWorldFavorites(group.key)"
@@ -180,11 +176,7 @@
@click.stop="promptLocalWorldFavoriteGroupDelete(group)" />
</el-tooltip>
</template>
<div
v-if="localWorldFavorites[group].length"
class="x-friend-list"
:class="{ 'is-editing': editFavoritesMode }"
style="margin-top: 10px">
<div v-if="localWorldFavorites[group].length" class="x-friend-list" style="margin-top: 10px">
<el-scrollbar height="700px" @end-reached="localWorldFavoritesLoadMore">
<FavoritesWorldLocalItem
v-for="favorite in sliceLocalWorldFavorites(group)"
@@ -229,13 +221,6 @@
import * as workerTimers from 'worker-timers';
defineProps({
editFavoritesMode: {
type: Boolean,
default: false
}
});
const emit = defineEmits([
'change-favorite-group-name',
'save-sort-favorites-option',
@@ -549,15 +534,3 @@
cancelLocalWorldRefresh();
});
</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>