MrUnknownDE/VRCX
1
0
Fork 0
mirror of https://github.com/MrUnknownDE/VRCX.git synced 2026-04-19 06:43:51 +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

12
src/components/AvatarInfo.vue
View File

@@ -1,9 +1,8 @@
<template>
<div @click="confirm" class="cursor-pointer w-fit align-top flex items-center">
<span>{{ avatarName }}</span>
<span v-if="avatarType === '(own)'" :class="color" class="mx-1">
<Lock v-if="avatarType" class="h-4 w-4" />
</span>
<span class="flex items-center"
>{{ avatarName }} <Lock v-if="avatarType && avatarType === '(own)'" class="h-4 w-4 mx-1"
/></span>
<span v-if="avatarTags" style="font-size: 12px">{{ avatarTags }}</span>
</div>
</template>
@@ -27,14 +26,12 @@
const avatarName = ref('');
const avatarType = ref('');
const avatarTags = ref('');
const color = ref('');
let ownerId = '';
const parse = async () => {
ownerId = '';
avatarName.value = '';
avatarType.value = '';
color.value = '';
avatarTags.value = '';
if (!props.imageurl) {
@@ -55,13 +52,10 @@
}
if (typeof props.userid === 'undefined' || !ownerId) {
color.value = '';
avatarType.value = '';
} else if (ownerId === props.userid) {
color.value = 'avatar-info-own';
avatarType.value = '(own)';
} else {
color.value = 'avatar-info-public';
avatarType.value = '(public)';
}

385
src/components/InstanceActionBar.vue Normal file
View File

@@ -0,0 +1,385 @@
<template>
<div class="flex items-center" v-bind="$attrs">
<div v-if="showLaunchButton" class="inline-block">
<TooltipWrapper side="top" :content="t('dialog.user.info.launch_invite_tooltip')">
<Button
class="rounded-full w-6 h-6 text-xs text-muted-foreground hover:text-foreground"
size="icon-sm"
variant="outline"
@click="confirmLaunch">
<LogIn />
</Button>
</TooltipWrapper>
</div>
<div v-if="showInviteYourself" class="inline-block" :style="inviteStyle">
<TooltipWrapper
v-if="!canOpenInstanceInGame"
side="top"
:content="t('dialog.user.info.self_invite_tooltip')">
<Button
class="rounded-full h-6 w-6 text-xs text-muted-foreground hover:text-foreground"
size="icon-sm"
variant="outline"
@click="confirmInvite">
<Mail class="h-4 w-4" />
</Button>
</TooltipWrapper>
<TooltipWrapper v-else side="top" :content="t('dialog.user.info.open_in_vrchat_tooltip')">
<Button
class="rounded-full h-6 w-6 text-xs text-muted-foreground hover:text-foreground"
size="icon-sm"
variant="outline"
v-if="isOpeningInstance">
<Loader2 class="h-4 w-4 animate-spin" />
</Button>
<Button
class="rounded-full h-6 w-6 text-xs text-muted-foreground hover:text-foreground"
size="icon-sm"
variant="outline"
v-else
@click="openInstance">
<Mail class="h-4 w-4" />
</Button>
</TooltipWrapper>
</div>
<TooltipWrapper v-if="showRefreshButton" side="top" :content="refreshTooltip">
<Button
class="rounded-full ml-1 w-6 h-6 text-xs text-muted-foreground hover:text-foreground"
size="icon"
variant="outline"
@click="handleRefresh">
<RefreshCw class="h-4 w-4" />
</Button>
</TooltipWrapper>
<TooltipWrapper v-if="showHistoryButton" side="top" :content="historyTooltip">
<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="handleHistory">
<History class="h-4 w-4" />
</Button>
</TooltipWrapper>
<span v-if="showLastJoinIndicator" class="inline-block ml-2">
<TooltipWrapper side="top" class="ml-5">
<template #content>
<span>{{ t('dialog.user.info.last_join') }} <Timer :epoch="lastJoin" /></span>
</template>
<MapPin class="h-4 w-4 text-muted-foreground" />
</TooltipWrapper>
</span>
<div v-if="showInstanceInfo" class="flex items-center ml-2">
<TooltipWrapper v-if="instanceInfoState.isValidInstance" side="top">
<template #content>
<div>
<span v-if="instance?.closedAt">
Closed At: {{ formatDateFilter(instance.closedAt, 'long') }}<br />
</span>
<template v-if="instanceInfoState.canCloseInstance">
<Button
class="mt-1"
size="sm"
:disabled="!!instance?.closedAt"
@click="closeInstance(resolvedInstanceLocation)">
{{ t('dialog.user.info.close_instance') }}
</Button>
<br /><br />
</template>
<span>
<span class="x-tag-platform-pc">PC: </span>{{ instance?.platforms?.standalonewindows }}
</span>
<br />
<span>
<span class="x-tag-platform-quest">Android: </span>{{ instance?.platforms?.android }}
</span>
<br />
<span><span>iOS: </span>{{ instance?.platforms?.ios }}</span>
<br />
<span>{{ t('dialog.user.info.instance_game_version') }} {{ instance?.gameServerVersion }}</span>
<br />
<span v-if="instance?.queueEnabled"
>{{ t('dialog.user.info.instance_queuing_enabled') }}<br
/></span>
<span v-if="instanceInfoState.disabledContentSettings">
{{ t('dialog.user.info.instance_disabled_content') }}
{{ instanceInfoState.disabledContentSettings }}<br />
</span>
<span v-if="instance?.users?.length">{{ t('dialog.user.info.instance_users') }}<br /></span>
<template v-for="user in instance?.users || []" :key="user.id">
<span style="cursor: pointer; margin-right: 5px" @click="showUserDialog(user.id)">
{{ user.displayName }}
</span>
</template>
</div>
</template>
<div class="mr-2 text-muted-foreground">
<span v-if="resolvedInstanceLocation === locationStore.lastLocation.location">
{{ locationStore.lastLocation.playerList.size }}/{{ instance?.capacity }}
</span>
<span v-else-if="instance?.userCount"> {{ instance.userCount }}/{{ instance?.capacity }} </span>
</div>
</TooltipWrapper>
<span v-if="friendcount" class="ml-1 flex items-center text-muted-foreground"
><UsersRound />{{ friendcount }}</span
>
<span v-if="instanceInfoState.isValidInstance && !instance?.hasCapacityForYou" class="ml-1">
{{ t('dialog.user.info.instance_full') }}
</span>
<span v-if="instance?.queueSize" class="ml-1">
{{ t('dialog.user.info.instance_queue') }} {{ instance.queueSize }}
</span>
<span v-if="instanceInfoState.isAgeGated" class="ml-1">
{{ t('dialog.user.info.instance_age_gated') }}
</span>
</div>
</div>
</template>
<script setup>
import { History, Loader2, LogIn, Mail, MapPin, RefreshCw, UsersRound } from 'lucide-vue-next';
import { computed, reactive, ref, watch } from 'vue';
import { Button } from '@/components/ui/button';
import { storeToRefs } from 'pinia';
import { toast } from 'vue-sonner';
import { useI18n } from 'vue-i18n';
import {
useGroupStore,
useInstanceStore,
useInviteStore,
useLaunchStore,
useLocationStore,
useModalStore,
useUserStore
} from '../stores';
import { checkCanInviteSelf, formatDateFilter, hasGroupPermission, parseLocation } from '../shared/utils';
import { instanceRequest, miscRequest } from '../api';
defineOptions({
inheritAttrs: false
});
const { t } = useI18n();
const locationStore = useLocationStore();
const userStore = useUserStore();
const groupStore = useGroupStore();
const instanceStore = useInstanceStore();
const modalStore = useModalStore();
const launchStore = useLaunchStore();
const inviteStore = useInviteStore();
const { instanceJoinHistory } = storeToRefs(instanceStore);
const { canOpenInstanceInGame } = storeToRefs(inviteStore);
const { isOpeningInstance } = storeToRefs(launchStore);
const props = defineProps({
location: {
type: String,
default: ''
},
launchLocation: {
type: String,
default: ''
},
inviteLocation: {
type: String,
default: ''
},
lastJoinLocation: {
type: String,
default: ''
},
instanceLocation: {
type: String,
default: ''
},
shortname: {
type: String,
default: ''
},
instance: {
type: Object,
default: null
},
friendcount: {
type: Number,
default: undefined
},
currentlocation: {
type: String,
default: ''
},
showLaunch: {
type: Boolean,
default: true
},
showInvite: {
type: Boolean,
default: true
},
showRefresh: {
type: Boolean,
default: true
},
showHistory: {
type: Boolean,
default: false
},
showLastJoin: {
type: Boolean,
default: true
},
showInstanceInfo: {
type: Boolean,
default: true
},
refreshTooltip: {
type: String,
default: ''
},
historyTooltip: {
type: String,
default: ''
},
onRefresh: {
type: Function,
default: null
},
onHistory: {
type: Function,
default: null
}
});
const resolvedLaunchLocation = computed(() => props.launchLocation || props.location);
const resolvedInviteLocation = computed(() => props.inviteLocation || props.location);
const resolvedLastJoinLocation = computed(() => props.lastJoinLocation || props.location);
const resolvedInstanceLocation = computed(() => props.instanceLocation || props.location);
const showLaunchButton = computed(() => props.showLaunch && checkCanInviteSelf(resolvedLaunchLocation.value));
const showInviteYourself = computed(() => props.showInvite && checkCanInviteSelf(resolvedInviteLocation.value));
const inviteStyle = computed(() => (showLaunchButton.value ? 'margin-left: 5px' : ''));
const showRefreshButton = computed(() => props.showRefresh && typeof props.onRefresh === 'function');
const showHistoryButton = computed(() => props.showHistory && typeof props.onHistory === 'function');
const lastJoin = ref(null);
const showLastJoinIndicator = computed(() => props.showLastJoin && lastJoin.value);
const instanceInfoState = reactive({
isValidInstance: false,
canCloseInstance: false,
isAgeGated: false,
disabledContentSettings: ''
});
const handleRefresh = () => {
if (typeof props.onRefresh === 'function') {
props.onRefresh();
}
};
const handleHistory = () => {
if (typeof props.onHistory === 'function') {
props.onHistory();
}
};
const confirmLaunch = () => {
launchStore.showLaunchDialog(resolvedLaunchLocation.value);
};
const confirmInvite = () => {
const L = parseLocation(resolvedInviteLocation.value);
if (!L.isRealInstance) {
return;
}
instanceRequest
.selfInvite({
instanceId: L.instanceId,
worldId: L.worldId,
shortName: props.shortname
})
.then((args) => {
toast.success('Self invite sent');
return args;
});
};
const openInstance = () => {
const L = parseLocation(resolvedInviteLocation.value);
if (!L.isRealInstance) {
return;
}
launchStore.tryOpenInstanceInVrc(L.tag, props.shortname);
};
const parseLastJoin = () => {
lastJoin.value = instanceJoinHistory.value.get(resolvedLastJoinLocation.value);
};
const parseInstanceInfo = () => {
Object.assign(instanceInfoState, {
isValidInstance: false,
canCloseInstance: false,
isAgeGated: false,
disabledContentSettings: ''
});
if (!resolvedInstanceLocation.value || !props.instance || Object.keys(props.instance).length === 0) return;
instanceInfoState.isValidInstance = true;
if (props.instance.ownerId === userStore.currentUser.id) {
instanceInfoState.canCloseInstance = true;
} else if (props.instance.ownerId?.startsWith('grp_')) {
const group = groupStore.cachedGroups.get(props.instance.ownerId);
instanceInfoState.canCloseInstance = hasGroupPermission(group, 'group-instance-moderate');
}
instanceInfoState.isAgeGated = props.instance.ageGate === true;
if (resolvedInstanceLocation.value?.includes('~ageGate')) instanceInfoState.isAgeGated = true;
if (props.instance.$disabledContentSettings?.length) {
instanceInfoState.disabledContentSettings = props.instance.$disabledContentSettings.join(', ');
}
};
const showUserDialog = (userId) => {
userStore.showUserDialog(userId);
};
const closeInstance = (location) => {
modalStore
.confirm({
description: 'Continue? X Instance, nobody will be able to join',
title: 'Confirm'
})
.then(async ({ ok }) => {
if (!ok) return;
const args = await miscRequest.closeInstance({ location, hardClose: false });
if (args.json) {
toast.success(t('message.instance.closed'));
instanceStore.applyInstance(args.json);
}
})
.catch(() => {});
};
watch(() => resolvedLastJoinLocation.value, parseLastJoin, { immediate: true });
watch(() => props.currentlocation, parseLastJoin);
watch([resolvedInstanceLocation, () => props.instance, () => props.friendcount], parseInstanceInfo, {
immediate: true
});
</script>
<style scoped>
.inline-block {
display: inline-block;
}
.ml-5 {
margin-left: 5px;
}
</style>

140
src/components/InstanceInfo.vue
View File

@@ -1,140 +0,0 @@
<template>
<div class="flex items-center ml-2">
<TooltipWrapper v-if="state.isValidInstance" side="bottom">
<template #content>
<div>
<span v-if="props.instance.closedAt"
>Closed At: {{ formatDateFilter(props.instance.closedAt, 'long') }}<br
/></span>
<template v-if="state.canCloseInstance">
<Button
class="mt-1"
size="sm"
:disabled="!!props.instance.closedAt"
@click="closeInstance(props.location)">
{{ t('dialog.user.info.close_instance') }} </Button
><br /><br />
</template>
<span
><span class="x-tag-platform-pc">PC: </span
>{{ props.instance.platforms.standalonewindows }}</span
><br />
<span
><span class="x-tag-platform-quest">Android: </span>{{ props.instance.platforms.android }}</span
><br />
<span><span>iOS: </span>{{ props.instance.platforms.ios }}</span
><br />
<span>{{ t('dialog.user.info.instance_game_version') }} {{ props.instance.gameServerVersion }}</span
><br />
<span v-if="props.instance.queueEnabled"
>{{ t('dialog.user.info.instance_queuing_enabled') }}<br
/></span>
<span v-if="state.disabledContentSettings"
>{{ t('dialog.user.info.instance_disabled_content') }} {{ state.disabledContentSettings }}<br
/></span>
<span v-if="props.instance.users.length">{{ t('dialog.user.info.instance_users') }}<br /></span>
<template v-for="user in props.instance.users" :key="user.id">
<span style="cursor: pointer; margin-right: 5px" @click="showUserDialog(user.id)">{{
user.displayName
}}</span>
</template>
</div>
</template>
<Info class="text-xs text-accent-foreground" />
</TooltipWrapper>
<span v-if="props.location === locationStore.lastLocation.location" style="margin-left: 5px"
>{{ locationStore.lastLocation.playerList.size }}/{{ props.instance.capacity }}</span
>
<span v-else-if="props.instance.userCount" style="margin-left: 5px"
>{{ props.instance.userCount }}/{{ props.instance.capacity }}</span
>
<span v-if="props.friendcount" style="margin-left: 5px">({{ props.friendcount }})</span>
<span v-if="state.isValidInstance && !props.instance.hasCapacityForYou" style="margin-left: 5px">{{
t('dialog.user.info.instance_full')
}}</span>
<span v-if="props.instance.queueSize" style="margin-left: 5px"
>{{ t('dialog.user.info.instance_queue') }} {{ props.instance.queueSize }}</span
>
<span v-if="state.isAgeGated" style="margin-left: 5px">{{ t('dialog.user.info.instance_age_gated') }}</span>
</div>
</template>
<script setup>
import { reactive, watch } from 'vue';
import { Button } from '@/components/ui/button';
import { Info } from 'lucide-vue-next';
import { toast } from 'vue-sonner';
import { useI18n } from 'vue-i18n';
import { useGroupStore, useInstanceStore, useLocationStore, useModalStore, useUserStore } from '../stores';
import { formatDateFilter, hasGroupPermission } from '../shared/utils';
import { miscRequest } from '../api';
const { t } = useI18n();
const locationStore = useLocationStore();
const userStore = useUserStore();
const groupStore = useGroupStore();
const instanceStore = useInstanceStore();
const modalStore = useModalStore();
const props = defineProps({
location: String,
instance: Object,
friendcount: Number
});
const state = reactive({
isValidInstance: false,
canCloseInstance: false,
isAgeGated: false,
disabledContentSettings: ''
});
function parse() {
Object.assign(state, {
isValidInstance: false,
canCloseInstance: false,
isAgeGated: false,
disabledContentSettings: ''
});
if (!props.location || !props.instance || Object.keys(props.instance).length === 0) return;
state.isValidInstance = true;
if (props.instance.ownerId === userStore.currentUser.id) {
state.canCloseInstance = true;
} else if (props.instance.ownerId?.startsWith('grp_')) {
const group = groupStore.cachedGroups.get(props.instance.ownerId);
state.canCloseInstance = hasGroupPermission(group, 'group-instance-moderate');
}
state.isAgeGated = props.instance.ageGate === true;
if (props.location?.includes('~ageGate')) state.isAgeGated = true;
if (props.instance.$disabledContentSettings?.length) {
state.disabledContentSettings = props.instance.$disabledContentSettings.join(', ');
}
}
watch([() => props.location, () => props.instance, () => props.friendcount], parse, { immediate: true });
function showUserDialog(userId) {
userStore.showUserDialog(userId);
}
function closeInstance(location) {
modalStore
.confirm({
description: 'Continue? X Instance, nobody will be able to join',
title: 'Confirm'
})
.then(async ({ ok }) => {
if (!ok) return;
const args = await miscRequest.closeInstance({ location, hardClose: false });
if (args.json) {
toast.success(t('message.instance.closed'));
instanceStore.applyInstance(args.json);
}
})
.catch(() => {});
}
</script>

91
src/components/InviteYourself.vue
View File

@@ -1,91 +0,0 @@
<template>
<div v-if="isVisible" :class="['inline-block']">
<TooltipWrapper v-if="!canOpenInstanceInGame" side="top" :content="t('dialog.user.info.self_invite_tooltip')">
<Button
class="rounded-full h-6 w-6 text-xs text-muted-foreground hover:text-foreground"
size="icon-sm"
variant="outline"
v-show="isVisible"
@click="confirmInvite"
><Mail class="h-4 w-4"
/></Button>
</TooltipWrapper>
<TooltipWrapper v-else side="top" :content="t('dialog.user.info.open_in_vrchat_tooltip')">
<Button
class="rounded-full h-6 w-6 text-xs text-muted-foreground hover:text-foreground"
size="icon-sm"
variant="outline"
v-if="isOpeningInstance">
<Loader2 class="h-4 w-4 animate-spin" />
</Button>
<Button
class="rounded-full h-6 w-6 text-xs text-muted-foreground hover:text-foreground"
size="icon-sm"
variant="outline"
v-else
@click="openInstance"
><Mail class="h-4 w-4"
/></Button>
</TooltipWrapper>
</div>
</template>
<script setup>
import { Loader2, Mail } from 'lucide-vue-next';
import { Button } from '@/components/ui/button';
import { computed } from 'vue';
import { storeToRefs } from 'pinia';
import { toast } from 'vue-sonner';
import { useI18n } from 'vue-i18n';
import { checkCanInviteSelf, parseLocation } from '../shared/utils';
import { useInviteStore, useLaunchStore } from '../stores';
import { instanceRequest } from '../api';
const props = defineProps({
location: String,
shortname: String
});
const { t } = useI18n();
const { canOpenInstanceInGame } = storeToRefs(useInviteStore());
const { tryOpenInstanceInVrc } = useLaunchStore();
const { isOpeningInstance } = storeToRefs(useLaunchStore());
const isVisible = computed(() => checkCanInviteSelf(props.location));
function confirmInvite() {
const L = parseLocation(props.location);
if (!L.isRealInstance) {
return;
}
instanceRequest
.selfInvite({
instanceId: L.instanceId,
worldId: L.worldId,
shortName: props.shortname
})
.then((args) => {
toast.success('Self invite sent');
return args;
});
}
function openInstance() {
const L = parseLocation(props.location);
if (!L.isRealInstance) {
return;
}
tryOpenInstanceInVrc(L.tag, props.shortname);
}
</script>
<style scoped>
.inline-block {
display: inline-block;
}
</style>

46
src/components/LastJoin.vue
View File

@@ -1,46 +0,0 @@
<template>
<span v-if="lastJoin" :class="['inline-block', 'ml-5']">
<TooltipWrapper side="top" class="ml-5">
<template #content>
<span>{{ t('dialog.user.info.last_join') }} <Timer :epoch="lastJoin" /></span>
</template>
<MapPin class="h-4 w-4 text-muted-foreground" />
</TooltipWrapper>
</span>
</template>
<script setup>
// TODO(icon): time aspect lost (map pin with time)
import { ref, watch } from 'vue';
import { MapPin } from 'lucide-vue-next';
import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n';
import { useInstanceStore } from '../stores';
const { instanceJoinHistory } = storeToRefs(useInstanceStore());
const { t } = useI18n();
const props = defineProps({
location: String,
currentlocation: String
});
const lastJoin = ref(null);
function parse() {
lastJoin.value = instanceJoinHistory.value.get(props.location);
}
watch(() => props.location, parse, { immediate: true });
watch(() => props.currentlocation, parse);
</script>
<style scoped>
.ml-5 {
margin-left: 5px;
}
.inline-block {
display: inline-block;
}
</style>

44
src/components/Launch.vue
View File

@@ -1,44 +0,0 @@
<template>
<div v-if="isVisible" class="inline-block">
<TooltipWrapper side="top" :content="t('dialog.user.info.launch_invite_tooltip')"
><Button
class="rounded-full w-6 h-6 text-xs text-muted-foreground hover:text-foreground"
size="icon-sm"
variant="outline"
@click="confirm"
><LogIn />
</Button>
</TooltipWrapper>
</div>
</template>
<script setup>
import { Button } from '@/components/ui/button';
import { LogIn } from 'lucide-vue-next';
import { computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { checkCanInviteSelf } from '../shared/utils';
import { useLaunchStore } from '../stores';
const launchStore = useLaunchStore();
const { t } = useI18n();
const props = defineProps({
location: String
});
const isVisible = computed(() => {
return checkCanInviteSelf(props.location);
});
function confirm() {
launchStore.showLaunchDialog(props.location);
}
</script>
<style scoped>
.inline-block {
display: inline-block;
}
</style>

2
src/components/Location.vue
View File

@@ -1,5 +1,5 @@
<template>
<div>
<div class="cursor-pointer">
<div v-if="!text" class="transparent">-</div>
<div v-show="text" class="flex items-center">
<div v-if="region" :class="['flags', 'mr-1.5', region]"></div>

2
src/components/NavMenu.vue
View File

@@ -574,7 +574,7 @@
};
const handleThemeToggle = () => {
appearanceSettingsStore.setThemeMode(isDarkMode.value ? 'light' : 'dark');
appearanceSettingsStore.toggleThemeMode();
};
const handleTableDensitySelect = (density) => {

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'));

2
src/components/ui/button/index.js
View File

@@ -3,7 +3,7 @@ import { cva } from 'class-variance-authority';
export { default as Button } from './Button.vue';
export const buttonVariants = cva(
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all cursor-pointer disabled:pointer-events-none disabled:bg-muted disabled:text-muted-foreground disabled:shadow-none disabled:opacity-100 aria-disabled:pointer-events-none aria-disabled:bg-muted aria-disabled:text-muted-foreground aria-disabled:shadow-none aria-disabled:opacity-100 data-[disabled]:pointer-events-none data-[disabled]:bg-muted data-[disabled]:text-muted-foreground data-[disabled]:shadow-none data-[disabled]:opacity-100 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:bg-muted disabled:text-muted-foreground disabled:shadow-none disabled:opacity-100 aria-disabled:pointer-events-none aria-disabled:bg-muted aria-disabled:text-muted-foreground aria-disabled:shadow-none aria-disabled:opacity-100 data-[disabled]:pointer-events-none data-[disabled]:bg-muted data-[disabled]:text-muted-foreground data-[disabled]:shadow-none data-[disabled]:opacity-100 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
{
variants: {
variant: {

7
src/components/ui/tooltip/TooltipWrapper.vue
View File

@@ -16,6 +16,7 @@
sideOffset: { type: Number, required: false },
delayDuration: { type: Number, required: false },
disableHoverableContent: { type: Boolean, required: false },
ignoreNonKeyboardFocus: { type: Boolean, required: false },
disabled: { type: Boolean, required: false },
triggerAsChild: { type: Boolean, required: false, default: true },
contentClass: { type: null, required: false }
@@ -27,7 +28,11 @@
</script>
<template>
<Tooltip :delay-duration="delayDuration" :disable-hoverable-content="disableHoverableContent" :disabled="disabled">
<Tooltip
:delay-duration="delayDuration"
:disable-hoverable-content="disableHoverableContent"
:ignore-non-keyboard-focus="ignoreNonKeyboardFocus"
:disabled="disabled">
<TooltipTrigger :as-child="triggerAsChild" v-bind="attrs">
<slot />
</TooltipTrigger>

1
src/lib/table/useVrcxVueTable.js
View File

@@ -89,7 +89,6 @@ function withSpacerColumn(columns, enabled, spacerId, stretchAfterId) {
header: () => null,
cell: () => null,
enableSorting: false,
enableResizing: false,
size: 0,
minSize: 0,
meta: { thClass: 'p-0', tdClass: 'p-0' }

3
src/localization/en.json
View File

@@ -559,6 +559,9 @@
"font_family_source_sans_3": "Source Sans 3",
"font_family_ibm_plex_sans": "IBM Plex Sans",
"font_family_harmonyos_sans": "HarmonyOS Sans",
"font_family_jetbrains_mono": "JetBrains Mono",
"font_family_roboto": "Roboto",
"font_family_fantasque_sans_mono": "Fantasque Sans Mono",
"font_family_system_ui": "System Font",
"theme_mode_system": "System",
"theme_mode_light": "Light",

8
src/plugin/components.js
View File

@@ -3,10 +3,6 @@ import { TooltipWrapper } from '../components/ui/tooltip';
import AvatarInfo from '../components/AvatarInfo.vue';
import CountdownTimer from '../components/CountdownTimer.vue';
import DisplayName from '../components/DisplayName.vue';
import InstanceInfo from '../components/InstanceInfo.vue';
import InviteYourself from '../components/InviteYourself.vue';
import LastJoin from '../components/LastJoin.vue';
import Launch from '../components/Launch.vue';
import Location from '../components/Location.vue';
import LocationWorld from '../components/LocationWorld.vue';
import Timer from '../components/Timer.vue';
@@ -14,13 +10,9 @@ import Timer from '../components/Timer.vue';
export function initComponents(app) {
app.component('Location', Location);
app.component('Timer', Timer);
app.component('InstanceInfo', InstanceInfo);
app.component('LastJoin', LastJoin);
app.component('CountdownTimer', CountdownTimer);
app.component('AvatarInfo', AvatarInfo);
app.component('DisplayName', DisplayName);
app.component('InviteYourself', InviteYourself);
app.component('Launch', Launch);
app.component('LocationWorld', LocationWorld);
app.component('TooltipWrapper', TooltipWrapper);
}

15
src/shared/constants/fonts.js
View File

@@ -25,6 +25,21 @@ const APP_FONT_CONFIG = Object.freeze({
cssImport:
"@import url('https://fonts.cdnfonts.com/css/harmonyos-sans');"
},
jetbrains_mono: {
cssName: "'JetBrains Mono'",
cssImport:
"@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');"
},
roboto: {
cssName: "'Roboto'",
cssImport:
"@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');"
},
fantasque_sans_mono: {
cssName: "'Fantasque Sans Mono'",
cssImport:
"@import url('https://fonts.cdnfonts.com/css/fantasque-sans-mono');"
},
system_ui: {
cssName: 'system-ui',
link: null

9
src/shared/constants/themes.js
View File

@@ -10,11 +10,12 @@ export const THEME_CONFIG = {
dark: {
isDark: true,
name: 'Dark'
},
midnight: {
isDark: true,
name: 'Midnight',
file: 'midnight.css'
}
// midnight: {
// isDark: true,
// name: 'Midnight'
// }
};
export const THEME_COLORS = [

29
src/shared/utils/base/ui.js
View File

@@ -17,6 +17,7 @@ import configRepository from '../../../service/config.js';
const THEME_COLOR_STORAGE_KEY = 'VRCX_themeColor';
const THEME_COLOR_STYLE_ID = 'app-theme-color-style';
const THEME_MODE_STYLE_ID = 'app-theme-mode-style';
const DEFAULT_THEME_COLOR_KEY = 'default';
const APP_FONT_LINK_ATTR = 'data-app-font';
@@ -139,6 +140,33 @@ function applyThemeFonts(themeKey, fontLinks = []) {
});
}
function applyThemeModeStyle(themeMode) {
const themeConfig = THEME_CONFIG[themeMode];
const themeFile = themeConfig?.file;
let styleEl = document.getElementById(THEME_MODE_STYLE_ID);
if (!themeFile) {
styleEl?.remove();
return;
}
const themeHref = new URL(
`../../../styles/themes/${themeFile}`,
import.meta.url
).href;
if (!styleEl) {
styleEl = document.createElement('link');
styleEl.id = THEME_MODE_STYLE_ID;
styleEl.rel = 'stylesheet';
document.head.appendChild(styleEl);
}
if (styleEl.getAttribute('href') !== themeHref) {
styleEl.setAttribute('href', themeHref);
}
}
function resolveAppFontFamily(fontKey) {
const normalized = String(fontKey || '')
.trim()
@@ -209,6 +237,7 @@ function changeAppThemeStyle(themeMode) {
}
applyThemeFonts(themeMode, themeConfig.fontLinks);
applyThemeModeStyle(themeMode);
document.documentElement.setAttribute('data-theme', themeMode);

41
src/stores/settings/appearance.js
View File

@@ -13,7 +13,8 @@ import {
} from '../../shared/utils/base/ui';
import {
APP_FONT_DEFAULT_KEY,
APP_FONT_FAMILIES
APP_FONT_FAMILIES,
THEME_CONFIG
} from '../../shared/constants';
import { database } from '../../service/database';
import { getNameColour } from '../../shared/utils';
@@ -51,6 +52,7 @@ export const useAppearanceSettingsStore = defineStore(
const appLanguage = ref('en');
const themeMode = ref('');
const isDarkMode = ref(false);
const lastDarkTheme = ref('dark');
const appFontFamily = ref('inter');
const displayVRCPlusIconsAsAvatar = ref(false);
const hideNicknames = ref(false);
@@ -107,9 +109,20 @@ export const useAppearanceSettingsStore = defineStore(
return Math.min(max, Math.max(min, n));
};
const resolveLastDarkTheme = (value, fallback = 'dark') => {
const normalized = String(value || '').trim();
return THEME_CONFIG[normalized]?.isDark === true
? normalized
: fallback;
};
async function initAppearanceSettings() {
const { initThemeMode, isDarkMode: initDarkMode } =
await getThemeMode(configRepository);
const fallbackDarkTheme =
THEME_CONFIG[initThemeMode]?.isDark === true
? initThemeMode
: 'dark';
const [
appLanguageConfig,
displayVRCPlusIconsAsAvatarConfig,
@@ -137,7 +150,8 @@ export const useAppearanceSettingsStore = defineStore(
trustColorConfig,
notificationIconDotConfig,
navIsCollapsedConfig,
appFontFamilyConfig
appFontFamilyConfig,
lastDarkThemeConfig
] = await Promise.all([
configRepository.getString('VRCX_appLanguage'),
configRepository.getBool('displayVRCPlusIconsAsAvatar', true),
@@ -196,6 +210,10 @@ export const useAppearanceSettingsStore = defineStore(
configRepository.getString(
'VRCX_fontFamily',
APP_FONT_DEFAULT_KEY
),
configRepository.getString(
'VRCX_lastDarkTheme',
fallbackDarkTheme
)
]);
@@ -216,6 +234,10 @@ export const useAppearanceSettingsStore = defineStore(
themeMode.value = initThemeMode;
isDarkMode.value = initDarkMode;
lastDarkTheme.value = resolveLastDarkTheme(
lastDarkThemeConfig,
fallbackDarkTheme
);
appFontFamily.value = normalizeAppFontFamily(appFontFamilyConfig);
applyAppFontFamily(appFontFamily.value);
@@ -463,12 +485,24 @@ export const useAppearanceSettingsStore = defineStore(
function setThemeMode(mode) {
themeMode.value = mode;
configRepository.setString('VRCX_ThemeMode', mode);
if (THEME_CONFIG[mode]?.isDark === true) {
const normalized = resolveLastDarkTheme(mode);
lastDarkTheme.value = normalized;
configRepository.setString('VRCX_lastDarkTheme', normalized);
}
const { isDark } = changeAppThemeStyle(mode);
isDarkMode.value = isDark;
vrStore.updateVRConfigVars();
updateTrustColor(undefined, undefined);
}
function toggleThemeMode() {
const nextMode = isDarkMode.value
? 'light'
: resolveLastDarkTheme(lastDarkTheme.value);
setThemeMode(nextMode);
}
function normalizeAppFontFamily(value) {
return APP_FONT_FAMILIES.includes(value)
? value
@@ -914,7 +948,8 @@ export const useAppearanceSettingsStore = defineStore(
setNavCollapsed,
toggleNavCollapsed,
setAppFontFamily,
setThemeMode
setThemeMode,
toggleThemeMode
};
}
);

3
src/styles/globals.css
View File

@@ -84,7 +84,8 @@
}
.dark {
--background: oklch(0.145 0 0);
/* --background: oklch(0.145 0 0); */
--background: oklch(0.205 0 0);
--foreground: oklch(0.985 0 0);
--card: oklch(0.145 0 0);
--card-foreground: oklch(0.985 0 0);

35
src/styles/themes/midnight.css Normal file
View File

@@ -0,0 +1,35 @@
.dark {
--background: oklch(0.145 0 0);
--foreground: oklch(0.985 0 0);
--card: oklch(0.145 0 0);
--card-foreground: oklch(0.985 0 0);
--popover: oklch(0.145 0 0);
--popover-foreground: oklch(0.985 0 0);
--primary: oklch(0.985 0 0);
--primary-foreground: oklch(0.205 0 0);
--secondary: oklch(0.269 0 0);
--secondary-foreground: oklch(0.985 0 0);
--muted: oklch(0.269 0 0);
--muted-foreground: oklch(0.708 0 0);
--accent: oklch(0.269 0 0);
--accent-foreground: oklch(0.985 0 0);
--destructive: oklch(0.396 0.141 25.723);
--destructive-foreground: oklch(0.637 0.237 25.331);
--border: oklch(0.269 0 0);
--input: oklch(0.269 0 0);
--ring: oklch(0.439 0 0);
--chart-1: oklch(0.488 0.243 264.376);
--chart-2: oklch(0.696 0.17 162.48);
--chart-3: oklch(0.769 0.188 70.08);
--chart-4: oklch(0.627 0.265 303.9);
--chart-5: oklch(0.645 0.246 16.439);
--sidebar: oklch(0.145 0 0);
/* --sidebar: oklch(0.205 0 0); */
--sidebar-foreground: oklch(0.985 0 0);
--sidebar-primary: oklch(0.488 0.243 264.376);
--sidebar-primary-foreground: oklch(0.985 0 0);
--sidebar-accent: oklch(0.269 0 0);
--sidebar-accent-foreground: oklch(0.985 0 0);
--sidebar-border: oklch(0.269 0 0);
--sidebar-ring: oklch(0.439 0 0);
}

2
src/views/Feed/columns.jsx
View File

@@ -280,7 +280,7 @@ export const columns = [
const original = row.original;
return (
<span
class="x-link pr-2.5"
class="x-link pr-2.5 cursor-pointer"
onClick={() => showUserDialog(original.userId)}
>
{original.displayName}

1
src/views/FriendList/columns.jsx
View File

@@ -115,7 +115,6 @@ export const createColumns = ({
header: () => null,
size: 55,
enableSorting: false,
enableResizing: false,
meta: {
thClass: 'p-0',
tdClass: 'p-0'

1
src/views/FriendLog/columns.jsx
View File

@@ -118,7 +118,6 @@ export const createColumns = ({ onDelete, onDeletePrompt }) => {
meta: {
class: 'w-[80px] max-w-[80px] text-right'
},
enableResizing: false,
size: 80,
maxSize: 80,
header: () => t('table.friendLog.action'),

1
src/views/GameLog/columns.jsx
View File

@@ -241,7 +241,6 @@ export const createColumns = ({ getCreatedAt, onDelete, onDeletePrompt }) => {
meta: {
class: 'text-right'
},
enableResizing: false,
size: 90,
minSize: 90,
maxSize: 90,

1
src/views/Moderation/columns.jsx
View File

@@ -124,7 +124,6 @@ export const createColumns = ({ onDelete, onDeletePrompt }) => {
minSize: 80,
maxSize: 80,
enableSorting: false,
enableResizing: false,
header: () => t('table.moderation.action'),
cell: ({ row }) => {
const original = row.original;

2
src/views/Notifications/columns.jsx
View File

@@ -389,7 +389,6 @@ export const createColumns = ({
},
{
accessorKey: 'photo',
enableResizing: false,
size: 80,
header: () => t('table.notification.photo'),
cell: ({ row }) => {
@@ -502,7 +501,6 @@ export const createColumns = ({
size: 120,
minSize: 120,
maxSize: 120,
enableResizing: false,
header: () => t('table.notification.action'),
enableSorting: false,
cell: ({ row }) => {

13
src/views/Settings/components/Tabs/AppearanceTab.vue
View File

@@ -21,12 +21,12 @@
<span class="name">{{ t('view.settings.appearance.appearance.theme_mode') }}</span>
<Select :model-value="themeMode" @update:modelValue="setThemeMode">
<SelectTrigger size="sm">
<SelectValue :placeholder="t(`view.settings.appearance.appearance.theme_mode_${themeMode}`)" />
<SelectValue :placeholder="themeDisplayName(themeMode)" />
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectItem v-for="(config, themeKey) in THEME_CONFIG" :key="themeKey" :value="themeKey">
{{ t(`view.settings.appearance.appearance.theme_mode_${themeKey}`) }}
{{ themeDisplayName(themeKey) }}
</SelectItem>
</SelectGroup>
</SelectContent>
@@ -473,6 +473,15 @@
const { t } = useI18n();
const themeDisplayName = (themeKey) => {
const i18nKey = `view.settings.appearance.appearance.theme_mode_${themeKey}`;
const translated = t(i18nKey);
if (translated !== i18nKey) {
return translated;
}
return THEME_CONFIG[themeKey]?.name ?? themeKey;
};
const appearanceSettingsStore = useAppearanceSettingsStore();
const { saveOpenVROption, updateVRConfigVars } = useVrStore();