marcel/better-xcloud
1
0
Fork 0
mirror of https://github.com/redphx/better-xcloud.git synced 2025-06-06 15:47:18 +02:00
Code Issues Packages Projects Releases Wiki Activity

Put back the Reload page button into the global settings UI

Browse Source
This commit is contained in:
redphx 2024-05-17 17:57:41 +07:00
parent aba9340e91
commit 5bd25bf31c
3 changed files with 22 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/assets/css/global-settings.styl
View File

@ -1,17 +1,6 @@
.bx-settings-reload-button-wrapper { .bx-settings-reload-button {
z-index: var(--bx-reload-button-z-index); margin-top: 10px;
position: fixed; height: calc(var(--bx-button-height) * 1.5);
bottom: 0;
left: 0;
right: 0;
text-align: center;
background: #000000cf;
padding: 10px;
button {
max-width: 450px;
margin: 0 !important;
}
} }
.bx-settings-container { .bx-settings-container {

1
src/assets/css/root.styl
View File

@ -20,7 +20,6 @@
--bx-danger-button-disabled-color: #a26c6c; --bx-danger-button-disabled-color: #a26c6c;
--bx-toast-z-index: 9999; --bx-toast-z-index: 9999;
--bx-reload-button-z-index: 9200;
--bx-dialog-z-index: 9101; --bx-dialog-z-index: 9101;
--bx-dialog-overlay-z-index: 9100; --bx-dialog-overlay-z-index: 9100;
--bx-remote-play-popup-z-index: 9090; --bx-remote-play-popup-z-index: 9090;

37
src/modules/ui/global-settings.ts
View File

@ -115,7 +115,7 @@ export function setupSettingsUi() {
const PREF_PREFERRED_REGION = getPreferredServerRegion(); const PREF_PREFERRED_REGION = getPreferredServerRegion();
const PREF_LATEST_VERSION = getPref(PrefKey.LATEST_VERSION); const PREF_LATEST_VERSION = getPref(PrefKey.LATEST_VERSION);
let $reloadBtnWrapper: HTMLButtonElement; let $btnReload: HTMLButtonElement;
// Setup Settings UI // Setup Settings UI
const $container = CE<HTMLElement>('div', { const $container = CE<HTMLElement>('div', {
@ -180,22 +180,21 @@ export function setupSettingsUi() {
} }
const onChange = (e: Event) => { const onChange = (e: Event) => {
if (!$reloadBtnWrapper) {
return;
}
$reloadBtnWrapper.classList.remove('bx-gone');
// Clear PatcherCache; // Clear PatcherCache;
PatcherCache.clear(); PatcherCache.clear();
$btnReload.classList.add('bx-danger');
// Highlight the Settings button in the Header to remind user to reload the page
const $btnHeaderSettings = document.querySelector('.bx-header-settings-button');
$btnHeaderSettings && $btnHeaderSettings.classList.add('bx-danger');
if ((e.target as HTMLElement).id === 'bx_setting_' + PrefKey.BETTER_XCLOUD_LOCALE) { if ((e.target as HTMLElement).id === 'bx_setting_' + PrefKey.BETTER_XCLOUD_LOCALE) {
// Update locale // Update locale
refreshCurrentLocale(); refreshCurrentLocale();
const $btn = $reloadBtnWrapper.firstElementChild! as HTMLButtonElement; $btnReload.textContent = t('settings-reloading');
$btn.textContent = t('settings-reloading'); $btnReload.click();
$btn.click();
} }
}; };
@ -274,7 +273,7 @@ export function setupSettingsUi() {
$inpCustomUserAgent.readOnly = !isCustom; $inpCustomUserAgent.readOnly = !isCustom;
$inpCustomUserAgent.disabled = !isCustom; $inpCustomUserAgent.disabled = !isCustom;
onChange(e); !(e.target as HTMLInputElement).disabled && onChange(e);
}); });
} else if (settingId === PrefKey.SERVER_REGION) { } else if (settingId === PrefKey.SERVER_REGION) {
let selectedValue; let selectedValue;
@ -362,25 +361,27 @@ export function setupSettingsUi() {
if (settingId === PrefKey.USER_AGENT_PROFILE) { if (settingId === PrefKey.USER_AGENT_PROFILE) {
$wrapper.appendChild($inpCustomUserAgent!); $wrapper.appendChild($inpCustomUserAgent!);
// Trigger 'change' event // Trigger 'change' event
$control.disabled = true;
$control.dispatchEvent(new Event('change')); $control.dispatchEvent(new Event('change'));
$control.disabled = false;
} }
} }
} }
// Setup Reload button // Setup Reload button
const $reloadBtn = createButton({ $btnReload = createButton({
label: t('settings-reload'), label: t('settings-reload'),
style: ButtonStyle.DANGER | ButtonStyle.FOCUSABLE | ButtonStyle.FULL_WIDTH, classes: ['bx-settings-reload-button'],
style: ButtonStyle.FOCUSABLE | ButtonStyle.FULL_WIDTH,
onClick: e => { onClick: e => {
window.location.reload(); window.location.reload();
$reloadBtn.disabled = true; $btnReload.disabled = true;
$reloadBtn.textContent = t('settings-reloading'); $btnReload.textContent = t('settings-reloading');
}, },
}); });
$reloadBtn.setAttribute('tabindex', '0'); $btnReload.setAttribute('tabindex', '0');
$reloadBtnWrapper = CE<HTMLButtonElement>('div', {'class': 'bx-settings-reload-button-wrapper bx-gone'}, $reloadBtn); $wrapper.appendChild($btnReload);
$wrapper.appendChild($reloadBtnWrapper);
// Donation link // Donation link
const $donationLink = CE('a', { const $donationLink = CE('a', {