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 { .mx_MImageReplyBody {
display: grid; display: flex;
grid-template:
"image sender" 20px
"image filename" 20px
/ 44px auto;
grid-gap: 4px;
}
.mx_MImageReplyBody_thumbnail {
grid-area: image;
.mx_MImageBody_thumbnail_container { .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() { _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 infoWidth;
let infoHeight; 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> // 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 // The maximum width of the thumbnail, as dictated by its natural
// maximum height. // maximum height.
const maxWidth = infoWidth * maxHeight / infoHeight; const maxWidth = infoWidth * maxHeight / infoHeight;
@ -407,9 +412,9 @@ export default class MImageBody extends React.Component<IProps, IState> {
} }
const thumbnail = ( 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 */ } { /* 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 && { showPlaceholder &&
<div className="mx_MImageBody_thumbnail" style={{ <div className="mx_MImageBody_thumbnail" style={{
// Constrain width here so that spinner appears central to the loaded thumbnail // 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 content = this.props.mxEvent.getContent<IMediaEventContent>();
const contentUrl = this.getContentUrl(); 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 fileBody = this.getFileBody();
const sender = <SenderProfile const sender = <SenderProfile
mxEvent={this.props.mxEvent} mxEvent={this.props.mxEvent}
@ -50,9 +50,11 @@ export default class MImageReplyBody extends MImageBody {
/>; />;
return <div className="mx_MImageReplyBody"> return <div className="mx_MImageReplyBody">
<div className="mx_MImageReplyBody_thumbnail">{ thumbnail }</div> { thumbnail }
<div className="mx_MImageReplyBody_sender">{ sender }</div> <div className="mx_MImageReplyBody_info">
<div className="mx_MImageReplyBody_filename">{ fileBody }</div> <div className="mx_MImageReplyBody_sender">{ sender }</div>
<div className="mx_MImageReplyBody_filename">{ fileBody }</div>
</div>
</div>; </div>;
} }
} }