From d1d9dede9c5e55fda61dc2b98d14dc9dc197a359 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?P=C5=91cze=20Bence?= <bence@pocze.ch>
Date: Sun, 14 Jun 2020 02:31:09 +0200
Subject: [PATCH] MAPG-125 use modal instead of custom box in map editor

---
 public/static/css/map_editor.css | 23 -----------------------
 public/static/js/map_editor.js   | 15 +++------------
 views/admin/map_editor.php       | 13 +++++++------
 3 files changed, 10 insertions(+), 41 deletions(-)

diff --git a/public/static/css/map_editor.css b/public/static/css/map_editor.css
index b173251..46338ec 100644
--- a/public/static/css/map_editor.css
+++ b/public/static/css/map_editor.css
@@ -1,17 +1,3 @@
-#metadata {
-    position: absolute;
-    top: 50px;
-    left: 10px;
-    padding: 10px;
-    background-color: #eeeeee;
-    border: solid 1px #555555;
-    border-radius: 3px;
-    box-sizing: border-box;
-    opacity: 0.95;
-    z-index: 2;
-    visibility: hidden;
-}
-
 #map {
     width: 100%;
     height: calc(100% - 40px);
@@ -61,9 +47,6 @@
 }
 
 @media screen and (max-width: 999px) and (min-height: 600px) {
-    #metadata {
-        width: calc(100% - 155px);
-    }
     #map.selected {
         height: calc(50% - 20px);
     }
@@ -79,12 +62,6 @@
 }
 
 @media screen and (min-width: 1000px), (max-height: 599px) {
-    #metadata {
-        width: calc(50% - 20px);
-    }
-    #metadata.selected {
-        top: 95px;
-    }
     #map.selected {
         width: 50%;
     }
diff --git a/public/static/js/map_editor.js b/public/static/js/map_editor.js
index 59c664a..83f950a 100644
--- a/public/static/js/map_editor.js
+++ b/public/static/js/map_editor.js
@@ -22,7 +22,7 @@
 
             document.getElementById('mapName').innerHTML = form.elements.name.value ? form.elements.name.value : '[unnamed map]';
 
-            document.getElementById('metadata').style.visibility = 'hidden';
+            MapGuesser.hideModal();
 
             document.getElementById('saveButton').disabled = false;
         },
@@ -109,7 +109,6 @@
                 return;
             }
 
-            document.getElementById('metadata').classList.add('selected');
             document.getElementById('map').classList.add('selected');
             document.getElementById('control').classList.add('selected');
             document.getElementById('noPano').style.visibility = 'hidden';
@@ -215,7 +214,6 @@
         },
 
         closePlace: function (del) {
-            document.getElementById('metadata').classList.remove('selected')
             document.getElementById('map').classList.remove('selected');
             document.getElementById('control').classList.remove('selected');
             document.getElementById('noPano').style.visibility = 'hidden';
@@ -413,14 +411,7 @@
     document.getElementById('mapName').onclick = function (e) {
         e.preventDefault();
 
-        var metadata = document.getElementById('metadata');
-
-        if (metadata.style.visibility === 'visible') {
-            metadata.style.visibility = 'hidden';
-        } else {
-            metadata.style.visibility = 'visible';
-            document.getElementById('metadataForm').elements.name.select();
-        }
+        MapGuesser.showModal('metadata');
     };
 
     document.getElementById('metadataForm').onsubmit = function (e) {
@@ -430,7 +421,7 @@
     };
 
     document.getElementById('closeMetadataButton').onclick = function () {
-        document.getElementById('metadata').style.visibility = 'hidden';
+        MapGuesser.hideModal();
     };
 
     document.getElementById('saveButton').onclick = function () {
diff --git a/views/admin/map_editor.php b/views/admin/map_editor.php
index ffc2be6..12c9a09 100644
--- a/views/admin/map_editor.php
+++ b/views/admin/map_editor.php
@@ -22,7 +22,7 @@ $jsFiles = [
             </a>
         </h1>
         <p>
-            <span class="bold"><a href="javascript:;" id="mapName"><?= $mapName ?></a></span><!--
+            <span class="bold"><a href="javascript:;" id="mapName" title="Edit map data"><?= $mapName ?></a></span><!--
          --><span><!--
                 <?php /* Copyright (c) 2019 The Bootstrap Authors. License can be found in 'USED_SOFTWARE' in section 'Bootstrap Icons'. */ ?>
              --><svg class="inline" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
@@ -50,13 +50,14 @@ $jsFiles = [
         </p>
     </div>
 </div>
-<div id="metadata">
-    <form id="metadataForm">
+<div id="metadata" class="modal">
+    <h2>Edit map data</h2>
+    <form id="metadataForm" class="marginTop">
         <input class="fullWidth" type="text" name="name" value="<?= $mapName ?>" placeholder="Name of the map">
         <textarea  class="fullWidth marginTop" name="description" rows="4" placeholder="Description of the map"><?= $mapDescription ?></textarea>
-        <div style="text-align: right;">
-            <button id="closeMetadataButton" class="gray marginTop" type="button">Close</button>
-            <button class="marginTop" type="submit">Apply</button>
+        <div class="right">
+            <button class="marginTop marginRight" type="submit">Apply</button><!--
+         --><button id="closeMetadataButton" class="gray marginTop" type="button">Close</button>
         </div>
     </form>
 </div>