toeverything/AFFiNE
1
1
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2024-11-25 22:22:56 +03:00
Code Issues Packages Projects Releases Wiki Activity

fix: center toast in main content (#1683)

Browse Source
This commit is contained in:
Qi 2023-03-25 01:22:10 +08:00 committed by GitHub
parent 40903a9070
commit 6d13716e97
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 10 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/web/src/layouts/index.tsx
View File

@ -201,7 +201,7 @@ export const WorkspaceLayoutInner: React.FC<React.PropsWithChildren> = ({
currentPath={router.asPath}
paths={isPublicWorkspace ? publicPathGenerator : pathGenerator}
/>
<StyledWrapper>
<StyledWrapper className="main-container">
<AffineWorkspaceEffect />
{children}
<StyledToolWrapper>

14
packages/component/src/ui/toast/toast.ts
View File

@ -24,9 +24,9 @@ const htmlToElement = <T extends ChildNode>(html: string | TemplateResult) => {
return template.content.firstChild as T;
};
const createToastContainer = () => {
const createToastContainer = (portalQuery?: string) => {
const styles = css`
position: fixed;
position: absolute;
z-index: 9999;
top: 16px;
left: 16px;
@ -39,12 +39,14 @@ const createToastContainer = () => {
`;
const template = html`<div style="${styles}"></div>`;
const element = htmlToElement<HTMLDivElement>(template);
document.body.appendChild(element);
const portal = portalQuery && document.querySelector(portalQuery);
(portal || document.body).appendChild(element);
return element;
};
export type ToastOptions = {
duration: number;
portalQuery?: string;
};
/**
@ -55,10 +57,12 @@ export type ToastOptions = {
*/
export const toast = (
message: string,
{ duration }: ToastOptions = { duration: 2500 }
{ duration, portalQuery = '.main-container' }: ToastOptions = {
duration: 2500,
}
) => {
if (!ToastContainer) {
ToastContainer = createToastContainer();
ToastContainer = createToastContainer(portalQuery);
}
const styles = css`