marcel/better-xcloud
1
0
Fork 0
mirror of https://github.com/redphx/better-xcloud.git synced 2025-08-05 20:58:27 +02:00
Code Issues Packages Projects Releases Wiki Activity

Update stylings of global settings UI

Browse Source
This commit is contained in:
redphx
2024-05-17 16:57:46 +07:00
parent e45ed6f9ea
commit d07d6127df
3 changed files with 81 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -131,7 +131,12 @@ export function setupSettingsUi() {
'href': SCRIPT_HOME,
'target': '_blank',
}, 'Better xCloud ' + SCRIPT_VERSION),
createButton({icon: BxIcon.QUESTION, label: t('help'), url: 'https://better-xcloud.github.io/features/'}),
createButton({
icon: BxIcon.QUESTION,
style: ButtonStyle.FOCUSABLE,
label: t('help'),
url: 'https://better-xcloud.github.io/features/',
}),
)
);
$updateAvailable = CE('a', {
@@ -238,7 +243,9 @@ export function setupSettingsUi() {
let $control: any;
let $inpCustomUserAgent: HTMLInputElement;
let labelAttrs = {};
let labelAttrs: any = {
tabindex: '-1',
};
if (settingId === PrefKey.USER_AGENT_PROFILE) {
let defaultUserAgent = (window.navigator as any).orgUserAgent || window.navigator.userAgent;
@@ -271,7 +278,7 @@ export function setupSettingsUi() {
} else if (settingId === PrefKey.SERVER_REGION) {
let selectedValue;
$control = CE<HTMLSelectElement>('select', {id: `bx_setting_${settingId}`});
$control = CE<HTMLSelectElement>('select', {id: `bx_setting_${settingId}`, tabindex: 0});
$control.name = $control.id;
$control.addEventListener('change', (e: Event) => {
@@ -317,7 +324,7 @@ export function setupSettingsUi() {
} else {
$control = toPrefElement(settingId, onChange);
}
labelAttrs = {'for': $control.id, 'tabindex': 0};
labelAttrs['for'] = $control.id;
}
// Disable unsupported settings
@@ -325,14 +332,19 @@ export function setupSettingsUi() {
($control as HTMLInputElement).disabled = true;
}
// Make disabled control elements un-focusable
if ($control.disabled && !!$control.getAttribute('tabindex')) {
$control.setAttribute('tabindex', -1);
}
const $label = CE('label', labelAttrs, settingLabel);
if (settingNote) {
$label.appendChild(CE('b', {}, settingNote));
}
const $elm = CE<HTMLElement>('div', {'class': 'bx-settings-row'},
$label,
$control
);
$label,
$control,
);
$wrapper.appendChild($elm);
@@ -361,7 +373,12 @@ export function setupSettingsUi() {
$wrapper.appendChild($reloadBtnWrapper);
// Donation link
const $donationLink = CE('a', {'class': 'bx-donation-link', href: 'https://ko-fi.com/redphx', target: '_blank'}, `❤️ ${t('support-better-xcloud')}`);
const $donationLink = CE('a', {
'class': 'bx-donation-link',
href: 'https://ko-fi.com/redphx',
target: '_blank',
tabindex: 0,
}, `❤️ ${t('support-better-xcloud')}`);
$wrapper.appendChild($donationLink);
// Show Game Pass app version