Skip to content
Open
Show file tree
Hide file tree
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
62 changes: 55 additions & 7 deletions src/components/HomePage/index.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
import { Grid } from '@material-ui/core';
import { Inbox, SideBar } from 'components';
import { Grid as MUIGrid } from '@material-ui/core';
import { Inbox, SideBar, TopBar } from 'components';
import { InboxItem } from 'models';
import React from 'react';
import styled from 'styled-components';
import theme from 'styles/theme';

const dummyShortItem: InboxItem = {
title: 'Button not working',
Expand All @@ -15,8 +17,8 @@ const dummyLongItem: InboxItem = {

const searchTargetItem: InboxItem = {
title: 'special',
message: 'super top secret message'
}
message: 'super top secret message',
};

const dummyItems: InboxItem[] = [
dummyShortItem,
Expand All @@ -30,9 +32,55 @@ const dummyItems: InboxItem[] = [

export const HomePage: React.FunctionComponent = () => {
return (
<Grid container direction="row" alignItems="stretch">
<SideBar />
<Inbox unresolvedItems={dummyItems} resolvedItems={dummyItems} />
<Grid container>
<Grid item xs={3}>
<Header>patch</Header>
</Grid>
<Grid item xs={9}>
<TopBar />
</Grid>
<NestedGridContainter container item xs={3}>
<SideBar />
</NestedGridContainter>
<Grid item xs={3}>
<Inbox unresolvedItems={dummyItems} resolvedItems={dummyItems} />
</Grid>
</Grid>
);
};

const Grid = styled(MUIGrid)`
&.MuiGrid-container {
display: flex;
height: 100vh;
}
`;

const NestedGridContainter = styled(MUIGrid)`
&.MuiGrid-container {
display: flex;
height: 90vh;
}
`;

const Header = styled.header`
height: 10vh;
flex: 1;
display: flex;
align-items: center;
padding-left: 16px;
background-color: ${theme.colors.backgroundWash};
font-family: Roboto;
font-size: 24px;
font-weight: ${theme.fontWeights.bold};
color: ${theme.colors.darkGrey};
border-right-style: solid;
border-right-color: ${theme.colors.mediumGrey};
border-right-width: 1px;
border-bottom-style: solid;
border-bottom-color: ${theme.colors.mediumGrey};
border-bottom-width: 1px;
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.05);
position: relative;
z-index: 1;
`;
57 changes: 27 additions & 30 deletions src/components/Inbox/index.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import {
Box as MUIBox,
Checkbox as MUICheckbox,
Collapse,
Divider as MUIDivider,
Grid,
IconButton,
List,
ListItem,
Expand Down Expand Up @@ -91,7 +91,6 @@ export const InboxComponent: React.FunctionComponent<InboxComponentProps> = ({
};

const handleSearch = (event: any) => {
console.log('handleSearch with', event.target.value);
setSearchQuery(event.target.value);
};

Expand All @@ -110,9 +109,11 @@ export const InboxComponent: React.FunctionComponent<InboxComponentProps> = ({

return (
<StylesProvider injectFirst>
<Container direction="column">
<InboxHeader>Inbox</InboxHeader>
<SearchBar type="text" placeholder="Search" onChange={handleSearch} />
<Box height="90vh" display="flex" flexDirection="column" overflow="auto">
<SearchContainer>
<SearchIcon src={require('../../images/search-icon.png')} />
<SearchBar type="text" placeholder="Search" onChange={handleSearch} />
</SearchContainer>
<List
component="nav"
aria-label="unresolved"
Expand Down Expand Up @@ -157,7 +158,7 @@ export const InboxComponent: React.FunctionComponent<InboxComponentProps> = ({
)}
</Collapse>
</List>
</Container>
</Box>
</StylesProvider>
);
};
Expand All @@ -180,11 +181,7 @@ const Checkbox = styled(MUICheckbox)`
}
`;

const Container = styled(Grid)`
overflow: auto;
height: 100vh;
max-height: 100vh;
width: 387.3px;
const Box = styled(MUIBox)`
border-right-style: solid;
border-right-color: ${theme.colors.mediumGrey};
border-right-width: 1px;
Expand All @@ -195,19 +192,6 @@ const Divider = styled(MUIDivider)`
height: 1px;
`;

const InboxHeader = styled.header`
display: flex;
min-height: 50.5px;
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.05);
font-size: 18px;
font-weight: ${theme.fontWeights.medium};
color: ${theme.colors.black};
align-items: center;
padding-left: 32px;
margin-right: 1px;
background-color: ${theme.colors.white};
`;

const InboxItemContainer = styled(ListItem)`
padding: 13.5px 17.5px 14.9px 17.5px;
border-bottom: 1px;
Expand Down Expand Up @@ -276,18 +260,31 @@ const SectionHeaderButton = styled(IconButton)`
`;

const SearchBar = styled.input`
width: 351.3px;
min-height: 31.5px;
border-radius: 4px;
width: 100%;
background-color: ${theme.colors.backgroundWash};
color: ${theme.colors.darkGrey};
font-size: 18px;
font-weight: ${theme.fontWeights.regular};
text-indent: 50.8px;
margin: 0 auto;
margin-top: 18px;
outline: none;
border: none;
`;

const SearchContainer = styled(MUIBox)`
display: flex;
align-items: center;
min-height: 31.5px;
border-radius: 4px;
background-color: ${theme.colors.backgroundWash};
font-size: 18px;
font-weight: ${theme.fontWeights.regular};
margin: 18px 18px 0px;
padding-right: 18px;
`;

const SearchIcon = styled.img`
width: 16px;
height: 15.3px;
padding: 8px 18px;
`;

const mapStateToProps = (state: AppState) => ({
Expand Down
81 changes: 81 additions & 0 deletions src/components/SideBar/AppPicker/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
import {
Box as MUIBox,
ButtonBase as MUIButton,
StylesProvider,
} from '@material-ui/core';
import React from 'react';
import { connect } from 'react-redux';
import { AppAction } from 'redux/actionTypes';
import { AppState } from 'redux/reducer';
import styled from 'styled-components';
import theme from 'styles/theme';

export const AppPickerComponent: React.FunctionComponent = () => {
return (
<StylesProvider injectFirst>
<Box
display="flex"
flexDirection="column"
alignItems="center"
height="83vh"
>
<Button>
<ButtonImage
src={require('../../../images/app-icon.png')}
></ButtonImage>
</Button>
<Button>
<ButtonImage
src={require('../../../images/app-icon.png')}
></ButtonImage>
</Button>
<Button>
<ButtonImage
src={require('../../../images/app-icon.png')}
></ButtonImage>
</Button>
<Button>
<ButtonImage
src={require('../../../images/app-icon.png')}
></ButtonImage>
</Button>
</Box>
</StylesProvider>
);
};

const Button = styled(MUIButton)`
&.MuiButtonBase-root {
height: 45px;
width: 45px;
}
border-radius: 8.2px;
margin-top: 8px;
margin-bottom: 8px;
`;

const Box = styled(MUIBox)`
flex: 1;
box-sizing: border-box;
background-color: ${theme.colors.backgroundWash};
border-right-style: solid;
border-right-color: ${theme.colors.mediumGrey};
border-right-width: 1px;
padding-top: 8px;
`;

const ButtonImage = styled.img`
height: 45px;
width: 45px;
border-radius: 8.2px;
`;

const mapStateToProps = (state: AppState) => state;
const mapDispatchToProps = (dispatch: any) => ({
dispatch: (action: AppAction) => dispatch(action),
});

export const AppPicker = connect(
mapStateToProps,
mapDispatchToProps,
)(AppPickerComponent);
71 changes: 49 additions & 22 deletions src/components/SideBar/index.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { Grid } from '@material-ui/core';
import { Box as MUIBox, Grid as MUIGrid } from '@material-ui/core';
import { AppPicker } from 'components';
import { DispatchProps } from 'components/dispatchProps';
import React from 'react';
import { connect } from 'react-redux';
Expand Down Expand Up @@ -36,44 +37,70 @@ export const SideBarComponent: React.FunctionComponent<SideBarProps> = ({
};

return (
<Container container direction="column">
<AppName>patch</AppName>
{sectionComponent(SectionName.BugReports)}
{sectionComponent(SectionName.CustomerService)}
{sectionComponent(SectionName.FeatureRequests)}
</Container>
<React.Fragment>
<Grid item xs={12}>
<AppName
display="flex"
flexDirection="row"
alignItems="center"
height="7vh"
>
Ithaca Transit
</AppName>
</Grid>
<Grid item xs={3}>
<AppPicker />
</Grid>
<Grid item xs={9}>
<Box display="flex" flexDirection="column" height="83vh">
{sectionComponent(SectionName.BugReports)}
{sectionComponent(SectionName.CustomerService)}
{sectionComponent(SectionName.FeatureRequests)}
</Box>
</Grid>
</React.Fragment>
);
};

const AppName = styled.div`
const Box = styled(MUIBox)`
flex: 1;
background-color: ${theme.colors.backgroundWash};
border-right-style: solid;
border-right-color: ${theme.colors.mediumGrey};
border-right-width: 1px;
`;

const AppName = styled(Box)`
box-sizing: border-box;
padding-left: 16px;
border-bottom-style: solid;
border-bottom-color: ${theme.colors.mediumGrey};
border-bottom-width: 1px;
font-family: Roboto;
font-size: 48px;
font-size: 18px;
font-weight: ${theme.fontWeights.medium};
color: ${theme.colors.white};
margin-bottom: 220px;
color: ${theme.colors.black};
`;

const Container = styled(Grid)`
height: 100vh;
width: 257.6px;
padding-top: 32px;
padding-left: 32px;
background-color: #585858;
const Grid = styled(MUIGrid)`
display: flex;
`;

const Section = styled.div`
font-family: Roboto;
font-size: 18px;
font-weight: ${theme.fontWeights.regular};
color: ${theme.colors.backgroundWash};
color: ${theme.colors.darkGrey};
text-align: left;
padding-top: 15px;
padding-bottom: 15px;
padding-top: 24px;
padding-bottom: 7px;
padding-left: 16px;
padding-right: 16px;
`;

const SelectedSection = styled(Section)`
font-weight: ${theme.fontWeights.bold};
color: ${theme.colors.white};
font-weight: ${theme.fontWeights.medium};
color: ${theme.colors.black};
`;

const mapStateToProps = (state: AppState) => ({
Expand Down
Loading