mirror of
https://github.com/MrUnknownDE/VRCX.git
synced 2026-04-18 22:33:50 +02:00
UI Refresh
This commit is contained in:
pa
Natsumi
13
src/shared/constants/accessType.js
Normal file
13
src/shared/constants/accessType.js
Normal file
@@ -0,0 +1,13 @@
|
||||
const accessTypeLocaleKeyMap = {
|
||||
public: 'dialog.new_instance.access_type_public',
|
||||
group: 'dialog.new_instance.access_type_group',
|
||||
'friends+': 'dialog.new_instance.access_type_friend_plus',
|
||||
friends: 'dialog.new_instance.access_type_friend',
|
||||
'invite+': 'dialog.new_instance.access_type_invite_plus',
|
||||
invite: 'dialog.new_instance.access_type_invite',
|
||||
groupPublic: 'dialog.new_instance.group_access_type_public',
|
||||
groupPlus: 'dialog.new_instance.group_access_type_plus',
|
||||
groupMembers: 'dialog.new_instance.group_access_type_members'
|
||||
};
|
||||
|
||||
export { accessTypeLocaleKeyMap };
|
||||
@@ -10,3 +10,4 @@ export * from './moderation';
|
||||
export * from './themes';
|
||||
export * from './link';
|
||||
export * from './ui';
|
||||
export * from './accessType';
|
||||
|
||||
@@ -1,52 +1,69 @@
|
||||
import amoled from '../../assets/scss/themes/theme.amoled.scss?url';
|
||||
import dark from '../../assets/scss/themes/theme.dark.scss?url';
|
||||
import darkblue from '../../assets/scss/themes/theme.darkblue.scss?url';
|
||||
import material3 from '../../assets/scss/themes/theme.material3.scss?url';
|
||||
import appCss from '../../app.css?url';
|
||||
// import appLegacy from '../../assets/scss/themes/app_legacy.scss?url';
|
||||
// import material3 from '../../assets/scss/themes/theme.material3.scss?url';
|
||||
|
||||
export const THEME_CONFIG = {
|
||||
system: {
|
||||
cssFile: '',
|
||||
cssFiles: [appCss],
|
||||
isDark: 'system',
|
||||
name: 'System'
|
||||
},
|
||||
light: {
|
||||
cssFile: '',
|
||||
cssFiles: [appCss],
|
||||
isDark: false,
|
||||
useDarkClass: false,
|
||||
name: 'Light'
|
||||
},
|
||||
dark: { cssFile: dark, isDark: true, name: 'Dark' },
|
||||
darkblue: {
|
||||
cssFile: darkblue,
|
||||
dark: {
|
||||
cssFiles: [appCss],
|
||||
isDark: true,
|
||||
name: 'Dark Blue'
|
||||
},
|
||||
amoled: {
|
||||
cssFile: amoled,
|
||||
isDark: true,
|
||||
name: 'Amoled'
|
||||
},
|
||||
// darkvanillaold: {
|
||||
// cssFile: darkvanillaold,
|
||||
useDarkClass: true,
|
||||
name: 'Dark'
|
||||
}
|
||||
// darkold: {
|
||||
// cssFiles: [appLegacy, dark],
|
||||
// isDark: true,
|
||||
// useDarkClass: false,
|
||||
// name: 'Dark (Old)'
|
||||
// },
|
||||
// darkblue: {
|
||||
// cssFiles: [appLegacy, darkblue],
|
||||
// isDark: true,
|
||||
// useDarkClass: false,
|
||||
// name: 'Dark Blue'
|
||||
// },
|
||||
// amoled: {
|
||||
// cssFiles: [appLegacy, amoled],
|
||||
// isDark: true,
|
||||
// useDarkClass: false,
|
||||
// name: 'Amoled'
|
||||
// },
|
||||
// darkvanillaold: {
|
||||
// cssFiles: [appLegacy, darkvanillaold],
|
||||
// isDark: true,
|
||||
// useDarkClass: false,
|
||||
// name: 'Dark Vanilla Old'
|
||||
// },
|
||||
// darkvanilla: {
|
||||
// cssFile: darkvanilla,
|
||||
// cssFiles: [appLegacy, darkvanilla],
|
||||
// isDark: true,
|
||||
// useDarkClass: false,
|
||||
// name: 'Dark Vanilla'
|
||||
// },
|
||||
// pink: {
|
||||
// cssFile: pink,
|
||||
// cssFiles: [appLegacy, pink],
|
||||
// isDark: true,
|
||||
// useDarkClass: false,
|
||||
// name: 'Pink'
|
||||
// },
|
||||
material3: {
|
||||
cssFile: material3,
|
||||
isDark: true,
|
||||
name: 'Material 3',
|
||||
fontLinks: [
|
||||
'https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;600&family=Noto+Sans+TC:wght@300;400;500&family=Noto+Sans+SC:wght@300;400;500&family=Noto+Sans+JP:wght@300;400;500&family=Roboto&display=swap',
|
||||
'https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200'
|
||||
]
|
||||
}
|
||||
// material3: {
|
||||
// cssFiles: [appLegacy, material3],
|
||||
// isDark: true,
|
||||
// useDarkClass: false,
|
||||
// name: 'Material 3',
|
||||
// fontLinks: [
|
||||
// 'https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;600&family=Noto+Sans+TC:wght@300;400;500&family=Noto+Sans+SC:wght@300;400;500&family=Noto+Sans+JP:wght@300;400;500&family=Roboto&display=swap',
|
||||
// 'https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200'
|
||||
// ]
|
||||
// }
|
||||
};
|
||||
|
||||
@@ -96,6 +96,13 @@ const navDefinitions = [
|
||||
tooltip: 'nav_tooltip.tools',
|
||||
labelKey: 'nav_tooltip.tools',
|
||||
routeName: 'tools'
|
||||
},
|
||||
{
|
||||
key: 'direct-access',
|
||||
icon: 'ri-compass-3-line',
|
||||
tooltip: 'prompt.direct_access_omni.header',
|
||||
labelKey: 'prompt.direct_access_omni.header',
|
||||
action: 'direct-access'
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
@@ -48,6 +48,25 @@ function applyThemeFonts(themeKey, fontLinks = []) {
|
||||
});
|
||||
}
|
||||
|
||||
function ensureStylesheetLink(id) {
|
||||
const linkEl = /** @type {HTMLLinkElement | null} */ (
|
||||
document.getElementById(id)
|
||||
);
|
||||
if (!linkEl) {
|
||||
const created = document.createElement('link');
|
||||
created.setAttribute('id', id);
|
||||
created.rel = 'stylesheet';
|
||||
document.head.appendChild(created);
|
||||
return created;
|
||||
}
|
||||
return linkEl;
|
||||
}
|
||||
|
||||
function removeStylesheetLink(id) {
|
||||
const linkEl = document.getElementById(id);
|
||||
linkEl?.remove();
|
||||
}
|
||||
|
||||
function changeAppThemeStyle(themeMode) {
|
||||
if (themeMode === 'system') {
|
||||
themeMode = systemIsDarkMode() ? 'dark' : 'light';
|
||||
@@ -61,27 +80,35 @@ function changeAppThemeStyle(themeMode) {
|
||||
themeConfig = THEME_CONFIG[themeMode];
|
||||
}
|
||||
|
||||
let filePathPrefix = 'file://vrcx/';
|
||||
if (LINUX) {
|
||||
filePathPrefix = './';
|
||||
}
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
filePathPrefix = 'http://localhost:9000/';
|
||||
console.log('Using development file path prefix:', filePathPrefix);
|
||||
const cssFiles = Array.isArray(themeConfig.cssFiles)
|
||||
? themeConfig.cssFiles.filter(Boolean)
|
||||
: themeConfig.cssFile
|
||||
? [themeConfig.cssFile]
|
||||
: [];
|
||||
|
||||
if (cssFiles.length > 0) {
|
||||
const $appThemeStyle = ensureStylesheetLink('app-theme-style');
|
||||
$appThemeStyle.href = cssFiles[0];
|
||||
} else {
|
||||
removeStylesheetLink('app-theme-style');
|
||||
}
|
||||
|
||||
let $appThemeStyle = document.getElementById('app-theme-style');
|
||||
if (!$appThemeStyle) {
|
||||
$appThemeStyle = document.createElement('link');
|
||||
$appThemeStyle.setAttribute('id', 'app-theme-style');
|
||||
$appThemeStyle.rel = 'stylesheet';
|
||||
document.head.appendChild($appThemeStyle);
|
||||
if (cssFiles.length > 1) {
|
||||
const $appThemeOverlayStyle = ensureStylesheetLink(
|
||||
'app-theme-overlay-style'
|
||||
);
|
||||
$appThemeOverlayStyle.href = cssFiles[1];
|
||||
} else {
|
||||
removeStylesheetLink('app-theme-overlay-style');
|
||||
}
|
||||
$appThemeStyle.href = themeConfig.cssFile ? themeConfig.cssFile : '';
|
||||
|
||||
applyThemeFonts(themeMode, themeConfig.fontLinks);
|
||||
|
||||
if (themeConfig.isDark) {
|
||||
const shouldUseDarkClass =
|
||||
typeof themeConfig.useDarkClass === 'boolean'
|
||||
? themeConfig.useDarkClass
|
||||
: Boolean(themeConfig.isDark);
|
||||
if (shouldUseDarkClass) {
|
||||
document.documentElement.classList.add('dark');
|
||||
} else {
|
||||
document.documentElement.classList.remove('dark');
|
||||
@@ -258,19 +285,19 @@ function setLoginContainerStyle(isDarkMode) {
|
||||
loginContainerStyle.id = 'login-container-style';
|
||||
loginContainerStyle.type = 'text/css';
|
||||
|
||||
const backgroundColor = isDarkMode ? '#101010' : '#ffffff';
|
||||
const inputBackgroundColor = isDarkMode ? '#333333' : '#ffffff';
|
||||
const inputBorder = isDarkMode ? '1px solid #3b3b3b' : '1px solid #DCDFE6';
|
||||
const backgroundFallback = isDarkMode ? '#101010' : '#ffffff';
|
||||
const inputBackgroundFallback = isDarkMode ? '#1f1f1f' : '#ffffff';
|
||||
const borderFallback = isDarkMode ? '#3b3b3b' : '#DCDFE6';
|
||||
|
||||
loginContainerStyle.innerHTML = `
|
||||
.x-login-container {
|
||||
background-color: ${backgroundColor} !important;
|
||||
background-color: var(--el-bg-color-page, ${backgroundFallback}) !important;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.x-login-container .el-input__wrapper {
|
||||
background-color: ${inputBackgroundColor} !important;
|
||||
border: ${inputBorder} !important;
|
||||
background-color: var(--el-bg-color, ${inputBackgroundFallback}) !important;
|
||||
border: 1px solid var(--el-border-color, ${borderFallback}) !important;
|
||||
transition: background-color 0.3s ease, border-color 0.3s ease;
|
||||
}
|
||||
`;
|
||||
|
||||
Reference in New Issue
Block a user