Dropdowns limited to 382px. Ground unit types are automatically sorted

This commit is contained in:
PeekabooSteam
2023-04-09 15:22:27 +01:00
parent 1b093782c3
commit 14ae0d083f
4 changed files with 18 additions and 4 deletions

View File

@@ -173,7 +173,7 @@ form > div {
.ol-select.is-open > .ol-select-options { .ol-select.is-open > .ol-select-options {
max-height: fit-content; max-height: 382px;
overflow: visible; overflow: visible;
overflow-y: auto; overflow-y: auto;
padding: 8px 0; padding: 8px 0;
@@ -194,7 +194,7 @@ form > div {
box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25); box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
display: flex; display: flex;
justify-content: left; justify-content: left;
padding: 6px 25px; padding: 4px 25px;
width: 100%; width: 100%;
} }

View File

@@ -25,6 +25,8 @@ export class Dropdown {
}); });
this.#options.classList.add( "ol-scrollable" );
this.#element.addEventListener("mouseleave", ev => { this.#element.addEventListener("mouseleave", ev => {
this.#close(); this.#close();
}); });

View File

@@ -169,7 +169,11 @@ export class MapContextMenu extends ContextMenu {
#setGroundUnitRole(role: string) { #setGroundUnitRole(role: string) {
this.#spawnOptions.role = role; this.#spawnOptions.role = role;
this.#resetGroundUnitType(); this.#resetGroundUnitType();
this.#groundUnitTypeDropdown.setOptions(groundUnitsDatabase.getByRole(role).map((blueprint) => { return blueprint.label }));
const types = groundUnitsDatabase.getByRole(role).map((blueprint) => { return blueprint.label } );
types.sort();
this.#groundUnitTypeDropdown.setOptions( types );
this.#groundUnitTypeDropdown.selectValue(0); this.#groundUnitTypeDropdown.selectValue(0);
this.clip(); this.clip();
} }
@@ -179,7 +183,11 @@ export class MapContextMenu extends ContextMenu {
(<HTMLButtonElement>this.getContainer()?.querySelector("#loadout-list")).replaceChildren(); (<HTMLButtonElement>this.getContainer()?.querySelector("#loadout-list")).replaceChildren();
this.#groundUnitRoleDropdown.reset(); this.#groundUnitRoleDropdown.reset();
this.#groundUnitTypeDropdown.reset(); this.#groundUnitTypeDropdown.reset();
this.#groundUnitRoleDropdown.setOptions(groundUnitsDatabase.getRoles());
const roles = groundUnitsDatabase.getRoles();
roles.sort();
this.#groundUnitRoleDropdown.setOptions( roles );
this.clip(); this.clip();
} }

View File

@@ -12,6 +12,7 @@ import { LogPanel } from "./panels/logpanel";
import { getAirbases, getBullseye as getBullseyes, getConfig, getMission, getUnits, setAddress, toggleDemoEnabled } from "./server/server"; import { getAirbases, getBullseye as getBullseyes, getConfig, getMission, getUnits, setAddress, toggleDemoEnabled } from "./server/server";
import { UnitDataTable } from "./units/unitdatatable"; import { UnitDataTable } from "./units/unitdatatable";
import { keyEventWasInInput } from "./other/utils"; import { keyEventWasInInput } from "./other/utils";
import { Dropdown } from "./controls/dropdown";
var map: Map; var map: Map;
@@ -67,6 +68,9 @@ function setup() {
// TODO: add back buttons // TODO: add back buttons
} }
new Dropdown( "app-icon", () => {} );
/* Setup event handlers */ /* Setup event handlers */
setupEvents(); setupEvents();