mirror of
https://github.com/open-webui/open-webui.git
synced 2025-12-12 04:15:25 +00:00
refac: chat controls panel resize logic
This commit is contained in:
parent
41f9a8caff
commit
fcebc82ec2
1 changed files with 18 additions and 3 deletions
|
|
@ -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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue