From cc8eda298a92ce47f18e98138ce0f0007380515e Mon Sep 17 00:00:00 2001 From: missionfloyd Date: Sun, 17 Sep 2023 19:33:00 -0600 Subject: [PATCH] Move hover menu shortcuts to right side (#3951) --- css/main.css | 60 +++++++++++++++++++++++++++++++++++++++++---- js/main.js | 33 +++---------------------- js/show_controls.js | 9 +++---- modules/ui_chat.py | 16 ++++++------ 4 files changed, 71 insertions(+), 47 deletions(-) diff --git a/css/main.css b/css/main.css index ddb41e8e..58972605 100644 --- a/css/main.css +++ b/css/main.css @@ -313,6 +313,10 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* { .chat-parent { height: calc(100dvh - 179px) !important; } + + .old-ui .chat-parent { + height: calc(100dvh - 310px) !important; + } } .chat { @@ -333,11 +337,11 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* { overflow: auto !important; } -.chat-parent.old-ui { +.old-ui .chat-parent { height: calc(100dvh - 270px); } -.bigchat { +.chat-parent.bigchat { height: calc(100dvh - 181px) !important; } @@ -515,7 +519,7 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* { width: 100%; background: transparent !important; border-radius: 0px !important; - justify-content: left; + justify-content: space-between; margin: 0 !important; height: 36px; } @@ -536,6 +540,52 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* { opacity: 0.333; } -#chat-buttons:not(.old-ui) { +#chat-tab:not(.old-ui) #chat-buttons { display: none !important; -} \ No newline at end of file +} + +#gr-hover-container { + min-width: 0 !important; + display: flex; + flex-direction: column-reverse; + padding-right: 20px; + padding-bottom: 3px; + flex-grow: 0 !important; +} + +#generate-stop-container { + min-width: 0 !important; + display: flex; + flex-direction: column-reverse; + padding-bottom: 3px; + flex: 0 auto !important; +} + +#chat-input-container { + min-width: 0 !important; +} + +#chat-input-container > .form { + background: transparent; + border: none; +} + +#chat-input-row { + padding-bottom: 20px; +} + +.old-ui #chat-input-row, #chat-input-row.bigchat { + padding-bottom: 0px !important; +} + +#chat-col { + padding-bottom: 115px; +} + +.old-ui #chat-col, #chat-col.bigchat { + padding-bottom: 95px !important; +} + +.old-ui #chat-buttons #clear-history-confirm { + order: -1; +} diff --git a/js/main.js b/js/main.js index 5f926485..c93ae342 100644 --- a/js/main.js +++ b/js/main.js @@ -213,30 +213,6 @@ for(i = 0; i < textareaElements.length; i++) { textareaElements[i].style.resize = "none"; } -//------------------------------------------------ -// Improve the looks of the chat input field -//------------------------------------------------ -let isOld = document.querySelectorAll('.old-ui').length > 0; - -document.getElementById('chat-input').parentNode.style.background = 'transparent'; -document.getElementById('chat-input').parentNode.style.border = 'none'; -document.getElementById('chat-input').parentElement.parentElement.style.minWidth = 0; - -document.getElementById('stop').parentElement.parentElement.style.minWidth = 0; -document.getElementById('stop').parentElement.parentElement.style.display = 'flex'; -document.getElementById('stop').parentElement.parentElement.style.flexDirection = 'column-reverse'; -document.getElementById('stop').parentElement.parentElement.style.paddingBottom = '3px'; -document.getElementById('stop').parentElement.parentElement.parentElement.style.paddingBottom = isOld ? '0px' : '20px'; - -document.getElementById('stop').parentElement.parentElement.style.flex = '0 0 auto'; - -document.getElementById('gr-hover').parentElement.style.minWidth = 0; -document.getElementById('gr-hover').parentElement.style.display = 'flex'; -document.getElementById('gr-hover').parentElement.style.flexDirection = 'column-reverse'; -document.getElementById('gr-hover').parentElement.style.flex = '0'; -document.getElementById('gr-hover').parentElement.style.paddingRight = '20px'; -document.getElementById('gr-hover').parentElement.style.paddingBottom = '3px'; - //------------------------------------------------ // Remove some backgrounds //------------------------------------------------ @@ -251,7 +227,7 @@ for(i = 0; i < noBackgroundelements.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:not(.old-ui) button"); +var buttonsInChat = document.querySelectorAll("#chat-tab:not(.old-ui) #chat-buttons button"); var button = document.getElementById('hover-element-button'); var menu = document.getElementById('hover-menu'); @@ -280,17 +256,16 @@ if (buttonsInChat.length > 0) { if (matches && matches.length > 1) { // Apply the transparent-substring class to the matched substring const substring = matches[1]; - const newText = buttonText.replace(substring, ` ${substring}`); + const newText = buttonText.replace(substring, ` ${substring.slice(1, -1)}`); thisButton.innerHTML = newText; } } } else { - buttonsInChat = document.querySelectorAll("#chat-tab #chat-buttons.old-ui button"); - console.log(buttonsInChat); + buttonsInChat = document.querySelectorAll("#chat-tab.old-ui #chat-buttons button"); for (let i = 0; i < buttonsInChat.length; i++) { buttonsInChat[i].textContent = buttonsInChat[i].textContent.replace(/ \(.*?\)/, ''); } - document.getElementById('gr-hover').parentElement.style.display = 'none'; + document.getElementById('gr-hover-container').style.display = 'none'; } function isMouseOverButtonOrMenu() { diff --git a/js/show_controls.js b/js/show_controls.js index 5df8986b..b35463b5 100644 --- a/js/show_controls.js +++ b/js/show_controls.js @@ -1,6 +1,5 @@ const belowChatInput = document.querySelectorAll("#chat-tab > div > :nth-child(n+2), #extensions"); const chatParent = document.querySelector(".chat-parent"); -let isOld = document.querySelectorAll('.old-ui').length > 0; function toggle_controls(value) { if (value) { @@ -9,15 +8,15 @@ function toggle_controls(value) { }); chatParent.classList.remove("bigchat"); - document.getElementById('stop').parentElement.parentElement.parentElement.style.paddingBottom = isOld ? '0px' : '20px'; - document.getElementById('show-controls').parentNode.parentNode.style.paddingBottom = isOld ? '95px' : '115px'; + document.getElementById('chat-input-row').classList.remove("bigchat"); + document.getElementById('chat-col').classList.remove("bigchat"); } else { belowChatInput.forEach(element => { element.style.display = "none"; }); chatParent.classList.add("bigchat"); - document.getElementById('stop').parentElement.parentElement.parentElement.style.paddingBottom = '0px'; - document.getElementById('show-controls').parentNode.parentNode.style.paddingBottom = '95px'; + document.getElementById('chat-input-row').classList.add("bigchat") + document.getElementById('chat-col').classList.add("bigchat"); } } diff --git a/modules/ui_chat.py b/modules/ui_chat.py index c602fe95..a3f56337 100644 --- a/modules/ui_chat.py +++ b/modules/ui_chat.py @@ -20,27 +20,27 @@ def create_ui(): shared.gradio['dummy'] = gr.State() shared.gradio['history'] = gr.State({'internal': [], 'visible': []}) - with gr.Tab('Chat', elem_id='chat-tab'): + with gr.Tab('Chat', elem_id='chat-tab', elem_classes=("old-ui" if shared.args.chat_buttons else None)): with gr.Row(): - with gr.Column(): - shared.gradio['display'] = gr.HTML(value=chat_html_wrapper({'internal': [], 'visible': []}, shared.settings['name1'], shared.settings['name2'], 'chat', 'cai-chat'), elem_classes=("old-ui" if shared.args.chat_buttons else None)) + with gr.Column(elem_id='chat-col'): + shared.gradio['display'] = gr.HTML(value=chat_html_wrapper({'internal': [], 'visible': []}, shared.settings['name1'], shared.settings['name2'], 'chat', 'cai-chat')) - with gr.Row(): - with gr.Column(scale=1): + with gr.Row(elem_id="chat-input-row"): + with gr.Column(scale=1, elem_id='gr-hover-container'): gr.HTML(value='
☰
', elem_id='gr-hover') - with gr.Column(scale=10): + with gr.Column(scale=10, elem_id='chat-input-container'): shared.gradio['textbox'] = gr.Textbox(label='', placeholder='Send a message', 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='
', label='typing', elem_id='typing-container') - with gr.Column(scale=1): + with gr.Column(scale=1, elem_id='generate-stop-container'): with gr.Row(): shared.gradio['Stop'] = gr.Button('Stop', elem_id='stop', visible=False) shared.gradio['Generate'] = gr.Button('Generate', elem_id='Generate', variant='primary') # Hover menu buttons - with gr.Column(elem_id='chat-buttons', elem_classes=("old-ui" if shared.args.chat_buttons else None)): + 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')