settings-profile: Move tooltip for name change disabled to field.

Moves the tooltip when name changes are disabled to be shown on
hovering over the full name input field. Removes the question icon
that previously showed the tooltip on hover.
This commit is contained in:
Lauryn Menard 2023-01-13 16:09:12 +01:00 committed by Tim Abbott
parent 578af48632
commit 1e96c6e9a2
5 changed files with 20 additions and 20 deletions

View File

@ -733,25 +733,25 @@ test("misc", ({override_rewire}) => {
page_params.server_name_changes_disabled = false;
settings_account.update_name_change_display();
assert.ok(!$("#full_name").prop("disabled"));
assert.equal($(".change_name_tooltip").is(":visible"), false);
assert.ok(!$(".name-input").hasClass("name_changes_disabled_tooltip"));
page_params.realm_name_changes_disabled = true;
page_params.server_name_changes_disabled = false;
settings_account.update_name_change_display();
assert.ok($("#full_name").prop("disabled"));
assert.ok($(".change_name_tooltip").is(":visible"));
assert.ok($(".name-input").hasClass("name_changes_disabled_tooltip"));
page_params.realm_name_changes_disabled = true;
page_params.server_name_changes_disabled = true;
settings_account.update_name_change_display();
assert.ok($("#full_name").prop("disabled"));
assert.ok($(".change_name_tooltip").is(":visible"));
assert.ok($(".name-input").hasClass("name_changes_disabled_tooltip"));
page_params.realm_name_changes_disabled = false;
page_params.server_name_changes_disabled = true;
settings_account.update_name_change_display();
assert.ok($("#full_name").prop("disabled"));
assert.ok($(".change_name_tooltip").is(":visible"));
assert.ok($(".name-input").hasClass("name_changes_disabled_tooltip"));
page_params.realm_email_changes_disabled = false;
settings_account.update_email_change_display();
@ -782,7 +782,7 @@ test("misc", ({override_rewire}) => {
page_params.is_admin = true;
settings_account.update_name_change_display();
assert.ok(!$("#full_name").prop("disabled"));
assert.equal($(".change_name_tooltip").is(":visible"), false);
assert.ok(!$(".name-input").hasClass("name_changes_disabled_tooltip"));
settings_account.update_email_change_display();
assert.ok(!$("#change_email_button").prop("disabled"));

View File

@ -57,10 +57,10 @@ export function update_name_change_display() {
if (!settings_data.user_can_change_name()) {
$("#full_name").prop("disabled", true);
$(".change_name_tooltip").show();
$(".name-input").addClass("name_changes_disabled_tooltip");
} else {
$("#full_name").prop("disabled", false);
$(".change_name_tooltip").hide();
$(".name-input").removeClass("name_changes_disabled_tooltip");
}
}

View File

@ -398,6 +398,18 @@ export function initialize() {
},
});
delegate("body", {
target: [".name-input.name_changes_disabled_tooltip"],
content: $t({
defaultMessage:
"Name changes are disabled in this organization. Contact an administrator to change your name.",
}),
appendTo: () => document.body,
onHidden(instance) {
instance.destroy();
},
});
delegate("body", {
target: ["#change_email_button_container.email_changes_disabled_tooltip"],
content: $t({defaultMessage: "Email address changes are disabled in this organization."}),

View File

@ -50,14 +50,6 @@ h3,
}
}
.user-name-section {
.settings-info-icon {
position: relative;
top: 2px;
left: 1px;
}
}
h3,
.settings-section-title {
.fa-question-circle-o {

View File

@ -7,12 +7,8 @@
<div class="input-group inline-block grid user-name-parent">
<div class="user-name-section inline-block">
<label for="full_name" class="title inline-block">{{t "Full name" }}</label>
<i class="fa fa-question-circle change_name_tooltip tippy-zulip-tooltip settings-info-icon"
{{#if user_can_change_name}}style="display:none"{{/if}}
data-tippy-content="{{t 'Name changes are disabled in this organization. Contact an administrator to change your name.' }}">
</i>
<div class="alert-notification full-name-status"></div>
<div class="name-input">
<div class="name-input {{#unless user_can_change_name}}name_changes_disabled_tooltip{{/unless}}">
<input id="full_name" name="full_name" type="text" value="{{ page_params.full_name }}" {{#unless user_can_change_name}}disabled="disabled"{{/unless}} maxlength="60" />
</div>
</div>