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

consistent design between dashboard and device tables

Browse Source
This commit is contained in:
proddy
2025-10-25 16:59:20 +02:00
parent accfeab6fa
commit c32ee4dfb5
2 changed files with 68 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -206,7 +206,7 @@ const Dashboard = memo(() => {
// if its a device (parent node) and has entities // if its a device (parent node) and has entities
if (di.nodes?.length) { if (di.nodes?.length) {
return ( return (
<span style={{ fontWeight: 'bold', fontSize: '14px' }}> <span style={{ fontSize: '15px' }}>
<DeviceIcon type_id={di.t ?? 0} /> <DeviceIcon type_id={di.t ?? 0} />
&nbsp;&nbsp;{showType(di.n, di.t)} &nbsp;&nbsp;{showType(di.n, di.t)}
<span style={{ color: 'lightblue' }}>&nbsp;({di.nodes?.length})</span> <span style={{ color: 'lightblue' }}>&nbsp;({di.nodes?.length})</span>
@@ -312,7 +312,7 @@ const Dashboard = memo(() => {
flexDirection="column" flexDirection="column"
sx={{ sx={{
borderRadius: 1, borderRadius: 1,
border: '1px solid grey' border: '1px solid rgb(65, 65, 65)'
}} }}
> >
<IconContext.Provider <IconContext.Provider

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

@@ -176,6 +176,12 @@ const Devices = memo(() => {
useTheme([ useTheme([
common_theme, common_theme,
{ {
BaseRow: `
font-size: 15px;
.td {
height: 28px;
}
`,
Table: ` Table: `
--data-table-library_grid-template-columns: repeat(1, minmax(0, 1fr)) 130px; --data-table-library_grid-template-columns: repeat(1, minmax(0, 1fr)) 130px;
`, `,
@@ -184,9 +190,12 @@ const Devices = memo(() => {
padding: 8px; padding: 8px;
`, `,
Row: ` Row: `
font-weight: bold; &:nth-of-type(odd) .td {
background-color: #303030;
},
&:hover .td { &:hover .td {
background-color: #177ac9; background-color: #177ac9;
},
` `
} }
]), ]),
@@ -526,55 +535,65 @@ const Devices = memo(() => {
const renderCoreData = () => ( const renderCoreData = () => (
<> <>
<IconContext.Provider <Box
value={{ padding={1}
color: 'lightblue', justifyContent="center"
size: '18', flexDirection="column"
style: { verticalAlign: 'middle' } sx={{
borderRadius: 1,
border: '1px solid rgb(65, 65, 65)'
}} }}
> >
{!coreData.connected && ( <IconContext.Provider
<MessageBox my={2} level="error" message={LL.EMS_BUS_WARNING()} /> value={{
)} color: 'lightblue',
size: '18',
style: { verticalAlign: 'middle' }
}}
>
{!coreData.connected && (
<MessageBox my={2} level="error" message={LL.EMS_BUS_WARNING()} />
)}
{coreData.connected && ( {coreData.connected && (
<Table <Table
data={{ nodes: coreData.devices }} data={{ nodes: coreData.devices }}
select={device_select} select={device_select}
theme={device_theme} theme={device_theme}
layout={{ custom: true }} layout={{ custom: true }}
> >
{(tableList: Device[]) => ( {(tableList: Device[]) => (
<> <>
<Header> <Header>
<HeaderRow> <HeaderRow>
<HeaderCell resize>{LL.DESCRIPTION()}</HeaderCell> <HeaderCell resize>{LL.DESCRIPTION()}</HeaderCell>
<HeaderCell stiff>{LL.TYPE(0)}</HeaderCell> <HeaderCell stiff>{LL.TYPE(0)}</HeaderCell>
</HeaderRow> </HeaderRow>
</Header> </Header>
<Body> <Body>
{tableList.length === 0 && ( {tableList.length === 0 && (
<CircularProgress sx={{ margin: 1 }} size={18} /> <CircularProgress sx={{ margin: 1 }} size={18} />
)} )}
{tableList.map((device: Device) => ( {tableList.map((device: Device) => (
<Row key={device.id} item={device}> <Row key={device.id} item={device}>
<Cell> <Cell>
<DeviceIcon type_id={device.t} /> <DeviceIcon type_id={device.t} />
&nbsp;&nbsp; &nbsp;&nbsp;
{device.n} {device.n}
<span style={{ color: 'lightblue' }}> <span style={{ color: 'lightblue' }}>
&nbsp;&nbsp;({device.e}) &nbsp;&nbsp;({device.e})
</span> </span>
</Cell> </Cell>
<Cell stiff>{device.tn}</Cell> <Cell stiff>{device.tn}</Cell>
</Row> </Row>
))} ))}
</Body> </Body>
</> </>
)} )}
</Table> </Table>
)} )}
</IconContext.Provider> </IconContext.Provider>
</Box>
</> </>
); );