andry/EMS-ESP32
1
0
Fork 0
mirror of https://github.com/emsesp/EMS-ESP32.git synced 2025-12-06 07:49:52 +03:00
Code Issues Packages Projects Releases Wiki Activity

cosmetic improvements

Browse Source
This commit is contained in:
proddy
2025-10-26 11:59:19 +01:00
parent 35192b9dde
commit f035e31dcf
11 changed files with 92 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
interface/src/CustomTheme.tsx
View File

@@ -1,7 +1,12 @@
import { memo } from 'react';
import type { FC } from 'react';
import { CssBaseline, ThemeProvider, responsiveFontSizes } from '@mui/material';
import {
CssBaseline,
ThemeProvider,
responsiveFontSizes,
tooltipClasses
} from '@mui/material';
import { createTheme } from '@mui/material/styles';
import type { RequiredChildrenProps } from 'utils';
@@ -44,6 +49,24 @@ const theme = responsiveFontSizes(
color: '#9e9e9e' // grey[500]
}
}
},
MuiTooltip: {
defaultProps: {
placement: 'top',
arrow: true
},
styleOverrides: {
tooltip: {
padding: '4px 8px',
fontSize: 10,
color: 'rgba(0, 0, 0, 0.87)',
backgroundColor: '#4caf50', // MUI success.main default color
boxShadow: '0px 2px 8px rgba(0, 0, 0, 0.15)',
[`& .${tooltipClasses.arrow}`]: {
color: '#4caf50'
}
}
}
}
}
})

2
interface/src/app/main/CustomEntities.tsx
View File

@@ -327,7 +327,7 @@ const CustomEntities = () => {
/>
)}
<Box mt={1} display="flex" flexWrap="wrap">
<Box mt={2} display="flex" flexWrap="wrap">
<Box flexGrow={1}>
{numChanges > 0 && (
<ButtonRow>

66
interface/src/app/main/Dashboard.tsx
View File

@@ -14,6 +14,7 @@ import {
IconButton,
ToggleButton,
ToggleButtonGroup,
Tooltip,
Typography
} from '@mui/material';
@@ -284,37 +285,44 @@ const Dashboard = memo(() => {
{data.nodes.length > 0 && (
<>
<ToggleButtonGroup
color="primary"
size="small"
value={showAll}
exclusive
onChange={handleShowAll}
>
<ButtonTooltip title={LL.ALLVALUES()} arrow>
<ToggleButton value={true}>
<UnfoldMoreIcon sx={{ fontSize: 18 }} />
</ToggleButton>
</ButtonTooltip>
<ButtonTooltip title={LL.COMPACT()} arrow>
<ToggleButton value={false}>
<UnfoldLessIcon sx={{ fontSize: 18 }} />
</ToggleButton>
</ButtonTooltip>
</ToggleButtonGroup>
<ButtonTooltip title={LL.DASHBOARD_1()} arrow>
<HelpOutlineIcon color="primary" sx={{ ml: 1, fontSize: 20 }} />
</ButtonTooltip>
<Box
padding={1}
justifyContent="center"
flexDirection="column"
sx={{
borderRadius: 1,
border: '1px solid rgb(65, 65, 65)'
}}
display="flex"
justifyContent="flex-end"
flexWrap="nowrap"
whiteSpace="nowrap"
>
<ToggleButtonGroup
size="small"
color="primary"
value={showAll}
exclusive
onChange={handleShowAll}
>
<ButtonTooltip title={LL.ALLVALUES()}>
<ToggleButton value={true}>
<UnfoldMoreIcon sx={{ fontSize: 18 }} />
</ToggleButton>
</ButtonTooltip>
<ButtonTooltip title={LL.COMPACT()}>
<ToggleButton value={false}>
<UnfoldLessIcon sx={{ fontSize: 18 }} />
</ToggleButton>
</ButtonTooltip>
</ToggleButtonGroup>
<Tooltip title={LL.DASHBOARD_1()}>
<HelpOutlineIcon
sx={{
ml: 1,
mt: 1,
fontSize: 20,
verticalAlign: 'middle'
}}
color="primary"
/>
</Tooltip>
</Box>
<Box mt={1} justifyContent="center" flexDirection="column">
<IconContext.Provider
value={{
color: 'lightblue',

10
interface/src/app/main/Devices.tsx
View File

@@ -535,15 +535,7 @@ const Devices = memo(() => {
const renderCoreData = () => (
<>
<Box
padding={1}
justifyContent="center"
flexDirection="column"
sx={{
borderRadius: 1,
border: '1px solid rgb(65, 65, 65)'
}}
>
<Box justifyContent="center" flexDirection="column">
<IconContext.Provider
value={{
color: 'lightblue',

4
interface/src/app/main/Help.tsx
View File

@@ -73,7 +73,7 @@ const Help = () => {
divider={<Divider orientation="vertical" flexItem />}
sx={{
borderRadius: 3,
border: '2px solid grey',
border: '1px solid lightblue',
justifyContent: 'space-evenly',
alignItems: 'center'
}}
@@ -99,7 +99,7 @@ const Help = () => {
)}
{me.admin && (
<List sx={{ borderRadius: 3, border: '2px solid grey' }}>
<List>
<ListItem>
<ListItemButton
component="a"

2
interface/src/app/main/Scheduler.tsx
View File

@@ -338,7 +338,7 @@ const Scheduler = () => {
/>
)}
<Box mt={1} display="flex" flexWrap="wrap">
<Box display="flex" flexWrap="wrap">
<Box flexGrow={1}>
{numChanges !== 0 && (
<ButtonRow>

4
interface/src/app/main/Sensors.tsx
View File

@@ -105,8 +105,6 @@ const Sensors = () => {
color: #90CAF9;
.th {
border-bottom: 1px solid #565656;
}
.th {
height: 36px;
}
`,
@@ -491,7 +489,7 @@ const Sensors = () => {
/>
)}
{sensorData?.analog_enabled === true && me.admin && (
<Box mt={1} display="flex" flexWrap="wrap" justifyContent="flex-end">
<Box mt={2} display="flex" flexWrap="wrap" justifyContent="flex-end">
<Button
variant="outlined"
color="primary"

21
interface/src/app/settings/Settings.tsx
View File

@@ -17,6 +17,7 @@ import {
DialogActions,
DialogContent,
DialogTitle,
Divider,
List
} from '@mui/material';
@@ -74,9 +75,9 @@ const Settings = () => {
</Dialog>
);
const content = () => (
<>
<List sx={{ borderRadius: 3, border: '2px solid grey' }}>
return (
<SectionContent>
<List>
<ListMenuItem
icon={TuneIcon}
bgcolor="#134ba2"
@@ -143,7 +144,15 @@ const Settings = () => {
{renderFactoryResetDialog()}
<Box mt={2} display="flex" flexWrap="wrap">
<Divider />
<Box
mt={2}
display="flex"
justifyContent="flex-end"
flexWrap="nowrap"
whiteSpace="nowrap"
>
<Button
startIcon={<SettingsBackupRestoreIcon />}
variant="outlined"
@@ -153,10 +162,8 @@ const Settings = () => {
{LL.FACTORY_RESET()}
</Button>
</Box>
</>
</SectionContent>
);
return <SectionContent>{content()}</SectionContent>;
};
export default Settings;

2
interface/src/app/status/Status.tsx
View File

@@ -253,7 +253,7 @@ const SystemStatus = () => {
return (
<>
<List sx={{ borderRadius: 3, border: '2px solid grey' }}>
<List>
<ListMenuItem
icon={BuildIcon}
bgcolor="#72caf9"

23
interface/src/components/ButtonTooltip.tsx
View File

@@ -1,22 +1,7 @@
import { Tooltip, type TooltipProps, styled, tooltipClasses } from '@mui/material';
import { Tooltip, type TooltipProps } from '@mui/material';
export const ButtonTooltip = styled(({ className, ...props }: TooltipProps) => (
<Tooltip
{...props}
placement="top"
arrow
classes={{ ...(className && { popper: className }) }}
/>
))(({ theme }) => ({
[`& .${tooltipClasses.arrow}`]: {
color: theme.palette.success.main
},
[`& .${tooltipClasses.tooltip}`]: {
backgroundColor: theme.palette.success.main,
color: 'rgba(0, 0, 0, 0.87)',
boxShadow: theme.shadows[1],
fontSize: 10
}
}));
export const ButtonTooltip = ({ children, ...props }: TooltipProps) => (
<Tooltip {...props}>{children}</Tooltip>
);
export default ButtonTooltip;

22
interface/src/components/SectionContent.tsx
View File

@@ -1,30 +1,20 @@
import type { FC } from 'react';
import { Divider, Paper } from '@mui/material';
import { Paper } from '@mui/material';
import type { RequiredChildrenProps } from 'utils';
interface SectionContentProps extends RequiredChildrenProps {
title?: string;
id?: string;
}
const SectionContent: FC<SectionContentProps> = (props) => {
const { children, title, id } = props;
const { children, id } = props;
return (
<Paper id={id} sx={{ p: 2, m: 2 }}>
{title && (
<Divider
sx={{
pb: 2,
borderColor: 'primary.main',
fontSize: 20,
color: 'primary.main'
}}
>
{title}
</Divider>
)}
<Paper
id={id}
sx={{ p: 1.5, m: 1.5, borderRadius: 3, border: '1px solid rgb(65, 65, 65)' }}
>
{children}
</Paper>
);