Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

uploads: Extend drag and drop upload area to blank areas after sidebars. 

To extend the drag and drop upload area to blank areas after sidebars,
we now detect the drag/drop event on the entire ".app" division.

We also change replace `width` and `height` css properties with
`min-width` and `min-height` properties respectively, to make sure
that the ".app" div spans the entire width and height of the viewport.

Fixes: #27550.
This commit is contained in:
Sayam Samal 2023-11-05 03:13:10 +05:30 committed by Tim Abbott
parent db6246fcc7
commit def4cf7f93
3 changed files with 12 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
web/src/upload.js
View File

@ -437,13 +437,13 @@ export function initialize() {
mode: "compose",
});
// Allow the main panel to receive drag/drop events.
$(".app-main").on("dragover", (event) => event.preventDefault());
// Allow the app panel to receive drag/drop events.
$(".app").on("dragover", (event) => event.preventDefault());
// TODO: Do something visual to hint that drag/drop will work.
$(".app-main").on("dragenter", (event) => event.preventDefault());
$(".app").on("dragenter", (event) => event.preventDefault());
$(".app-main").on("drop", (event) => {
$(".app").on("drop", (event) => {
event.preventDefault();
const $drag_drop_edit_containers = $(".message_edit_form form");

4
web/styles/zulip.css
View File

@ -966,8 +966,8 @@ p.n-margin {
}
.app {
width: 100%;
height: 100%;
min-width: 100%;
min-height: 100%;
z-index: 99;
}

12
web/tests/upload.test.js
View File

@ -662,12 +662,12 @@ test("main_file_drop_compose_mode", ({override, override_rewire}) => {
};
// dragover event test
const dragover_handler = $(".app-main").get_on_handler("dragover");
const dragover_handler = $(".app").get_on_handler("dragover");
dragover_handler(drag_event);
assert.equal(prevent_default_counter, 1);
// dragenter event test
const dragenter_handler = $(".app-main").get_on_handler("dragenter");
const dragenter_handler = $(".app").get_on_handler("dragenter");
dragenter_handler(drag_event);
assert.equal(prevent_default_counter, 2);
@ -686,7 +686,7 @@ test("main_file_drop_compose_mode", ({override, override_rewire}) => {
$(".message_edit_form form").last = () => ({length: 0});
const drop_handler = $(".app-main").get_on_handler("drop");
const drop_handler = $(".app").get_on_handler("drop");
// Test drop on compose box
let upload_files_called = false;
@ -764,11 +764,11 @@ test("main_file_drop_edit_mode", ({override, override_rewire}) => {
const $drag_drop_container = $(`#zfilt${CSS.escape(40)} .message_edit_form`);
// Dragover event test
const dragover_handler = $(".app-main").get_on_handler("dragover");
const dragover_handler = $(".app").get_on_handler("dragover");
dragover_handler(drag_event);
assert.equal(prevent_default_counter, 1);
// Dragenter event test
const dragenter_handler = $(".app-main").get_on_handler("dragenter");
const dragenter_handler = $(".app").get_on_handler("dragenter");
dragenter_handler(drag_event);
assert.equal(prevent_default_counter, 2);
@ -784,7 +784,7 @@ test("main_file_drop_edit_mode", ({override, override_rewire}) => {
},
},
};
const drop_handler = $(".app-main").get_on_handler("drop");
const drop_handler = $(".app").get_on_handler("drop");
let upload_files_called = false;
let dropped_row_id = -1;
override_rewire(upload, "upload_files", (_, config) => {