changed type selection to button + dropdown menu

index.css

@@ -2357,6 +2357,38 @@ svg.button {
   opacity: 0.8;
 }
 
+#markerTypeSelector {
+  font-size: 0.85em;
+}
+
+#markerTypeSelectorWrapper {
+  position: relative;
+}
+
+#markerTypeSelectMenu {
+  display: none;
+}
+#markerTypeSelectMenu.visible {
+  display: block;
+  position: absolute;
+  height: 250px;
+  width: 170px;
+  overflow-y: scroll;
+  background: inherit;
+  bottom: 100%;
+  left: 0;
+  background: white;
+}
+#markerTypeSelectMenu > button {
+  display: block;
+  width: 100%;
+  border: 1px solid #ddd;
+  margin-bottom: 1px;
+}
+#markerTypeSelectMenu > button:hover {
+  background: #ccc;
+}
+
 @media print {
   div,
   canvas {

index.html

@@ -5509,9 +5509,14 @@
 
         <div id="markersBottom">
           <button id="markersOverviewRefresh" data-tip="Refresh the Overview screen" class="icon-cw"></button>
-          <select id="addedMarkerType" style="width: 40px">
-            <option value="" selected>❓empty marker</option>
-          </select>
+          <input type="hidden" id="addedMarkerType" name="addedMarkerType" value="" />
+          <span id="markerTypeSelectorWrapper">
+              <button 
+              id="markerTypeSelector"
+              data-tip="Select marker type for newly added markers."
+            >❓</button>
+            <div id="markerTypeSelectMenu"></div>
+          </span>
           <button
             id="markersAddFromOverview"
             data-tip="Add a new marker. Hold Shift to add multiple"

modules/ui/markers-overview.js

@@ -15,6 +15,7 @@ function overviewMarkers() {
   const markersRemoveAll = document.getElementById("markersRemoveAll");
   const markersExport = document.getElementById("markersExport");
   const markerTypeInput = document.getElementById("addedMarkerType");
+  const markerTypeSelector = document.getElementById("markerTypeSelector");
 
   addLines();
 
@@ -26,13 +27,6 @@ function overviewMarkers() {
     position: {my: "right top", at: "right-10 top+10", of: "svg", collision: "fit"}
   });
 
-  Markers.getConfig().forEach(markerConfig => {
-    const option = document.createElement("option");
-    option.setAttribute("value", markerConfig.type);
-    option.textContent = `${markerConfig.icon} ${markerConfig.type}`;
-    markerTypeInput.appendChild(option);
-  });
-
   const listeners = [
     listen(body, "click", handleLineClick),
     listen(markersInverPin, "click", invertPin),
@@ -42,9 +36,23 @@ function overviewMarkers() {
     listen(markersGenerationConfig, "click", configMarkersGeneration),
     listen(markersRemoveAll, "click", triggerRemoveAll),
     listen(markersExport, "click", exportMarkers),
-    listen(markerTypeInput, "change", changeMarkerType),
+    listen(markerTypeSelector, "click", toggleMarkerTypeMenu),
+    //listen(markerTypeInput, "change", changeMarkerType),
   ];
 
+  [{type: "empty", icon: "❓"}, ...Markers.getConfig()].forEach(markerConfig => {
+    const option = document.createElement("button");
+    option.textContent = `${markerConfig.icon} ${markerConfig.type}`;
+    markerTypeSelectMenu.appendChild(option);
+    console.log(option.textContent);
+    listeners.push(listen(option, "click", () => {
+      markerTypeSelector.textContent = markerConfig.icon;
+      markerTypeInput.value = markerConfig.type;
+      changeMarkerType();
+      toggleMarkerTypeMenu();
+    }));
+  });
+
   function handleLineClick(ev) {
     const el = ev.target;
     const i = +el.parentNode.dataset.i;
@@ -148,6 +156,11 @@ function overviewMarkers() {
     });
   }
 
+
+  function toggleMarkerTypeMenu() {
+    document.getElementById("markerTypeSelectMenu").classList.toggle("visible");
+  }
+  
   function toggleAddMarker() {
     markersAddFromOverview.classList.toggle("pressed");
     addMarker.click();