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

Message Modal: Fix spacing in the Delete Message Modal (#4903)

Browse Source
This commit is contained in:
Alexander Zinchuk 2024-08-29 15:52:47 +02:00
parent 53ef4deaa3
commit 005a6fca93
4 changed files with 26 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/common/DeleteMessageModal.module.scss
View File

@ -13,6 +13,10 @@
margin: 0;
}
.singleTitle {
margin-bottom: 1rem;
}
.actionTitle {
margin-top: 1.5rem;
margin-left: 1rem;

11
src/components/common/DeleteMessageModal.tsx
View File

@ -129,6 +129,8 @@ const DeleteMessageModal: FC<OwnProps & StateProps> = ({
return user && user.id !== currentUserId;
}, [user, currentUserId]);
const shouldShowOptions = shouldShowAdditionalOptions && !canDeleteForAll && !isSchedule && (isGroup || isSuperGroup);
const userName = useMemo(() => {
const usersById = getGlobal().users.byId;
if (!sender || isSchedule) return '';
@ -294,15 +296,14 @@ const DeleteMessageModal: FC<OwnProps & StateProps> = ({
function renderHeader() {
return (
<div className={styles.container} dir={lang.isRtl ? 'rtl' : undefined}>
{(shouldShowAdditionalOptions && !canDeleteForAll && !isSchedule) && (
<div className={shouldShowOptions && styles.container} dir={lang.isRtl ? 'rtl' : undefined}>
{shouldShowOptions && (
<Avatar
size="small"
peer={user!}
/>
)}
<h3 className={styles.title}>{lang('DeleteSingleMessagesTitle')}
</h3>
<h3 className={shouldShowOptions ? styles.title : styles.singleTitle}>{lang('DeleteSingleMessagesTitle')}</h3>
</div>
);
}
@ -365,7 +366,7 @@ const DeleteMessageModal: FC<OwnProps & StateProps> = ({
>
<div className={buildClassName(styles.mainContainer, 'custom-scroll')}>
{renderHeader()}
{(shouldShowAdditionalOptions && !canDeleteForAll && !isSchedule && (isGroup || isSuperGroup)) && (
{shouldShowOptions && (
<>
<p className={styles.actionTitle}>{lang('DeleteAdditionalActions')}</p>
{renderAdditionalActionOptions()}

4
src/components/middle/DeleteSelectedMessageModal.module.scss
View File

@ -13,6 +13,10 @@
margin: 0;
}
.singleTitle {
margin-bottom: 1rem;
}
.actionTitle {
margin-top: 1.5rem;
margin-left: 1rem;

19
src/components/middle/DeleteSelectedMessageModal.tsx
View File

@ -155,6 +155,8 @@ const DeleteSelectedMessageModal: FC<OwnProps & StateProps> = ({
return !userList.some((user) => user.id === currentUserId);
}, [userList, currentUserId]);
const shouldShowOptions = showAdditionalOptions && !canDeleteForAll && !isSchedule && (isGroup || isSuperGroup);
const userNames = useMemo(() => {
const usersById = getGlobal().users.byId;
if (!senderList || isSchedule) return {};
@ -162,7 +164,7 @@ const DeleteSelectedMessageModal: FC<OwnProps & StateProps> = ({
const uniqueUserIds = new Set(senderList.map((user) => user!.id));
const userIds = Array.from(uniqueUserIds).map((userId) => usersById[userId]);
return buildCollectionByCallback(userIds, (user) => [user.id, getUserFullName(user)]);
return buildCollectionByCallback(userIds, (user) => [user?.id, getUserFullName(user)]);
}, [isSchedule, senderList]);
const ACTION_SPAM_OPTION: IRadioOption[] = useMemo(() => {
@ -247,8 +249,7 @@ const DeleteSelectedMessageModal: FC<OwnProps & StateProps> = ({
const handleDeleteMessageForSelf = useLastCallback(() => {
if (isSchedule) {
deleteScheduledMessages({ messageIds: selectedMessageIds! });
} else if (!isSenderOwner
&& (chosenSpanOption || chosenDeleteOption || chosenBanOption) && (isGroup || isSuperGroup)) {
} else if (!isSenderOwner && shouldShowOptions) {
if (chosenSpanOption) {
const userIdList = chosenSpanOption.filter((option) => !Number.isNaN(Number(option)));
const filteredMessageIdList = filterMessageIdByUserId(userIdList, selectedMessageIds!);
@ -319,14 +320,18 @@ const DeleteSelectedMessageModal: FC<OwnProps & StateProps> = ({
function renderHeader() {
return (
<div className={styles.container} dir={oldLang.isRtl ? 'rtl' : undefined}>
{(showAdditionalOptions && !canDeleteForAll && !isSchedule) && (
<div
className={shouldShowOptions && styles.container}
dir={oldLang.isRtl ? 'rtl' : undefined}
>
{shouldShowOptions && (
<AvatarList
size="small"
peers={userList}
/>
)}
<h3 className={styles.title}>{oldLang('Chat.DeleteMessagesConfirmation', selectedMessageIds?.length)}
<h3 className={buildClassName(shouldShowOptions ? styles.title : styles.singleTitle)}>
{oldLang('Chat.DeleteMessagesConfirmation', selectedMessageIds?.length)}
</h3>
</div>
);
@ -395,7 +400,7 @@ const DeleteSelectedMessageModal: FC<OwnProps & StateProps> = ({
<div className={styles.main}>
{renderHeader()}
{!showAdditionalOptions && <p>{lang('AreYouSureDeleteFewMessages')}</p>}
{(showAdditionalOptions && !canDeleteForAll && !isSchedule && (isGroup || isSuperGroup)) && (
{shouldShowOptions && (
<>
<p className={styles.actionTitle}>{oldLang('DeleteAdditionalActions')}</p>
{renderAdditionalActionOptions()}