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

@@ -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** (<i class="zulip-icon zulip-icon-close"></i>) 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** (<i class="zulip-icon zulip-icon-close"></i>) icon in that row.
 
 {end_tabs}
 

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** (<i class="zulip-icon zulip-icon-close"></i>) 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** (<i class="zulip-icon zulip-icon-close"></i>) icon in that row. Zulip will notify the user about the
    groups they've been removed from.
 
 {end_tabs}

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** (<i class="zulip-icon zulip-icon-close"></i>) 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** (<i class="zulip-icon zulip-icon-close"></i>) icon in that row.
 
 {end_tabs}
 

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** (<i class="zulip-icon zulip-icon-close"></i>) icon.
 
 {end_tabs}
 

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** (<i class="zulip-icon zulip-icon-close"></i>) 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** (<i class="zulip-icon zulip-icon-close"></i>) icon in that row.
 
 !!! tip ""
 

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;

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;
             }

web/templates/settings/admin_default_streams_list.hbs

@@ -1,16 +1,17 @@
 {{#with stream}}
-<tr class="default_stream_row" data-stream-id="{{stream_id}}">
+<tr class="default_stream_row hidden-remove-button-row" data-stream-id="{{stream_id}}">
     <td>
         {{#if invite_only}}<i class="fa fa-lock" aria-hidden="true"></i>{{/if}}
         <span class="default_stream_name">{{name}}</span>
     </td>
     {{#if ../can_modify}}
     <td class="actions">
-        {{> ../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")
           }}
     </td>
     {{/if}}

web/templates/settings/default_streams_list_admin.hbs

@@ -24,7 +24,7 @@
                     <i class="table-sortable-arrow zulip-icon zulip-icon-sort-arrow-down"></i>
                 </th>
                 {{#if is_admin}}
-                <th class="actions">{{t "Actions" }}</th>
+                <th class="actions"></th>
                 {{/if}}
             </thead>
             <tbody data-empty="{{t 'There are no default channels.' }}" data-search-results-empty="{{t 'No default channels match your current filter.' }}"

web/templates/stream_settings/stream_member_list_entry.hbs

@@ -1,4 +1,4 @@
-<tr data-subscriber-id="{{user_id}}">
+<tr data-subscriber-id="{{user_id}}" class="hidden-remove-button-row">
     <td class="subscriber-name panel_user_list">
         {{> ../user_display_only_pill . display_value=name is_active=true}}
     </td>
@@ -8,11 +8,11 @@
     <td class="hidden-subscriber-email">{{t "(hidden)"}}</td>
     {{/if}}
     {{#if can_remove_subscribers}}
-    <td class="unsubscribe">
+    <td class="unsubscribe remove-button-wrapper">
         {{#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}}
     </td>
     {{/if}}

web/templates/stream_settings/stream_members_table.hbs

@@ -9,7 +9,7 @@
                 <i class="table-sortable-arrow zulip-icon zulip-icon-sort-arrow-down"></i>
             </th>
             {{#if can_remove_subscribers}}
-            <th>{{t "Actions" }}</th>
+            <th></th>
             {{/if}}
         </thead>
         <tbody class="subscriber_table" data-empty="{{t 'This channel has no subscribers.' }}" data-search-results-empty="{{t 'No channel subscribers match your current filter.'}}"></tbody>

web/templates/user_group_list_item.hbs

@@ -1,4 +1,4 @@
-<tr data-group-id="{{group_id}}">
+<tr data-group-id="{{group_id}}" class="hidden-remove-button-row">
     <td class="user-profile-group-row">
         {{#if is_guest}}
             {{name}}
@@ -8,13 +8,15 @@
     </td>
     {{#if can_remove_members }}
     <td class="remove_member">
-        {{#if is_direct_member}}
-            {{> components/action_button label=(t "Remove") custom_classes="remove-member-button" attention="quiet" intent="danger" aria-label=(t "Remove") }}
-        {{else}}
-            <span class="tippy-zulip-tooltip" data-tippy-content="{{#if is_me}}{{t 'You are a member of {name} because you are a member of a subgroup ({subgroups_name}).'}} {{else}}{{t 'This user is a member of {name} because they are a member of a subgroup ({subgroups_name}).'}}{{/if}}">
-                {{> components/action_button label=(t "Remove") custom_classes="remove-member-button" attention="quiet" intent="danger" aria-label=(t "Remove") disabled="disabled" }}
-            </span>
-        {{/if}}
+        <div class="remove-button-wrapper">
+            {{#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}}
+                <span class="tippy-zulip-tooltip" data-tippy-content="{{#if is_me}}{{t 'You are a member of {name} because you are a member of a subgroup ({subgroups_name}).'}} {{else}}{{t 'This user is a member of {name} because they are a member of a subgroup ({subgroups_name}).'}}{{/if}}">
+                    {{> 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" }}
+                </span>
+            {{/if}}
+        </div>
     </td>
     {{/if}}
 </tr>

web/templates/user_group_settings/user_group_members_table.hbs

@@ -8,7 +8,7 @@
             <th class="settings-email-column" data-sort="email">{{t "Email" }}
                 <i class="table-sortable-arrow zulip-icon zulip-icon-sort-arrow-down"></i>
             </th>
-            <th class="user-remove-actions" {{#unless can_remove_members}}style="display:none"{{/unless}}>{{t "Actions" }}</th>
+            <th {{#unless can_remove_members}}style="display:none"{{/unless}}></th>
         </thead>
         <tbody class="member_table" data-empty="{{t 'This group has no members.' }}" data-search-results-empty="{{t 'No group members match your current filter.'}}"></tbody>
     </table>

web/templates/user_group_settings/user_group_subgroup_entry.hbs

@@ -1,11 +1,11 @@
-<tr data-subgroup-id="{{group_id}}">
+<tr data-subgroup-id="{{group_id}}" class="hidden-remove-button-row">
     <td class="subgroup-name panel_user_list">
         {{> ../user_group_display_only_pill .}}
     </td>
     <td class="empty-email-col-for-user-group"></td>
     {{#if can_remove_members}}
     <td class="remove">
-        {{> ../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") }}
     </td>
     {{/if}}
 </tr>

web/templates/user_stream_list_item.hbs

@@ -1,4 +1,4 @@
-<tr data-stream-id="{{stream_id}}">
+<tr data-stream-id="{{stream_id}}" class="hidden-remove-button-row">
     <td class="user-profile-channel-row">
         <div class="user-profile-channel-container">
             <span class="stream-privacy-original-color-{{stream_id}} stream-privacy filter-icon" style="color: {{stream_color}}">
@@ -9,13 +9,15 @@
     </td>
     {{#if show_unsubscribe_button}}
     <td class="remove_subscription">
-        {{#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}}
+        <div class="remove-button-wrapper">
+            {{#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}}
+        </div>
     </td>
     {{/if}}
 </tr>