paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-10-23 04:52:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

buttons: Redesign buttons in personal settings.

Browse Source 
This PR modifies the Preferences button to an action button in neutral,
and 'Send a test notification' into a medium-emphasis neutral action
button.

Fixes: #34535

Co-authored-by: Yatin Sharma <aman1312sharma@gmail.com>
This commit is contained in:
Maneesh Shukla
2025-07-06 12:01:20 +05:30
committed by Tim Abbott
parent f9d52189fc
commit 6ce089990e
6 changed files with 30 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
web/src/settings_components.ts
View File

@@ -718,7 +718,7 @@ export let get_input_element_value = (
case "field-data-setting":
return get_field_data_input_value($input_elem);
case "language-setting":
return $input_elem.find(".language_selection_button span").attr("data-language-code");
return $input_elem.attr("data-language-code");
case "auth-methods":
return JSON.stringify(get_auth_method_list_data());
case "group-setting-type": {
@@ -882,9 +882,9 @@ export function check_realm_settings_property_changed(elem: HTMLElement): boolea
proposed_val = get_jitsi_server_url_setting_value($(elem), false);
break;
case "realm_default_language":
proposed_val = $(
"#org-notifications .language_selection_widget .language_selection_button span",
).attr("data-language-code");
proposed_val = $("#org-notifications .language_selection_widget").attr(
"data-language-code",
);
break;
default:
if (current_val !== undefined) {

4
web/src/settings_org.ts
View File

@@ -536,11 +536,11 @@ export function discard_realm_property_element_changes(elem: HTMLElement): void
}
case "realm_default_language":
assert(typeof property_value === "string");
$("#org-notifications .language_selection_widget .language_selection_button span").attr(
$("#org-notifications .language_selection_widget").attr(
"data-language-code",
property_value,
);
$("#org-notifications .language_selection_widget .language_selection_button span").text(
$("#org-notifications .language_selection_widget .language_selection_button").text(
// We know this is defined, since we got the `property_value` from a dropdown
// of valid language options.
get_language_name(property_value)!,

12
web/src/settings_preferences.ts
View File

@@ -118,10 +118,8 @@ function org_notification_default_language_modal_post_render(): void {
assert(setting_value !== undefined);
const new_language = $link.attr("data-name");
assert(new_language !== undefined);
const $language_element = $(
"#org-notifications .language_selection_widget .language_selection_button span",
);
$language_element.text(new_language);
const $language_element = $("#org-notifications .language_selection_widget");
$language_element.find(".language_selection_button").text(new_language);
$language_element.attr("data-language-code", setting_value);
settings_components.save_discard_realm_settings_widget_status_handler(
$("#org-notifications"),
@@ -144,10 +142,10 @@ function user_default_language_modal_post_render(): void {
const new_language = $link.attr("data-name");
assert(new_language !== undefined);
$("#user-preferences .language_selection_widget .language_selection_button span").text(
$("#user-preferences .language_selection_widget .language_selection_button").text(
new_language,
);
$("#user-preferences .language_selection_widget .language_selection_button span").attr(
$("#user-preferences .language_selection_widget").attr(
"data-language-code",
setting_value,
);
@@ -442,7 +440,7 @@ export function update_page(property: UserSettingsProperty): void {
// The default_language button text updates to the language
// name and not the value of the user_settings property.
if (property === "default_language") {
$container.find(".default_language_name").text(user_default_language_name ?? "");
$container.find(".language_selection_button").text(user_default_language_name ?? "");
return;
}

4
web/styles/settings.css
View File

@@ -468,6 +468,10 @@ input[type="checkbox"] {
}
}
.send_test_notification {
margin-bottom: 15px;
}
.preferences-settings-form {
.tab-picker {
width: 325px;

13
web/templates/settings/language_selection_widget.hbs
View File

@@ -1,11 +1,16 @@
<div class="language_selection_widget input-group prop-element" id="id_{{section_name}}" data-setting-widget-type="language-setting">
<div class="language_selection_widget input-group prop-element" id="id_{{section_name}}" data-language-code="{{language_code}}" data-setting-widget-type="language-setting">
<label class="settings-field-label" for="id_language_selection_button">
{{section_title}}
{{#if help_link_widget_link}}
{{> ../help_link_widget link=help_link_widget_link }}
{{/if}}
</label>
<button type="button" id="id_language_selection_button" class="language_selection_button button rounded tippy-zulip-delayed-tooltip" data-section="{{section_name}}" data-tippy-content="{{t 'Change language' }}">
<span class="{{section_name}}" data-language-code="{{language_code}}">{{setting_value}}</span>
</button>
{{> ../components/action_button
label=setting_value
custom_classes="language_selection_button tippy-zulip-delayed-tooltip"
data-tippy-content=(t "Change language")
id="id_language_selection_button"
intent="neutral"
attention="quiet"
}}
</div>

7
web/templates/settings/notification_settings.hbs
View File

@@ -134,7 +134,12 @@
<div class="desktop-notification-settings-banners banner-wrapper"></div>
{{#unless for_realm_settings}}
<p><a class="send_test_notification">{{t "Send a test notification" }}</a></p>
{{> ../components/action_button
label=(t "Send a test notification")
attention="quiet"
intent="neutral"
custom_classes="send_test_notification"
}}
{{/unless}}
{{#each notification_settings.desktop_notification_settings}}