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