Close modal send form menus when clicking on button again + fix caption UI labels

This commit is contained in:
Cohee 2023-11-18 21:17:53 +02:00
parent 4999fbd97c
commit ddeb42ba55
3 changed files with 24 additions and 14 deletions

View File

@ -646,7 +646,7 @@ let create_save = {
}; };
//animation right menu //animation right menu
let animation_duration = 125; export let animation_duration = 125;
let animation_easing = "ease-in-out"; let animation_easing = "ease-in-out";
let popup_type = ""; let popup_type = "";
let chat_file_for_del = ""; let chat_file_for_del = "";
@ -8099,12 +8099,14 @@ jQuery(async function () {
function showMenu() { function showMenu() {
showBookmarksButtons(); showBookmarksButtons();
menu.stop().fadeIn(250); // menu.stop()
menu.fadeIn(animation_duration);
optionsPopper.update(); optionsPopper.update();
} }
function hideMenu() { function hideMenu() {
menu.stop().fadeOut(250); // menu.stop();
menu.fadeOut(animation_duration);
optionsPopper.update(); optionsPopper.update();
} }
@ -8112,7 +8114,13 @@ jQuery(async function () {
return menu.is(':hover') || button.is(':hover'); 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 () { button.on('blur', function () {
//delay to prevent menu hiding when mouse leaves button into menu //delay to prevent menu hiding when mouse leaves button into menu
setTimeout(() => { setTimeout(() => {

View File

@ -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 { hideLoader, showLoader } from "./loader.js";
import { isSubsetOf } from "./utils.js"; import { isSubsetOf } from "./utils.js";
export { export {
@ -359,15 +359,17 @@ function addExtensionsButtonAndMenu() {
$(button).on('click', function () { $(button).on('click', function () {
popper.update() popper.update()
dropdown.fadeIn(250); if (!dropdown.is(':visible')) {
dropdown.fadeIn(animation_duration);
}
}); });
$("html").on('touchstart mousedown', function (e) { $("html").on('touchstart mousedown', function (e) {
let clickTarget = $(e.target); // let clickTarget = $(e.target);
if (dropdown.is(':visible') if (dropdown.is(':visible')
&& clickTarget.closest(button).length == 0 /*&& clickTarget.closest(button).length == 0
&& clickTarget.closest(dropdown).length == 0) { && clickTarget.closest(dropdown).length == 0*/) {
$(dropdown).fadeOut(250); $(dropdown).fadeOut(animation_duration);
} }
}); });
} }

View File

@ -325,7 +325,7 @@ jQuery(function () {
<div class="inline-drawer-icon fa-solid fa-circle-chevron-down down"></div> <div class="inline-drawer-icon fa-solid fa-circle-chevron-down down"></div>
</div> </div>
<div class="inline-drawer-content"> <div class="inline-drawer-content">
<label for="caption_source">Source:</label> <label for="caption_source">Source</label>
<select id="caption_source" class="text_pole"> <select id="caption_source" class="text_pole">
<option value="local">Local</option> <option value="local">Local</option>
<option value="multimodal">Multimodal (OpenAI / OpenRouter)</option> <option value="multimodal">Multimodal (OpenAI / OpenRouter)</option>
@ -350,14 +350,14 @@ jQuery(function () {
</div> </div>
</div> </div>
<div id="caption_prompt_block"> <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> <textarea id="caption_prompt" class="text_pole" rows="1" placeholder="&lt; Use default &gt;">${PROMPT_DEFAULT}</textarea>
</div> </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> <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"> <label class="checkbox_label margin-bot-10px" for="caption_refine_mode">
<input id="caption_refine_mode" type="checkbox" class="checkbox"> <input id="caption_refine_mode" type="checkbox" class="checkbox">
Edit captions before generation Edit captions before saving
</label> </label>
</div> </div>
</div> </div>