From 91ddfdadd60e080224f4e51ee15e4e3d69b3da5b Mon Sep 17 00:00:00 2001 From: Vector73 Date: Wed, 29 Jan 2025 06:58:37 +0000 Subject: [PATCH] saved_snippets: Move "Saved snippets" button to compose control buttons. This is follow-up of #31359 that moves "Saved snippets" button from "send_later" popover to message formatting buttons and adds support to use saved snippets in message-edit UI. Fixes #31830. --- web/shared/icons/message-square-text.svg | 6 +++++ web/src/dropdown_widget.ts | 3 ++- web/src/saved_snippets_ui.ts | 24 ++++++++++++------- web/templates/compose_control_buttons.hbs | 3 +++ web/templates/popovers/send_later_popover.hbs | 7 ------ web/templates/tooltip_templates.hbs | 1 + 6 files changed, 28 insertions(+), 16 deletions(-) create mode 100644 web/shared/icons/message-square-text.svg diff --git a/web/shared/icons/message-square-text.svg b/web/shared/icons/message-square-text.svg new file mode 100644 index 0000000000..c2d739400f --- /dev/null +++ b/web/shared/icons/message-square-text.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/web/src/dropdown_widget.ts b/web/src/dropdown_widget.ts index 7b3d2431de..44121812e0 100644 --- a/web/src/dropdown_widget.ts +++ b/web/src/dropdown_widget.ts @@ -37,6 +37,7 @@ export type Option = { export type DropdownWidgetOptions = { widget_name: string; + widget_selector?: string; // You can bold the selected `option` by setting `option.bold_current_selection` to `true`. // Currently, not implemented for stream names. get_options: (current_value: string | number | undefined) => Option[]; @@ -103,7 +104,7 @@ export class DropdownWidget { constructor(options: DropdownWidgetOptions) { this.widget_name = options.widget_name; - this.widget_selector = `#${CSS.escape(this.widget_name)}_widget`; + this.widget_selector = options.widget_selector ?? `#${CSS.escape(this.widget_name)}_widget`; // A widget wrapper may not exist based on the UI requirement. this.widget_wrapper_id = `${this.widget_selector}_wrapper`; this.widget_value_selector = `${this.widget_selector} .dropdown_widget_value`; diff --git a/web/src/saved_snippets_ui.ts b/web/src/saved_snippets_ui.ts index 23ebaf0b76..518d498926 100644 --- a/web/src/saved_snippets_ui.ts +++ b/web/src/saved_snippets_ui.ts @@ -6,13 +6,12 @@ import render_add_saved_snippet_modal from "../templates/add_saved_snippet_modal import render_confirm_delete_saved_snippet from "../templates/confirm_dialog/confirm_delete_saved_snippet.hbs"; import * as channel from "./channel.ts"; -import * as compose_state from "./compose_state.ts"; import * as compose_ui from "./compose_ui.ts"; import * as confirm_dialog from "./confirm_dialog.ts"; import * as dialog_widget from "./dialog_widget.ts"; import * as dropdown_widget from "./dropdown_widget.ts"; import {$t_html} from "./i18n.ts"; -import * as popover_menus from "./popover_menus.ts"; +import * as rows from "./rows.ts"; import * as saved_snippets from "./saved_snippets.ts"; import type {StateData} from "./state_data.ts"; @@ -85,30 +84,38 @@ function item_click_callback( } dropdown.hide(); - // Hide `send_later` popover when a saved snippet is clicked. - popover_menus.hide_current_popover_if_visible(popover_menus.popover_instances.send_later); const current_value = widget.current_value; assert(typeof current_value === "number"); + + // Get target textarea where the "Add saved snippet" button is clicked. + const $target_element = $(dropdown.reference); + let $target_textarea: JQuery; + let edit_message_id: string | undefined; + if ($target_element.parents(".message_edit_form").length === 1) { + edit_message_id = rows.id($target_element.parents(".message_row")).toString(); + $target_textarea = $(`#edit_form_${CSS.escape(edit_message_id)} .message_edit_content`); + } else { + $target_textarea = $("textarea#compose-textarea"); + } if (current_value === saved_snippets.ADD_SAVED_SNIPPET_OPTION_ID) { dialog_widget.launch({ html_heading: $t_html({defaultMessage: "Add a new saved snippet"}), html_body: render_add_saved_snippet_modal({ - prepopulated_content: compose_state.message_content(), + prepopulated_content: $target_textarea.val(), }), html_submit_button: $t_html({defaultMessage: "Save"}), id: "add-new-saved-snippet-modal", form_id: "add-new-saved-snippet-form", update_submit_disabled_state_on_change: true, on_click: submit_create_saved_snippet_form, - on_shown: () => $("#add-saved-snippet-title").trigger("focus"), + on_shown: () => $("#new-saved-snippet-title").trigger("focus"), post_render: saved_snippet_modal_post_render, }); } else { const saved_snippet = saved_snippets.get_saved_snippet_by_id(current_value); assert(saved_snippet !== undefined); const content = saved_snippet.content; - const $textarea = $("textarea#compose-textarea"); - compose_ui.insert_syntax_and_focus(content, $textarea); + compose_ui.insert_syntax_and_focus(content, $target_textarea); } } @@ -117,6 +124,7 @@ export const initialize = (params: StateData["saved_snippets"]): void => { saved_snippet_dropdown_widget = new dropdown_widget.DropdownWidget({ widget_name: "saved_snippets", + widget_selector: ".saved_snippets_widget", get_options: saved_snippets.get_options_for_dropdown_widget, item_click_callback, $events_container: $("body"), diff --git a/web/templates/compose_control_buttons.hbs b/web/templates/compose_control_buttons.hbs index 1b450b5037..38bbca5a63 100644 --- a/web/templates/compose_control_buttons.hbs +++ b/web/templates/compose_control_buttons.hbs @@ -32,6 +32,9 @@
+
+ +
diff --git a/web/templates/popovers/send_later_popover.hbs b/web/templates/popovers/send_later_popover.hbs index df3bda2719..6db217bd6e 100644 --- a/web/templates/popovers/send_later_popover.hbs +++ b/web/templates/popovers/send_later_popover.hbs @@ -67,13 +67,6 @@ - -
  • - - - {{t "Saved snippets" }} - -
    • {{#if show_compose_new_message}}
  • diff --git a/web/templates/tooltip_templates.hbs b/web/templates/tooltip_templates.hbs index 85cf3d3217..7786d133ba 100644 --- a/web/templates/tooltip_templates.hbs +++ b/web/templates/tooltip_templates.hbs @@ -70,6 +70,7 @@