Mirrors/text-generation-webui
1
0
Fork 0
mirror of https://github.com/oobabooga/text-generation-webui.git synced 2024-11-25 17:29:22 +01:00
Code Issues Packages Projects Releases Wiki Activity

Properly close the hover menu on mobile

Browse Source
This commit is contained in:
oobabooga 2023-09-13 11:10:46 -07:00
parent 9fc46d3c19
commit 7cd437e05c
3 changed files with 58 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
css/main.css
View File

@ -475,15 +475,11 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
bottom: 80%;
left: 0;
background-color: var(--background-fill-secondary);
z-index: 100;
z-index: 10000;
min-width: 300px;
flex-direction: column;
}
.hover-element:hover .hover-menu {
display: flex;
}
.hover-menu button {
width: 100%;
background: transparent !important;

64
js/main.js
View File

@ -208,24 +208,72 @@ for(i = 0; i < noBackgroundelements.length; i++) {
//------------------------------------------------
// Create the hover menu in the chat tab
// The show/hide events were adapted from:
// https://github.com/SillyTavern/SillyTavern/blob/6c8bd06308c69d51e2eb174541792a870a83d2d6/public/script.js
//------------------------------------------------
const buttonsInChat = document.getElementById("chat-tab").querySelectorAll("button");
const hoverMenu = document.getElementById('hover-menu');
var button = document.getElementById('hover-element-button');
var menu = document.getElementById('hover-menu');
function showMenu() {
menu.style.display = 'flex'; // Show the menu
}
function hideMenu() {
menu.style.display = 'none'; // Hide the menu
}
for (let i = 14; i >= 2; i--) {
const button = buttonsInChat[i];
hoverMenu.appendChild(button);
const thisButton = buttonsInChat[i];
menu.appendChild(thisButton);
if(i != 10) {
button.addEventListener("click", () => {
hoverMenu.style.display = 'none';
setTimeout(() => {
hoverMenu.style.display = '';
}, 2000);
thisButton.addEventListener("click", () => {
hideMenu();
});
}
}
function isMouseOverButtonOrMenu() {
return menu.matches(':hover') || button.matches(':hover');
}
button.addEventListener('mouseenter', function () {
showMenu();
});
button.addEventListener('click', function () {
showMenu();
});
// Add event listener for mouseleave on the button
button.addEventListener('mouseleave', function () {
// Delay to prevent menu hiding when the mouse leaves the button into the menu
setTimeout(function () {
if (!isMouseOverButtonOrMenu()) {
hideMenu();
}
}, 100);
});
// Add event listener for mouseleave on the menu
menu.addEventListener('mouseleave', function () {
// Delay to prevent menu hide when the mouse leaves the menu into the button
setTimeout(function () {
if (!isMouseOverButtonOrMenu()) {
hideMenu();
}
}, 100);
});
// Add event listener for click anywhere in the document
document.addEventListener('click', function (event) {
// Check if the click is outside the button/menu and the menu is visible
if (!isMouseOverButtonOrMenu() && menu.style.display === 'flex') {
hideMenu();
}
});
//------------------------------------------------
// Relocate the "Show controls" checkbox
//------------------------------------------------

2
modules/ui_chat.py
View File

@ -25,7 +25,7 @@ def create_ui():
with gr.Row():
with gr.Column(scale=1):
gr.HTML(value='<div class="hover-element" onclick="void(0)"><span style="width: 100px; display: block">&#9776;</span><div class="hover-menu" id="hover-menu"></div>', elem_id='gr-hover')
gr.HTML(value='<div class="hover-element" onclick="void(0)"><span style="width: 100px; display: block" id="hover-element-button">&#9776;</span><div class="hover-menu" id="hover-menu"></div>', elem_id='gr-hover')
with gr.Column(scale=10):
shared.gradio['textbox'] = gr.Textbox(label='', placeholder='Send a message', elem_id='chat-input')