mirror of
https://github.com/oobabooga/text-generation-webui.git
synced 2026-04-20 22:13:43 +00:00
UI: Make sidebars toggle independently, overlay the chat area, and persist state on page refresh
This commit is contained in:
oobabooga
parent
57be34d7a6
commit
acb2488acf
3 changed files with 62 additions and 105 deletions
18
css/main.css
18
css/main.css
|
|
@ -976,6 +976,13 @@ audio {
|
|||
flex-shrink: 0;
|
||||
box-sizing: content-box;
|
||||
z-index: 10;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
background: var(--background-fill-primary);
|
||||
}
|
||||
|
||||
#past-chats-row {
|
||||
left: var(--header-width);
|
||||
}
|
||||
|
||||
#past-chats-row:not(.negative-header) {
|
||||
|
|
@ -983,6 +990,7 @@ audio {
|
|||
}
|
||||
|
||||
#chat-controls {
|
||||
right: 0;
|
||||
padding: 1rem;
|
||||
padding-bottom: 0;
|
||||
overflow-y: scroll;
|
||||
|
|
@ -1253,16 +1261,6 @@ audio {
|
|||
right: 7px;
|
||||
}
|
||||
|
||||
@media screen and (width <= 924px) {
|
||||
#chat-controls.sidebar-shown {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
#past-chats-row.sidebar-shown {
|
||||
position: fixed;
|
||||
}
|
||||
}
|
||||
|
||||
/* ----------------------------------------------
|
||||
Dark theme
|
||||
|
|
|
|||
87
js/main.js
87
js/main.js
|
|
@ -674,23 +674,21 @@ headerBar.appendChild(navigationToggle);
|
|||
const pastChatsToggle = document.getElementById("past-chats-toggle");
|
||||
const chatControlsToggle = document.getElementById("chat-controls-toggle");
|
||||
|
||||
const SIDEBARS = [
|
||||
{ element: headerBar, toggle: navigationToggle, key: "sidebar-header-hidden" },
|
||||
{ element: pastChatsRow, toggle: pastChatsToggle, key: "sidebar-past-chats-hidden" },
|
||||
{ element: chatControlsRow, toggle: chatControlsToggle, key: "sidebar-chat-controls-hidden" },
|
||||
];
|
||||
window.SIDEBARS = SIDEBARS;
|
||||
|
||||
function handleIndividualSidebarClose(event) {
|
||||
const target = event.target;
|
||||
|
||||
// Close navigation bar if click is outside and it is open
|
||||
if (!headerBar.contains(target) && !headerBar.classList.contains("sidebar-hidden")) {
|
||||
toggleSidebar(headerBar, navigationToggle);
|
||||
}
|
||||
|
||||
// Close past chats row if click is outside and it is open
|
||||
if (!pastChatsRow.contains(target) && !pastChatsRow.classList.contains("sidebar-hidden")) {
|
||||
toggleSidebar(pastChatsRow, pastChatsToggle);
|
||||
}
|
||||
|
||||
// Close chat controls row if click is outside and it is open
|
||||
if (!chatControlsRow.contains(target) && !chatControlsRow.classList.contains("sidebar-hidden")) {
|
||||
toggleSidebar(chatControlsRow, chatControlsToggle);
|
||||
}
|
||||
SIDEBARS.forEach(({ element, toggle, key }) => {
|
||||
if (!element.contains(target) && !element.classList.contains("sidebar-hidden")) {
|
||||
toggleSidebar(element, toggle);
|
||||
localStorage.setItem(key, "true");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function toggleSidebar(sidebar, toggle) {
|
||||
|
|
@ -720,12 +718,12 @@ function toggleSidebar(sidebar, toggle) {
|
|||
}
|
||||
}
|
||||
|
||||
// Function to check if the device is mobile
|
||||
window.toggleSidebar = toggleSidebar;
|
||||
|
||||
function isMobile() {
|
||||
return window.innerWidth <= 924;
|
||||
}
|
||||
|
||||
// Function to initialize sidebars
|
||||
function initializeSidebars() {
|
||||
const isOnMobile = isMobile();
|
||||
|
||||
|
|
@ -766,55 +764,22 @@ function initializeSidebars() {
|
|||
pastChatsToggle.innerHTML = leftArrowSVG;
|
||||
chatControlsToggle.innerHTML = rightArrowSVG;
|
||||
navigationToggle.innerHTML = closeMenuSVG;
|
||||
|
||||
SIDEBARS.forEach(({ element, toggle, key }) => {
|
||||
if (localStorage.getItem(key) === "true") {
|
||||
toggleSidebar(element, toggle);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Run the initializer when the page loads
|
||||
initializeSidebars();
|
||||
|
||||
// Add click event listeners to toggle buttons
|
||||
pastChatsToggle.addEventListener("click", () => {
|
||||
const isCurrentlyOpen = !pastChatsRow.classList.contains("sidebar-hidden");
|
||||
toggleSidebar(pastChatsRow, pastChatsToggle);
|
||||
|
||||
// On desktop, sync both sidebars together
|
||||
if (!isMobile()) {
|
||||
if (isCurrentlyOpen) {
|
||||
// If we just closed the left sidebar, also close the right sidebar
|
||||
if (!chatControlsRow.classList.contains("sidebar-hidden")) {
|
||||
toggleSidebar(chatControlsRow, chatControlsToggle);
|
||||
}
|
||||
} else {
|
||||
// If we just opened the left sidebar, also open the right sidebar
|
||||
if (chatControlsRow.classList.contains("sidebar-hidden")) {
|
||||
toggleSidebar(chatControlsRow, chatControlsToggle);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
chatControlsToggle.addEventListener("click", () => {
|
||||
const isCurrentlyOpen = !chatControlsRow.classList.contains("sidebar-hidden");
|
||||
toggleSidebar(chatControlsRow, chatControlsToggle);
|
||||
|
||||
// On desktop, sync both sidebars together
|
||||
if (!isMobile()) {
|
||||
if (isCurrentlyOpen) {
|
||||
// If we just closed the right sidebar, also close the left sidebar
|
||||
if (!pastChatsRow.classList.contains("sidebar-hidden")) {
|
||||
toggleSidebar(pastChatsRow, pastChatsToggle);
|
||||
}
|
||||
} else {
|
||||
// If we just opened the right sidebar, also open the left sidebar
|
||||
if (pastChatsRow.classList.contains("sidebar-hidden")) {
|
||||
toggleSidebar(pastChatsRow, pastChatsToggle);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
navigationToggle.addEventListener("click", () => {
|
||||
toggleSidebar(headerBar, navigationToggle);
|
||||
SIDEBARS.forEach(({ element, toggle, key }) => {
|
||||
toggle.addEventListener("click", () => {
|
||||
toggleSidebar(element, toggle);
|
||||
localStorage.setItem(key, element.classList.contains("sidebar-hidden"));
|
||||
});
|
||||
});
|
||||
|
||||
//------------------------------------------------
|
||||
|
|
|
|||
|
|
@ -1,40 +1,34 @@
|
|||
if (window._controlsInitialized === undefined) {
|
||||
window._controlsInitialized = false;
|
||||
}
|
||||
|
||||
function toggle_controls(value) {
|
||||
const navToggle = document.getElementById("navigation-toggle");
|
||||
const pastChatsToggle = document.getElementById("past-chats-toggle");
|
||||
const extensions = document.querySelector("#extensions");
|
||||
const galleryExtension = document.getElementById("gallery-extension");
|
||||
|
||||
if (value) {
|
||||
// SHOW MODE: Click toggles to show hidden sidebars
|
||||
if (navToggle && document.querySelector(".header_bar")?.classList.contains("sidebar-hidden")) {
|
||||
navToggle.click();
|
||||
}
|
||||
if (pastChatsToggle && document.getElementById("past-chats-row")?.classList.contains("sidebar-hidden")) {
|
||||
pastChatsToggle.click();
|
||||
}
|
||||
|
||||
// Show extensions only
|
||||
if (extensions) {
|
||||
extensions.style.display = "inherit";
|
||||
}
|
||||
if (galleryExtension) {
|
||||
galleryExtension.style.display = "block";
|
||||
}
|
||||
} else {
|
||||
// HIDE MODE: Click toggles to hide visible sidebars
|
||||
if (navToggle && !document.querySelector(".header_bar")?.classList.contains("sidebar-hidden")) {
|
||||
navToggle.click();
|
||||
}
|
||||
if (pastChatsToggle && !document.getElementById("past-chats-row")?.classList.contains("sidebar-hidden")) {
|
||||
pastChatsToggle.click();
|
||||
}
|
||||
|
||||
// Hide extensions only
|
||||
if (extensions) {
|
||||
extensions.style.display = "none";
|
||||
}
|
||||
if (galleryExtension) {
|
||||
galleryExtension.style.display = "none";
|
||||
}
|
||||
if (window._controlsInitialized) {
|
||||
window.SIDEBARS.forEach(({ element, toggle, key }) => {
|
||||
if (value) {
|
||||
if (element && element.classList.contains("sidebar-hidden")) {
|
||||
window.toggleSidebar(element, toggle);
|
||||
}
|
||||
localStorage.removeItem(key);
|
||||
} else {
|
||||
if (element && !element.classList.contains("sidebar-hidden")) {
|
||||
window.toggleSidebar(element, toggle);
|
||||
}
|
||||
localStorage.setItem(key, "true");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (value) {
|
||||
if (extensions) extensions.style.display = "inherit";
|
||||
if (galleryExtension) galleryExtension.style.display = "block";
|
||||
} else {
|
||||
if (extensions) extensions.style.display = "none";
|
||||
if (galleryExtension) galleryExtension.style.display = "none";
|
||||
}
|
||||
|
||||
window._controlsInitialized = true;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue