aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--javascript/resizeHandle.js26
-rw-r--r--style.css7
2 files changed, 31 insertions, 2 deletions
diff --git a/javascript/resizeHandle.js b/javascript/resizeHandle.js
index 5edecfcc..c0c8cbff 100644
--- a/javascript/resizeHandle.js
+++ b/javascript/resizeHandle.js
@@ -66,6 +66,11 @@
parent.insertBefore(resizeHandle, rightCol);
resizeHandle.addEventListener('mousedown', (evt) => {
+ evt.preventDefault();
+ evt.stopPropagation();
+
+ document.body.classList.add('resizing');
+
R.tracking = true;
R.parent = parent;
R.parentWidth = parent.offsetWidth;
@@ -75,20 +80,37 @@
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 (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 (R.tracking) {
+ evt.preventDefault();
+ evt.stopPropagation();
+
+ R.tracking = false;
+
+ document.body.classList.remove('resizing');
+ }
+ });
window.addEventListener('resize', () => {
diff --git a/style.css b/style.css
index 4e9cdc8f..537bc2d2 100644
--- a/style.css
+++ b/style.css
@@ -1061,6 +1061,13 @@ div.accordions > div.input-accordion.input-accordion-open{
top: 0.5em;
}
+body.resizing {
+ cursor: col-resize !important;
+}
+
+body.resizing :not(.resize-handle) {
+ pointer-events: none !important;
+}
.resize-handle {
position: relative;