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

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

@ -36,13 +36,29 @@
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 {
@ -86,17 +102,17 @@
} }
}); });
$: if (floatingButtons) { // $: if (floatingButtons) {
if (buttonsContainerElement) { // if (buttonsContainerElement) {
document.body.appendChild(buttonsContainerElement); // document.body.appendChild(buttonsContainerElement);
} // }
} // }
onDestroy(() => { // onDestroy(() => {
if (buttonsContainerElement) { // if (buttonsContainerElement) {
document.body.removeChild(buttonsContainerElement); // document.body.removeChild(buttonsContainerElement);
} // }
}); // });
</script> </script>
<div bind:this={contentContainerElement}> <div bind:this={contentContainerElement}>