paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-10-24 16:43:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

x-buttons: Replace "Remove" and "Unsubscribe" buttons with x icons in tables.

Browse Source 
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.
This commit is contained in:
Maneesh Shukla
2025-06-27 21:09:48 +05:30
committed by Tim Abbott
parent 0fe4b6b317
commit ec60c8a70c
15 changed files with 65 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
help/manage-user-channel-subscriptions.md
View File

@@ -68,7 +68,7 @@ channel](/help/unsubscribe-from-a-channel).
1. Under **Subscribers**, find the user you would like 1. Under **Subscribers**, find the user you would like
to unsubscribe from the channel. 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} {tab|via-user-profile}
@@ -79,7 +79,7 @@ channel](/help/unsubscribe-from-a-channel).
1. Under **Subscribed channels**, find the channel you would like 1. Under **Subscribed channels**, find the channel you would like
to unsubscribe the user from. 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} {end_tabs}

4
help/manage-user-group-membership.md
View File

@@ -32,7 +32,7 @@
1. Under **Members**, find the user or group you would like to remove. 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. removed from the group.
{tab|via-user-profile} {tab|via-user-profile}
@@ -43,7 +43,7 @@
1. Find the group you would like to remove the user from. 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. groups they've been removed from.
{end_tabs} {end_tabs}

4
help/manage-user-groups.md
View File

@@ -108,7 +108,7 @@
1. Under **Members**, find the user or group you would like to remove. 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. removed from the group.
{tab|via-user-profile} {tab|via-user-profile}
@@ -119,7 +119,7 @@
1. Find the group you would like to remove the user from. 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} {end_tabs}

2
help/set-default-channels-for-new-users.md
View File

@@ -33,7 +33,7 @@ to invite new users can subscribe them to any combination of default channels.
{settings_tab|default-channels-list} {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} {end_tabs}

4
help/unsubscribe-users-from-a-channel.md
View File

@@ -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. 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!} {!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 1. Under **Subscribed channels**, find the channel you would like
to unsubscribe the user from. 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 "" !!! tip ""

21
web/styles/popovers.css
View File

@@ -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-actions-menu-popover,
#stream-card-popover { #stream-card-popover {
.popover-stream-name { .popover-stream-name {
@@ -629,7 +644,6 @@ ul.popover-group-menu-member-list {
&.remove_subscription, &.remove_subscription,
&.remove_member { &.remove_member {
float: right;
padding-right: 10px; 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) { @media (width < $md_min) {
.popover-flex { .popover-flex {
position: absolute; position: absolute;

6
web/styles/subscriptions.css
View File

@@ -191,7 +191,7 @@ h4.user_group_setting_subsection_title {
& tr { & tr {
& td, & td,
th { th {
padding: 4px 0 4px 5px; padding: 4px 10px 4px 5px;
vertical-align: middle; vertical-align: middle;
&:first-of-type { &:first-of-type {
@@ -220,10 +220,6 @@ h4.user_group_setting_subsection_title {
font-style: italic; font-style: italic;
} }
th.user-remove-actions {
min-width: 80px;
}
.strikethrough { .strikethrough {
text-decoration: line-through; text-decoration: line-through;
} }

11
web/templates/settings/admin_default_streams_list.hbs
View File

@@ -1,16 +1,17 @@
{{#with stream}} {{#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> <td>
{{#if invite_only}}<i class="fa fa-lock" aria-hidden="true"></i>{{/if}} {{#if invite_only}}<i class="fa fa-lock" aria-hidden="true"></i>{{/if}}
<span class="default_stream_name">{{name}}</span> <span class="default_stream_name">{{name}}</span>
</td> </td>
{{#if ../can_modify}} {{#if ../can_modify}}
<td class="actions"> <td class="actions">
{{> ../components/action_button {{> ../components/icon_button
attention="quiet" icon="close"
intent="danger" intent="danger"
label=(t "Remove from default") custom_classes="remove-default-stream tippy-zulip-delayed-tooltip hidden-remove-button"
custom_classes="remove-default-stream" aria-label=(t "Remove from default")
data-tippy-content=(t "Remove from default")
}} }}
</td> </td>
{{/if}} {{/if}}

2
web/templates/settings/default_streams_list_admin.hbs
View File

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

8
web/templates/stream_settings/stream_member_list_entry.hbs
View File

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

2
web/templates/stream_settings/stream_members_table.hbs
View File

@@ -9,7 +9,7 @@
<i class="table-sortable-arrow zulip-icon zulip-icon-sort-arrow-down"></i> <i class="table-sortable-arrow zulip-icon zulip-icon-sort-arrow-down"></i>
</th> </th>
{{#if can_remove_subscribers}} {{#if can_remove_subscribers}}
<th>{{t "Actions" }}</th> <th></th>
{{/if}} {{/if}}
</thead> </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> <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>

18
web/templates/user_group_list_item.hbs
View File

@@ -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"> <td class="user-profile-group-row">
{{#if is_guest}} {{#if is_guest}}
{{name}} {{name}}
@@ -8,13 +8,15 @@
</td> </td>
{{#if can_remove_members }} {{#if can_remove_members }}
<td class="remove_member"> <td class="remove_member">
{{#if is_direct_member}} <div class="remove-button-wrapper">
{{> components/action_button label=(t "Remove") custom_classes="remove-member-button" attention="quiet" intent="danger" aria-label=(t "Remove") }} {{#if is_direct_member}}
{{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") }}
<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}}"> {{else}}
{{> components/action_button label=(t "Remove") custom_classes="remove-member-button" attention="quiet" intent="danger" aria-label=(t "Remove") disabled="disabled" }} <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}}">
</span> {{> 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}} </span>
{{/if}}
</div>
</td> </td>
{{/if}} {{/if}}
</tr> </tr>

2
web/templates/user_group_settings/user_group_members_table.hbs
View File

@@ -8,7 +8,7 @@
<th class="settings-email-column" data-sort="email">{{t "Email" }} <th class="settings-email-column" data-sort="email">{{t "Email" }}
<i class="table-sortable-arrow zulip-icon zulip-icon-sort-arrow-down"></i> <i class="table-sortable-arrow zulip-icon zulip-icon-sort-arrow-down"></i>
</th> </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> </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> <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> </table>

4
web/templates/user_group_settings/user_group_subgroup_entry.hbs
View File

@@ -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"> <td class="subgroup-name panel_user_list">
{{> ../user_group_display_only_pill .}} {{> ../user_group_display_only_pill .}}
</td> </td>
<td class="empty-email-col-for-user-group"></td> <td class="empty-email-col-for-user-group"></td>
{{#if can_remove_members}} {{#if can_remove_members}}
<td class="remove"> <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> </td>
{{/if}} {{/if}}
</tr> </tr>

18
web/templates/user_stream_list_item.hbs
View File

@@ -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"> <td class="user-profile-channel-row">
<div class="user-profile-channel-container"> <div class="user-profile-channel-container">
<span class="stream-privacy-original-color-{{stream_id}} stream-privacy filter-icon" style="color: {{stream_color}}"> <span class="stream-privacy-original-color-{{stream_id}} stream-privacy filter-icon" style="color: {{stream_color}}">
@@ -9,13 +9,15 @@
</td> </td>
{{#if show_unsubscribe_button}} {{#if show_unsubscribe_button}}
<td class="remove_subscription"> <td class="remove_subscription">
{{#if show_private_stream_unsub_tooltip}} <div class="remove-button-wrapper">
{{> 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.") }} {{#if show_private_stream_unsub_tooltip}}
{{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 from private channels.") }}
{{> 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 if show_last_user_in_private_stream_unsub_tooltip}}
{{else}} {{> 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.") }}
{{> components/action_button label=(t "Unsubscribe") custom_classes="remove-subscription-button" attention="quiet" intent="danger" aria-label=(t "Unsubscribe") }} {{else}}
{{/if}} {{> 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> </td>
{{/if}} {{/if}}
</tr> </tr>