ztr/TelegramPWA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

iOS: Fix message height jump on load (#3544)

Browse Source
This commit is contained in:
Alexander Zinchuk 2023-07-20 15:58:26 +02:00
parent f6d9f324fe
commit faab9b15e8
4 changed files with 20 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/common/EmbeddedMessage.scss
View File

@ -101,7 +101,7 @@
.emoji { .emoji {
width: calc(1.125 * var(--message-text-size, 1rem)) !important; width: calc(1.125 * var(--message-text-size, 1rem)) !important;
height: calc(1.125 * var(--message-text-size, 1rem)) !important; height: calc(1.125 * var(--message-text-size, 1rem)) !important;
vertical-align: text-bottom !important; vertical-align: bottom !important;
} }
.custom-emoji { .custom-emoji {

1
src/components/middle/message/Invoice.scss
View File

@ -21,6 +21,7 @@
.invoice-image { .invoice-image {
position: relative; position: relative;
width: 100%; width: 100%;
max-width: 100%;
max-height: 30rem; max-height: 30rem;
object-fit: cover; object-fit: cover;
border-bottom-left-radius: var(--border-bottom-left-radius); border-bottom-left-radius: var(--border-bottom-left-radius);

13
src/components/middle/message/Invoice.tsx
View File

@ -9,6 +9,7 @@ import { getMessageInvoice, getWebDocumentHash } from '../../../global/helpers';
import { formatCurrency } from '../../../util/formatCurrency'; import { formatCurrency } from '../../../util/formatCurrency';
import renderText from '../../common/helpers/renderText'; import renderText from '../../common/helpers/renderText';
import getCustomAppendixBg from './helpers/getCustomAppendixBg'; import getCustomAppendixBg from './helpers/getCustomAppendixBg';
import buildStyle from '../../../util/buildStyle';
import useLayoutEffectWithPrevDeps from '../../../hooks/useLayoutEffectWithPrevDeps'; import useLayoutEffectWithPrevDeps from '../../../hooks/useLayoutEffectWithPrevDeps';
import useLang from '../../../hooks/useLang'; import useLang from '../../../hooks/useLang';
@ -72,6 +73,14 @@ const Invoice: FC<OwnProps> = ({
} }
}, [shouldAffectAppendix, photoUrl, isInSelectMode, isSelected, theme]); }, [shouldAffectAppendix, photoUrl, isInSelectMode, isSelected, theme]);
const width = forcedWidth || photo?.dimensions?.width;
const style = buildStyle(
photo?.dimensions && `width: ${width}px`,
photo?.dimensions && `aspect-ratio: ${photo.dimensions.width} / ${photo.dimensions.height}`,
Boolean(!photo?.dimensions && forcedWidth) && `width: ${forcedWidth}px`,
);
return ( return (
<div <div
ref={ref} ref={ref}
@ -92,13 +101,13 @@ const Invoice: FC<OwnProps> = ({
className="invoice-image" className="invoice-image"
src={photoUrl} src={photoUrl}
alt="" alt=""
style={forcedWidth ? `width: ${forcedWidth}px` : undefined} style={style}
crossOrigin="anonymous" crossOrigin="anonymous"
/> />
)} )}
{!photoUrl && photo && ( {!photoUrl && photo && (
<Skeleton <Skeleton
width={forcedWidth || photo.dimensions?.width} width={width}
height={photo.dimensions?.height} height={photo.dimensions?.height}
forceAspectRatio forceAspectRatio
/> />

10
src/components/ui/Skeleton.tsx
View File

@ -1,6 +1,7 @@
import type { FC } from '../../lib/teact/teact';
import React from '../../lib/teact/teact'; import React from '../../lib/teact/teact';
import type { FC } from '../../lib/teact/teact';
import buildClassName from '../../util/buildClassName'; import buildClassName from '../../util/buildClassName';
import buildStyle from '../../util/buildStyle'; import buildStyle from '../../util/buildStyle';
@ -27,8 +28,11 @@ const Skeleton: FC<OwnProps> = ({
}) => { }) => {
const classNames = buildClassName('Skeleton', variant, animation, className, inline && 'inline'); const classNames = buildClassName('Skeleton', variant, animation, className, inline && 'inline');
const aspectRatio = (width && height) ? `aspect-ratio: ${width}/${height}` : undefined; const aspectRatio = (width && height) ? `aspect-ratio: ${width}/${height}` : undefined;
const style = forceAspectRatio ? aspectRatio const style = buildStyle(
: buildStyle(Boolean(width) && `width: ${width}px`, Boolean(height) && `height: ${height}px`); forceAspectRatio && aspectRatio,
Boolean(width) && `width: ${width}px`,
!forceAspectRatio && Boolean(height) && `height: ${height}px`,
);
return ( return (
<div className={classNames} style={style}>{inline && '\u00A0'}</div> <div className={classNames} style={style}>{inline && '\u00A0'}</div>
); );