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

Header Pinned Message: Fix text cutting off (#3483)

Browse Source
This commit is contained in:
Alexander Zinchuk 2023-07-05 13:16:01 +02:00
parent 20f8dedf8c
commit 1e33c04ed4
3 changed files with 13 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/common/MessageSummary.tsx
View File

@ -27,6 +27,7 @@ interface OwnProps {
observeIntersectionForPlaying?: ObserveFn; observeIntersectionForPlaying?: ObserveFn;
withTranslucentThumbs?: boolean; withTranslucentThumbs?: boolean;
inChatList?: boolean; inChatList?: boolean;
emojiSize?: number;
} }
function MessageSummary({ function MessageSummary({
@ -39,6 +40,7 @@ function MessageSummary({
observeIntersectionForPlaying, observeIntersectionForPlaying,
withTranslucentThumbs = false, withTranslucentThumbs = false,
inChatList = false, inChatList = false,
emojiSize,
}: OwnProps) { }: OwnProps) {
const { text, entities } = extractMessageText(message, inChatList) || {}; const { text, entities } = extractMessageText(message, inChatList) || {};
const hasSpoilers = entities?.some((e) => e.type === ApiMessageEntityTypes.Spoiler); const hasSpoilers = entities?.some((e) => e.type === ApiMessageEntityTypes.Spoiler);
@ -69,6 +71,7 @@ function MessageSummary({
withTranslucentThumbs={withTranslucentThumbs} withTranslucentThumbs={withTranslucentThumbs}
truncateLength={truncateLength} truncateLength={truncateLength}
inChatList={inChatList} inChatList={inChatList}
emojiSize={emojiSize}
/> />
); );
} }

1
src/components/middle/HeaderPinnedMessage.module.scss
View File

@ -172,6 +172,7 @@
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
margin: 0; margin: 0;
--custom-emoji-size: 1.125rem;
:global(body.is-ios) & { :global(body.is-ios) & {
font-size: 0.9375rem; font-size: 0.9375rem;

11
src/components/middle/HeaderPinnedMessage.tsx
View File

@ -4,7 +4,7 @@ import { getActions } from '../../global';
import type { ApiMessage } from '../../api/types'; import type { ApiMessage } from '../../api/types';
import { getPictogramDimensions } from '../common/helpers/mediaDimensions'; import { getPictogramDimensions, REM } from '../common/helpers/mediaDimensions';
import { import {
getMessageIsSpoiler, getMessageIsSpoiler,
getMessageMediaHash, getMessageSingleInlineButton, getMessageMediaHash, getMessageSingleInlineButton,
@ -34,6 +34,8 @@ import Spinner from '../ui/Spinner';
import styles from './HeaderPinnedMessage.module.scss'; import styles from './HeaderPinnedMessage.module.scss';
const SHOW_LOADER_DELAY = 450; const SHOW_LOADER_DELAY = 450;
const EMOJI_SIZE = 1.125 * REM;
type OwnProps = { type OwnProps = {
message: ApiMessage; message: ApiMessage;
index: number; index: number;
@ -169,7 +171,12 @@ const HeaderPinnedMessage: FC<OwnProps> = ({
</div> </div>
<Transition activeKey={message.id} name="slideVerticalFade" className={styles.messageTextTransition}> <Transition activeKey={message.id} name="slideVerticalFade" className={styles.messageTextTransition}>
<p dir="auto" className={styles.summary}> <p dir="auto" className={styles.summary}>
<MessageSummary lang={lang} message={message} noEmoji={Boolean(mediaThumbnail)} /> <MessageSummary
lang={lang}
message={message}
noEmoji={Boolean(mediaThumbnail)}
emojiSize={EMOJI_SIZE}
/>
</p> </p>
</Transition> </Transition>
</div> </div>