rixty/SillyTavern
1
0
Fork 0
mirror of https://github.com/SillyTavern/SillyTavern.git synced 2024-12-12 09:26:33 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #3004 from joenunezb/enhancement-make-buttons-scrollable

Browse Source 
Enhancement: Make buttons scrollable
This commit is contained in:
Cohee 2024-11-18 12:15:58 +02:00 committed by GitHub
commit 5f44fb8535
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 32 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
public/css/scrollable-button.css Normal file
View File

@ -0,0 +1,19 @@
.scrollable-buttons-container {
max-height: 50vh; /* Use viewport height instead of fixed pixels */
overflow-y: auto;
-webkit-overflow-scrolling: touch; /* Momentum scrolling on iOS */
margin-top: 1rem; /* m-t-1 is equivalent to margin-top: 1rem; */
flex-shrink: 1;
min-height: 0;
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}
.scrollable-buttons-container::-webkit-scrollbar {
width: 6px;
}
.scrollable-buttons-container::-webkit-scrollbar-thumb {
background-color: rgba(255, 255, 255, 0.3);
border-radius: 3px;
}

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

@ -2083,7 +2083,10 @@ async function buttonsCallback(args, text) {
let popup; let popup;
const buttonContainer = document.createElement('div'); 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.classList.add('scrollable-buttons-container');
for (const [result, button] of resultToButtonMap) { for (const [result, button] of resultToButtonMap) {
const buttonElement = document.createElement('div'); const buttonElement = document.createElement('div');
@ -2096,9 +2099,16 @@ async function buttonsCallback(args, text) {
buttonContainer.appendChild(buttonElement); buttonContainer.appendChild(buttonElement);
} }
scrollableContainer.appendChild(buttonContainer);
const popupContainer = document.createElement('div'); const popupContainer = document.createElement('div');
popupContainer.innerHTML = safeValue; 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', allowVerticalScrolling: true }); popup = new Popup(popupContainer, POPUP_TYPE.TEXT, '', { okButton: 'Cancel', allowVerticalScrolling: true });
popup.show() popup.show()

1
public/style.css
View File

@ -9,6 +9,7 @@
@import url(css/logprobs.css); @import url(css/logprobs.css);
@import url(css/accounts.css); @import url(css/accounts.css);
@import url(css/tags.css); @import url(css/tags.css);
@import url(css/scrollable-button.css);
:root { :root {
--doc-height: 100%; --doc-height: 100%;