paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-03 21:43:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

upload_banner: Add a cancel button.

Browse Source 
This commit adds a cancel button to the upload banner, replacing
the previous close icon. Now, the cancel button is used to cancel
the upload process, while the close icon is used to remove the
upload banner without interrupting the upload.

A new case has been added to the switch statement in the 'upload.js'
file to handle the functionality of hiding the banner called
'upload_banner_hide_button'.

Replaced the functionality of the 'compose_banner_close_banner' case
inside the switch statement with a new case called
'upload_banner_cancel_button'. The cancel button is now assigned
the selector 'upload_banner_cancel_button'.

`Cancel` button is only preset for banner which tracks
progress while a file is being uploaded.

To maintain consistency with other banners, the cancel button's
dimensions and color have been adjusted to match the style of other
buttons present in different banners.

Fixes: #21156
This commit is contained in:
Palash Baderia
2023-06-06 18:07:19 +05:30
committed by Tim Abbott
parent a45853d313
commit 624fea2e8e
5 changed files with 55 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
web/src/upload.js
View File

@@ -40,6 +40,12 @@ export function get_item(key, config, file_id) {
return `#compose_banners .upload_banner.file_${CSS.escape(file_id)}`;
case "upload_banner":
return $(`#compose_banners .upload_banner.file_${CSS.escape(file_id)}`);
case "upload_banner_cancel_button":
return $(
`#compose_banners .upload_banner.file_${CSS.escape(
file_id,
)} .upload_banner_cancel_button`,
);
case "upload_banner_close_button":
return $(
`#compose_banners .upload_banner.file_${CSS.escape(
@@ -82,6 +88,12 @@ export function get_item(key, config, file_id) {
file_id,
)}`,
);
case "upload_banner_cancel_button":
return $(
`#edit_form_${CSS.escape(config.row)} .upload_banner.file_${CSS.escape(
file_id,
)} .upload_banner_cancel_button`,
);
case "upload_banner_close_button":
return $(
`#edit_form_${CSS.escape(config.row)} .upload_banner.file_${CSS.escape(
@@ -117,9 +129,16 @@ export function hide_upload_banner(uppy, config, file_id) {
}
}
function add_upload_banner(config, banner_type, banner_text, file_id) {
function add_upload_banner(
config,
banner_type,
banner_text,
file_id,
is_upload_process_tracker = false,
) {
const new_banner = render_upload_banner({
banner_type,
is_upload_process_tracker,
banner_text,
file_id,
});
@@ -199,8 +218,9 @@ export async function upload_files(uppy, config, files) {
"info",
$t({defaultMessage: "Uploading {filename}…"}, {filename: file.name}),
file.id,
true,
);
get_item("upload_banner_close_button", config, file.id).one("click", () => {
get_item("upload_banner_cancel_button", config, file.id).one("click", () => {
compose_ui.replace_syntax(
get_translated_status(file),
"",
@@ -212,6 +232,9 @@ export async function upload_files(uppy, config, files) {
uppy.removeFile(file.id);
hide_upload_banner(uppy, config, file.id);
});
get_item("upload_banner_close_button", config, file.id).one("click", () => {
hide_upload_banner(uppy, config, file.id);
});
}
}

13
web/styles/compose.css
View File

@@ -292,7 +292,8 @@
flex-grow: 1;
}
.main-view-banner-action-button {
.main-view-banner-action-button,
.upload_banner_cancel_button {
border: none;
border-radius: 4px;
padding: 5px 10px;
@@ -431,7 +432,8 @@
}
}
.main-view-banner-action-button {
.main-view-banner-action-button,
.upload_banner_cancel_button {
background-color: hsl(204deg 49% 29% / 10%);
color: inherit;
@@ -464,8 +466,13 @@
bottom: 0;
}
.upload_msg {
flex-grow: 1;
}
.upload_msg,
.main-view-banner-close-button {
.main-view-banner-close-button,
.upload_banner_cancel_button {
z-index: 1;
position: relative;
}

3
web/styles/dark_theme.css
View File

@@ -332,7 +332,8 @@
}
}
.main-view-banner-action-button {
.main-view-banner-action-button,
.upload_banner_cancel_button {
background-color: hsl(205deg 58% 69% / 10%);
border-color: transparent;
color: hsl(205deg 58% 69%);

3
web/templates/compose_banner/upload_banner.hbs
View File

@@ -1,5 +1,8 @@
<div class="upload_banner file_{{file_id}} main-view-banner {{banner_type}}">
<div class="moving_bar"></div>
<p class="upload_msg">{{banner_text}}</p>
{{#if is_upload_process_tracker}}
<button class="upload_banner_cancel_button">{{t 'Cancel' }}</button>
{{/if}}
<a role="button" class="zulip-icon zulip-icon-close main-view-banner-close-button"></a>
</div>

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

@@ -49,6 +49,10 @@ test("get_item", () => {
upload.get_item("upload_banner_message", {mode: "compose"}, "id_1"),
$("#compose_banners .upload_banner.file_id_1 .upload_msg"),
);
assert.equal(
upload.get_item("upload_banner_cancel_button", {mode: "compose"}, "id_2"),
$("#compose_banners .upload_banner.file_id_2 .upload_banner_cancel_button"),
);
assert.equal(
upload.get_item("upload_banner_close_button", {mode: "compose"}, "id_2"),
$("#compose_banners .upload_banner.file_id_2 .main-view-banner-close-button"),
@@ -84,6 +88,15 @@ test("get_item", () => {
$(`#edit_form_${CSS.escape(75)} .upload_banner.file_id_60`),
);
$(`#edit_form_${CSS.escape(2)} .upload_banner`).set_find_results(
".upload_banner_cancel_button",
$(".upload_banner_cancel_button"),
);
assert.equal(
upload.get_item("upload_banner_cancel_button", {mode: "edit", row: 2}, "id_34"),
$(`#edit_form_${CSS.escape(2)} .upload_banner.file_id_34 .upload_banner_cancel_button`),
);
$(`#edit_form_${CSS.escape(2)} .upload_banner`).set_find_results(
".main-view-banner-close-button",
$(".main-view-banner-close-button"),
@@ -240,7 +253,8 @@ test("upload_files", async ({mock_template, override_rewire}) => {
page_params.max_file_upload_size_mib = 25;
let on_click_close_button_callback;
$("#compose_banners .upload_banner.file_id_123 .main-view-banner-close-button").one = (
$("#compose_banners .upload_banner.file_id_123 .upload_banner_cancel_button").one = (
event,
callback,
) => {