diff --git a/interface/src/framework/security/ManageUsersForm.tsx b/interface/src/framework/security/ManageUsersForm.tsx index 8d14d1087..c7b9324b8 100644 --- a/interface/src/framework/security/ManageUsersForm.tsx +++ b/interface/src/framework/security/ManageUsersForm.tsx @@ -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; - font-weight: 500; - border-bottom: 1px solid #e0e0e0; + .th { + padding: 8px; + height: 42px; + font-weight: 500; + border-bottom: 1px solid #565656; + } `, Row: ` - &:nth-of-type(odd) { + .td { + padding: 8px; + border-top: 1px solid #565656; + border-bottom: 1px solid #565656; + } + + &:nth-of-type(odd) .td { background-color: #303030; } - &:nth-of-type(even) { + &:nth-of-type(even) .td { 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 { - color: white; - } `, 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 ( <> - +
{(tableList: any) => ( <>
- USERNAME - IS ADMIN - + USERNAME + IS ADMIN +
{tableList.map((u: any) => ( {u.username} - {u.admin ? : } - + {u.admin ? : } + { const [deviceDialog, setDeviceDialog] = useState(-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; - 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 { + padding: 8px; + 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; } `, - 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({ - 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; - } - `, - 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: center; - width: 32px; - min-width: 32px; - max-width: 32px; - } - `, - HeaderCell: ` - &:not(:last-of-type) { - padding-left: 8px; - border-left: 1px solid #565656; - } - &:first-of-type { - border-left: 0px; - } - ` - }); + const device_theme = useTheme([ + common_theme, + { + Table: ` + --data-table-library_grid-template-columns: 40px 100px repeat(1, minmax(0, 1fr)) 80px 40px; + `, + BaseRow: ` + .td { + height: 42px; + } + `, + BaseCell: ` + &:nth-of-type(2) { + text-align: left; + }, + &:nth-of-type(4) { + text-align: center; + } + `, + HeaderRow: ` + .th { + padding: 8px; + height: 42px; + font-weight: 500; + ` + } + ]); + + 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 = () => { <>
- - TYPE - DESCRIPTION - ENTITIES - + + TYPE + DESCRIPTION + ENTITIES +
{tableList.map((device: Device, index: number) => ( - + - {device.t} + {device.t} {device.n} - {device.e} - + {device.e} + setDeviceDialog(index)}> @@ -778,7 +715,7 @@ const DashboardData: FC = () => { return ( <> - + {deviceData.label} { ENTITY NAME - + - + @@ -832,7 +769,7 @@ const DashboardData: FC = () => { sendCommand(dv)}> {renderNameCell(dv)} {formatValue(dv.v, dv.u)} - + {dv.c && me.admin && !hasMask(dv.id, DeviceEntityMask.DV_READONLY) && ( sendCommand(dv)}> {isCmdOnly(dv) ? ( @@ -867,7 +804,7 @@ const DashboardData: FC = () => { const renderDallasData = () => ( <> - + Temperature Sensors
{ NAME - + - + @@ -926,7 +863,7 @@ const DashboardData: FC = () => { const renderAnalogData = () => ( <> - + Analog Sensors @@ -935,7 +872,7 @@ const DashboardData: FC = () => { <>
- + - + - VALUE - + VALUE +
{tableList.map((a: Analog) => ( updateAnalog(a)}> - {a.g} + {a.g} {a.n} - {AnalogTypeNames[a.t]} - {a.t ? formatValue(a.v, a.u) : ''} - + {AnalogTypeNames[a.t]} + {a.t ? formatValue(a.v, a.u) : ''} + {me.admin && ( updateAnalog(a)}> diff --git a/interface/src/project/DashboardStatus.tsx b/interface/src/project/DashboardStatus.tsx index 1c0c4b26c..28783c42d 100644 --- a/interface/src/project/DashboardStatus.tsx +++ b/interface/src/project/DashboardStatus.tsx @@ -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; - font-weight: 500; - border-bottom: 1px solid #e0e0e0; - padding-left: 8px; + + .th { + height: 42px; + font-weight: 500; + border-bottom: 1px solid #565656; + } `, Row: ` - &:nth-of-type(odd) { + .td { + padding: 8px; + border-top: 1px solid #565656; + border-bottom: 1px solid #565656; + } + + &:nth-of-type(odd) .td { background-color: #303030; } - &:nth-of-type(even) { + &:nth-of-type(even) .td { 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 { - color: white; - } `, 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 = () => { <>
- - SUCCESS - FAIL - QUALITY + + SUCCESS + FAIL + QUALITY
{tableList.map((stat: Stat) => ( {stat.id} - {Intl.NumberFormat().format(stat.s)} - {Intl.NumberFormat().format(stat.f)} - {showQuality(stat)} + {Intl.NumberFormat().format(stat.s)} + {Intl.NumberFormat().format(stat.f)} + {showQuality(stat)} ))} diff --git a/interface/src/project/SettingsCustomization.tsx b/interface/src/project/SettingsCustomization.tsx index f1527a6dc..3e74419e7 100644 --- a/interface/src/project/SettingsCustomization.tsx +++ b/interface/src/project/SettingsCustomization.tsx @@ -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 = () => { <>
- OPTIONS + OPTIONS - VALUE + VALUE
{tableList.map((de: DeviceEntity) => ( - +