F #3951: Change header list (#504)

src/fireedge/src/client/components/FormControl/SubmitButton.js

@@ -15,9 +15,7 @@ const useStyles = makeStyles(() => ({
 }))
 
 const ButtonComponent = ({ icon, children, ...props }) => icon ? (
-  <IconButton {...props}>
-    {children}
-  </IconButton>
+  <IconButton {...props}>{children}</IconButton>
 ) : (
   <Button type="submit" variant="contained" {...props}>
     {children}
@@ -30,13 +28,16 @@ ButtonComponent.propTypes = {
 }
 
 const SubmitButton = React.memo(
-  ({ isSubmitting, label, ...props }) => {
+  ({ isSubmitting, label, icon, color, size, ...props }) => {
     const classes = useStyles()
 
     return (
       <ButtonComponent
         className={classes.root}
+        color={color}
         disabled={isSubmitting}
+        icon={icon}
+        size={size}
         {...props}
       >
         {isSubmitting && <CircularProgress size={24} />}
@@ -61,8 +62,7 @@ SubmitButton.defaultProps = {
   label: undefined,
   isSubmitting: false,
   className: undefined,
-  color: 'primary',
-  variant: 'contained'
+  color: 'primary'
 }
 
 export default SubmitButton

src/fireedge/src/client/components/List/ListHeader/index.js

@@ -24,15 +24,20 @@ const ListHeader = memo(({
 
   return (
     <Box className={classes.root}>
+      <Box className={classes.title}>
+        {!!(hasReloadButton || reloadButtonProps) && (
+          <SubmitButton icon label={<RefreshIcon />} {...reloadButtonProps} />
+        )}
+        {title && (
+          <Typography variant="h5" className={classes.titleText}>
+            {Tr(title)}
+          </Typography>
+        )}
+      </Box>
       <Box className={classes.actions}>
-        <Box className={classes.buttons}>
-          {!!(hasReloadButton || reloadButtonProps) && (
-            <SubmitButton icon label={<RefreshIcon />} {...reloadButtonProps} />
-          )}
-          {!!(hasAddButton || addButtonProps) && (
-            <SubmitButton icon label={<AddIcon />} {...addButtonProps} />
-          )}
-        </Box>
+        {!!(hasAddButton || addButtonProps) && (
+          <SubmitButton icon label={<AddIcon />} {...addButtonProps} />
+        )}
         {!!(hasSearch || searchProps) && (
           <Box className={classes.search}>
             <Box className={classes.searchIcon}>
@@ -51,14 +56,6 @@ const ListHeader = memo(({
           </Box>
         )}
       </Box>
-
-      {title && (
-        <Box className={classes.title}>
-          <Typography variant="h5" className={classes.titleText}>
-            {Tr(title)}
-          </Typography>
-        </Box>
-      )}
     </Box>
   )
 }, (prev, next) =>

src/fireedge/src/client/components/List/ListHeader/styles.js

@@ -2,25 +2,36 @@ import { makeStyles, fade } from '@material-ui/core'
 
 export default makeStyles(theme => ({
   root: {
-    padding: theme.spacing(2, 3)
+    top: 0,
+    position: 'sticky',
+    zIndex: theme.zIndex.appBar,
+    backgroundColor: '#fafafae0',
+    backdropFilter: `blur(${theme.spacing(1)}px)`,
+    padding: theme.spacing(2, 3),
+    display: 'flex',
+    flexWrap: 'wrap',
+    [theme.breakpoints.up('sm')]: {
+      borderBottom: '1px solid #e5e5e5'
+    }
   },
   title: {
-    padding: theme.spacing(2),
-    borderBottom: '1px solid #e5e5e5'
+    flexGrow: 1,
+    display: 'flex',
+    alignItems: 'center',
+    [theme.breakpoints.only('xs')]: {
+      borderBottom: '1px solid #e5e5e5'
+    }
   },
   titleText: {
+    flexGrow: 1,
     letterSpacing: 0.1,
     fontWeight: 500
   },
   actions: {
     display: 'flex',
     alignItems: 'center',
-    flexWrap: 'wrap',
-    borderBottom: '1px solid #e5e5e5'
-  },
-  buttons: {
-    flexGrow: 1,
     [theme.breakpoints.only('xs')]: {
+      width: '100%',
       borderBottom: '1px solid #e5e5e5'
     }
   },