PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Fix image alignment issues

Browse source 
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
This commit is contained in:
Šimon Brandner 2021-07-13 11:49:49 +02:00
parent fca5125c5b
commit 866a11d7e3
No known key found for this signature in database
GPG key ID: 9760693FDD98A790
3 changed files with 18 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
res/css/views/messages/_MImageReplyBody.scss
View file

@ -15,19 +15,11 @@ limitations under the License.
*/
.mx_MImageReplyBody {
display: grid;
grid-template:
"image sender" 20px
"image filename" 20px
/ 44px auto;
grid-gap: 4px;
}
.mx_MImageReplyBody_thumbnail {
grid-area: image;
display: flex;
.mx_MImageBody_thumbnail_container {
max-height: 44px !important;
flex: 1;
padding-right: 4px;
}
}

13
src/components/views/messages/MImageBody.tsx
View file

@ -332,7 +332,12 @@ export default class MImageBody extends React.Component<IProps, IState> {
_afterComponentWillUnmount() {
}
protected messageContent(contentUrl: string, thumbUrl: string, content: IMediaEventContent): JSX.Element {
protected messageContent(
contentUrl: string,
thumbUrl: string,
content: IMediaEventContent,
forcedHeight?: number,
): JSX.Element {
let infoWidth;
let infoHeight;
@ -367,7 +372,7 @@ export default class MImageBody extends React.Component<IProps, IState> {
}
// The maximum height of the thumbnail as it is rendered as an <img>
const maxHeight = Math.min(this.props.maxImageHeight || 600, infoHeight);
const maxHeight = forcedHeight || Math.min((this.props.maxImageHeight || 600), infoHeight);
// The maximum width of the thumbnail, as dictated by its natural
// maximum height.
const maxWidth = infoWidth * maxHeight / infoHeight;
@ -407,9 +412,9 @@ export default class MImageBody extends React.Component<IProps, IState> {
}
const thumbnail = (
<div className="mx_MImageBody_thumbnail_container" style={{ maxHeight: maxHeight + "px" }} >
<div className="mx_MImageBody_thumbnail_container" style={{ maxHeight: maxHeight + "px", maxWidth: maxWidth + "px" }} >
{ /* Calculate aspect ratio, using %padding will size _container correctly */ }
<div style={{ paddingBottom: (100 * infoHeight / infoWidth) + '%' }} />
<div style={{ paddingBottom: forcedHeight ? (forcedHeight + "px") : ((100 * infoHeight / infoWidth) + '%') }} />
{ showPlaceholder &&
<div className="mx_MImageBody_thumbnail" style={{
// Constrain width here so that spinner appears central to the loaded thumbnail

10
src/components/views/messages/MImageReplyBody.tsx
View file

@ -42,7 +42,7 @@ export default class MImageReplyBody extends MImageBody {
const content = this.props.mxEvent.getContent<IMediaEventContent>();
const contentUrl = this.getContentUrl();
const thumbnail = this.messageContent(contentUrl, this.getThumbUrl(), content);
const thumbnail = this.messageContent(contentUrl, this.getThumbUrl(), content, 44);
const fileBody = this.getFileBody();
const sender = <SenderProfile
mxEvent={this.props.mxEvent}
@ -50,9 +50,11 @@ export default class MImageReplyBody extends MImageBody {
/>;
return <div className="mx_MImageReplyBody">
<div className="mx_MImageReplyBody_thumbnail">{ thumbnail }</div>
<div className="mx_MImageReplyBody_sender">{ sender }</div>
<div className="mx_MImageReplyBody_filename">{ fileBody }</div>
{ thumbnail }
<div className="mx_MImageReplyBody_info">
<div className="mx_MImageReplyBody_sender">{ sender }</div>
<div className="mx_MImageReplyBody_filename">{ fileBody }</div>
</div>
</div>;
}
}