Messaage: Fixes for Context Menu, Report and Payment Modal (#5178)

This commit is contained in:
Alexander Zinchuk 2024-11-09 15:40:43 +04:00
parent 8040cee2d2
commit 7e83932c96
11 changed files with 222 additions and 215 deletions

View File

@ -0,0 +1,6 @@
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9 15L12 12V7" stroke="black" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M9.33333 19.5448C6.22615 18.4466 4 15.4833 4 12C4 7.58172 7.58172 4 12 4C15.4833 4 18.4466 6.22615 19.5448 9.33333" stroke="black" stroke-width="1.6" stroke-linecap="round"/>
<path d="M20.5286 13.1953L20.1381 12.8048C19.8777 12.5444 19.4556 12.5444 19.1953 12.8048L11.8892 20.1108C11.7429 20.2572 11.6326 20.4356 11.5671 20.632L11.1687 21.8274C11.0992 22.0359 11.2975 22.2342 11.506 22.1647L12.7014 21.7662C12.8978 21.7008 13.0762 21.5905 13.2226 21.4441L20.5286 14.1381C20.7889 13.8777 20.7889 13.4556 20.5286 13.1953Z" fill="black"/>
<path d="M22.1953 12.4714L21.8047 12.8619C21.5444 13.1223 21.1223 13.1223 20.8619 12.8619L20.4714 12.4714C20.2111 12.2111 20.2111 11.789 20.4714 11.5286L20.8619 11.1381C21.1223 10.8777 21.5444 10.8777 21.8047 11.1381L22.1953 11.5286C22.4556 11.789 22.4556 12.2111 22.1953 12.4714Z" fill="black"/>
</svg>

After

Width:  |  Height:  |  Size: 1.0 KiB

View File

@ -7,7 +7,6 @@ import { formatDateAtTime } from '../../../util/dates/dateFormat';
import useOldLang from '../../../hooks/useOldLang';
import MenuItem from '../../ui/MenuItem';
import MenuSeparator from '../../ui/MenuSeparator';
import Skeleton from '../../ui/placeholder/Skeleton';
import styles from './TimeMenuItem.module.scss';
@ -24,13 +23,10 @@ function LastEditTimeMenuItem({
const shouldRenderSkeleton = !editDate;
return (
<>
<MenuSeparator size="thick" />
<MenuItem icon="edit" className={styles.item}>
{shouldRenderSkeleton ? <Skeleton className={styles.skeleton} /> : Boolean(editDate)
&& lang('Chat.PrivateMessageEditTimestamp.Date', formatDateAtTime(lang, editDate * 1000))}
</MenuItem>
</>
<MenuItem icon="edited" className={styles.item}>
{shouldRenderSkeleton ? <Skeleton className={styles.skeleton} /> : Boolean(editDate)
&& lang('Chat.PrivateMessageEditTimestamp.Date', formatDateAtTime(lang, editDate * 1000))}
</MenuItem>
);
}

View File

@ -483,11 +483,6 @@ const MessageContextMenu: FC<OwnProps> = ({
<MenuItem icon="close-circle" onClick={onSponsoredHide}>{lang('HideAd')}</MenuItem>
</>
)}
{isEdited && (
<LastEditTimeMenuItem
message={message}
/>
)}
{(canShowSeenBy || canShowReactionsCount) && !isSponsoredMessage && (
<>
<MenuSeparator size={hasCustomEmoji ? 'thin' : 'thick'} />
@ -523,15 +518,22 @@ const MessageContextMenu: FC<OwnProps> = ({
</MenuItem>
</>
)}
{((!isSponsoredMessage && (canLoadReadDate || shouldRenderShowWhen)) || isEdited) && (
<MenuSeparator size={hasCustomEmoji ? 'thin' : 'thick'} />
)}
{!isSponsoredMessage && (canLoadReadDate || shouldRenderShowWhen) && (
<ReadTimeMenuItem
canLoadReadDate={canLoadReadDate}
shouldRenderShowWhen={shouldRenderShowWhen}
message={message}
menuSeparatorSize={hasCustomEmoji ? 'thin' : 'thick'}
closeContextMenu={onClose}
/>
)}
{isEdited && (
<LastEditTimeMenuItem
message={message}
/>
)}
</div>
</Menu>
);

View File

@ -8,7 +8,6 @@ import { formatDateAtTime } from '../../../util/dates/dateFormat';
import useOldLang from '../../../hooks/useOldLang';
import MenuItem from '../../ui/MenuItem';
import MenuSeparator from '../../ui/MenuSeparator';
import Skeleton from '../../ui/placeholder/Skeleton';
import Transition from '../../ui/Transition';
@ -18,12 +17,11 @@ type OwnProps = {
message: ApiMessage;
shouldRenderShowWhen?: boolean;
canLoadReadDate?: boolean;
menuSeparatorSize: 'thin' | 'thick';
closeContextMenu: NoneToVoidFunction;
};
function ReadTimeMenuItem({
message, shouldRenderShowWhen, canLoadReadDate, closeContextMenu, menuSeparatorSize,
message, shouldRenderShowWhen, canLoadReadDate, closeContextMenu,
}: OwnProps) {
const { openPrivacySettingsNoticeModal } = getActions();
const lang = useOldLang();
@ -36,26 +34,23 @@ function ReadTimeMenuItem({
};
return (
<>
<MenuSeparator size={menuSeparatorSize} />
<MenuItem icon="message-read" className={styles.item}>
<Transition name="fade" activeKey={shouldRenderSkeleton ? 1 : 2} className={styles.transition}>
{shouldRenderSkeleton ? <Skeleton className={styles.skeleton} /> : (
<>
{Boolean(readDate) && lang('PmReadAt', formatDateAtTime(lang, readDate * 1000))}
{!readDate && shouldRenderShowWhen && (
<div>
{lang('PmRead')}
<span className={styles.get} onClick={handleOpenModal}>
{lang('PmReadShowWhen')}
</span>
</div>
)}
</>
)}
</Transition>
</MenuItem>
</>
<MenuItem icon="message-read" className={styles.item}>
<Transition name="fade" activeKey={shouldRenderSkeleton ? 1 : 2} className={styles.transition}>
{shouldRenderSkeleton ? <Skeleton className={styles.skeleton} /> : (
<>
{Boolean(readDate) && lang('PmReadAt', formatDateAtTime(lang, readDate * 1000))}
{!readDate && shouldRenderShowWhen && (
<div>
{lang('PmRead')}
<span className={styles.get} onClick={handleOpenModal}>
{lang('PmReadShowWhen')}
</span>
</div>
)}
</>
)}
</Transition>
</MenuItem>
);
}

View File

@ -1,6 +1,7 @@
:global(.MenuItem).item {
margin-bottom: 0;
font-size: 0.8125rem;
font-weight: 400;
cursor: var(--custom-cursor, default);
pointer-events: none;
--color-skeleton-background: #2121211a;

View File

@ -24,6 +24,7 @@ import Transition, { ACTIVE_SLIDE_CLASS_NAME, TO_SLIDE_CLASS_NAME } from '../../
import styles from './ReportModal.module.scss';
const MAX_DESCRIPTION = 512;
const ADDED_PADDING = 20;
export type OwnProps = {
modal: TabState['reportModal'];
@ -138,7 +139,7 @@ const ReportModal = ({
requestMeasure(() => {
const height = slide.scrollHeight;
requestMutation(() => {
transitionRef.current!.style.height = `${height}px`;
transitionRef.current!.style.height = `${height + ADDED_PADDING}px`;
});
});
});
@ -200,10 +201,11 @@ const ReportModal = ({
<div className={styles.block}>
<AnimatedIconWithPreview
tgsUrl={LOCAL_TGS_URLS.Report}
size={150}
size={100}
className={styles.reportIcon}
nonInteractive
forceAlways
noLoop={false}
/>
<TextArea
id="option"

View File

@ -36,7 +36,7 @@ $modalHeaderAndFooterHeight: 8.375rem;
}
.Transition {
height: min(25rem, 68vh);
height: min(27rem, 68vh);
}
.empty-content {

View File

@ -98,181 +98,182 @@ $icons-map: (
"download": "\f143",
"eats": "\f144",
"edit": "\f145",
"email": "\f146",
"enter": "\f147",
"expand-modal": "\f148",
"expand": "\f149",
"eye-closed-outline": "\f14a",
"eye-closed": "\f14b",
"eye-outline": "\f14c",
"eye": "\f14d",
"favorite-filled": "\f14e",
"favorite": "\f14f",
"file-badge": "\f150",
"flag": "\f151",
"folder-badge": "\f152",
"folder": "\f153",
"fontsize": "\f154",
"forums": "\f155",
"forward": "\f156",
"fullscreen": "\f157",
"gifs": "\f158",
"gift": "\f159",
"group-filled": "\f15a",
"group": "\f15b",
"grouped-disable": "\f15c",
"grouped": "\f15d",
"hand-stop": "\f15e",
"hashtag": "\f15f",
"heart-outline": "\f160",
"heart": "\f161",
"help": "\f162",
"info-filled": "\f163",
"info": "\f164",
"install": "\f165",
"italic": "\f166",
"key": "\f167",
"keyboard": "\f168",
"lamp": "\f169",
"language": "\f16a",
"large-pause": "\f16b",
"large-play": "\f16c",
"link-badge": "\f16d",
"link-broken": "\f16e",
"link": "\f16f",
"location": "\f170",
"lock-badge": "\f171",
"lock": "\f172",
"logout": "\f173",
"loop": "\f174",
"mention": "\f175",
"message-failed": "\f176",
"message-pending": "\f177",
"message-read": "\f178",
"message-succeeded": "\f179",
"message": "\f17a",
"microphone-alt": "\f17b",
"microphone": "\f17c",
"monospace": "\f17d",
"more-circle": "\f17e",
"more": "\f17f",
"move-caption-down": "\f180",
"move-caption-up": "\f181",
"mute": "\f182",
"muted": "\f183",
"my-notes": "\f184",
"new-chat-filled": "\f185",
"next": "\f186",
"nochannel": "\f187",
"noise-suppression": "\f188",
"non-contacts": "\f189",
"one-filled": "\f18a",
"open-in-new-tab": "\f18b",
"password-off": "\f18c",
"pause": "\f18d",
"permissions": "\f18e",
"phone-discard-outline": "\f18f",
"phone-discard": "\f190",
"phone": "\f191",
"photo": "\f192",
"pin-badge": "\f193",
"pin-list": "\f194",
"pin": "\f195",
"pinned-chat": "\f196",
"pinned-message": "\f197",
"pip": "\f198",
"play-story": "\f199",
"play": "\f19a",
"poll": "\f19b",
"previous": "\f19c",
"privacy-policy": "\f19d",
"quote-text": "\f19e",
"quote": "\f19f",
"readchats": "\f1a0",
"recent": "\f1a1",
"reload": "\f1a2",
"remove-quote": "\f1a3",
"remove": "\f1a4",
"reopen-topic": "\f1a5",
"replace": "\f1a6",
"replies": "\f1a7",
"reply-filled": "\f1a8",
"reply": "\f1a9",
"revenue-split": "\f1aa",
"revote": "\f1ab",
"save-story": "\f1ac",
"saved-messages": "\f1ad",
"schedule": "\f1ae",
"search": "\f1af",
"select": "\f1b0",
"send-outline": "\f1b1",
"send": "\f1b2",
"settings-filled": "\f1b3",
"settings": "\f1b4",
"share-filled": "\f1b5",
"share-screen-outlined": "\f1b6",
"share-screen-stop": "\f1b7",
"share-screen": "\f1b8",
"show-message": "\f1b9",
"sidebar": "\f1ba",
"skip-next": "\f1bb",
"skip-previous": "\f1bc",
"smallscreen": "\f1bd",
"smile": "\f1be",
"sort": "\f1bf",
"speaker-muted-story": "\f1c0",
"speaker-outline": "\f1c1",
"speaker-story": "\f1c2",
"speaker": "\f1c3",
"spoiler-disable": "\f1c4",
"spoiler": "\f1c5",
"sport": "\f1c6",
"star": "\f1c7",
"stars-lock": "\f1c8",
"stats": "\f1c9",
"stealth-future": "\f1ca",
"stealth-past": "\f1cb",
"stickers": "\f1cc",
"stop-raising-hand": "\f1cd",
"stop": "\f1ce",
"story-caption": "\f1cf",
"story-expired": "\f1d0",
"story-priority": "\f1d1",
"story-reply": "\f1d2",
"strikethrough": "\f1d3",
"tag-add": "\f1d4",
"tag-crossed": "\f1d5",
"tag-filter": "\f1d6",
"tag-name": "\f1d7",
"tag": "\f1d8",
"timer": "\f1d9",
"toncoin": "\f1da",
"transcribe": "\f1db",
"truck": "\f1dc",
"unarchive": "\f1dd",
"underlined": "\f1de",
"unlock-badge": "\f1df",
"unlock": "\f1e0",
"unmute": "\f1e1",
"unpin": "\f1e2",
"unread": "\f1e3",
"up": "\f1e4",
"user-filled": "\f1e5",
"user-online": "\f1e6",
"user": "\f1e7",
"video-outlined": "\f1e8",
"video-stop": "\f1e9",
"video": "\f1ea",
"view-once": "\f1eb",
"voice-chat": "\f1ec",
"volume-1": "\f1ed",
"volume-2": "\f1ee",
"volume-3": "\f1ef",
"web": "\f1f0",
"webapp": "\f1f1",
"word-wrap": "\f1f2",
"zoom-in": "\f1f3",
"zoom-out": "\f1f4",
"edited": "\f146",
"email": "\f147",
"enter": "\f148",
"expand-modal": "\f149",
"expand": "\f14a",
"eye-closed-outline": "\f14b",
"eye-closed": "\f14c",
"eye-outline": "\f14d",
"eye": "\f14e",
"favorite-filled": "\f14f",
"favorite": "\f150",
"file-badge": "\f151",
"flag": "\f152",
"folder-badge": "\f153",
"folder": "\f154",
"fontsize": "\f155",
"forums": "\f156",
"forward": "\f157",
"fullscreen": "\f158",
"gifs": "\f159",
"gift": "\f15a",
"group-filled": "\f15b",
"group": "\f15c",
"grouped-disable": "\f15d",
"grouped": "\f15e",
"hand-stop": "\f15f",
"hashtag": "\f160",
"heart-outline": "\f161",
"heart": "\f162",
"help": "\f163",
"info-filled": "\f164",
"info": "\f165",
"install": "\f166",
"italic": "\f167",
"key": "\f168",
"keyboard": "\f169",
"lamp": "\f16a",
"language": "\f16b",
"large-pause": "\f16c",
"large-play": "\f16d",
"link-badge": "\f16e",
"link-broken": "\f16f",
"link": "\f170",
"location": "\f171",
"lock-badge": "\f172",
"lock": "\f173",
"logout": "\f174",
"loop": "\f175",
"mention": "\f176",
"message-failed": "\f177",
"message-pending": "\f178",
"message-read": "\f179",
"message-succeeded": "\f17a",
"message": "\f17b",
"microphone-alt": "\f17c",
"microphone": "\f17d",
"monospace": "\f17e",
"more-circle": "\f17f",
"more": "\f180",
"move-caption-down": "\f181",
"move-caption-up": "\f182",
"mute": "\f183",
"muted": "\f184",
"my-notes": "\f185",
"new-chat-filled": "\f186",
"next": "\f187",
"nochannel": "\f188",
"noise-suppression": "\f189",
"non-contacts": "\f18a",
"one-filled": "\f18b",
"open-in-new-tab": "\f18c",
"password-off": "\f18d",
"pause": "\f18e",
"permissions": "\f18f",
"phone-discard-outline": "\f190",
"phone-discard": "\f191",
"phone": "\f192",
"photo": "\f193",
"pin-badge": "\f194",
"pin-list": "\f195",
"pin": "\f196",
"pinned-chat": "\f197",
"pinned-message": "\f198",
"pip": "\f199",
"play-story": "\f19a",
"play": "\f19b",
"poll": "\f19c",
"previous": "\f19d",
"privacy-policy": "\f19e",
"quote-text": "\f19f",
"quote": "\f1a0",
"readchats": "\f1a1",
"recent": "\f1a2",
"reload": "\f1a3",
"remove-quote": "\f1a4",
"remove": "\f1a5",
"reopen-topic": "\f1a6",
"replace": "\f1a7",
"replies": "\f1a8",
"reply-filled": "\f1a9",
"reply": "\f1aa",
"revenue-split": "\f1ab",
"revote": "\f1ac",
"save-story": "\f1ad",
"saved-messages": "\f1ae",
"schedule": "\f1af",
"search": "\f1b0",
"select": "\f1b1",
"send-outline": "\f1b2",
"send": "\f1b3",
"settings-filled": "\f1b4",
"settings": "\f1b5",
"share-filled": "\f1b6",
"share-screen-outlined": "\f1b7",
"share-screen-stop": "\f1b8",
"share-screen": "\f1b9",
"show-message": "\f1ba",
"sidebar": "\f1bb",
"skip-next": "\f1bc",
"skip-previous": "\f1bd",
"smallscreen": "\f1be",
"smile": "\f1bf",
"sort": "\f1c0",
"speaker-muted-story": "\f1c1",
"speaker-outline": "\f1c2",
"speaker-story": "\f1c3",
"speaker": "\f1c4",
"spoiler-disable": "\f1c5",
"spoiler": "\f1c6",
"sport": "\f1c7",
"star": "\f1c8",
"stars-lock": "\f1c9",
"stats": "\f1ca",
"stealth-future": "\f1cb",
"stealth-past": "\f1cc",
"stickers": "\f1cd",
"stop-raising-hand": "\f1ce",
"stop": "\f1cf",
"story-caption": "\f1d0",
"story-expired": "\f1d1",
"story-priority": "\f1d2",
"story-reply": "\f1d3",
"strikethrough": "\f1d4",
"tag-add": "\f1d5",
"tag-crossed": "\f1d6",
"tag-filter": "\f1d7",
"tag-name": "\f1d8",
"tag": "\f1d9",
"timer": "\f1da",
"toncoin": "\f1db",
"transcribe": "\f1dc",
"truck": "\f1dd",
"unarchive": "\f1de",
"underlined": "\f1df",
"unlock-badge": "\f1e0",
"unlock": "\f1e1",
"unmute": "\f1e2",
"unpin": "\f1e3",
"unread": "\f1e4",
"up": "\f1e5",
"user-filled": "\f1e6",
"user-online": "\f1e7",
"user": "\f1e8",
"video-outlined": "\f1e9",
"video-stop": "\f1ea",
"video": "\f1eb",
"view-once": "\f1ec",
"voice-chat": "\f1ed",
"volume-1": "\f1ee",
"volume-2": "\f1ef",
"volume-3": "\f1f0",
"web": "\f1f1",
"webapp": "\f1f2",
"word-wrap": "\f1f3",
"zoom-in": "\f1f4",
"zoom-out": "\f1f5",
);
.icon-active-sessions::before {
@ -482,6 +483,9 @@ $icons-map: (
.icon-edit::before {
content: map.get($icons-map, "edit");
}
.icon-edited::before {
content: map.get($icons-map, "edited");
}
.icon-email::before {
content: map.get($icons-map, "email");
}

Binary file not shown.

Binary file not shown.

View File

@ -68,6 +68,7 @@ export type FontIconName =
| 'download'
| 'eats'
| 'edit'
| 'edited'
| 'email'
| 'enter'
| 'expand-modal'