alex
/
PNSPS-frontend-MaterialUI
1
0
複製 0
程式碼 問題 0 合併請求 0 版本發佈 0 Wiki 活動
瀏覽代碼

apply new theme

master
jason.lam 1 年之前
父節點
f3b9a47ade
當前提交
b45bb2808c
共有 6 個檔案被更改，包括 655 行新增 和 23 行删除
分割檢視
Diff Options
Show Stats Download Patch File Download Diff File
  1. +4
    -0
      src/App.js
  2. +24
    -23
      src/pages/PublicNotice/Search_GLD/SearchForm.js
  3. +147
    -0
      src/themes/buttonConst.js
  4. +68
    -0
      src/themes/colorConst.js
  5. +407
    -0
      src/themes/themeConst.js
  6. +5
    -0
      src/themes/typography.js

+ 4
- 0
src/App.js 查看文件

@@ -4,16 +4,20 @@ import ThemeCustomization from 'themes';
import ScrollTop from 'components/ScrollTop';
import {ToastContainer} from "react-toastify";
import 'react-toastify/dist/ReactToastify.css';
import {PNSPS_THEME} from "./themes/themeConst";
import {ThemeProvider} from "@emotion/react";
//import {isUserLoggedIn} from 'utils/Utils';
//import {DefaultRoute} from 'routes/index'
// ==============================|| APP - THEME, ROUTER, LOCAL ||============================== //

const App = () => (
<ThemeCustomization>
<ThemeProvider theme={PNSPS_THEME}>
<ScrollTop>
<Routes>
</Routes>
</ScrollTop>
</ThemeProvider>
<ToastContainer/>
</ThemeCustomization>
);


+ 24
- 23
src/pages/PublicNotice/Search_GLD/SearchForm.js 查看文件

@@ -1,7 +1,6 @@
// material-ui
import {
Button,
CardContent,
Grid, TextField,
Autocomplete,
Typography
@@ -12,6 +11,8 @@ import * as React from "react";
import * as ComboData from "utils/ComboData";
import * as DateUtils from "utils/DateUtils";
import * as FormatUtils from "utils/FormatUtils";
import {ThemeProvider} from "@emotion/react";
import {PNSPS_BUTTON_THEME} from "../../../themes/buttonConst";
// ==============================|| DASHBOARD - DEFAULT ||============================== //


@@ -30,6 +31,7 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, iss
const [minDate, setMinDate] = React.useState(searchCriteria.dateFrom);
const [maxDate, setMaxDate] = React.useState(searchCriteria.dateTo);

const marginBottom = 2;
const { reset, register, handleSubmit } = useForm()
const onSubmit = (data) => {
data.status = selectedLabelsString
@@ -88,18 +90,16 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, iss
>

<form onSubmit={handleSubmit(onSubmit)}>
<Grid container sx={{ backgroundColor: '#ffffff', ml: 2, mt: 3, mb: 3}} width="98%">
<Grid container sx={{ backgroundColor: '#ffffff', ml: 2, mt: 1, mb: marginBottom}} width="98%">
{/*row 1*/}
<Grid item xs={12}>
<CardContent sx={{ px: 2.5, pt: 3 }}>
<Grid item justifyContent="space-between" alignItems="center">
<Typography variant="h5">Search Form</Typography>
</Grid>
</CardContent>
<Grid item justifyContent="space-between" alignItems="center" sx={{mt:1,ml:3,mb:marginBottom}}>
<Typography variant="pnspsFormTitle" >
Search Form
</Typography>
</Grid>
{/*row 2*/}
<Grid container display="flex" alignItems={"center"}>
<Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
<Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: marginBottom }}>
<TextField
fullWidth
{...register("appNo")}
@@ -112,7 +112,7 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, iss
/>
</Grid>

<Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
<Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: marginBottom }}>
<TextField
fullWidth
{...register("dateFrom")}
@@ -130,7 +130,7 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, iss
/>
</Grid>

<Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
<Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: marginBottom }}>
<TextField
fullWidth
InputLabelProps={{
@@ -148,7 +148,7 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, iss
/>
</Grid>

<Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
<Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: marginBottom }}>
<TextField
fullWidth
{...register("contact")}
@@ -162,7 +162,7 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, iss

</Grid>

<Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
<Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: marginBottom }}>
{/* <Autocomplete
{...register("status")}
disablePortal
@@ -189,6 +189,7 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, iss
multiple
{...register("status")}
id="status"
size="small"
options={ComboData.publicNoticeStatic_GLD}
value={selectedStatus}
onChange={(event, newValue) => {
@@ -221,7 +222,7 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, iss

{
orgCombo ?
<Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
<Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: marginBottom }}>
<Autocomplete
{...register("orgId")}
disablePortal
@@ -247,11 +248,12 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, iss
: <></>
}

<Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
<Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: marginBottom }}>
<Autocomplete
{...register("issueId")}
disablePortal
id="issueId"
size="small"
options={issueCombo}
value={issueSelected}
inputValue={(issueSelected?.id) ? getIssueLabel(issueSelected) : ""}
@@ -272,7 +274,7 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, iss
/>
</Grid>

<Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
<Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: marginBottom }}>
<TextField
fullWidth
{...register("groupNo")}
@@ -288,32 +290,31 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, iss

{/*last row*/}
<Grid container maxWidth justifyContent="flex-end">
<Grid item sx={{ ml: 3, mr: 3, mb: 3, mt: 3 }}>
<ThemeProvider theme={PNSPS_BUTTON_THEME}>
<Grid item sx={{ ml: 3, mr: 3 }}>
<Button
size="large"
variant="contained"
onClick={resetForm}
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}>
<Typography variant="h5">Clear</Typography>
Clear
</Button>
</Grid>

<Grid item sx={{ ml: 3, mr: 3, mb: 3, mt: 3 }}>
<Grid item sx={{ ml: 3, mr: 3 }}>
<Button
size="large"
variant="contained"
type="submit"
sx={{
textTransform: 'capitalize',
alignItems: 'end'
}}>
<Typography variant="h5">Submit</Typography>
Submit
</Button>
</Grid>
</ThemeProvider>
</Grid>
</Grid>
</form>


+ 147
- 0
src/themes/buttonConst.js 查看文件

@@ -0,0 +1,147 @@
import {createTheme} from "@mui/material";

export const PNSPS_BUTTON_THEME = createTheme({
palette: {
create: {
main: '#57B962',
// light: will be calculated from palette.primary.main,
// dark: will be calculated from palette.primary.main,
// contrastText: will be calculated to contrast with palette.primary.main
contrastText: '#FFFFFF',
},
delete: {
main: '#E03C04',
contrastText: '#FFFFFF',

},
cancel: {
main: '#999999',
contrastText: '#FFFFFF',

},
save:{
main: '#448DF2',
contrastText: '#FFFFFF',
},
export:{
main: '#8C52FF',
contrastText: '#FFFFFF',
},
saveAs:{
main: '#FFBD59',
contrastText: '#FFFFFF',
},
edit:{
main: '#F3AF2B',
contrastText: '#FFFFFF',
},
exportExcel:{
main: '#6A8B9E',
contrastText: '#FFFFFF',
}
},
components: {
MuiDataGrid: {
styleOverrides: {
actionsCell: {
'& .MuiDataGrid-actionsContainer .MuiIconButton-root': {
fontSize: '80px', // Set the desired icon size here
},
},
},
},
MuiButton: {
styleOverrides: {
root: {
fontSize: '1.0rem',
height: '40px',
width: '40vw', // Default width for xs screen sizes
'@media (min-width: 600px)': { // sm breakpoint
width: '20vw',
},
'@media (min-width: 960px)': { // md breakpoint
width: '15vw',
},
'@media (min-width: 1280px)': { // lg breakpoint
width: '7vw',
},
textTransform: "none",
alignItems: 'center'
},
},
},
}
});

export const PNSPS_LONG_BUTTON_THEME = createTheme({
palette: {
create: {
main: '#57B962',
// light: will be calculated from palette.primary.main,
// dark: will be calculated from palette.primary.main,
// contrastText: will be calculated to contrast with palette.primary.main
contrastText: '#FFFFFF',
},
delete: {
main: '#E03C04',
contrastText: '#FFFFFF',

},
cancel: {
main: '#999999',
contrastText: '#FFFFFF',

},
save:{
main: '#448DF2',
contrastText: '#FFFFFF',
},
export:{
main: '#8C52FF',
contrastText: '#FFFFFF',
},
saveAs:{
main: '#FFBD59',
contrastText: '#FFFFFF',
},
edit:{
main: '#F3AF2B',
contrastText: '#FFFFFF',
},
exportExcel:{
main: '#60667E',
contrastText: '#FFFFFF',
}
},
components: {
MuiDataGrid: {
styleOverrides: {
actionsCell: {
'& .MuiDataGrid-actionsContainer .MuiIconButton-root': {
fontSize: '80px', // Set the desired icon size here
},
},
},
},
MuiButton: {
styleOverrides: {
root: {
fontSize: '1.0rem',
height: '40px',
width: '40vw', // Default width for xs screen sizes
'@media (min-width: 600px)': { // sm breakpoint
width: '30vw',
},
'@media (min-width: 960px)': { // md breakpoint
width: '25vw',
},
'@media (min-width: 1280px)': { // lg breakpoint
width: '14vw',
},
textTransform: "none",
alignItems: 'center'
},
},
},
}
});

+ 68
- 0
src/themes/colorConst.js 查看文件

@@ -0,0 +1,68 @@
import { createTheme } from "@mui/material";

export const chartColor = [
'#CB4047', '#ED3A41', '#F47B50', '#FBA647',
'#FDB64C', '#CCBB32', '#9ACC59', '#57B962',
'#1E83C5', '#7C4A9D'
];

export const chartSingleColor = [
'#f2969a', '#fc9599', '#faa789', '#f7ae94',
'#ffd491', '#ede5a1', '#d1f5a2', '#9de0a4',
'#a2d4f5', '#b685d6'
];

export const rankColor = [
'#FFD700', '#C0C0C0', '#CD853F', '#57B962', '#57B962',
'#57B962', '#57B962', '#57B962', '#57B962', '#57B962'
];

export const piechartColor1 = [
'#E84A3E', '#F2883C', '#FDCD4D', '#CE478A', '#B63D2A',
'#6A8B9E', '#60667E', '#58865F', '#2F763E', '#7D80B5',
];

export const piechartColor2 = [
'#6A8B9E', '#60667E', '#58865F', '#2F763E', '#7D80B5',
'#E84A3E', '#F2883C', '#FDCD4D', '#CE478A', '#B63D2A',
];

export const cardBorderColor = [
'#efb142', '#4bb641', '#448df2', '#e03c04'
];

export const chartLineColor = [
'#FFFFFF', '#D9D9D9'
];

export const GENERAL_RED_COLOR = '#e03c04';

export const TABLE_HEADER_TEXT_COLOR = "#3367D1";

export const GENERAL_INFO_COLOR = '#448df2';

export const GENERAL_SETTING_COLOR = '#666666';

export const GENERAL_TABLE_BOARDER_COLOR = '#F0F0F0';

export const GENERAL_BORDER_COLOR ='#e6ebf1';

export const GENERAL_TEXT_COLOR ='#262626';

export const formTheme = createTheme({
components: {
MuiFormLabel: {
root: { // Name of the rule
color: "rgba(0, 0, 0, 1)",
},
styleOverrides: {
asterisk: {
color: "#db3131",
"&$error": {
color: "#db3131",
},
},
},
},
},
});

+ 407
- 0
src/themes/themeConst.js 查看文件

@@ -0,0 +1,407 @@
import {createTheme} from "@mui/material";
import Palette from "./palette";
import Typography from "./typography";
import {alpha} from "@mui/material/styles";
import {GENERAL_TABLE_BOARDER_COLOR, TABLE_HEADER_TEXT_COLOR} from "./colorConst";
const FONT_SIZE = '1.1rem';
const TABLE_FONT_SIZE = '1.0rem';
const HELPER_FONT_SIZE = '0.9rem';
const ROW_HEIGHT = '42.5px';
const theme = Palette('light', 'default');
export const CARD_MAX_WIDTH = "98%"

const themeTypography = Typography(
`'Public Sans', sans-serif`,
);

export const PNSPS_THEME = createTheme({
palette: theme.palette,
typography: themeTypography,
components: {
MuiImage: {
root: {
position: 'relative',
'&:hover': {
'&::after': {
content: '""',
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
background: 'rgba(0, 0, 0, 0.5)',
opacity: 0,
transition: 'opacity 0.3s ease',
},
'&:hover::after': {
opacity: 1,
},
},
},
},
MuiInputAdornment: {
styleOverrides: {
root: {
marginLeft: '-1px',
//marginRight: '0px',
},
},
},
MuiFormHelperText: {
styleOverrides: {
root: {
fontSize: HELPER_FONT_SIZE, // Adjust the font size as needed
},
},
},
MuiPickersBasePicker: {
styleOverrides: {
toolbar: {
height: ROW_HEIGHT // Set the desired height value here
}
}
},
MuiPickersDay: {
root:{
height: ROW_HEIGHT,
},
day: {
padding: '20px', // Set the desired padding value here
},
},
MuiButtonBase:{
styleOverrides:{
root:{
'&.MuiChip-root.Mui-disabled':{
opacity: 0.75,
},
'&.MuiButton-root':{
fontSize: FONT_SIZE
},
}
}
},
MuiIconButton: {
styleOverrides: {
root: {
marginRight: '-2px',
borderRadius: 3
},
marginRight: '-3px',
sizeLarge: {
width: theme.spacing(5.5),
height: theme.spacing(5.5),
fontSize: '1.25rem'
},
sizeMedium: {
width: theme.spacing(4.5),
height: theme.spacing(4.5),
fontSize: '1rem'
},
sizeSmall: {
width: theme.spacing(3.75),
height: theme.spacing(3.75),
fontSize: '0.75rem'
}
}
},
MuiInputLabel: {
styleOverrides: {
root: {
color: 'rgba(0, 0, 0, 0.8)',
fontSize: '1rem',
},
},
},
MuiChip:{
styleOverrides: {
label: {
lineHeight: 'normal',
whiteSpace: "inherit",
paddingTop: '2px',
paddingBottom: '2px'
},
},
},
MuiAutocomplete: {
styleOverrides: {
tag: {
height: 'auto',
whiteSpace: 'normal',
},
inputRoot: {
maxHeight: '30vh', // Set the desired height value here
},
root: {
minHeight: ROW_HEIGHT,
'&:MuiAutocomplete-input': {
display: 'flex',
alignItems: 'center',
},
},
popupIndicator: {
height: '30px',
width: '30px',
},
endAdornment: {
root: {
height: '30px',
width: '30px',
marginRight: '-2px',
marginBottom: '3px',
borderRadius: 3
},
marginRight: '-3px',
sizeLarge: {
width: theme.spacing(5.5),
height: theme.spacing(5.5),
fontSize: '1.25rem'
},
sizeMedium: {
width: theme.spacing(4.5),
height: theme.spacing(4.5),
fontSize: '1rem'
},
sizeSmall: {
width: theme.spacing(3.75),
height: theme.spacing(3.75),
fontSize: '0.75rem'
}
},
},
},
MuiInputBase: {
root: {
padding: '2px', // Set the desired padding value here
},
},
MuiOutlinedInput: {
styleOverrides: {
input: {
//padding: '10.5px 14px 10.5px 12px',
'&.MuiOutlinedInput-input.Mui-disabled': {
WebkitTextFillColor: '#888888',
},
color: 'rgba(0, 0, 0, 0.85)'
},
root: {
'&:hover .MuiOutlinedInput-notchedOutline': {
borderColor: theme.palette.primary.light
},
'&.Mui-focused': {
boxShadow: `0 0 0 2px ${alpha(theme.palette.primary.main, 0.2)}`,
'& .MuiOutlinedInput-notchedOutline': {
border: `1px solid ${theme.palette.primary.light}`
}
},
'&.Mui-error': {
'&:hover .MuiOutlinedInput-notchedOutline': {
borderColor: theme.palette.error.light
},
'&.Mui-focused': {
boxShadow: `0 0 0 2px ${alpha(theme.palette.error.main, 0.2)}`,
'& .MuiOutlinedInput-notchedOutline': {
border: `1px solid ${theme.palette.error.light}`
}
}
}
},
inputSizeSmall: {
padding: '7.5px 8px 7.5px 12px'
},
inputMultiline: {
root:{
minHeight:'42.5px',
maxHeight: '50vh'
},
padding: '7.5px 8px 7.5px 12px'
}

}
},
MuiTextField: {
styleOverrides: {
root: {
'& .MuiInputBase-input': {
fontSize: FONT_SIZE,
display: 'flex',
alignItems: 'center',
},
'& .MuiInputBase-root': {
//height: '40px',
minHeight: '42.5px',
maxHeight: ROW_HEIGHT,
boxSizing: 'border-box', // Ensure the background shape follows the size of the TextField
padding: '1px', // Adjust the padding as needed
},
'& .MuiInputBase-input:disabled': {
color: 'rgba(0, 0, 0, 0.8)',
//backgroundColor: '#777777', // Set background color to #777777 for disabled state
//color: '#010101', // Set text color to #111111 for disabled state
},
'& .Mui-focused.MuiAutocomplete-input': {
color: "red"
},
},
},
},
MuiTableCell: {
styleOverrides: {
root: {
fontSize: TABLE_FONT_SIZE,
borderColor: theme.palette.divider
},
head: {
fontWeight: 600,
paddingTop: 3,
paddingBottom: 3
}
}
},
MuiTablePagination:{
styleOverrides:{
root:{
fontSize: HELPER_FONT_SIZE,
},
selectLabel:{
fontSize: HELPER_FONT_SIZE,
},
displayedRows:{
fontSize: HELPER_FONT_SIZE,
}
}
},
MuiDataGrid: {
styleOverrides: {
'&>.MuiDataGrid-main': {
'&>.MuiDataGrid-columnHeaders': {
borderBottom: 'none',
fontWeight: '900',
},
},
root: {
fontSize: TABLE_FONT_SIZE, // Set the font size
maxWidth: '98vw',
border: 'none !important',
'& .MuiDataGrid-cell': {
whiteSpace: 'normal', // Enable auto-wrapping
wordBreak: 'break-word', // Break words if needed
},
},
footerContainer:{
maxHeight: "40px",
minHeight: "40px",
},
editInputCell:{
fontSize: TABLE_FONT_SIZE,
},
cell: {
fontSize: TABLE_FONT_SIZE,
borderBottom: 'none',
'& .MuiDataGrid-cellValue': {
whiteSpace: 'normal', // Enable auto-wrapping
wordBreak: 'break-word', // Break words if needed
},
},
columnHeaderCell: {
'&:focus': {
outline: 'none', // Remove the outline on focus
},
},
columnHeaders: {
borderBottom: '1px solid ' + GENERAL_TABLE_BOARDER_COLOR + ' !important',
},
columnHeader: {
color: TABLE_HEADER_TEXT_COLOR,
fontSize: TABLE_FONT_SIZE,

'&:focus': {
outline: 'none', // Remove the outline on focus
},
'&:not(:last-child)': {
borderRight: 'none', // Remove the border between column headers
},
fontWeight: '900',
},
row: {
borderBottom: 'none',
},
pagination: {
borderTop: 'none !important',
fontSize: TABLE_FONT_SIZE,
"& .MuiTablePagination-actions": {
border: 'none', // Remove the border around the pagination actions
}
},
'& .MuiPaginationItem-root': {
borderRadius: 0,
},
},
},
MuiCssBaseline: {
styleOverrides: {
'.MuiDataGrid-root .MuiDataGrid-row': {
borderBottom: 'none', // Disable the border under each record
},
'.MuiDataGrid-root .MuiDataGrid-columnHeader': {
borderBottom: 'none', // Disable the border near the column headers
},
},
},
MuiTab: {
styleOverrides: {
root: {
fontSize: TABLE_FONT_SIZE,
minHeight: 46,
color: theme.palette.text.primary
}
}
},
MuiTabs: {
styleOverrides: {
vertical: {
overflow: 'visible'
}
}
}
},
});

export const ARS_NAV_THEME = createTheme({
typography: {
fontSize: 14,
},
});

export const ARS_LOGIN_THEME = createTheme({
components: {
MuiFormHelperText: {
styleOverrides: {
root: {
fontSize: HELPER_FONT_SIZE, // Adjust the font size as needed
},
},
},
MuiInputLabel: {
styleOverrides: {
root: {
fontSize: '1.15rem',
},
},
},
MuiTextField: {
styleOverrides: {
root: {
'& .MuiInputBase-input': {
fontSize: '1.3rem',
display: 'flex',
alignItems: 'flex-end',
},
'& .MuiInputBase-root': {
height: '50px',
},
},
},
},
},
});

+ 5
- 0
src/themes/typography.js 查看文件

@@ -7,6 +7,11 @@ const Typography = (fontFamily) => ({
fontWeightRegular: 400,
fontWeightMedium: 500,
fontWeightBold: 600,
pnspsFormTitle: {
fontWeight: 600,
fontSize: '1.175rem',
lineHeight: 1.4
},
h1: {
fontWeight: 600,
fontSize: '2.5rem',


Write Preview
Loading…
取消
儲存