mirror of
https://github.com/MrUnknownDE/VRCX.git
synced 2026-04-19 14:53:50 +02:00
Upgrade to Vue3 and Element Plus (#1374)
* Update Vue devtools
* upgrade vue pinia element-plus vue-i18n, add vite
* fix: i18n
* global components
* change v-deep
* upgrade vue-lazyload
* data table
* update enlint and safe-dialog
* package.json and vite.config.js
* el-icon
* el-message
* vue 2 -> vue3 migration changes
* $pinia
* dialog
* el-popover slot
* lint
* chore
* slot
* scss
* remote state access
* misc
* jsconfig
* el-button size mini -> small
* :model-value
* ElMessageBox
* datatable
* remove v-lazyload
* template #dropdown
* mini -> small
* css
* byebye hideTooltips
* use sass-embedded
* Update SQLite, remove unneeded libraries
* Fix shift remove local avatar favorites
* Electron arm64
* arm64 support
* bye pug
* f-word vite hah
* misc
* remove safe dialog component
* Add self invite to launch dialog
* Fix errors
* Icons 1
* improve localfavorite loading performance
* improve favorites world item performance
* dialog visibility changes for Element Plus
* clear element plus error
* import performance
* revert App.vue hah
* hah
* Revert "Add self invite to launch dialog"
This reverts commit 4801cfad58.
* Toggle self invite/open in-game
* Self invite on launch dialog
* el-button icon
* el-icon
* fix user dialog tab switching logic
* fix PlayerList
* Formatting changes
* More icons
* Fix friend log table
* loading margin
* fix markdown
* fix world dialog tab switching issue
* Fixes and formatting
* fix: global i18n.t export
* fix favorites world tab not working
* Create instance, displayName
* Remove group members sort by userId
* Fix loading dialog tabs on swtich
* Star
* charts console.warn
* wip: fix charts
* wip: fix charts
* wip: charts composables
* fix favorite item tooltip warning
* Fixes and formatting
* Clean up image dialogs
* Remove unused method
* Fix platform/size border
* Fix platform/size border
* $vr
* fix friendExportDialogVisible binding
* ElMessageBox and Settings
* Login formatting
* Rename VR overlay query
* Fix image popover and userdialog badges
* Formatting
* Big buttons
* Fixes, update Cef
* Fix gameLog table nav buttons jumping around while using nav buttons
* Fix z-index
* vr overlay
* vite input add theme
* defineAsyncComponent
* ISO 639-1
* fix i18n
* clean t
* Formatting, fix calendar, rotate arrows
* Show user status when user is offline
* Fix VR overlay
* fix theme and clean up
* split InstanceActivity
* tweak
* Fix VR overlay formatting
* fix scss var
* AppDebug hahahaha
* Years
* remove reactive
* improve perf
* state hah…
* fix user rendering poblems when user object is not yet loaded
* improve perf
* Update avatar/world image uploader, licenses, remove previous images dialog (old images are now deleted)
* improve perf 1
* Suppress stray errors
* fix traveling location display issue
* Fix empty instance creator
* improve friend list refresh performance
* fix main charts
* fix chart
* Fix darkmode
* Fix avatar dialog tags
---------
Co-authored-by: pa <maplenagisa@gmail.com>
This commit is contained in:
Natsumi
GitHub
@@ -16,6 +16,10 @@ function timeToText(sec, isNeedSeconds = false) {
|
||||
if (n < 0) {
|
||||
n = -n;
|
||||
}
|
||||
if (n >= 31536000) {
|
||||
arr.push(`${Math.floor(n / 31536000)}y`);
|
||||
n %= 31536000;
|
||||
}
|
||||
if (n >= 86400) {
|
||||
arr.push(`${Math.floor(n / 86400)}d`);
|
||||
n %= 86400;
|
||||
|
||||
@@ -23,13 +23,24 @@ function changeAppDarkStyle(isDark) {
|
||||
}
|
||||
|
||||
function changeAppThemeStyle(themeMode) {
|
||||
if (themeMode === 'system') {
|
||||
themeMode = systemIsDarkMode() ? 'dark' : 'light';
|
||||
}
|
||||
|
||||
const themeConfig = THEME_CONFIG[themeMode];
|
||||
if (!themeConfig) return;
|
||||
if (!themeConfig) {
|
||||
console.error('Invalid theme mode:', themeMode);
|
||||
return;
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
let $appThemeStyle = document.getElementById('app-theme-style');
|
||||
if (!$appThemeStyle) {
|
||||
@@ -38,63 +49,31 @@ function changeAppThemeStyle(themeMode) {
|
||||
$appThemeStyle.rel = 'stylesheet';
|
||||
document.head.appendChild($appThemeStyle);
|
||||
}
|
||||
$appThemeStyle.href = themeConfig.cssFile
|
||||
? `${filePathPrefix}${themeConfig.cssFile}`
|
||||
: '';
|
||||
$appThemeStyle.href = themeConfig.cssFile ? themeConfig.cssFile : '';
|
||||
|
||||
let $appThemeDarkStyle = document.getElementById('app-theme-dark-style');
|
||||
const darkThemeCssPath = `${filePathPrefix}theme.dark.css`;
|
||||
const shouldApplyDarkBase =
|
||||
themeConfig.requiresDarkBase ||
|
||||
(themeMode === 'system' && systemIsDarkMode());
|
||||
|
||||
if (shouldApplyDarkBase) {
|
||||
if (!$appThemeDarkStyle) {
|
||||
$appThemeDarkStyle = document.createElement('link');
|
||||
$appThemeDarkStyle.setAttribute('id', 'app-theme-dark-style');
|
||||
$appThemeDarkStyle.rel = 'stylesheet';
|
||||
$appThemeDarkStyle.href = darkThemeCssPath;
|
||||
document.head.insertBefore($appThemeDarkStyle, $appThemeStyle);
|
||||
} else if ($appThemeDarkStyle.href !== darkThemeCssPath) {
|
||||
$appThemeDarkStyle.href = darkThemeCssPath;
|
||||
}
|
||||
if (themeConfig.isDark) {
|
||||
document.documentElement.classList.add('dark');
|
||||
} else {
|
||||
$appThemeDarkStyle && $appThemeDarkStyle.remove();
|
||||
document.documentElement.classList.remove('dark');
|
||||
}
|
||||
changeAppDarkStyle(themeConfig.isDark);
|
||||
|
||||
let isDarkForExternalApp = themeConfig.isDark;
|
||||
if (isDarkForExternalApp === 'system') {
|
||||
isDarkForExternalApp = systemIsDarkMode();
|
||||
}
|
||||
changeAppDarkStyle(isDarkForExternalApp);
|
||||
}
|
||||
|
||||
/**
|
||||
* CJK character in Japanese, Korean, Chinese are different
|
||||
* so change font-family order when users change language to display CJK character correctly
|
||||
* @param {string} lang
|
||||
*/
|
||||
function changeCJKFontsOrder(lang) {
|
||||
const otherFonts = window
|
||||
.getComputedStyle(document.body)
|
||||
.fontFamily.split(',')
|
||||
.filter((item) => !item.includes('Noto Sans'))
|
||||
.join(', ');
|
||||
const notoSans = 'Noto Sans';
|
||||
|
||||
const fontFamilies = {
|
||||
ja_JP: ['JP', 'KR', 'TC', 'SC'],
|
||||
ko: ['KR', 'JP', 'TC', 'SC'],
|
||||
zh_TW: ['TC', 'JP', 'KR', 'SC'],
|
||||
zh_CN: ['SC', 'JP', 'KR', 'TC']
|
||||
};
|
||||
|
||||
if (fontFamilies[lang]) {
|
||||
const CJKFamily = fontFamilies[lang]
|
||||
.map((item) => `${notoSans} ${item}`)
|
||||
.join(', ');
|
||||
document.body.style.fontFamily = `${CJKFamily}, ${otherFonts}`;
|
||||
}
|
||||
// let $appThemeDarkStyle = document.getElementById('app-theme-dark-style');
|
||||
// const darkThemeCssPath = `${filePathPrefix}theme.dark.css`;
|
||||
// const shouldApplyDarkBase = themeConfig.isDark;
|
||||
// if (shouldApplyDarkBase) {
|
||||
// if (!$appThemeDarkStyle) {
|
||||
// $appThemeDarkStyle = document.createElement('link');
|
||||
// $appThemeDarkStyle.setAttribute('id', 'app-theme-dark-style');
|
||||
// $appThemeDarkStyle.rel = 'stylesheet';
|
||||
// $appThemeDarkStyle.href = darkThemeCssPath;
|
||||
// document.head.insertBefore($appThemeDarkStyle, $appThemeStyle);
|
||||
// } else if ($appThemeDarkStyle.href !== darkThemeCssPath) {
|
||||
// $appThemeDarkStyle.href = darkThemeCssPath;
|
||||
// }
|
||||
// } else {
|
||||
// $appThemeDarkStyle && $appThemeDarkStyle.remove();
|
||||
// }
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -224,28 +203,28 @@ function HSVtoRGB(h, s, v) {
|
||||
return `#${decColor.toString(16).substr(1)}`;
|
||||
}
|
||||
|
||||
function adjustDialogZ(el) {
|
||||
let z = 0;
|
||||
document.querySelectorAll('.v-modal,.el-dialog__wrapper').forEach((v) => {
|
||||
function getNextDialogIndex() {
|
||||
let z = 2000;
|
||||
document.querySelectorAll('.el-overlay,.el-modal-dialog').forEach((v) => {
|
||||
if (v.style.display === 'none') {
|
||||
return;
|
||||
}
|
||||
const _z = Number(v.style.zIndex) || 0;
|
||||
if (_z && _z > z && v !== el) {
|
||||
if (_z > z) {
|
||||
z = _z;
|
||||
}
|
||||
});
|
||||
if (z) {
|
||||
el.style.zIndex = z + 1;
|
||||
}
|
||||
return z + 1;
|
||||
}
|
||||
|
||||
export {
|
||||
systemIsDarkMode,
|
||||
changeAppDarkStyle,
|
||||
changeAppThemeStyle,
|
||||
changeCJKFontsOrder,
|
||||
updateTrustColorClasses,
|
||||
refreshCustomCss,
|
||||
refreshCustomScript,
|
||||
HueToHex,
|
||||
HSVtoRGB,
|
||||
adjustDialogZ
|
||||
getNextDialogIndex
|
||||
};
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import Noty from 'noty';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { ElMessageBox, ElMessage } from 'element-plus';
|
||||
import { miscRequest } from '../../api';
|
||||
import { $app } from '../../app';
|
||||
import {
|
||||
useAvatarStore,
|
||||
useInstanceStore,
|
||||
@@ -156,14 +156,14 @@ function copyToClipboard(text, message = 'Copied successfully!') {
|
||||
navigator.clipboard
|
||||
.writeText(text)
|
||||
.then(() => {
|
||||
$app.$message({
|
||||
ElMessage({
|
||||
message: message,
|
||||
type: 'success'
|
||||
});
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error('Copy failed:', err);
|
||||
$app.$message.error('Copy failed!');
|
||||
ElMessage.error('Copy failed!');
|
||||
});
|
||||
}
|
||||
|
||||
@@ -387,19 +387,20 @@ function openExternalLink(link) {
|
||||
return;
|
||||
}
|
||||
|
||||
$app.$confirm(`${link}`, 'Open External Link', {
|
||||
ElMessageBox.confirm(`${link}`, 'Open External Link', {
|
||||
distinguishCancelAndClose: true,
|
||||
confirmButtonText: 'Open',
|
||||
cancelButtonText: 'Copy',
|
||||
type: 'info',
|
||||
callback: (action) => {
|
||||
type: 'info'
|
||||
})
|
||||
.then((action) => {
|
||||
if (action === 'confirm') {
|
||||
AppApi.OpenLink(link);
|
||||
} else if (action === 'cancel') {
|
||||
copyLink(link);
|
||||
}
|
||||
}
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -407,7 +408,7 @@ function openExternalLink(link) {
|
||||
* @param {string} text
|
||||
*/
|
||||
function copyLink(text) {
|
||||
$app.$message({
|
||||
ElMessage({
|
||||
message: 'Link copied to clipboard',
|
||||
type: 'success'
|
||||
});
|
||||
@@ -485,26 +486,23 @@ async function getBundleDateSize(ref) {
|
||||
fileSize
|
||||
};
|
||||
|
||||
if (unityPackage.variant === 'standard') {
|
||||
if (avatarDialog.value.id === ref.id) {
|
||||
// update avatar dialog
|
||||
avatarDialog.value.bundleSizes[platform] =
|
||||
bundleSizes[platform];
|
||||
avatarDialog.value.lastUpdated = createdAt;
|
||||
avatarDialog.value.fileAnalysis = buildTreeData(bundleJson);
|
||||
}
|
||||
// update world dialog
|
||||
if (worldDialog.value.id === ref.id) {
|
||||
worldDialog.value.bundleSizes[platform] = bundleSizes[platform];
|
||||
worldDialog.value.lastUpdated = createdAt;
|
||||
worldDialog.value.fileAnalysis = buildTreeData(bundleJson);
|
||||
}
|
||||
// update player list
|
||||
if (currentInstanceLocation.value.worldId === ref.id) {
|
||||
currentInstanceWorld.value.bundleSizes[platform] =
|
||||
bundleSizes[platform];
|
||||
currentInstanceWorld.value.lastUpdated = createdAt;
|
||||
}
|
||||
if (avatarDialog.value.id === ref.id) {
|
||||
// update avatar dialog
|
||||
avatarDialog.value.bundleSizes[platform] = bundleSizes[platform];
|
||||
avatarDialog.value.lastUpdated = createdAt;
|
||||
avatarDialog.value.fileAnalysis = buildTreeData(bundleJson);
|
||||
}
|
||||
// update world dialog
|
||||
if (worldDialog.value.id === ref.id) {
|
||||
worldDialog.value.bundleSizes[platform] = bundleSizes[platform];
|
||||
worldDialog.value.lastUpdated = createdAt;
|
||||
worldDialog.value.fileAnalysis = buildTreeData(bundleJson);
|
||||
}
|
||||
// update player list
|
||||
if (currentInstanceLocation.value.worldId === ref.id) {
|
||||
currentInstanceWorld.value.bundleSizes[platform] =
|
||||
bundleSizes[platform];
|
||||
currentInstanceWorld.value.lastUpdated = createdAt;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user