serv/mox
1
0
Fork 0
mirror of https://github.com/mjl-/mox.git synced 2024-12-26 16:33:47 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

webmail: fix dragging the corner of the compose popup when it's on top of a message view with an iframe (for an html message)

Browse source 
the pointer events for moving the mouse would be consumed by the iframe. that
broke resizing of the compose popup.  we now disable pointerevents on the main
ui when we are dragging the corner of the compose popup.

this is similar to an earlier change about the draggable split bar between the
message list and the message view (when showing an html message).
This commit is contained in:
Mechiel Lukkien 2024-11-28 18:34:48 +01:00
parent 1f604c6a3d
commit 9e8c8ca583
No known key found for this signature in database
2 changed files with 14 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
webmail/webmail.js
View file

@ -3005,9 +3005,13 @@ const compose = (opts, listMailboxes) => {
borderRadius: '.25em', borderRadius: '.25em',
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
}), initWidth ? style({ width: initWidth + 'px' }) : [], initHeight ? style({ height: initHeight + 'px' }) : [], dom.div(css('composeResizeGrab', { position: 'absolute', marginTop: '-1em', marginLeft: '-1em', width: '1em', height: '1em', cursor: 'nw-resize' }), function mousedown(e) { }), initWidth ? style({ width: initWidth + 'px' }) : [], initHeight ? style({ height: initHeight + 'px' }) : [], dom.div(css('composeResizeGrab', { position: 'absolute', marginTop: '-1em', marginLeft: '-1em', width: '1em', height: '1em', cursor: 'nw-resize' }), async function mousedown(e) {
// Disable pointer events on the message view. If it has an iframe with a message,
// mouse events while dragging would be consumed by the iframe, breaking our
// resize.
page.style.pointerEvents = 'none';
resizeLast = null; resizeLast = null;
startDrag(e, (e) => { await startDrag(e, (e) => {
if (resizeLast) { if (resizeLast) {
const bounds = composeElem.getBoundingClientRect(); const bounds = composeElem.getBoundingClientRect();
const width = Math.round(bounds.width + resizeLast.x - e.clientX); const width = Math.round(bounds.width + resizeLast.x - e.clientX);
@ -3024,6 +3028,7 @@ const compose = (opts, listMailboxes) => {
} }
resizeLast = { x: e.clientX, y: e.clientY }; resizeLast = { x: e.clientX, y: e.clientY };
}); });
page.style.pointerEvents = '';
}), dom.form(css('composeForm', { }), dom.form(css('composeForm', {
flexGrow: '1', flexGrow: '1',
display: 'flex', display: 'flex',

9
webmail/webmail.ts
View file

@ -1953,9 +1953,13 @@ const compose = (opts: ComposeOptions, listMailboxes: listMailboxes) => {
initHeight ? style({height: initHeight+'px'}) : [], initHeight ? style({height: initHeight+'px'}) : [],
dom.div( dom.div(
css('composeResizeGrab', {position: 'absolute', marginTop: '-1em', marginLeft: '-1em', width: '1em', height: '1em', cursor: 'nw-resize'}), css('composeResizeGrab', {position: 'absolute', marginTop: '-1em', marginLeft: '-1em', width: '1em', height: '1em', cursor: 'nw-resize'}),
function mousedown(e: MouseEvent) { async function mousedown(e: MouseEvent) {
// Disable pointer events on the message view. If it has an iframe with a message,
// mouse events while dragging would be consumed by the iframe, breaking our
// resize.
page.style.pointerEvents = 'none'
resizeLast = null resizeLast = null
startDrag(e, (e: MouseEvent) => { await startDrag(e, (e: MouseEvent) => {
if (resizeLast) { if (resizeLast) {
const bounds = composeElem.getBoundingClientRect() const bounds = composeElem.getBoundingClientRect()
const width = Math.round(bounds.width + resizeLast.x - e.clientX) const width = Math.round(bounds.width + resizeLast.x - e.clientX)
@ -1972,6 +1976,7 @@ const compose = (opts: ComposeOptions, listMailboxes: listMailboxes) => {
} }
resizeLast = {x: e.clientX, y: e.clientY} resizeLast = {x: e.clientX, y: e.clientY}
}) })
page.style.pointerEvents = ''
}, },
), ),
dom.form( dom.form(