UniqAI/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui synced 2024-11-06 16:59:42 +00:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

refac: floating buttons styling

Browse Source
This commit is contained in:
Timothy J. Baek 2024-10-06 20:26:35 -07:00
parent ee22ba9676
commit aaa4350eb4
1 changed files with 30 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -36,13 +36,29 @@
const range = selection.getRangeAt(0);
const rect = range.getBoundingClientRect();
// Calculate position relative to the viewport (now that it's in document.body)
const top = rect.bottom + window.scrollY;
const left = rect.left + window.scrollX;
const parentRect = contentContainerElement.getBoundingClientRect();
// Adjust based on parent rect
const top = rect.bottom - parentRect.top;
const left = rect.left - parentRect.left;
if (buttonsContainerElement) {
buttonsContainerElement.style.display = 'block';
// 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
}
} else {
@ -86,17 +102,17 @@
}
});
$: if (floatingButtons) {
if (buttonsContainerElement) {
document.body.appendChild(buttonsContainerElement);
}
}
// $: if (floatingButtons) {
// if (buttonsContainerElement) {
// document.body.appendChild(buttonsContainerElement);
// }
// }
onDestroy(() => {
if (buttonsContainerElement) {
document.body.removeChild(buttonsContainerElement);
}
});
// onDestroy(() => {
// if (buttonsContainerElement) {
// document.body.removeChild(buttonsContainerElement);
// }
// });
</script>
<div bind:this={contentContainerElement}>