Add a closing button to the measurement panel.

It can be confusing that one had to click on the ruler icon to go back
to the normal mode where one can select features.

2 files changed, 39 insertions, 15 deletions

diff --git a/main.js b/main.js
index 08e8405..eccca7a 100644
--- a/main.js
+++ b/main.js
@@ -3918,14 +3918,25 @@ const infoMetadataAccordions = [];
   modal.appendChild(content);
   content.classList.add('modal-content');
 
-  const body = document.createElement('div');
-  content.appendChild(body);
-  body.classList.add('modal-body');
+  const header = document.createElement('div');
+  content.appendChild(header);
+  header.classList.add('modal-header');
 
   const title = document.createElement('div');
   title.classList.add('h5');
   title.innerHTML = 'Mät i kartan';
-  body.appendChild(title);
+  header.appendChild(title);
+
+  const btn_close = document.createElement('button');
+  btn_close.classList.add('btn-close');
+  btn_close.type = 'button';
+  btn_close.title = 'Stäng';
+  btn_close.setAttribute('aria-label', btn_close.title);
+  header.appendChild(btn_close);
+
+  const body = document.createElement('div');
+  content.appendChild(body);
+  body.classList.add('modal-body');
 
   const getMeasureMode = (function() {
     const btn_group = document.createElement('div');
@@ -3987,16 +3998,22 @@ const infoMetadataAccordions = [];
     btn_group.appendChild(buttons.ok);
   })();
 
-  document.getElementById('measure-button')
-    .getElementsByTagName('button')[0]
-    .addEventListener('click', function(event) {
-      if (event.currentTarget.getAttribute('aria-expanded') === 'true') {
-        disposePopover();
-        setup(getMeasureMode());
-      } else {
-        setup(null);
+  const button_menu = document.getElementById('measure-button')
+    .getElementsByTagName('button')[0];
+  button_menu.addEventListener('click', function(event) {
+    if (event.currentTarget.getAttribute('aria-expanded') === 'true') {
+      disposePopover();
+      setup(getMeasureMode());
+    } else {
+      setup(null);
+      /* XXX workaround for https://github.com/twbs/bootstrap/issues/41005#issuecomment-2585390544 */
+      const activeElement = document.activeElement;
+      if (activeElement.isEqualNode(btn_close)) {
+          activeElement.blur();
       }
-    });
+    }
+  });
+  btn_close.onclick = () => button_menu.click();
 })();
 
 /* popup and feature overlays */
diff --git a/style.css b/style.css
index da48ebb..748f615 100644
--- a/style.css
+++ b/style.css
@@ -494,9 +494,16 @@ body.inprogress {
   -moz-user-select: text;
   user-select: text; /* eslint-disable-line css/use-baseline */
 }
-#measure-panel .h5 {
+#measure-panel .modal-header {
+  border-bottom: none;
+  padding: var(--bs-modal-padding);
+}
+#measure-panel .modal-header .h5 {
   font-size: 1.25rem;
-  margin-bottom: .75rem;
+  margin: 0;
+}
+#measure-panel .modal-body {
+  padding-top: 0;
 }
 #age-filter-modal .btn-group > .btn-check:not(:checked) + label.btn:hover,
 #measure-panel .btn-group > .btn-check:not(:checked) + label.btn:hover {