diff options
| author | Kuuuube <61125188+Kuuuube@users.noreply.github.com> | 2024-05-21 13:48:29 -0400 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2024-05-21 17:48:29 +0000 |
| commit | 6301ba6b33fc763872d9c500cd257ac5c7ffbb44 (patch) | |
| tree | 894d0bfa12ac8dcd56f5d4dd50ce9885adccea08 /ext/settings.html | |
| parent | 02c60eea797b9548328bd160b453dd95a54b1641 (diff) | |
Rework dictionary import UX (#937)24.5.21.0
* 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
Diffstat (limited to 'ext/settings.html')
| -rw-r--r-- | ext/settings.html | 26 |
1 files changed, 25 insertions, 1 deletions
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> |