Merge version update close buttons into one

Suwayomi · May 2, 2024 · 61b43b8 · 61b43b8
1 parent e54a980
commit 61b43b8
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 34 deletions.
diff --git a/src/components/util/ServerUpdateChecker.tsx b/src/components/util/ServerUpdateChecker.tsx
@@ -14,6 +14,9 @@ import Button from '@mui/material/Button';
 import DialogContentText from '@mui/material/DialogContentText';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import PopupState, { bindMenu, bindTrigger } from 'material-ui-popup-state';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
 import { getVersion } from '@/screens/settings/About.tsx';
 import { useUpdateChecker } from '@/util/useUpdateChecker.tsx';
@@ -78,22 +81,33 @@ export const ServerUpdateChecker = () => {
                 </DialogContentText>
             </DialogContent>
             <DialogActions>
-                <Button
-                    onClick={() => {
-                        updateChecker.remindLater();
-                        handleClose();
-                    }}
-                >
-                    {t('global.button.remind_later')}
-                </Button>
-                <Button
-                    onClick={() => {
-                        updateChecker.ignoreUpdate();
-                        handleClose();
-                    }}
-                >
-                    {t('global.button.ignore')}
-                </Button>
+                <PopupState variant="popover" popupId="server-update-checker-close-menu">
+                    {(popupState) => (
+                        <>
+                            <Button {...bindTrigger(popupState)}>{t('global.label.close')}</Button>
+                            <Menu {...bindMenu(popupState)}>
+                                <MenuItem
+                                    onClick={() => {
+                                        updateChecker.remindLater();
+                                        popupState.close();
+                                        handleClose();
+                                    }}
+                                >
+                                    {t('global.button.remind_later')}
+                                </MenuItem>
+                                <MenuItem
+                                    onClick={() => {
+                                        updateChecker.ignoreUpdate();
+                                        popupState.close();
+                                        handleClose();
+                                    }}
+                                >
+                                    {t('global.button.ignore')}
+                                </MenuItem>
+                            </Menu>
+                        </>
+                    )}
+                </PopupState>
                 <Button onClick={handleClose} variant="contained" href={selectedServerChannelInfo.url} target="_blank">
                     {t('chapter.action.download.add.label.action')}
                 </Button>

diff --git a/src/components/util/WebUIUpdateChecker.tsx b/src/components/util/WebUIUpdateChecker.tsx
@@ -15,6 +15,9 @@ import DialogContentText from '@mui/material/DialogContentText';
 import DialogActions from '@mui/material/DialogActions';
 import Button from '@mui/material/Button';
 import Stack from '@mui/material/Stack';
+import PopupState, { bindMenu, bindTrigger } from 'material-ui-popup-state';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
 import { defaultPromiseErrorHandler } from '@/util/defaultPromiseErrorHandler.ts';
 import { UpdateState, WebUiChannel, WebUiUpdateStatus } from '@/lib/graphql/generated/graphql.ts';
 import { useLocalStorage } from '@/util/useStorage.tsx';
@@ -131,24 +134,33 @@ export const WebUIUpdateChecker = () => {
                             {t('global.button.changelog')}
                         </Button>
                         <Stack direction="row">
-                            <Button
-                                disabled={isUpdateInProgress}
-                                onClick={() => {
-                                    updateChecker.remindLater();
-                                    setOpen(false);
-                                }}
-                            >
-                                {t('global.button.remind_later')}
-                            </Button>
-                            <Button
-                                disabled={isUpdateInProgress}
-                                onClick={() => {
-                                    updateChecker.ignoreUpdate();
-                                    setOpen(false);
-                                }}
-                            >
-                                {t('global.button.ignore')}
-                            </Button>
+                            <PopupState variant="popover" popupId="webui-update-checker-close-menu">
+                                {(popupState) => (
+                                    <>
+                                        <Button {...bindTrigger(popupState)}>{t('global.label.close')}</Button>
+                                        <Menu {...bindMenu(popupState)}>
+                                            <MenuItem
+                                                onClick={() => {
+                                                    updateChecker.remindLater();
+                                                    popupState.close();
+                                                    setOpen(false);
+                                                }}
+                                            >
+                                                {t('global.button.remind_later')}
+                                            </MenuItem>
+                                            <MenuItem
+                                                onClick={() => {
+                                                    updateChecker.ignoreUpdate();
+                                                    popupState.close();
+                                                    setOpen(false);
+                                                }}
+                                            >
+                                                {t('global.button.ignore')}
+                                            </MenuItem>
+                                        </Menu>
+                                    </>
+                                )}
+                            </PopupState>
                             <Button
                                 disabled={isUpdateInProgress}
                                 onClick={() => {