Update stylings of global settings UI

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

View File

@ -98,34 +98,56 @@
.bx-settings-row {
display: flex;
margin-bottom: 8px;
padding: 2px 4px;
padding: 6px 12px;
position: relative;
label {
flex: 1;
align-self: center;
margin-bottom: 0;
padding-left: 10px;
}
&:focus-within {
@media (hover: none) {
background-color: #242424;
}
&:hover, &:focus-within {
background-color: #242424;
}
input {
align-self: center;
accent-color: var(--bx-primary-button-color);
&:focus {
accent-color: var(--bx-danger-button-color);
}
}
select:disabled {
-webkit-appearance: none;
background: transparent;
text-align-last: right;
border: none;
color: #fff;
select {
&:disabled {
-webkit-appearance: none;
background: transparent;
text-align-last: right;
border: none;
color: #fff;
}
}
input[type=checkbox], select {
&:focus {
filter: drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff);
}
}
&:has(input:focus), &:has(select:focus) {
&::before {
content: ' ';
border-radius: 4px;
border: 2px solid #fff;
position: absolute;
top: 0;
left: 0;
bottom: 0;
}
}
}
@ -161,6 +183,10 @@
&:hover {
color: #6dd72b;
}
&:focus {
text-decoration: underline;
}
}
.bx-settings-custom-user-agent {

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

View File

@ -26,7 +26,7 @@ export enum SettingElementType {
export class SettingElement {
static #renderOptions(key: string, setting: PreferenceSetting, currentValue: any, onChange: any) {
const $control = CE<HTMLSelectElement>('select') as HTMLSelectElement;
const $control = CE<HTMLSelectElement>('select', {tabindex: 0}) as HTMLSelectElement;
for (let value in setting.options) {
const label = setting.options[value];
@ -50,7 +50,7 @@ export class SettingElement {
}
static #renderMultipleOptions(key: string, setting: PreferenceSetting, currentValue: any, onChange: any, params: MultipleOptionsParams={}) {
const $control = CE<HTMLSelectElement>('select', {'multiple': true});
const $control = CE<HTMLSelectElement>('select', {multiple: true, tabindex: 0});
if (params && params.size) {
$control.setAttribute('size', params.size.toString());
}
@ -93,7 +93,7 @@ export class SettingElement {
}
static #renderNumber(key: string, setting: PreferenceSetting, currentValue: any, onChange: any) {
const $control = CE('input', {'type': 'number', 'min': setting.min, 'max': setting.max}) as HTMLInputElement;
const $control = CE('input', {'tabindex': 0, 'type': 'number', 'min': setting.min, 'max': setting.max}) as HTMLInputElement;
$control.value = currentValue;
onChange && $control.addEventListener('change', (e: Event) => {
const target = e.target as HTMLInputElement;
@ -108,7 +108,7 @@ export class SettingElement {
}
static #renderCheckbox(key: string, setting: PreferenceSetting, currentValue: any, onChange: any) {
const $control = CE('input', {'type': 'checkbox'}) as HTMLInputElement;
const $control = CE('input', {'type': 'checkbox', 'tabindex': 0}) as HTMLInputElement;
$control.checked = currentValue;
onChange && $control.addEventListener('change', e => {
@ -149,13 +149,21 @@ export class SettingElement {
};
const $wrapper = CE('div', {'class': 'bx-number-stepper'},
$decBtn = CE('button', {'data-type': 'dec'}, '-') as HTMLButtonElement,
$text = CE('span', {}, renderTextValue(value)) as HTMLSpanElement,
$incBtn = CE('button', {'data-type': 'inc'}, '+') as HTMLButtonElement,
);
$decBtn = CE('button', {'data-type': 'dec', tabindex: -1}, '-') as HTMLButtonElement,
$text = CE('span', {}, renderTextValue(value)) as HTMLSpanElement,
$incBtn = CE('button', {'data-type': 'inc', tabindex: -1}, '+') as HTMLButtonElement,
);
if (!options.disabled && !options.hideSlider) {
$range = CE('input', {'type': 'range', 'min': MIN, 'max': MAX, 'value': value, 'step': STEPS}) as HTMLInputElement;
$range = CE('input', {
type: 'range',
min: MIN,
max: MAX,
value: value,
step: STEPS,
tabindex: 0,
}) as HTMLInputElement;
$range.addEventListener('input', e => {
value = parseInt((e.target as HTMLInputElement).value);
$text.textContent = renderTextValue(value);