Skip to content

Commit df10bf0

Browse files
PolGuixePolGuixe
authored
Merge pull request #26 from Zetoff/fix/previous-release-fixes
fixes issues and improved components
2 parents 8c51e49 + 15c90ef commit df10bf0

File tree

6 files changed

+168
-48
lines changed

6 files changed

+168
-48
lines changed

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@
4343
"dependencies": {
4444
"classnames": "^2.2.5",
4545
"lodash": "^4.17.4",
46-
"material-ui": "^1.0.0-beta.9",
46+
"material-ui": "^1.0.0-beta.12",
4747
"material-ui-icons": "^1.0.0-beta.5",
4848
"prop-types": "^15.5.10",
4949
"react": "^15.6.1",

‎src/components/Layout/Layout.jsx

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -21,9 +21,10 @@ class Layout extends React.PureComponent {
2121
overrideClasses: PropTypes.shape({}),
2222
children: PropTypes.element.isRequired,
2323
appBarPosition: PropTypes.string,
24-
stickyFooter: PropTypes.bool,
2524
appBarContent: PropTypes.element,
2625
appBarProps: PropTypes.shape({}),
26+
mainGrow: PropTypes.bool,
27+
stickyFooter: PropTypes.bool,
2728
footerContent: PropTypes.element,
2829
footerProps: PropTypes.shape({}),
2930
leftDrawerOpen: PropTypes.bool.isRequired,
@@ -39,6 +40,7 @@ class Layout extends React.PureComponent {
3940
rightDrawerUnder: PropTypes.bool,
4041
rightDrawerProps: PropTypes.shape({}),
4142
width: PropTypes.string,
43+
usingTwoRowAppBar: PropTypes.bool,
4244
};
4345

4446
static defaultProps = {
@@ -49,6 +51,8 @@ class Layout extends React.PureComponent {
4951
leftDrawerUnder: false,
5052
rightDrawerOpen: false,
5153
rightDrawerUnder: false,
54+
mainGrow: true,
55+
usingTwoRowAppBar: false,
5256
};
5357

5458
handleLeftDrawerClose = () => {
@@ -83,6 +87,7 @@ class Layout extends React.PureComponent {
8387
appBarContent,
8488
appBarPosition,
8589
appBarProps,
90+
mainGrow,
8691
leftDrawerContent,
8792
leftDrawerOpen,
8893
leftDrawerType,
@@ -97,6 +102,7 @@ class Layout extends React.PureComponent {
97102
stickyFooter,
98103
footerProps,
99104
width,
105+
usingTwoRowAppBar,
100106
} = this.props;
101107

102108
// TODO change the way to overrideClasses
@@ -116,7 +122,10 @@ class Layout extends React.PureComponent {
116122
(rightDrawerOpen && rightDrawerType === 'persistent'));
117123

118124
const mainClassnames = classNames(classes.main, {
119-
[`${classes.mainFixedAppBar}`]: appBarPosition === 'fixed',
125+
[`${classes.mainFixedAppBar}`]: appBarPosition === 'fixed' && !usingTwoRowAppBar,
126+
[`${classes.mainFixedTwoRowAppBar}`]: appBarPosition === 'fixed' && usingTwoRowAppBar,
127+
[`${classes.mainGrow}`]: mainGrow && !usingTwoRowAppBar,
128+
[`${classes.mainGrowTwoRowAppBar}`]: mainGrow && usingTwoRowAppBar,
120129
[`${classes.mainStickyFooter}`]: stickyFooter,
121130
[`${classes.mainShift}`]: mainLeftShift || mainRightShift,
122131
[`${classes.mainLeftShift}`]: mainLeftShift,
@@ -166,7 +175,7 @@ class Layout extends React.PureComponent {
166175
<Drawer
167176
open={leftDrawerOpen}
168177
onRequestClose={this.handleLeftDrawerClose}
169-
type={!smallScreen && leftDrawerType}
178+
type={!smallScreen ? leftDrawerType : 'temporary'}
170179
classes={{ paper: leftDrawerPaperClassnames }}
171180
{...leftDrawerProps}
172181
>
@@ -181,7 +190,7 @@ class Layout extends React.PureComponent {
181190
anchor="right"
182191
open={rightDrawerOpen}
183192
onRequestClose={this.handleRightDrawerClose}
184-
type={!smallScreen && rightDrawerType}
193+
type={!smallScreen ? rightDrawerType : 'temporary'}
185194
classes={{ paper: rightDrawerPaperClassnames }}
186195
{...rightDrawerProps}
187196
>

‎src/components/Layout/styles.js

Lines changed: 28 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -35,24 +35,48 @@ const styles = theme => ({
3535
main: {
3636
paddingTop: '0px',
3737
display: 'flex',
38-
transition: theme.transitions.create(['margin'], {
38+
transition: theme.transitions.create(['margin', 'width'], {
3939
easing: theme.transitions.easing.sharp,
4040
duration: theme.transitions.duration.leavingScreen,
4141
}),
4242
},
4343
mainFixedAppBar: {
44-
marginTop: 56,
44+
marginTop: `${theme.mixins.toolbar.minHeight}px`,
45+
},
46+
mainFixedTwoRowAppBar: {
47+
marginTop: `${theme.mixins.toolbar.minHeight * 2}px`,
48+
},
49+
mainGrow: {
50+
flex: 1,
51+
height: `calc(100vh - ${theme.mixins.toolbar.minHeight}px)`,
52+
},
53+
mainGrowTwoRowAppBar: {
54+
flex: 1,
55+
height: `calc(100vh - ${theme.mixins.toolbar.minHeight * 2}px)`,
4556
},
4657
[theme.breakpoints.up('sm')]: {
4758
mainFixedAppBar: {
48-
marginTop: 64,
59+
marginTop: `${theme.mixins.toolbar[theme.breakpoints.up('sm')]
60+
.minHeight}px`,
61+
},
62+
mainFixedTwoRowAppBar: {
63+
marginTop: `${theme.mixins.toolbar[theme.breakpoints.up('sm')].minHeight *
64+
2}px`,
65+
},
66+
mainGrow: {
67+
height: `calc(100vh - ${theme.mixins.toolbar[theme.breakpoints.up('sm')]
68+
.minHeight}px)`,
69+
},
70+
mainGrowTwoRowAppBar: {
71+
height: `calc(100vh - ${theme.mixins.toolbar[theme.breakpoints.up('sm')]
72+
.minHeight * 2}px)`,
4973
},
5074
},
5175
mainStickyFooter: {
5276
flex: 1,
5377
},
5478
mainShift: {
55-
transition: theme.transitions.create(['margin'], {
79+
transition: theme.transitions.create(['margin', 'width'], {
5680
easing: theme.transitions.easing.easeOut,
5781
duration: theme.transitions.duration.enteringScreen,
5882
}),

‎src/templates/AppBar/TwoRowsAppBar/TwoRowsAppBar.jsx

Lines changed: 91 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,23 @@ import PropTypes from 'prop-types';
33
import Toolbar from 'material-ui/Toolbar';
44
import Grid from 'material-ui/Grid';
55
import { withStyles } from 'material-ui/styles';
6+
import withWidth, { isWidthDown } from 'material-ui/utils/withWidth';
7+
import classNames from 'classnames';
8+
import compose from 'recompose/compose';
69

710
import styles from './styles';
811

9-
const contentPropType = PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)]);
12+
const contentPropType = PropTypes.oneOfType([
13+
PropTypes.element,
14+
PropTypes.arrayOf(PropTypes.element),
15+
]);
16+
17+
// TODO find a way to better overwrite the items styles
18+
const style = {
19+
item: {
20+
padding: '0px',
21+
},
22+
};
1023

1124
class TwoRowsAppBar extends PureComponent {
1225
static propTypes = {
@@ -17,6 +30,8 @@ class TwoRowsAppBar extends PureComponent {
1730
bottomLeftContent: contentPropType,
1831
bottomCenterContent: contentPropType,
1932
bottomRightContent: contentPropType,
33+
width: PropTypes.string,
34+
smallScreenWidth: PropTypes.string,
2035
};
2136

2237
static defaultProps = {
@@ -27,9 +42,9 @@ class TwoRowsAppBar extends PureComponent {
2742
bottomLeftContent: null,
2843
bottomCenterContent: null,
2944
bottomRightContent: null,
45+
smallScreenWidth: 'xs',
3046
};
3147

32-
3348
render() {
3449
const {
3550
classes,
@@ -39,29 +54,94 @@ class TwoRowsAppBar extends PureComponent {
3954
bottomLeftContent,
4055
bottomCenterContent,
4156
bottomRightContent,
57+
width,
58+
smallScreenWidth = 'xs',
4259
} = this.props;
60+
61+
const smallScreen = isWidthDown(smallScreenWidth, width);
62+
4363
return (
4464
<Toolbar>
4565
<Grid container direction="column" className={classes.wrapper}>
46-
<Grid container className={classes.topRow} justify={'space-between'}>
47-
<Grid item xs={2} className={classes.left}>
66+
<Grid
67+
container
68+
className={classNames(classes.row, classes.topRow)}
69+
justify={'space-between'}
70+
>
71+
<Grid
72+
item
73+
style={style.item}
74+
xs={2}
75+
sm={4}
76+
md={3}
77+
lg={2}
78+
className={classes.left}
79+
>
4880
{topLeftContent}
4981
</Grid>
50-
<Grid item xs={8} className={classes.topCenter}>
82+
<Grid
83+
item
84+
style={style.item}
85+
xs={8}
86+
sm={4}
87+
md={6}
88+
lg={8}
89+
className={classNames(classes.topCenter, {
90+
[`${classes.centerBig}`]: !smallScreen,
91+
})}
92+
>
5193
{topCenterContent}
5294
</Grid>
53-
<Grid item xs={2} className={classes.right}>
95+
<Grid
96+
item
97+
style={style.item}
98+
xs={2}
99+
sm={4}
100+
md={3}
101+
lg={2}
102+
className={classes.right}
103+
>
54104
{topRightContent}
55105
</Grid>
56106
</Grid>
57-
<Grid container className={classes.bottomRow} justify={'space-between'}>
58-
<Grid item xs={2} className={classes.left}>
107+
<Grid
108+
container
109+
className={classNames(classes.row, classes.bottomRow)}
110+
justify={'space-between'}
111+
>
112+
<Grid
113+
item
114+
style={style.item}
115+
xs={2}
116+
sm={4}
117+
md={3}
118+
lg={2}
119+
className={classes.left}
120+
>
59121
{bottomLeftContent}
60122
</Grid>
61-
<Grid item xs={8} className={classes.bottomCenter}>
123+
<Grid
124+
item
125+
style={style.item}
126+
xs={8}
127+
sm={4}
128+
md={6}
129+
lg={8}
130+
className={classNames(classes.bottomCenter, {
131+
[`${classes.centerBig}`]: !smallScreen,
132+
})}
133+
>
62134
{bottomCenterContent}
63135
</Grid>
64-
<Grid item xs={2} className={classes.right}>
136+
<Grid
137+
item
138+
style={style.item}
139+
xs={2}
140+
sm={4}
141+
md={3}
142+
lg={2}
143+
className={classes.right}
144+
>
65145
{bottomRightContent}
66146
</Grid>
67147
</Grid>
@@ -71,4 +151,4 @@ class TwoRowsAppBar extends PureComponent {
71151
}
72152
}
73153

74-
export default withStyles(styles)(TwoRowsAppBar);
154+
export default compose(withStyles(styles), withWidth())(TwoRowsAppBar);

‎src/templates/AppBar/TwoRowsAppBar/styles.js

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,14 @@
1-
export default {
1+
export default theme => ({
22
wrapper: {
33
marginTop: '0',
44
marginBottom: '0',
55
},
6+
row: theme.mixins.toolbar,
67
topRow: {
7-
height: '64px',
88
marginTop: '0',
99
marginBottom: '0',
1010
},
1111
bottomRow: {
12-
height: '56px',
1312
marginTop: '0',
1413
marginBottom: '0',
1514
},
@@ -25,12 +24,17 @@ export default {
2524
justifyContent: 'center',
2625
alignItems: 'center',
2726
},
27+
centerBig: {
28+
justifyContent: theme.direction === 'ltr' ? 'flex-start' : 'flex-end',
29+
},
2830
right: {
2931
justifyContent: 'flex-end',
3032
display: 'flex',
33+
alignItems: 'center',
3134
},
3235
left: {
3336
justifyContent: 'flex-start',
3437
display: 'flex',
38+
alignItems: 'center',
3539
},
36-
};
40+
});

0 commit comments

Comments
 (0)