paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-02 04:53:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

settings: Redesign buttons in channel and group settings.

Browse Source 
Fixes: #34253.
This commit is contained in:
Maneesh Shukla
2025-04-14 14:07:26 +05:30
committed by Tim Abbott
parent 2ae2589494
commit 46cd38d1b0
5 changed files with 133 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
web/src/stream_settings_ui.ts
View File

@@ -1180,4 +1180,9 @@ export function initialize(): void {
$(".right").removeClass("show");
$("#channels_overlay_container .two-pane-settings-header").removeClass("slide-left");
});
$("#channels_overlay_container").on("click", "#preview-stream-button", () => {
const stream_id = Number.parseInt($(".stream_settings_header").attr("data-stream-id")!, 10);
window.location.href = hash_util.by_stream_url(stream_id);
});
}

131
web/src/user_group_edit.ts
View File

@@ -1908,70 +1908,81 @@ export function initialize(): void {
},
);
$("#groups_overlay_container").on("click", ".group_settings_header .button-danger", () => {
const active_group_data = get_active_data();
const group_id = active_group_data.id;
assert(group_id !== undefined);
const user_group = user_groups.get_user_group_from_id(group_id);
$("#groups_overlay_container").on(
"click",
".group_settings_header .deactivate-group-button",
() => {
const active_group_data = get_active_data();
const group_id = active_group_data.id;
assert(group_id !== undefined);
const user_group = user_groups.get_user_group_from_id(group_id);
if (!user_group || !settings_data.can_manage_user_group(group_id)) {
return;
}
function deactivate_user_group(): void {
channel.post({
url: "/json/user_groups/" + group_id + "/deactivate",
data: {},
success() {
dialog_widget.close();
active_group_data.$row?.remove();
},
error(xhr) {
dialog_widget.hide_dialog_spinner();
const parsed = z
.object({
code: z.string(),
msg: z.string(),
objections: z.array(z.record(z.string(), z.unknown())),
result: z.string(),
})
.safeParse(xhr.responseJSON);
if (parsed.success && parsed.data.code === "CANNOT_DEACTIVATE_GROUP_IN_USE") {
$("#deactivation-confirm-modal .dialog_submit_button").prop(
"disabled",
true,
);
const rendered_error_banner = render_cannot_deactivate_group_banner();
$("#dialog_error")
.html(rendered_error_banner)
.addClass("alert-error")
.show();
if (!user_group || !settings_data.can_manage_user_group(group_id)) {
return;
}
function deactivate_user_group(): void {
channel.post({
url: "/json/user_groups/" + group_id + "/deactivate",
data: {},
success() {
dialog_widget.close();
active_group_data.$row?.remove();
},
error(xhr) {
dialog_widget.hide_dialog_spinner();
const parsed = z
.object({
code: z.string(),
msg: z.string(),
objections: z.array(z.record(z.string(), z.unknown())),
result: z.string(),
})
.safeParse(xhr.responseJSON);
if (
parsed.success &&
parsed.data.code === "CANNOT_DEACTIVATE_GROUP_IN_USE"
) {
$("#deactivation-confirm-modal .dialog_submit_button").prop(
"disabled",
true,
);
const rendered_error_banner = render_cannot_deactivate_group_banner();
$("#dialog_error")
.html(rendered_error_banner)
.addClass("alert-error")
.show();
$("#dialog_error .permissions-button").on("click", () => {
select_tab = "permissions";
update_toggler_for_group_setting(user_group);
dialog_widget.close();
});
} else {
ui_report.error($t({defaultMessage: "Failed"}), xhr, $("#dialog_error"));
}
},
$("#dialog_error .permissions-button").on("click", () => {
select_tab = "permissions";
update_toggler_for_group_setting(user_group);
dialog_widget.close();
});
} else {
ui_report.error(
$t({defaultMessage: "Failed"}),
xhr,
$("#dialog_error"),
);
}
},
});
}
const group_name = user_groups.get_display_group_name(user_group.name);
const html_body = render_confirm_delete_user({
group_name,
});
}
const group_name = user_groups.get_display_group_name(user_group.name);
const html_body = render_confirm_delete_user({
group_name,
});
confirm_dialog.launch({
html_heading: $t_html({defaultMessage: "Deactivate {group_name}?"}, {group_name}),
html_body,
on_click: deactivate_user_group,
close_on_submit: false,
loading_spinner: true,
id: "deactivation-confirm-modal",
});
});
confirm_dialog.launch({
html_heading: $t_html({defaultMessage: "Deactivate {group_name}?"}, {group_name}),
html_body,
on_click: deactivate_user_group,
close_on_submit: false,
loading_spinner: true,
id: "deactivation-confirm-modal",
});
},
);
function save_group_info(e: JQuery.ClickEvent): void {
assert(e.currentTarget instanceof HTMLElement);

26
web/styles/subscriptions.css
View File

@@ -1003,7 +1003,7 @@ h4.user_group_setting_subsection_title {
}
.inner-box {
margin: 20px;
margin: 18px;
}
.group_settings_header,
@@ -1034,23 +1034,9 @@ h4.user_group_setting_subsection_title {
.subscribe-button,
.join_leave_button,
#preview-stream-button,
.deactivate {
margin-right: 3px;
text-decoration: none;
padding: 0 10px;
#preview-stream-button {
height: 100%;
display: flex;
align-items: center;
box-sizing: border-box;
}
.deactivate {
height: 100%;
.icon-container {
display: flex;
}
margin-left: 3px;
}
}
}
@@ -1086,8 +1072,6 @@ h4.user_group_setting_subsection_title {
#open_group_info_modal {
display: flex;
align-items: center;
padding: 7px 10px;
font-size: 1.1em;
}
.button-group {
@@ -1221,6 +1205,10 @@ h4.user_group_setting_subsection_title {
display: inline !important;
}
}
.icon-button {
font-size: 1.2em;
}
}
div.settings-radio-input-parent {

53
web/templates/stream_settings/stream_settings.hbs
View File

@@ -11,7 +11,7 @@
{{/tr}}
</span>
</template>
<button class="button small rounded subscribe-button sub_unsub_button {{#if should_display_subscription_button}}toggle-subscription-tooltip{{/if}} {{#unless subscribed }}unsubscribed{{/unless}}" type="button" name="button" data-tooltip-template-id="toggle-subscription-tooltip-template" {{#unless should_display_subscription_button}}disabled="disabled"{{/unless}}>
<button class="action-button action-button-quiet-brand subscribe-button sub_unsub_button {{#if should_display_subscription_button}}toggle-subscription-tooltip{{/if}} {{#unless subscribed }}unsubscribed{{/unless}}" type="button" name="button" data-tooltip-template-id="toggle-subscription-tooltip-template" {{#unless should_display_subscription_button}}disabled="disabled"{{/unless}}>
{{#if subscribed }}
{{t "Unsubscribe" }}
{{else}}
@@ -19,13 +19,22 @@
{{/if}}
</button>
</div>
<a href="{{preview_url}}" class="button small rounded tippy-zulip-delayed-tooltip" id="preview-stream-button" role="button" data-tooltip-template-id="view-stream-tooltip-template" data-tippy-placement="bottom" {{#unless should_display_preview_button }}style="display: none"{{/unless}}><i class="fa fa-eye"></i></a>
{{> ../components/action_button
icon="eye"
attention="quiet"
intent="info"
custom_classes="tippy-zulip-delayed-tooltip"
data-tooltip-template-id="view-stream-tooltip-template"
id="preview-stream-button"
hidden=(not should_display_preview_button)
}}
{{#if can_archive_stream}}
<button class="button small rounded button-danger deactivate tippy-zulip-delayed-tooltip" type="button" data-tippy-content="{{t 'Archive channel'}}">
<span class="icon-container">
<i class="zulip-icon zulip-icon-archive" aria-hidden="true"></i>
</span>
</button>
{{> ../components/icon_button
icon="archive"
intent="danger"
custom_classes="tippy-zulip-delayed-tooltip deactivate"
data-tippy-content=(t 'Archive channel')
}}
{{/if}}
</div>
{{/with}}
@@ -48,9 +57,13 @@
</div>
<div class="stream_change_property_info alert-notification"></div>
<div class="button-group" {{#unless can_change_name_description}}style="display:none"{{/unless}}>
<button id="open_stream_info_modal" class="button rounded small button-warning tippy-zulip-delayed-tooltip" data-tippy-content="{{t 'Edit channel name and description' }}">
<i class="fa fa-pencil" aria-hidden="true"></i>
</button>
{{> ../components/icon_button
icon="edit"
intent="neutral"
custom_classes="tippy-zulip-delayed-tooltip"
id="open_stream_info_modal"
data-tippy-content=(t 'Edit channel name and description' )
}}
</div>
</div>
<div class="stream-description">
@@ -95,9 +108,15 @@
{{> ../help_link_widget link="/help/message-a-channel-by-email" }}
</p>
<span class="generate-channel-email-button-container {{#unless can_access_stream_email}}disabled_setting_tooltip{{/unless}}">
<button class="button small rounded copy_email_button" {{#unless can_access_stream_email}}disabled="disabled"{{/unless}} id="copy_stream_email_button" type="button">
<span class="copy_button">{{t "Generate email address" }}</span>
</button>
{{> ../components/action_button
label=(t "Generate email address")
attention="quiet"
intent="neutral"
type="button"
custom_classes="copy_email_button"
id="copy_stream_email_button"
disabled=(not can_access_stream_email)
}}
</span>
</div>
</div>
@@ -137,7 +156,13 @@
</div>
<p>{{t "In muted channels, channel notification settings apply only to unmuted topics." }}</p>
<div class="input-group">
<button class="button small rounded reset-stream-notifications-button" type="button">{{t "Reset to default notifications" }}</button>
{{> ../components/action_button
label=(t "Reset to default notifications")
attention="quiet"
intent="neutral"
custom_classes="reset-stream-notifications-button"
type="button"
}}
</div>
{{#each notification_settings}}
<div class="input-group">

22
web/templates/user_group_settings/user_group_settings.hbs
View File

@@ -2,16 +2,17 @@
<div class="tab-container"></div>
<div class="button-group">
<div class="join_leave_button_wrapper inline-block">
<button class="button small rounded join_leave_button" type="button" name="button">
{{#if is_direct_member}}
{{t "Leave group" }}
{{else}}
{{t "Join group" }}
{{/if}}
</button>
{{#if is_direct_member}}
{{> ../components/action_button label=(t "Leave group") custom_classes="join_leave_button" type="button"
attention="quiet" intent="brand" }}
{{else}}
{{> ../components/action_button label=(t "Join group") custom_classes="join_leave_button" type="button"
attention="quiet" intent="brand" }}
{{/if}}
</div>
{{#unless group.deactivated}}
<button class="button small rounded button-danger deactivate deactivate-group-button tippy-zulip-delayed-tooltip" data-tippy-content="{{t 'Deactivate group'}}" type="button"> <i class="zulip-icon zulip-icon-user-group-x" aria-hidden="true"></i></button>
{{> ../components/icon_button icon="user-group-x" intent="danger" custom_classes="deactivate-group-button deactivate tippy-zulip-delayed-tooltip"
data-tippy-content=(t 'Deactivate group') }}
{{/unless}}
</div>
</div>
@@ -26,9 +27,8 @@
</div>
<div class="group_change_property_info alert-notification"></div>
<div class="button-group">
<button id="open_group_info_modal" class="button rounded small button-warning tippy-zulip-delayed-tooltip" data-tippy-content="{{t 'Change group info' }}">
<i class="zulip-icon zulip-icon-user-group-edit" aria-hidden="true"></i>
</button>
{{> ../components/icon_button icon="user-group-edit" intent="neutral" custom_classes="tippy-zulip-delayed-tooltip"
data-tippy-content=(t 'Change group info') id="open_group_info_modal" }}
</div>
</div>
<div class="group-description-wrapper">