marcel/better-xcloud
1
0
Fork 0
mirror of https://github.com/redphx/better-xcloud.git synced 2025-06-06 07:37:19 +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 {
z-index: var(--bx-reload-button-z-index);
position: fixed;
bottom: 0;
left: 0;
right: 0;
text-align: center;
background: #000000cf;
padding: 10px;
button {
max-width: 450px;
margin: 0 !important;
}
.bx-settings-reload-button {
margin-top: 10px;
height: calc(var(--bx-button-height) * 1.5);
}
.bx-settings-container {

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

@ -20,7 +20,6 @@
--bx-danger-button-disabled-color: #a26c6c;
--bx-toast-z-index: 9999;
--bx-reload-button-z-index: 9200;
--bx-dialog-z-index: 9101;
--bx-dialog-overlay-z-index: 9100;
--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_LATEST_VERSION = getPref(PrefKey.LATEST_VERSION);
let $reloadBtnWrapper: HTMLButtonElement;
let $btnReload: HTMLButtonElement;
// Setup Settings UI
const $container = CE<HTMLElement>('div', {
@ -180,22 +180,21 @@ export function setupSettingsUi() {
}
const onChange = (e: Event) => {
if (!$reloadBtnWrapper) {
return;
}
$reloadBtnWrapper.classList.remove('bx-gone');
// Clear PatcherCache;
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) {
// Update locale
refreshCurrentLocale();
const $btn = $reloadBtnWrapper.firstElementChild! as HTMLButtonElement;
$btn.textContent = t('settings-reloading');
$btn.click();
$btnReload.textContent = t('settings-reloading');
$btnReload.click();
}
};
@ -274,7 +273,7 @@ export function setupSettingsUi() {
$inpCustomUserAgent.readOnly = !isCustom;
$inpCustomUserAgent.disabled = !isCustom;
onChange(e);
!(e.target as HTMLInputElement).disabled && onChange(e);
});
} else if (settingId === PrefKey.SERVER_REGION) {
let selectedValue;
@ -362,25 +361,27 @@ export function setupSettingsUi() {
if (settingId === PrefKey.USER_AGENT_PROFILE) {
$wrapper.appendChild($inpCustomUserAgent!);
// Trigger 'change' event
$control.disabled = true;
$control.dispatchEvent(new Event('change'));
$control.disabled = false;
}
}
}
// Setup Reload button
const $reloadBtn = createButton({
$btnReload = createButton({
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 => {
window.location.reload();
$reloadBtn.disabled = true;
$reloadBtn.textContent = t('settings-reloading');
$btnReload.disabled = true;
$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($reloadBtnWrapper);
$wrapper.appendChild($btnReload);
// Donation link
const $donationLink = CE('a', {