beenull/ente
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Dialog redesign (#996)

Browse source
This commit is contained in:
Abhinav Kumar 2023-03-29 13:02:43 +05:30 committed by GitHub
parent 49fb33513c b03907deca
commit 6de23f25a0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 187 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

126
src/components/DialogBoxV2/index.tsx Normal file
View file

@ -0,0 +1,126 @@
import React from 'react';
import {
Box,
Breakpoint,
Button,
Dialog,
DialogProps,
Stack,
Typography,
} from '@mui/material';
import { t } from 'i18next';
import { dialogCloseHandler } from 'components/DialogBox/TitleWithCloseButton';
import { DialogBoxAttributesV2 } from 'types/dialogBox';
type IProps = React.PropsWithChildren<
Omit<DialogProps, 'onClose' | 'maxSize'> & {
onClose: () => void;
attributes: DialogBoxAttributesV2;
size?: Breakpoint;
titleCloseButton?: boolean;
}
>;
export default function DialogBoxV2({
attributes,
children,
open,
onClose,
...props
}: IProps) {
if (!attributes) {
return <></>;
}
const handleClose = dialogCloseHandler({
staticBackdrop: attributes.staticBackdrop,
nonClosable: attributes.nonClosable,
onClose: onClose,
});
return (
<Dialog
open={open}
onClose={handleClose}
{...props}
PaperProps={{
sx: {
padding: '8px 12px',
maxWidth: '360px',
},
}}>
<Stack spacing={'36px'} p={'16px'}>
<Stack spacing={'19px'}>
{attributes.icon && (
<Box
sx={{
'& > svg': {
fontSize: '32px',
},
}}>
{attributes.icon}
</Box>
)}
{attributes.title && (
<Typography variant="h4" fontWeight={'bold'}>
{attributes.title}
</Typography>
)}
{children ||
(attributes?.content && (
<Typography color="text.secondary">
{attributes.content}
</Typography>
))}
</Stack>
<Stack
spacing={'8px'}
direction={
attributes.buttonDirection === 'row'
? 'row-reverse'
: 'column'
}
flex={1}>
{attributes.proceed && (
<Button
size="large"
color={attributes.proceed?.variant}
onClick={() => {
attributes.proceed.action();
onClose();
}}
disabled={attributes.proceed.disabled}>
{attributes.proceed.text}
</Button>
)}
{attributes.close && (
<Button
size="large"
color={attributes.close?.variant ?? 'secondary'}
onClick={() => {
attributes.close.action &&
attributes.close?.action();
onClose();
}}>
{attributes.close?.text ?? t('OK')}
</Button>
)}
{attributes.buttons &&
attributes.buttons.map((b) => (
<Button
size="large"
key={b.text}
color={b.variant}
onClick={() => {
b.action();
onClose();
}}
disabled={b.disabled}>
{b.text}
</Button>
))}
</Stack>
</Stack>
</Dialog>
);
}

24
src/pages/_app.tsx
View file

@ -25,7 +25,11 @@ import { styled, ThemeProvider } from '@mui/material/styles';
import darkThemeOptions from 'themes/darkThemeOptions';
import lightThemeOptions from 'themes/lightThemeOptions';
import { CssBaseline, useMediaQuery } from '@mui/material';
import { SetDialogBoxAttributes, DialogBoxAttributes } from 'types/dialogBox';
import {
SetDialogBoxAttributes,
DialogBoxAttributes,
DialogBoxAttributesV2,
} from 'types/dialogBox';
import {
getFamilyPortalRedirectURL,
getRoadmapRedirectURL,
@ -57,6 +61,7 @@ import { setupI18n } from 'i18n';
import createEmotionCache from 'themes/createEmotionCache';
import { CacheProvider, EmotionCache } from '@emotion/react';
import { AppProps } from 'next/app';
import DialogBoxV2 from 'components/DialogBoxV2';
export const MessageContainer = styled('div')`
background-color: #111;
@ -95,6 +100,7 @@ type AppContextType = {
theme: THEME_COLOR;
setTheme: SetTheme;
somethingWentWrong: () => void;
setDialogBoxAttributesV2: (attributes: DialogBoxAttributesV2) => void;
};
export enum FLASH_MESSAGE_TYPE {
@ -144,7 +150,11 @@ export default function App(props) {
const isLoadingBarRunning = useRef(false);
const loadingBar = useRef(null);
const [dialogMessage, setDialogMessage] = useState<DialogBoxAttributes>();
const [dialogBoxAttributeV2, setDialogBoxAttributesV2] =
useState<DialogBoxAttributesV2>();
useState<DialogBoxAttributes>(null);
const [messageDialogView, setMessageDialogView] = useState(false);
const [dialogBoxV2View, setDialogBoxV2View] = useState(false);
const [isFolderSyncRunning, setIsFolderSyncRunning] = useState(false);
const [watchFolderView, setWatchFolderView] = useState(false);
const [watchFolderFiles, setWatchFolderFiles] = useState<FileList>(null);
@ -294,6 +304,10 @@ export default function App(props) {
setMessageDialogView(true);
}, [dialogMessage]);
useEffect(() => {
setDialogBoxV2View(true);
}, [dialogBoxV2View]);
useEffect(() => {
setNotificationView(true);
}, [notificationAttributes]);
@ -327,6 +341,7 @@ export default function App(props) {
};
const closeMessageDialog = () => setMessageDialogView(false);
const closeDialogBoxV2 = () => setDialogBoxV2View(false);
const somethingWentWrong = () =>
setDialogMessage({
@ -385,6 +400,12 @@ export default function App(props) {
onClose={closeMessageDialog}
attributes={dialogMessage}
/>
<DialogBoxV2
sx={{ zIndex: 1600 }}
open={dialogBoxV2View}
onClose={closeDialogBoxV2}
attributes={dialogBoxAttributeV2}
/>
<Notification
open={notificationView}
onClose={closeNotification}
@ -416,6 +437,7 @@ export default function App(props) {
theme,
setTheme,
somethingWentWrong,
setDialogBoxAttributesV2,
}}>
{loading || !isI18nReady ? (
<VerticallyCentered>

2
src/themes/darkThemeOptions.tsx
View file

@ -180,7 +180,7 @@ const darkThemeOptions = createTheme({
},
styleOverrides: {
root: {
padding: '12px 16px',
padding: '14px 16px',
borderRadius: '4px',
},
startIcon: {

38
src/types/dialogBox/index.ts
View file

@ -14,7 +14,7 @@ export interface DialogBoxAttributes {
proceed?: {
text: string;
action: () => void;
variant: ButtonProps['color'];
variant?: ButtonProps['color'];
disabled?: boolean;
};
secondary?: {
@ -28,3 +28,39 @@ export interface DialogBoxAttributes {
export type SetDialogBoxAttributes = React.Dispatch<
React.SetStateAction<DialogBoxAttributes>
>;
export interface DialogBoxAttributesV2 {
icon?: React.ReactNode;
title?: string;
staticBackdrop?: boolean;
nonClosable?: boolean;
content?: any;
close?: {
text?: string;
variant?: ButtonProps['color'];
action?: () => void;
};
proceed?: {
text: string;
action: () => void;
variant?: ButtonProps['color'];
disabled?: boolean;
};
secondary?: {
text: string;
action: () => void;
variant?: ButtonProps['color'];
disabled?: boolean;
};
buttons?: {
text: string;
action: () => void;
variant: ButtonProps['color'];
disabled?: boolean;
}[];
buttonDirection?: 'row' | 'column';
}
export type SetDialogBoxAttributesV2 = React.Dispatch<
React.SetStateAction<DialogBoxAttributesV2>
>;