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

add midnight theme and fix some styles

Browse Source
This commit is contained in:
pa
2026-01-18 15:45:36 +09:00
committed by Natsumi
parent 46750d3a0c
commit c326e4fd3e
37 changed files with 655 additions and 471 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/dialogs/AvatarDialog/AvatarDialog.vue
View File

@@ -207,12 +207,17 @@
<TooltipWrapper
v-if="avatarDialog.isFavorite"
side="top"
:ignore-non-keyboard-focus="true"
:content="t('dialog.avatar.actions.favorite_tooltip')">
<Button class="rounded-full" size="icon-lg" @click="avatarDialogCommand('Add Favorite')"
><Star
/></Button>
</TooltipWrapper>
<TooltipWrapper v-else side="top" :content="t('dialog.avatar.actions.favorite_tooltip')">
<TooltipWrapper
v-else
side="top"
:ignore-non-keyboard-focus="true"
:content="t('dialog.avatar.actions.favorite_tooltip')">
<Button
class="rounded-full"
size="icon-lg"

21
src/components/dialogs/GroupDialog/GroupDialog.vue
View File

@@ -377,21 +377,15 @@
<div v-for="room in groupDialog.instances" :key="room.tag" style="width: 100%">
<div style="margin: 5px 0">
<Location :location="room.tag" style="display: inline-block" />
<InviteYourself :location="room.tag" style="margin-left: 5px" />
<TooltipWrapper side="top" content="RefreshCw player count">
<Button
class="rounded-full ml-1 w-6 h-6 text-xs text-muted-foreground hover:text-foreground"
size="icon"
variant="outline"
@click="refreshInstancePlayerCount(room.tag)"
><RefreshCw class="h-4 w-4" />
</Button>
</TooltipWrapper>
<LastJoin :location="room.tag" :currentlocation="lastLocation.location" />
<InstanceInfo
<InstanceActionBar
class="ml-1"
:location="room.tag"
:currentlocation="lastLocation.location"
:instance="room.ref"
:friendcount="room.friendCount" />
:friendcount="room.friendCount"
:show-launch="false"
refresh-tooltip="RefreshCw player count"
:on-refresh="() => refreshInstancePlayerCount(room.tag)" />
</div>
<div
v-if="room.users.length"
@@ -1244,6 +1238,7 @@
import GroupCalendarEventCard from '../../../views/Tools/components/GroupCalendarEventCard.vue';
import GroupPostEditDialog from './GroupPostEditDialog.vue';
import InstanceActionBar from '../../InstanceActionBar.vue';
import PreviousInstancesGroupDialog from '../PreviousInstancesDialog/PreviousInstancesGroupDialog.vue';
import * as workerTimers from 'worker-timers';

21
src/components/dialogs/GroupDialog/groupMemberModerationBansColumns.jsx
View File

@@ -18,7 +18,6 @@ export const createColumns = ({
header: () => null,
size: 55,
enableSorting: false,
enableResizing: false,
cell: ({ row }) => {
const original = row.original;
return (
@@ -70,7 +69,9 @@ export const createColumns = ({
cell: ({ row }) => {
const original = row.original;
const useColors = !!(randomUserColours?.value ?? randomUserColours);
const colorStyle = useColors ? { color: original?.user?.$userColour } : null;
const colorStyle = useColors
? { color: original?.user?.$userColour }
: null;
return (
<span
@@ -80,7 +81,9 @@ export const createColumns = ({
onShowUser?.(original?.userId);
}}
>
<span style={colorStyle}>{original?.user?.displayName}</span>
<span style={colorStyle}>
{original?.user?.displayName}
</span>
</span>
);
}
@@ -98,19 +101,25 @@ export const createColumns = ({
accessorKey: 'managerNotes',
header: () => t('dialog.group_member_moderation.notes'),
cell: ({ row }) => (
<span onClick={(e) => e.stopPropagation()}>{row.original?.managerNotes}</span>
<span onClick={(e) => e.stopPropagation()}>
{row.original?.managerNotes}
</span>
)
},
{
accessorKey: 'joinedAt',
header: () => t('dialog.group_member_moderation.joined_at'),
size: 170,
cell: ({ row }) => <span>{formatDateFilter(row.original?.joinedAt, 'long')}</span>
cell: ({ row }) => (
<span>{formatDateFilter(row.original?.joinedAt, 'long')}</span>
)
},
{
accessorKey: 'bannedAt',
header: () => t('dialog.group_member_moderation.banned_at'),
size: 170,
cell: ({ row }) => <span>{formatDateFilter(row.original?.bannedAt, 'long')}</span>
cell: ({ row }) => (
<span>{formatDateFilter(row.original?.bannedAt, 'long')}</span>
)
}
];

13
src/components/dialogs/GroupDialog/groupMemberModerationBlockedColumns.jsx
View File

@@ -16,7 +16,6 @@ export const createColumns = ({
header: () => null,
size: 55,
enableSorting: false,
enableResizing: false,
cell: ({ row }) => {
const original = row.original;
return (
@@ -68,7 +67,9 @@ export const createColumns = ({
cell: ({ row }) => {
const original = row.original;
const useColors = !!(randomUserColours?.value ?? randomUserColours);
const colorStyle = useColors ? { color: original?.user?.$userColour } : null;
const colorStyle = useColors
? { color: original?.user?.$userColour }
: null;
return (
<span
@@ -78,7 +79,9 @@ export const createColumns = ({
onShowUser?.(original?.userId);
}}
>
<span style={colorStyle}>{original?.user?.displayName}</span>
<span style={colorStyle}>
{original?.user?.displayName}
</span>
</span>
);
}
@@ -87,7 +90,9 @@ export const createColumns = ({
accessorKey: 'managerNotes',
header: () => t('dialog.group_member_moderation.notes'),
cell: ({ row }) => (
<span onClick={(e) => e.stopPropagation()}>{row.original?.managerNotes}</span>
<span onClick={(e) => e.stopPropagation()}>
{row.original?.managerNotes}
</span>
)
}
];

13
src/components/dialogs/GroupDialog/groupMemberModerationInvitesColumns.jsx
View File

@@ -16,7 +16,6 @@ export const createColumns = ({
header: () => null,
size: 55,
enableSorting: false,
enableResizing: false,
cell: ({ row }) => {
const original = row.original;
return (
@@ -68,7 +67,9 @@ export const createColumns = ({
cell: ({ row }) => {
const original = row.original;
const useColors = !!(randomUserColours?.value ?? randomUserColours);
const colorStyle = useColors ? { color: original?.user?.$userColour } : null;
const colorStyle = useColors
? { color: original?.user?.$userColour }
: null;
return (
<span
@@ -78,7 +79,9 @@ export const createColumns = ({
onShowUser?.(original?.userId);
}}
>
<span style={colorStyle}>{original?.user?.displayName}</span>
<span style={colorStyle}>
{original?.user?.displayName}
</span>
</span>
);
}
@@ -87,7 +90,9 @@ export const createColumns = ({
accessorKey: 'managerNotes',
header: () => t('dialog.group_member_moderation.notes'),
cell: ({ row }) => (
<span onClick={(e) => e.stopPropagation()}>{row.original?.managerNotes}</span>
<span onClick={(e) => e.stopPropagation()}>
{row.original?.managerNotes}
</span>
)
}
];

13
src/components/dialogs/GroupDialog/groupMemberModerationJoinRequestsColumns.jsx
View File

@@ -16,7 +16,6 @@ export const createColumns = ({
header: () => null,
size: 55,
enableSorting: false,
enableResizing: false,
cell: ({ row }) => {
const original = row.original;
return (
@@ -68,7 +67,9 @@ export const createColumns = ({
cell: ({ row }) => {
const original = row.original;
const useColors = !!(randomUserColours?.value ?? randomUserColours);
const colorStyle = useColors ? { color: original?.user?.$userColour } : null;
const colorStyle = useColors
? { color: original?.user?.$userColour }
: null;
return (
<span
@@ -78,7 +79,9 @@ export const createColumns = ({
onShowUser?.(original?.userId);
}}
>
<span style={colorStyle}>{original?.user?.displayName}</span>
<span style={colorStyle}>
{original?.user?.displayName}
</span>
</span>
);
}
@@ -87,7 +90,9 @@ export const createColumns = ({
accessorKey: 'managerNotes',
header: () => t('dialog.group_member_moderation.notes'),
cell: ({ row }) => (
<span onClick={(e) => e.stopPropagation()}>{row.original?.managerNotes}</span>
<span onClick={(e) => e.stopPropagation()}>
{row.original?.managerNotes}
</span>
)
}
];

17
src/components/dialogs/GroupDialog/groupMemberModerationMembersColumns.jsx
View File

@@ -18,7 +18,6 @@ export const createColumns = ({
header: () => null,
size: 55,
enableSorting: false,
enableResizing: false,
cell: ({ row }) => {
const original = row.original;
return (
@@ -70,7 +69,9 @@ export const createColumns = ({
cell: ({ row }) => {
const original = row.original;
const useColors = !!(randomUserColours?.value ?? randomUserColours);
const colorStyle = useColors ? { color: original?.user?.$userColour } : null;
const colorStyle = useColors
? { color: original?.user?.$userColour }
: null;
return (
<span
@@ -80,7 +81,9 @@ export const createColumns = ({
onShowUser?.(original?.userId);
}}
>
<span style={colorStyle}>{original?.user?.displayName}</span>
<span style={colorStyle}>
{original?.user?.displayName}
</span>
</span>
);
}
@@ -98,14 +101,18 @@ export const createColumns = ({
accessorKey: 'managerNotes',
header: () => t('dialog.group_member_moderation.notes'),
cell: ({ row }) => (
<span onClick={(e) => e.stopPropagation()}>{row.original?.managerNotes}</span>
<span onClick={(e) => e.stopPropagation()}>
{row.original?.managerNotes}
</span>
)
},
{
accessorKey: 'joinedAt',
header: () => t('dialog.group_member_moderation.joined_at'),
size: 170,
cell: ({ row }) => <span>{formatDateFilter(row.original?.joinedAt, 'long')}</span>
cell: ({ row }) => (
<span>{formatDateFilter(row.original?.joinedAt, 'long')}</span>
)
},
{
accessorKey: 'visibility',

7
src/components/dialogs/UserDialog/UserActionDropdown.vue
View File

@@ -4,10 +4,15 @@
<TooltipWrapper
v-if="userDialog.isFavorite"
side="top"
:ignore-non-keyboard-focus="true"
:content="t('dialog.user.actions.unfavorite_tooltip')">
<Button class="rounded-full" size="icon-lg" @click="userDialogCommand('Add Favorite')"><Star /></Button>
</TooltipWrapper>
<TooltipWrapper v-else side="top" :content="t('dialog.user.actions.favorite_tooltip')">
<TooltipWrapper
v-else
side="top"
:ignore-non-keyboard-focus="true"
:content="t('dialog.user.actions.favorite_tooltip')">
<Button class="rounded-full" size="icon-lg" variant="outline" @click="userDialogCommand('Add Favorite')"
><Star
/></Button>

60
src/components/dialogs/UserDialog/UserDialog.vue
View File

@@ -36,31 +36,15 @@
">
<div style="flex: none">
<template v-if="isRealInstance(userDialog.$location.tag)">
<div class="flex items-center mb-1">
<Launch :location="userDialog.$location.tag" />
<InviteYourself
:location="userDialog.$location.tag"
:shortname="userDialog.$location.shortName"
style="margin-left: 5px" />
<TooltipWrapper
side="top"
:content="t('dialog.user.info.refresh_instance_info')"
><Button
class="rounded-full ml-1 w-6 h-6 text-xs text-muted-foreground hover:text-foreground"
size="icon"
variant="outline"
@click="refreshInstancePlayerCount(userDialog.$location.tag)"
><RefreshCw class="h-4 w-4" />
</Button>
</TooltipWrapper>
<LastJoin
:location="userDialog.$location.tag"
:currentlocation="lastLocation.location" />
<InstanceInfo
:location="userDialog.$location.tag"
:instance="userDialog.instance.ref"
:friendcount="userDialog.instance.friendCount" />
</div>
<InstanceActionBar
class="mb-1"
:location="userDialog.$location.tag"
:shortname="userDialog.$location.shortName"
:currentlocation="lastLocation.location"
:instance="userDialog.instance.ref"
:friendcount="userDialog.instance.friendCount"
:refresh-tooltip="t('dialog.user.info.refresh_instance_info')"
:on-refresh="() => refreshInstancePlayerCount(userDialog.$location.tag)" />
</template>
<Location
:location="userDialog.ref.location"
@@ -154,22 +138,14 @@
</div>
<div class="x-friend-item" style="width: 100%; cursor: default">
<div class="detail">
<span
v-if="
<span class="name">
{{
userDialog.id !== currentUser.id &&
userDialog.ref.profilePicOverride &&
userDialog.ref.currentAvatarImageUrl
"
class="name">
{{ t('dialog.user.info.avatar_info_last_seen') }}
</span>
<span v-else class="name">{{ t('dialog.user.info.avatar_info') }}</span>
<div class="extra">
<AvatarInfo
:imageurl="userDialog.ref.currentAvatarImageUrl"
:userid="userDialog.id"
:avatartags="userDialog.ref.currentAvatarTags"
style="display: inline-block" />
? t('dialog.user.info.avatar_info_last_seen')
: t('dialog.user.info.avatar_info')
}}
<TooltipWrapper
v-if="
userDialog.ref.profilePicOverride &&
@@ -179,6 +155,13 @@
:content="t('dialog.user.info.vrcplus_hides_avatar')">
<Info />
</TooltipWrapper>
</span>
<div class="extra">
<AvatarInfo
:imageurl="userDialog.ref.currentAvatarImageUrl"
:userid="userDialog.id"
:avatartags="userDialog.ref.currentAvatarTags"
style="display: inline-block" />
</div>
</div>
</div>
@@ -1385,6 +1368,7 @@
import { userDialogWorldOrderOptions, userDialogWorldSortingOptions } from '../../../shared/constants/';
import { database } from '../../../service/database';
import InstanceActionBar from '../../InstanceActionBar.vue';
import SendInviteDialog from '../InviteDialog/SendInviteDialog.vue';
import UserSummaryHeader from './UserSummaryHeader.vue';

5
src/components/dialogs/UserDialog/UserSummaryHeader.vue
View File

@@ -111,7 +111,10 @@
v-if="userDialog.mutualFriendCount"
side="top"
:content="t('dialog.user.tags.mutual_friends')">
<Badge variant="outline" class="x-tag-mutual-friend" style="margin-right: 5px; margin-top: 5px">
<Badge
variant="outline"
class="x-tag-mutual-friend border-zinc-500/50! dark:border-zinc-400!"
style="margin-right: 5px; margin-top: 5px">
<Users class="mr-1 h-4 w-4 inline-block" />
{{ userDialog.mutualFriendCount }}
</Badge>

53
src/components/dialogs/WorldDialog/WorldDialog.vue
View File

@@ -184,12 +184,17 @@
<TooltipWrapper
v-if="worldDialog.isFavorite"
side="top"
:ignore-non-keyboard-focus="true"
:content="t('dialog.world.actions.favorites_tooltip')">
<Button class="rounded-full" size="icon-lg" @click="worldDialogCommand('Add Favorite')"
><Star
/></Button>
</TooltipWrapper>
<TooltipWrapper v-else side="top" :content="t('dialog.world.actions.favorites_tooltip')">
<TooltipWrapper
v-else
side="top"
:ignore-non-keyboard-focus="true"
:content="t('dialog.world.actions.favorites_tooltip')">
<Button
class="rounded-full"
size="icon-lg"
@@ -355,42 +360,20 @@
:locationobject="room.$location"
:currentuserid="currentUser.id"
:worlddialogshortname="worldDialog.$location.shortName" />
<Launch :location="room.tag" style="margin-left: 5px" />
<InviteYourself
<InstanceActionBar
class="ml-1"
:location="room.$location.tag"
:launch-location="room.tag"
:instance-location="room.tag"
:shortname="room.$location.shortName"
style="margin-left: 5px" />
<TooltipWrapper
side="top"
:content="t('dialog.world.instances.refresh_instance_info')">
<Button
class="rounded-full ml-1 w-6 h-6 text-xs text-muted-foreground hover:text-foreground"
size="icon"
variant="outline"
@click="refreshInstancePlayerCount(room.tag)"
><RefreshCw class="h-4 w-4" />
</Button>
</TooltipWrapper>
<TooltipWrapper
v-if="instanceJoinHistory.get(room.$location.tag)"
side="top"
:content="t('dialog.previous_instances.info')">
<Button
class="rounded-full w-6 h-6 text-xs text-muted-foreground hover:text-foreground"
size="icon-sm"
variant="outline"
style="margin-left: 5px"
@click="showPreviousInstancesInfoDialog(room.location)"
><History class="h-4 w-4" />
</Button>
</TooltipWrapper>
<LastJoin
:location="room.$location.tag"
:currentlocation="lastLocation.location" />
<InstanceInfo
:location="room.tag"
:currentlocation="lastLocation.location"
:instance="room.ref"
:friendcount="room.friendCount" />
:friendcount="room.friendCount"
:refresh-tooltip="t('dialog.world.instances.refresh_instance_info')"
:show-history="!!instanceJoinHistory.get(room.$location.tag)"
:history-tooltip="t('dialog.previous_instances.info')"
:on-refresh="() => refreshInstancePlayerCount(room.tag)"
:on-history="() => showPreviousInstancesInfoDialog(room.location)" />
</div>
<div
v-if="room.$location.userId || room.users.length"
@@ -804,6 +787,8 @@
import { database } from '../../../service/database.js';
import { formatJsonVars } from '../../../shared/utils/base/ui';
import InstanceActionBar from '../../InstanceActionBar.vue';
const modalStore = useModalStore();
const NewInstanceDialog = defineAsyncComponent(() => import('../NewInstanceDialog.vue'));