UI: fix a glitch when switching tabs with "show controls" unchecked

This commit is contained in:
oobabooga 2024-07-02 20:57:03 -07:00
parent 7e22eaa36c
commit f77cf159ba

View File

@ -7,30 +7,30 @@ main_parent.parentNode.style = "gap: 0";
main_parent.parentNode.parentNode.style = "padding: 0"; main_parent.parentNode.parentNode.style = "padding: 0";
document.querySelector(".header_bar").addEventListener("click", function(event) { document.querySelector(".header_bar").addEventListener("click", function(event) {
if (event.target.tagName === "BUTTON") { if (event.target.tagName !== "BUTTON") return;
const buttonText = event.target.textContent.trim(); const buttonText = event.target.textContent.trim();
const extensionsVisible = ["Chat", "Default", "Notebook"].includes(buttonText);
const chatVisible = buttonText === "Chat";
const showControlsChecked = document.querySelector("#show-controls input").checked;
const extensions = document.querySelector("#extensions");
let chat_visible = (buttonText == "Chat"); if (extensionsVisible) {
let default_visible = (buttonText == "Default"); if (extensions) {
let notebook_visible = (buttonText == "Notebook"); extensions.style.display = "flex";
extensions.style.maxWidth = chatVisible ? "880px" : "none";
extensions.style.padding = chatVisible ? "0px" : "15px";
}
this.style.marginBottom = chatVisible ? "0px" : "19px";
// Check if one of the generation tabs is visible if (chatVisible && !showControlsChecked) {
if (chat_visible || notebook_visible || default_visible) { document.querySelectorAll("#chat-tab > div > :nth-child(n+2), #extensions").forEach(element => {
extensions && (extensions.style.display = "flex"); element.style.display = "none";
});
if (chat_visible) {
this.style.marginBottom = "0px";
extensions && (extensions.style.maxWidth = "880px");
extensions && (extensions.style.padding = "0px");
} else {
this.style.marginBottom = "19px";
extensions && (extensions.style.maxWidth = "none");
extensions && (extensions.style.padding = "15px");
} }
} else { } else {
this.style.marginBottom = "19px"; this.style.marginBottom = "19px";
extensions && (extensions.style.display = "none"); if (extensions) extensions.style.display = "none";
}
} }
}); });