MrUnknownDE/VRCX
1
0
Fork 0
mirror of https://github.com/MrUnknownDE/VRCX.git synced 2026-04-28 11:13:49 +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

51
src/views/FriendsLocations/FriendsLocations.vue
View File

@@ -26,7 +26,7 @@
<div class="friend-view__settings-row">
<span class="friend-view__settings-label">Scale</span>
<div class="friend-view__scale-control">
<span class="friend-view__scale-value">{{ cardScalePercentLabel }} &nbsp;</span>
<span class="friend-view__scale-value">{{ cardScalePercentLabel }}&nbsp;</span>
<el-slider
v-model="cardScale"
class="friend-view__slider"
@@ -36,6 +36,19 @@
:show-tooltip="false" />
</div>
</div>
<div class="friend-view__settings-row">
<span class="friend-view__settings-label">Spacing</span>
<div class="friend-view__scale-control">
<span class="friend-view__scale-value">{{ cardSpacingPercentLabel }}&nbsp;</span>
<el-slider
v-model="cardSpacing"
class="friend-view__slider"
:min="0.5"
:max="1.5"
:step="0.05"
:show-tooltip="false" />
</div>
</div>
</el-popover>
</div>
</div>
@@ -66,7 +79,8 @@
v-for="friend in group.friends"
:key="friend.id ?? friend.userId ?? friend.displayName"
:friend="friend"
:card-scale="cardScale" />
:card-scale="cardScale"
:card-spacing="cardSpacing" />
</div>
</section>
</div>
@@ -96,6 +110,7 @@
:key="friend.id ?? friend.userId ?? friend.displayName"
:friend="friend"
:card-scale="cardScale"
:card-spacing="cardSpacing"
:display-instance-info="false" />
</div>
</section>
@@ -111,7 +126,8 @@
v-for="entry in mergedOnlineEntries"
:key="entry.id ?? entry.friend.id ?? entry.friend.displayName"
:friend="entry.friend"
:card-scale="cardScale" />
:card-scale="cardScale"
:card-spacing="cardSpacing" />
</div>
<div v-if="!mergedSameInstanceGroups.length && !mergedOnlineEntries.length" class="friend-view__empty">
No matching friends
@@ -123,7 +139,8 @@
v-for="entry in visibleFriends"
:key="entry.id ?? entry.friend.id ?? entry.friend.displayName"
:friend="entry.friend"
:card-scale="cardScale" />
:card-scale="cardScale"
:card-spacing="cardSpacing" />
</div>
<div v-else class="friend-view__empty">No matching friends</div>
</template>
@@ -175,6 +192,7 @@
);
const cardScaleBase = ref(1);
const cardSpacingBase = ref(1);
const cardScale = computed({
get: () => cardScaleBase.value,
@@ -184,7 +202,16 @@
}
});
const cardSpacing = computed({
get: () => cardSpacingBase.value,
set: (value) => {
cardSpacingBase.value = value;
configRepository.setString('VRCX_FriendLocationCardSpacing', value.toString());
}
});
const cardScalePercentLabel = computed(() => `${Math.round(cardScale.value * 100)}%`);
const cardSpacingPercentLabel = computed(() => `${Math.round(cardSpacing.value * 100)}%`);
const showSameInstanceBase = ref(false);
@@ -457,8 +484,9 @@
const baseWidth = 220;
const baseGap = 14;
const scale = cardScale.value;
const spacing = cardSpacing.value;
const minWidth = baseWidth * scale;
const gap = baseGap + (scale - 1) * 10;
const gap = Math.max(6, (baseGap + (scale - 1) * 10) * spacing);
return (count = 1, options = {}) => {
const containerWidth = Math.max(gridWidth.value ?? 0, 0);
@@ -493,7 +521,8 @@
'--friend-card-min-width': `${Math.round(minWidth)}px`,
'--friend-card-gap': `${Math.round(gap)}px`,
'--friend-card-target-width': `${Math.round(cardWidth)}px`,
'--friend-grid-columns': `${columns}`
'--friend-grid-columns': `${columns}`,
'--friend-card-spacing': `${spacing.toFixed(2)}`
};
};
});
@@ -577,7 +606,7 @@
}
);
watch(cardScale, () => {
watch([cardScale, cardSpacing], () => {
if (!settingsReady.value) {
return;
}
@@ -620,8 +649,9 @@
async function loadInitialSettings() {
try {
const [storedScale, storedShowSameInstance] = await Promise.all([
const [storedScale, storedSpacing, storedShowSameInstance] = await Promise.all([
configRepository.getString('VRCX_FriendLocationCardScale', '1'),
configRepository.getString('VRCX_FriendLocationCardSpacing', '1'),
configRepository.getBool('VRCX_FriendLocationShowSameInstance', null)
]);
@@ -630,6 +660,11 @@
cardScaleBase.value = parsedScale;
}
const parsedSpacing = parseFloat(storedSpacing);
if (!Number.isNaN(parsedSpacing) && parsedSpacing > 0) {
cardSpacingBase.value = parsedSpacing;
}
if (storedShowSameInstance !== null && storedShowSameInstance !== undefined) {
showSameInstanceBase.value = Boolean(storedShowSameInstance);
}

24
src/views/FriendsLocations/components/FriendsLocationsCard.vue
View File

@@ -2,7 +2,7 @@
<el-card
class="friend-card"
shadow="never"
:body-style="{ padding: `${16 * cardScale}px` }"
:body-style="{ padding: `${16 * cardScale * cardSpacing}px` }"
:style="cardStyle"
@click="showUserDialog(friend.id)">
<div class="friend-card__header">
@@ -50,6 +50,10 @@
displayInstanceInfo: {
type: Boolean,
default: true
},
cardSpacing: {
type: Number,
default: 1
}
});
@@ -57,6 +61,7 @@
const cardStyle = computed(() => ({
'--card-scale': props.cardScale,
'--card-spacing': props.cardSpacing,
cursor: 'pointer'
}));
@@ -85,9 +90,10 @@
<style scoped lang="scss">
.friend-card {
--card-scale: 1;
--card-spacing: 1;
position: relative;
display: grid;
gap: calc(14px * var(--card-scale));
gap: calc(14px * var(--card-scale) * var(--card-spacing));
border-radius: calc(8px * var(--card-scale));
background: #fff;
border: 1px solid var(--el-border-color);
@@ -95,7 +101,6 @@
transition:
box-shadow 0.2s ease,
transform 0.2s ease;
width: 100%;
max-width: var(--friend-card-target-width, 220px);
min-width: var(--friend-card-min-width, 220px);
@@ -109,7 +114,7 @@
display: grid;
grid-template-columns: auto 1fr;
align-items: flex-start;
gap: calc(12px * var(--card-scale));
gap: calc(12px * var(--card-scale) * var(--card-spacing));
}
.friend-card__avatar-wrapper {
@@ -126,8 +131,8 @@
position: absolute;
top: calc(8px * var(--card-scale));
right: calc(8px * var(--card-scale));
width: calc(8px * var(--card-scale));
height: calc(8px * var(--card-scale));
inline-size: calc(8px * var(--card-scale));
block-size: calc(8px * var(--card-scale));
border-radius: 999px;
border: calc(2px * var(--card-scale)) solid #fff;
box-shadow: 0 0 calc(4px * var(--card-scale)) rgba(15, 23, 42, 0.12);
@@ -160,7 +165,7 @@
.friend-card__body {
display: grid;
gap: calc(12px * var(--card-scale));
gap: calc(12px * var(--card-scale) * var(--card-spacing));
}
.friend-card__name {
@@ -174,7 +179,7 @@
}
.friend-card__signature {
margin-top: 6px;
margin-top: calc(6px * var(--card-spacing));
font-size: calc(13px * var(--card-scale));
color: rgba(31, 41, 55, 0.7);
line-height: 1.4;
@@ -187,7 +192,7 @@
display: flex;
align-items: center;
justify-content: center;
height: calc(40px * var(--card-scale));
min-height: calc(40px * var(--card-scale));
padding: calc(6px * var(--card-scale)) calc(10px * var(--card-scale));
border-radius: calc(12px * var(--card-scale));
background: rgba(148, 163, 184, 0.18);
@@ -213,6 +218,7 @@
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
text-overflow: ellipsis;
}