user avatar: Remove user_avatar_delete_button id.

we can remove `user_avatar_delete_button` id and access delete button
from `#user-avatar-upload-widget .settings-page-delete-button` so that
we can have only one id at top level and 'image_upload_widget.hbs`
can be more dynamic so we can use for other similar widgets also.
This commit is contained in:
jagansivam28 2020-06-13 11:42:47 +05:30 committed by Tim Abbott
parent 95de217326
commit b3fca96254
5 changed files with 15 additions and 11 deletions

View File

@ -986,25 +986,25 @@ run_test('misc', () => {
page_params.server_avatar_changes_disabled = false; page_params.server_avatar_changes_disabled = false;
settings_account.update_avatar_change_display(); settings_account.update_avatar_change_display();
assert.equal($("#user_avatar_upload_button .button").attr('disabled'), false); assert.equal($("#user_avatar_upload_button .button").attr('disabled'), false);
assert.equal($("#user_avatar_delete_button .button").attr('disabled'), false); assert.equal($("#user-avatar-upload-widget .settings-page-delete-button .button").attr('disabled'), false);
page_params.realm_avatar_changes_disabled = true; page_params.realm_avatar_changes_disabled = true;
page_params.server_avatar_changes_disabled = false; page_params.server_avatar_changes_disabled = false;
settings_account.update_avatar_change_display(); settings_account.update_avatar_change_display();
assert.equal($("#user_avatar_upload_button .button").attr('disabled'), 'disabled'); assert.equal($("#user_avatar_upload_button .button").attr('disabled'), 'disabled');
assert.equal($("#user_avatar_delete_button .button").attr('disabled'), 'disabled'); assert.equal($("#user-avatar-upload-widget .settings-page-delete-button .button").attr('disabled'), 'disabled');
page_params.realm_avatar_changes_disabled = false; page_params.realm_avatar_changes_disabled = false;
page_params.server_avatar_changes_disabled = true; page_params.server_avatar_changes_disabled = true;
settings_account.update_avatar_change_display(); settings_account.update_avatar_change_display();
assert.equal($("#user_avatar_upload_button .button").attr('disabled'), 'disabled'); assert.equal($("#user_avatar_upload_button .button").attr('disabled'), 'disabled');
assert.equal($("#user_avatar_delete_button .button").attr('disabled'), 'disabled'); assert.equal($("#user-avatar-upload-widget .settings-page-delete-button .button").attr('disabled'), 'disabled');
page_params.realm_avatar_changes_disabled = true; page_params.realm_avatar_changes_disabled = true;
page_params.server_avatar_changes_disabled = true; page_params.server_avatar_changes_disabled = true;
settings_account.update_avatar_change_display(); settings_account.update_avatar_change_display();
assert.equal($("#user_avatar_upload_button .button").attr('disabled'), 'disabled'); assert.equal($("#user_avatar_upload_button .button").attr('disabled'), 'disabled');
assert.equal($("#user_avatar_delete_button .button").attr('disabled'), 'disabled'); assert.equal($("#user-avatar-upload-widget .settings-page-delete-button .button").attr('disabled'), 'disabled');
// If organization admin, these UI elements are never disabled. // If organization admin, these UI elements are never disabled.
page_params.is_admin = true; page_params.is_admin = true;

View File

@ -46,13 +46,13 @@ exports.build_user_avatar_widget = function (upload_function) {
}; };
if (page_params.avatar_source === 'G') { if (page_params.avatar_source === 'G') {
$("#user_avatar_delete_button").hide(); $("#user-avatar-upload-widget .settings-page-delete-button").hide();
$("#user-avatar-source").show(); $("#user-avatar-source").show();
} else { } else {
$("#user-avatar-source").hide(); $("#user-avatar-source").hide();
} }
$("#user_avatar_delete_button").on('click keydown', function (e) { $("#user-avatar-upload-widget .settings-page-delete-button").on('click keydown', function (e) {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
channel.del({ channel.del({

View File

@ -68,17 +68,17 @@ exports.update_email_change_display = function () {
exports.update_avatar_change_display = function () { exports.update_avatar_change_display = function () {
if (!exports.user_can_change_avatar()) { if (!exports.user_can_change_avatar()) {
$('#user_avatar_upload_button .button').attr('disabled', 'disabled'); $('#user_avatar_upload_button .button').attr('disabled', 'disabled');
$('#user_avatar_delete_button .button').attr('disabled', 'disabled'); $("#user-avatar-upload-widget .settings-page-delete-button .button").attr('disabled', 'disabled');
} else { } else {
$('#user_avatar_upload_button .button').attr('disabled', false); $('#user_avatar_upload_button .button').attr('disabled', false);
$('#user_avatar_delete_button .button').attr('disabled', false); $('#user-avatar-upload-widget .settings-page-delete-button .button').attr('disabled', false);
} }
}; };
function display_avatar_upload_complete() { function display_avatar_upload_complete() {
$('#avatar-spinner-background').css({visibility: 'hidden'}); $('#avatar-spinner-background').css({visibility: 'hidden'});
$('#user_avatar_upload_button').show(); $('#user_avatar_upload_button').show();
$('#user_avatar_delete_button').show(); $('#user-avatar-upload-widget .settings-page-delete-button').show();
} }
@ -86,7 +86,7 @@ function display_avatar_upload_started() {
$("#user-avatar-source").hide(); $("#user-avatar-source").hide();
$('#avatar-spinner-background').css({visibility: 'visible'}); $('#avatar-spinner-background').css({visibility: 'visible'});
$('#user_avatar_upload_button').hide(); $('#user_avatar_upload_button').hide();
$('#user_avatar_delete_button').hide(); $('#user-avatar-upload-widget .settings-page-delete-button').hide();
} }

View File

@ -1193,6 +1193,10 @@ input[type=checkbox] {
z-index: 99; z-index: 99;
} }
.settings-page-delete-button {
font-size: 3rem;
}
} }
.avatar-icon-logo-settings { .avatar-icon-logo-settings {

View File

@ -2,7 +2,7 @@
{{#if is_editable_by_current_user}} {{#if is_editable_by_current_user}}
<div class="image_upload_button"> <div class="image_upload_button">
<div class="settings-page-image-background"></div> <div class="settings-page-image-background"></div>
<span id="user_avatar_delete_button" class="settings-page-delete-button" aria-label="{{t 'Delete profile picture'}}" role="button" tabindex="0"> <span class="settings-page-delete-button" aria-label="{{t delete_text }}" role="button" tabindex="0">
&times; &times;
</span> </span>
<span id="user_avatar_delete" class="settings-page-delete-text" aria-label="{{t 'Delete profile picture'}}" tabindex="0"> <span id="user_avatar_delete" class="settings-page-delete-text" aria-label="{{t 'Delete profile picture'}}" tabindex="0">