mirror of
https://github.com/emsesp/EMS-ESP32.git
synced 2025-12-06 15:59:52 +03:00
fix table column resizing #519
This commit is contained in:
Proddy
@@ -35,43 +35,44 @@ const ManageUsersForm: FC = () => {
|
||||
const authenticatedContext = useContext(AuthenticatedContext);
|
||||
|
||||
const table_theme = useTheme({
|
||||
Table: `
|
||||
--data-table-library_grid-template-columns: repeat(1, minmax(0, 1fr)) 90px 120px;
|
||||
`,
|
||||
BaseRow: `
|
||||
font-size: 14px;
|
||||
color: white;
|
||||
padding-left: 8px;
|
||||
`,
|
||||
HeaderRow: `
|
||||
text-transform: uppercase;
|
||||
background-color: black;
|
||||
color: #90CAF9;
|
||||
.th {
|
||||
padding: 8px;
|
||||
height: 42px;
|
||||
font-weight: 500;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
border-bottom: 1px solid #565656;
|
||||
}
|
||||
`,
|
||||
Row: `
|
||||
&:nth-of-type(odd) {
|
||||
background-color: #303030;
|
||||
}
|
||||
&:nth-of-type(even) {
|
||||
background-color: #1e1e1e;
|
||||
}
|
||||
.td {
|
||||
padding: 8px;
|
||||
border-top: 1px solid #565656;
|
||||
border-bottom: 1px solid #565656;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
&:not(:last-of-type) {
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
&:not(:first-of-type) {
|
||||
margin-top: -1px;
|
||||
|
||||
&:nth-of-type(odd) .td {
|
||||
background-color: #303030;
|
||||
}
|
||||
&:hover {
|
||||
color: white;
|
||||
&:nth-of-type(even) .td {
|
||||
background-color: #1e1e1e;
|
||||
}
|
||||
`,
|
||||
BaseCell: `
|
||||
border-top: 1px solid transparent;
|
||||
border-right: 1px solid transparent;
|
||||
border-bottom: 1px solid transparent;
|
||||
&:nth-of-type(2) {
|
||||
text-align: center;
|
||||
}
|
||||
&:last-of-type {
|
||||
text-align: right;
|
||||
}
|
||||
`
|
||||
});
|
||||
|
||||
@@ -130,22 +131,22 @@ const ManageUsersForm: FC = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Table data={{ nodes: user_table }} theme={table_theme}>
|
||||
<Table data={{ nodes: user_table }} theme={table_theme} layout={{ custom: true }}>
|
||||
{(tableList: any) => (
|
||||
<>
|
||||
<Header>
|
||||
<HeaderRow>
|
||||
<HeaderCell>USERNAME</HeaderCell>
|
||||
<HeaderCell>IS ADMIN</HeaderCell>
|
||||
<HeaderCell />
|
||||
<HeaderCell resize>USERNAME</HeaderCell>
|
||||
<HeaderCell stiff>IS ADMIN</HeaderCell>
|
||||
<HeaderCell stiff />
|
||||
</HeaderRow>
|
||||
</Header>
|
||||
<Body>
|
||||
{tableList.map((u: any) => (
|
||||
<Row key={u.id} item={u}>
|
||||
<Cell>{u.username}</Cell>
|
||||
<Cell>{u.admin ? <CheckIcon /> : <CloseIcon />}</Cell>
|
||||
<Cell>
|
||||
<Cell stiff>{u.admin ? <CheckIcon /> : <CloseIcon />}</Cell>
|
||||
<Cell stiff>
|
||||
<IconButton
|
||||
size="small"
|
||||
disabled={!authenticatedContext.me.admin}
|
||||
|
||||
@@ -88,183 +88,119 @@ const DashboardData: FC = () => {
|
||||
const [deviceDialog, setDeviceDialog] = useState<number>(-1);
|
||||
const [onlyFav, setOnlyFav] = useState(false);
|
||||
|
||||
const device_theme = useTheme({
|
||||
const common_theme = useTheme({
|
||||
BaseRow: `
|
||||
font-size: 14px;
|
||||
color: white;
|
||||
height: 46px;
|
||||
&:focus {
|
||||
z-index: 2;
|
||||
border-top: 1px solid #177ac9;
|
||||
border-bottom: 1px solid #177ac9;
|
||||
}
|
||||
`,
|
||||
HeaderRow: `
|
||||
text-transform: uppercase;
|
||||
background-color: black;
|
||||
color: #90CAF9;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
font-weight: 500;
|
||||
|
||||
.th {
|
||||
border-bottom: 1px solid #565656;
|
||||
}
|
||||
`,
|
||||
Row: `
|
||||
background-color: #1e1e1e;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
|
||||
.td {
|
||||
padding: 8px;
|
||||
border-top: 1px solid #565656;
|
||||
border-bottom: 1px solid #565656;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
&:not(:last-of-type) {
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
&:not(:first-of-type) {
|
||||
margin-top: -1px;
|
||||
}
|
||||
&:hover {
|
||||
z-index: 2;
|
||||
color: white;
|
||||
border-top: 1px solid #177ac9;
|
||||
border-bottom: 1px solid #177ac9;
|
||||
},
|
||||
&.tr.tr-body.row-select.row-select-single-selected, &.tr.tr-body.row-select.row-select-selected {
|
||||
|
||||
&.tr.tr-body.row-select.row-select-single-selected {
|
||||
background-color: #3d4752;
|
||||
color: white;
|
||||
font-weight: normal;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
&:hover .td {
|
||||
border-top: 1px solid #177ac9;
|
||||
border-bottom: 1px solid #177ac9;
|
||||
}
|
||||
`,
|
||||
BaseCell: `
|
||||
border-top: 1px solid transparent;
|
||||
border-right: 1px solid transparent;
|
||||
border-bottom: 1px solid transparent;
|
||||
&:not(.stiff) > div {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
&:nth-of-type(1) {
|
||||
padding-left: 8px;
|
||||
min-width: 42px;
|
||||
width: 42px;
|
||||
div {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
&:nth-of-type(2) {
|
||||
min-width: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
&:nth-of-type(3) {
|
||||
flex: 1;
|
||||
}
|
||||
&:nth-of-type(4) {
|
||||
text-align: center;
|
||||
max-width: 100px;
|
||||
}
|
||||
Cell: `
|
||||
&:last-of-type {
|
||||
padding-left: 0px;
|
||||
text-align: center;
|
||||
width: 32px;
|
||||
min-width: 32px;
|
||||
max-width: 32px;
|
||||
}
|
||||
text-align: right;
|
||||
},
|
||||
`
|
||||
});
|
||||
|
||||
const data_theme = useTheme({
|
||||
const device_theme = useTheme([
|
||||
common_theme,
|
||||
{
|
||||
Table: `
|
||||
--data-table-library_grid-template-columns: 40px 100px repeat(1, minmax(0, 1fr)) 80px 40px;
|
||||
`,
|
||||
BaseRow: `
|
||||
font-size: 14px;
|
||||
color: white;
|
||||
min-height: 32px;
|
||||
`,
|
||||
HeaderRow: `
|
||||
text-transform: uppercase;
|
||||
background-color: black;
|
||||
color: #90CAF9;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
font-weight: 500;
|
||||
`,
|
||||
Row: `
|
||||
&:nth-of-type(odd) {
|
||||
background-color: #303030;
|
||||
}
|
||||
&:nth-of-type(even) {
|
||||
background-color: #1e1e1e;
|
||||
}
|
||||
border-top: 1px solid #565656;
|
||||
border-bottom: 1px solid #565656;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
&:not(:last-of-type) {
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
&:not(:first-of-type) {
|
||||
margin-top: -1px;
|
||||
}
|
||||
&:hover {
|
||||
z-index: 2;
|
||||
border-top: 1px solid #177ac9;
|
||||
border-bottom: 1px solid #177ac9;
|
||||
color: white;
|
||||
.td {
|
||||
height: 42px;
|
||||
}
|
||||
`,
|
||||
BaseCell: `
|
||||
padding-left: 16px;
|
||||
cursor: pointer;
|
||||
border-top: 1px solid transparent;
|
||||
border-right: 1px solid transparent;
|
||||
border-bottom: 1px solid transparent;
|
||||
&:not(.stiff) > div {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
&:nth-of-type(1) {
|
||||
width: 260px;
|
||||
}
|
||||
&:nth-of-type(2) {
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
}
|
||||
&:last-of-type {
|
||||
padding-left: 0px;
|
||||
text-align: left;
|
||||
},
|
||||
&:nth-of-type(4) {
|
||||
text-align: center;
|
||||
width: 32px;
|
||||
min-width: 32px;
|
||||
max-width: 32px;
|
||||
}
|
||||
`,
|
||||
HeaderCell: `
|
||||
&:not(:last-of-type) {
|
||||
padding-left: 8px;
|
||||
border-left: 1px solid #565656;
|
||||
HeaderRow: `
|
||||
.th {
|
||||
padding: 8px;
|
||||
height: 42px;
|
||||
font-weight: 500;
|
||||
`
|
||||
}
|
||||
&:first-of-type {
|
||||
border-left: 0px;
|
||||
]);
|
||||
|
||||
const data_theme = useTheme([
|
||||
common_theme,
|
||||
{
|
||||
Table: `
|
||||
--data-table-library_grid-template-columns: repeat(1, minmax(0, 1fr)) 200px 40px;
|
||||
`,
|
||||
BaseRow: `
|
||||
.td {
|
||||
height: 32px;
|
||||
}
|
||||
`,
|
||||
BaseCell: `
|
||||
&:nth-of-type(2) {
|
||||
text-align: right;
|
||||
},
|
||||
`,
|
||||
HeaderRow: `
|
||||
.th {
|
||||
height: 32px;
|
||||
}
|
||||
`,
|
||||
Row: `
|
||||
&:nth-of-type(odd) .td {
|
||||
background-color: #303030;
|
||||
}
|
||||
`
|
||||
});
|
||||
}
|
||||
]);
|
||||
|
||||
const temperature_theme = useTheme([data_theme]);
|
||||
|
||||
const analog_theme = useTheme([
|
||||
data_theme,
|
||||
{
|
||||
Table: `
|
||||
--data-table-library_grid-template-columns: 80px repeat(1, minmax(0, 1fr)) 120px 100px 40px;
|
||||
`,
|
||||
BaseCell: `
|
||||
&:nth-of-type(1) {
|
||||
width: 100px;
|
||||
min-width: 100px;
|
||||
}
|
||||
&:nth-of-type(2) {
|
||||
text-align: left;
|
||||
}
|
||||
&:nth-of-type(3) {
|
||||
width: 100px;
|
||||
min-width: 100px;
|
||||
}
|
||||
},
|
||||
&:nth-of-type(4) {
|
||||
text-align: right;
|
||||
flex: 1;
|
||||
}
|
||||
`
|
||||
}
|
||||
@@ -536,6 +472,7 @@ const DashboardData: FC = () => {
|
||||
label={deviceValue.id.slice(2)}
|
||||
value={deviceValue.u ? numberValue(deviceValue.v) : deviceValue.v}
|
||||
autoFocus
|
||||
multiline
|
||||
sx={{ width: '30ch' }}
|
||||
type={deviceValue.u ? 'number' : 'text'}
|
||||
onChange={updateValue(setDeviceValue)}
|
||||
@@ -709,23 +646,23 @@ const DashboardData: FC = () => {
|
||||
<>
|
||||
<Header>
|
||||
<HeaderRow>
|
||||
<HeaderCell />
|
||||
<HeaderCell>TYPE</HeaderCell>
|
||||
<HeaderCell>DESCRIPTION</HeaderCell>
|
||||
<HeaderCell>ENTITIES</HeaderCell>
|
||||
<HeaderCell />
|
||||
<HeaderCell stiff />
|
||||
<HeaderCell stiff>TYPE</HeaderCell>
|
||||
<HeaderCell resize>DESCRIPTION</HeaderCell>
|
||||
<HeaderCell stiff>ENTITIES</HeaderCell>
|
||||
<HeaderCell stiff />
|
||||
</HeaderRow>
|
||||
</Header>
|
||||
<Body>
|
||||
{tableList.map((device: Device, index: number) => (
|
||||
<Row key={device.id} item={device}>
|
||||
<Cell>
|
||||
<Cell stiff>
|
||||
<DeviceIcon type={device.t} />
|
||||
</Cell>
|
||||
<Cell>{device.t}</Cell>
|
||||
<Cell stiff>{device.t}</Cell>
|
||||
<Cell>{device.n}</Cell>
|
||||
<Cell>{device.e}</Cell>
|
||||
<Cell>
|
||||
<Cell stiff>{device.e}</Cell>
|
||||
<Cell stiff>
|
||||
<IconButton size="small" onClick={() => setDeviceDialog(index)}>
|
||||
<InfoOutlinedIcon color="info" sx={{ fontSize: 16, verticalAlign: 'middle' }} />
|
||||
</IconButton>
|
||||
@@ -778,7 +715,7 @@ const DashboardData: FC = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Typography sx={{ pt: 2, pb: 1 }} variant="h6" color="primary">
|
||||
<Typography sx={{ pt: 2, pb: 1 }} variant="h6" color="secondary">
|
||||
{deviceData.label}
|
||||
</Typography>
|
||||
<FormControlLabel
|
||||
@@ -814,7 +751,7 @@ const DashboardData: FC = () => {
|
||||
ENTITY NAME
|
||||
</Button>
|
||||
</HeaderCell>
|
||||
<HeaderCell>
|
||||
<HeaderCell reszie>
|
||||
<Button
|
||||
fullWidth
|
||||
style={{ fontSize: '14px', justifyContent: 'flex-end' }}
|
||||
@@ -824,7 +761,7 @@ const DashboardData: FC = () => {
|
||||
VALUE
|
||||
</Button>
|
||||
</HeaderCell>
|
||||
<HeaderCell />
|
||||
<HeaderCell stiff />
|
||||
</HeaderRow>
|
||||
</Header>
|
||||
<Body>
|
||||
@@ -832,7 +769,7 @@ const DashboardData: FC = () => {
|
||||
<Row key={dv.id} item={dv} onClick={() => sendCommand(dv)}>
|
||||
<Cell>{renderNameCell(dv)}</Cell>
|
||||
<Cell>{formatValue(dv.v, dv.u)}</Cell>
|
||||
<Cell>
|
||||
<Cell stiff>
|
||||
{dv.c && me.admin && !hasMask(dv.id, DeviceEntityMask.DV_READONLY) && (
|
||||
<IconButton size="small" onClick={() => sendCommand(dv)}>
|
||||
{isCmdOnly(dv) ? (
|
||||
@@ -867,7 +804,7 @@ const DashboardData: FC = () => {
|
||||
|
||||
const renderDallasData = () => (
|
||||
<>
|
||||
<Typography sx={{ pt: 2, pb: 1 }} variant="h6" color="primary">
|
||||
<Typography sx={{ pt: 2, pb: 1 }} variant="h6" color="secondary">
|
||||
Temperature Sensors
|
||||
</Typography>
|
||||
<Table
|
||||
@@ -890,7 +827,7 @@ const DashboardData: FC = () => {
|
||||
NAME
|
||||
</Button>
|
||||
</HeaderCell>
|
||||
<HeaderCell>
|
||||
<HeaderCell stiff>
|
||||
<Button
|
||||
fullWidth
|
||||
style={{ fontSize: '14px', justifyContent: 'flex-end' }}
|
||||
@@ -900,7 +837,7 @@ const DashboardData: FC = () => {
|
||||
TEMPERATURE
|
||||
</Button>
|
||||
</HeaderCell>
|
||||
<HeaderCell />
|
||||
<HeaderCell stiff />
|
||||
</HeaderRow>
|
||||
</Header>
|
||||
<Body>
|
||||
@@ -926,7 +863,7 @@ const DashboardData: FC = () => {
|
||||
|
||||
const renderAnalogData = () => (
|
||||
<>
|
||||
<Typography sx={{ pt: 2, pb: 1 }} variant="h6" color="primary">
|
||||
<Typography sx={{ pt: 2, pb: 1 }} variant="h6" color="secondary">
|
||||
Analog Sensors
|
||||
</Typography>
|
||||
|
||||
@@ -935,7 +872,7 @@ const DashboardData: FC = () => {
|
||||
<>
|
||||
<Header>
|
||||
<HeaderRow>
|
||||
<HeaderCell resize>
|
||||
<HeaderCell stiff>
|
||||
<Button
|
||||
fullWidth
|
||||
style={{ fontSize: '14px', justifyContent: 'flex-start' }}
|
||||
@@ -955,7 +892,7 @@ const DashboardData: FC = () => {
|
||||
NAME
|
||||
</Button>
|
||||
</HeaderCell>
|
||||
<HeaderCell resize>
|
||||
<HeaderCell stiff>
|
||||
<Button
|
||||
fullWidth
|
||||
style={{ fontSize: '14px', justifyContent: 'flex-start' }}
|
||||
@@ -965,18 +902,18 @@ const DashboardData: FC = () => {
|
||||
TYPE
|
||||
</Button>
|
||||
</HeaderCell>
|
||||
<HeaderCell>VALUE</HeaderCell>
|
||||
<HeaderCell />
|
||||
<HeaderCell stiff>VALUE</HeaderCell>
|
||||
<HeaderCell stiff />
|
||||
</HeaderRow>
|
||||
</Header>
|
||||
<Body>
|
||||
{tableList.map((a: Analog) => (
|
||||
<Row key={a.id} item={a} onClick={() => updateAnalog(a)}>
|
||||
<Cell>{a.g}</Cell>
|
||||
<Cell stiff>{a.g}</Cell>
|
||||
<Cell>{a.n}</Cell>
|
||||
<Cell>{AnalogTypeNames[a.t]} </Cell>
|
||||
<Cell>{a.t ? formatValue(a.v, a.u) : ''}</Cell>
|
||||
<Cell>
|
||||
<Cell stiff>{AnalogTypeNames[a.t]} </Cell>
|
||||
<Cell stiff>{a.t ? formatValue(a.v, a.u) : ''}</Cell>
|
||||
<Cell stiff>
|
||||
{me.admin && (
|
||||
<IconButton onClick={() => updateAnalog(a)}>
|
||||
<EditIcon color="primary" sx={{ fontSize: 16 }} />
|
||||
|
||||
@@ -88,65 +88,40 @@ const DashboardStatus: FC = () => {
|
||||
const { me } = useContext(AuthenticatedContext);
|
||||
|
||||
const stats_theme = tableTheme({
|
||||
Table: `
|
||||
--data-table-library_grid-template-columns: repeat(1, minmax(0, 1fr)) 90px 90px 80px;
|
||||
`,
|
||||
BaseRow: `
|
||||
font-size: 14px;
|
||||
color: white;
|
||||
height: 32px;
|
||||
`,
|
||||
HeaderRow: `
|
||||
text-transform: uppercase;
|
||||
background-color: black;
|
||||
color: #90CAF9;
|
||||
|
||||
.th {
|
||||
height: 42px;
|
||||
font-weight: 500;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
padding-left: 8px;
|
||||
border-bottom: 1px solid #565656;
|
||||
}
|
||||
`,
|
||||
Row: `
|
||||
&:nth-of-type(odd) {
|
||||
background-color: #303030;
|
||||
}
|
||||
&:nth-of-type(even) {
|
||||
background-color: #1e1e1e;
|
||||
}
|
||||
.td {
|
||||
padding: 8px;
|
||||
border-top: 1px solid #565656;
|
||||
border-bottom: 1px solid #565656;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
&:not(:last-of-type) {
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
&:not(:first-of-type) {
|
||||
margin-top: -1px;
|
||||
|
||||
&:nth-of-type(odd) .td {
|
||||
background-color: #303030;
|
||||
}
|
||||
&:hover {
|
||||
color: white;
|
||||
&:nth-of-type(even) .td {
|
||||
background-color: #1e1e1e;
|
||||
}
|
||||
`,
|
||||
BaseCell: `
|
||||
border-top: 1px solid transparent;
|
||||
border-right: 1px solid transparent;
|
||||
border-bottom: 1px solid transparent;
|
||||
&:not(.stiff) > div {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
&:nth-of-type(1) {
|
||||
padding-left: 8px;
|
||||
flex: 1;
|
||||
}
|
||||
&:nth-of-type(2) {
|
||||
width: 70px;
|
||||
text-align: right;
|
||||
}
|
||||
&:nth-of-type(3) {
|
||||
width: 40px;
|
||||
text-align: right;
|
||||
}
|
||||
&:last-of-type {
|
||||
width: 75px;
|
||||
text-align: right;
|
||||
padding-right: 8px;
|
||||
&:not(:first-of-type) {
|
||||
text-align: center;
|
||||
}
|
||||
`
|
||||
});
|
||||
@@ -224,19 +199,19 @@ const DashboardStatus: FC = () => {
|
||||
<>
|
||||
<Header>
|
||||
<HeaderRow>
|
||||
<HeaderCell></HeaderCell>
|
||||
<HeaderCell>SUCCESS</HeaderCell>
|
||||
<HeaderCell>FAIL</HeaderCell>
|
||||
<HeaderCell>QUALITY</HeaderCell>
|
||||
<HeaderCell resize></HeaderCell>
|
||||
<HeaderCell stiff>SUCCESS</HeaderCell>
|
||||
<HeaderCell stiff>FAIL</HeaderCell>
|
||||
<HeaderCell stiff>QUALITY</HeaderCell>
|
||||
</HeaderRow>
|
||||
</Header>
|
||||
<Body>
|
||||
{tableList.map((stat: Stat) => (
|
||||
<Row key={stat.id} item={stat}>
|
||||
<Cell>{stat.id}</Cell>
|
||||
<Cell>{Intl.NumberFormat().format(stat.s)}</Cell>
|
||||
<Cell>{Intl.NumberFormat().format(stat.f)}</Cell>
|
||||
<Cell>{showQuality(stat)}</Cell>
|
||||
<Cell stiff>{Intl.NumberFormat().format(stat.s)}</Cell>
|
||||
<Cell stiff>{Intl.NumberFormat().format(stat.f)}</Cell>
|
||||
<Cell stiff>{showQuality(stat)}</Cell>
|
||||
</Row>
|
||||
))}
|
||||
</Body>
|
||||
|
||||
@@ -63,80 +63,65 @@ const SettingsCustomization: FC = () => {
|
||||
const [masks, setMasks] = useState(() => ['']);
|
||||
|
||||
const entities_theme = useTheme({
|
||||
Table: `
|
||||
--data-table-library_grid-template-columns: 120px repeat(1, minmax(0, 1fr)) 120px;
|
||||
`,
|
||||
BaseRow: `
|
||||
font-size: 14px;
|
||||
color: white;
|
||||
.td {
|
||||
height: 32px;
|
||||
min-height: 32px;
|
||||
}
|
||||
`,
|
||||
BaseCell: `
|
||||
&:last-of-type {
|
||||
text-align: right;
|
||||
}
|
||||
`,
|
||||
HeaderRow: `
|
||||
text-transform: uppercase;
|
||||
background-color: black;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
color: #90CAF9;
|
||||
|
||||
.th {
|
||||
border-bottom: 1px solid #565656;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&:nth-of-type(1) .th {
|
||||
text-align: center;
|
||||
}
|
||||
`,
|
||||
Row: `
|
||||
background-color: #1e1e1e;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
|
||||
.td {
|
||||
border-top: 1px solid #565656;
|
||||
border-bottom: 1px solid #565656;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
&:not(:last-of-type) {
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
&:not(:first-of-type) {
|
||||
margin-top: -1px;
|
||||
}
|
||||
&:hover {
|
||||
z-index: 2;
|
||||
color: white;
|
||||
border-top: 1px solid #177ac9;
|
||||
border-bottom: 1px solid #177ac9;
|
||||
},
|
||||
&.tr.tr-body.row-select.row-select-single-selected, &.tr.tr-body.row-select.row-select-selected {
|
||||
|
||||
&.tr.tr-body.row-select.row-select-single-selected {
|
||||
background-color: #3d4752;
|
||||
color: white;
|
||||
font-weight: normal;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
&:hover .td {
|
||||
border-top: 1px solid #177ac9;
|
||||
border-bottom: 1px solid #177ac9;
|
||||
}
|
||||
|
||||
&:nth-of-type(odd) .td {
|
||||
background-color: #303030;
|
||||
}
|
||||
`,
|
||||
BaseCell: `
|
||||
border-top: 1px solid transparent;
|
||||
border-right: 1px solid transparent;
|
||||
border-bottom: 1px solid transparent;
|
||||
&:not(.stiff) > div {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
&:nth-of-type(1) {
|
||||
width: 120px;
|
||||
min-width: 120px;
|
||||
max-width: 120px;
|
||||
}
|
||||
Cell: `
|
||||
&:nth-of-type(2) {
|
||||
padding-left: 8px;
|
||||
flex: 1;
|
||||
padding: 8px;
|
||||
}
|
||||
&:nth-of-type(3) {
|
||||
&:last-of-type {
|
||||
padding-right: 8px;
|
||||
text-align: right;
|
||||
width: 120px;
|
||||
min-width: 120px;
|
||||
}
|
||||
`,
|
||||
HeaderCell: `
|
||||
&:nth-of-type(1) {
|
||||
padding-left: 24px;
|
||||
}
|
||||
&:nth-of-type(2) {
|
||||
padding-left: 0px;
|
||||
}
|
||||
&:not(:last-of-type) {
|
||||
border-right: 1px solid #565656;
|
||||
}
|
||||
`
|
||||
});
|
||||
@@ -451,7 +436,7 @@ const SettingsCustomization: FC = () => {
|
||||
<>
|
||||
<Header>
|
||||
<HeaderRow>
|
||||
<HeaderCell>OPTIONS</HeaderCell>
|
||||
<HeaderCell stiff>OPTIONS</HeaderCell>
|
||||
<HeaderCell resize>
|
||||
<Button
|
||||
fullWidth
|
||||
@@ -462,13 +447,13 @@ const SettingsCustomization: FC = () => {
|
||||
NAME
|
||||
</Button>
|
||||
</HeaderCell>
|
||||
<HeaderCell>VALUE</HeaderCell>
|
||||
<HeaderCell resize>VALUE</HeaderCell>
|
||||
</HeaderRow>
|
||||
</Header>
|
||||
<Body>
|
||||
{tableList.map((de: DeviceEntity) => (
|
||||
<Row key={de.id} item={de}>
|
||||
<Cell>
|
||||
<Cell stiff>
|
||||
<ToggleButtonGroup
|
||||
size="small"
|
||||
color="secondary"
|
||||
|
||||
Reference in New Issue
Block a user