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

ui improve

Browse Source
This commit is contained in:
pa
2026-01-04 12:12:16 +09:00
committed by Natsumi
parent 00745b54f1
commit 5de3f82673
23 changed files with 402 additions and 414 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/DataTable.vue
View File

@@ -188,7 +188,6 @@
<style scoped>
.data-table-wrapper {
margin: 0 3px;
font-feature-settings:
'tnum' 1,
'lnum' 1;

14
src/components/Location.vue
View File

@@ -14,11 +14,7 @@
@click="handleShowWorldDialog">
<el-icon :class="['is-loading']" class="mr-1" v-if="isTraveling"><Loading /></el-icon>
<span class="min-w-0 truncate">{{ text }}</span>
<span
v-if="groupName"
class="ml-0.5 whitespace-nowrap"
:class="{ 'x-link': link }"
@click.stop="handleShowGroupDialog">
<span v-if="groupName" class="ml-0.5 whitespace-nowrap x-link" @click.stop="handleShowGroupDialog">
({{ groupName }})
</span>
</div>
@@ -229,7 +225,7 @@
function handleShowGroupDialog() {
let location = currentInstanceId();
if (!location || !props.link) {
if (!location) {
return;
}
const L = parseLocation(location);
@@ -244,10 +240,4 @@
.transparent {
color: transparent;
}
:global(html.dark .x-location),
:global(:root.dark .x-location),
:global(:root[data-theme='dark'] .x-location) {
color: var(--color-zinc-300);
}
</style>

6
src/components/LocationWorld.vue
View File

@@ -134,10 +134,4 @@
.inline-block {
display: inline-block;
}
:global(html.dark .x-location-world),
:global(:root.dark .x-location-world),
:global(:root[data-theme='dark'] .x-location-world) {
color: var(--color-zinc-100);
}
</style>

151
src/components/NavMenu.vue
View File

@@ -131,7 +131,7 @@
placement="right"
trigger="click"
popper-style="padding:4px;border-radius:8px;"
:offset="-10"
:offset="6"
:show-arrow="false"
:width="200"
:hide-after="0">
@@ -158,7 +158,9 @@
placement="right-start"
trigger="hover"
popper-style="padding:4px;border-radius:8px;"
:width="200">
:offset="8"
:width="200"
:hide-after="0">
<div class="nav-menu-theme">
<button
v-for="theme in themes"
@@ -170,6 +172,62 @@
<span class="nav-menu-theme__label">{{ themeDisplayName(theme) }}</span>
<span v-if="themeMode === theme" class="nav-menu-theme__check">✓</span>
</button>
<el-divider></el-divider>
<el-popover
v-model:visible="themeColorMenuVisible"
placement="right-start"
trigger="hover"
popper-style="padding:4px;border-radius:8px;"
:offset="8"
:width="200"
:show-arrow="false"
:hide-after="0"
:teleported="false">
<div class="nav-menu-theme nav-menu-theme--colors">
<button
v-for="color in colorFamilies"
:key="color.name"
type="button"
class="nav-menu-theme__item"
:class="{ 'is-active': currentPrimary === color.base }"
:disabled="isApplyingPrimaryColor"
@click="handleThemeColorSelect(color)">
<span class="nav-menu-theme__label nav-menu-theme__label--swatch">
<span
class="nav-menu-theme__swatch"
:style="{ backgroundColor: color.base }"></span>
<span class="nav-menu-theme__label-text">{{ color.name }}</span>
</span>
<span v-if="currentPrimary === color.base" class="nav-menu-theme__check">
✓
</span>
</button>
<el-divider></el-divider>
<div class="nav-menu-theme__custom">
<span class="nav-menu-theme__custom-label">{{
t('view.settings.appearance.theme_color.header')
}}</span>
<el-color-picker
:model-value="currentPrimary"
size="small"
:disabled="isApplyingPrimaryColor"
:teleported="false"
@change="handleCustomThemeColorChange" />
</div>
</div>
<template #reference>
<button type="button" class="nav-menu-theme__item" @click.prevent>
<span class="nav-menu-theme__label">{{
t('view.settings.appearance.theme_color.header')
}}</span>
<span class="nav-menu-settings__arrow">›</span>
</button>
</template>
</el-popover>
</div>
<template #reference>
<button type="button" class="nav-menu-settings__item" @click.prevent>
@@ -230,12 +288,12 @@
useAuthStore,
useSearchStore,
useUiStore,
useUserStore,
useVRCXUpdaterStore
} from '../stores';
import { THEME_CONFIG, links, navDefinitions } from '../shared/constants';
import { getSentry } from '../plugin';
import { openExternalLink } from '../shared/utils';
import { useThemePrimaryColor } from '../composables/useElementTheme';
import configRepository from '../service/config';
@@ -287,12 +345,9 @@
const { logout } = useAuthStore();
const appearanceSettingsStore = useAppearanceSettingsStore();
const { themeMode, isNavCollapsed: isCollapsed } = storeToRefs(appearanceSettingsStore);
const userStore = useUserStore();
const { currentUser } = storeToRefs(userStore);
const { showUserDialog } = userStore;
const settingsMenuVisible = ref(false);
const themeMenuVisible = ref(false);
const themeColorMenuVisible = ref(false);
const supportMenuVisible = ref(false);
const navMenuRef = ref(null);
const navLayout = ref([]);
@@ -374,6 +429,15 @@
const themes = computed(() => Object.keys(THEME_CONFIG));
const {
currentPrimary,
isApplying: isApplyingPrimaryColor,
applyCustomPrimaryColor,
initPrimaryColor,
colorFamilies,
selectPaletteColor
} = useThemePrimaryColor();
watch(
() => activeMenuIndex.value,
(value) => {
@@ -404,10 +468,6 @@
const generateFolderId = () => `nav-folder-${dayjs().toISOString()}-${Math.random().toString().slice(2, 4)}`;
const showCurrentUserDialog = () => {
showUserDialog(currentUser.value?.id);
};
const sanitizeLayout = (layout) => {
const usedKeys = new Set();
const normalized = [];
@@ -485,6 +545,27 @@
appearanceSettingsStore.saveThemeMode(theme);
};
const handleCustomThemeColorChange = async (color) => {
if (!color) {
await initPrimaryColor();
themeColorMenuVisible.value = false;
themeMenuVisible.value = false;
settingsMenuVisible.value = false;
return;
}
await applyCustomPrimaryColor(color);
themeColorMenuVisible.value = false;
themeMenuVisible.value = false;
settingsMenuVisible.value = false;
};
const handleThemeColorSelect = async (colorFamily) => {
await selectPaletteColor(colorFamily);
themeColorMenuVisible.value = false;
themeMenuVisible.value = false;
settingsMenuVisible.value = false;
};
const openGithub = () => {
openExternalLink('https://github.com/vrcx-team/VRCX');
};
@@ -597,6 +678,7 @@
settingsMenuVisible.value = false;
supportMenuVisible.value = false;
themeMenuVisible.value = false;
themeColorMenuVisible.value = false;
};
const triggerNavAction = (entry, navIndex = entry?.index) => {
@@ -643,6 +725,7 @@
supportMenuVisible.value = false;
} else {
themeMenuVisible.value = false;
themeColorMenuVisible.value = false;
}
});
@@ -699,6 +782,7 @@
};
onMounted(async () => {
await initPrimaryColor();
await loadNavMenuConfig();
if (!NIGHTLY || !sentryErrorReporting.value) return;
@@ -981,5 +1065,50 @@
.nav-menu-theme__item.is-active {
background-color: var(--el-menu-hover-bg-color);
}
.nav-menu-theme__label--swatch {
display: inline-flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.nav-menu-theme__label-text {
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-transform: capitalize;
}
.nav-menu-theme__swatch {
inline-size: 14px;
block-size: 14px;
border-radius: 4px;
border: 1px solid var(--el-border-color-lighter);
flex: none;
}
.nav-menu-theme__custom {
display: flex;
align-items: center;
justify-content: space-between;
padding: 6px 10px;
border-radius: 6px;
}
.nav-menu-theme__custom-label {
font-size: 13px;
color: var(--el-text-color-regular);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-right: 10px;
}
}
.nav-menu-theme--colors {
max-height: 360px;
overflow: hidden auto;
}
</style>

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

@@ -5,7 +5,7 @@
v-model="avatarDialog.visible"
:show-close="false"
top="10vh"
width="930px">
width="940px">
<div v-loading="avatarDialog.loading">
<div style="display: flex">
<img

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

@@ -4,7 +4,7 @@
v-model="groupDialog.visible"
:show-close="false"
top="10vh"
width="930px"
width="940px"
class="x-dialog x-group-dialog">
<div v-loading="groupDialog.loading" class="group-body">
<div style="display: flex">

2
src/components/dialogs/PreviousInstancesDialog/PreviousInstancesInfoDialog.vue
View File

@@ -16,7 +16,7 @@
clearable></el-input>
</div>
<DataTable :loading="loading" v-bind="dataTable" style="margin-top: 10px">
<el-table-column :label="t('table.previous_instances.date')" prop="created_at" sortable width="110">
<el-table-column :label="t('table.previous_instances.date')" prop="created_at" sortable width="130">
<template #default="scope">
<el-tooltip placement="left">
<template #content>

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

@@ -5,7 +5,7 @@
v-model="userDialog.visible"
:show-close="false"
top="10vh"
width="930px">
width="940px">
<div v-loading="userDialog.loading">
<UserSummaryHeader
:get-user-state-text="getUserStateText"

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

@@ -5,7 +5,7 @@
v-model="isDialogVisible"
top="10vh"
:show-close="false"
width="930px">
width="940px">
<div v-loading="worldDialog.loading">
<div style="display: flex">
<img