feat: design my apps along with app layout

2021-12-14 00:43:35 +01:00
parent 3785c705ff
commit 6da8557219
13 changed files with 156 additions and 113 deletions
--- a/packages/web/src/components/AppBar/index.tsx
+++ b/packages/web/src/components/AppBar/index.tsx
@@ -1,19 +1,27 @@
+import { useTheme } from '@mui/material/styles';
+import useMediaQuery from '@mui/material/useMediaQuery';
 import MuiAppBar from '@mui/material/AppBar';
 import Box from '@mui/material/Box';
 import Toolbar from '@mui/material/Toolbar';
 import IconButton from '@mui/material/IconButton';
 import Typography from '@mui/material/Typography';
 import MenuIcon from '@mui/icons-material/Menu';
+import MenuOpenIcon from '@mui/icons-material/MenuOpen';
 import SettingsIcon from '@mui/icons-material/Settings';

 import HideOnScroll from 'components/HideOnScroll';
 import { FormattedMessage } from 'react-intl';

 type AppBarProps = {
-  onMenuClick: () => void;
+  drawerOpen: boolean;
+  onDrawerOpen: () => void;
+  onDrawerClose: () => void;
 };

-export default function AppBar({ onMenuClick }: AppBarProps) {
+export default function AppBar({ drawerOpen, onDrawerOpen, onDrawerClose }: AppBarProps) {
+  const theme = useTheme();
+  const matchSmallScreens = useMediaQuery(theme.breakpoints.down('md'), { noSsr: true });
+
  return (
    <Box sx={{ flexGrow: 1 }}>
      <HideOnScroll>
@@ -24,17 +32,17 @@ export default function AppBar({ onMenuClick }: AppBarProps) {
              edge="start"
              color="inherit"
              aria-label="open drawer"
-              onClick={onMenuClick}
+              onClick={drawerOpen ? onDrawerClose : onDrawerOpen}
              sx={{ mr: 2 }}
            >
-              <MenuIcon />
+              {drawerOpen && matchSmallScreens ? <MenuOpenIcon /> : <MenuIcon />}
            </IconButton>

            <Typography
              variant="h6"
              noWrap
              component="div"
-              sx={{ flexGrow: 1, display: { xs: 'none', sm: 'block' } }}
+              sx={{ flexGrow: 1 }}
            >
              <FormattedMessage id="brandText" />
            </Typography>
--- a/packages/web/src/components/AppFlowRow/index.tsx
+++ b/packages/web/src/components/AppFlowRow/index.tsx
@@ -6,17 +6,13 @@ import CardActionArea from '@mui/material/CardActionArea';
 import MoreHorizIcon from '@mui/icons-material/MoreHoriz';

 import * as URLS from 'config/urls';
-import useFormatMessage from 'hooks/useFormatMessage';
 import { CardContent, Typography } from './style';

 type AppFlowRowProps = {
  flow: any;
 }

-const countTranslation = (value: React.ReactNode) => (<><strong>{value}</strong><br /></>);
-
 function AppFlowRow(props: AppFlowRowProps) {
-  const formatMessage = useFormatMessage();
  const { flow } = props;

  return (
--- a/packages/web/src/components/AppRow/index.tsx
+++ b/packages/web/src/components/AppRow/index.tsx
@@ -29,7 +29,7 @@ function AppRow(props: AppRowProps) {

  return (
    <Link to={URLS.APP(name.toLowerCase())}>
-      <Card sx={{ my: 2 }}>
+      <Card sx={{ mb: 1 }}>
        <CardActionArea>
          <CardContent>
            <Box>
@@ -43,13 +43,13 @@ function AppRow(props: AppRowProps) {
            </Box>

            <Box sx={{ px: 2 }}>
-              <Typography variant="caption" color="textSecondary">
+              <Typography variant="caption" color="textSecondary" sx={{ display: ['none', 'inline-block'] }}>
                {formatMessage('app.connectionCount', { count: countTranslation(connectionCount) })}
              </Typography>
            </Box>

            <Box sx={{ px: 2 }}>
-              <Typography variant="caption" color="textSecondary">
+              <Typography variant="caption" color="textSecondary" sx={{ display: ['none', 'inline-block'] }}>
                {formatMessage('app.flowCount', { count: countTranslation(0) })}
              </Typography>
            </Box>
--- a/packages/web/src/components/ConditionalIconButton/index.tsx
+++ b/packages/web/src/components/ConditionalIconButton/index.tsx
@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { useTheme } from '@mui/material/styles';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import Button from '@mui/material/Button';
+
+import { IconButton } from './style';
+
+export default function ConditionalIconButton(props: any) {
+  const { Icon, ...buttonProps } = props;
+  const theme = useTheme();
+  const matchSmallScreens = useMediaQuery(theme.breakpoints.down('md'), { noSsr: true });
+
+  if (matchSmallScreens) {
+    return (
+      <IconButton
+        color={buttonProps.color}
+        type={buttonProps.type}
+        size={buttonProps.size}
+        component={buttonProps.component}
+        to={buttonProps.to}
+      >
+        <Icon />
+      </IconButton>
+    )
+  }
+
+  return (
+    <Button {...buttonProps} />
+  );
+}
--- a/packages/web/src/components/ConditionalIconButton/style.ts
+++ b/packages/web/src/components/ConditionalIconButton/style.ts
@@ -0,0 +1,13 @@
+import { styled } from '@mui/material/styles';
+import MuiIconButton, { iconButtonClasses } from '@mui/material/IconButton';
+
+export const IconButton = styled(MuiIconButton)`
+  &.${iconButtonClasses.colorPrimary} {
+    background: ${({ theme }) => theme.palette.primary.main};
+    color: ${({ theme }) => theme.palette.primary.contrastText};
+
+    &:hover {
+      background: ${({ theme }) => theme.palette.primary.dark};
+    }
+  }
+` as typeof MuiIconButton;
--- a/packages/web/src/components/Drawer/index.tsx
+++ b/packages/web/src/components/Drawer/index.tsx
@@ -19,7 +19,7 @@ const iOS = typeof navigator !== 'undefined' && /iPad|iPhone|iPod/.test(navigato

 export default function Drawer(props: SwipeableDrawerProps) {
  const theme = useTheme();
-  const matchesSmallScreens = useMediaQuery(theme.breakpoints.down('md'));
+  const matchSmallScreens = useMediaQuery(theme.breakpoints.down('md'), { noSsr: true });
  const formatMessage = useFormatMessage();

  return (
@@ -27,13 +27,13 @@ export default function Drawer(props: SwipeableDrawerProps) {
      {...props}
      disableBackdropTransition={!iOS}
      disableDiscovery={iOS}
-      variant={matchesSmallScreens ? 'temporary' : 'permanent'}
+      variant={matchSmallScreens ? 'temporary' : 'permanent'}
    >
      <HideOnScroll unmountOnExit>
        <Toolbar />
      </HideOnScroll>

-      <List>
+      <List sx={{ py: 0, mt: 3 }}>
        <ListItemLink
          icon={<SwapCallsIcon htmlColor={theme.palette.primary.main} />}
          primary={formatMessage('drawer.flows')}
--- a/packages/web/src/components/Layout/index.tsx
+++ b/packages/web/src/components/Layout/index.tsx
@@ -1,4 +1,7 @@
-import { useState, useCallback } from 'react';
+import { useState } from 'react';
+import { useTheme } from '@mui/material/styles';
+import useMediaQuery from '@mui/material/useMediaQuery';
+
 import Box from '@mui/material/Box';
 import AppBar from 'components/AppBar';
 import Drawer from 'components/Drawer';
@@ -9,18 +12,22 @@ type LayoutProps = {
 }

 export default function Layout({ children }: LayoutProps) {
-  const [isDrawerOpen, setDrawerOpen] = useState(true);
-  const onMenuClick = useCallback(() => { setDrawerOpen(value => !value) }, []);
+  const theme = useTheme();
+  const matchSmallScreens = useMediaQuery(theme.breakpoints.down('lg'), { noSsr: true });
+  const [isDrawerOpen, setDrawerOpen] = useState(!matchSmallScreens);
+
+  const openDrawer = () => setDrawerOpen(true);
+  const closeDrawer = () => setDrawerOpen(false);

  return (
    <>
-      <AppBar onMenuClick={onMenuClick} />
+      <AppBar drawerOpen={isDrawerOpen} onDrawerOpen={openDrawer} onDrawerClose={closeDrawer} />

      <Box sx={{ display: 'flex', }}>
        <Drawer
          open={isDrawerOpen}
-          onOpen={onMenuClick}
-          onClose={onMenuClick}
+          onOpen={openDrawer}
+          onClose={closeDrawer}
        />

        <Box sx={{ flex: 1 }}>
--- a/packages/web/src/components/SearchInput/index.tsx
+++ b/packages/web/src/components/SearchInput/index.tsx
@@ -1,7 +1,10 @@
+import InputLabel from '@mui/material/InputLabel';
+import OutlinedInput from '@mui/material/OutlinedInput';
+import InputAdornment from '@mui/material/InputAdornment';
+import FormControl from '@mui/material/FormControl';
 import SearchIcon from '@mui/icons-material/Search';

 import useFormatMessage from 'hooks/useFormatMessage';
-import { Search, SearchIconWrapper, InputBase } from './style';

 type SearchInputProps = {
  onChange?: (event: React.ChangeEvent) => void;
@@ -11,16 +14,26 @@ export default function SearchInput({ onChange }: SearchInputProps) {
  const formatMessage = useFormatMessage();

  return (
-    <Search>
-      <SearchIconWrapper>
-        <SearchIcon />
-      </SearchIconWrapper>
+    <FormControl variant="outlined" fullWidth>
+      <InputLabel
+        htmlFor="search-input"
+      >
+        {formatMessage('searchPlaceholder')}
+      </InputLabel>

-      <InputBase
-        placeholder={formatMessage('searchPlaceholder')}
-        inputProps={{ 'aria-label': 'search' }}
+      <OutlinedInput
+        id="search-input"
+        type="text"
+        size="medium"
+        fullWidth
        onChange={onChange}
+        endAdornment={
+          <InputAdornment position="end">
+            <SearchIcon sx={{ color: (theme) => theme.palette.primary.main }} />
+          </InputAdornment>
+        }
+        label={formatMessage('searchPlaceholder')}
      />
-    </Search>
+    </FormControl>
  );
 }
--- a/packages/web/src/components/SearchInput/style.ts
+++ b/packages/web/src/components/SearchInput/style.ts
@@ -1,48 +0,0 @@
-import { styled, alpha } from '@mui/material/styles';
-import MuiInput from '@mui/material/Input';
-
-export const Search = styled('div')(({ theme }) => ({
-  position: 'relative',
-  borderRadius: theme.shape.borderRadius,
-  backgroundColor: alpha(theme.palette.common.white, 0.15),
-  '&:hover': {
-    backgroundColor: alpha(theme.palette.common.white, 0.25),
-  },
-  marginLeft: 0,
-  width: '100%',
-  maxWidth: '100%',
-  [theme.breakpoints.up('sm')]: {
-    marginLeft: theme.spacing(1),
-    width: 'auto',
-  },
-}));
-
-export const SearchIconWrapper = styled('div')(({ theme }) => ({
-  padding: theme.spacing(0, 2),
-  height: '100%',
-  position: 'absolute',
-  pointerEvents: 'none',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-}));
-
-export const InputBase = styled(MuiInput)(({ theme }) => ({
-  color: 'inherit',
-  width: '100%',
-  fontWeight: 400,
-  maxWidth: '100%',
-  '& .MuiInput-input': {
-    padding: theme.spacing(1, 1, 1, 0),
-    // vertical padding + font size from searchIcon
-    paddingLeft: `calc(1em + ${theme.spacing(4)})`,
-    transition: theme.transitions.create('width'),
-    width: '200',
-    [theme.breakpoints.up('sm')]: {
-      width: '12ch',
-      '&:focus': {
-        width: '20ch',
-      },
-    },
-  },
-}));
--- a/packages/web/src/locales/en.json
+++ b/packages/web/src/locales/en.json
@@ -1,6 +1,6 @@
 {
  "brandText": "Automatisch",
-  "searchPlaceholder": "Search...",
+  "searchPlaceholder": "Search",
  "welcomeText": "Here comes the dashboard homepage.",
  "drawer.dashboard": "Dashboard",
  "drawer.flows": "Flows",
@@ -12,7 +12,7 @@
  "app.settings": "Settings",
  "app.connections": "Connections",
  "app.flows": "Flows",
-  "apps.title": "Apps",
+  "apps.title": "My Apps",
  "apps.addConnection": "Add connection",
  "apps.addNewAppConnection": "Add a new app connection",
  "apps.searchApp": "Search for app",
--- a/packages/web/src/pages/Applications/index.tsx
+++ b/packages/web/src/pages/Applications/index.tsx
@@ -3,8 +3,9 @@ import { Link, Routes, Route, useNavigate } from 'react-router-dom';
 import { useQuery } from '@apollo/client';
 import Box from '@mui/material/Box';
 import Grid from '@mui/material/Grid';
-import Button from '@mui/material/Button';
+import AddIcon from '@mui/icons-material/Add';

+import ConditionalIconButton from 'components/ConditionalIconButton';
 import Container from 'components/Container';
 import AddNewAppConnection from 'components/AddNewAppConnection';
 import PageTitle from 'components/PageTitle';
@@ -32,28 +33,28 @@ export default function Applications() {
  return (
    <Box sx={{ py: 3 }}>
      <Container>
-        <Grid container sx={{ mb: 3 }} spacing={1}>
-          <Grid item xs={12} sm>
+        <Grid container sx={{ mb: [2, 5] }} columnSpacing={1.5} rowSpacing={3}>
+          <Grid container item xs sm alignItems="center" order={{ xs: 0 }}>
            <PageTitle>{formatMessage('apps.title')}</PageTitle>
          </Grid>

-          <Grid container item xs={12} sm="auto" justifyContent="flex-end" spacing={2}>
-            <Grid item xs={12} sm="auto">
+          <Grid item xs={12} sm="auto" order={{ xs: 2, sm: 1 }}>
            <SearchInput onChange={onSearchChange} />
          </Grid>

-            <Grid item xs={12} sm="auto">
-              <Button
+          <Grid container item xs="auto" sm="auto" alignItems="center" order={{ xs: 1, sm: 2 }}>
+            <ConditionalIconButton
              type="submit"
              variant="contained"
              color="primary"
+              size="large"
              component={Link}
              to={URLS.NEW_APP_CONNECTION}
              fullWidth
+              Icon={<AddIcon />}
            >
              {formatMessage('apps.addConnection')}
-              </Button>
-            </Grid>
+            </ConditionalIconButton>
          </Grid>
        </Grid>

--- a/packages/web/src/pages/Flows/index.tsx
+++ b/packages/web/src/pages/Flows/index.tsx
@@ -1,5 +1,5 @@
 import Box from '@mui/material/Box';
-import Container from '@mui/material/Container';
+import Container from 'components/Container';

 export default function Flows() {
  return (
--- a/packages/web/src/styles/theme.ts
+++ b/packages/web/src/styles/theme.ts
@@ -1,4 +1,5 @@
-import { createTheme } from '@mui/material/styles';
+import { createTheme, alpha } from '@mui/material/styles';
+import { cardActionAreaClasses } from '@mui/material/CardActionArea';

 const referenceTheme = createTheme({
  palette: {
@@ -164,11 +165,44 @@ const extendedTheme = createTheme({
    }
  },
  components: {
+    MuiAppBar: {
+      styleOverrides: {
+        root: {
+          background: referenceTheme.palette.primary.dark,
+          zIndex: referenceTheme.zIndex.drawer + 1,
+        }
+      },
+      defaultProps: {
+        elevation: 2,
+      },
+    },
    MuiButton: {
      styleOverrides: {
        root: {
-          padding: '12px 16px',
          textTransform: 'none',
+        },
+        sizeLarge: {
+          padding: '14px 22px',
+        },
+        sizeMedium: {
+          padding: '10px 16px',
+        },
+        sizeSmall: {
+          padding: '6px 10px',
+        }
+      }
+    },
+    MuiCardActionArea: {
+      styleOverrides: {
+        root: {
+          borderRadius: referenceTheme.shape.borderRadius,
+          [`& .${cardActionAreaClasses.focusHighlight}`]: {
+            background: 'unset',
+            border: `1px solid ${alpha(referenceTheme.palette.primary.light, 1)}`,
+          },
+          [`&:hover .${cardActionAreaClasses.focusHighlight}`]: {
+            opacity: 1,
+          }
        }
      }
    },
@@ -187,17 +221,6 @@ const extendedTheme = createTheme({
        },
      },
    },
-    MuiAppBar: {
-      styleOverrides: {
-        root: {
-          background: referenceTheme.palette.primary.dark,
-          zIndex: referenceTheme.zIndex.drawer + 1,
-        }
-      },
-      defaultProps: {
-        elevation: 2,
-      },
-    },
    MuiToolbar: {
      styleOverrides: {
        root: {