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

Last Seen: Fix adaptive width (#3547)

Browse Source
This commit is contained in:
Alexander Zinchuk 2023-07-20 15:58:09 +02:00
parent 7dd9c2e677
commit 9c994773b9
3 changed files with 32 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/common/AvatarList.tsx
View File

@ -14,17 +14,19 @@ import styles from './AvatarList.module.scss';
type OwnProps = { type OwnProps = {
size: AvatarSize; size: AvatarSize;
peers?: (ApiUser | ApiChat)[]; peers?: (ApiUser | ApiChat)[];
className?: string;
}; };
const AvatarList: FC<OwnProps> = ({ const AvatarList: FC<OwnProps> = ({
peers, peers,
size, size,
className,
}) => { }) => {
const lang = useLang(); const lang = useLang();
return ( return (
<div <div
className={buildClassName(styles.root, styles[`size-${size}`])} className={buildClassName(className, styles.root, styles[`size-${size}`])}
dir={lang.isRtl ? 'rtl' : 'ltr'} dir={lang.isRtl ? 'rtl' : 'ltr'}
> >
{peers?.map((peer) => <Avatar size={size} peer={peer} className={styles.avatar} />)} {peers?.map((peer) => <Avatar size={size} peer={peer} className={styles.avatar} />)}

25
src/components/middle/message/MessageContextMenu.scss
View File

@ -46,31 +46,24 @@
touch-action: none; touch-action: none;
} }
&--seen-by { &--seen-by-label-wrapper {
width: 14rem !important; position: relative;
flex-grow: 1;
} }
&--seen-by-label { &--seen-by-label {
max-width: 100%; position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
right: 0;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
text-align: initial;
} }
.avatars { .avatars {
display: flex;
align-self: center;
margin-inline-start: auto;
padding-inline-start: 1rem; padding-inline-start: 1rem;
.Avatar {
border: 0.0625rem solid var(--color-background);
margin-right: 0;
box-sizing: content-box;
&:not(:first-child) {
margin-left: -0.1875rem;
}
}
} }
} }

46
src/components/middle/message/MessageContextMenu.tsx
View File

@ -33,8 +33,8 @@ import Menu from '../../ui/Menu';
import MenuItem from '../../ui/MenuItem'; import MenuItem from '../../ui/MenuItem';
import MenuSeparator from '../../ui/MenuSeparator'; import MenuSeparator from '../../ui/MenuSeparator';
import Skeleton from '../../ui/Skeleton'; import Skeleton from '../../ui/Skeleton';
import Avatar from '../../common/Avatar';
import ReactionSelector from './ReactionSelector'; import ReactionSelector from './ReactionSelector';
import AvatarList from '../../common/AvatarList';
import './MessageContextMenu.scss'; import './MessageContextMenu.scss';
@ -389,36 +389,30 @@ const MessageContextMenu: FC<OwnProps> = ({
{canReport && <MenuItem icon="flag" onClick={onReport}>{lang('lng_context_report_msg')}</MenuItem>} {canReport && <MenuItem icon="flag" onClick={onReport}>{lang('lng_context_report_msg')}</MenuItem>}
{(canShowSeenBy || canShowReactionsCount) && !isSponsoredMessage && ( {(canShowSeenBy || canShowReactionsCount) && !isSponsoredMessage && (
<MenuItem <MenuItem
className="MessageContextMenu--seen-by"
icon={canShowReactionsCount ? 'heart-outline' : 'group'} icon={canShowReactionsCount ? 'heart-outline' : 'group'}
onClick={canShowReactionsCount ? onShowReactors : onShowSeenBy} onClick={canShowReactionsCount ? onShowReactors : onShowSeenBy}
disabled={!canShowReactionsCount && !seenByDatesCount} disabled={!canShowReactionsCount && !seenByDatesCount}
> >
<span className="MessageContextMenu--seen-by-label"> <span className="MessageContextMenu--seen-by-label-wrapper">
{canShowReactionsCount && message.reactors?.count ? ( <span className="MessageContextMenu--seen-by-label" dir={lang.isRtl ? 'rtl' : undefined}>
canShowSeenBy && seenByDatesCount {canShowReactionsCount && message.reactors?.count ? (
? lang( canShowSeenBy && seenByDatesCount
'Chat.OutgoingContextMixedReactionCount', ? lang(
[message.reactors.count, seenByDatesCount], 'Chat.OutgoingContextMixedReactionCount',
) [message.reactors.count, seenByDatesCount],
: lang('Chat.ContextReactionCount', message.reactors.count, 'i') )
) : ( : lang('Chat.ContextReactionCount', message.reactors.count, 'i')
seenByDatesCount === 1 && seenByRecentUsers ) : (
? renderText(getUserFullName(seenByRecentUsers[0])!) seenByDatesCount === 1 && seenByRecentUsers
: (seenByDatesCount ? renderText(getUserFullName(seenByRecentUsers[0] as ApiUser)!) : (
? lang('Conversation.ContextMenuSeen', seenByDatesCount, 'i') seenByDatesCount
: lang('Conversation.ContextMenuNoViews') ? lang('Conversation.ContextMenuSeen', seenByDatesCount, 'i')
) : lang('Conversation.ContextMenuNoViews')
)} )
)}
</span>
</span> </span>
<div className="avatars"> <AvatarList className="avatars" size="micro" peers={seenByRecentUsers} />
{seenByRecentUsers?.map((user) => (
<Avatar
size="micro"
peer={user}
/>
))}
</div>
</MenuItem> </MenuItem>
)} )}
{canDelete && <MenuItem destructive icon="delete" onClick={onDelete}>{lang('Delete')}</MenuItem>} {canDelete && <MenuItem destructive icon="delete" onClick={onDelete}>{lang('Delete')}</MenuItem>}