From aee8441fc451875e872479da06b9c281a71fd4a9 Mon Sep 17 00:00:00 2001 From: Wolfsblvt Date: Mon, 10 Feb 2025 15:07:57 +0100 Subject: [PATCH] Mobile prompt itemization - duh - Make it into a popup. There is no space --- public/css/mobile-styles.css | 2 -- public/css/popup.css | 4 ++++ public/script.js | 13 ++++++++++++- public/scripts/popup.js | 4 +++- public/scripts/templates/itemizationChat.html | 2 +- public/style.css | 4 ++++ 6 files changed, 24 insertions(+), 5 deletions(-) diff --git a/public/css/mobile-styles.css b/public/css/mobile-styles.css index a5c8b3176..56c89e275 100644 --- a/public/css/mobile-styles.css +++ b/public/css/mobile-styles.css @@ -216,8 +216,6 @@ } - #showRawPrompt, - #copyPromptToClipboard, #groupCurrentMemberPopoutButton, #summaryExtensionPopoutButton { display: none; diff --git a/public/css/popup.css b/public/css/popup.css index 545f7014a..e477bfd75 100644 --- a/public/css/popup.css +++ b/public/css/popup.css @@ -72,6 +72,10 @@ dialog { overflow-x: auto; } +.popup.left_aligned_dialogue_popup .popup-content { + text-align: start; +} + /* Opening animation */ .popup[opening] { animation: pop-in var(--popup-animation-speed) ease-in-out; diff --git a/public/script.js b/public/script.js index b5b161555..e848b2cd7 100644 --- a/public/script.js +++ b/public/script.js @@ -5577,7 +5577,7 @@ async function promptItemize(itemizedPrompts, requestedMesId) { toastr.info(t`Copied!`); }); - popup.dlg.querySelector('#showRawPrompt').addEventListener('click', function () { + popup.dlg.querySelector('#showRawPrompt').addEventListener('click', async function () { //console.log(itemizedPrompts[PromptArrayItemForRawPromptDisplay].rawPrompt); console.log(PromptArrayItemForRawPromptDisplay); console.log(itemizedPrompts); @@ -5585,6 +5585,17 @@ async function promptItemize(itemizedPrompts, requestedMesId) { const rawPrompt = flatten(itemizedPrompts[PromptArrayItemForRawPromptDisplay].rawPrompt); + // Mobile needs special handholding. The side-view on the popup wouldn't work, + // so we just show an additional popup for this. + if (isMobile()) { + const content = document.createElement('div'); + content.classList.add('tokenItemizingMaintext'); + content.innerText = rawPrompt; + const popup = new Popup(content, POPUP_TYPE.TEXT, null, { allowVerticalScrolling: true, leftAlign: true }); + await popup.show(); + return; + } + //let DisplayStringifiedPrompt = JSON.stringify(itemizedPrompts[PromptArrayItemForRawPromptDisplay].rawPrompt).replace(/\n+/g, '
'); const rawPromptWrapper = document.getElementById('rawPromptWrapper'); rawPromptWrapper.innerText = rawPrompt; diff --git a/public/scripts/popup.js b/public/scripts/popup.js index b6dd110f6..aaadce1b1 100644 --- a/public/scripts/popup.js +++ b/public/scripts/popup.js @@ -46,6 +46,7 @@ export const POPUP_RESULT = { * @property {boolean?} [transparent=false] - Whether to display the popup in transparent mode (no background, border, shadow or anything, only its content) * @property {boolean?} [allowHorizontalScrolling=false] - Whether to allow horizontal scrolling in the popup * @property {boolean?} [allowVerticalScrolling=false] - Whether to allow vertical scrolling in the popup + * @property {boolean?} [leftAlign=false] - Whether the popup content should be left-aligned by default * @property {'slow'|'fast'|'none'?} [animation='slow'] - Animation speed for the popup (opening, closing, ...) * @property {POPUP_RESULT|number?} [defaultResult=POPUP_RESULT.AFFIRMATIVE] - The default result of this popup when Enter is pressed. Can be changed from `POPUP_RESULT.AFFIRMATIVE`. * @property {CustomPopupButton[]|string[]?} [customButtons=null] - Custom buttons to add to the popup. If only strings are provided, the buttons will be added with default options, and their result will be in order from `2` onward. @@ -173,7 +174,7 @@ export class Popup { * @param {string} [inputValue=''] - The initial value of the input field * @param {PopupOptions} [options={}] - Additional options for the popup */ - constructor(content, type, inputValue = '', { okButton = null, cancelButton = null, rows = 1, wide = false, wider = false, large = false, transparent = false, allowHorizontalScrolling = false, allowVerticalScrolling = false, animation = 'fast', defaultResult = POPUP_RESULT.AFFIRMATIVE, customButtons = null, customInputs = null, onClosing = null, onClose = null, cropAspect = null, cropImage = null } = {}) { + constructor(content, type, inputValue = '', { okButton = null, cancelButton = null, rows = 1, wide = false, wider = false, large = false, transparent = false, allowHorizontalScrolling = false, allowVerticalScrolling = false, leftAlign = false, animation = 'fast', defaultResult = POPUP_RESULT.AFFIRMATIVE, customButtons = null, customInputs = null, onClosing = null, onClose = null, cropAspect = null, cropImage = null } = {}) { Popup.util.popups.push(this); // Make this popup uniquely identifiable @@ -218,6 +219,7 @@ export class Popup { if (transparent) this.dlg.classList.add('transparent_dialogue_popup'); if (allowHorizontalScrolling) this.dlg.classList.add('horizontal_scrolling_dialogue_popup'); if (allowVerticalScrolling) this.dlg.classList.add('vertical_scrolling_dialogue_popup'); + if (leftAlign) this.dlg.classList.add('left_aligned_dialogue_popup'); if (animation) this.dlg.classList.add('popup--animation-' + animation); // If custom button captions are provided, we set them beforehand diff --git a/public/scripts/templates/itemizationChat.html b/public/scripts/templates/itemizationChat.html index 4a699e799..f78079ee6 100644 --- a/public/scripts/templates/itemizationChat.html +++ b/public/scripts/templates/itemizationChat.html @@ -146,5 +146,5 @@
-
+
diff --git a/public/style.css b/public/style.css index a0943d540..e447d3795 100644 --- a/public/style.css +++ b/public/style.css @@ -262,6 +262,10 @@ input[type='checkbox']:focus-visible { color: var(--SmartThemeEmColor); } +.tokenItemizingMaintext { + font-size: calc(var(--mainFontSize) * 0.8); +} + .tokenGraph { border-radius: 10px; border: 1px solid var(--SmartThemeBorderColor);