button_migration: Restyle buttons in channel and group settings.

Fixes part of #33130.
This commit is contained in:
Maneesh Shukla 2025-03-07 16:45:18 +05:30 committed by Tim Abbott
parent dd20743e66
commit 37ec0a7c03
8 changed files with 84 additions and 21 deletions

View File

@ -101,7 +101,7 @@ export function set_up_handlers_for_add_button_state(
$pill_container: JQuery,
): void {
const $pill_widget_input = $pill_container.find(".input");
const $pill_widget_button = $pill_container.closest(".add-button-container").find(".button");
const $pill_widget_button = $pill_container.closest(".add-button-container").find("button");
// Disable the add button first time the pill container is created.
$pill_widget_button.prop("disabled", true);

View File

@ -510,9 +510,7 @@ export function enable_or_disable_add_subscribers_elements(
.addClass("add_subscribers_disabled");
}
} else {
const $add_subscribers_button = $container_elem
.find('button[name="add_subscriber"]')
.expectOne();
const $add_subscribers_button = $container_elem.find(".add-subscriber-button").expectOne();
$add_subscribers_button.prop("disabled", !enable_elem);
if (enable_elem) {
$add_subscribers_button.css("pointer-events", "");

View File

@ -129,7 +129,7 @@ function update_add_members_elements(group: UserGroup): void {
// Otherwise, we adjust whether the widgets are disabled based on
// whether this user is authorized to add members.
const $input_element = $add_members_container.find(".input").expectOne();
const $button_element = $add_members_container.find('button[name="add_member"]').expectOne();
const $button_element = $add_members_container.find("#add_member").expectOne();
if (settings_data.can_add_members_to_user_group(group.id)) {
$input_element.prop("contenteditable", true);

View File

@ -7,9 +7,13 @@
</div>
{{#if (not hide_add_button)}}
<div class="add_subscriber_button_wrapper inline-block">
<button type="submit" name="add_subscriber" class="button add-subscriber-button add-users-button small rounded sea-green" tabindex="0">
{{t 'Add' }}
</button>
{{> ../components/action_button
label=(t "Add")
custom_classes="add-subscriber-button add-users-button"
attention="quiet"
intent="brand"
type="submit"
}}
</div>
{{/if}}
</div>

View File

@ -37,7 +37,12 @@
<h4 class="stream_setting_subsection_title">{{t "Choose subscribers" }}</h4>
</label>
<span class="add_all_users_to_stream_button_container">
<button class="add_all_users_to_stream small button rounded sea-green">{{t 'Add all users'}}</button>
{{> ../components/action_button
label=(t "Add all users")
custom_classes="add_all_users_to_stream inline-block"
attention="quiet"
intent="brand"
}}
</span>
<div id="stream_subscription_error" class="stream_creation_error"></div>
<div class="controls" id="people_to_add"></div>
@ -47,12 +52,35 @@
</div>
<div class="settings-sticky-footer">
<div class="settings-sticky-footer-left">
<button id="stream_creation_go_to_configure_channel_settings" class="button small sea-green rounded hide">{{t "Back to settings" }}</button>
{{> ../components/action_button
label=(t "Back to settings")
custom_classes="hide"
id="stream_creation_go_to_configure_channel_settings"
attention="quiet"
intent="brand"
}}
</div>
<div class="settings-sticky-footer-right">
<button class="create_stream_cancel button small white rounded">{{t "Cancel" }}</button>
<button class="finalize_create_stream button small sea-green rounded hide" type="submit">{{t "Create" }}</button>
<button id="stream_creation_go_to_subscribers" class="button small sea-green rounded">{{t "Continue to add subscribers" }}</button>
{{> ../components/action_button
label=(t "Cancel")
custom_classes="create_stream_cancel inline-block"
attention="quiet"
intent="neutral"
}}
{{> ../components/action_button
label=(t "Create")
custom_classes="finalize_create_stream hide"
attention="quiet"
intent="brand"
type="submit"
}}
{{> ../components/action_button
label=(t "Continue to add subscribers")
custom_classes="inline-block"
id="stream_creation_go_to_subscribers"
attention="quiet"
intent="brand"
}}
</div>
</div>
</form>

View File

@ -7,9 +7,14 @@
</div>
{{#if (not hide_add_button)}}
<div class="add_member_button_wrapper inline-block">
<button type="submit" name="add_member" class="button add-member-button add-users-button small rounded sea-green" tabindex="0">
{{t 'Add' }}
</button>
{{> ../components/action_button
label=(t "Add")
custom_classes="add-member-button add-users-button"
id="add_member"
attention="quiet"
intent="brand"
type="submit"
}}
</div>
{{/if}}
</div>

View File

@ -4,7 +4,12 @@
<br />
{{t "Do you want to add everyone?"}}
<button class="add_all_users_to_user_group small button rounded sea-green">{{t 'Add all users'}}</button>
{{> ../components/action_button
label=(t "Add all users")
custom_classes="add_all_users_to_user_group inline-block"
attention="quiet"
intent="brand"
}}
<div class="create_member_list_header">
<h4 class="user_group_setting_subsection_title">{{t 'Members preview' }}</h4>

View File

@ -46,12 +46,35 @@
</div>
<div class="settings-sticky-footer">
<div class="settings-sticky-footer-left">
<button id="user_group_go_to_configure_settings" class="button small sea-green rounded hide">{{t "Back to settings" }}</button>
{{> ../components/action_button
label=(t "Back to settings")
custom_classes="hide"
attention="quiet"
intent="brand"
id="user_group_go_to_configure_settings"
}}
</div>
<div class="settings-sticky-footer-right">
<button class="create_user_group_cancel button small white rounded">{{t "Cancel" }}</button>
<button class="finalize_create_user_group button small sea-green rounded hide" type="submit">{{t "Create" }}</button>
<button id="user_group_go_to_members" class="button small sea-green rounded">{{t "Continue to add members" }}</button>
{{> ../components/action_button
label=(t "Cancel")
custom_classes="create_user_group_cancel inline-block"
attention="quiet"
intent="neutral"
}}
{{> ../components/action_button
label=(t "Create")
custom_classes="finalize_create_user_group hide"
attention="quiet"
intent="brand"
type="submit"
}}
{{> ../components/action_button
label=(t "Continue to add members")
id="user_group_go_to_members"
custom_classes="inline-block"
attention="quiet"
intent="brand"
}}
</div>
</div>
</form>