From 5583ddd3bf274d8ad830a8cc1cb028631ca0f355 Mon Sep 17 00:00:00 2001 From: Sayam Samal Date: Wed, 11 Sep 2024 09:01:26 +0530 Subject: [PATCH] echo: Update message controls dynamically for failed messages. Previously, the message controls for failed messages was present for all messages, regardless of their status, and was being rendered unconditionally; only being hidden for successfully sent messages. This commit adds dynamic rendering for the failed message controls, only rendering them via the handlebars template when a message is confirmed to be failed. Fixes #31132. --- web/src/echo.ts | 15 +++++--- web/styles/message_row.css | 38 +++++-------------- web/templates/message_body.hbs | 10 ++++- web/templates/message_controls.hbs | 37 +++++------------- web/templates/message_controls_failed_msg.hbs | 7 ++++ 5 files changed, 45 insertions(+), 62 deletions(-) create mode 100644 web/templates/message_controls_failed_msg.hbs diff --git a/web/src/echo.ts b/web/src/echo.ts index aa013afa9e..cf668f82a3 100644 --- a/web/src/echo.ts +++ b/web/src/echo.ts @@ -2,6 +2,9 @@ import $ from "jquery"; import assert from "minimalistic-assert"; import {z} from "zod"; +import render_message_controls from "../templates/message_controls.hbs"; +import render_message_controls_failed_msg from "../templates/message_controls_failed_msg.hbs"; + import * as alert_words from "./alert_words"; import * as blueslip from "./blueslip"; import * as compose_notifications from "./compose_notifications"; @@ -118,20 +121,22 @@ function hide_retry_spinner($row: JQuery): boolean { return true; } -function show_message_failed(message_id: number, failed_msg: string): void { +function show_message_failed(message_id: number, _failed_msg: string): void { // Failed to send message, so display inline retry/cancel message_live_update.update_message_in_all_views(message_id, ($row) => { $row.find(".slow-send-spinner").addClass("hidden"); - const $failed_div = $row.find(".message_failed"); - $failed_div.toggleClass("hide", false); - $failed_div.find(".failed_text").attr("title", failed_msg); + const $message_controls = $row.find(".message_controls"); + $message_controls.html(render_message_controls_failed_msg()); }); + // TODO: Show the `_failed_msg` in the UI, describing the reason for the failure. } function show_failed_message_success(message_id: number): void { // Previously failed message succeeded + const msg = message_store.get(message_id); message_live_update.update_message_in_all_views(message_id, ($row) => { - $row.find(".message_failed").toggleClass("hide", true); + const $message_controls = $row.find(".message_controls"); + $message_controls.html(render_message_controls({msg})); }); } diff --git a/web/styles/message_row.css b/web/styles/message_row.css index 868f3102c4..bf20469d6b 100644 --- a/web/styles/message_row.css +++ b/web/styles/message_row.css @@ -77,8 +77,7 @@ padding on either side of the message box. */ padding: 0 5px 0 3px; - &:hover .message_controls, - &:hover .message_failed { + &:hover .message_controls { .empty-star:hover { cursor: pointer; } @@ -142,8 +141,8 @@ @media (width < $sm_min), ((width >= $md_min) and (width < $mc_min)) { /* This is intended to target the first message_controls child - when there are 3 displayed. 4 = 3 + hidden message_failed element. */ - .message_control_button:nth-last-child(4) { + when there are 3 displayed. */ + .message_control_button:nth-last-child(3) { display: none; } } @@ -504,35 +503,16 @@ } } - .message_failed { - display: inline-flex; - justify-content: space-between; - cursor: pointer; - position: relative; - vertical-align: middle; - padding-left: 2px; - - &.hide { - display: none; - } + .failed_message_action { + color: var(--color-failed-message-send-icon); + font-weight: bold; + padding: 1px; + opacity: 1; + visibility: visible; .rotating { - display: inline-block; - outline: none; - animation: rotate 1s infinite linear; } - - .failed_message_action { - opacity: 1 !important; - color: var(--color-failed-message-send-icon); - font-weight: bold; - padding: 1px; - } - - .message_control_button { - visibility: inherit; - } } .star_container { diff --git a/web/templates/message_body.hbs b/web/templates/message_body.hbs index 25cb7af46c..1d888bac0c 100644 --- a/web/templates/message_body.hbs +++ b/web/templates/message_body.hbs @@ -37,7 +37,15 @@ {{/if}} -{{> message_controls}} +
+ {{#if msg/locally_echoed}} + {{#if msg/failed_request}} + {{> message_controls_failed_msg}} + {{/if}} + {{else}} + {{> message_controls}} + {{/if}} +
{{#unless status_message}} {{#unless is_hidden}} diff --git a/web/templates/message_controls.hbs b/web/templates/message_controls.hbs index 33865d9478..1efbfbaf38 100644 --- a/web/templates/message_controls.hbs +++ b/web/templates/message_controls.hbs @@ -1,36 +1,19 @@ -
- {{#if msg/sent_by_me}} +{{#if msg/sent_by_me}}
- {{/if}} +{{/if}} - {{#unless msg/sent_by_me}} +{{#unless msg/sent_by_me}}
- {{/unless}} - - {{#unless msg/locally_echoed}} -
- -
- {{/unless}} - -
-
- -
- -
- -
-
- - {{#unless msg/locally_echoed}} -
- -
- {{/unless}} +{{/unless}} +
+ +
+ +
+
diff --git a/web/templates/message_controls_failed_msg.hbs b/web/templates/message_controls_failed_msg.hbs new file mode 100644 index 0000000000..8f4954ec93 --- /dev/null +++ b/web/templates/message_controls_failed_msg.hbs @@ -0,0 +1,7 @@ +
+ +
+ +
+ +