mirror of
https://github.com/redphx/better-xcloud.git
synced 2025-06-04 22:57:19 +02:00
Fix not calculating controller-friendly <select>'s size when switching tab
This commit is contained in:
parent
e69fa19ef3
commit
f6ec6d7c9b
@ -314,6 +314,7 @@ export class ControllerShortcut {
|
||||
const $selectProfile = CE<HTMLSelectElement>('select', {class: 'bx-shortcut-profile', autocomplete: 'off'});
|
||||
|
||||
const $profile = PREF_CONTROLLER_FRIENDLY_UI ? BxSelectElement.wrap($selectProfile) : $selectProfile;
|
||||
$profile.classList.add('bx-full-width');
|
||||
|
||||
const $container = CE('div', {
|
||||
'data-has-gamepad': 'false',
|
||||
@ -390,6 +391,8 @@ export class ControllerShortcut {
|
||||
|
||||
if (PREF_CONTROLLER_FRIENDLY_UI) {
|
||||
const $bxSelect = BxSelectElement.wrap($select);
|
||||
$bxSelect.classList.add('bx-full-width');
|
||||
|
||||
$div.appendChild($bxSelect);
|
||||
setNearby($row, {
|
||||
focus: $bxSelect,
|
||||
|
@ -171,30 +171,44 @@ export class NavigationDialogManager {
|
||||
}
|
||||
|
||||
// Find un-calculated <select> elements
|
||||
const $selects = $dialog.querySelectorAll('.bx-select:not([data-calculated]) select');
|
||||
$selects.forEach($select => {
|
||||
const rect = $select.getBoundingClientRect();
|
||||
const $parent = $select.parentElement! as HTMLElement;
|
||||
$parent.dataset.calculated = 'true';
|
||||
|
||||
let $label;
|
||||
let width = Math.ceil(rect.width);
|
||||
|
||||
if (($select as HTMLSelectElement).multiple) {
|
||||
$label = $parent.querySelector('.bx-select-value') as HTMLElement;
|
||||
width += 15; // Add checkbox's width
|
||||
} else {
|
||||
$label = $parent.querySelector('div') as HTMLElement;
|
||||
}
|
||||
|
||||
// Set min-width
|
||||
$label.style.minWidth = width + 'px';
|
||||
});
|
||||
this.calculateSelectBoxes($dialog);
|
||||
});
|
||||
observer.observe(this.$container, {childList: true});
|
||||
}
|
||||
}
|
||||
|
||||
calculateSelectBoxes($root: HTMLElement) {
|
||||
const $selects = $root.querySelectorAll('.bx-select:not([data-calculated]) select');
|
||||
$selects.forEach($select => {
|
||||
const $parent = $select.parentElement! as HTMLElement;
|
||||
|
||||
// Don't apply to select.bx-full-width elements
|
||||
if ($parent.classList.contains('bx-full-width')) {
|
||||
$parent.dataset.calculated = 'true';
|
||||
return;
|
||||
}
|
||||
|
||||
const rect = $select.getBoundingClientRect();
|
||||
|
||||
let $label;
|
||||
let width = Math.ceil(rect.width);
|
||||
if (!width) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (($select as HTMLSelectElement).multiple) {
|
||||
$label = $parent.querySelector('.bx-select-value') as HTMLElement;
|
||||
width += 20; // Add checkbox's width
|
||||
} else {
|
||||
$label = $parent.querySelector('div') as HTMLElement;
|
||||
}
|
||||
|
||||
// Set min-width
|
||||
$label.style.minWidth = width + 'px';
|
||||
$parent.dataset.calculated = 'true';
|
||||
});
|
||||
}
|
||||
|
||||
handleEvent(event: Event) {
|
||||
switch (event.type) {
|
||||
case 'keydown':
|
||||
|
@ -943,6 +943,11 @@ export class SettingsNavigationDialog extends NavigationDialog {
|
||||
for (const $child of Array.from(this.$settings.children)) {
|
||||
if ($child.getAttribute('data-tab-group') === settingTab.group) {
|
||||
$child.classList.remove('bx-gone');
|
||||
|
||||
// Calculate size of controller-friendly select boxes
|
||||
if (getPref(PrefKey.UI_CONTROLLER_FRIENDLY)) {
|
||||
this.dialogManager.calculateSelectBoxes($child as HTMLElement);
|
||||
}
|
||||
} else {
|
||||
$child.classList.add('bx-gone');
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user