From b164084c0c9889c13958e221649171010137860f Mon Sep 17 00:00:00 2001 From: Joe Date: Mon, 21 Oct 2024 00:19:50 -0700 Subject: [PATCH 1/5] Enhancement: Make buttons scrollable --- public/scripts/slash-commands.js | 37 ++++++++++++++++++++++++++++++-- 1 file changed, 35 insertions(+), 2 deletions(-) diff --git a/public/scripts/slash-commands.js b/public/scripts/slash-commands.js index a34b4e544..6a4c5f63f 100644 --- a/public/scripts/slash-commands.js +++ b/public/scripts/slash-commands.js @@ -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; } }); + From 8f09aced83ab44088bb28ec81941136562fbfce2 Mon Sep 17 00:00:00 2001 From: Joe Date: Mon, 21 Oct 2024 00:57:15 -0700 Subject: [PATCH 2/5] Add scroll bar to make it obvious --- public/scripts/slash-commands.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/public/scripts/slash-commands.js b/public/scripts/slash-commands.js index 6a4c5f63f..08ea48536 100644 --- a/public/scripts/slash-commands.js +++ b/public/scripts/slash-commands.js @@ -2090,12 +2090,14 @@ async function buttonsCallback(args, text) { overflow-y: auto; flex-shrink: 1; min-height: 0; + scrollbar-width: thin; + scrollbar-color: rgba(255, 255, 255, 0.3) transparent; } .scrollable-buttons::-webkit-scrollbar { width: 6px; } .scrollable-buttons::-webkit-scrollbar-thumb { - background-color: rgba(0, 0, 0, 0.2); + background-color: rgba(255, 255, 255, 0.3); border-radius: 3px; } `; @@ -4304,4 +4306,3 @@ sendTextarea.addEventListener('input', () => { sendTextarea.style.fontFamily = null; } }); - From b1b6f0473a2c20eea0fdab39620875c517485a18 Mon Sep 17 00:00:00 2001 From: Joe Date: Mon, 21 Oct 2024 00:19:50 -0700 Subject: [PATCH 3/5] Enhancement: Make buttons scrollable --- public/scripts/slash-commands.js | 37 ++++++++++++++++++++++++++++++-- 1 file changed, 35 insertions(+), 2 deletions(-) diff --git a/public/scripts/slash-commands.js b/public/scripts/slash-commands.js index a34b4e544..6a4c5f63f 100644 --- a/public/scripts/slash-commands.js +++ b/public/scripts/slash-commands.js @@ -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; } }); + From 8722c6a62b295ba9f4257825e2b83e5caad234d3 Mon Sep 17 00:00:00 2001 From: Joe Date: Mon, 21 Oct 2024 00:57:15 -0700 Subject: [PATCH 4/5] Add scroll bar to make it obvious --- public/scripts/slash-commands.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/public/scripts/slash-commands.js b/public/scripts/slash-commands.js index 6a4c5f63f..08ea48536 100644 --- a/public/scripts/slash-commands.js +++ b/public/scripts/slash-commands.js @@ -2090,12 +2090,14 @@ async function buttonsCallback(args, text) { overflow-y: auto; flex-shrink: 1; min-height: 0; + scrollbar-width: thin; + scrollbar-color: rgba(255, 255, 255, 0.3) transparent; } .scrollable-buttons::-webkit-scrollbar { width: 6px; } .scrollable-buttons::-webkit-scrollbar-thumb { - background-color: rgba(0, 0, 0, 0.2); + background-color: rgba(255, 255, 255, 0.3); border-radius: 3px; } `; @@ -4304,4 +4306,3 @@ sendTextarea.addEventListener('input', () => { sendTextarea.style.fontFamily = null; } }); - From 9533b7e59a9f626f1ca9ad48238ffc634ae99ea3 Mon Sep 17 00:00:00 2001 From: Joe Date: Sun, 17 Nov 2024 15:54:09 -0800 Subject: [PATCH 5/5] review: Move css out of js code --- public/css/scrollable-button.css | 19 +++++++++++++++++++ public/scripts/slash-commands.js | 26 +------------------------- public/style.css | 1 + 3 files changed, 21 insertions(+), 25 deletions(-) create mode 100644 public/css/scrollable-button.css diff --git a/public/css/scrollable-button.css b/public/css/scrollable-button.css new file mode 100644 index 000000000..c77032a1e --- /dev/null +++ b/public/css/scrollable-button.css @@ -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; +} diff --git a/public/scripts/slash-commands.js b/public/scripts/slash-commands.js index 91bd0d8ed..e10c89ae6 100644 --- a/public/scripts/slash-commands.js +++ b/public/scripts/slash-commands.js @@ -2084,31 +2084,7 @@ async function buttonsCallback(args, text) { 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; - scrollbar-width: thin; - scrollbar-color: rgba(255, 255, 255, 0.3) transparent; - } - .scrollable-buttons::-webkit-scrollbar { - width: 6px; - } - .scrollable-buttons::-webkit-scrollbar-thumb { - background-color: rgba(255, 255, 255, 0.3); - border-radius: 3px; - } - `; - document.head.appendChild(style); + scrollableContainer.classList.add('scrollable-buttons-container'); for (const [result, button] of resultToButtonMap) { const buttonElement = document.createElement('div'); diff --git a/public/style.css b/public/style.css index 217c22bd9..3d4a1bd26 100644 --- a/public/style.css +++ b/public/style.css @@ -9,6 +9,7 @@ @import url(css/logprobs.css); @import url(css/accounts.css); @import url(css/tags.css); +@import url(css/scrollable-button.css); :root { --doc-height: 100%;