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';
import ProgressMenu from './progress-menu';
import TopSection from './TopSection';
import BottomSection from './BottomSection';
import ContentLayout from 'ui/layout/ContentLayout';
interface IStepperTemplateProps extends React.ClassAttributes<any> {
item: any;
......@@ -78,24 +79,26 @@ class StepperTemplate<T> extends React.Component<T & IStepperTemplateProps> {
const child = this.renderContent();
const stepNavigation = this.getStepNavigation();
return (
<Grid container spacing={ 0 }>
<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 item xs={ 12 } md={ 9 } xl={ 10 } className="back-gray p-20">
<Grid container spacing={ 0 }>
<Grid className="back-gray p-20">
<Grid container spacing={ 0 } className="back-white">
{ stepNavigation }
<Grid item xs={ 12 }>
{ stillLoading ? <Loading/> : { ...child } }
{ stillLoading ? <Loading/> : {...child} }
</Grid>
{ stepNavigation }
</Grid>
</Grid>
<Grid item xs={ 12 } md={ 3 } xl={ 2 }>
<ProgressMenu disabled={ disabledProgress || disabled } onGotoStep={ this.gotoStep } steps={ steps } location={ location } />
</Grid>
</Grid>
<BottomSection/>
</Grid>
</ContentLayout>
);
}
}
......
......@@ -20,7 +20,7 @@ const styleSheet = (theme) => ({
/* tslint:disable */
root: {
position: 'sticky' as 'sticky',
top: '6rem',
// top: '6rem',
width: '100%',
// height: '100%',
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> {
collapseSidebar: (isOpen: boolean) => void;
isOpen: boolean;
width: Breakpoint;
customHeight?: boolean;
}
const mobile = ['sm', 'xs'] as Breakpoint[];
......@@ -33,14 +34,24 @@ const styles = (theme) => ({
position: 'initial' as 'initial',
height: '100%' as '100%'
},
[theme.breakpoints.down('sm')]: {
[theme.breakpoints.down('md')]: {
height: 'calc(100vh - 3rem)',
top: '3rem',
},
[theme.breakpoints.down('sm')]: {
maxWidth: '90%',
position: 'fixed' as 'fixed',
zIndex: 15,
}
},
drawerHeightV2: {
top: '83px',
height: 'calc(100vh - 83px)',
[theme.breakpoints.down('md')]: {
height: 'calc(100vh - 3.5rem)',
top: '3.5rem',
},
},
drawerCollapsed: {
[theme.breakpoints.down('sm')]: {
width: 'auto',
......@@ -162,12 +173,12 @@ class SidebarWrapper extends React.Component<ISidebarProps, any> {
}
public render() {
const { sidebarContent, classes, isOpen, width } = this.props;
const { sidebarContent, classes, isOpen, width, customHeight } = this.props;
const isMobile = mobile.indexOf(width) !== -1;
return (
<SidebarDrawer
className={ `${classes.drawer} ${!isOpen ? classes.drawerCollapsed : ''}` }
className={ `${classes.drawer} ${!isOpen ? classes.drawerCollapsed : ''} ${customHeight ? classes.drawerHeightV2 : ''}` }
isOpen={ isOpen }
variant={ 'permanent' }
>
......
......@@ -21,6 +21,7 @@ import UserCard from './c/UserCard';
import UserFilters from 'user/ui/admin/c/UserFilter';
import Grid from '@material-ui/core/Grid';
import PrettyFilters from 'ui/common/filter/PrettyFilters';
import ContentLayout from 'ui/layout/ContentLayout';
class BrowsePage extends BrowsePageTemplate<User> {
......@@ -46,32 +47,29 @@ class BrowsePage extends BrowsePageTemplate<User> {
};
return (
<div>
<ContentLayout left={
<UserFilters initialValues={ paged && paged.filter || {} } onSubmit={ this.myApplyFilters }/>
} customHeaderHeight>
<Grid container spacing={ 0 }>
<Grid item md={ 9 } xs={ 12 } xl={ 10 }>
<Grid item xs={ 12 }>
<ContentHeaderWithButton title={ t(`user.admin.p.browse.title`) } />
<ContentHeaderWithButton title={ t(`user.admin.p.browse.title`) }/>
<PrettyFilters
prefix="users"
filterObj={ paged && paged.filter || {} }
onSubmit={ this.myApplyFilters }
/>
<PageContents className="pt-1rem container-spacing-horizontal">
{ ! paged ? <Loading /> :
{ !paged ? <Loading/> :
<PagedLoader
paged={ paged }
loadMore={ loadMoreData }
roughItemHeight={ 80 }
itemRenderer={ renderUser } />
itemRenderer={ renderUser }/>
}
</PageContents>
</Grid>
</Grid>
<Grid item xs={ 12 } md={ 3 } xl={ 2 } style={ { backgroundColor: '#fff' } }>
<UserFilters initialValues={ paged && paged.filter || {} } onSubmit={ this.myApplyFilters } />
</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