allow child windows to center relative to parent window

src/UI/Settings/UIWindowSettings.js

@@ -336,6 +336,7 @@ async function UIWindowSettings(options){
                 window_options:{
                     parent_uuid: $(el_window).attr('data-element_uuid'),
                     disable_parent_window: true,
+                    parent_center: true,
                 }
             });
         })
@@ -346,6 +347,7 @@ async function UIWindowSettings(options){
                 window_options:{
                     parent_uuid: $(el_window).attr('data-element_uuid'),
                     disable_parent_window: true,
+                    parent_center: true,
                 }
             });
         })
@@ -355,6 +357,7 @@ async function UIWindowSettings(options){
                 window_options:{
                     parent_uuid: $(el_window).attr('data-element_uuid'),
                     disable_parent_window: true,
+                    parent_center: true,
                 }
             });
         })
@@ -364,12 +367,19 @@ async function UIWindowSettings(options){
                 window_options:{
                     parent_uuid: $(el_window).attr('data-element_uuid'),
                     disable_parent_window: true,
+                    parent_center: true,
                 }
             });
         })
 
         $(el_window).find('.change-ui-colors').on('click', function (e) {
-            UIWindowThemeDialog();
+            UIWindowThemeDialog({
+                window_options:{
+                    parent_uuid: $(el_window).attr('data-element_uuid'),
+                    disable_parent_window: true,
+                    parent_center: true,
+                }
+            });
         })
 
         $(el_window).find('.manage-sessions').on('click', function (e) {
@@ -377,6 +387,7 @@ async function UIWindowSettings(options){
                 window_options:{
                     parent_uuid: $(el_window).attr('data-element_uuid'),
                     disable_parent_window: true,
+                    parent_center: true,
                 }
             });
         })

src/UI/UIWindow.js

@@ -520,6 +520,25 @@ async function UIWindow(options) {
         });
     }
 
+    // =====================================
+    // Center relative to parent window
+    // =====================================
+    if(options.parent_center && options.parent_uuid){
+        const $parent_window = $(`.window[data-element_uuid="${options.parent_uuid}"]`);
+        const parent_window_width = $parent_window.width();
+        const parent_window_height = $parent_window.height();
+        const parent_window_left = $parent_window.offset().left;
+        const parent_window_top = $parent_window.offset().top;
+        const window_height = $(el_window).height();
+        const window_width = $(el_window).width();
+        options.left = parent_window_left + parent_window_width/2 - window_width/2;
+        options.top = parent_window_top + parent_window_height/2 - window_height/2;
+        $(el_window).css({
+            'left': options.left + 'px',
+            'top': options.top + 'px',
+        });
+    }
+
     // onAppend() - using show() is a hack to make sure window is visible AND onAppend is called when
     // window is actually appended and usable.
     // NOTE: there is another is_visible condition below

src/UI/UIWindowThemeDialog.js

@@ -1,6 +1,7 @@
 import UIWindow from "./UIWindow.js";
 
-const UIWindowThemeDialog = async function UIWindowThemeDialog () {
+const UIWindowThemeDialog = async function UIWindowThemeDialog (options) {
+    options = options ?? {};
     const services = globalThis.services;
     const svc_theme = services.get('theme');
 
@@ -43,7 +44,8 @@ const UIWindowThemeDialog = async function UIWindowThemeDialog () {
                 var(--primary-alpha))`,
             'backdrop-filter': 'blur(3px)',
             
-        }
+        },
+        ...options.window_options,
     });
     const w_body = w.querySelector('.window-body');