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

fix table column resizing #519

Browse Source
This commit is contained in:
Proddy
2022-06-25 14:25:51 +02:00
parent 4af1de4093
commit 9639f9cee6
4 changed files with 201 additions and 303 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
interface/src/project/SettingsCustomization.tsx
View File

@@ -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;
height: 32px;
min-height: 32px;
.td {
height: 32px;
}
`,
BaseCell: `
&:last-of-type {
text-align: right;
}
`,
HeaderRow: `
text-transform: uppercase;
background-color: black;
border-bottom: 1px solid #e0e0e0;
color: #90CAF9;
font-weight: 500;
.th {
border-bottom: 1px solid #565656;
font-weight: 500;
}
&:nth-of-type(1) .th {
text-align: center;
}
`,
Row: `
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;
cursor: pointer;
.td {
border-top: 1px solid #565656;
border-bottom: 1px solid #565656;
}
&: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"