From d1f8607ac8ce9aa6e68c9525b70cf77edd283e42 Mon Sep 17 00:00:00 2001
From: Keldos <hi@keldos.me>
Date: Sat, 20 Jul 2024 14:50:56 +0800
Subject: [PATCH] Update submit button dropdown style (#1900)

---
 .gitignore        |  3 +++
 main.py           |  4 ++--
 themes/common.css | 61 +++++++++++++++++++++++++++++++++++++++++++++++
 themes/common.js  | 20 ++++++++++++++++
 themes/init.js    |  1 +
 5 files changed, 87 insertions(+), 2 deletions(-)

diff --git a/.gitignore b/.gitignore
index f8b24d75..be959f73 100644
--- a/.gitignore
+++ b/.gitignore
@@ -131,6 +131,9 @@ dmypy.json
 # Pyre type checker
 .pyre/
 
+# macOS files
+.DS_Store
+
 .vscode
 .idea
 
diff --git a/main.py b/main.py
index 66dc88fe..3d322ec0 100644
--- a/main.py
+++ b/main.py
@@ -112,12 +112,12 @@ def main():
                 with gr.Accordion("输入区", open=True, elem_id="input-panel") as area_input_primary:
                     with gr.Row():
                         txt = gr.Textbox(show_label=False, placeholder="Input question here.", elem_id='user_input_main').style(container=False)
-                    with gr.Row():
+                    with gr.Row(elem_id="gpt-submit-row"):
                         multiplex_submit_btn = gr.Button("提交", elem_id="elem_submit_visible", variant="primary")
                         multiplex_sel = gr.Dropdown(
                             choices=["常规对话", "多模型对话", "智能上下文", "智能召回 RAG"], value="常规对话",
                             interactive=True, label='', show_label=False,
-                            elem_classes='normal_mut_select').style(container=False)
+                            elem_classes='normal_mut_select', elem_id="gpt-submit-dropdown").style(container=False)
                         submit_btn = gr.Button("提交", elem_id="elem_submit", variant="primary", visible=False)
                     with gr.Row():
                         resetBtn = gr.Button("重置", elem_id="elem_reset", variant="secondary"); resetBtn.style(size="sm")
diff --git a/themes/common.css b/themes/common.css
index 9e620aca..05d97af3 100644
--- a/themes/common.css
+++ b/themes/common.css
@@ -213,4 +213,65 @@
 
 .welcome-content {
     text-wrap: balance;
+}
+
+
+#gpt-submit-row {
+    display: flex;
+    gap: 0 !important;
+    border-radius: var(--button-large-radius);
+    border: var(--button-border-width) solid var(--button-primary-border-color);
+    /* background: var(--button-primary-background-fill); */
+    background: var(--button-primary-background-fill-hover);
+    color: var(--button-primary-text-color);
+    box-shadow: var(--button-shadow);
+    transition: var(--button-transition);
+    display: flex;
+}
+#gpt-submit-row:hover {
+    border-color: var(--button-primary-border-color-hover);
+    /* background: var(--button-primary-background-fill-hover); */
+    /* color: var(--button-primary-text-color-hover); */
+}
+#gpt-submit-row button#elem_submit_visible {
+    border-top-right-radius: 0px;
+    border-bottom-right-radius: 0px;
+    box-shadow: none !important;
+    flex-grow: 1;
+}
+#gpt-submit-row #gpt-submit-dropdown {
+    border-top-left-radius: 0px;
+    border-bottom-left-radius: 0px;
+    border-left: 0.5px solid #FFFFFF88 !important;
+    display: flex;
+    overflow: unset !important;
+    max-width: 40px !important;
+    min-width: 40px !important;
+}
+#gpt-submit-row #gpt-submit-dropdown input {
+    pointer-events: none;
+    opacity: 0; /* 隐藏输入框 */
+    width: 0;
+    margin-inline: 0;
+    cursor: pointer;
+}
+#gpt-submit-row #gpt-submit-dropdown label {
+    display: flex;
+    width: 0;
+}
+#gpt-submit-row #gpt-submit-dropdown label div.wrap {
+    background: none;
+    box-shadow: none;
+    border: none;
+}
+#gpt-submit-row #gpt-submit-dropdown label div.wrap div.wrap-inner {
+    background: none;
+    padding-inline: 0;
+    height: 100%;
+}
+#gpt-submit-row #gpt-submit-dropdown svg.dropdown-arrow {
+    transform: scale(2) translate(4.5px, -0.3px);
+}
+#gpt-submit-row #gpt-submit-dropdown > *:hover {
+    cursor: context-menu;
 }
\ No newline at end of file
diff --git a/themes/common.js b/themes/common.js
index c8df1bff..6b631ab4 100644
--- a/themes/common.js
+++ b/themes/common.js
@@ -796,6 +796,26 @@ function minor_ui_adjustment() {
     }, 200); // 每50毫秒执行一次
 }
 
+// -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
+//  对提交按钮的下拉选框做的变化
+// -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
+function ButtonWithDropdown_init() {
+    let submitButton = document.querySelector('button#elem_submit_visible');
+    let submitDropdown = document.querySelector('#gpt-submit-dropdown');
+    function updateDropdownWidth() {
+        if (submitButton) {
+            let setWidth = submitButton.clientWidth + submitDropdown.clientWidth;
+            let setLeft = -1 * submitButton.clientWidth;
+            document.getElementById('submit-dropdown-style')?.remove();
+            const styleElement = document.createElement('style');
+            styleElement.id = 'submit-dropdown-style';
+            styleElement.innerHTML = `#gpt-submit-dropdown ul.options { width: ${setWidth}px; left: ${setLeft}px; }`;
+            document.head.appendChild(styleElement);
+        }
+    }
+    window.addEventListener('resize', updateDropdownWidth);
+    updateDropdownWidth();
+}
 
 // -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
 //  第 6 部分: 避免滑动
diff --git a/themes/init.js b/themes/init.js
index 007e9786..9ea8dd5a 100644
--- a/themes/init.js
+++ b/themes/init.js
@@ -2,6 +2,7 @@ async function GptAcademicJavaScriptInit(dark, prompt, live2d, layout, tts) {
     // 第一部分，布局初始化
     audio_fn_init();
     minor_ui_adjustment();
+    ButtonWithDropdown_init();
     
     // 加载欢迎页面
     const welcomeMessage = new WelcomeMessage();