From ec60c8a70c38501cf099a7f28092bbb458e17dc2 Mon Sep 17 00:00:00 2001 From: Maneesh Shukla Date: Fri, 27 Jun 2025 21:09:48 +0530 Subject: [PATCH] x-buttons: Replace "Remove" and "Unsubscribe" buttons with x icons in tables. This commit removes the "Remove" and "Unsubscribe" action buttons from various tables and replaces them with icon buttons using the "close" icon. Additionally, previously the rows with and without a remove button had different heights. This commit updates the fixed `px` values to `em` units to ensure equal height for all rows, regardless of whether a remove-subscription button is present. Fixes: #34874. --- help/manage-user-channel-subscriptions.md | 4 ++-- help/manage-user-group-membership.md | 4 ++-- help/manage-user-groups.md | 4 ++-- help/set-default-channels-for-new-users.md | 2 +- help/unsubscribe-users-from-a-channel.md | 4 ++-- web/styles/popovers.css | 21 ++++++++++++++++++- web/styles/subscriptions.css | 6 +----- .../settings/admin_default_streams_list.hbs | 11 +++++----- .../settings/default_streams_list_admin.hbs | 2 +- .../stream_member_list_entry.hbs | 8 +++---- .../stream_settings/stream_members_table.hbs | 2 +- web/templates/user_group_list_item.hbs | 18 +++++++++------- .../user_group_members_table.hbs | 2 +- .../user_group_subgroup_entry.hbs | 4 ++-- web/templates/user_stream_list_item.hbs | 18 +++++++++------- 15 files changed, 65 insertions(+), 45 deletions(-) diff --git a/help/manage-user-channel-subscriptions.md b/help/manage-user-channel-subscriptions.md index 3d6d700954..6b31ab6165 100644 --- a/help/manage-user-channel-subscriptions.md +++ b/help/manage-user-channel-subscriptions.md @@ -68,7 +68,7 @@ channel](/help/unsubscribe-from-a-channel). 1. Under **Subscribers**, find the user you would like to unsubscribe from the channel. -1. In the **Actions** column, click the **Unsubscribe** button in that row. +1. Click the **Unsubscribe** () icon in that row. {tab|via-user-profile} @@ -79,7 +79,7 @@ channel](/help/unsubscribe-from-a-channel). 1. Under **Subscribed channels**, find the channel you would like to unsubscribe the user from. -1. Click the **Unsubscribe** button in that row. +1. Click the **Unsubscribe** () icon in that row. {end_tabs} diff --git a/help/manage-user-group-membership.md b/help/manage-user-group-membership.md index 52def04dae..cff4f77e3d 100644 --- a/help/manage-user-group-membership.md +++ b/help/manage-user-group-membership.md @@ -32,7 +32,7 @@ 1. Under **Members**, find the user or group you would like to remove. -1. Click the **Remove** button in that row. Zulip will notify everyone who is +1. Click the **Remove** () icon in that row. Zulip will notify everyone who is removed from the group. {tab|via-user-profile} @@ -43,7 +43,7 @@ 1. Find the group you would like to remove the user from. -1. Click the **Remove** button in that row. Zulip will notify the user about the +1. Click the **Remove** () icon in that row. Zulip will notify the user about the groups they've been removed from. {end_tabs} diff --git a/help/manage-user-groups.md b/help/manage-user-groups.md index 193bed3bd6..2440619581 100644 --- a/help/manage-user-groups.md +++ b/help/manage-user-groups.md @@ -108,7 +108,7 @@ 1. Under **Members**, find the user or group you would like to remove. -1. Click the **Remove** button in that row. Zulip will notify everyone who is +1. Click the **Remove** () icon in that row. Zulip will notify everyone who is removed from the group. {tab|via-user-profile} @@ -119,7 +119,7 @@ 1. Find the group you would like to remove the user from. -1. Click the **Remove** button in that row. +1. Click the **Remove** () icon in that row. {end_tabs} diff --git a/help/set-default-channels-for-new-users.md b/help/set-default-channels-for-new-users.md index 9714bf5e96..13abf8aeb9 100644 --- a/help/set-default-channels-for-new-users.md +++ b/help/set-default-channels-for-new-users.md @@ -33,7 +33,7 @@ to invite new users can subscribe them to any combination of default channels. {settings_tab|default-channels-list} -1. Find the channel you would like to remove, and click **Remove from default**. +1. Find the channel you would like to remove, and click **Remove from default** () icon. {end_tabs} diff --git a/help/unsubscribe-users-from-a-channel.md b/help/unsubscribe-users-from-a-channel.md index bc10e76724..7476117970 100644 --- a/help/unsubscribe-users-from-a-channel.md +++ b/help/unsubscribe-users-from-a-channel.md @@ -22,7 +22,7 @@ You will only see the options below if you have the required permissions. 1. Under **Subscribers**, find the user you would like to unsubscribe. -1. Click the **Unsubscribe** button in that row. +1. Click the **Unsubscribe** () icon in that row. {!channel-menu-subscribers-tab-tip.md!} @@ -35,7 +35,7 @@ You will only see the options below if you have the required permissions. 1. Under **Subscribed channels**, find the channel you would like to unsubscribe the user from. -1. Click the **Unsubscribe** button in that row. +1. Click the **Unsubscribe** () icon in that row. !!! tip "" diff --git a/web/styles/popovers.css b/web/styles/popovers.css index 0c7fc27f88..07567322c9 100644 --- a/web/styles/popovers.css +++ b/web/styles/popovers.css @@ -221,6 +221,21 @@ } } +.hidden-remove-button { + opacity: 0; + visibility: hidden; + transition: + opacity 0.3s ease, + visibility 0.3s ease; + pointer-events: none; +} + +.hidden-remove-button-row:hover .hidden-remove-button { + opacity: 1; + visibility: visible; + pointer-events: auto; +} + #stream-actions-menu-popover, #stream-card-popover { .popover-stream-name { @@ -629,7 +644,6 @@ ul.popover-group-menu-member-list { &.remove_subscription, &.remove_member { - float: right; padding-right: 10px; } @@ -678,6 +692,11 @@ ul.popover-group-menu-member-list { } } +.remove-button-wrapper { + display: flex; + justify-content: flex-end; +} + @media (width < $md_min) { .popover-flex { position: absolute; diff --git a/web/styles/subscriptions.css b/web/styles/subscriptions.css index f940484371..5e8381d1a6 100644 --- a/web/styles/subscriptions.css +++ b/web/styles/subscriptions.css @@ -191,7 +191,7 @@ h4.user_group_setting_subsection_title { & tr { & td, th { - padding: 4px 0 4px 5px; + padding: 4px 10px 4px 5px; vertical-align: middle; &:first-of-type { @@ -220,10 +220,6 @@ h4.user_group_setting_subsection_title { font-style: italic; } - th.user-remove-actions { - min-width: 80px; - } - .strikethrough { text-decoration: line-through; } diff --git a/web/templates/settings/admin_default_streams_list.hbs b/web/templates/settings/admin_default_streams_list.hbs index 3cef65a3b4..b1af0c2c77 100644 --- a/web/templates/settings/admin_default_streams_list.hbs +++ b/web/templates/settings/admin_default_streams_list.hbs @@ -1,16 +1,17 @@ {{#with stream}} - + {{#if invite_only}}{{/if}} {{name}} {{#if ../can_modify}} - {{> ../components/action_button - attention="quiet" + {{> ../components/icon_button + icon="close" intent="danger" - label=(t "Remove from default") - custom_classes="remove-default-stream" + custom_classes="remove-default-stream tippy-zulip-delayed-tooltip hidden-remove-button" + aria-label=(t "Remove from default") + data-tippy-content=(t "Remove from default") }} {{/if}} diff --git a/web/templates/settings/default_streams_list_admin.hbs b/web/templates/settings/default_streams_list_admin.hbs index fe0cc03dfe..9271a08bd3 100644 --- a/web/templates/settings/default_streams_list_admin.hbs +++ b/web/templates/settings/default_streams_list_admin.hbs @@ -24,7 +24,7 @@ {{#if is_admin}} - {{t "Actions" }} + {{/if}} + {{> ../user_display_only_pill . display_value=name is_active=true}} @@ -8,11 +8,11 @@ {{t "(hidden)"}} {{/if}} {{#if can_remove_subscribers}} - + {{#if for_user_group_members}} - {{> ../components/action_button label=(t "Remove") custom_classes="remove-subscriber-button" attention="quiet" intent="danger" aria-label=(t "Remove") }} + {{> ../components/icon_button icon="close" custom_classes="hidden-remove-button remove-subscriber-button tippy-zulip-delayed-tooltip" intent="danger" aria-label=(t "Remove") data-tippy-content=(t "Remove") }} {{else}} - {{> ../components/action_button label=(t "Unsubscribe") custom_classes="remove-subscriber-button" attention="quiet" intent="danger" aria-label=(t "Unsubscribe") }} + {{> ../components/icon_button icon="close" custom_classes="hidden-remove-button remove-subscriber-button tippy-zulip-delayed-tooltip" intent="danger" aria-label=(t "Unsubscribe") data-tippy-content=(t "Unsubscribe") }} {{/if}} {{/if}} diff --git a/web/templates/stream_settings/stream_members_table.hbs b/web/templates/stream_settings/stream_members_table.hbs index 8ae6e42a00..a8fb7a5ac5 100644 --- a/web/templates/stream_settings/stream_members_table.hbs +++ b/web/templates/stream_settings/stream_members_table.hbs @@ -9,7 +9,7 @@ {{#if can_remove_subscribers}} - {{t "Actions" }} + {{/if}} diff --git a/web/templates/user_group_list_item.hbs b/web/templates/user_group_list_item.hbs index 891c5db31d..4f9996dd8c 100644 --- a/web/templates/user_group_list_item.hbs +++ b/web/templates/user_group_list_item.hbs @@ -1,4 +1,4 @@ - + {{#if is_guest}} {{name}} @@ -8,13 +8,15 @@ {{#if can_remove_members }} - {{#if is_direct_member}} - {{> components/action_button label=(t "Remove") custom_classes="remove-member-button" attention="quiet" intent="danger" aria-label=(t "Remove") }} - {{else}} - - {{> components/action_button label=(t "Remove") custom_classes="remove-member-button" attention="quiet" intent="danger" aria-label=(t "Remove") disabled="disabled" }} - - {{/if}} +
+ {{#if is_direct_member}} + {{> components/icon_button icon="close" custom_classes="hidden-remove-button remove-member-button tippy-zulip-delayed-tooltip" intent="danger" aria-label=(t "Remove") data-tippy-content=(t "Remove") }} + {{else}} + + {{> components/icon_button icon="close" custom_classes="hidden-remove-button remove-member-button tippy-zulip-delayed-tooltip" intent="danger" aria-label=(t "Remove") data-tippy-content=(t "Remove") disabled="disabled" }} + + {{/if}} +
{{/if}} diff --git a/web/templates/user_group_settings/user_group_members_table.hbs b/web/templates/user_group_settings/user_group_members_table.hbs index bcccbca0eb..73f17eb666 100644 --- a/web/templates/user_group_settings/user_group_members_table.hbs +++ b/web/templates/user_group_settings/user_group_members_table.hbs @@ -8,7 +8,7 @@ {{t "Email" }} - {{t "Actions" }} + diff --git a/web/templates/user_group_settings/user_group_subgroup_entry.hbs b/web/templates/user_group_settings/user_group_subgroup_entry.hbs index 4af18ecfb2..b00d1ff7cf 100644 --- a/web/templates/user_group_settings/user_group_subgroup_entry.hbs +++ b/web/templates/user_group_settings/user_group_subgroup_entry.hbs @@ -1,11 +1,11 @@ - + {{> ../user_group_display_only_pill .}} {{#if can_remove_members}} - {{> ../components/action_button custom_classes="remove-subgroup-button" label=(t "Remove") attention="quiet" intent="danger" aria-label=(t "Remove") }} + {{> ../components/icon_button icon="close" custom_classes="hidden-remove-button remove-subgroup-button tippy-zulip-delayed-tooltip" intent="danger" aria-label=(t "Remove") data-tippy-content=(t "Remove") }} {{/if}} diff --git a/web/templates/user_stream_list_item.hbs b/web/templates/user_stream_list_item.hbs index 0348f6cb9c..db02798f62 100644 --- a/web/templates/user_stream_list_item.hbs +++ b/web/templates/user_stream_list_item.hbs @@ -1,4 +1,4 @@ - +
@@ -9,13 +9,15 @@ {{#if show_unsubscribe_button}} - {{#if show_private_stream_unsub_tooltip}} - {{> components/action_button label=(t "Unsubscribe") custom_classes="remove-subscription-button tippy-zulip-tooltip" attention="quiet" intent="danger" aria-label=(t "Unsubscribe") data-tippy-content=(t "Use channel settings to unsubscribe from private channels.") }} - {{else if show_last_user_in_private_stream_unsub_tooltip}} - {{> components/action_button label=(t "Unsubscribe") custom_classes="remove-subscription-button tippy-zulip-tooltip" attention="quiet" intent="danger" aria-label=(t "Unsubscribe") data-tippy-content=(t "Use channel settings to unsubscribe the last user from a private channel.") }} - {{else}} - {{> components/action_button label=(t "Unsubscribe") custom_classes="remove-subscription-button" attention="quiet" intent="danger" aria-label=(t "Unsubscribe") }} - {{/if}} +
+ {{#if show_private_stream_unsub_tooltip}} + {{> components/icon_button icon="close" custom_classes="hidden-remove-button remove-subscription-button tippy-zulip-tooltip" intent="danger" aria-label=(t "Unsubscribe") data-tippy-content=(t "Use channel settings to unsubscribe from private channels.") }} + {{else if show_last_user_in_private_stream_unsub_tooltip}} + {{> components/icon_button icon="close" custom_classes="hidden-remove-button remove-subscription-button tippy-zulip-tooltip" intent="danger" aria-label=(t "Unsubscribe") data-tippy-content=(t "Use channel settings to unsubscribe the last user from a private channel.") }} + {{else}} + {{> components/icon_button icon="close" custom_classes="hidden-remove-button remove-subscription-button tippy-zulip-delayed-tooltip" intent="danger" aria-label=(t "Unsubscribe") data-tippy-content=(t "Unsubscribe") }} + {{/if}} +
{{/if}}