From 43c082475b20e1a37a5f4605201145b2e66ed157 Mon Sep 17 00:00:00 2001
From: Bruno Windels <bruno@windels.cloud>
Date: Fri, 28 May 2021 15:27:02 +0200
Subject: [PATCH] unify cancel option for various tiles in menu option

---
 .../web/ui/session/room/timeline/BaseMediaView.js    |  3 +--
 .../web/ui/session/room/timeline/BaseMessageView.js  |  7 +++++--
 .../web/ui/session/room/timeline/FileView.js         | 12 +++++-------
 .../session/room/timeline/MissingAttachmentView.js   |  3 +--
 4 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/src/platform/web/ui/session/room/timeline/BaseMediaView.js b/src/platform/web/ui/session/room/timeline/BaseMediaView.js
index 80c37b81..c52fbaed 100644
--- a/src/platform/web/ui/session/room/timeline/BaseMediaView.js
+++ b/src/platform/web/ui/session/room/timeline/BaseMediaView.js
@@ -36,13 +36,12 @@ export class BaseMediaView extends BaseMessageView {
             t.time(vm.date + " " + vm.time),
         ];
         if (vm.isPending) {
-            const cancel = t.button({onClick: () => vm.abortSending(), className: "link"}, vm.i18n`Cancel`);
             const sendStatus = t.div({
                 className: {
                     sendStatus: true,
                     hidden: vm => !vm.sendStatus
                 },
-            }, [vm => vm.sendStatus, " ", cancel]);
+            }, vm => vm.sendStatus);
             const progress = t.progress({
                 min: 0,
                 max: 100,
diff --git a/src/platform/web/ui/session/room/timeline/BaseMessageView.js b/src/platform/web/ui/session/room/timeline/BaseMessageView.js
index b110a9aa..dd7791c8 100644
--- a/src/platform/web/ui/session/room/timeline/BaseMessageView.js
+++ b/src/platform/web/ui/session/room/timeline/BaseMessageView.js
@@ -59,7 +59,8 @@ export class BaseMessageView extends TemplateView {
                 return;
             }
             this.root().classList.add("menuOpen");
-            this._menuPopup = new Popup(new Menu(options), () => this.root().classList.remove("menuOpen"));
+            const onClose = () => this.root().classList.remove("menuOpen");
+            this._menuPopup = new Popup(new Menu(options), onClose);
             this._menuPopup.trackInTemplateView(this);
             this._menuPopup.showRelativeTo(button, {
                 horizontal: {
@@ -78,7 +79,9 @@ export class BaseMessageView extends TemplateView {
 
     createMenuOptions(vm) {
         const options = [];
-        if (vm.shape !== "redacted") {
+        if (vm.isPending) {
+            options.push(Menu.option(vm.i18n`Cancel`, () => vm.abortSending()));
+        } else if (vm.shape !== "redacted") {
             options.push(Menu.option(vm.i18n`Delete`, () => vm.redact()));
         }
         return options;
diff --git a/src/platform/web/ui/session/room/timeline/FileView.js b/src/platform/web/ui/session/room/timeline/FileView.js
index 674f2d23..6a2d418e 100644
--- a/src/platform/web/ui/session/room/timeline/FileView.js
+++ b/src/platform/web/ui/session/room/timeline/FileView.js
@@ -18,17 +18,15 @@ import {BaseMessageView} from "./BaseMessageView.js";
 
 export class FileView extends BaseMessageView {
     renderMessageBody(t, vm) {
+        const children = [];
         if (vm.isPending) {
-            return t.p([
-                vm => vm.label,
-                " ",
-                t.button({className: "link", onClick: () => vm.abortSending()}, vm.i18n`Cancel`),
-            ]);
+            children.push(vm => vm.label);
         } else {
-            return t.p({className: "Timeline_messageBody statusMessage"}, [
+            children.push(
                 t.button({className: "link", onClick: () => vm.download()}, vm => vm.label),
                 t.time(vm.date + " " + vm.time)
-            ]);
+            );
         }
+        return t.p({className: "Timeline_messageBody statusMessage"}, children);
     }
 }
diff --git a/src/platform/web/ui/session/room/timeline/MissingAttachmentView.js b/src/platform/web/ui/session/room/timeline/MissingAttachmentView.js
index 08d41b0e..473a1acc 100644
--- a/src/platform/web/ui/session/room/timeline/MissingAttachmentView.js
+++ b/src/platform/web/ui/session/room/timeline/MissingAttachmentView.js
@@ -18,7 +18,6 @@ import {BaseMessageView} from "./BaseMessageView.js";
 
 export class MissingAttachmentView extends BaseMessageView {
     renderMessageBody(t, vm) {
-        const remove = t.button({className: "link", onClick: () => vm.abortSending()}, vm.i18n`Remove`);
-        return t.p({className: "Timeline_messageBody statusMessage"}, [vm.label, " ", remove]);
+        return t.p({className: "Timeline_messageBody statusMessage"}, vm.label);
     }
 }