From 14ae0d083fcf5a9972a8f2f6fbfd01f48d22b8bf Mon Sep 17 00:00:00 2001
From: PeekabooSteam <matthew.lindley001+github@gmail.com>
Date: Sun, 9 Apr 2023 15:22:27 +0100
Subject: [PATCH] Dropdowns limited to 382px.  Ground unit types are
 automatically sorted

---
 client/public/stylesheets/olympus.css |  4 ++--
 client/src/controls/dropdown.ts       |  2 ++
 client/src/controls/mapcontextmenu.ts | 12 ++++++++++--
 client/src/index.ts                   |  4 ++++
 4 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/client/public/stylesheets/olympus.css b/client/public/stylesheets/olympus.css
index 3e506469..ee1b97c8 100644
--- a/client/public/stylesheets/olympus.css
+++ b/client/public/stylesheets/olympus.css
@@ -173,7 +173,7 @@ form > div {
 
 
 .ol-select.is-open > .ol-select-options {
-    max-height: fit-content;
+    max-height: 382px;
     overflow: visible;
     overflow-y: auto;
     padding: 8px 0;
@@ -194,7 +194,7 @@ form > div {
     box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
     display: flex;
     justify-content: left;
-    padding: 6px 25px;
+    padding: 4px 25px;
     width: 100%;
 }
 
diff --git a/client/src/controls/dropdown.ts b/client/src/controls/dropdown.ts
index 2870db8c..fb807855 100644
--- a/client/src/controls/dropdown.ts
+++ b/client/src/controls/dropdown.ts
@@ -25,6 +25,8 @@ export class Dropdown {
 
         });
 
+        this.#options.classList.add( "ol-scrollable" );
+
         this.#element.addEventListener("mouseleave", ev => {
             this.#close();
         });
diff --git a/client/src/controls/mapcontextmenu.ts b/client/src/controls/mapcontextmenu.ts
index c96241b7..20c4c4c5 100644
--- a/client/src/controls/mapcontextmenu.ts
+++ b/client/src/controls/mapcontextmenu.ts
@@ -169,7 +169,11 @@ export class MapContextMenu extends ContextMenu {
     #setGroundUnitRole(role: string) {
         this.#spawnOptions.role = role;
         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.clip();
     }
@@ -179,7 +183,11 @@ export class MapContextMenu extends ContextMenu {
         (<HTMLButtonElement>this.getContainer()?.querySelector("#loadout-list")).replaceChildren();
         this.#groundUnitRoleDropdown.reset();
         this.#groundUnitTypeDropdown.reset();
-        this.#groundUnitRoleDropdown.setOptions(groundUnitsDatabase.getRoles());
+
+        const roles = groundUnitsDatabase.getRoles();
+        roles.sort();
+        
+        this.#groundUnitRoleDropdown.setOptions( roles );
         this.clip();
     }
 
diff --git a/client/src/index.ts b/client/src/index.ts
index 4a5c9891..14f0037f 100644
--- a/client/src/index.ts
+++ b/client/src/index.ts
@@ -12,6 +12,7 @@ import { LogPanel } from "./panels/logpanel";
 import { getAirbases, getBullseye as getBullseyes, getConfig, getMission, getUnits, setAddress, toggleDemoEnabled } from "./server/server";
 import { UnitDataTable } from "./units/unitdatatable";
 import { keyEventWasInInput } from "./other/utils";
+import { Dropdown } from "./controls/dropdown";
 
 var map: Map;
 
@@ -67,6 +68,9 @@ function setup() {
         // TODO: add back buttons
     }
 
+
+    new Dropdown( "app-icon", () => {} );
+
     /* Setup event handlers */
     setupEvents();