From e1b37a066d9b35ad7896e632c27ac979f795681e Mon Sep 17 00:00:00 2001 From: MMP0 <28616020+MMP0@users.noreply.github.com> Date: Tue, 22 Aug 2023 16:35:49 +0900 Subject: [PATCH 1/6] Fix resize handle overflowing in Safari --- style.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/style.css b/style.css index 4166a3df18f..4b85072fd30 100644 --- a/style.css +++ b/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 */ From 70283a9f4aa457ea16db8947f60b0e4f8fb25608 Mon Sep 17 00:00:00 2001 From: MMP0 <28616020+MMP0@users.noreply.github.com> Date: Tue, 22 Aug 2023 16:40:50 +0900 Subject: [PATCH 2/6] Expand the hit area of resize handle --- style.css | 19 +++++++++++++------ 1 file changed, 13 insertions(+), 6 deletions(-) diff --git a/style.css b/style.css index 4b85072fd30..4e9cdc8f8b1 100644 --- a/style.css +++ b/style.css @@ -1062,13 +1062,20 @@ div.accordions > div.input-accordion.input-accordion-open{ } -.resize-handle{ +.resize-handle { + position: relative; cursor: col-resize; grid-column: 2 / 3; - min-width: 8px !important; - max-width: 8px !important; + min-width: 16px !important; + max-width: 16px !important; height: 100%; - border-left: 1px dashed var(--border-color-primary); - user-select: none; - margin-left: 8px; +} + +.resize-handle::after { + content: ''; + position: absolute; + top: 0; + bottom: 0; + left: 7.5px; + border-left: 1px dashed var(--border-color-primary); } From 0998256fc5e040fa1c1d5826bd858ab3838a3f26 Mon Sep 17 00:00:00 2001 From: MMP0 <28616020+MMP0@users.noreply.github.com> Date: Tue, 22 Aug 2023 16:45:34 +0900 Subject: [PATCH 3/6] Prevent text selection and cursor changes --- javascript/resizeHandle.js | 26 ++++++++++++++++++++++++-- style.css | 7 +++++++ 2 files changed, 31 insertions(+), 2 deletions(-) diff --git a/javascript/resizeHandle.js b/javascript/resizeHandle.js index 5edecfcca69..c0c8cbffad7 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 4e9cdc8f8b1..537bc2d2c02 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; From 96edfb560b32af2abcf4398d277e92a2d2b1032c Mon Sep 17 00:00:00 2001 From: MMP0 <28616020+MMP0@users.noreply.github.com> Date: Tue, 22 Aug 2023 17:19:26 +0900 Subject: [PATCH 4/6] Limit mouse detection to primary button only --- javascript/resizeHandle.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/javascript/resizeHandle.js b/javascript/resizeHandle.js index c0c8cbffad7..2fd3c4d2982 100644 --- a/javascript/resizeHandle.js +++ b/javascript/resizeHandle.js @@ -66,6 +66,8 @@ parent.insertBefore(resizeHandle, rightCol); resizeHandle.addEventListener('mousedown', (evt) => { + if (evt.button !== 0) return; + evt.preventDefault(); evt.stopPropagation(); @@ -91,6 +93,8 @@ } window.addEventListener('mousemove', (evt) => { + if (evt.button !== 0) return; + if (R.tracking) { evt.preventDefault(); evt.stopPropagation(); @@ -102,6 +106,8 @@ }); window.addEventListener('mouseup', (evt) => { + if (evt.button !== 0) return; + if (R.tracking) { evt.preventDefault(); evt.stopPropagation(); From c4b11ec54e236cc42d43fe8282ef4e4f55ccd605 Mon Sep 17 00:00:00 2001 From: MMP0 <28616020+MMP0@users.noreply.github.com> Date: Tue, 22 Aug 2023 18:48:17 +0900 Subject: [PATCH 5/6] Replace tabs with spaces --- style.css | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/style.css b/style.css index 537bc2d2c02..3cce8212dba 100644 --- a/style.css +++ b/style.css @@ -1062,7 +1062,7 @@ div.accordions > div.input-accordion.input-accordion-open{ } body.resizing { - cursor: col-resize !important; + cursor: col-resize !important; } body.resizing :not(.resize-handle) { @@ -1071,11 +1071,11 @@ body.resizing :not(.resize-handle) { .resize-handle { position: relative; - cursor: col-resize; - grid-column: 2 / 3; - min-width: 16px !important; - max-width: 16px !important; - height: 100%; + cursor: col-resize; + grid-column: 2 / 3; + min-width: 16px !important; + max-width: 16px !important; + height: 100%; } .resize-handle::after { From ed49c7c246c320562df977865476a8c43e81f1b3 Mon Sep 17 00:00:00 2001 From: MMP0 <28616020+MMP0@users.noreply.github.com> Date: Tue, 22 Aug 2023 21:21:06 +0900 Subject: [PATCH 6/6] Fix double click event not firing --- style.css | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/style.css b/style.css index 3cce8212dba..76c186a1ce4 100644 --- a/style.css +++ b/style.css @@ -1065,10 +1065,14 @@ body.resizing { cursor: col-resize !important; } -body.resizing :not(.resize-handle) { +body.resizing * { pointer-events: none !important; } +body.resizing .resize-handle { + pointer-events: initial !important; +} + .resize-handle { position: relative; cursor: col-resize;