improve options&extensions menu display..again..

public/script.js

@@ -6233,46 +6233,39 @@ $(document).ready(function () {
         }
     });
 
-    let isAnimating = false;
+    var button = $('#options_button');
-    const optionsDiv = $("#options");
+    var menu = $('#options');
-    const optionsButtonDiv = $("#options_button");
 
-    function toggleOptions() {
+    function showMenu() {
         showBookmarksButtons();
-        if ((isAnimating) ||
+        menu.stop().fadeIn(250);
-            (optionsDiv.is(":visible") && optionsDiv.is(":hover"))) {
-            return;
-        }
-        isAnimating = true;
         optionsPopper.update();
-        optionsDiv.toggle(200, () => isAnimating = false);
     }
 
-    //show/hide options on hoverstate/click
+    function hideMenu() {
-    optionsButtonDiv.on('mouseenter click', () => {
+        menu.stop().fadeOut(250);
-        if (optionsDiv.is(':visible')) return;
+        optionsPopper.update();
-        setTimeout(() => toggleOptions(), 200);
+    }
+
+    function isMouseOverButtonOrMenu() {
+        return menu.is(':hover') || button.is(':hover');
+    }
+
+    button.on('mouseenter click', function () { showMenu(); });
+    button.on('mouseleave', function () {
+        //delay to prevent menu hiding when mouse leaves button into menu
+        setTimeout(() => {
+            if (!isMouseOverButtonOrMenu()) { hideMenu(); }
+        }, 100)
     });
-
+    menu.on('mouseleave', function () {
-    optionsButtonDiv.on('mouseleave', () => {
+        //delay to prevent menu hide when mouseleaves menu into button
-        if (optionsDiv.is(':hidden')) return;
+        setTimeout(() => {
-        setTimeout(() => toggleOptions(), 200);
+            if (!isMouseOverButtonOrMenu()) { hideMenu(); }
+        }, 100)
     });
-
+    $(document).on('click', function () {
-    optionsDiv.on('mouseleave', () => {
+        if (!isMouseOverButtonOrMenu() && menu.is(':visible')) { hideMenu(); }
-        setTimeout(() => toggleOptions(), 200);
-    })
-
-    //close options menu if open and user clicked outside it and button
-    $(document).on('click touchend', (e) => {
-        const target = e.target;
-        if (![optionsDiv[0], optionsButtonDiv[0]].includes(target) &&
-            !optionsDiv.is(':hover') &&
-            !optionsButtonDiv.is(':hover') &&
-            !isAnimating &&
-            optionsDiv.is(":visible")) {
-            setTimeout(() => toggleOptions(), 200);
-        }
     });
 
     ///////////// OPTIMIZED LISTENERS FOR LEFT SIDE OPTIONS POPUP MENU //////////////////////
@@ -6336,6 +6329,8 @@ $(document).ready(function () {
             }
             is_delete_mode = true;
         }
+        console.log('clicked item, should hide options');
+        hideMenu();
     });
 
     //////////////////////////////////////////////////////////////////////////////////////////////
@@ -6562,7 +6557,7 @@ $(document).ready(function () {
         if (this_chid !== undefined || selected_group) {
             // Previously system messages we're allowed to be edited
             /*const message = $(this).closest(".mes");
-
+    
             if (message.data("isSystem")) {
                 return;
             }*/

public/scripts/extensions.js

@@ -236,7 +236,7 @@ function addExtensionsButtonAndMenu() {
 
     $(button).on('click', function () {
         popper.update()
-        dropdown.toggle(200);
+        dropdown.fadeIn(250);
     });
 
     $("html").on('touchstart mousedown', function (e) {
@@ -244,7 +244,7 @@ function addExtensionsButtonAndMenu() {
         if (dropdown.is(':visible')
             && clickTarget.closest(button).length == 0
             && clickTarget.closest(dropdown).length == 0) {
-            $(dropdown).hide(200);
+            $(dropdown).fadeOut(250);
         }
     });
 }

public/scripts/extensions/floating-prompt/index.js

@@ -165,6 +165,9 @@ function onANMenuItemClick() {
             }, 250);
 
         }
+        //duplicate options menu close handler from script.js
+        //because this listener takes priority
+        $("#options").stop().fadeOut(250);
     } else {
         toastr.warning(`Select a character before trying to use Author's Note`, '', { timeOut: 2000 });
     }

public/scripts/extensions/stable-diffusion/index.js

@@ -583,8 +583,9 @@ function addSDGenButtons() {
     `
     const dropdownHtml = `
     <div id="sd_dropdown">
-    <span>Send me a picture of:</span>
+    
         <ul class="list-group">
+        <span>Send me a picture of:</span>
             <li class="list-group-item" id="sd_you" data-value="you">Yourself</li>
             <li class="list-group-item" id="sd_face" data-value="face">Your Face</li>
             <li class="list-group-item" id="sd_me" data-value="me">Me</li>
@@ -608,7 +609,7 @@ function addSDGenButtons() {
     messageButton.hide();
 
     let popper = Popper.createPopper(button.get(0), dropdown.get(0), {
-        placement: 'bottom',
+        placement: 'top',
     });
 
     $(document).on('click', '.sd_message_gen', sdMessageButton);
@@ -619,10 +620,10 @@ function addSDGenButtons() {
         if (target.is(button) && !dropdown.is(":visible") && $("#send_but").css('display') === 'flex') {
             e.preventDefault();
 
-            dropdown.show(200);
+            dropdown.fadeIn(250);
             popper.update();
         } else {
-            dropdown.hide(200);
+            dropdown.fadeOut(250);
         }
     });
 }

public/style.css

@@ -562,7 +562,9 @@ hr {
 
 .options-content a,
 #extensionsMenu>div,
-.list-group>div {
+.list-group>div,
+.list-group .list-group-item,
+#sd_dropdown .list-group span {
     color: var(--SmartThemeBodyColor);
     padding: 5px 5px;
     padding-bottom: 5px;
@@ -4594,4 +4596,4 @@ body.waifuMode #avatar_zoom_popup {
         overflow-y: auto;
         overflow-x: hidden;
     }
-}
+}