toeverything/AFFiNE
1
1
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2024-11-26 01:43:01 +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} currentPath={router.asPath}
paths={isPublicWorkspace ? publicPathGenerator : pathGenerator} paths={isPublicWorkspace ? publicPathGenerator : pathGenerator}
/> />
<StyledWrapper> <StyledWrapper className="main-container">
<AffineWorkspaceEffect /> <AffineWorkspaceEffect />
{children} {children}
<StyledToolWrapper> <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; return template.content.firstChild as T;
}; };
const createToastContainer = () => { const createToastContainer = (portalQuery?: string) => {
const styles = css` const styles = css`
position: fixed; position: absolute;
z-index: 9999; z-index: 9999;
top: 16px; top: 16px;
left: 16px; left: 16px;
@ -39,12 +39,14 @@ const createToastContainer = () => {
`; `;
const template = html`<div style="${styles}"></div>`; const template = html`<div style="${styles}"></div>`;
const element = htmlToElement<HTMLDivElement>(template); const element = htmlToElement<HTMLDivElement>(template);
document.body.appendChild(element); const portal = portalQuery && document.querySelector(portalQuery);
(portal || document.body).appendChild(element);
return element; return element;
}; };
export type ToastOptions = { export type ToastOptions = {
duration: number; duration: number;
portalQuery?: string;
}; };
/** /**
@ -55,10 +57,12 @@ export type ToastOptions = {
*/ */
export const toast = ( export const toast = (
message: string, message: string,
{ duration }: ToastOptions = { duration: 2500 } { duration, portalQuery = '.main-container' }: ToastOptions = {
duration: 2500,
}
) => { ) => {
if (!ToastContainer) { if (!ToastContainer) {
ToastContainer = createToastContainer(); ToastContainer = createToastContainer(portalQuery);
} }
const styles = css` const styles = css`