MrUnknownDE/VRCX
1
0
Fork 0
mirror of https://github.com/MrUnknownDE/VRCX.git synced 2026-05-06 22:46:06 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: add scaling options to favorites grid (#1477)

Browse Source
This commit is contained in:
pa
2025-11-10 11:43:19 +09:00
committed by Natsumi
parent 56b13ae4cb
commit 16cd28ebe4
4 changed files with 664 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/Favorites/FavoritesFriend.vue
+146 -26
View File
@@ -17,14 +17,27 @@
class="favorites-toolbar__search"
:placeholder="t('view.favorite.worlds.search')"
@input="searchFriendFavorites" />
<el-dropdown trigger="click" :hide-on-click="true">
<el-button :icon="MoreFilled" size="small" circle />
<el-dropdown ref="friendToolbarMenuRef" trigger="click" :hide-on-click="false">
<el-button :icon="MoreFilled" size="small" circle @click.stop />
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item @click="showFriendImportDialog">
<el-dropdown-menu class="favorites-dropdown">
<li class="favorites-dropdown__scale" @click.stop>
<div class="favorites-dropdown__scale-header">
<span>Scale</span>
<span class="favorites-dropdown__scale-value">{{ friendCardScalePercent }}%</span>
</div>
<el-slider
v-model="friendCardScale"
class="favorites-dropdown__slider"
:min="friendCardScaleSlider.min"
:max="friendCardScaleSlider.max"
:step="friendCardScaleSlider.step"
:show-tooltip="false" />
</li>
<el-dropdown-item @click="handleFriendImportClick">
{{ t('view.favorite.import') }}
</el-dropdown-item>
<el-dropdown-item divided @click="showFriendExportDialog">
<el-dropdown-item divided @click="handleFriendExportClick">
{{ t('view.favorite.export') }}
</el-dropdown-item>
</el-dropdown-menu>
@@ -32,8 +45,8 @@
</el-dropdown>
</div>
</div>
<el-splitter class="favorites-splitter">
<el-splitter-panel :size="260" :min="0" :max="360" collapsible>
<el-splitter class="favorites-splitter" @resize-end="handleFriendSplitterResize">
<el-splitter-panel :size="friendSplitterSize" :min="0" :max="360" collapsible>
<div class="favorites-groups-panel">
<div class="group-section">
<div class="group-section__header">
@@ -94,7 +107,6 @@
<span>{{ t('view.favorite.rename_tooltip') }}</span>
</button>
<el-popover
popper-class="favorites-group-menu__popover"
placement="right"
trigger="hover"
:width="180"
@@ -179,11 +191,13 @@
</el-button>
</div>
</div>
<div class="favorites-content__list">
<div ref="friendFavoritesContainerRef" class="favorites-content__list">
<template v-if="activeRemoteGroup && !isSearchActive">
<div class="favorites-content__scroll favorites-content__scroll--native">
<template v-if="currentFriendFavorites.length">
<div class="favorites-card-list">
<div
class="favorites-card-list"
:style="friendFavoritesGridStyle(currentFriendFavorites.length)">
<FavoritesFriendItem
v-for="favorite in currentFriendFavorites"
:key="favorite.id"
@@ -203,7 +217,10 @@
</template>
<template v-else>
<div class="favorites-content__scroll favorites-content__scroll--native">
<div v-if="friendFavoriteSearchResults.length" class="favorites-search-grid">
<div
v-if="friendFavoriteSearchResults.length"
class="favorites-search-grid"
:style="friendFavoritesGridStyle(friendFavoriteSearchResults.length)">
<div
v-for="favorite in friendFavoriteSearchResults"
:key="favorite.id"
@@ -242,7 +259,7 @@
</template>
<script setup>
import { computed, ref, watch } from 'vue';
import { computed, onBeforeMount, ref, watch } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { MoreFilled, Refresh } from '@element-plus/icons-vue';
import { storeToRefs } from 'pinia';
@@ -250,13 +267,17 @@
import { useAppearanceSettingsStore, useFavoriteStore, useUserStore } from '../../stores';
import { favoriteRequest } from '../../api';
import { useFavoritesCardScaling } from './composables/useFavoritesCardScaling.js';
import { userImage } from '../../shared/utils';
import FavoritesFriendItem from './components/FavoritesFriendItem.vue';
import FriendExportDialog from './dialogs/FriendExportDialog.vue';
import configRepository from '../../service/config.js';
const friendGroupVisibilityOptions = ref(['public', 'friends', 'private']);
const friendSplitterSize = ref(260);
const { sortFavorites } = storeToRefs(useAppearanceSettingsStore());
const { setSortFavorites } = useAppearanceSettingsStore();
const favoriteStore = useFavoriteStore();
@@ -272,12 +293,27 @@
const { showUserDialog } = useUserStore();
const { t } = useI18n();
const {
cardScale: friendCardScale,
slider: friendCardScaleSlider,
containerRef: friendFavoritesContainerRef,
gridStyle: friendFavoritesGridStyle
} = useFavoritesCardScaling({
configKey: 'VRCX_FavoritesFriendCardScale',
min: 0.6,
max: 1,
step: 0.01
});
const friendCardScalePercent = computed(() => Math.round(friendCardScale.value * 100));
const friendExportDialogVisible = ref(false);
const friendFavoriteSearch = ref('');
const friendFavoriteSearchResults = ref([]);
const friendEditMode = ref(false);
const selectedGroup = ref(null);
const activeGroupMenu = ref(null);
const friendToolbarMenuRef = ref();
const sortFav = computed({
get() {
@@ -293,6 +329,43 @@
const isSearchActive = computed(() => friendFavoriteSearch.value.trim().length >= 3);
const isRemoteGroupSelected = computed(() => selectedGroup.value?.type === 'remote');
const closeFriendToolbarMenu = () => {
friendToolbarMenuRef.value?.handleClose?.();
};
function handleFriendImportClick() {
closeFriendToolbarMenu();
showFriendImportDialog();
}
function handleFriendExportClick() {
closeFriendToolbarMenu();
showFriendExportDialog();
}
onBeforeMount(() => {
loadFriendSplitterPreferences();
});
async function loadFriendSplitterPreferences() {
const storedSize = await configRepository.getString('VRCX_FavoritesFriendSplitter', '260');
if (typeof storedSize === 'string' && !Number.isNaN(Number(storedSize)) && Number(storedSize) > 0) {
friendSplitterSize.value = Number(storedSize);
}
}
function handleFriendSplitterResize(panelIndex, sizes) {
if (!Array.isArray(sizes) || !sizes.length) {
return;
}
const nextSize = sizes[0];
if (nextSize <= 0) {
return;
}
friendSplitterSize.value = nextSize;
configRepository.setString('VRCX_FavoritesFriendSplitter', nextSize.toString());
}
const remoteGroupMenuKey = (key) => `remote:${key}`;
const searchableFriendEntries = computed(() => {
@@ -649,6 +722,10 @@
gap: 12px;
}
.favorites-dropdown {
padding: 10px;
}
.group-section {
display: flex;
flex-direction: column;
@@ -861,15 +938,23 @@
.favorites-search-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 12px;
grid-template-columns: repeat(
var(--favorites-grid-columns, 1),
minmax(var(--favorites-card-min-width, 240px), var(--favorites-card-target-width, 1fr))
);
gap: var(--favorites-card-gap, 12px);
justify-content: start;
padding-bottom: 12px;
}
.favorites-card-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 12px;
grid-template-columns: repeat(
var(--favorites-grid-columns, 1),
minmax(var(--favorites-card-min-width, 260px), var(--favorites-card-target-width, 1fr))
);
gap: var(--favorites-card-gap, 12px);
justify-content: start;
padding: 4px 2px 12px 2px;
}
@@ -878,22 +963,26 @@
}
:deep(.favorites-search-card--friend) {
flex: 0 1 280px;
min-width: 240px;
min-width: var(--favorites-card-min-width, 240px);
max-width: var(--favorites-card-target-width, 320px);
}
:deep(.favorites-search-card) {
display: flex;
align-items: center;
box-sizing: border-box;
border: 1px solid var(--el-border-color);
border-radius: 8px;
padding: 8px 10px;
border-radius: calc(8px * var(--favorites-card-scale, 1));
padding: calc(8px * var(--favorites-card-scale, 1)) calc(10px * var(--favorites-card-scale, 1));
cursor: pointer;
background: var(--el-bg-color);
transition:
border-color 0.2s ease,
box-shadow 0.2s ease;
box-shadow: 0 0 6px rgba(15, 23, 42, 0.04);
width: 100%;
min-width: var(--favorites-card-min-width, 240px);
max-width: var(--favorites-card-target-width, 320px);
}
:deep(.favorites-search-card:hover) {
@@ -909,15 +998,15 @@
:deep(.favorites-search-card__content) {
display: flex;
align-items: center;
gap: 10px;
gap: calc(10px * var(--favorites-card-scale, 1));
flex: 1;
min-width: 0;
}
:deep(.favorites-search-card__avatar) {
width: 48px;
height: 48px;
border-radius: 6px;
width: calc(48px * var(--favorites-card-scale, 1));
height: calc(48px * var(--favorites-card-scale, 1));
border-radius: calc(6px * var(--favorites-card-scale, 1));
overflow: hidden;
background: var(--el-fill-color-lighter);
flex-shrink: 0;
@@ -943,7 +1032,7 @@
display: flex;
flex-direction: column;
gap: 4px;
font-size: 13px;
font-size: calc(13px * var(--favorites-card-scale, 1));
min-width: 0;
}
@@ -955,7 +1044,7 @@
}
:deep(.favorites-search-card__detail .extra) {
font-size: 12px;
font-size: calc(12px * var(--favorites-card-scale, 1));
color: var(--el-text-color-secondary);
overflow: hidden;
text-overflow: ellipsis;
@@ -1037,4 +1126,35 @@
font-size: 13px;
height: 100%;
}
.favorites-dropdown__scale {
list-style: none;
padding: 12px 16px 8px;
border-bottom: 1px solid var(--el-border-color-lighter);
min-width: 220px;
cursor: default;
}
.favorites-dropdown__scale-header {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 13px;
font-weight: 600;
color: var(--el-text-color-primary);
margin-bottom: 6px;
}
.favorites-dropdown__scale-value {
font-size: 12px;
color: var(--el-text-color-secondary);
}
.favorites-dropdown__slider {
padding: 0 4px 4px;
}
.favorites-dropdown__slider :deep(.el-slider__runway) {
margin: 0;
}
</style>