diff options
Diffstat (limited to 'src/ui')
-rw-r--r-- | src/ui/options.css | 16 | ||||
-rw-r--r-- | src/ui/options.html | 4 | ||||
-rw-r--r-- | src/ui/options.js | 7 |
3 files changed, 22 insertions, 5 deletions
diff --git a/src/ui/options.css b/src/ui/options.css index ca64859..652a9bf 100644 --- a/src/ui/options.css +++ b/src/ui/options.css @@ -129,8 +129,20 @@ button.add { font-weight: bold; } -input[type="file"] { - display: none; +#import-container { + position: relative; +} +#file-import { + position: absolute; + top: 0; + left: 0; + opacity: 0; + width: 100%; + padding: 0; + margin: 0; + border: none; + -moz-appearance: none; + appearance: none; } .opt-group { diff --git a/src/ui/options.html b/src/ui/options.html index 5053ef7..1ccc62f 100644 --- a/src/ui/options.html +++ b/src/ui/options.html @@ -24,8 +24,10 @@ </div> <div class="buttons"> -<span><input id="file-import" type="file"/></span> +<div id="import-container"> + <input id="file-import" type="file" name="file-import" tabindex="-1" accept=".txt,.json"/> <button id="btn-import" accesskey="__MSG_Import_accesskey__">__MSG_Import__</button> +</div> <button id="btn-export" accesskey="__MSG_Export_accesskey__">__MSG_Export__</button> <button id="btn-reset" accesskey="__MSG_Reset_accesskey__">__MSG_Reset__</button> </div> diff --git a/src/ui/options.js b/src/ui/options.js index 4588330..75f1280 100644 --- a/src/ui/options.js +++ b/src/ui/options.js @@ -61,8 +61,11 @@ fr.readAsText(fileInput.files[0]); } - document.querySelector("#btn-import").addEventListener("click", - () => fileInput.click()); + document.querySelector("#btn-import").addEventListener("click", async e => { + fileInput.focus(); + fileInput.click(); + e.target.focus(); + }); document.querySelector("#btn-export").addEventListener("click", async e => { let button = e.target; |