MDL-67862 message: Render dialogue header only when necessary

This commit is contained in:
Jun Pataleta 2020-02-07 23:22:53 +08:00
parent cb38ab1e39
commit fb31e3da0b
7 changed files with 18 additions and 11 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -47,6 +47,7 @@ define([], function() {
ACTION_VIEW_CONTACT: '[data-action="view-contact"]',
ACTION_VIEW_GROUP_INFO: '[data-action="view-group-info"]',
CAN_RECEIVE_FOCUS: 'input:not([type="hidden"]), a[href], button, textarea, select, [tabindex]',
CONFIRM_DIALOGUE: '[data-region="confirm-dialogue"]',
CONFIRM_DIALOGUE_BUTTON_TEXT: '[data-region="dialogue-button-text"]',
CONFIRM_DIALOGUE_CANCEL_BUTTON: '[data-action="cancel-confirm"]',
CONFIRM_DIALOGUE_CONTAINER: '[data-region="confirm-dialogue-container"]',

View File

@ -1079,11 +1079,15 @@ function(
}
if (headerText) {
dialogueHeader.removeClass('hidden');
// Create the dialogue header.
dialogueHeader = $('<h3 class="h6" data-region="dialogue-header"></h3>');
dialogueHeader.text(headerText);
} else {
dialogueHeader.addClass('hidden');
dialogueHeader.text('');
// Prepend it to the confirmation body.
var confirmDialogue = dialogue.find(SELECTORS.CONFIRM_DIALOGUE);
confirmDialogue.prepend(dialogueHeader);
} else if (dialogueHeader.length) {
// Header text is empty but dialogue header is present, so remove it.
dialogueHeader.remove();
}
buttons.forEach(function(button) {
@ -1123,8 +1127,11 @@ function(
cancelButton.removeClass('hidden');
okayButton.removeClass('hidden');
text.text('');
dialogueHeader.addClass('hidden');
dialogueHeader.text('');
// Remove dialogue header if present.
if (dialogueHeader.length) {
dialogueHeader.remove();
}
header.find(SELECTORS.CAN_RECEIVE_FOCUS).first().focus();
return true;

View File

@ -36,7 +36,6 @@
}}
<div class="p-3 bg-white" data-region="confirm-dialogue" role="alert">
<h3 class="h6 hidden" data-region="dialogue-header"></h3>
<p class="text-muted" data-region="dialogue-text"></p>
<div class="mb-2 custom-control custom-checkbox hidden" data-region="delete-messages-for-all-users-toggle-container">
<input type="checkbox" class="custom-control-input" id="delete-messages-for-all-users" data-region="delete-messages-for-all-users-toggle">