mirror of
https://github.com/redphx/better-xcloud.git
synced 2025-06-04 22:57:19 +02:00
Calculate minimum width of controller-friendly <select> elements
This commit is contained in:
parent
69d7cbfffb
commit
bb57f72e64
@ -300,6 +300,7 @@
|
||||
text-align: left;
|
||||
align-self: center;
|
||||
margin-bottom: 0 !important;
|
||||
flex: 1;
|
||||
|
||||
+ * {
|
||||
margin: 0 0 0 auto;
|
||||
|
@ -4,12 +4,16 @@
|
||||
flex: 0 1 auto;
|
||||
|
||||
select {
|
||||
display: none !important;
|
||||
// Render offscreen instead of "display: none" so we could get its size
|
||||
position: absolute !important;
|
||||
top: -9999px !important;
|
||||
left: -9999px !important;
|
||||
visibility: hidden !important;
|
||||
}
|
||||
|
||||
> div, button.bx-select-value {
|
||||
min-width: 110px;
|
||||
text-align: center;
|
||||
min-width: 120px;
|
||||
text-align: left;
|
||||
margin: 0 8px;
|
||||
line-height: 24px;
|
||||
vertical-align: middle;
|
||||
@ -53,7 +57,7 @@
|
||||
|
||||
span {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
text-align: left;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
|
@ -1,9 +1,11 @@
|
||||
import { GamepadKey } from "@/enums/mkb";
|
||||
import { PrefKey } from "@/enums/pref-keys";
|
||||
import { EmulatedMkbHandler } from "@/modules/mkb/mkb-handler";
|
||||
import { BxEvent } from "@/utils/bx-event";
|
||||
import { STATES } from "@/utils/global";
|
||||
import { CE, isElementVisible } from "@/utils/html";
|
||||
import { setNearby } from "@/utils/navigation-utils";
|
||||
import { getPref } from "@/utils/settings-storages/global-settings-storage";
|
||||
|
||||
export enum NavigationDirection {
|
||||
UP = 1,
|
||||
@ -154,6 +156,43 @@ export class NavigationDialogManager {
|
||||
|
||||
// Hide dialog when the Guide menu is shown
|
||||
window.addEventListener(BxEvent.XCLOUD_GUIDE_MENU_SHOWN, e => this.hide());
|
||||
|
||||
// Calculate minimum width of controller-friendly <select> elements
|
||||
if (getPref(PrefKey.UI_CONTROLLER_FRIENDLY)) {
|
||||
const observer = new MutationObserver(mutationList => {
|
||||
if (mutationList.length === 0 || mutationList[0].addedNodes.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Get dialog
|
||||
const $dialog = mutationList[0].addedNodes[0];
|
||||
if (!$dialog || !($dialog instanceof HTMLElement)) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 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';
|
||||
});
|
||||
});
|
||||
observer.observe(this.$container, {childList: true});
|
||||
}
|
||||
}
|
||||
|
||||
handleEvent(event: Event) {
|
||||
|
Loading…
x
Reference in New Issue
Block a user