diff --git a/src/platform/web/ui/css/themes/element/timeline.css b/src/platform/web/ui/css/themes/element/timeline.css index bac4b4a5..43c57d19 100644 --- a/src/platform/web/ui/css/themes/element/timeline.css +++ b/src/platform/web/ui/css/themes/element/timeline.css @@ -233,7 +233,7 @@ only loads when the top comes into view*/ align-self: stretch; } -.Timeline_messageBody .media > .sendStatus { +.Timeline_messageBody .media > .status { align-self: end; justify-self: start; font-size: 0.8em; @@ -251,7 +251,7 @@ only loads when the top comes into view*/ } .Timeline_messageBody .media > time, -.Timeline_messageBody .media > .sendStatus { +.Timeline_messageBody .media > .status { color: var(--text-color); display: block; padding: 2px; diff --git a/src/platform/web/ui/session/room/timeline/BaseMediaView.js b/src/platform/web/ui/session/room/timeline/BaseMediaView.js index c52fbaed..16b5de14 100644 --- a/src/platform/web/ui/session/room/timeline/BaseMediaView.js +++ b/src/platform/web/ui/session/room/timeline/BaseMediaView.js @@ -15,6 +15,7 @@ limitations under the License. */ import {BaseMessageView} from "./BaseMessageView.js"; +import {Menu} from "../../../general/Menu.js"; export class BaseMediaView extends BaseMessageView { renderMessageBody(t, vm) { @@ -35,24 +36,39 @@ export class BaseMediaView extends BaseMessageView { this.renderMedia(t, vm), t.time(vm.date + " " + vm.time), ]; + const status = t.div({ + className: { + status: true, + hidden: vm => !vm.status + }, + }, vm => vm.status); + children.push(status); if (vm.isPending) { - const sendStatus = t.div({ - className: { - sendStatus: true, - hidden: vm => !vm.sendStatus - }, - }, vm => vm.sendStatus); const progress = t.progress({ min: 0, max: 100, value: vm => vm.uploadPercentage, className: {hidden: vm => !vm.isUploading} }); - children.push(sendStatus, progress); + children.push(progress); } return t.div({className: "Timeline_messageBody"}, [ t.div({className: "media", style: `max-width: ${vm.width}px`}, children), t.if(vm => vm.error, t => t.p({className: "error"}, vm.error)) ]); } + + createMenuOptions(vm) { + const options = super.createMenuOptions(vm); + if (!vm.isPending) { + let label; + switch (vm.shape) { + case "image": label = vm.i18n`Download image`; break; + case "video": label = vm.i18n`Download video`; break; + default: label = vm.i18n`Download media`; break; + } + options.push(Menu.option(label, () => vm.downloadMedia())); + } + return options; + } }