From f4d58f1ba6ab612610a261dda7a875006e8b0c17 Mon Sep 17 00:00:00 2001 From: N-Shar-ma Date: Wed, 7 Feb 2024 12:44:58 +0530 Subject: [PATCH] compose: Show counter inside Drafts button for the current recipient. Now we show the number of drafts that are addressed to the current recipient selected in the compose box, if any, in the Drafts button within parentheses (whether it is next to the Send button, or in the Send options popover), and explain that it is the number of drafts for this conversation in the tooltip. Fixes: #28696. --- web/src/compose_actions.js | 2 ++ web/src/compose_recipient.js | 2 ++ web/src/compose_tooltips.js | 16 +++++++++++++++- web/src/drafts.ts | 19 +++++++++++++++++++ web/src/scheduled_messages_popover.js | 3 +++ web/styles/compose.css | 18 ++++++++++++------ web/templates/compose.hbs | 4 ++-- web/templates/drafts_tooltip.hbs | 7 +++++++ web/templates/popovers/send_later_popover.hbs | 2 +- web/templates/tooltip_templates.hbs | 4 ---- web/tests/compose.test.js | 2 ++ web/tests/compose_actions.test.js | 1 + web/tests/drafts.test.js | 17 ++++++++++++----- 13 files changed, 78 insertions(+), 19 deletions(-) create mode 100644 web/templates/drafts_tooltip.hbs diff --git a/web/src/compose_actions.js b/web/src/compose_actions.js index 5675e3b682..cad56b37b0 100644 --- a/web/src/compose_actions.js +++ b/web/src/compose_actions.js @@ -308,6 +308,7 @@ export function start(msg_type, opts) { } compose_recipient.check_posting_policy_for_compose_box(); + drafts.update_compose_draft_count(); // Reset the `max-height` property of `compose-textarea` so that the // compose-box do not cover the last messages of the current stream @@ -410,6 +411,7 @@ export function on_topic_narrow() { compose_validate.warn_if_topic_resolved(true); compose_fade.set_focused_recipient("stream"); compose_fade.update_message_list(); + drafts.update_compose_draft_count(); $("textarea#compose-textarea").trigger("focus"); } diff --git a/web/src/compose_recipient.js b/web/src/compose_recipient.js index b6fdc8fcb7..efc2f31422 100644 --- a/web/src/compose_recipient.js +++ b/web/src/compose_recipient.js @@ -11,6 +11,7 @@ import * as compose_pm_pill from "./compose_pm_pill"; import * as compose_state from "./compose_state"; import * as compose_ui from "./compose_ui"; import * as compose_validate from "./compose_validate"; +import * as drafts from "./drafts"; import * as dropdown_widget from "./dropdown_widget"; import {$t} from "./i18n"; import * as narrow_state from "./narrow_state"; @@ -95,6 +96,7 @@ function update_fade() { export function update_on_recipient_change() { update_fade(); update_narrow_to_recipient_visibility(); + drafts.update_compose_draft_count(); check_posting_policy_for_compose_box(); } diff --git a/web/src/compose_tooltips.js b/web/src/compose_tooltips.js index 316635cb44..1e99c6ca28 100644 --- a/web/src/compose_tooltips.js +++ b/web/src/compose_tooltips.js @@ -2,6 +2,7 @@ import $ from "jquery"; import _ from "lodash"; import {delegate} from "tippy.js"; +import render_drafts_tooltip from "../templates/drafts_tooltip.hbs"; import render_narrow_to_compose_recipients_tooltip from "../templates/narrow_to_compose_recipients_tooltip.hbs"; import * as compose_recipient from "./compose_recipient"; @@ -104,11 +105,24 @@ export function initialize() { target: ".send-control-button", delay: LONG_HOVER_DELAY, placement: "top", - onShow() { + onShow(instance) { // Don't show send-area tooltips if the popover is displayed. if (popover_menus.is_scheduled_messages_popover_displayed()) { return false; } + if (instance.reference.id === "compose-drafts-button") { + const count = + instance.reference.querySelector(".compose-drafts-count").textContent || 0; + // Explain that the number in brackets is the number of drafts for this conversation. + const draft_count_msg = $t( + { + defaultMessage: + "{count, plural, one {# draft} other {# drafts}} for this conversation", + }, + {count}, + ); + instance.setContent(parse_html(render_drafts_tooltip({draft_count_msg}))); + } return true; }, appendTo: () => document.body, diff --git a/web/src/drafts.ts b/web/src/drafts.ts index f78b8c8fb0..f08d94a42b 100644 --- a/web/src/drafts.ts +++ b/web/src/drafts.ts @@ -157,6 +157,7 @@ export const draft_model = (function () { ls.set(KEY, drafts); if (update_count) { set_count(Object.keys(drafts).length); + update_compose_draft_count(); } } @@ -208,6 +209,24 @@ export const draft_model = (function () { }; })(); +export function update_compose_draft_count(): void { + const $count_container = $(".compose-drafts-count-container"); + const $count_ele = $count_container.find(".compose-drafts-count"); + if (!compose_state.has_full_recipient()) { + $count_ele.text(""); + $count_container.hide(); + return; + } + const compose_draft_count = Object.keys(filter_drafts_by_compose_box_and_recipient()).length; + if (compose_draft_count > 0) { + $count_ele.text(compose_draft_count > 99 ? "99+" : compose_draft_count); + $count_container.show(); + } else { + $count_ele.text(""); + $count_container.hide(); + } +} + export function sync_count(): void { const drafts = draft_model.get(); set_count(Object.keys(drafts).length); diff --git a/web/src/scheduled_messages_popover.js b/web/src/scheduled_messages_popover.js index 2b4f532494..85b8f15583 100644 --- a/web/src/scheduled_messages_popover.js +++ b/web/src/scheduled_messages_popover.js @@ -10,6 +10,7 @@ import * as channel from "./channel"; import * as common from "./common"; import * as compose from "./compose"; import * as compose_validate from "./compose_validate"; +import * as drafts from "./drafts"; import * as flatpickr from "./flatpickr"; import * as modals from "./modals"; import * as popover_menus from "./popover_menus"; @@ -165,6 +166,8 @@ export function initialize() { focus_first_send_later_popover_item(); send_later_popover_keyboard_toggle = false; } + // Make sure the compose drafts count, which is also displayed in this popover, has a current value. + drafts.update_compose_draft_count(); const $popper = $(instance.popper); common.adjust_mac_kbd_tags(".enter_sends_choices kbd"); $popper.one("click", ".send_later_selected_send_later_time", () => { diff --git a/web/styles/compose.css b/web/styles/compose.css index 8c0d7481a1..730f18a1ee 100644 --- a/web/styles/compose.css +++ b/web/styles/compose.css @@ -1334,12 +1334,18 @@ textarea.new_message_textarea, as 100% of the container width, plus the 8px from the negative left margin. */ max-width: calc(100% + 8px); - /* Set an ellipsis when the translated - version of `Drafts` exceeds the width, - and keep button text to a single line. */ - white-space: nowrap; - overflow-x: hidden; - text-overflow: ellipsis; + display: flex; + gap: 1px; + + .compose-drafts-text { + /* Set an ellipsis when the translated + version of `Drafts` exceeds the width, + and keep button text to a single line. */ + white-space: nowrap; + overflow-x: hidden; + text-overflow: ellipsis; + flex-grow: 1; + } @media (width < $mc_min) { margin-left: 0; diff --git a/web/templates/compose.hbs b/web/templates/compose.hbs index 2f791ec844..90c292ac2a 100644 --- a/web/templates/compose.hbs +++ b/web/templates/compose.hbs @@ -86,8 +86,8 @@
- - {{t 'Drafts' }} + + {{t 'Drafts' }}()
diff --git a/web/templates/drafts_tooltip.hbs b/web/templates/drafts_tooltip.hbs new file mode 100644 index 0000000000..799a9d8a55 --- /dev/null +++ b/web/templates/drafts_tooltip.hbs @@ -0,0 +1,7 @@ +
+
{{t "View drafts"}}
+ {{#if draft_count_msg}} +
{{draft_count_msg}}
+ {{/if}} +
+{{tooltip_hotkey_hints "D"}} diff --git a/web/templates/popovers/send_later_popover.hbs b/web/templates/popovers/send_later_popover.hbs index 8c0929af98..a7cdd01e44 100644 --- a/web/templates/popovers/send_later_popover.hbs +++ b/web/templates/popovers/send_later_popover.hbs @@ -51,6 +51,6 @@
  • - {{t "Drafts"}} + {{t "Drafts"}} ()
    • diff --git a/web/templates/tooltip_templates.hbs b/web/templates/tooltip_templates.hbs index e72d6971ec..cc6c961909 100644 --- a/web/templates/tooltip_templates.hbs +++ b/web/templates/tooltip_templates.hbs @@ -6,10 +6,6 @@ {{t 'View bot card' }} {{tooltip_hotkey_hints "U"}} -