paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-10-23 16:14:02 +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": case "field-data-setting":
return get_field_data_input_value($input_elem); return get_field_data_input_value($input_elem);
case "language-setting": 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": case "auth-methods":
return JSON.stringify(get_auth_method_list_data()); return JSON.stringify(get_auth_method_list_data());
case "group-setting-type": { 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); proposed_val = get_jitsi_server_url_setting_value($(elem), false);
break; break;
case "realm_default_language": case "realm_default_language":
proposed_val = $( proposed_val = $("#org-notifications .language_selection_widget").attr(
"#org-notifications .language_selection_widget .language_selection_button span", "data-language-code",
).attr("data-language-code"); );
break; break;
default: default:
if (current_val !== undefined) { 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": case "realm_default_language":
assert(typeof property_value === "string"); assert(typeof property_value === "string");
$("#org-notifications .language_selection_widget .language_selection_button span").attr( $("#org-notifications .language_selection_widget").attr(
"data-language-code", "data-language-code",
property_value, 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 // We know this is defined, since we got the `property_value` from a dropdown
// of valid language options. // of valid language options.
get_language_name(property_value)!, 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); assert(setting_value !== undefined);
const new_language = $link.attr("data-name"); const new_language = $link.attr("data-name");
assert(new_language !== undefined); assert(new_language !== undefined);
const $language_element = $( const $language_element = $("#org-notifications .language_selection_widget");
"#org-notifications .language_selection_widget .language_selection_button span", $language_element.find(".language_selection_button").text(new_language);
);
$language_element.text(new_language);
$language_element.attr("data-language-code", setting_value); $language_element.attr("data-language-code", setting_value);
settings_components.save_discard_realm_settings_widget_status_handler( settings_components.save_discard_realm_settings_widget_status_handler(
$("#org-notifications"), $("#org-notifications"),
@@ -144,10 +142,10 @@ function user_default_language_modal_post_render(): void {
const new_language = $link.attr("data-name"); const new_language = $link.attr("data-name");
assert(new_language !== undefined); 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, new_language,
); );
$("#user-preferences .language_selection_widget .language_selection_button span").attr( $("#user-preferences .language_selection_widget").attr(
"data-language-code", "data-language-code",
setting_value, setting_value,
); );
@@ -442,7 +440,7 @@ export function update_page(property: UserSettingsProperty): void {
// The default_language button text updates to the language // The default_language button text updates to the language
// name and not the value of the user_settings property. // name and not the value of the user_settings property.
if (property === "default_language") { 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; return;
} }

4
web/styles/settings.css
View File

@@ -468,6 +468,10 @@ input[type="checkbox"] {
} }
} }
.send_test_notification {
margin-bottom: 15px;
}
.preferences-settings-form { .preferences-settings-form {
.tab-picker { .tab-picker {
width: 325px; 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"> <label class="settings-field-label" for="id_language_selection_button">
{{section_title}} {{section_title}}
{{#if help_link_widget_link}} {{#if help_link_widget_link}}
{{> ../help_link_widget link=help_link_widget_link }} {{> ../help_link_widget link=help_link_widget_link }}
{{/if}} {{/if}}
</label> </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' }}"> {{> ../components/action_button
<span class="{{section_name}}" data-language-code="{{language_code}}">{{setting_value}}</span> label=setting_value
</button> 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> </div>

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

@@ -134,7 +134,12 @@
<div class="desktop-notification-settings-banners banner-wrapper"></div> <div class="desktop-notification-settings-banners banner-wrapper"></div>
{{#unless for_realm_settings}} {{#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}} {{/unless}}
{{#each notification_settings.desktop_notification_settings}} {{#each notification_settings.desktop_notification_settings}}