Commit b0456486 authored by Oleksii Savran's avatar Oleksii Savran Committed by Matija Obreza
Browse files

ContentLayout

- Demo on Admin User browse page and StepperTemplate
parent 0d1ced6f
...@@ -10,6 +10,7 @@ import StepNavigation from './StepNavigation'; ...@@ -10,6 +10,7 @@ import StepNavigation from './StepNavigation';
import ProgressMenu from './progress-menu'; import ProgressMenu from './progress-menu';
import TopSection from './TopSection'; import TopSection from './TopSection';
import BottomSection from './BottomSection'; import BottomSection from './BottomSection';
import ContentLayout from 'ui/layout/ContentLayout';
interface IStepperTemplateProps extends React.ClassAttributes<any> { interface IStepperTemplateProps extends React.ClassAttributes<any> {
item: any; item: any;
...@@ -78,24 +79,26 @@ class StepperTemplate<T> extends React.Component<T & IStepperTemplateProps> { ...@@ -78,24 +79,26 @@ class StepperTemplate<T> extends React.Component<T & IStepperTemplateProps> {
const child = this.renderContent(); const child = this.renderContent();
const stepNavigation = this.getStepNavigation(); const stepNavigation = this.getStepNavigation();
return ( return (
<ContentLayout right={
<ProgressMenu disabled={ disabledProgress || disabled } onGotoStep={ this.gotoStep } steps={ steps }
location={ location }/>
} customHeaderHeight>
{ showHeader && <TopSection pageTitle={ t(pageTitle) } backTarget={ `/dashboard/${path}` }/> }
<Grid container spacing={ 0 }> <Grid container spacing={ 0 }>
{ showHeader && <TopSection pageTitle={ t(pageTitle) } backTarget={ `/dashboard/${path}` }/> }
<Grid container spacing={ 0 }> <Grid container spacing={ 0 }>
<Grid item xs={ 12 } md={ 9 } xl={ 10 } className="back-gray p-20"> <Grid className="back-gray p-20">
<Grid container spacing={ 0 } className="back-white"> <Grid container spacing={ 0 } className="back-white">
{ stepNavigation } { stepNavigation }
<Grid item xs={ 12 }> <Grid item xs={ 12 }>
{ stillLoading ? <Loading/> : { ...child } } { stillLoading ? <Loading/> : {...child} }
</Grid> </Grid>
{ stepNavigation } { stepNavigation }
</Grid> </Grid>
</Grid> </Grid>
<Grid item xs={ 12 } md={ 3 } xl={ 2 }>
<ProgressMenu disabled={ disabledProgress || disabled } onGotoStep={ this.gotoStep } steps={ steps } location={ location } />
</Grid>
</Grid> </Grid>
<BottomSection/> <BottomSection/>
</Grid> </Grid>
</ContentLayout>
); );
} }
} }
......
...@@ -20,7 +20,7 @@ const styleSheet = (theme) => ({ ...@@ -20,7 +20,7 @@ const styleSheet = (theme) => ({
/* tslint:disable */ /* tslint:disable */
root: { root: {
position: 'sticky' as 'sticky', position: 'sticky' as 'sticky',
top: '6rem', // top: '6rem',
width: '100%', width: '100%',
// height: '100%', // height: '100%',
background: theme.palette.background.paper, background: theme.palette.background.paper,
......
import * as React from 'react';
import { withStyles } from '@material-ui/core/styles';
import SidebarWrapper from './sidebar/SidebarWrapper';
const styles = (theme) => ({
root: {
display: 'flex' as 'flex',
flexDirection: 'row' as 'row',
width: '100%',
minHeight: '400px',
},
main: {
width: '100%',
height: '100%',
},
});
interface IContentLayoutProps extends React.Props<any> {
classes?: any;
children?: any;
left?: any;
right?: any;
className?: string;
customHeaderHeight?: boolean;
}
const ContentLayout = ({classes, children = null, left = null, right = null, customHeaderHeight = false, className = ''}: IContentLayoutProps) => {
return (
<div className={ className }>
<div className={ classes.root }>
{ left && (<SidebarWrapper sidebarContent={ left } customHeight={ customHeaderHeight }/>) }
{ children && (
<main className={ classes.main }>
{ children }
</main>
) }
{ right && (<SidebarWrapper sidebarContent={ right } customHeight={ customHeaderHeight }/>) }
</div>
</div>
);
};
export default withStyles(styles)(ContentLayout);
...@@ -16,6 +16,7 @@ interface ISidebarProps extends React.ClassAttributes<any> { ...@@ -16,6 +16,7 @@ interface ISidebarProps extends React.ClassAttributes<any> {
collapseSidebar: (isOpen: boolean) => void; collapseSidebar: (isOpen: boolean) => void;
isOpen: boolean; isOpen: boolean;
width: Breakpoint; width: Breakpoint;
customHeight?: boolean;
} }
const mobile = ['sm', 'xs'] as Breakpoint[]; const mobile = ['sm', 'xs'] as Breakpoint[];
...@@ -33,14 +34,24 @@ const styles = (theme) => ({ ...@@ -33,14 +34,24 @@ const styles = (theme) => ({
position: 'initial' as 'initial', position: 'initial' as 'initial',
height: '100%' as '100%' height: '100%' as '100%'
}, },
[theme.breakpoints.down('sm')]: { [theme.breakpoints.down('md')]: {
height: 'calc(100vh - 3rem)', height: 'calc(100vh - 3rem)',
top: '3rem', top: '3rem',
},
[theme.breakpoints.down('sm')]: {
maxWidth: '90%', maxWidth: '90%',
position: 'fixed' as 'fixed', position: 'fixed' as 'fixed',
zIndex: 15, zIndex: 15,
} }
}, },
drawerHeightV2: {
top: '83px',
height: 'calc(100vh - 83px)',
[theme.breakpoints.down('md')]: {
height: 'calc(100vh - 3.5rem)',
top: '3.5rem',
},
},
drawerCollapsed: { drawerCollapsed: {
[theme.breakpoints.down('sm')]: { [theme.breakpoints.down('sm')]: {
width: 'auto', width: 'auto',
...@@ -162,12 +173,12 @@ class SidebarWrapper extends React.Component<ISidebarProps, any> { ...@@ -162,12 +173,12 @@ class SidebarWrapper extends React.Component<ISidebarProps, any> {
} }
public render() { public render() {
const { sidebarContent, classes, isOpen, width } = this.props; const { sidebarContent, classes, isOpen, width, customHeight } = this.props;
const isMobile = mobile.indexOf(width) !== -1; const isMobile = mobile.indexOf(width) !== -1;
return ( return (
<SidebarDrawer <SidebarDrawer
className={ `${classes.drawer} ${!isOpen ? classes.drawerCollapsed : ''}` } className={ `${classes.drawer} ${!isOpen ? classes.drawerCollapsed : ''} ${customHeight ? classes.drawerHeightV2 : ''}` }
isOpen={ isOpen } isOpen={ isOpen }
variant={ 'permanent' } variant={ 'permanent' }
> >
......
...@@ -21,6 +21,7 @@ import UserCard from './c/UserCard'; ...@@ -21,6 +21,7 @@ import UserCard from './c/UserCard';
import UserFilters from 'user/ui/admin/c/UserFilter'; import UserFilters from 'user/ui/admin/c/UserFilter';
import Grid from '@material-ui/core/Grid'; import Grid from '@material-ui/core/Grid';
import PrettyFilters from 'ui/common/filter/PrettyFilters'; import PrettyFilters from 'ui/common/filter/PrettyFilters';
import ContentLayout from 'ui/layout/ContentLayout';
class BrowsePage extends BrowsePageTemplate<User> { class BrowsePage extends BrowsePageTemplate<User> {
...@@ -46,32 +47,29 @@ class BrowsePage extends BrowsePageTemplate<User> { ...@@ -46,32 +47,29 @@ class BrowsePage extends BrowsePageTemplate<User> {
}; };
return ( return (
<div> <ContentLayout left={
<UserFilters initialValues={ paged && paged.filter || {} } onSubmit={ this.myApplyFilters }/>
} customHeaderHeight>
<Grid container spacing={ 0 }> <Grid container spacing={ 0 }>
<Grid item md={ 9 } xs={ 12 } xl={ 10 }> <Grid item xs={ 12 }>
<Grid item xs={ 12 }> <ContentHeaderWithButton title={ t(`user.admin.p.browse.title`) }/>
<ContentHeaderWithButton title={ t(`user.admin.p.browse.title`) } /> <PrettyFilters
<PrettyFilters prefix="users"
prefix="users" filterObj={ paged && paged.filter || {} }
filterObj={ paged && paged.filter || {} } onSubmit={ this.myApplyFilters }
onSubmit={ this.myApplyFilters } />
/> <PageContents className="pt-1rem container-spacing-horizontal">
<PageContents className="pt-1rem container-spacing-horizontal"> { !paged ? <Loading/> :
{ ! paged ? <Loading /> : <PagedLoader
<PagedLoader paged={ paged }
paged={ paged } loadMore={ loadMoreData }
loadMore={ loadMoreData } roughItemHeight={ 80 }
roughItemHeight={ 80 } itemRenderer={ renderUser }/>
itemRenderer={ renderUser } /> }
} </PageContents>
</PageContents>
</Grid>
</Grid>
<Grid item xs={ 12 } md={ 3 } xl={ 2 } style={ { backgroundColor: '#fff' } }>
<UserFilters initialValues={ paged && paged.filter || {} } onSubmit={ this.myApplyFilters } />
</Grid> </Grid>
</Grid> </Grid>
</div> </ContentLayout>
); );
} }
} }
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment