Arsharth/hydrogen-web
1
0
Fork 0
forked from mystiq/hydrogen-web
Code Issues Pull requests Projects Releases Packages Wiki Activity

offer menu options to download media

Browse source 
also always show status (before sendStatus), not just when isPending
as we are recycling it to show download status as well
This commit is contained in:
Bruno Windels 2022-06-25 20:14:55 +02:00
parent 7430aa7aab
commit 3369bda2f0
2 changed files with 25 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/platform/web/ui/css/themes/element/timeline.css
View file

@ -233,7 +233,7 @@ only loads when the top comes into view*/
align-self: stretch; align-self: stretch;
} }
.Timeline_messageBody .media > .sendStatus { .Timeline_messageBody .media > .status {
align-self: end; align-self: end;
justify-self: start; justify-self: start;
font-size: 0.8em; font-size: 0.8em;
@ -251,7 +251,7 @@ only loads when the top comes into view*/
} }
.Timeline_messageBody .media > time, .Timeline_messageBody .media > time,
.Timeline_messageBody .media > .sendStatus { .Timeline_messageBody .media > .status {
color: var(--text-color); color: var(--text-color);
display: block; display: block;
padding: 2px; padding: 2px;

30
src/platform/web/ui/session/room/timeline/BaseMediaView.js
View file

@ -15,6 +15,7 @@ limitations under the License.
*/ */
import {BaseMessageView} from "./BaseMessageView.js"; import {BaseMessageView} from "./BaseMessageView.js";
import {Menu} from "../../../general/Menu.js";
export class BaseMediaView extends BaseMessageView { export class BaseMediaView extends BaseMessageView {
renderMessageBody(t, vm) { renderMessageBody(t, vm) {
@ -35,24 +36,39 @@ export class BaseMediaView extends BaseMessageView {
this.renderMedia(t, vm), this.renderMedia(t, vm),
t.time(vm.date + " " + vm.time), 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) { if (vm.isPending) {
const sendStatus = t.div({
className: {
sendStatus: true,
hidden: vm => !vm.sendStatus
},
}, vm => vm.sendStatus);
const progress = t.progress({ const progress = t.progress({
min: 0, min: 0,
max: 100, max: 100,
value: vm => vm.uploadPercentage, value: vm => vm.uploadPercentage,
className: {hidden: vm => !vm.isUploading} className: {hidden: vm => !vm.isUploading}
}); });
children.push(sendStatus, progress); children.push(progress);
} }
return t.div({className: "Timeline_messageBody"}, [ return t.div({className: "Timeline_messageBody"}, [
t.div({className: "media", style: `max-width: ${vm.width}px`}, children), t.div({className: "media", style: `max-width: ${vm.width}px`}, children),
t.if(vm => vm.error, t => t.p({className: "error"}, vm.error)) 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;
}
} }