trash-icon: Replace remaining fa-trash icons with zulip-icon-trash and update buttons.

Fixes: #34378.
This commit is contained in:
Maneesh Shukla
2025-04-14 19:14:51 +05:30
committed by Tim Abbott
parent d1023660da
commit c41a96a954
18 changed files with 68 additions and 30 deletions

View File

@@ -26,8 +26,8 @@
To reorder the list of todos, click and drag the **vertical dots**
(<i class="zulip-icon zulip-icon-grip-vertical"></i>) to the left of
each option. To delete an option, click the **trash**
(<i class="fa fa-trash-o"></i>) icon to the right of it.
each option. To delete an option, click the **delete**
(<i class="zulip-icon zulip-icon-trash"></i>) icon to the right of it.
{tab|via-markdown}

View File

@@ -26,8 +26,8 @@
To reorder the list of options, click and drag the **vertical dots**
(<i class="zulip-icon zulip-icon-grip-vertical"></i>) to the left of each
option. To delete an option, click the **trash**
(<i class="fa fa-trash-o"></i>) icon to the right of it.
option. To delete an option, click the **delete**
(<i class="zulip-icon zulip-icon-trash"></i>) icon to the right of it.
{tab|via-markdown}

View File

@@ -89,7 +89,7 @@ message you're composing.
open the saved snippets menu.
1. Hover over the saved snippet you'd like to delete, and click the **Delete
snippet** (<i class="fa fa-trash-o"></i>) icon on the right.
snippet** (<i class="zulip-icon zulip-icon-trash"></i>) icon on the right.
!!! keyboard_tip ""

View File

@@ -86,7 +86,7 @@ can schedule a message for next morning to avoid disturbing others.
{!go-to-scheduled-messages.md!}
1. Click the **trash** (<i class="fa fa-trash-o"></i>) icon on the message you
1. Click the **delete** (<i class="zulip-icon zulip-icon-trash"></i>) icon on the message you
want to delete.
!!! keyboard_tip ""

View File

@@ -97,7 +97,7 @@ counter next to the **Drafts** button in the compose box shows how many there ar
{!go-to-draft-messages.md!}
1. Click the **trash** (<i class="fa fa-trash-o"></i>) icon on the draft you
1. Click the **delete** (<i class="zulip-icon zulip-icon-trash"></i>) icon on the draft you
want to delete.
!!! keyboard_tip ""
@@ -111,7 +111,7 @@ counter next to the **Drafts** button in the compose box shows how many there ar
1. Click the **Drafts** button on the right side of the compose box.
1. Click the **trash** (<i class="fa fa-trash-o"></i>) icon on the draft you
1. Click the **delete** (<i class="zulip-icon zulip-icon-trash"></i>) icon on the draft you
want to delete.
!!! keyboard_tip ""
@@ -133,7 +133,7 @@ counter next to the **Drafts** button in the compose box shows how many there ar
the drafts view, or select the drafts you want to delete
by toggling the checkboxes on the right.
1. Click the **trash** (<i class="fa fa-trash-o"></i>) icon in the
1. Click the **delete** (<i class="zulip-icon zulip-icon-trash"></i>) icon in the
upper right corner of the drafts view to delete all selected drafts.
!!! keyboard_tip ""
@@ -150,7 +150,7 @@ counter next to the **Drafts** button in the compose box shows how many there ar
the drafts view, or select the drafts you want to delete
by toggling the checkboxes on the right.
1. Click the **trash** (<i class="fa fa-trash-o"></i>) icon in the
1. Click the **delete** (<i class="zulip-icon zulip-icon-trash"></i>) icon in the
upper right corner of the drafts view to delete all selected drafts.
!!! keyboard_tip ""

View File

@@ -300,7 +300,7 @@ function add_choice_row(this: HTMLElement, e: JQuery.TriggeredEvent): void {
}
// Display delete buttons for all existing choices before creating the new row,
// which will not have the delete button so that there is at least one option present.
$curr_choice_row.find("button.delete-choice").show();
$curr_choice_row.find("button.delete-choice").removeClass("hide");
$curr_choice_row.find("span.move-handle").removeClass("invisible");
assert(e.delegateTarget instanceof HTMLElement);
const choices_div = e.delegateTarget;

View File

@@ -769,6 +769,22 @@ export function initialize(): void {
},
});
tippy.delegate("body", {
target: ".delete-option",
delay: LONG_HOVER_DELAY,
appendTo: () => document.body,
placement: "top",
onShow(instance) {
/* Ensure the tooltip remains visible even when data-reference-hidden is set. */
$(instance.popper).find(".tippy-box").addClass("show-when-reference-hidden");
instance.setContent($t({defaultMessage: "Delete"}));
},
onHidden(instance) {
instance.destroy();
},
});
tippy.delegate("body", {
target: [
"#personal-menu-dropdown .info-density-button-container",

View File

@@ -1058,6 +1058,8 @@ input.settings_text_input {
cursor: pointer;
color: hsl(357deg 52% 57%);
opacity: 0.7;
padding: 0;
font-size: 1.2em;
&:hover {
opacity: 1;
@@ -1074,6 +1076,10 @@ input.settings_text_input {
}
}
.delete-selected-drafts-button-container {
display: flex;
}
.dropdown-widget-button {
background-color: var(--color-background-dropdown-widget-button);
padding: 4px 6px;

View File

@@ -69,7 +69,7 @@
}
.draft-selection-checkbox {
margin-top: 5px;
margin-top: 0.25em;
/* Required to make sure that the checkbox icon stays inside
the grid. Any value greater than 13px (original width of
the checkbox icon) will work. */

View File

@@ -462,6 +462,25 @@
}
}
.edit_profile_field_choices_container,
#profile_field_choices {
.modal_text_input {
margin-bottom: 0;
}
.choice-row {
display: flex;
align-items: center;
}
}
.choice-row,
.option-row {
.icon-button {
font-size: 1.1em;
}
}
#create_bot_short_name {
/* A shorter dropdown width (~200px at 14px em)
to ensure the email all fits on one line. */

View File

@@ -722,6 +722,14 @@ input[type="checkbox"] {
text-align: right;
}
.delete-choice {
display: inline-flex;
&.hide {
display: none;
}
}
#add-default-stream-modal {
.dropdown-widget-button {
display: inline-flex;

View File

@@ -51,7 +51,7 @@
<i class="zulip-icon zulip-icon-copy" aria-hidden="true"></i>
</span>
<i class="fa fa-pencil fa-lg restore-overlay-message tippy-zulip-delayed-tooltip" aria-hidden="true" data-tooltip-template-id="restore-draft-tooltip-template"></i>
<i class="fa fa-trash-o fa-lg delete-overlay-message tippy-zulip-delayed-tooltip" aria-hidden="true" data-tooltip-template-id="delete-draft-tooltip-template"></i>
{{> ./components/icon_button intent="danger" custom_classes="delete-overlay-message tippy-zulip-delayed-tooltip" icon="trash" data-tooltip-template-id="delete-draft-tooltip-template" aria-label=(t "Delete") }}
<div class="draft-selection-tooltip">
<i class="fa fa-square-o fa-lg draft-selection-checkbox" aria-hidden="true"></i>
</div>

View File

@@ -13,9 +13,7 @@
</div>
<div class="delete-drafts-group">
<div class="delete-selected-drafts-button-container">
<button class="button small rounded delete-selected-drafts-button" type="button" disabled>
<i class="fa fa-trash-o fa-lg" aria-hidden="true"></i>
</button>
{{> ./components/icon_button intent="danger" custom_classes="delete-selected-drafts-button" icon="trash" disabled=true }}
</div>
<button class="button small rounded select-drafts-button" role="checkbox" aria-checked="false">
<span>{{t "Select all drafts" }}</span>

View File

@@ -1,7 +1,5 @@
<li class="option-row">
<i class="zulip-icon zulip-icon-grip-vertical drag-icon"></i>
<input type="text" class="poll-option-input modal_text_input" placeholder="{{t 'New option' }}" />
<button type="button" class="button rounded small delete-option" title="{{t 'Delete' }}">
<i class="fa fa-trash-o" aria-hidden="true"></i>
</button>
{{> ./components/icon_button intent="danger" custom_classes="delete-option" icon="trash" }}
</li>

View File

@@ -37,7 +37,7 @@
<div class="message_top_line">
<div class="overlay_message_controls">
<i class="fa fa-pencil fa-lg restore-overlay-message tippy-zulip-tooltip" aria-hidden="true" data-tooltip-template-id="restore-scheduled-message-tooltip-template"></i>
<i class="fa fa-trash-o fa-lg delete-overlay-message tippy-zulip-tooltip" aria-hidden="true" data-tooltip-template-id="delete-scheduled-message-tooltip-template"></i>
{{> ./components/icon_button intent="danger" custom_classes="delete-overlay-message tippy-zulip-tooltip" icon="trash" data-tooltip-template-id="delete-scheduled-message-tooltip-template" aria-label=(t "Delete") }}
</div>
</div>
<div class="message_content rendered_markdown restore-overlay-message" data-tooltip-template-id="restore-scheduled-message-tooltip-template">{{rendered_markdown rendered_content}}</div>

View File

@@ -1,6 +1,4 @@
<div class="choice-row" data-value="{{value}}">
{{> ../dropdown_widget widget_name=stream_dropdown_widget_name default_text=(t 'Select channel')}}
<button type="button" class="button rounded small delete-choice tippy-zulip-delayed-tooltip" data-tippy-content="{{t 'Delete' }}">
<i class="fa fa-trash-o" aria-hidden="true"></i>
</button>
{{> ../components/icon_button intent="danger" custom_classes="delete-choice tippy-zulip-delayed-tooltip" icon="trash" data-tippy-content=(t "Delete") aria-label=(t "Delete") }}
</div>

View File

@@ -4,8 +4,5 @@
<i class="fa fa-ellipsis-v" aria-hidden="true"></i>
</span>
<input type='text' class="modal_text_input" placeholder='{{t "New option" }}' value="{{ text }}" />
<button type='button' class="button rounded small delete-choice tippy-zulip-tooltip {{#if new_empty_choice_row}} hide {{/if}}" data-tippy-content="{{t 'Delete' }}">
<i class="fa fa-trash-o" aria-hidden="true"></i>
</button>
{{> ../components/icon_button intent="danger" custom_classes="delete-choice tippy-zulip-tooltip" hidden=new_empty_choice_row icon="trash" data-tippy-content=(t "Delete") aria-label=(t "Delete") }}
</div>

View File

@@ -4,7 +4,5 @@
<div class="todo-description-container">
<input type="text" class="todo-description-input modal_text_input" disabled="true" placeholder="{{t 'Task description (optional)'}}" />
</div>
<button type="button" class="button rounded small btn-secondary delete-option" title="{{t 'Delete' }}">
<i class="fa fa-trash-o" aria-hidden="true"></i>
</button>
{{> ./components/icon_button intent="danger" custom_classes="delete-option" icon="trash" aria-label=(t "Delete") }}
</li>