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

feat: add spacing option to friends locations card and favtories cards (#1477)

Browse Source
This commit is contained in:
pa
2025-11-12 16:12:45 +09:00
committed by Natsumi
parent dcd06ff6dd
commit a2f76d1a3e
6 changed files with 320 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/Favorites/FavoritesWorld.vue
+52 -18
View File
@@ -21,10 +21,12 @@
<el-button :icon="MoreFilled" size="small" circle />
<template #dropdown>
<el-dropdown-menu class="favorites-dropdown">
<li class="favorites-dropdown__scale" @click.stop>
<div class="favorites-dropdown__scale-header">
<li class="favorites-dropdown__control" @click.stop>
<div class="favorites-dropdown__control-header">
<span>Scale</span>
<span class="favorites-dropdown__scale-value">{{ worldCardScalePercent }}%</span>
<span class="favorites-dropdown__control-value">
{{ worldCardScalePercent }}%
</span>
</div>
<el-slider
v-model="worldCardScale"
@@ -34,6 +36,21 @@
:step="worldCardScaleSlider.step"
:show-tooltip="false" />
</li>
<li class="favorites-dropdown__control" @click.stop>
<div class="favorites-dropdown__control-header">
<span>Spacing</span>
<span class="favorites-dropdown__control-value">
{{ worldCardSpacingPercent }}%
</span>
</div>
<el-slider
v-model="worldCardSpacing"
class="favorites-dropdown__slider"
:min="worldCardSpacingSlider.min"
:max="worldCardSpacingSlider.max"
:step="worldCardSpacingSlider.step"
:show-tooltip="false" />
</li>
<el-dropdown-item @click="handleWorldImportClick">
{{ t('view.favorite.import') }}
</el-dropdown-item>
@@ -439,17 +456,31 @@
const {
cardScale: worldCardScale,
cardSpacing: worldCardSpacing,
slider: worldCardScaleSlider,
spacingSlider: worldCardSpacingSlider,
containerRef: worldFavoritesContainerRef,
gridStyle: worldFavoritesGridStyle
} = useFavoritesCardScaling({
configKey: 'VRCX_FavoritesWorldCardScale',
spacingConfigKey: 'VRCX_FavoritesWorldCardSpacing',
min: 0.6,
max: 1,
step: 0.01
step: 0.01,
spacingMin: 0.5,
spacingMax: 1.5,
spacingStep: 0.05,
basePaddingY: 8,
basePaddingX: 10,
baseContentGap: 10,
baseActionGap: 8,
baseActionGroupGap: 6,
baseActionMargin: 8,
baseCheckboxMargin: 10
});
const worldCardScalePercent = computed(() => Math.round(worldCardScale.value * 100));
const worldCardSpacingPercent = computed(() => Math.round(worldCardSpacing.value * 100));
const worldGroupVisibilityOptions = ref(['public', 'friends', 'private']);
const worldSplitterSize = ref(260);
@@ -1324,7 +1355,6 @@
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
border: none;
background: transparent;
border-radius: 8px;
@@ -1333,7 +1363,8 @@
cursor: pointer;
color: inherit;
transition: background-color 0.15s ease;
height: 32px;
min-height: 32px;
align-self: stretch;
}
.favorites-group-menu__item:hover {
background-color: var(--el-menu-hover-bg-color);
@@ -1363,7 +1394,6 @@
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
border: none;
background: transparent;
padding: 6px 10px;
@@ -1372,7 +1402,8 @@
color: inherit;
font-size: 13px;
transition: background-color 0.15s ease;
height: 32px;
min-height: 32px;
align-self: stretch;
}
.group-visibility-menu__item:hover,
@@ -1488,7 +1519,7 @@
box-sizing: border-box;
border: 1px solid var(--el-border-color);
border-radius: calc(8px * var(--favorites-card-scale, 1));
padding: calc(8px * var(--favorites-card-scale, 1)) calc(10px * var(--favorites-card-scale, 1));
padding: var(--favorites-card-padding-y, 8px) var(--favorites-card-padding-x, 10px);
cursor: pointer;
background: var(--el-bg-color);
transition:
@@ -1513,7 +1544,7 @@
:deep(.favorites-search-card__content) {
display: flex;
align-items: center;
gap: calc(10px * var(--favorites-card-scale, 1));
gap: var(--favorites-card-content-gap, 10px);
flex: 1;
min-width: 0;
}
@@ -1583,8 +1614,8 @@
:deep(.favorites-search-card__actions) {
display: flex;
flex-direction: column;
gap: 8px;
margin-left: 8px;
gap: var(--favorites-card-action-gap, 8px);
margin-left: var(--favorites-card-action-margin, 8px);
align-items: center;
justify-content: center;
flex: 0 0 auto;
@@ -1603,7 +1634,7 @@
:deep(.favorites-search-card__action-group) {
display: flex;
gap: 6px;
gap: var(--favorites-card-action-group-gap, 6px);
width: 100%;
}
@@ -1614,7 +1645,7 @@
:deep(.favorites-search-card__action--checkbox) {
align-items: center;
justify-content: flex-end;
margin-right: 10px;
margin-right: var(--favorites-card-checkbox-margin, 10px);
}
:deep(.favorites-search-card__action--checkbox .el-checkbox) {
@@ -1634,15 +1665,18 @@
height: 100%;
}
.favorites-dropdown__scale {
.favorites-dropdown__control {
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 {
.favorites-dropdown__control:not(:last-child) {
border-bottom: 1px solid var(--el-border-color-lighter);
}
.favorites-dropdown__control-header {
display: flex;
align-items: center;
justify-content: space-between;
@@ -1652,7 +1686,7 @@
margin-bottom: 6px;
}
.favorites-dropdown__scale-value {
.favorites-dropdown__control-value {
font-size: 12px;
color: var(--el-text-color-secondary);
}