openvinotoolkit/stable-diffusion-webui
1
1
Fork 0
mirror of https://github.com/openvinotoolkit/stable-diffusion-webui.git synced 2024-12-14 14:45:06 +03:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #12723 from MMP0/dev-resize-handle-fix

Browse Source 
Resize handle improvements and bug fixes
This commit is contained in:
AUTOMATIC1111 2023-08-22 15:25:28 +03:00 committed by GitHub
commit 7fd0ccdffc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 63 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
javascript/resizeHandle.js
View File

@ -66,6 +66,13 @@
parent.insertBefore(resizeHandle, rightCol); parent.insertBefore(resizeHandle, rightCol);
resizeHandle.addEventListener('mousedown', (evt) => { resizeHandle.addEventListener('mousedown', (evt) => {
if (evt.button !== 0) return;
evt.preventDefault();
evt.stopPropagation();
document.body.classList.add('resizing');
R.tracking = true; R.tracking = true;
R.parent = parent; R.parent = parent;
R.parentWidth = parent.offsetWidth; R.parentWidth = parent.offsetWidth;
@ -75,20 +82,41 @@
R.screenX = evt.screenX; R.screenX = evt.screenX;
}); });
resizeHandle.addEventListener('dblclick', () => parent.style.gridTemplateColumns = GRID_TEMPLATE_COLUMNS); resizeHandle.addEventListener('dblclick', (evt) => {
evt.preventDefault();
evt.stopPropagation();
parent.style.gridTemplateColumns = GRID_TEMPLATE_COLUMNS;
});
afterResize(parent); afterResize(parent);
} }
window.addEventListener('mousemove', (evt) => { window.addEventListener('mousemove', (evt) => {
if (evt.button !== 0) return;
if (R.tracking) { if (R.tracking) {
evt.preventDefault();
evt.stopPropagation();
const delta = R.screenX - evt.screenX; const delta = R.screenX - evt.screenX;
const leftColWidth = Math.max(Math.min(R.leftColStartWidth - delta, R.parent.offsetWidth - GRADIO_MIN_WIDTH - PAD), GRADIO_MIN_WIDTH); const leftColWidth = Math.max(Math.min(R.leftColStartWidth - delta, R.parent.offsetWidth - GRADIO_MIN_WIDTH - PAD), GRADIO_MIN_WIDTH);
setLeftColGridTemplate(R.parent, leftColWidth); setLeftColGridTemplate(R.parent, leftColWidth);
} }
}); });
window.addEventListener('mouseup', () => R.tracking = false); window.addEventListener('mouseup', (evt) => {
if (evt.button !== 0) return;
if (R.tracking) {
evt.preventDefault();
evt.stopPropagation();
R.tracking = false;
document.body.classList.remove('resizing');
}
});
window.addEventListener('resize', () => { window.addEventListener('resize', () => {

43
style.css
View File

@ -142,6 +142,11 @@ div.gradio-container, .block.gradio-textbox, div.gradio-group, div.gradio-dropdo
overflow: visible !important; overflow: visible !important;
} }
/* align-items isn't enough and elements may overflow in Safari. */
.unequal-height {
align-content: flex-start;
}
/* general styled components */ /* general styled components */
@ -1056,14 +1061,32 @@ div.accordions > div.input-accordion.input-accordion-open{
top: 0.5em; top: 0.5em;
} }
body.resizing {
.resize-handle{ cursor: col-resize !important;
cursor: col-resize; }
grid-column: 2 / 3;
min-width: 8px !important; body.resizing * {
max-width: 8px !important; pointer-events: none !important;
height: 100%; }
border-left: 1px dashed var(--border-color-primary);
user-select: none; body.resizing .resize-handle {
margin-left: 8px; pointer-events: initial !important;
}
.resize-handle {
position: relative;
cursor: col-resize;
grid-column: 2 / 3;
min-width: 16px !important;
max-width: 16px !important;
height: 100%;
}
.resize-handle::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 7.5px;
border-left: 1px dashed var(--border-color-primary);
} }