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

Profile: Fix missing toast notifications on mobile (#1089)

Browse Source
This commit is contained in:
Alexander Zinchuk 2021-05-13 12:00:28 +03:00
parent b48ad9c46a
commit bf19ec22d0
3 changed files with 8 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/middle/message/Poll.tsx
View File

@ -42,6 +42,7 @@ type StateProps = {
type DispatchProps = Pick<GlobalActions, ('loadMessage' | 'openPollResults')>; type DispatchProps = Pick<GlobalActions, ('loadMessage' | 'openPollResults')>;
const SOLUTION_CONTAINER_ID = '#middle-column-portals';
const SOLUTION_DURATION = 5000; const SOLUTION_DURATION = 5000;
const NBSP = '\u00A0'; const NBSP = '\u00A0';
@ -248,6 +249,7 @@ const Poll: FC<OwnProps & StateProps & DispatchProps> = ({
message={renderTextWithEntities(poll.results.solution, poll.results.solutionEntities)} message={renderTextWithEntities(poll.results.solution, poll.results.solutionEntities)}
duration={SOLUTION_DURATION} duration={SOLUTION_DURATION}
onDismiss={handleSolutionHide} onDismiss={handleSolutionHide}
containerId={SOLUTION_CONTAINER_ID}
/> />
) )
); );

7
src/components/ui/Notification.tsx
View File

@ -18,6 +18,7 @@ import Portal from './Portal';
import './Notification.scss'; import './Notification.scss';
type OwnProps = { type OwnProps = {
containerId?: string;
message: TextPart[]; message: TextPart[];
duration?: number; duration?: number;
onDismiss: () => void; onDismiss: () => void;
@ -26,7 +27,9 @@ type OwnProps = {
const DEFAULT_DURATION = 3000; const DEFAULT_DURATION = 3000;
const ANIMATION_DURATION = 150; const ANIMATION_DURATION = 150;
const Notification: FC<OwnProps> = ({ message, duration = DEFAULT_DURATION, onDismiss }) => { const Notification: FC<OwnProps> = ({
message, duration = DEFAULT_DURATION, containerId, onDismiss,
}) => {
const [isOpen, setIsOpen] = useState(true); const [isOpen, setIsOpen] = useState(true);
// eslint-disable-next-line no-null/no-null // eslint-disable-next-line no-null/no-null
const timerRef = useRef<number | undefined>(null); const timerRef = useRef<number | undefined>(null);
@ -63,7 +66,7 @@ const Notification: FC<OwnProps> = ({ message, duration = DEFAULT_DURATION, onDi
}, [duration, closeAndDismiss]); }, [duration, closeAndDismiss]);
return ( return (
<Portal className="Notification-container" containerId="#middle-column-portals"> <Portal className="Notification-container" containerId={containerId}>
<div <div
className={buildClassName('Notification', transitionClassNames)} className={buildClassName('Notification', transitionClassNames)}
onClick={closeAndDismiss} onClick={closeAndDismiss}

2
src/styles/_variables.scss
View File

@ -164,13 +164,13 @@ $color-user-8: #faa774;
} }
--z-ui-loader-mask: 2000; --z-ui-loader-mask: 2000;
--z-notification: 1000;
--z-right-column: 900; --z-right-column: 900;
--z-header-menu: 990; --z-header-menu: 990;
--z-header-menu-backdrop: 980; --z-header-menu-backdrop: 980;
--z-modal: 1000; --z-modal: 1000;
--z-media-viewer: 1500; --z-media-viewer: 1500;
--z-drop-area: 55; --z-drop-area: 55;
--z-notification: 50;
--z-animation-fade: 50; --z-animation-fade: 50;
--z-menu-bubble: 21; --z-menu-bubble: 21;
--z-menu-backdrop: 20; --z-menu-backdrop: 20;