settings: Create shared class for tooltips on disabled settings.

Creates a shared `disabled_setting_tooltip` class that can be
reused in cases where a personal or organization setting button
or input is disabled and a tooltip is added to give information
about why the user cannot change/access the setting.
This commit is contained in:
Lauryn Menard
2023-01-25 18:50:46 +01:00
committed by Tim Abbott
parent d8b8b34ecd
commit e6bfdc7d34
8 changed files with 22 additions and 36 deletions

View File

@@ -752,25 +752,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.ok(!$("#full_name_input_container").hasClass("name_changes_disabled_tooltip"));
assert.ok(!$("#full_name_input_container").hasClass("disabled_setting_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($("#full_name_input_container").hasClass("name_changes_disabled_tooltip"));
assert.ok($("#full_name_input_container").hasClass("disabled_setting_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($("#full_name_input_container").hasClass("name_changes_disabled_tooltip"));
assert.ok($("#full_name_input_container").hasClass("disabled_setting_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($("#full_name_input_container").hasClass("name_changes_disabled_tooltip"));
assert.ok($("#full_name_input_container").hasClass("disabled_setting_tooltip"));
page_params.realm_email_changes_disabled = false;
settings_account.update_email_change_display();
@@ -801,7 +801,7 @@ test("misc", ({override_rewire}) => {
page_params.is_admin = true;
settings_account.update_name_change_display();
assert.ok(!$("#full_name").prop("disabled"));
assert.ok(!$("#full_name_input_container").hasClass("name_changes_disabled_tooltip"));
assert.ok(!$("#full_name_input_container").hasClass("disabled_setting_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);
$("#full_name_input_container").addClass("name_changes_disabled_tooltip");
$("#full_name_input_container").addClass("disabled_setting_tooltip");
} else {
$("#full_name").prop("disabled", false);
$("#full_name_input_container").removeClass("name_changes_disabled_tooltip");
$("#full_name_input_container").removeClass("disabled_setting_tooltip");
}
}
@@ -71,10 +71,10 @@ export function update_email_change_display() {
if (!settings_data.user_can_change_email()) {
$("#change_email_button").prop("disabled", true);
$("#change_email_button_container").addClass("email_changes_disabled_tooltip");
$("#change_email_button_container").addClass("disabled_setting_tooltip");
} else {
$("#change_email_button").prop("disabled", false);
$("#change_email_button_container").removeClass("email_changes_disabled_tooltip");
$("#change_email_button_container").removeClass("disabled_setting_tooltip");
}
}
@@ -160,10 +160,10 @@ export function maybe_update_deactivate_account_button() {
if ($deactivate_account_container) {
if (people.is_current_user_only_owner()) {
$("#user_deactivate_account_button").prop("disabled", true);
$deactivate_account_container.addClass("only_organization_owner_tooltip");
$deactivate_account_container.addClass("disabled_setting_tooltip");
} else {
$("#user_deactivate_account_button").prop("disabled", false);
$deactivate_account_container.removeClass("only_organization_owner_tooltip");
$deactivate_account_container.removeClass("disabled_setting_tooltip");
}
}
}

View File

@@ -47,7 +47,7 @@ export function maybe_disable_widgets() {
if (page_params.is_admin) {
$("#deactivate_realm_button").prop("disabled", true);
$("#deactivate_realm_button_container").addClass("realm_deactivation_tooltip");
$("#deactivate_realm_button_container").addClass("disabled_setting_tooltip");
$("#org-message-retention").find("input, select").prop("disabled", true);
$("#org-join-settings").find("input, select").prop("disabled", true);
$("#id_realm_invite_required_label").parent().addClass("control-label-disabled");

View File

@@ -399,7 +399,7 @@ export function initialize() {
});
delegate("body", {
target: ["#full_name_input_container.name_changes_disabled_tooltip"],
target: ["#full_name_input_container.disabled_setting_tooltip"],
content: $t({
defaultMessage:
"Name changes are disabled in this organization. Contact an administrator to change your name.",
@@ -411,7 +411,7 @@ export function initialize() {
});
delegate("body", {
target: ["#change_email_button_container.email_changes_disabled_tooltip"],
target: ["#change_email_button_container.disabled_setting_tooltip"],
content: $t({defaultMessage: "Email address changes are disabled in this organization."}),
appendTo: () => document.body,
onHidden(instance) {
@@ -420,7 +420,7 @@ export function initialize() {
});
delegate("body", {
target: ["#deactivate_account_container.only_organization_owner_tooltip"],
target: ["#deactivate_account_container.disabled_setting_tooltip"],
content: $t({
defaultMessage:
"Because you are the only organization owner, you cannot deactivate your account.",
@@ -432,7 +432,7 @@ export function initialize() {
});
delegate("body", {
target: ["#deactivate_realm_button_container.realm_deactivation_tooltip"],
target: ["#deactivate_realm_button_container.disabled_setting_tooltip"],
content: $t({
defaultMessage: "Only organization owners may deactivate an organization.",
}),

View File

@@ -152,12 +152,6 @@ h3,
}
}
#change_email_button_container {
&.email_changes_disabled_tooltip {
cursor: not-allowed;
}
}
#change_password_modal,
#change_email_modal {
max-width: 480px;
@@ -169,16 +163,8 @@ h3,
}
}
#deactivate_realm_button_container {
&.realm_deactivation_tooltip {
cursor: not-allowed;
}
}
#deactivate_account_container {
&.only_organization_owner_tooltip {
cursor: not-allowed;
}
.disabled_setting_tooltip {
cursor: not-allowed;
}
#change_email_button,

View File

@@ -8,7 +8,7 @@
<form class="grid">
<div class="input-group">
<label class="inline-block title">{{t "Email" }}</label>
<div id="change_email_button_container" class="inline-block {{#unless user_can_change_email}}email_changes_disabled_tooltip{{/unless}}">
<div id="change_email_button_container" class="inline-block {{#unless user_can_change_email}}disabled_setting_tooltip{{/unless}}">
<button id="change_email_button" type="button" class="button btn-link small rounded inline-block" {{#unless user_can_change_email}}disabled="disabled"{{/unless}}>
{{page_params.delivery_email}}
<i class="fa fa-pencil"></i>
@@ -36,7 +36,7 @@
</form>
<div class="input-group">
<div id="deactivate_account_container" class="inline-block {{#if user_is_only_organization_owner}}only_organization_owner_tooltip{{/if}}">
<div id="deactivate_account_container" class="inline-block {{#if user_is_only_organization_owner}}disabled_setting_tooltip{{/if}}">
<button type="submit" class="button rounded btn-danger" id="user_deactivate_account_button"
{{#if user_is_only_organization_owner}}disabled="disabled"{{/if}}>
{{t 'Deactivate account' }}

View File

@@ -88,7 +88,7 @@
</h3>
<div class="deactivate-realm-section">
<div class="input-group">
<div id="deactivate_realm_button_container" class="inline-block {{#unless is_owner}}realm_deactivation_tooltip{{/unless}}">
<div id="deactivate_realm_button_container" class="inline-block {{#unless is_owner}}disabled_setting_tooltip{{/unless}}">
<button class="button rounded btn-danger" id="deactivate_realm_button">
{{t 'Deactivate organization' }}
</button>

View File

@@ -8,7 +8,7 @@
<div class="user-name-section inline-block">
<label for="full_name" class="title inline-block">{{t "Full name" }}</label>
<div class="alert-notification full-name-status"></div>
<div id="full_name_input_container" {{#unless user_can_change_name}}class="name_changes_disabled_tooltip"{{/unless}}>
<div id="full_name_input_container" {{#unless user_can_change_name}}class="disabled_setting_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>