UniqAI/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui synced 2024-11-25 05:18:15 +00:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

Merge pull request #5953 from open-webui/dev

Browse Source 
enh: floating buttons styling
This commit is contained in:
Timothy Jaeryang Baek 2024-10-07 05:31:44 +02:00 committed by GitHub
commit cd62d89dd9
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 38 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
src/lib/components/chat/Messages/ContentRenderer.svelte
View File

@ -36,26 +36,46 @@
const range = selection.getRangeAt(0); const range = selection.getRangeAt(0);
const rect = range.getBoundingClientRect(); const rect = range.getBoundingClientRect();
// Calculate position relative to the viewport (now that it's in document.body) const parentRect = contentContainerElement.getBoundingClientRect();
const top = rect.bottom + window.scrollY;
const left = rect.left + window.scrollX; // Adjust based on parent rect
const top = rect.bottom - parentRect.top;
const left = rect.left - parentRect.left;
if (buttonsContainerElement) { if (buttonsContainerElement) {
buttonsContainerElement.style.display = 'block'; buttonsContainerElement.style.display = 'block';
buttonsContainerElement.style.left = `${left}px`;
// Calculate space available on the right
const spaceOnRight = parentRect.width - (left + buttonsContainerElement.offsetWidth);
if (spaceOnRight < 0) {
// Not enough space on the right, position using 'right'
const right = parentRect.right - rect.right;
buttonsContainerElement.style.right = `${right}px`;
buttonsContainerElement.style.left = 'auto'; // Reset left
} else {
// Enough space, position using 'left'
buttonsContainerElement.style.left = `${left}px`;
buttonsContainerElement.style.right = 'auto'; // Reset right
}
buttonsContainerElement.style.top = `${top + 5}px`; // +5 to add some spacing buttonsContainerElement.style.top = `${top + 5}px`; // +5 to add some spacing
} }
} else { } else {
if (buttonsContainerElement) { closeFloatingButtons();
buttonsContainerElement.style.display = 'none';
selectedText = '';
floatingInput = false;
floatingInputValue = '';
}
} }
}, 0); }, 0);
}; };
const closeFloatingButtons = () => {
if (buttonsContainerElement) {
buttonsContainerElement.style.display = 'none';
selectedText = '';
floatingInput = false;
floatingInputValue = '';
}
};
const selectAskHandler = () => { const selectAskHandler = () => {
dispatch('select', { dispatch('select', {
type: 'ask', type: 'ask',
@ -72,10 +92,17 @@
buttonsContainerElement.style.display = 'none'; buttonsContainerElement.style.display = 'none';
}; };
const keydownHandler = (e) => {
if (e.key === 'Escape') {
closeFloatingButtons();
}
};
onMount(() => { onMount(() => {
if (floatingButtons) { if (floatingButtons) {
contentContainerElement?.addEventListener('mouseup', updateButtonPosition); contentContainerElement?.addEventListener('mouseup', updateButtonPosition);
document.addEventListener('mouseup', updateButtonPosition); document.addEventListener('mouseup', updateButtonPosition);
document.addEventListener('keydown', keydownHandler);
} }
}); });
@ -83,18 +110,7 @@
if (floatingButtons) { if (floatingButtons) {
contentContainerElement?.removeEventListener('mouseup', updateButtonPosition); contentContainerElement?.removeEventListener('mouseup', updateButtonPosition);
document.removeEventListener('mouseup', updateButtonPosition); document.removeEventListener('mouseup', updateButtonPosition);
} document.removeEventListener('keydown', keydownHandler);
});
$: if (floatingButtons) {
if (buttonsContainerElement) {
document.body.appendChild(buttonsContainerElement);
}
}
onDestroy(() => {
if (buttonsContainerElement) {
document.body.removeChild(buttonsContainerElement);
} }
}); });
</script> </script>