mirror of
https://github.com/oobabooga/text-generation-webui.git
synced 2025-06-07 06:06:20 -04:00
UI: Move 'Show controls' inside the hover menu
This commit is contained in:
oobabooga
parent
85f2f01a3a
commit
98a7508a99
3 changed files with 51 additions and 66 deletions
52
css/main.css
52
css/main.css
|
|
@ -582,7 +582,6 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
|
|||
|
||||
#chat-input {
|
||||
padding: 0;
|
||||
padding-top: 18px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
}
|
||||
|
|
@ -661,31 +660,6 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
|
|||
}
|
||||
}
|
||||
|
||||
#show-controls {
|
||||
position: absolute;
|
||||
background-color: transparent;
|
||||
border: 0 !important;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
#show-controls label {
|
||||
z-index: 1000;
|
||||
position: absolute;
|
||||
right: 30px;
|
||||
top: 10px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.dark #show-controls span {
|
||||
color: var(--neutral-400);
|
||||
}
|
||||
|
||||
#show-controls span {
|
||||
color: var(--neutral-600);
|
||||
}
|
||||
|
||||
#typing-container {
|
||||
display: none;
|
||||
position: absolute;
|
||||
|
|
@ -785,6 +759,32 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
|
|||
background: var(--selected-item-color-dark) !important;
|
||||
}
|
||||
|
||||
#show-controls {
|
||||
height: 36px;
|
||||
border-top: 1px solid var(--border-color-dark) !important;
|
||||
border-left: 1px solid var(--border-color-dark) !important;
|
||||
border-right: 1px solid var(--border-color-dark) !important;
|
||||
border-radius: 0;
|
||||
border-bottom: 0 !important;
|
||||
background-color: var(--darker-gray);
|
||||
padding-top: 3px;
|
||||
padding-left: 4px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#show-controls label {
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
font-weight: bold;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
padding-right: 12px;
|
||||
}
|
||||
|
||||
#show-controls label input {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.transparent-substring {
|
||||
opacity: 0.333;
|
||||
}
|
||||
|
|
|
|||
40
js/main.js
40
js/main.js
|
|
@ -277,7 +277,7 @@ for (i = 0; i < slimDropdownElements.length; i++) {
|
|||
// The show/hide events were adapted from:
|
||||
// https://github.com/SillyTavern/SillyTavern/blob/6c8bd06308c69d51e2eb174541792a870a83d2d6/public/script.js
|
||||
//------------------------------------------------
|
||||
var buttonsInChat = document.querySelectorAll("#chat-tab #chat-buttons button");
|
||||
var buttonsInChat = document.querySelectorAll("#chat-tab #chat-buttons button, #chat-tab #chat-buttons #show-controls");
|
||||
var button = document.getElementById("hover-element-button");
|
||||
var menu = document.getElementById("hover-menu");
|
||||
var istouchscreen = (navigator.maxTouchPoints > 0) || "ontouchstart" in document.documentElement;
|
||||
|
|
@ -298,18 +298,21 @@ if (buttonsInChat.length > 0) {
|
|||
const thisButton = buttonsInChat[i];
|
||||
menu.appendChild(thisButton);
|
||||
|
||||
thisButton.addEventListener("click", () => {
|
||||
hideMenu();
|
||||
});
|
||||
// Only apply transformations to button elements
|
||||
if (thisButton.tagName.toLowerCase() === 'button') {
|
||||
thisButton.addEventListener("click", () => {
|
||||
hideMenu();
|
||||
});
|
||||
|
||||
const buttonText = thisButton.textContent;
|
||||
const matches = buttonText.match(/(\(.*?\))/);
|
||||
|
||||
const buttonText = thisButton.textContent;
|
||||
const matches = buttonText.match(/(\(.*?\))/);
|
||||
|
||||
if (matches && matches.length > 1) {
|
||||
// Apply the transparent-substring class to the matched substring
|
||||
const substring = matches[1];
|
||||
const newText = buttonText.replace(substring, ` <span class="transparent-substring">${substring.slice(1, -1)}</span>`);
|
||||
thisButton.innerHTML = newText;
|
||||
if (matches && matches.length > 1) {
|
||||
// Apply the transparent-substring class to the matched substring
|
||||
const substring = matches[1];
|
||||
const newText = buttonText.replace(substring, ` <span class="transparent-substring">${substring.slice(1, -1)}</span>`);
|
||||
thisButton.innerHTML = newText;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -382,21 +385,10 @@ document.addEventListener("click", function (event) {
|
|||
}
|
||||
});
|
||||
|
||||
//------------------------------------------------
|
||||
// Relocate the "Show controls" checkbox
|
||||
//------------------------------------------------
|
||||
var elementToMove = document.getElementById("show-controls");
|
||||
var parent = elementToMove.parentNode;
|
||||
for (var i = 0; i < 2; i++) {
|
||||
parent = parent.parentNode;
|
||||
}
|
||||
|
||||
parent.insertBefore(elementToMove, parent.firstChild);
|
||||
|
||||
//------------------------------------------------
|
||||
// Position the chat input
|
||||
//------------------------------------------------
|
||||
document.getElementById("show-controls").parentNode.classList.add("chat-input-positioned");
|
||||
document.getElementById("chat-input-row").classList.add("chat-input-positioned");
|
||||
|
||||
//------------------------------------------------
|
||||
// Focus on the chat input
|
||||
|
|
|
|||
|
|
@ -55,7 +55,6 @@ def create_ui():
|
|||
|
||||
with gr.Column(scale=10, elem_id='chat-input-container'):
|
||||
shared.gradio['textbox'] = gr.MultimodalTextbox(label='', placeholder='Send a message', file_types=['text', '.pdf'], file_count="multiple", elem_id='chat-input', elem_classes=['add_scrollbar'])
|
||||
shared.gradio['show_controls'] = gr.Checkbox(value=shared.settings['show_controls'], label='Show controls (Ctrl+S)', elem_id='show-controls')
|
||||
shared.gradio['typing-dots'] = gr.HTML(value='<div class="typing"><span></span><span class="dot1"></span><span class="dot2"></span></div>', label='typing', elem_id='typing-container')
|
||||
|
||||
with gr.Column(scale=1, elem_id='generate-stop-container'):
|
||||
|
|
@ -65,21 +64,15 @@ def create_ui():
|
|||
|
||||
# Hover menu buttons
|
||||
with gr.Column(elem_id='chat-buttons'):
|
||||
with gr.Row():
|
||||
shared.gradio['Regenerate'] = gr.Button('Regenerate (Ctrl + Enter)', elem_id='Regenerate')
|
||||
shared.gradio['Continue'] = gr.Button('Continue (Alt + Enter)', elem_id='Continue')
|
||||
shared.gradio['Remove last'] = gr.Button('Remove last reply (Ctrl + Shift + Backspace)', elem_id='Remove-last')
|
||||
|
||||
with gr.Row():
|
||||
shared.gradio['Impersonate'] = gr.Button('Impersonate (Ctrl + Shift + M)', elem_id='Impersonate')
|
||||
|
||||
with gr.Row():
|
||||
shared.gradio['Send dummy message'] = gr.Button('Send dummy message')
|
||||
shared.gradio['Send dummy reply'] = gr.Button('Send dummy reply')
|
||||
|
||||
with gr.Row():
|
||||
shared.gradio['send-chat-to-default'] = gr.Button('Send to Default')
|
||||
shared.gradio['send-chat-to-notebook'] = gr.Button('Send to Notebook')
|
||||
shared.gradio['Regenerate'] = gr.Button('Regenerate (Ctrl + Enter)', elem_id='Regenerate')
|
||||
shared.gradio['Continue'] = gr.Button('Continue (Alt + Enter)', elem_id='Continue')
|
||||
shared.gradio['Remove last'] = gr.Button('Remove last reply (Ctrl + Shift + Backspace)', elem_id='Remove-last')
|
||||
shared.gradio['Impersonate'] = gr.Button('Impersonate (Ctrl + Shift + M)', elem_id='Impersonate')
|
||||
shared.gradio['Send dummy message'] = gr.Button('Send dummy message')
|
||||
shared.gradio['Send dummy reply'] = gr.Button('Send dummy reply')
|
||||
shared.gradio['send-chat-to-default'] = gr.Button('Send to Default')
|
||||
shared.gradio['send-chat-to-notebook'] = gr.Button('Send to Notebook')
|
||||
shared.gradio['show_controls'] = gr.Checkbox(value=shared.settings['show_controls'], label='Show controls (Ctrl+S)', elem_id='show-controls')
|
||||
|
||||
with gr.Row(elem_id='chat-controls', elem_classes=['pretty_scrollbar']):
|
||||
with gr.Column():
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue