rixty/SillyTavern
1
0
Fork 0
mirror of https://github.com/SillyTavern/SillyTavern.git synced 2025-01-21 06:03:15 +01:00
Code Issues Packages Projects Releases Wiki Activity

Enhancement: Make buttons scrollable

Browse Source
This commit is contained in:
Joe 2024-10-21 00:19:50 -07:00
parent 0a79d55983
commit b164084c0c
1 changed files with 35 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
public/scripts/slash-commands.js
View File

@ -2074,7 +2074,32 @@ async function buttonsCallback(args, text) {
let popup;
const buttonContainer = document.createElement('div');
buttonContainer.classList.add('flex-container', 'flexFlowColumn', 'wide100p', 'm-t-1');
buttonContainer.classList.add('flex-container', 'flexFlowColumn', 'wide100p');
const scrollableContainer = document.createElement('div');
scrollableContainer.style.maxHeight = '50vh'; // Use viewport height instead of fixed pixels
scrollableContainer.style.overflowY = 'auto';
scrollableContainer.style.WebkitOverflowScrolling = 'touch'; // Enable momentum scrolling on iOS
scrollableContainer.classList.add('m-t-1', 'scrollable-buttons');
// Add custom CSS for better mobile scrolling
const style = document.createElement('style');
style.textContent = `
.scrollable-buttons {
-webkit-overflow-scrolling: touch;
overflow-y: auto;
flex-shrink: 1;
min-height: 0;
}
.scrollable-buttons::-webkit-scrollbar {
width: 6px;
}
.scrollable-buttons::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.2);
border-radius: 3px;
}
`;
document.head.appendChild(style);
for (const [result, button] of resultToButtonMap) {
const buttonElement = document.createElement('div');
@ -2087,9 +2112,16 @@ async function buttonsCallback(args, text) {
buttonContainer.appendChild(buttonElement);
}
scrollableContainer.appendChild(buttonContainer);
const popupContainer = document.createElement('div');
popupContainer.innerHTML = safeValue;
popupContainer.appendChild(buttonContainer);
popupContainer.appendChild(scrollableContainer);
// Ensure the popup uses flex layout
popupContainer.style.display = 'flex';
popupContainer.style.flexDirection = 'column';
popupContainer.style.maxHeight = '80vh'; // Limit the overall height of the popup
popup = new Popup(popupContainer, POPUP_TYPE.TEXT, '', { okButton: 'Cancel' });
popup.show()
@ -4272,3 +4304,4 @@ sendTextarea.addEventListener('input', () => {
sendTextarea.style.fontFamily = null;
}
});