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

Fix not calculating controller-friendly <select>'s size when switching tab

Browse Source
This commit is contained in:
redphx 2024-09-25 20:20:06 +07:00
parent e69fa19ef3
commit f6ec6d7c9b
3 changed files with 41 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/modules/controller-shortcut.ts
View File

@ -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,

52
src/modules/ui/dialog/navigation-dialog.ts
View File

@ -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':

5
src/modules/ui/dialog/settings-dialog.ts
View File

@ -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');
}