From 21d9eb7d21bd48a0fa1794d2b92acb6be2e197ce Mon Sep 17 00:00:00 2001
From: Azgaar <maxganiev@yandex.ru>
Date: Wed, 8 Sep 2021 17:48:48 +0300
Subject: [PATCH] reword dropbox file load select

---
 index.html            | 15 +++++++++------
 modules/ui/options.js | 26 ++++++++++++++++----------
 2 files changed, 25 insertions(+), 16 deletions(-)

diff --git a/index.html b/index.html
index f51f32e3..982ecca3 100644
--- a/index.html
+++ b/index.html
@@ -3491,17 +3491,20 @@
     </div>
 
     <div id="loadMapData" style="display: none" class="dialog">
-      <div style="margin-bottom: .3em">Load map from</div>
       <div>
+        <strong>Load map from</strong>
         <button onclick="mapToLoad.click()" data-tip="Load .map file from local disk">local disk</button>
         <button onclick="loadURL()" data-tip="Load .map file from URL (server should allow CORS)">URL</button>
         <button onclick="quickLoad()" data-tip="Load map from browser storage (if saved before)">storage</button>
       </div>
-      <div id="loadFromDropbox" style="margin-bottom:.3em">
-        <span>From your Dropbox account</span>
-        <select id="loadFromDropboxSelect" style="margin-bottom:.3em"></select>
-        <button onclick="loadFromDropbox()" data-tip="Load .map file from your Dropbox">Open</button>
-        <button onclick="createSharableDropboxLink()" data-tip="Select file and create a link to share with your friends">Create link</button>
+      <div id="loadFromDropbox">
+        <p style="margin-bottom: .3em">From your Dropbox account</p>
+        <select id="loadFromDropboxSelect" style="width: 22em"></select>
+
+        <div id="loadFromDropboxButtons" style="margin-bottom: .3em">
+          <button onclick="loadFromDropbox()" data-tip="Load .map file from your Dropbox">Open</button>
+          <button onclick="createSharableDropboxLink()" data-tip="Select file and create a link to share with your friends">Create link</button>
+        </div>
 
         <div style="margin-top: .3em">
           <div id="sharableLinkContainer" style="display: none">
diff --git a/modules/ui/options.js b/modules/ui/options.js
index d18ef451..9b4f3411 100644
--- a/modules/ui/options.js
+++ b/modules/ui/options.js
@@ -699,7 +699,7 @@ async function showLoadPane() {
   $("#loadMapData").dialog({
     title: "Load map",
     resizable: false,
-    width: "22em",
+    width: "24em",
     position: {my: "center", at: "center", of: "svg"},
     buttons: {
       Close: function () {
@@ -708,17 +708,23 @@ async function showLoadPane() {
     }
   });
 
-  const dpx = document.getElementById("loadFromDropbox");
-  const dpf = dpx.querySelector("select");
+  const loadFromDropboxButtons = document.getElementById("loadFromDropboxButtons");
+  const fileSelect = document.getElementById("loadFromDropboxSelect");
   const files = await Cloud.providers.dropbox.list();
-  dpx.style.display = files ? "block" : "none";
-  if (!files) return;
-  while (dpf.firstChild) dpf.removeChild(dpf.firstChild);
-  files.forEach(f => {
+
+  if (!files) {
+    loadFromDropboxButtons.style.display = "none";
+    fileSelect.innerHTML = `<option value="" disabled selected>Save files to Dropbox first</option>`;
+    return;
+  }
+
+  loadFromDropboxButtons.style.display = "block";
+  fileSelect.innerHTML = "";
+  files.forEach(file => {
     const opt = document.createElement("option");
-    opt.innerText = f.name;
-    opt.value = f.path;
-    dpf.appendChild(opt);
+    opt.innerText = file.name;
+    opt.value = file.path;
+    fileSelect.appendChild(opt);
   });
 }