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

Message: Maximum width limitation for outside reactions (#2783)

Browse Source
This commit is contained in:
Alexander Zinchuk 2023-03-10 02:34:15 +01:00
parent 3e346aef53
commit 0d33dea5a6
2 changed files with 10 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/middle/message/Message.tsx
View File

@ -262,6 +262,7 @@ const APPENDIX_NOT_OWN = { __html: '<svg width="9" height="20" xmlns="http://www
const APPEARANCE_DELAY = 10; const APPEARANCE_DELAY = 10;
const NO_MEDIA_CORNERS_THRESHOLD = 18; const NO_MEDIA_CORNERS_THRESHOLD = 18;
const QUICK_REACTION_SIZE = 1.75 * REM; const QUICK_REACTION_SIZE = 1.75 * REM;
const EXTRA_SPACE_FOR_REACTIONS = 2.25 * REM;
const BOTTOM_FOCUS_SCROLL_THRESHOLD = 5; const BOTTOM_FOCUS_SCROLL_THRESHOLD = 5;
const THROTTLE_MS = 300; const THROTTLE_MS = 300;
@ -655,6 +656,7 @@ const Message: FC<OwnProps & StateProps> = ({
let style = ''; let style = '';
let calculatedWidth; let calculatedWidth;
let reactionsMaxWidth;
let noMediaCorners = false; let noMediaCorners = false;
const albumLayout = useMemo(() => { const albumLayout = useMemo(() => {
return isAlbum return isAlbum
@ -704,6 +706,7 @@ const Message: FC<OwnProps & StateProps> = ({
if (calculatedWidth) { if (calculatedWidth) {
style = `width: ${calculatedWidth + extraPadding}px`; style = `width: ${calculatedWidth + extraPadding}px`;
reactionsMaxWidth = calculatedWidth + EXTRA_SPACE_FOR_REACTIONS;
} }
const signature = (isChannel && message.postAuthorTitle) const signature = (isChannel && message.postAuthorTitle)
@ -1233,6 +1236,7 @@ const Message: FC<OwnProps & StateProps> = ({
<Reactions <Reactions
message={reactionMessage!} message={reactionMessage!}
isOutside isOutside
maxWidth={reactionsMaxWidth}
activeReactions={activeReactions} activeReactions={activeReactions}
availableReactions={availableReactions} availableReactions={availableReactions}
genericEffects={genericEffects} genericEffects={genericEffects}

7
src/components/middle/message/Reactions.tsx
View File

@ -15,6 +15,7 @@ import './Reactions.scss';
type OwnProps = { type OwnProps = {
message: ApiMessage; message: ApiMessage;
isOutside?: boolean; isOutside?: boolean;
maxWidth?: number;
activeReactions?: ActiveReaction[]; activeReactions?: ActiveReaction[];
availableReactions?: ApiAvailableReaction[]; availableReactions?: ApiAvailableReaction[];
metaChildren?: React.ReactNode; metaChildren?: React.ReactNode;
@ -28,6 +29,7 @@ const MAX_RECENT_AVATARS = 3;
const Reactions: FC<OwnProps> = ({ const Reactions: FC<OwnProps> = ({
message, message,
isOutside, isOutside,
maxWidth,
activeReactions, activeReactions,
availableReactions, availableReactions,
metaChildren, metaChildren,
@ -40,7 +42,10 @@ const Reactions: FC<OwnProps> = ({
), [message]); ), [message]);
return ( return (
<div className={buildClassName('Reactions', isOutside && 'is-outside')}> <div
className={buildClassName('Reactions', isOutside && 'is-outside')}
style={maxWidth ? `max-width: ${maxWidth}px` : undefined}
>
{message.reactions!.results.map((reaction) => ( {message.reactions!.results.map((reaction) => (
<ReactionButton <ReactionButton
key={getReactionUniqueKey(reaction.reaction)} key={getReactionUniqueKey(reaction.reaction)}