Move hover menu shortcuts to right side (#3951)

2024-09-20 10:35:10 +02:00 · 2023-09-17 19:33:00 -06:00 · 2023-09-17 19:33:00 -06:00 · cc8eda298a
commit cc8eda298a
parent 280cca9f66
4 changed files with 71 additions and 47 deletions
--- 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;
-}
+}
+
+#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;
+}
--- 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, `&nbsp;<span class="transparent-substring">${substring}</span>`);
+            const newText = buttonText.replace(substring, `&nbsp;<span class="transparent-substring">${substring.slice(1, -1)}</span>`);
            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() {
--- 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");
    }
 }
--- 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='<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):
+                    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='<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):
+                    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')