mirror of
https://github.com/open-webui/open-webui.git
synced 2025-12-16 11:57:51 +01:00
refac: chat controls panel resize logic
This commit is contained in:
@@ -39,7 +39,11 @@
|
|||||||
|
|
||||||
export const openPane = () => {
|
export const openPane = () => {
|
||||||
if (parseInt(localStorage?.chatControlsSize)) {
|
if (parseInt(localStorage?.chatControlsSize)) {
|
||||||
pane.resize(parseInt(localStorage?.chatControlsSize));
|
const container = document.getElementById('chat-container');
|
||||||
|
let size = Math.floor(
|
||||||
|
(parseInt(localStorage?.chatControlsSize) / container.clientWidth) * 100
|
||||||
|
);
|
||||||
|
pane.resize(size);
|
||||||
} else {
|
} else {
|
||||||
pane.resize(minSize);
|
pane.resize(minSize);
|
||||||
}
|
}
|
||||||
@@ -91,7 +95,7 @@
|
|||||||
const resizeObserver = new ResizeObserver((entries) => {
|
const resizeObserver = new ResizeObserver((entries) => {
|
||||||
for (let entry of entries) {
|
for (let entry of entries) {
|
||||||
const width = entry.contentRect.width;
|
const width = entry.contentRect.width;
|
||||||
// calculate the percentage of 200px
|
// calculate the percentage of 350px
|
||||||
const percentage = (350 / width) * 100;
|
const percentage = (350 / width) * 100;
|
||||||
// set the minSize to the percentage, must be an integer
|
// set the minSize to the percentage, must be an integer
|
||||||
minSize = Math.floor(percentage);
|
minSize = Math.floor(percentage);
|
||||||
@@ -99,6 +103,13 @@
|
|||||||
if ($showControls) {
|
if ($showControls) {
|
||||||
if (pane && pane.isExpanded() && pane.getSize() < minSize) {
|
if (pane && pane.isExpanded() && pane.getSize() < minSize) {
|
||||||
pane.resize(minSize);
|
pane.resize(minSize);
|
||||||
|
} else {
|
||||||
|
let size = Math.floor(
|
||||||
|
(parseInt(localStorage?.chatControlsSize) / container.clientWidth) * 100
|
||||||
|
);
|
||||||
|
if (size < minSize) {
|
||||||
|
pane.resize(minSize);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -217,7 +228,11 @@
|
|||||||
if (size < minSize) {
|
if (size < minSize) {
|
||||||
localStorage.chatControlsSize = 0;
|
localStorage.chatControlsSize = 0;
|
||||||
} else {
|
} else {
|
||||||
localStorage.chatControlsSize = size;
|
// save the size in pixels to localStorage
|
||||||
|
const container = document.getElementById('chat-container');
|
||||||
|
localStorage.chatControlsSize = Math.floor((size / 100) * container.clientWidth);
|
||||||
|
|
||||||
|
console.log('saved size', localStorage.chatControlsSize);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
|
|||||||
Reference in New Issue
Block a user