From 4bbb4b5e1e703ceea6d2ba8cebdbd8301a831cd2 Mon Sep 17 00:00:00 2001
From: JeLuF <jf@mormo.org>
Date: Tue, 27 Jun 2023 00:00:27 +0200
Subject: [PATCH] Modifier settings dialog improvements - Use <dialog> for the
 Modifier settings (solves z-order issues) - Harmonize dialog design. Use
 similar header style for modifier settings and tiled image download dialogs

---
 ui/index.html                                | 47 ++++++++++++--------
 ui/media/css/main.css                        | 24 ++++++++--
 ui/media/css/modifier-thumbnails.css         |  4 +-
 ui/media/js/image-modifiers.js               | 31 +++++++++----
 ui/plugins/ui/tiled-image-download.plugin.js | 23 +++++-----
 5 files changed, 85 insertions(+), 44 deletions(-)

diff --git a/ui/index.html b/ui/index.html
index affa8dbc..b53909f0 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -72,8 +72,8 @@
                         <textarea id="negative_prompt" name="negative_prompt" placeholder="list the things to remove from the image (e.g. fog, green)"></textarea>
                     </div>
                     <div id="editor-modifiers">
-                        <div id="editor-modifiers-header">
-                            <div id="modifiers-header-left">
+                        <div id="editor-modifiers-header" class="dialog-header">
+                            <div id="modifiers-header-left" class="dialog-header-left">
                                 <h4>Image Modifiers</h4>
                                 <span>(drawing style, camera, etc.)</span>
                             </div>
@@ -525,25 +525,34 @@
         </div>
     </div>
 
-    <div id="modifier-settings-config" class="popup" tabindex="0">
-        <div>
-            <i class="close-button fa-solid fa-xmark"></i>
-            <h1>Modifier Settings</h1>
-            <p>Set your custom modifiers (one per line)</p>
-            <textarea id="custom-modifiers-input" placeholder="Enter your custom modifiers, one-per-line" spellcheck="false"></textarea>
-            <p><small><b>Tip:</b> You can include special characters like {} () [] and |. You can also put multiple comma-separated phrases in a single line, to make a single modifier that combines all of those.</small></p>
-            <div id="editor-modifiers-entries-toolbar">
-                <label for="preview-image">Image Style:</label>
-                <select id="preview-image" name="preview-image" value="portrait">
-                    <option value="portrait" selected="">Face</option>
-                    <option value="landscape">Landscape</option>
-                </select>
-                &nbsp;
-                <label for="modifier-card-size-slider">Thumbnail Size:</label>
-                <input id="modifier-card-size-slider" name="modifier-card-size-slider" value="0" type="range" min="-2" max="3">
+    <dialog id="modifier-settings-config">
+        <div id="modifier-settings-header" class="dialog-header">
+            <div id="modifier-settings-header-left" class="dialog-header-left">
+                <h4>Modifier Settings</h4>
+                <span>Set your custom modifiers (one per line)</span>
+            </div>
+            <div id="modifier-settings-header-right">
+                <i id="modifier-settings-close-button" class="fa-solid fa-xmark fa-lg"></i>
             </div>
         </div>
-    </div>
+        <textarea id="custom-modifiers-input" placeholder="Enter your custom modifiers, one-per-line" spellcheck="false"></textarea>
+        <div>
+            <small>
+                <b>Tip:</b> You can include special characters like {} () [] and |. You can also put multiple comma-separated
+                phrases in a single line, to make a single modifier that combines all of those.
+            </small>
+        </div>
+        <div id="editor-modifiers-entries-toolbar">
+            <label for="preview-image">Image Style:</label>
+            <select id="preview-image" name="preview-image" value="portrait">
+                <option value="portrait" selected="">Face</option>
+                <option value="landscape">Landscape</option>
+            </select>
+            &nbsp;
+            <label for="modifier-card-size-slider">Thumbnail Size:</label>
+            <input id="modifier-card-size-slider" name="modifier-card-size-slider" value="0" type="range" min="-2" max="3">
+        </div>
+    </dialog>
 
     <div id="image-editor" class="popup image-editor-popup">
         <div>
diff --git a/ui/media/css/main.css b/ui/media/css/main.css
index a84dbf81..9292b656 100644
--- a/ui/media/css/main.css
+++ b/ui/media/css/main.css
@@ -184,7 +184,7 @@ code {
 #editor label {
     font-weight: normal;
 }
-#editor h4 {
+.dialog-header h4 {
     margin: 0px;
     white-space: nowrap;
 }
@@ -326,7 +326,7 @@ button#resume {
     max-height: 100%;
     flex: 1;
 }
-#editor-modifiers-header {
+.dialog-header {
     background-color: var(--background-color4);
     padding: 0.5em;
     border-bottom: 1px solid rgb(255 255 255 / 10%);
@@ -369,7 +369,7 @@ button#resume {
     flex-direction: column;
     grid-gap: 0.1em;
 }
-#modifiers-header-left span {
+.dialog-header-left span {
     font-size: 0.8em;
     color: rgb(127 127 127);
     font-weight: 200;
@@ -467,6 +467,24 @@ button#resume {
     -moz-user-select: none;
     -ms-user-select: none;
 }
+
+dialog {
+    background: var(--background-color2);
+    color: var(--text-color);
+    border-radius: 6px;
+    border: 2px solid rgb(255 255 255 / 10%);
+    padding: 0px;
+}
+
+dialog::backdrop {
+    background: rgba(0, 0, 0, 0.5);
+}
+
+dialog > div {
+    padding: 0.5em;
+}
+
+
 img {
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 6px 20px 0 rgba(0, 0, 0, 0.15);
 }
diff --git a/ui/media/css/modifier-thumbnails.css b/ui/media/css/modifier-thumbnails.css
index 02b91fce..3aca3896 100644
--- a/ui/media/css/modifier-thumbnails.css
+++ b/ui/media/css/modifier-thumbnails.css
@@ -173,6 +173,8 @@
     vertical-align: middle;
 }
 #modifier-settings-config textarea {
+    margin-left: 5%;
+    margin-top: 2ex;
     width: 90%;
     height: 150px;
 }
@@ -187,4 +189,4 @@
 }
 .support-long-label .modifier-card-overlay:hover ~ .modifier-card-container .regular-label {
     display: none;
-}
\ No newline at end of file
+}
diff --git a/ui/media/js/image-modifiers.js b/ui/media/js/image-modifiers.js
index 5f3a9014..465fc1be 100644
--- a/ui/media/js/image-modifiers.js
+++ b/ui/media/js/image-modifiers.js
@@ -16,9 +16,10 @@ let modifierSettingsBtn = document.querySelector("#modifier-settings-btn")
 let modifiersContainerSizeBtn = document.querySelector("#modifiers-container-size-btn")
 let modifiersCloseBtn = document.querySelector("#modifiers-close-button")
 let modifiersCollapsiblesBtn = document.querySelector("#modifiers-action-collapsibles-btn")
-let modifierSettingsOverlay = document.querySelector("#modifier-settings-config")
+let modifierSettingsDialog = document.querySelector("#modifier-settings-config")
 let customModifiersTextBox = document.querySelector("#custom-modifiers-input")
 let customModifierEntriesToolbar = document.querySelector("#editor-modifiers-entries-toolbar")
+let modifierSettingsCloseBtn = document.querySelector("#modifier-settings-close-button")
 
 const modifierThumbnailPath = "media/modifier-thumbnails"
 const activeCardClass = "modifier-card-active"
@@ -415,7 +416,7 @@ function hideModifierContainer() {
 function checkIfClickedOutsideDropdownElem(e) {
     const clickedElement = e.target
 
-    const clickedInsideSpecificElems = [modifierDropdown, editorModifiersContainer, modifierSettingsOverlay].some((div) => 
+    const clickedInsideSpecificElems = [modifierDropdown, editorModifiersContainer, modifierSettingsDialog].some((div) => 
         div && (div.contains(clickedElement) || div === clickedElement))
 
     if (!clickedInsideSpecificElems && !modifierPanelFreezed) {
@@ -452,17 +453,17 @@ customModifiersTextBox.addEventListener("change", saveCustomModifiers)
 modifierCardSizeSlider.onchange = () => resizeModifierCards(modifierCardSizeSlider.value)
 previewImageField.onchange = () => changePreviewImages(previewImageField.value)
 
-modifierSettingsOverlay.addEventListener("keydown", function(e) {
+modifierSettingsDialog.addEventListener("keydown", function(e) {
     switch (e.key) {
         case "Escape": // Escape to cancel
             customModifiersTextBox.value = customModifiersInitialContent // undo the changes
-            modifierSettingsOverlay.classList.remove("active")
+            modifierSettingsDialog.close()
             e.stopPropagation()
             break
         case "Enter":
             if (e.ctrlKey) {
                 // Ctrl+Enter to confirm
-                modifierSettingsOverlay.classList.remove("active")
+                modifierSettingsDialog.close()
                 e.stopPropagation()
                 break
             }
@@ -538,7 +539,7 @@ modifiersContainerSizeBtn.addEventListener("click", (e) => {
 })
 
 modifierSettingsBtn.addEventListener("click", (e) => {
-    modifierSettingsOverlay.classList.add("active")
+    modifierSettingsDialog.showModal()
     customModifiersTextBox.setSelectionRange(0, 0)
     customModifiersTextBox.focus()
     customModifiersInitialContent = customModifiersTextBox.value // preserve the initial content
@@ -551,11 +552,25 @@ modifiersCloseBtn.addEventListener("click", (e) => {
 
 // prevents the modifier panel closing at the same time as the settings overlay
 new MutationObserver(() => {
-    const isActive = modifierSettingsOverlay.classList.contains("active")
+    const isActive = modifierSettingsDialog.open
 
     if (!isActive) {
         modifierPanelFreezed = true
 
         setTimeout(() => modifierPanelFreezed = false, 25)
     }
-}).observe(modifierSettingsOverlay, { attributes: true })
\ No newline at end of file
+}).observe(modifierSettingsDialog, { attributes: true })
+
+modifierSettingsCloseBtn.addEventListener("click", (e) => {
+    modifierSettingsDialog.close()    
+})
+
+modifierSettingsDialog.addEventListener('click', function (event) {
+    var rect = modifierSettingsDialog.getBoundingClientRect();
+    var isInDialog=(rect.top <= event.clientY && event.clientY <= rect.top + rect.height
+      && rect.left <= event.clientX && event.clientX <= rect.left + rect.width);
+    if (!isInDialog) {
+        modifierSettingsDialog.close();
+    }
+});
+
diff --git a/ui/plugins/ui/tiled-image-download.plugin.js b/ui/plugins/ui/tiled-image-download.plugin.js
index 0fe00c2e..277234e2 100644
--- a/ui/plugins/ui/tiled-image-download.plugin.js
+++ b/ui/plugins/ui/tiled-image-download.plugin.js
@@ -30,7 +30,15 @@
     // ---- Add HTML
     document.getElementById('container').lastElementChild.insertAdjacentHTML("afterend",
         `<dialog id="download-tiled-image-dialog">
-            <h1>Download tiled image</h1>
+           <div class="dialog-header">
+               <div class="dialog-header-left">
+                   <h4>Download tiled image</h4>
+                   <span>Generate a larger image from this tile</span>
+               </div>
+               <div id="modifier-settings-header-right">
+                   <i id="downnload-tiled-close-button" class="fa-solid fa-xmark fa-lg"></i>
+               </div>
+           </div>
             <div class="download-tiled-image dtim-container">
                 <div class="download-tiled-image-top">
                     <div class="tab-container">
@@ -130,6 +138,7 @@
 
     // ---- Close popup
     document.getElementById("dti-cancel").addEventListener("click", (e) => downloadTiledImageDialog.close())
+    document.getElementById("downnload-tiled-close-button").addEventListener("click", (e) => downloadTiledImageDialog.close())
     downloadTiledImageDialog.addEventListener('click', function (event) {
         var rect = downloadTiledImageDialog.getBoundingClientRect();
         var isInDialog=(rect.top <= event.clientY && event.clientY <= rect.top + rect.height
@@ -142,18 +151,6 @@
     // ---- Stylesheet
     const styleSheet = document.createElement("style")
     styleSheet.textContent = `
-        dialog {
-          background: var(--background-color2);
-          color: var(--text-color);
-          border-radius: 7px;
-          border: 1px solid var(--background-color3);
-        }
-
-        dialog::backdrop {
-          background: rgba(0, 0, 0, 0.5);
-        }
-
-
         button[disabled] {
           opacity: 0.5;
         }