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

add distinct status dot styles for active, join, ask, busy, and offline friend statuses

Browse Source
This commit is contained in:
pa
2026-02-22 20:05:58 +09:00
committed by Natsumi
parent d9f88fe987
commit cbe6b73d0b
1 changed files with 46 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -73,15 +73,32 @@
if (status.joinme) { if (status.joinme) {
return 'friend-card__status-dot--join'; return 'friend-card__status-dot--join';
} }
if (status.online || status.active) { if (status.online) {
return 'friend-card__status-dot--online'; return 'friend-card__status-dot--online';
} }
// sometimes appearing and sometimes disappearing
if (status.active) {
const friendStatus = props.friend.status;
if (friendStatus === 'join me') {
return 'friend-card__status-dot--active-join';
}
if (friendStatus === 'ask me') {
return 'friend-card__status-dot--active-ask';
}
if (friendStatus === 'busy') {
return 'friend-card__status-dot--active-busy';
}
return 'friend-card__status-dot--active';
}
if (status.askme) { if (status.askme) {
return 'friend-card__status-dot--ask'; return 'friend-card__status-dot--ask';
} }
if (status.busy) { if (status.busy) {
return 'friend-card__status-dot--busy'; return 'friend-card__status-dot--busy';
} }
if (status.offline) {
return 'friend-card__status-dot--offline';
}
return 'friend-card__status-dot--hidden'; return 'friend-card__status-dot--hidden';
}); });
@@ -134,6 +151,30 @@
box-shadow: 0 0 calc(8px * var(--card-scale)) color-mix(in oklch, #67c23a 40%, transparent); box-shadow: 0 0 calc(8px * var(--card-scale)) color-mix(in oklch, #67c23a 40%, transparent);
} }
.friend-card__status-dot--active {
background: transparent;
border: calc(2px * var(--card-scale)) solid #67c23a;
box-shadow: 0 0 calc(8px * var(--card-scale)) color-mix(in oklch, #67c23a 40%, transparent);
}
.friend-card__status-dot--active-join {
background: transparent;
border: calc(2px * var(--card-scale)) solid #409eff;
box-shadow: 0 0 calc(8px * var(--card-scale)) color-mix(in oklch, #409eff 40%, transparent);
}
.friend-card__status-dot--active-ask {
background: transparent;
border: calc(2px * var(--card-scale)) solid #ff9500;
box-shadow: 0 0 calc(8px * var(--card-scale)) color-mix(in oklch, #ff9500 40%, transparent);
}
.friend-card__status-dot--active-busy {
background: transparent;
border: calc(2px * var(--card-scale)) solid #ff2c2c;
box-shadow: 0 0 calc(8px * var(--card-scale)) color-mix(in oklch, #ff2c2c 40%, transparent);
}
.friend-card__status-dot--join { .friend-card__status-dot--join {
background: #409eff; background: #409eff;
box-shadow: 0 0 calc(8px * var(--card-scale)) color-mix(in oklch, #409eff 40%, transparent); box-shadow: 0 0 calc(8px * var(--card-scale)) color-mix(in oklch, #409eff 40%, transparent);
@@ -149,6 +190,10 @@
box-shadow: 0 0 calc(8px * var(--card-scale)) color-mix(in oklch, #ff9500 40%, transparent); box-shadow: 0 0 calc(8px * var(--card-scale)) color-mix(in oklch, #ff9500 40%, transparent);
} }
.friend-card__status-dot--offline {
background: #737f8d;
}
.friend-card__body { .friend-card__body {
display: grid; display: grid;
gap: calc(12px * var(--card-scale) * var(--card-spacing)); gap: calc(12px * var(--card-scale) * var(--card-spacing));