From 6301ba6b33fc763872d9c500cd257ac5c7ffbb44 Mon Sep 17 00:00:00 2001
From: Kuuuube <61125188+Kuuuube@users.noreply.github.com>
Date: Tue, 21 May 2024 13:48:29 -0400
Subject: Rework dictionary import UX (#937)

* Add option to import from URL

* Remove some debug code

* Improve import ui

* Add drag and drop option

* Add basic-only setting css

* Better sizing of import elements

* Hide import from url if advanced is not enabled

* Improve file drag and drop box look

* Remove redundant css

* Allow clicking on drag and drop box to open file picker

* Allow drag and drop for folders

* Prevent welcome page from breaking due to unnecessary imports

* Note that the drop zone can be clicked on

* Reject directories with item counts requiring more than 1000 processing steps (roughly 500 items)

* Improve import modal styling

* Fix typing

* Add book icon to drag zone

* Remove drag-over class on drop

* Filter only for .zip files in drag and drop

* Drop zone text rename Files to Dictionaries and add (.zip)

* Clarify not using instanceof in ts-expect-error

* Only show drag-over styling when file is zip or directory
---
 ext/settings.html | 26 +++++++++++++++++++++++++-
 1 file changed, 25 insertions(+), 1 deletion(-)

(limited to 'ext/settings.html')

diff --git a/ext/settings.html b/ext/settings.html
index 3eb2fc2e..6f4857db 100644
--- a/ext/settings.html
+++ b/ext/settings.html
@@ -2415,7 +2415,31 @@
     <div class="modal-footer">
         <button type="button" class="low-emphasis danger dictionary-database-mutating-input" id="dictionary-delete-all-button">Delete All</button>
         <button type="button" class="low-emphasis dictionary-database-mutating-input" id="dictionary-check-integrity">Check Integrity</button>
-        <button type="button" class="low-emphasis dictionary-database-mutating-input" id="dictionary-import-file-button">Import</button>
+        <button type="button" class="low-emphasis dictionary-database-mutating-input" id="dictionary-import-button">Import</button>
+        <button type="button" data-modal-action="hide">Close</button>
+    </div>
+</div></div>
+
+<div id="dictionary-import-modal" class="modal" tabindex="-1" role="dialog" hidden><div class="modal-content modal-content-medium">
+    <div class="modal-header"><div class="modal-title">Import Dictionaries</div></div>
+    <div class="modal-body">
+        <div id="dictionary-drop-file-zone">
+            <div id="dictionary-drag-drop-text">
+                <span class="icon" data-icon="book"></span>
+                <h1>Drag and drop dictionaries (.zip)</h1>
+                <h5>or click here to upload</h5>
+            </div>
+        </div>
+    </div>
+    <div class="modal-footer">
+        <button type="button" data-modal-action="hide" class="basic-only">Close</button>
+    </div>
+    <div class="modal-body advanced-only">
+        <p>Import dictionaries from URLs:</p>
+        <textarea type="text" id="dictionary-import-url-text"></textarea>
+    </div>
+    <div class="modal-footer advanced-only">
+        <button type="button" data-modal-action="hide" class="low-emphasis dictionary-database-mutating-input" id="dictionary-import-url-button">Import from URLs</button>
         <button type="button" data-modal-action="hide">Close</button>
     </div>
 </div></div>
-- 
cgit v1.2.3