mirror of
https://github.com/vector-im/hydrogen-web.git
synced 2024-12-23 03:25:12 +01:00
offer menu options to download media
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:
parent
7430aa7aab
commit
3369bda2f0
@ -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;
|
||||||
|
@ -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),
|
||||||
];
|
];
|
||||||
if (vm.isPending) {
|
const status = t.div({
|
||||||
const sendStatus = t.div({
|
|
||||||
className: {
|
className: {
|
||||||
sendStatus: true,
|
status: true,
|
||||||
hidden: vm => !vm.sendStatus
|
hidden: vm => !vm.status
|
||||||
},
|
},
|
||||||
}, vm => vm.sendStatus);
|
}, vm => vm.status);
|
||||||
|
children.push(status);
|
||||||
|
if (vm.isPending) {
|
||||||
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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user