mirror of
https://github.com/openvinotoolkit/stable-diffusion-webui.git
synced 2024-12-14 14:45:06 +03:00
Merge pull request #12723 from MMP0/dev-resize-handle-fix
Resize handle improvements and bug fixes
This commit is contained in:
commit
7fd0ccdffc
@ -66,6 +66,13 @@
|
||||
parent.insertBefore(resizeHandle, rightCol);
|
||||
|
||||
resizeHandle.addEventListener('mousedown', (evt) => {
|
||||
if (evt.button !== 0) return;
|
||||
|
||||
evt.preventDefault();
|
||||
evt.stopPropagation();
|
||||
|
||||
document.body.classList.add('resizing');
|
||||
|
||||
R.tracking = true;
|
||||
R.parent = parent;
|
||||
R.parentWidth = parent.offsetWidth;
|
||||
@ -75,20 +82,41 @@
|
||||
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);
|
||||
}
|
||||
|
||||
window.addEventListener('mousemove', (evt) => {
|
||||
if (evt.button !== 0) return;
|
||||
|
||||
if (R.tracking) {
|
||||
evt.preventDefault();
|
||||
evt.stopPropagation();
|
||||
|
||||
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);
|
||||
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', () => {
|
||||
|
43
style.css
43
style.css
@ -142,6 +142,11 @@ div.gradio-container, .block.gradio-textbox, div.gradio-group, div.gradio-dropdo
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
/* align-items isn't enough and elements may overflow in Safari. */
|
||||
.unequal-height {
|
||||
align-content: flex-start;
|
||||
}
|
||||
|
||||
|
||||
/* general styled components */
|
||||
|
||||
@ -1056,14 +1061,32 @@ div.accordions > div.input-accordion.input-accordion-open{
|
||||
top: 0.5em;
|
||||
}
|
||||
|
||||
|
||||
.resize-handle{
|
||||
cursor: col-resize;
|
||||
grid-column: 2 / 3;
|
||||
min-width: 8px !important;
|
||||
max-width: 8px !important;
|
||||
height: 100%;
|
||||
border-left: 1px dashed var(--border-color-primary);
|
||||
user-select: none;
|
||||
margin-left: 8px;
|
||||
body.resizing {
|
||||
cursor: col-resize !important;
|
||||
}
|
||||
|
||||
body.resizing * {
|
||||
pointer-events: none !important;
|
||||
}
|
||||
|
||||
body.resizing .resize-handle {
|
||||
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);
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user