From 22595b0f24517786e611f81b064a6c3105c25042 Mon Sep 17 00:00:00 2001
From: Proddy <paul@derbyshire.nl>
Date: Mon, 18 Apr 2022 12:54:44 +0200
Subject: [PATCH] show resize column header bars, disable default sorting

---
 interface/src/project/DashboardData.tsx       | 39 +++++++------------
 .../src/project/SettingsCustomization.tsx     | 18 +++++----
 src/version.h                                 |  2 +-
 3 files changed, 25 insertions(+), 34 deletions(-)

diff --git a/interface/src/project/DashboardData.tsx b/interface/src/project/DashboardData.tsx
index ca072071d..a4e32ae00 100644
--- a/interface/src/project/DashboardData.tsx
+++ b/interface/src/project/DashboardData.tsx
@@ -42,6 +42,7 @@ import EditOffOutlinedIcon from '@mui/icons-material/EditOffOutlined';
 import CommentsDisabledOutlinedIcon from '@mui/icons-material/CommentsDisabledOutlined';
 import KeyboardArrowUpOutlinedIcon from '@mui/icons-material/KeyboardArrowUpOutlined';
 import KeyboardArrowDownOutlinedIcon from '@mui/icons-material/KeyboardArrowDownOutlined';
+import UnfoldMoreOutlinedIcon from '@mui/icons-material/UnfoldMoreOutlined';
 import StarIcon from '@mui/icons-material/Star';
 
 import DeviceIcon from './DeviceIcon';
@@ -208,6 +209,9 @@ const DashboardData: FC = () => {
     `,
     HeaderCell: `
       padding-left: 0px;
+      &:not(:last-of-type) {
+        border-right: 1px solid #565656;
+      }
     `
   });
 
@@ -215,23 +219,18 @@ const DashboardData: FC = () => {
     if (state.sortKey === sortKey && state.reverse) {
       return <KeyboardArrowDownOutlinedIcon />;
     }
-
     if (state.sortKey === sortKey && !state.reverse) {
       return <KeyboardArrowUpOutlinedIcon />;
     }
+    return <UnfoldMoreOutlinedIcon />;
   };
 
   const analog_sort = useSort(
     { nodes: sensorData.analogs },
-    {
-      state: {
-        sortKey: 'GPIO',
-        reverse: false
-      }
-    },
+    {},
     {
       sortIcon: {
-        iconDefault: null,
+        iconDefault: <UnfoldMoreOutlinedIcon />,
         iconUp: <KeyboardArrowUpOutlinedIcon />,
         iconDown: <KeyboardArrowDownOutlinedIcon />
       },
@@ -246,15 +245,10 @@ const DashboardData: FC = () => {
 
   const sensor_sort = useSort(
     { nodes: sensorData.sensors },
-    {
-      state: {
-        sortKey: 'NAME',
-        reverse: false
-      }
-    },
+    {},
     {
       sortIcon: {
-        iconDefault: null,
+        iconDefault: <UnfoldMoreOutlinedIcon />,
         iconUp: <KeyboardArrowUpOutlinedIcon />,
         iconDown: <KeyboardArrowDownOutlinedIcon />
       },
@@ -267,15 +261,10 @@ const DashboardData: FC = () => {
 
   const dv_sort = useSort(
     { nodes: deviceData.data },
-    {
-      state: {
-        sortKey: 'NAME',
-        reverse: false
-      }
-    },
+    {},
     {
       sortIcon: {
-        iconDefault: null,
+        iconDefault: <UnfoldMoreOutlinedIcon />,
         iconUp: <KeyboardArrowUpOutlinedIcon />,
         iconDown: <KeyboardArrowDownOutlinedIcon />
       },
@@ -759,7 +748,7 @@ const DashboardData: FC = () => {
                       ENTITY NAME
                     </Button>
                   </HeaderCell>
-                  <HeaderCell>
+                  <HeaderCell resize>
                     <Button
                       fullWidth
                       style={{ fontSize: '14px', justifyContent: 'flex-start' }}
@@ -831,7 +820,7 @@ const DashboardData: FC = () => {
                     NAME
                   </Button>
                 </HeaderCell>
-                <HeaderCell>
+                <HeaderCell resize>
                   <Button
                     fullWidth
                     style={{ fontSize: '14px', justifyContent: 'flex-start' }}
@@ -906,7 +895,7 @@ const DashboardData: FC = () => {
                     TYPE
                   </Button>
                 </HeaderCell>
-                <HeaderCell>
+                <HeaderCell resize>
                   <Button
                     fullWidth
                     style={{ fontSize: '14px', justifyContent: 'flex-start' }}
diff --git a/interface/src/project/SettingsCustomization.tsx b/interface/src/project/SettingsCustomization.tsx
index 801cf228a..5f537fcb9 100644
--- a/interface/src/project/SettingsCustomization.tsx
+++ b/interface/src/project/SettingsCustomization.tsx
@@ -31,6 +31,7 @@ import CommentsDisabledOutlinedIcon from '@mui/icons-material/CommentsDisabledOu
 import SettingsBackupRestoreIcon from '@mui/icons-material/SettingsBackupRestore';
 import KeyboardArrowUpOutlinedIcon from '@mui/icons-material/KeyboardArrowUpOutlined';
 import KeyboardArrowDownOutlinedIcon from '@mui/icons-material/KeyboardArrowDownOutlined';
+import UnfoldMoreOutlinedIcon from '@mui/icons-material/UnfoldMoreOutlined';
 
 import { ButtonRow, FormLoader, ValidatedTextField, SectionContent } from '../components';
 
@@ -105,6 +106,12 @@ const SettingsCustomization: FC = () => {
         min-width: 70%;
         width: 70%;
       }
+    `,
+    HeaderCell: `
+    padding-left: 0px;
+    &:nth-of-type(2) {
+      border-right: 1px solid #565656;
+    }
     `
   });
 
@@ -112,23 +119,18 @@ const SettingsCustomization: FC = () => {
     if (state.sortKey === sortKey && state.reverse) {
       return <KeyboardArrowDownOutlinedIcon />;
     }
-
     if (state.sortKey === sortKey && !state.reverse) {
       return <KeyboardArrowUpOutlinedIcon />;
     }
+    return <UnfoldMoreOutlinedIcon />;
   };
 
   const entity_sort = useSort(
     { nodes: deviceEntities },
-    {
-      state: {
-        sortKey: 'NAME',
-        reverse: false
-      }
-    },
+    {},
     {
       sortIcon: {
-        iconDefault: null,
+        iconDefault: <UnfoldMoreOutlinedIcon />,
         iconUp: <KeyboardArrowUpOutlinedIcon />,
         iconDown: <KeyboardArrowDownOutlinedIcon />
       },
diff --git a/src/version.h b/src/version.h
index bc33dab7b..7814cfaf4 100644
--- a/src/version.h
+++ b/src/version.h
@@ -1 +1 @@
-#define EMSESP_APP_VERSION "3.4.0b12t"
+#define EMSESP_APP_VERSION "3.4.0b12t2"