From ddeb42ba5580c9282b3d17bf665abeced873d78c Mon Sep 17 00:00:00 2001
From: Cohee <18619528+Cohee1207@users.noreply.github.com>
Date: Sat, 18 Nov 2023 21:17:53 +0200
Subject: [PATCH] Close modal send form menus when clicking on button again +
 fix caption UI labels

---
 public/script.js                           | 16 ++++++++++++----
 public/scripts/extensions.js               | 14 ++++++++------
 public/scripts/extensions/caption/index.js |  8 ++++----
 3 files changed, 24 insertions(+), 14 deletions(-)

diff --git a/public/script.js b/public/script.js
index d0a678b5d..46cd6fc8c 100644
--- a/public/script.js
+++ b/public/script.js
@@ -646,7 +646,7 @@ let create_save = {
 };
 
 //animation right menu
-let animation_duration = 125;
+export let animation_duration = 125;
 let animation_easing = "ease-in-out";
 let popup_type = "";
 let chat_file_for_del = "";
@@ -8099,12 +8099,14 @@ jQuery(async function () {
 
     function showMenu() {
         showBookmarksButtons();
-        menu.stop().fadeIn(250);
+        // menu.stop()
+        menu.fadeIn(animation_duration);
         optionsPopper.update();
     }
 
     function hideMenu() {
-        menu.stop().fadeOut(250);
+        // menu.stop();
+        menu.fadeOut(animation_duration);
         optionsPopper.update();
     }
 
@@ -8112,7 +8114,13 @@ jQuery(async function () {
         return menu.is(':hover') || button.is(':hover');
     }
 
-    button.on('click', function () { showMenu(); });
+    button.on('click', function () {
+        if (menu.is(':visible')) {
+            hideMenu();
+        } else {
+            showMenu();
+        }
+    });
     button.on('blur', function () {
         //delay to prevent menu hiding when mouse leaves button into menu
         setTimeout(() => {
diff --git a/public/scripts/extensions.js b/public/scripts/extensions.js
index 254175bb2..836300768 100644
--- a/public/scripts/extensions.js
+++ b/public/scripts/extensions.js
@@ -1,4 +1,4 @@
-import { callPopup, eventSource, event_types, saveSettings, saveSettingsDebounced, getRequestHeaders, substituteParams, renderTemplate } from "../script.js";
+import { callPopup, eventSource, event_types, saveSettings, saveSettingsDebounced, getRequestHeaders, substituteParams, renderTemplate, animation_duration } from "../script.js";
 import { hideLoader, showLoader } from "./loader.js";
 import { isSubsetOf } from "./utils.js";
 export {
@@ -359,15 +359,17 @@ function addExtensionsButtonAndMenu() {
 
     $(button).on('click', function () {
         popper.update()
-        dropdown.fadeIn(250);
+        if (!dropdown.is(':visible')) {
+            dropdown.fadeIn(animation_duration);
+        }
     });
 
     $("html").on('touchstart mousedown', function (e) {
-        let clickTarget = $(e.target);
+        // let clickTarget = $(e.target);
         if (dropdown.is(':visible')
-            && clickTarget.closest(button).length == 0
-            && clickTarget.closest(dropdown).length == 0) {
-            $(dropdown).fadeOut(250);
+            /*&& clickTarget.closest(button).length == 0
+            && clickTarget.closest(dropdown).length == 0*/) {
+            $(dropdown).fadeOut(animation_duration);
         }
     });
 }
diff --git a/public/scripts/extensions/caption/index.js b/public/scripts/extensions/caption/index.js
index 7849893a8..608be9589 100644
--- a/public/scripts/extensions/caption/index.js
+++ b/public/scripts/extensions/caption/index.js
@@ -325,7 +325,7 @@ jQuery(function () {
                     <div class="inline-drawer-icon fa-solid fa-circle-chevron-down down"></div>
                 </div>
                 <div class="inline-drawer-content">
-                    <label for="caption_source">Source:</label>
+                    <label for="caption_source">Source</label>
                     <select id="caption_source" class="text_pole">
                         <option value="local">Local</option>
                         <option value="multimodal">Multimodal (OpenAI / OpenRouter)</option>
@@ -350,14 +350,14 @@ jQuery(function () {
                         </div>
                     </div>
                     <div id="caption_prompt_block">
-                        <label for="caption_prompt">Caption Prompt (Multimodal):</label>
+                        <label for="caption_prompt">Caption Prompt</label>
                         <textarea id="caption_prompt" class="text_pole" rows="1" placeholder="&lt; Use default &gt;">${PROMPT_DEFAULT}</textarea>
                     </div>
-                    <label for="caption_template">Message Template: <small>(use <tt>{{caption}}</tt> macro)</small></label>
+                    <label for="caption_template">Message Template <small>(use <code>{{caption}}</code> macro)</small></label>
                     <textarea id="caption_template" class="text_pole" rows="2" placeholder="&lt; Use default &gt;">${TEMPLATE_DEFAULT}</textarea>
                     <label class="checkbox_label margin-bot-10px" for="caption_refine_mode">
                         <input id="caption_refine_mode" type="checkbox" class="checkbox">
-                        Edit captions before generation
+                        Edit captions before saving
                     </label>
                 </div>
             </div>