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

dom changes for timeline image view

Browse source
This commit is contained in:
Bruno Windels 2020-10-30 22:52:54 +01:00
parent 5a31bc5f2b
commit 5aa2c7dc5c
1 changed files with 13 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
src/platform/web/ui/session/room/timeline/ImageView.js
View file

@ -19,27 +19,20 @@ import {renderMessage} from "./common.js";
export class ImageView extends TemplateView { export class ImageView extends TemplateView {
render(t, vm) { render(t, vm) {
// replace with css aspect-ratio once supported return renderMessage(t, vm,
const heightRatioPercent = (vm.thumbnailHeight / vm.thumbnailWidth) * 100; t.div([
const image = t.img({ t.a({href: vm.lightboxUrl, className: "picture"}, [
className: "picture", t.img({
src: vm => vm.thumbnailUrl, src: vm => vm.thumbnailUrl,
width: vm.thumbnailWidth,
height: vm.thumbnailHeight,
loading: "lazy", loading: "lazy",
alt: vm => vm.label, alt: vm => vm.label,
title: vm => vm.label, title: vm => vm.label,
}); style: vm => `max-width: ${vm.thumbnailWidth}px; max-height: ${vm.thumbnailHeight}px;`
const linkContainer = t.a({ }),
href: vm.lightboxUrl, t.time(vm.date + " " + vm.time)
style: `padding-top: ${heightRatioPercent}%; width: ${vm.thumbnailWidth}px;` ]),
}, [
image,
t.if(vm => vm.error, t.createTemplate((t, vm) => t.p({className: "error"}, vm.error))) t.if(vm => vm.error, t.createTemplate((t, vm) => t.p({className: "error"}, vm.error)))
]); ])
return renderMessage(t, vm,
[t.div(linkContainer), t.p(t.time(vm.date + " " + vm.time))]
); );
} }
} }