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/css/settings.css | 72 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 72 insertions(+)

(limited to 'ext/css')

diff --git a/ext/css/settings.css b/ext/css/settings.css
index ba82ecf7..d23062b1 100644
--- a/ext/css/settings.css
+++ b/ext/css/settings.css
@@ -53,6 +53,8 @@
     --modal-height: 400px;
     --modal-width-small: 400px;
     --modal-height-small: 200px;
+    --modal-width-medium: 600px;
+    --modal-height-medium: 400px;
     --modal-transition-offset: -64px;
     --badge-size: 16px;
 
@@ -587,6 +589,9 @@ a.heading-link-light {
 :root:not([data-advanced=true]) .advanced-only {
     display: none;
 }
+:root:not([data-advanced=false]) .basic-only {
+    display: none;
+}
 .settings-item.settings-item-button,
 a.settings-item.settings-item-button {
     cursor: pointer;
@@ -769,6 +774,12 @@ select.short-height {
     height: auto;
     max-height: 100%;
 }
+.modal-content.modal-content-medium {
+    width: var(--modal-width-medium);
+    min-height: var(--modal-height-medium);
+    height: auto;
+    max-height: 100%;
+}
 .modal-content.modal-content-full {
     width: var(--content-width);
     height: 100%;
@@ -2352,6 +2363,67 @@ input[type=number].dictionary-priority {
 }
 
 
+/* Dictionary Import */
+#dictionary-import-url-text {
+    width: 100%;
+    height: 4em;
+    white-space: nowrap;
+    resize: none;
+}
+
+#dictionary-import-url-button {
+    flex: auto;
+}
+
+#dictionary-drop-file-zone {
+    transition: background-color var(--animation-duration) ease-in-out, border var(--animation-duration) ease-in-out;
+    border: 2px dashed rgb(204, 204, 204);
+    border-radius: 5px;
+    flex: auto;
+    min-height: 20em;
+    user-select: none;
+    text-align: center;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+#dictionary-drop-file-zone:hover {
+    background-color: rgba(28, 116, 233, 0.05);
+    border: 2px dashed var(--accent-color);
+}
+
+#dictionary-drop-file-zone.drag-over {
+    border: 2px solid var(--accent-color);
+    background-color: rgb(191, 209, 255);
+}
+
+#dictionary-drag-drop-text {
+    pointer-events: none;
+}
+
+#dictionary-drag-drop-text>.icon {
+    display: block;
+    margin: auto;
+    background-color: var(--button-default-icon-color);
+    width: var(--outline-item-icon-size);
+    height: var(--outline-item-icon-size);
+}
+
+#dictionary-drag-drop-text h1,
+#dictionary-drag-drop-text h5 {
+    margin: 0;
+    padding: 0;
+    font-weight: normal;
+    border-bottom: none;
+}
+
+#dictionary-import-modal .modal-body:has(#dictionary-drop-file-zone) {
+    display: flex;
+}
+
+
 /* Generic layouts */
 .margin-above {
     margin-top: 0.85em;
-- 
cgit v1.2.3