paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-12 18:06:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

message_edit: Show loading indicator inside the button.

Browse Source 
We now show loading indicator inside the 'save' button
instead of hiding the buttons to show the loading
indicator. Both the save and clear buttons are disabled
when the request is processing. We do not change color
of the buttons just change the cursor to indicate that
button are disabled and nothing happens on clicking them.

The reason for disabling the cancel button is that it
is actually not possible to cancel the action once
loading has started, so it is actually better to disable
it only such that users are not confused.

This commit adds a wrapper div element around the button
because we wanted to add two css properties to the button-
 'pointer-events: none' such that nothing happens on click
and 'cursor: not-allowed' to indicate that buttons are
disabled. But these boht styles cannot be added to same
element because 'pointer-events: none' overrides the
'cursor: not-allowed' style and normal cursor is visible.
That's why we add a wrapper to add 'cursor: not-allowed'
style to it and add 'pointer-events: none' to the button.
This commit is contained in:
sahil839
2021-07-03 22:48:57 +05:30
committed by Tim Abbott
parent 3f0110d9c0
commit 8e7ad58557
3 changed files with 41 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
static/js/message_edit.js
View File

@@ -192,17 +192,22 @@ export function update_message_topic_editing_pencil() {
} }
export function hide_message_edit_spinner(row) { export function hide_message_edit_spinner(row) {
const spinner = row.find(".message_edit_spinner"); row.find(".loader").hide();
loading.destroy_indicator(spinner); row.find(".message_edit_save span").show();
$(".message_edit_form .message_edit_save").show(); row.find(".message_edit_save").removeClass("disable-btn");
$(".message_edit_form .message_edit_cancel").show(); row.find(".message_edit_cancel").removeClass("disable-btn");
} }
export function show_message_edit_spinner(row) { export function show_message_edit_spinner(row) {
const spinner = row.find(".message_edit_spinner"); row.find(".loader").css("display", "inline-block");
loading.make_indicator(spinner); row.find(".message_edit_save span").hide();
$(".message_edit_form .message_edit_save").hide(); row.find(".message_edit_save").addClass("disable-btn");
$(".message_edit_form .message_edit_cancel").hide(); row.find(".message_edit_cancel").addClass("disable-btn");
row.find("object").on("load", function () {
const doc = this.getSVGDocument();
const $svg = $(doc).find("svg");
$svg.find("rect").css("fill", "#000");
});
} }
export function show_topic_edit_spinner(row) { export function show_topic_edit_spinner(row) {

19
static/styles/zulip.css
View File

@@ -1470,6 +1470,25 @@ div.focused_table {
align-items: baseline; align-items: baseline;
} }
.message_edit_save .loader {
display: none;
vertical-align: top;
position: relative;
height: 28px;
margin-top: -10px;
top: 6px;
width: 30px;
}
.edit-controls {
.btn-wrapper {
cursor: not-allowed;
}
.disable-btn {
pointer-events: none;
}
}
.topic_edit { .topic_edit {
display: none; display: none;
line-height: 22px; line-height: 22px;

11
static/templates/message_edit_form.hbs
View File

@@ -54,8 +54,15 @@
<div class="message_edit_spinner"></div> <div class="message_edit_spinner"></div>
<div class="controls edit-controls"> <div class="controls edit-controls">
{{#if is_editable}} {{#if is_editable}}
<button type="button" class="button small rounded sea-green message_edit_save">{{t "Save" }}</button> <div class="btn-wrapper inline-block">
<button type="button" class="button small rounded message_edit_cancel">{{t "Cancel" }}</button> <button type="button" class="button small rounded sea-green message_edit_save">
<object class="loader" type="image/svg+xml" data="/static/images/loader.svg"></object>
<span>{{t "Save" }}</span>
</button>
</div>
<div class="btn-wrapper inline-block">
<button type="button" class="button small rounded message_edit_cancel">{{t "Cancel" }}</button>
</div>
{{#if is_content_editable}} {{#if is_content_editable}}
<div class="message-edit-feature-group"> <div class="message-edit-feature-group">
{{> compose_control_buttons }} {{> compose_control_buttons }}