alex
/
PNSPS-frontend-MaterialUI
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

update index popup

New_Enhancement
Alex Cheung 1 month ago
parent
a1cd8c52d6
commit
81bfb54021
8 changed files with 138 additions and 89 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      src/assets/images/2025_lgce.jpg
  2. +13
    -17
      src/pages/GazetteIssue/index.js
  3. +21
    -26
      src/pages/Holiday/index.js
  4. +11
    -17
      src/pages/Proof/Create_FromApp/ProofForm.js
  5. +84
    -26
      src/pages/authentication/AuthWrapper.js
  6. +3
    -1
      src/translations/en.json
  7. +3
    -1
      src/translations/zh-CN.json
  8. +3
    -1
      src/translations/zh-HK.json

BIN
src/assets/images/2025_lgce.jpg View File

Before After
Width: 3840  |  Height: 2160  |  Size: 631 KiB

+ 13
- 17
src/pages/GazetteIssue/index.js View File

@@ -197,29 +197,25 @@ const Index = () => {
<Grid item xs={12} md={12} lg={6} width="100%"> <Grid item xs={12} md={12} lg={6} width="100%">
<Stack direction="row" justifyContent="flex-start" alignItems="center" spacing={2} sx={{ml:2,mt:1}} > <Stack direction="row" justifyContent="flex-start" alignItems="center" spacing={2} sx={{ml:2,mt:1}} >
<ThemeProvider theme={PNSPS_LONG_BUTTON_THEME}> <ThemeProvider theme={PNSPS_LONG_BUTTON_THEME}>
<input
<Button
component="label"
variant="contained"
size="large"
disabled={waitImport}
>
<Typography variant="h5">Upload Files</Typography>
<input
id="uploadFileBtn" id="uploadFileBtn"
name="file" name="file"
type="file" type="file"
accept=".xlsx" accept=".xlsx"
style={{ display: 'none' }}
hidden
disabled={waitImport} disabled={waitImport}
onChange={(event) => {
readFile(event)
}}
/>
<label htmlFor="uploadFileBtn">
<Button
component="span"
variant="contained"
size="large"
disabled={waitImport}
>
<Typography variant="h5">Upload Files</Typography>
</Button>
</label>
onChange={readFile}
aria-label="Upload Excel file (.xlsx)"
/>
</Button>
</ThemeProvider> </ThemeProvider>
</Stack> </Stack>
</Grid> </Grid>
:null :null


+ 21
- 26
src/pages/Holiday/index.js View File

@@ -183,41 +183,36 @@ const Index = () => {
<Stack direction="row" justifyContent="flex-start" alignItems="center" spacing={2} sx={{ml:2,mt:1}} > <Stack direction="row" justifyContent="flex-start" alignItems="center" spacing={2} sx={{ml:2,mt:1}} >
<ThemeProvider theme={PNSPS_LONG_BUTTON_THEME}> <ThemeProvider theme={PNSPS_LONG_BUTTON_THEME}>
<label htmlFor="downloadFileBtn">
<Button
variant="contained"
size="large"
disabled={waitDownload}
onClick={doExport}
aria-label="Export holiday template"
>
<Typography variant="h5">Export</Typography>
</Button>
</ThemeProvider>
{isGrantedAny(["MAINTAIN_GAZETTE_ISSUE"]) ?
<ThemeProvider theme={PNSPS_LONG_BUTTON_THEME}>
<Button <Button
component="span"
component="label"
variant="contained" variant="contained"
size="large" size="large"
disabled={waitDownload}
onClick={doExport}
disabled={waitImport}
> >
<Typography variant="h5">Export</Typography>
</Button>
</label>
</ThemeProvider>
{isGrantedAny(["MAINTAIN_GAZETTE_ISSUE"]) ?
<ThemeProvider theme={PNSPS_LONG_BUTTON_THEME}>
<input
<Typography variant="h5">Upload Files</Typography>
<input
id="uploadFileBtn" id="uploadFileBtn"
name="file" name="file"
type="file" type="file"
accept=".xlsx" accept=".xlsx"
style={{ display: 'none' }}
hidden
disabled={waitImport} disabled={waitImport}
onChange={(event) => {
readFile(event)
}}
/>
<label htmlFor="uploadFileBtn">
<Button
component="span"
variant="contained"
size="large"
disabled={waitImport}
>
<Typography variant="h5">Upload Files</Typography>
</Button>
</label>
onChange={readFile}
aria-label="Upload Excel file (.xlsx)"
/>
</Button>
</ThemeProvider> </ThemeProvider>
:null :null
} }


+ 11
- 17
src/pages/Proof/Create_FromApp/ProofForm.js View File

@@ -273,32 +273,26 @@ const FormPanel = ({ formData }) => {
/> />
</Stack> </Stack>
</Grid> </Grid>

<Grid item xs={12} md={12}> <Grid item xs={12} md={12}>
<Button
component="label"
variant="contained"
size="large"
disabled={attachments.length >= (formik.values.groupType == "Private Bill" ? 2 : 1)}
>
<Typography variant="h5">Upload Files</Typography>
<input <input
id="uploadFileBtn" id="uploadFileBtn"
name="file" name="file"
type="file" type="file"
accept=".pdf" accept=".pdf"
style={{ display: 'none' }}
hidden
disabled={attachments.length >= (formik.values.groupType == "Private Bill" ? 2 : 1)} disabled={attachments.length >= (formik.values.groupType == "Private Bill" ? 2 : 1)}
onChange={(event) => {
readFile(event)
}}
onChange={readFile}
aria-label="Upload PDF file"
/> />
<label htmlFor="uploadFileBtn">
<Button
component="span"
variant="contained"
size="large"
disabled={attachments.length >= (formik.values.groupType == "Private Bill" ? 2 : 1)}
>
<Typography variant="h5">Upload Files</Typography>
</Button>
</label>
</Button>
</Grid> </Grid>


<Grid item xs={12} md={12}> <Grid item xs={12} md={12}>
<UploadFileTable <UploadFileTable
key="uploadTable" key="uploadTable"


+ 84
- 26
src/pages/authentication/AuthWrapper.js View File

@@ -1,11 +1,12 @@
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { Box, Grid, Typography } from '@mui/material';
// import { Stack } from '@mui/material';
import { Box, Grid, Typography, Dialog, DialogContent, IconButton, useMediaQuery } from '@mui/material';
import CloseIcon from '@mui/icons-material/Close';
import Loadable from 'components/Loadable'; import Loadable from 'components/Loadable';
import { lazy } from 'react';
import { lazy, useState } from 'react';
import { FormattedMessage, useIntl } from "react-intl"; import { FormattedMessage, useIntl } from "react-intl";
import { checkSysEnv } from "utils/Utils"; import { checkSysEnv } from "utils/Utils";
import backbroundImg from 'assets/images/bg_ml.jpg'; import backbroundImg from 'assets/images/bg_ml.jpg';
import lgceImg from 'assets/images/2025_lgce.jpg'; // <-- your popup image
import 'assets/style/loginStyles.css'; import 'assets/style/loginStyles.css';


const AuthCard = Loadable(lazy(() => import('./AuthCardCustom'))); const AuthCard = Loadable(lazy(() => import('./AuthCardCustom')));
@@ -18,38 +19,95 @@ const BackgroundHead = {
}; };


const AuthWrapper = ({ children }) => { const AuthWrapper = ({ children }) => {
// Move useIntl inside component
const intl = useIntl(); const intl = useIntl();
const isSmall = useMediaQuery('(max-width:600px)');
const [openPopup, setOpenPopup] = useState(true);

const handleClosePopup = () => {
setOpenPopup(false);
};



return ( return (
<Box sx={{ minHeight: '87vh' }}> <Box sx={{ minHeight: '87vh' }}>
{/* Popup */}
<Dialog
open={openPopup}
onClose={handleClosePopup}
aria-labelledby="election-promo-title"
maxWidth="md"
PaperProps={{
sx: {
borderRadius: 2,
overflow: 'hidden',
boxShadow: 6
}
}}
>
<Box sx={{ position: 'relative' }}>
<IconButton
aria-label="Close"
onClick={handleClosePopup}
sx={{
position: 'absolute',
top: 6,
right: 6,
zIndex: 1,
bgcolor: 'rgba(255,255,255,0.8)',
'&:hover': { bgcolor: 'rgba(255,255,255,1)' }
}}
>
<CloseIcon />
</IconButton>
<DialogContent sx={{ p: 0 }}>
<Box
component="img"
src={lgceImg}
alt={intl.formatMessage({ id: 'lgce_alt', defaultMessage: '2025 Legislative Council General Election' })}
title={intl.formatMessage({ id: 'lgce_title', defaultMessage: '2025 Legislative Council General Election' })}
sx={{
display: 'block',
width: isSmall ? '92vw' : '720px',
height: 'auto',
maxWidth: '92vw'
}}
/>
</DialogContent>
</Box>
</Dialog>

{/* Page content */}
<div style={BackgroundHead}> <div style={BackgroundHead}>
<Grid <Grid
container container
direction="row" direction="row"
justifyContent="space-between" justifyContent="space-between"
alignItems="center" alignItems="center"
sx={{
minHeight: '87vh'
}}
sx={{ minHeight: '87vh' }}
> >
<Grid item xs={12} md={8} lg={8} xl={8} >
<Grid container direction="column"
<Grid item xs={12} md={8} lg={8} xl={8}>
<Grid
container
direction="column"
justifyContent="flex-start" justifyContent="flex-start"
alignItems="flex-start" alignItems="flex-start"
// spacing={2}
sx={{ minHeight: { md: 'calc(87vh)' } }} sx={{ minHeight: { md: 'calc(87vh)' } }}
> >
<Grid item xs={12} sx={{ ml: 4,}}>
<Grid item xs={12} sx={{ ml: 4 }}>
<Typography style={{ textAlign: "flex-start" }}> <Typography style={{ textAlign: "flex-start" }}>
<div style={{ padding: 12 }} dangerouslySetInnerHTML={{ __html: intl.formatMessage({ id: "homePageHeaderMessage" }) }} />
<div
style={{ padding: 12 }}
dangerouslySetInnerHTML={{ __html: intl.formatMessage({ id: "homePageHeaderMessage" }) }}
/>
</Typography> </Typography>
</Grid> </Grid>
<Grid container direction="column"
justifyContent="flex-start"
alignItems="center"
spacing={2}
sx={{ minHeight: { md: 'calc(50vh)' } }}
<Grid
container
direction="column"
justifyContent="flex-start"
alignItems="center"
spacing={2}
sx={{ minHeight: { md: 'calc(50vh)' } }}
> >
<Grid item xs={12} sx={{ ml: 4, mt: 12, display: { xs: 'none', sm: 'block' } }}> <Grid item xs={12} sx={{ ml: 4, mt: 12, display: { xs: 'none', sm: 'block' } }}>
<Typography style={{ textAlign: "center", fontSize: "1.8rem" }}> <Typography style={{ textAlign: "center", fontSize: "1.8rem" }}>
@@ -61,24 +119,24 @@ const AuthWrapper = ({ children }) => {
<Typography style={{ textAlign: "center", fontSize: "1.8rem" }}> <Typography style={{ textAlign: "center", fontSize: "1.8rem" }}>
<FormattedMessage id="PNSPS_fullname" /> <FormattedMessage id="PNSPS_fullname" />
</Typography> </Typography>
{
checkSysEnv() !== '' ?
<Typography style={{ color: 'red', textAlign: "center", fontSize: "1.8rem" }}>
User Acceptance Test Environment
</Typography>
: ""
}
{checkSysEnv() !== '' ? (
<Typography style={{ color: 'red', textAlign: "center", fontSize: "1.8rem" }}>
User Acceptance Test Environment
</Typography>
) : (
""
)}
</Grid> </Grid>

</Grid> </Grid>
</Grid> </Grid>
</Grid> </Grid>

<Grid item xs={12} md={4} lg={4} xl={4}> <Grid item xs={12} md={4} lg={4} xl={4}>
<Grid <Grid
container container
justifyContent="center" justifyContent="center"
alignItems="center" alignItems="center"
sx={{ minHeight: { xs: 'calc(90vh - 134px)', md: 'calc(90vh - 112px)' }, }}
sx={{ minHeight: { xs: 'calc(90vh - 134px)', md: 'calc(90vh - 112px)' } }}
> >
<Grid item xs={12} md={11} lg={11} xl={11}> <Grid item xs={12} md={11} lg={11} xl={11}>
<AuthCard>{children}</AuthCard> <AuthCard>{children}</AuthCard>


+ 3
- 1
src/translations/en.json View File

@@ -592,5 +592,7 @@
"userGuidePub10":"10. Payment", "userGuidePub10":"10. Payment",


"Dashboard": "Dashboard", "Dashboard": "Dashboard",
"event": "Event"
"event": "Event",
"lgce_alt": "2025 Legislative Council General Election",
"lgce_title": "2025 Legislative Council General Election"
} }

+ 3
- 1
src/translations/zh-CN.json View File

@@ -588,5 +588,7 @@
"userGuidePub10":"10. 付款", "userGuidePub10":"10. 付款",


"Dashboard": "仪表板", "Dashboard": "仪表板",
"event": "活动"
"event": "活动",
"lgce_alt": "2025年立法会换届选举",
"lgce_title": "2025年立法会换届选举"
} }

+ 3
- 1
src/translations/zh-HK.json View File

@@ -589,5 +589,7 @@
"userGuidePub10":"10. 付款", "userGuidePub10":"10. 付款",


"Dashboard": "儀表板", "Dashboard": "儀表板",
"event": "活動"
"event": "活動",
"lgce_alt": "2025年立法會換屆選舉",
"lgce_title": "2025年立法會換屆選舉"
} }

Write Preview
Loading…
Cancel
Save