Added native menu support in desktop mode. #5503

This commit is contained in:
Nikhil Mohite
2022-12-06 18:16:36 +05:30
committed by GitHub
parent cddb24bc50
commit 2480d08e0f
78 changed files with 1126 additions and 523 deletions

View File

@@ -263,7 +263,7 @@ export const useModalStyles = makeStyles((theme) => ({
}
}));
function ModalContainer({ id, title, content, dialogHeight, dialogWidth, onClose, fullScreen = false, isFullWidth = false, showFullScreen = false, isResizeable = false, minHeight = MIN_HEIGHT, minWidth = MIN_WIDTH }) {
function ModalContainer({ id, title, content, dialogHeight, dialogWidth, onClose, fullScreen = false, isFullWidth = false, showFullScreen = false, isResizeable = false, minHeight = MIN_HEIGHT, minWidth = MIN_WIDTH, showTitle=true }) {
let useModalRef = useModal();
const classes = useModalStyles();
let closeModal = (_e, reason) => {
@@ -282,24 +282,27 @@ function ModalContainer({ id, title, content, dialogHeight, dialogWidth, onClose
PaperProps={{ 'isfullscreen': isfullScreen.toString(), 'isresizeable': isResizeable.toString(), width: dialogWidth, height: dialogHeight, minHeight: minHeight, minWidth: minWidth }}
fullScreen={isfullScreen}
fullWidth={isFullWidth}
disableBackdropClick
disableBackdropClick={showTitle}
disablePortal
>
<DialogTitle className='modal-drag-area'>
<Box className={classes.titleBar}>
<Box className={classes.title} marginRight="0.25rem" >{title}</Box>
{
showFullScreen && !isfullScreen &&
<Box className={classes.iconButtonStyle}><PgIconButton title={gettext('Maximize')} icon={<ExpandDialogIcon className={classes.icon} />} size="xs" noBorder onClick={() => { setIsFullScreen(!isfullScreen); }} /></Box>
}
{
showFullScreen && isfullScreen &&
<Box className={classes.iconButtonStyle}><PgIconButton title={gettext('Minimize')} icon={<MinimizeDialogIcon className={classes.icon} />} size="xs" noBorder onClick={() => { setIsFullScreen(!isfullScreen); }} /></Box>
}
{ showTitle && <>
<DialogTitle className='modal-drag-area'>
<Box className={classes.titleBar}>
<Box className={classes.title} marginRight="0.25rem" >{title}</Box>
{
showFullScreen && !isfullScreen &&
<Box className={classes.iconButtonStyle}><PgIconButton title={gettext('Maximize')} icon={<ExpandDialogIcon className={classes.icon} />} size="xs" noBorder onClick={() => { setIsFullScreen(!isfullScreen); }} /></Box>
}
{
showFullScreen && isfullScreen &&
<Box className={classes.iconButtonStyle}><PgIconButton title={gettext('Minimize')} icon={<MinimizeDialogIcon className={classes.icon} />} size="xs" noBorder onClick={() => { setIsFullScreen(!isfullScreen); }} /></Box>
}
<Box marginLeft="auto"><PgIconButton title={gettext('Close')} icon={<CloseIcon />} size="xs" noBorder onClick={closeModal} /></Box>
</Box>
</DialogTitle>
<Box marginLeft="auto"><PgIconButton title={gettext('Close')} icon={<CloseIcon />} size="xs" noBorder onClick={closeModal} /></Box>
</Box>
</DialogTitle>
</>
}
<DialogContent height="100%">
{useMemo(()=>{ return content(closeModal); }, [])}
</DialogContent>
@@ -320,4 +323,5 @@ ModalContainer.propTypes = {
onClose: PropTypes.func,
minWidth: PropTypes.number,
minHeight: PropTypes.number,
showTitle: PropTypes.bool,
};

View File

@@ -150,6 +150,10 @@
top: $navbar-height !important;
}
.pg-docker-native {
top: 0px !important
}
.pg-panel-content {
position:absolute;
top:0px;