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