From 8e65e31ed6d5f7111e0be2bb2f148a5281118b69 Mon Sep 17 00:00:00 2001 From: Proddy Date: Tue, 3 May 2022 19:50:07 +0200 Subject: [PATCH 1/2] table formatting --- interface/package-lock.json | 48 +++++----- interface/package.json | 2 +- interface/src/project/DashboardData.tsx | 94 +++++++++++++------ .../src/project/SettingsCustomization.tsx | 28 +++--- 4 files changed, 107 insertions(+), 65 deletions(-) diff --git a/interface/package-lock.json b/interface/package-lock.json index 080159463..d40e263ce 100644 --- a/interface/package-lock.json +++ b/interface/package-lock.json @@ -29,7 +29,7 @@ "react": "^17.0.2", "react-app-rewired": "^2.2.1", "react-dom": "^17.0.2", - "react-dropzone": "^14.1.1", + "react-dropzone": "^14.2.0", "react-icons": "^4.3.1", "react-router-dom": "^6.3.0", "react-scripts": "5.0.1", @@ -7976,14 +7976,14 @@ } }, "node_modules/file-selector": { - "version": "0.5.0", - "resolved": "https://registry.npmjs.org/file-selector/-/file-selector-0.5.0.tgz", - "integrity": "sha512-s8KNnmIDTBoD0p9uJ9uD0XY38SCeBOtj0UMXyQSLg1Ypfrfj8+dAvwsLjYQkQ2GjhVtp2HrnF5cJzMhBjfD8HA==", + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/file-selector/-/file-selector-0.6.0.tgz", + "integrity": "sha512-QlZ5yJC0VxHxQQsQhXvBaC7VRJ2uaxTf+Tfpu4Z/OcVQJVpZO+DGU0rkoVW5ce2SccxugvpBJoMvUs59iILYdw==", "dependencies": { - "tslib": "^2.0.3" + "tslib": "^2.4.0" }, "engines": { - "node": ">= 10" + "node": ">= 12" } }, "node_modules/filelist": { @@ -14437,12 +14437,12 @@ } }, "node_modules/react-dropzone": { - "version": "14.1.1", - "resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-14.1.1.tgz", - "integrity": "sha512-JYavQrxU66hBHwDAXCMoHNvhMonKDA0VQ8ouJi8Ouxgz9lmtA4OGVBXgOTCq4vCbwTTDT9synvNUCIpT6zWWow==", + "version": "14.2.0", + "resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-14.2.0.tgz", + "integrity": "sha512-D7AXPtRba8rd7DBOejh3W2v1Uax6i7XKPYPuMr13XFPfnDcPHHvlEfp3raVpdj3XMHlRfYuf2H5+m8p7mlgKdQ==", "dependencies": { "attr-accept": "^2.2.2", - "file-selector": "^0.5.0", + "file-selector": "^0.6.0", "prop-types": "^15.8.1" }, "engines": { @@ -16294,9 +16294,9 @@ } }, "node_modules/tslib": { - "version": "2.3.1", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz", - "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==" + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz", + "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==" }, "node_modules/tsutils": { "version": "3.21.0", @@ -23280,11 +23280,11 @@ } }, "file-selector": { - "version": "0.5.0", - "resolved": "https://registry.npmjs.org/file-selector/-/file-selector-0.5.0.tgz", - "integrity": "sha512-s8KNnmIDTBoD0p9uJ9uD0XY38SCeBOtj0UMXyQSLg1Ypfrfj8+dAvwsLjYQkQ2GjhVtp2HrnF5cJzMhBjfD8HA==", + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/file-selector/-/file-selector-0.6.0.tgz", + "integrity": "sha512-QlZ5yJC0VxHxQQsQhXvBaC7VRJ2uaxTf+Tfpu4Z/OcVQJVpZO+DGU0rkoVW5ce2SccxugvpBJoMvUs59iILYdw==", "requires": { - "tslib": "^2.0.3" + "tslib": "^2.4.0" } }, "filelist": { @@ -27793,12 +27793,12 @@ } }, "react-dropzone": { - "version": "14.1.1", - "resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-14.1.1.tgz", - "integrity": "sha512-JYavQrxU66hBHwDAXCMoHNvhMonKDA0VQ8ouJi8Ouxgz9lmtA4OGVBXgOTCq4vCbwTTDT9synvNUCIpT6zWWow==", + "version": "14.2.0", + "resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-14.2.0.tgz", + "integrity": "sha512-D7AXPtRba8rd7DBOejh3W2v1Uax6i7XKPYPuMr13XFPfnDcPHHvlEfp3raVpdj3XMHlRfYuf2H5+m8p7mlgKdQ==", "requires": { "attr-accept": "^2.2.2", - "file-selector": "^0.5.0", + "file-selector": "^0.6.0", "prop-types": "^15.8.1" } }, @@ -29185,9 +29185,9 @@ } }, "tslib": { - "version": "2.3.1", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz", - "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==" + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz", + "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==" }, "tsutils": { "version": "3.21.0", diff --git a/interface/package.json b/interface/package.json index bc5abb306..837318bef 100644 --- a/interface/package.json +++ b/interface/package.json @@ -25,7 +25,7 @@ "react": "^17.0.2", "react-app-rewired": "^2.2.1", "react-dom": "^17.0.2", - "react-dropzone": "^14.1.1", + "react-dropzone": "^14.2.0", "react-icons": "^4.3.1", "react-router-dom": "^6.3.0", "react-scripts": "5.0.1", diff --git a/interface/src/project/DashboardData.tsx b/interface/src/project/DashboardData.tsx index e657af94b..f768c924c 100644 --- a/interface/src/project/DashboardData.tsx +++ b/interface/src/project/DashboardData.tsx @@ -206,34 +206,63 @@ const DashboardData: FC = () => { 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: 16px; + width: 260px; + min-width: 260px; } - &:nth-of-type(4) { - padding-left: 16px; - } - width: 124px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - &:last-of-type { + &: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: ` - padding-left: 8px; - &:nth-of-type(1) { - padding-left: 8px; - } - &:nth-of-type(4) { - padding-left: 16px; - } &:not(:last-of-type) { - border-right: 1px solid #565656; + padding-left: 8px; + border-left: 1px solid #565656; + } + &:first-of-type { + border-left: 0px; } ` }); + const temperature_theme = useTheme([data_theme]); + + const analog_theme = useTheme([ + data_theme, + { + 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; + } + ` + } + ]); + const getSortIcon = (state: any, sortKey: any) => { if (state.sortKey === sortKey && state.reverse) { return ; @@ -746,12 +775,15 @@ const DashboardData: FC = () => { {deviceData.label} - setOnlyFav(!onlyFav)} />} - label={show only favorites} + label={ + + only show favorites  + + + } /> - { }} theme={data_theme} sort={dv_sort} - // layout={{ custom: true }} + layout={{ custom: true }} > {(tableList: any) => ( <> @@ -776,10 +808,10 @@ const DashboardData: FC = () => { ENTITY NAME - +
+
{(tableList: any) => ( <>
@@ -848,10 +884,10 @@ const DashboardData: FC = () => { NAME - +
+
{(tableList: any) => ( <>
@@ -923,7 +959,7 @@ const DashboardData: FC = () => { TYPE - VALUE + VALUE
diff --git a/interface/src/project/SettingsCustomization.tsx b/interface/src/project/SettingsCustomization.tsx index fd0703a6f..05dca4571 100644 --- a/interface/src/project/SettingsCustomization.tsx +++ b/interface/src/project/SettingsCustomization.tsx @@ -100,22 +100,28 @@ const SettingsCustomization: FC = () => { } `, BaseCell: ` - padding-left: 8px; border-top: 1px solid transparent; border-right: 1px solid transparent; border-bottom: 1px solid transparent; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; + &:not(.stiff) > div { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } &:nth-of-type(1) { - left: 0px; - min-width: 124px; - width: 124px; - padding-left: 0px; + width: 120px; + min-width: 120px; + max-width: 120px; } &:nth-of-type(2) { - min-width: 70%; - width: 70%; + padding-left: 8px; + flex: 1; + } + &:nth-of-type(3) { + padding-right: 8px; + text-align: right; + width: 120px; + min-width: 120px; } `, HeaderCell: ` @@ -435,7 +441,7 @@ const SettingsCustomization: FC = () => { NAME - VALUE + VALUE From 501726c6ad2fa55b27360409b632f4850201a4e4 Mon Sep 17 00:00:00 2001 From: Proddy Date: Tue, 3 May 2022 22:20:55 +0200 Subject: [PATCH 2/2] remove comments, render nicer on mobiles --- interface/src/CustomTheme.tsx | 20 ++------------- interface/src/components/MessageBox.tsx | 1 - .../src/components/layout/LayoutAppBar.tsx | 1 - .../src/components/layout/LayoutDrawer.tsx | 2 +- interface/src/project/DashboardData.tsx | 25 +++++++++++-------- interface/src/project/DashboardStatus.tsx | 18 ++++++------- 6 files changed, 26 insertions(+), 41 deletions(-) diff --git a/interface/src/CustomTheme.tsx b/interface/src/CustomTheme.tsx index 6e04783c2..d83ffeece 100644 --- a/interface/src/CustomTheme.tsx +++ b/interface/src/CustomTheme.tsx @@ -11,28 +11,12 @@ const theme = responsiveFontSizes( }, palette: { mode: 'dark', - // background: { - // default: grey[900], // #212121 - // // paper: grey[800] - // }, - // primary: { - // main: '#33bfff' - // }, secondary: { - main: blue[500] // in buttons + main: blue[500] }, info: { - main: blueGrey[500] // used in icons + main: blueGrey[500] } - // warning: { - // main: orange[500] - // }, - // error: { - // main: red[200] - // }, - // success: { - // main: green[700] - // } } }) ); diff --git a/interface/src/components/MessageBox.tsx b/interface/src/components/MessageBox.tsx index 624f072ef..a530d8f26 100644 --- a/interface/src/components/MessageBox.tsx +++ b/interface/src/components/MessageBox.tsx @@ -32,7 +32,6 @@ const MessageBox: FC = ({ level, message, sx, children, ...rest const theme = useTheme(); const Icon = LEVEL_ICONS[level]; const backgroundColor = LEVEL_BACKGROUNDS[level](theme); - // const color = theme.palette.getContrastText(backgroundColor); const color = 'white'; return ( diff --git a/interface/src/components/layout/LayoutAppBar.tsx b/interface/src/components/layout/LayoutAppBar.tsx index 604774250..74e06fdfd 100644 --- a/interface/src/components/layout/LayoutAppBar.tsx +++ b/interface/src/components/layout/LayoutAppBar.tsx @@ -25,7 +25,6 @@ const LayoutAppBar: FC = ({ title, onToggleDrawer }) => { ml: { md: `${DRAWER_WIDTH}px` }, boxShadow: 'none', backgroundColor: '#2e586a' - // color: "#2196f3", }} > diff --git a/interface/src/components/layout/LayoutDrawer.tsx b/interface/src/components/layout/LayoutDrawer.tsx index d1a6987af..da61c62f4 100644 --- a/interface/src/components/layout/LayoutDrawer.tsx +++ b/interface/src/components/layout/LayoutDrawer.tsx @@ -47,7 +47,7 @@ const LayoutDrawer: FC = ({ mobileOpen, onClose }) => { open={mobileOpen} onClose={onClose} ModalProps={{ - keepMounted: true // Better open performance on mobile. + keepMounted: true }} sx={{ display: { xs: 'block', md: 'none' }, diff --git a/interface/src/project/DashboardData.tsx b/interface/src/project/DashboardData.tsx index f768c924c..827120708 100644 --- a/interface/src/project/DashboardData.tsx +++ b/interface/src/project/DashboardData.tsx @@ -137,6 +137,11 @@ const DashboardData: FC = () => { 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; @@ -146,8 +151,8 @@ const DashboardData: FC = () => { } } &:nth-of-type(2) { - min-width: 120px; - width: 120px; + min-width: 100px; + width: 100px; } &:nth-of-type(3) { flex: 1; @@ -157,8 +162,11 @@ const DashboardData: FC = () => { max-width: 100px; } &:last-of-type { - text-align: right; - min-width: 64px; + padding-left: 0px; + text-align: center; + width: 32px; + min-width: 32px; + max-width: 32px; } ` }); @@ -213,7 +221,6 @@ const DashboardData: FC = () => { } &:nth-of-type(1) { width: 260px; - min-width: 260px; } &:nth-of-type(2) { flex: 1; @@ -700,8 +707,8 @@ const DashboardData: FC = () => {
- TYPE - DESCRIPTION + TYPE + DESCRIPTION ENTITIES @@ -710,9 +717,7 @@ const DashboardData: FC = () => { {tableList.map((device: Device, index: number) => ( - {/* refreshDataIndex(device.id)}> */} - {/* */} {device.t} {device.n} @@ -727,9 +732,7 @@ const DashboardData: FC = () => { {(coreData.active_sensors > 0 || coreData.analog_enabled) && ( - {/* refreshDataIndex('sensor')}> */} - {/* */} Sensors Attached EMS-ESP Sensors diff --git a/interface/src/project/DashboardStatus.tsx b/interface/src/project/DashboardStatus.tsx index d97f9e0e8..1c0c4b26c 100644 --- a/interface/src/project/DashboardStatus.tsx +++ b/interface/src/project/DashboardStatus.tsx @@ -99,6 +99,7 @@ const DashboardStatus: FC = () => { color: #90CAF9; font-weight: 500; border-bottom: 1px solid #e0e0e0; + padding-left: 8px; `, Row: ` &:nth-of-type(odd) { @@ -125,26 +126,25 @@ const DashboardStatus: FC = () => { border-top: 1px solid transparent; border-right: 1px solid transparent; border-bottom: 1px solid transparent; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; + &:not(.stiff) > div { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } &:nth-of-type(1) { padding-left: 8px; flex: 1; } &:nth-of-type(2) { - min-width: 15%; - width: 15%; + width: 70px; text-align: right; } &:nth-of-type(3) { - min-width: 15%; - width: 15%; + width: 40px; text-align: right; } &:last-of-type { - min-width: 15%; - width: 15%; + width: 75px; text-align: right; padding-right: 8px; }