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

improve card ui

Browse Source
This commit is contained in:
pa
2026-03-08 01:02:41 +09:00
parent 6efa86f5a1
commit 4596ac4737
7 changed files with 329 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

167
src/views/Favorites/FavoritesAvatar.vue
View File

@@ -684,6 +684,10 @@
const hasUserSelectedAvatarGroup = ref(false);
const remoteAvatarGroupsResolved = ref(false);
/**
*
* @param value
*/
function handleSortFavoritesChange(value) {
const next = Boolean(value);
if (next !== sortFavorites.value) {
@@ -706,11 +710,17 @@
avatarToolbarMenuOpen.value = false;
};
/**
*
*/
function handleAvatarImportClick() {
closeAvatarToolbarMenu();
showAvatarImportDialog();
}
/**
*
*/
function handleAvatarExportClick() {
closeAvatarToolbarMenu();
showAvatarExportDialog();
@@ -720,6 +730,9 @@
loadAvatarSplitterPreferences();
});
/**
*
*/
async function loadAvatarSplitterPreferences() {
const storedSize = await configRepository.getString('VRCX_FavoritesAvatarSplitter', '260');
const parsedSize = Number(storedSize);
@@ -921,6 +934,11 @@
}
);
/**
*
* @param key
* @param visible
*/
function handleGroupMenuVisible(key, visible) {
if (visible) {
activeGroupMenu.value = key;
@@ -931,6 +949,9 @@
}
}
/**
*
*/
function ensureSelectedGroup() {
if (selectedGroup.value && isGroupAvailable(selectedGroup.value)) {
return;
@@ -938,6 +959,9 @@
selectDefaultGroup();
}
/**
*
*/
function selectDefaultGroup() {
if (!hasUserSelectedAvatarGroup.value) {
const remote =
@@ -967,6 +991,10 @@
clearSelectedAvatars();
}
/**
*
* @param group
*/
function isGroupAvailable(group) {
if (!group) {
return false;
@@ -986,6 +1014,12 @@
return false;
}
/**
*
* @param type
* @param key
* @param options
*/
function selectGroup(type, key, options = {}) {
if (selectedGroup.value?.type === type && selectedGroup.value?.key === key) {
return;
@@ -997,14 +1031,27 @@
clearSelectedAvatars();
}
/**
*
*/
function clearSelectedAvatars() {
selectedFavoriteAvatars.value = [];
}
/**
*
* @param type
* @param key
*/
function isGroupActive(type, key) {
return selectedGroup.value?.type === type && selectedGroup.value?.key === key;
}
/**
*
* @param type
* @param key
*/
function handleGroupClick(type, key) {
if (hasSearchInput.value) {
avatarFavoriteSearch.value = '';
@@ -1013,6 +1060,9 @@
selectGroup(type, key, { userInitiated: true });
}
/**
*
*/
function startLocalGroupCreation() {
if (!isLocalUserVrcPlusSupporter.value || isCreatingLocalGroup.value) {
return;
@@ -1024,11 +1074,17 @@
});
}
/**
*
*/
function cancelLocalGroupCreation() {
isCreatingLocalGroup.value = false;
newLocalGroupName.value = '';
}
/**
*
*/
function handleLocalGroupCreationConfirm() {
const name = newLocalGroupName.value.trim();
if (!name) {
@@ -1044,6 +1100,11 @@
});
}
/**
*
* @param id
* @param value
*/
function toggleAvatarSelection(id, value) {
if (value) {
if (!selectedFavoriteAvatars.value.includes(id)) {
@@ -1054,40 +1115,71 @@
}
}
/**
*
*/
function showAvatarExportDialog() {
avatarExportDialogVisible.value = true;
}
/**
*
*/
function handleRefreshFavorites() {
refreshFavorites();
getLocalAvatarFavorites();
}
/**
*
* @param group
* @param visibility
*/
function handleVisibilitySelection(group, visibility) {
const menuKey = remoteGroupMenuKey(group.key);
changeAvatarGroupVisibility(group.name, visibility, menuKey);
}
/**
*
* @param group
*/
function handleRemoteRename(group) {
handleGroupMenuVisible(remoteGroupMenuKey(group.key), false);
changeFavoriteGroupName(group);
}
/**
*
* @param group
*/
function handleRemoteClear(group) {
handleGroupMenuVisible(remoteGroupMenuKey(group.key), false);
clearFavoriteGroup(group);
}
/**
*
* @param groupName
*/
function handleLocalRename(groupName) {
handleGroupMenuVisible(localGroupMenuKey(groupName), false);
promptLocalAvatarFavoriteGroupRename(groupName);
}
/**
*
* @param groupName
*/
function handleLocalDelete(groupName) {
handleGroupMenuVisible(localGroupMenuKey(groupName), false);
promptLocalAvatarFavoriteGroupDelete(groupName);
}
/**
*
* @param groupName
*/
async function handleCheckInvalidAvatars(groupName) {
handleGroupMenuVisible(localGroupMenuKey(groupName), false);
@@ -1178,11 +1270,18 @@
}
}
/**
*
*/
function handleHistoryClear() {
handleGroupMenuVisible(historyGroupMenuKey, false);
promptClearAvatarHistory();
}
/**
*
* @param group
*/
function changeFavoriteGroupName(group) {
const currentName = group.displayName || group.name;
modalStore
@@ -1221,6 +1320,12 @@
.catch(() => {});
}
/**
*
* @param name
* @param visibility
* @param menuKey
*/
function changeAvatarGroupVisibility(name, visibility, menuKey = null) {
const params = {
type: 'avatar',
@@ -1243,6 +1348,10 @@
});
}
/**
*
* @param ctx
*/
function clearFavoriteGroup(ctx) {
modalStore
.confirm({
@@ -1260,6 +1369,10 @@
.catch(() => {});
}
/**
*
* @param group
*/
function promptLocalAvatarFavoriteGroupRename(group) {
modalStore
.prompt({
@@ -1285,6 +1398,10 @@
.catch(() => {});
}
/**
*
* @param group
*/
function promptLocalAvatarFavoriteGroupDelete(group) {
modalStore
.confirm({
@@ -1299,6 +1416,10 @@
.catch(() => {});
}
/**
*
* @param value
*/
function doSearchAvatarFavorites(value) {
if (typeof value === 'string') {
avatarFavoriteSearch.value = value;
@@ -1353,6 +1474,9 @@
}
const searchAvatarFavorites = debounce(doSearchAvatarFavorites, 200);
/**
*
*/
async function refreshLocalAvatarFavorites() {
if (refreshingLocalFavorites.value) {
return;
@@ -1399,6 +1523,9 @@
}
}
/**
*
*/
function cancelLocalAvatarRefresh() {
if (!refreshingLocalFavorites.value) {
return;
@@ -1416,6 +1543,9 @@
refreshingLocalFavorites.value = false;
}
/**
*
*/
function toggleSelectAllAvatars() {
if (!activeRemoteGroup.value) {
return;
@@ -1427,6 +1557,9 @@
}
}
/**
*
*/
function copySelectedAvatars() {
if (!selectedFavoriteAvatars.value.length) {
return;
@@ -1436,6 +1569,9 @@
showAvatarImportDialog();
}
/**
*
*/
function showAvatarBulkUnfavoriteSelectionConfirm() {
if (!selectedFavoriteAvatars.value.length) {
return;
@@ -1455,6 +1591,10 @@
.catch(() => {});
}
/**
*
* @param ids
*/
function bulkUnfavoriteSelectedAvatars(ids) {
ids.forEach((id) => {
favoriteRequest.deleteFavorite({
@@ -1473,6 +1613,10 @@
}
});
/**
*
* @param value
*/
function formatVisibility(value) {
if (!value) {
return '';
@@ -1568,15 +1712,14 @@
border: 1px solid var(--border);
padding: 8px;
cursor: pointer;
box-shadow: 0 0 6px rgba(15, 23, 42, 0.04);
transition:
box-shadow 0.2s ease,
transform 0.2s ease;
transition: background-color 0.15s ease;
}
.group-item:hover {
box-shadow: 0 2px 6px rgba(15, 23, 42, 0.07);
transform: translateY(-2px);
background-color: var(--accent);
box-shadow:
0 4px 6px -1px rgb(0 0 0 / 0.1),
0 2px 4px -2px rgb(0 0 0 / 0.1);
}
.group-item__top {
@@ -1773,19 +1916,17 @@
border-radius: calc(8px * var(--favorites-card-scale, 1));
padding: var(--favorites-card-padding-y, 8px) var(--favorites-card-padding-x, 10px);
cursor: pointer;
transition:
border-color 0.2s ease,
box-shadow 0.2s ease,
transform 0.2s ease;
box-shadow: 0 0 6px rgba(15, 23, 42, 0.04);
transition: background-color 0.15s ease;
width: 100%;
min-width: var(--favorites-card-min-width, 240px);
max-width: var(--favorites-card-target-width, 320px);
}
:deep(.favorites-search-card:hover) {
box-shadow: 0 4px 14px rgba(15, 23, 42, 0.07);
transform: translateY(calc(-2px * var(--favorites-card-scale, 1)));
background-color: var(--accent);
box-shadow:
0 4px 6px -1px rgb(0 0 0 / 0.1),
0 2px 4px -2px rgb(0 0 0 / 0.1);
}
:deep(.favorites-search-card__content) {

23
src/views/Favorites/FavoritesFriend.vue
View File

@@ -1352,15 +1352,14 @@
border: 1px solid var(--border);
padding: 8px;
cursor: pointer;
box-shadow: 0 0 6px rgba(15, 23, 42, 0.04);
transition:
box-shadow 0.2s ease,
transform 0.2s ease;
transition: background-color 0.15s ease;
}
.group-item:hover {
box-shadow: 0 2px 6px rgba(15, 23, 42, 0.07);
transform: translateY(-2px);
background-color: var(--accent);
box-shadow:
0 4px 6px -1px rgb(0 0 0 / 0.1),
0 2px 4px -2px rgb(0 0 0 / 0.1);
}
.group-item__top {
@@ -1544,19 +1543,17 @@
border-radius: calc(8px * var(--favorites-card-scale, 1));
padding: var(--favorites-card-padding-y, 8px) var(--favorites-card-padding-x, 10px);
cursor: pointer;
transition:
border-color 0.2s ease,
box-shadow 0.2s ease,
transform 0.2s ease;
box-shadow: 0 0 6px rgba(15, 23, 42, 0.04);
transition: background-color 0.15s ease;
width: 100%;
min-width: var(--favorites-card-min-width, 240px);
max-width: var(--favorites-card-target-width, 320px);
}
:deep(.favorites-search-card:hover) {
box-shadow: 0 4px 14px rgba(15, 23, 42, 0.07);
transform: translateY(calc(-2px * var(--favorites-card-scale, 1)));
background-color: var(--accent);
box-shadow:
0 4px 6px -1px rgb(0 0 0 / 0.1),
0 2px 4px -2px rgb(0 0 0 / 0.1);
}
:deep(.favorites-search-card.is-selected) {

160
src/views/Favorites/FavoritesWorld.vue
View File

@@ -621,11 +621,17 @@
worldToolbarMenuOpen.value = false;
};
/**
*
*/
function handleWorldImportClick() {
closeWorldToolbarMenu();
showWorldImportDialog();
}
/**
*
*/
function handleWorldExportClick() {
closeWorldToolbarMenu();
showExportDialog();
@@ -635,6 +641,9 @@
loadWorldSplitterPreferences();
});
/**
*
*/
async function loadWorldSplitterPreferences() {
const storedSize = await configRepository.getString('VRCX_FavoritesWorldSplitter', '260');
const parsedSize = Number(storedSize);
@@ -889,6 +898,10 @@
const getLocalRowItems = (row) => (row && Array.isArray(row.items) ? row.items : []);
/**
*
* @param value
*/
function handleSortFavoritesChange(value) {
const next = Boolean(value);
if (next !== sortFavorites.value) {
@@ -946,6 +959,11 @@
onMounted(() => {});
/**
*
* @param key
* @param visible
*/
function handleGroupMenuVisible(key, visible) {
if (visible) {
activeGroupMenu.value = key;
@@ -956,6 +974,9 @@
}
}
/**
*
*/
function ensureSelectedGroup() {
if (selectedGroup.value && isGroupAvailable(selectedGroup.value)) {
return;
@@ -963,6 +984,11 @@
selectDefaultGroup();
}
/**
*
* @param type
* @param key
*/
function handleGroupClick(type, key) {
if (hasSearchInput.value) {
worldFavoriteSearch.value = '';
@@ -971,6 +997,9 @@
selectGroup(type, key, { userInitiated: true });
}
/**
*
*/
function selectDefaultGroup() {
if (!hasUserSelectedWorldGroup.value) {
const remoteKey = favoriteWorldGroups.value[0]?.key || worldGroupPlaceholders[0]?.key || null;
@@ -991,6 +1020,10 @@
clearSelectedWorlds();
}
/**
*
* @param group
*/
function isGroupAvailable(group) {
if (!group) {
return false;
@@ -1007,6 +1040,12 @@
return false;
}
/**
*
* @param type
* @param key
* @param options
*/
function selectGroup(type, key, options = {}) {
if (selectedGroup.value?.type === type && selectedGroup.value?.key === key) {
return;
@@ -1018,10 +1057,19 @@
clearSelectedWorlds();
}
/**
*
* @param type
* @param key
*/
function isGroupActive(type, key) {
return selectedGroup.value?.type === type && selectedGroup.value?.key === key;
}
/**
*
* @param value
*/
function formatVisibility(value) {
if (!value) {
return '';
@@ -1029,6 +1077,9 @@
return value.charAt(0).toUpperCase() + value.slice(1);
}
/**
*
*/
function startLocalGroupCreation() {
if (isCreatingLocalGroup.value) {
return;
@@ -1040,11 +1091,17 @@
});
}
/**
*
*/
function cancelLocalGroupCreation() {
isCreatingLocalGroup.value = false;
newLocalGroupName.value = '';
}
/**
*
*/
function handleLocalGroupCreationConfirm() {
const name = newLocalGroupName.value.trim();
if (!name) {
@@ -1058,6 +1115,11 @@
});
}
/**
*
* @param id
* @param value
*/
function toggleWorldSelection(id, value) {
if (value) {
if (!selectedFavoriteWorlds.value.includes(id)) {
@@ -1068,10 +1130,16 @@
}
}
/**
*
*/
function clearSelectedWorlds() {
selectedFavoriteWorlds.value = [];
}
/**
*
*/
function toggleSelectAllWorlds() {
if (!activeRemoteGroup.value) {
return;
@@ -1083,6 +1151,9 @@
}
}
/**
*
*/
function copySelectedWorlds() {
if (!selectedFavoriteWorlds.value.length) {
return;
@@ -1092,6 +1163,9 @@
showWorldImportDialog();
}
/**
*
*/
function showWorldBulkUnfavoriteSelectionConfirm() {
if (!selectedFavoriteWorlds.value.length) {
return;
@@ -1111,6 +1185,10 @@
.catch(() => {});
}
/**
*
* @param ids
*/
function bulkUnfavoriteSelectedWorlds(ids) {
ids.forEach((id) => {
favoriteRequest.deleteFavorite({
@@ -1121,15 +1199,27 @@
worldEditMode.value = false;
}
/**
*
*/
function showExportDialog() {
worldExportDialogVisible.value = true;
}
/**
*
*/
function handleRefreshFavorites() {
refreshFavorites();
getLocalWorldFavorites();
}
/**
*
* @param group
* @param visibility
* @param menuKey
*/
function changeWorldGroupVisibility(group, visibility, menuKey = null) {
const params = {
type: group.type,
@@ -1152,6 +1242,10 @@
});
}
/**
*
* @param group
*/
function promptLocalWorldFavoriteGroupRename(group) {
modalStore
.prompt({
@@ -1177,6 +1271,10 @@
.catch(() => {});
}
/**
*
* @param group
*/
function promptLocalWorldFavoriteGroupDelete(group) {
modalStore
.confirm({
@@ -1191,6 +1289,10 @@
.catch(() => {});
}
/**
*
* @param ctx
*/
function clearFavoriteGroup(ctx) {
modalStore
.confirm({
@@ -1208,6 +1310,10 @@
.catch(() => {});
}
/**
*
* @param worldFavoriteSearch
*/
function doSearchWorldFavorites(worldFavoriteSearch) {
const search = worldFavoriteSearch.trim().toLowerCase();
if (search.length < 3) {
@@ -1225,31 +1331,56 @@
}
const searchWorldFavorites = debounce(doSearchWorldFavorites, 200);
/**
*
* @param group
* @param visibility
*/
function handleVisibilitySelection(group, visibility) {
const menuKey = remoteGroupMenuKey(group.key);
changeWorldGroupVisibility(group, visibility, menuKey);
}
/**
*
* @param group
*/
function handleRemoteRename(group) {
handleGroupMenuVisible(remoteGroupMenuKey(group.key), false);
changeFavoriteGroupName(group);
}
/**
*
* @param group
*/
function handleRemoteClear(group) {
handleGroupMenuVisible(remoteGroupMenuKey(group.key), false);
clearFavoriteGroup(group);
}
/**
*
* @param groupName
*/
function handleLocalRename(groupName) {
handleGroupMenuVisible(localGroupMenuKey(groupName), false);
promptLocalWorldFavoriteGroupRename(groupName);
}
/**
*
* @param groupName
*/
function handleLocalDelete(groupName) {
handleGroupMenuVisible(localGroupMenuKey(groupName), false);
promptLocalWorldFavoriteGroupDelete(groupName);
}
/**
*
* @param group
*/
function changeFavoriteGroupName(group) {
const currentName = group.displayName || group.name;
modalStore
@@ -1288,6 +1419,9 @@
.catch(() => {});
}
/**
*
*/
async function refreshLocalWorldFavorites() {
if (refreshingLocalFavorites.value) {
return;
@@ -1333,6 +1467,9 @@
}
}
/**
*
*/
function cancelLocalWorldRefresh() {
if (!refreshingLocalFavorites.value) {
return;
@@ -1446,15 +1583,14 @@
border: 1px solid var(--border);
padding: 8px;
cursor: pointer;
box-shadow: 0 0 6px rgba(15, 23, 42, 0.04);
transition:
box-shadow 0.2s ease,
transform 0.2s ease;
transition: background-color 0.15s ease;
}
.group-item:hover {
box-shadow: 0 2px 6px rgba(15, 23, 42, 0.07);
transform: translateY(-2px);
background-color: var(--accent);
box-shadow:
0 4px 6px -1px rgb(0 0 0 / 0.1),
0 2px 4px -2px rgb(0 0 0 / 0.1);
}
.group-item__top {
@@ -1696,19 +1832,17 @@
border-radius: calc(8px * var(--favorites-card-scale, 1));
padding: var(--favorites-card-padding-y, 8px) var(--favorites-card-padding-x, 10px);
cursor: pointer;
transition:
border-color 0.2s ease,
box-shadow 0.2s ease,
transform 0.2s ease;
box-shadow: 0 0 6px rgba(15, 23, 42, 0.04);
transition: background-color 0.15s ease;
width: 100%;
min-width: var(--favorites-card-min-width, 240px);
max-width: var(--favorites-card-target-width, 320px);
}
:deep(.favorites-search-card:hover) {
box-shadow: 0 4px 14px rgba(15, 23, 42, 0.07);
transform: translateY(calc(-2px * var(--favorites-card-scale, 1)));
background-color: var(--accent);
box-shadow:
0 4px 6px -1px rgb(0 0 0 / 0.1),
0 2px 4px -2px rgb(0 0 0 / 0.1);
}
:deep(.favorites-search-card.is-selected) {

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

@@ -241,16 +241,17 @@
display: grid;
gap: calc(14px * var(--card-scale) * var(--card-spacing));
border-radius: 8px;
transition:
box-shadow 0.2s ease,
transform 0.2s ease;
transition: background-color 0.15s ease;
width: 100%;
max-width: var(--friend-card-target-width, 220px);
min-width: var(--friend-card-min-width, 220px);
box-sizing: border-box;
&:hover {
transform: translateY(calc(-2px * var(--card-scale)));
background-color: var(--accent);
box-shadow:
0 4px 6px -1px rgb(0 0 0 / 0.1),
0 2px 4px -2px rgb(0 0 0 / 0.1);
}
}

8
src/views/MyAvatars/components/MyAvatarCard.vue
View File

@@ -1,13 +1,11 @@
<template>
<HoverCard :open-delay="500" :close-delay="100">
<HoverCard :open-delay="700" :close-delay="100">
<HoverCardTrigger as="div">
<ContextMenu>
<ContextMenuTrigger as="div">
<div
class="avatar-card-wrapper rounded-lg transition-all duration-150 hover:-translate-y-0.5 hover:shadow-md"
@click="$emit('click')">
<div class="avatar-card-wrapper rounded-lg" @click="$emit('click')">
<Card
class="avatar-card flex flex-col gap-0 p-0 cursor-pointer overflow-hidden rounded-lg relative"
class="avatar-card flex flex-col gap-0 p-0 cursor-pointer overflow-hidden rounded-lg relative transition-colors hover:bg-accent hover:shadow-md"
:class="isActive ? 'border-2 border-primary' : 'border border-border/50'">
<div class="w-full aspect-5/2 overflow-hidden bg-muted relative">
<img

7
src/views/Tools/Tools.vue
View File

@@ -530,7 +530,7 @@
}
.tool-card {
transition: all 0.3s ease;
transition: background-color 0.15s ease;
position: relative;
overflow: visible;
border-radius: 8px;
@@ -538,7 +538,10 @@
width: 100%;
&:hover {
transform: translateY(-2px);
background-color: var(--accent);
box-shadow:
0 4px 6px -1px rgb(0 0 0 / 0.1),
0 2px 4px -2px rgb(0 0 0 / 0.1);
}
.tool-content {

7
src/views/Tools/components/GroupCalendarEventCard.vue
View File

@@ -255,7 +255,7 @@
<style scoped>
.event-card {
transition: all 0.3s ease;
transition: background-color 0.15s ease;
position: relative;
overflow: visible;
border-radius: 8px;
@@ -263,7 +263,10 @@
}
.event-card:hover {
transform: translateY(-2px);
background-color: var(--accent);
box-shadow:
0 4px 6px -1px rgb(0 0 0 / 0.1),
0 2px 4px -2px rgb(0 0 0 / 0.1);
}
.event-card.grouped-card {