diff --git a/help/collaborative-to-do-lists.md b/help/collaborative-to-do-lists.md index 655e77a720..b65793a347 100644 --- a/help/collaborative-to-do-lists.md +++ b/help/collaborative-to-do-lists.md @@ -26,8 +26,8 @@ To reorder the list of todos, click and drag the **vertical dots** () to the left of - each option. To delete an option, click the **trash** - () icon to the right of it. + each option. To delete an option, click the **delete** + () icon to the right of it. {tab|via-markdown} diff --git a/help/create-a-poll.md b/help/create-a-poll.md index 78d4c495ca..6463caa839 100644 --- a/help/create-a-poll.md +++ b/help/create-a-poll.md @@ -26,8 +26,8 @@ To reorder the list of options, click and drag the **vertical dots** () to the left of each - option. To delete an option, click the **trash** - () icon to the right of it. + option. To delete an option, click the **delete** + () icon to the right of it. {tab|via-markdown} diff --git a/help/saved-snippets.md b/help/saved-snippets.md index 804012b2f6..557185c319 100644 --- a/help/saved-snippets.md +++ b/help/saved-snippets.md @@ -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** () icon on the right. + snippet** () icon on the right. !!! keyboard_tip "" diff --git a/help/schedule-a-message.md b/help/schedule-a-message.md index 55e903bb0b..c6c3ca3511 100644 --- a/help/schedule-a-message.md +++ b/help/schedule-a-message.md @@ -86,7 +86,7 @@ can schedule a message for next morning to avoid disturbing others. {!go-to-scheduled-messages.md!} -1. Click the **trash** () icon on the message you +1. Click the **delete** () icon on the message you want to delete. !!! keyboard_tip "" diff --git a/help/view-and-edit-your-message-drafts.md b/help/view-and-edit-your-message-drafts.md index 8a453d54f4..dace8b6916 100644 --- a/help/view-and-edit-your-message-drafts.md +++ b/help/view-and-edit-your-message-drafts.md @@ -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** () icon on the draft you +1. Click the **delete** () 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** () icon on the draft you +1. Click the **delete** () 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** () icon in the +1. Click the **delete** () 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** () icon in the +1. Click the **delete** () icon in the upper right corner of the drafts view to delete all selected drafts. !!! keyboard_tip "" diff --git a/web/src/settings_profile_fields.ts b/web/src/settings_profile_fields.ts index 9735350b15..7eaa5b5ef5 100644 --- a/web/src/settings_profile_fields.ts +++ b/web/src/settings_profile_fields.ts @@ -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; diff --git a/web/src/tippyjs.ts b/web/src/tippyjs.ts index 82128c06ee..019014a5ba 100644 --- a/web/src/tippyjs.ts +++ b/web/src/tippyjs.ts @@ -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", diff --git a/web/styles/app_components.css b/web/styles/app_components.css index 56ce06a99d..7c31aa5479 100644 --- a/web/styles/app_components.css +++ b/web/styles/app_components.css @@ -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; diff --git a/web/styles/drafts.css b/web/styles/drafts.css index a495ccc110..fc1eaa9dfd 100644 --- a/web/styles/drafts.css +++ b/web/styles/drafts.css @@ -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. */ diff --git a/web/styles/modal.css b/web/styles/modal.css index ea357e8faf..c010ceb7f4 100644 --- a/web/styles/modal.css +++ b/web/styles/modal.css @@ -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. */ diff --git a/web/styles/settings.css b/web/styles/settings.css index cbe928db5f..4c1cf38d09 100644 --- a/web/styles/settings.css +++ b/web/styles/settings.css @@ -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; diff --git a/web/templates/draft.hbs b/web/templates/draft.hbs index 1da211a6ea..7d8ae30cbd 100644 --- a/web/templates/draft.hbs +++ b/web/templates/draft.hbs @@ -51,7 +51,7 @@ - + {{> ./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") }}
diff --git a/web/templates/draft_table_body.hbs b/web/templates/draft_table_body.hbs index cae14645a1..6010071d07 100644 --- a/web/templates/draft_table_body.hbs +++ b/web/templates/draft_table_body.hbs @@ -13,9 +13,7 @@
- + {{> ./components/icon_button intent="danger" custom_classes="delete-selected-drafts-button" icon="trash" disabled=true }}
+ {{> ./components/icon_button intent="danger" custom_classes="delete-option" icon="trash" }} diff --git a/web/templates/scheduled_message.hbs b/web/templates/scheduled_message.hbs index be5d4fac03..a92da03a5c 100644 --- a/web/templates/scheduled_message.hbs +++ b/web/templates/scheduled_message.hbs @@ -37,7 +37,7 @@
- + {{> ./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") }}
{{rendered_markdown rendered_content}}
diff --git a/web/templates/settings/default_stream_choice.hbs b/web/templates/settings/default_stream_choice.hbs index 89e84be88a..4401acc4ad 100644 --- a/web/templates/settings/default_stream_choice.hbs +++ b/web/templates/settings/default_stream_choice.hbs @@ -1,6 +1,4 @@
{{> ../dropdown_widget widget_name=stream_dropdown_widget_name default_text=(t 'Select channel')}} - + {{> ../components/icon_button intent="danger" custom_classes="delete-choice tippy-zulip-delayed-tooltip" icon="trash" data-tippy-content=(t "Delete") aria-label=(t "Delete") }}
diff --git a/web/templates/settings/profile_field_choice.hbs b/web/templates/settings/profile_field_choice.hbs index cdc379b4b2..0b799a5d97 100644 --- a/web/templates/settings/profile_field_choice.hbs +++ b/web/templates/settings/profile_field_choice.hbs @@ -4,8 +4,5 @@ - - + {{> ../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") }}
diff --git a/web/templates/todo_modal_task.hbs b/web/templates/todo_modal_task.hbs index 21288ac660..714862955f 100644 --- a/web/templates/todo_modal_task.hbs +++ b/web/templates/todo_modal_task.hbs @@ -4,7 +4,5 @@
- + {{> ./components/icon_button intent="danger" custom_classes="delete-option" icon="trash" aria-label=(t "Delete") }}