IntenseWebs/mattermost
3
0
Fork 0
mirror of https://github.com/mattermost/mattermost.git synced 2025-02-25 18:55:24 -06:00
Code Issues Packages Projects Releases Wiki Activity

MM-44470 Fix SVG without width not displaying (#28963)

Browse Source 
* Fix SVG rendering issue by setting default dimensions in image preview components

* destructuring attribute to prevent empty style object

* only create style object when fileType is svg

* fix style attribute for svg
This commit is contained in:
Jelmer Overeem 2024-11-08 12:49:30 +01:00 committed by GitHub
parent 2593860063
commit 0031e77b09
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 26 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
webapp/channels/src/components/file_preview_modal/image_preview.tsx
View File

@ -7,6 +7,9 @@ import type {FileInfo} from '@mattermost/types/files';
import {getFilePreviewUrl, getFileDownloadUrl} from 'mattermost-redux/utils/file_utils';
import {FileTypes} from 'utils/constants';
import {getFileType} from 'utils/utils';
import './image_preview.scss';
interface Props {
@ -31,6 +34,14 @@ export default function ImagePreview({fileInfo, canDownloadFiles}: Props) {
return <img src={previewUrl}/>;
}
let conditionalSVGStyleAttribute;
if (getFileType(fileInfo.extension) === FileTypes.SVG) {
conditionalSVGStyleAttribute = {
width: fileInfo.width,
height: 'auto',
};
}
return (
<a
className='image_preview'
@ -42,6 +53,7 @@ export default function ImagePreview({fileInfo, canDownloadFiles}: Props) {
data-testid='imagePreview'
alt={'preview url image'}
src={previewUrl}
style={conditionalSVGStyleAttribute}
/>
</a>
);

15
webapp/channels/src/components/size_aware_image.tsx
View File

@ -18,7 +18,8 @@ import {getFileMiniPreviewUrl} from 'mattermost-redux/utils/file_utils';
import LoadingImagePreview from 'components/loading_image_preview';
import WithTooltip from 'components/with_tooltip';
import {localizeMessage, copyToClipboard} from 'utils/utils';
import {FileTypes} from 'utils/constants';
import {localizeMessage, copyToClipboard, getFileType} from 'utils/utils';
const MIN_IMAGE_SIZE = 48;
const MIN_IMAGE_SIZE_FOR_INTERNAL_BUTTONS = 100;
@ -194,6 +195,7 @@ export default class SizeAwareImage extends React.PureComponent<Props, State> {
renderImageWithContainerIfNeeded = () => {
const {
fileInfo,
dimensions,
src,
fileURL,
enablePublicLink,
@ -214,6 +216,16 @@ export default class SizeAwareImage extends React.PureComponent<Props, State> {
ariaLabelImage += ` ${fileInfo.name}`.toLowerCase();
}
const fileType = getFileType(fileInfo?.extension ?? '');
let conditionalSVGStyleAttribute;
if (fileType === FileTypes.SVG) {
conditionalSVGStyleAttribute = {
width: dimensions?.width || MIN_IMAGE_SIZE,
height: 'auto',
};
}
const image = (
<img
{...props}
@ -228,6 +240,7 @@ export default class SizeAwareImage extends React.PureComponent<Props, State> {
src={src}
onError={this.handleError}
onLoad={this.handleLoad}
style={conditionalSVGStyleAttribute}
/>
);