Skip to content

Commit 82c7b62

Browse files
mmrtnzmmrtnz
committed
Merge pull request #444 from mmrtnz/css-in-js
Refactored css into js for toolbar and some bug fixes.
2 parents 4d99fae + 57c11ae commit 82c7b62

File tree

11 files changed

+256
-175
lines changed

11 files changed

+256
-175
lines changed

‎docs/src/app/components/pages/components/toolbars.jsx‎

Lines changed: 30 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ var FontIcon = mui.FontIcon;
66
var RaisedButton = mui.RaisedButton;
77
var Toolbar = mui.Toolbar;
88
var ToolbarGroup = mui.ToolbarGroup;
9+
var ToolbarSeparator = mui.ToolbarSeparator;
10+
var ToolbarTitle = mui.ToolbarTitle;
911
var ComponentDoc = require('../../component-doc.jsx');
1012

1113
var ToolbarPage = React.createClass({
@@ -31,25 +33,38 @@ var ToolbarPage = React.createClass({
3133
' <DropDownMenu menuItems={filterOptions} />\n' +
3234
' </ToolbarGroup>\n' +
3335
' <ToolbarGroup key={1} float="right">\n' +
34-
' <FontIcon className="mui-icon-pie" />\n' +
36+
' <ToolbarTitle text="Options" />\n' +
3537
' <FontIcon className="mui-icon-sort" />\n' +
3638
' <DropDownIcon iconClassName="icon-navigation-expand-more" menuItems={iconMenuItems} />\n' +
37-
' <span className="mui-toolbar-separator">&nbsp;</span>\n' +
39+
' <ToolbarSeparator/>\n' +
3840
' <RaisedButton label="Create Broadcast" primary={true} />\n' +
3941
' </ToolbarGroup>\n' +
4042
'</Toolbar>';
4143

42-
var componentInfo = [{
43-
name: 'ToolbarGroup',
44-
infoArray: [
45-
{
46-
name: 'float',
47-
type: 'string',
48-
header: 'optional',
49-
desc: 'Optional pull "left" or "right"'
50-
}
51-
]
52-
}];
44+
var componentInfo = [
45+
{
46+
name: 'ToolbarGroup',
47+
infoArray: [
48+
{
49+
name: 'float',
50+
type: 'string',
51+
header: 'optional',
52+
desc: 'Optional pull "left" or "right"'
53+
}
54+
]
55+
},
56+
{
57+
name: 'ToolbarTitle',
58+
infoArray: [
59+
{
60+
name: 'text',
61+
type: 'string',
62+
header: 'optional',
63+
desc: 'The text to be displayed for the element.'
64+
}
65+
]
66+
},
67+
];
5368

5469
var filterOptions = [
5570
{ payload: '1', text: 'All Broadcasts' },
@@ -76,10 +91,10 @@ var ToolbarPage = React.createClass({
7691
<DropDownMenu menuItems={filterOptions} />
7792
</ToolbarGroup>
7893
<ToolbarGroup key={1} float="right">
79-
<FontIcon className="muidocs-icon-custom-pie" />
94+
<ToolbarTitle text="Options" />
8095
<FontIcon className="muidocs-icon-custom-sort" />
8196
<DropDownIcon iconClassName="muidocs-icon-navigation-expand-more" menuItems={iconMenuItems} />
82-
<span className="mui-toolbar-separator">&nbsp;</span>
97+
<ToolbarSeparator/>
8398
<RaisedButton label="Create Broadcast" primary={true} />
8499
</ToolbarGroup>
85100
</Toolbar>

‎src/index.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,8 +39,10 @@ module.exports = {
3939
Tabs: require('./js/tabs/tabs'),
4040
Toggle: require('./js/toggle'),
4141
TextField: require('./js/text-field'),
42-
Toolbar: require('./js/toolbar'),
43-
ToolbarGroup: require('./js/toolbar-group'),
42+
Toolbar: require('./js/toolbar/toolbar'),
43+
ToolbarGroup: require('./js/toolbar/toolbar-group'),
44+
ToolbarSeparator: require('./js/toolbar/toolbar-separator'),
45+
ToolbarTitle: require('./js/toolbar/toolbar-title'),
4446
Tooltip: require('./js/tooltip'),
4547
Utils: {
4648
CssEvent: require('./js/utils/css-event'),

‎src/js/styles/variables/custom-variables.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -120,8 +120,9 @@ var customVariables = new (function() {
120120
this.toggleTrackRequiredColor = this.toggleThumbRequiredColor; // fadeout 50%
121121

122122
// toolbar
123-
this.toolbarBackgroundColor = '#eeeeee'; //darken by 5%
123+
this.toolbarBackgroundColor = ColorManipulator.darken('#eeeeee', 0.05);
124124
this.toolbarHeight = 56;
125+
this.toolbarTitleFontSize = 20;
125126
this.toolbarIconColor = 'rgba(0, 0, 0, .40)';
126127
this.toolbarSeparatorColor = 'rgba(0, 0, 0, .175)';
127128
this.toolbarMenuHoverColor = 'rgba(0, 0, 0, .10)';

‎src/js/toolbar-group.jsx‎

Lines changed: 0 additions & 54 deletions
This file was deleted.

‎src/js/toolbar.jsx‎

Lines changed: 0 additions & 21 deletions
This file was deleted.

‎src/js/toolbar/toolbar-group.jsx‎

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
var React = require('react');
2+
var StylePropable = require('../mixins/style-propable');
3+
var CustomVariables = require('../styles/variables/custom-variables');
4+
5+
var ToolbarGroup = React.createClass({
6+
7+
mixins: [StylePropable],
8+
9+
propTypes: {
10+
className: React.PropTypes.string,
11+
float: React.PropTypes.string,
12+
firstChild: React.PropTypes.bool,
13+
lastChild: React.PropTypes.bool,
14+
},
15+
16+
getDefaultProps: function() {
17+
return {
18+
float: 'left',
19+
};
20+
},
21+
22+
/** Styles for certain mui components */
23+
_dropDownMenu: function() {
24+
var style = {
25+
main: {
26+
float: 'left',
27+
color: CustomVariables.colors.lightBlack,// removes hover color change, we want to keep it
28+
display: 'inline-block',
29+
marginRight: CustomVariables.spacing.desktopGutter,
30+
},
31+
controlBg: {
32+
backgroundColor: CustomVariables.toolbarMenuHoverColor,
33+
borderRadius: 0,
34+
},
35+
underline: {
36+
display: 'none',
37+
}
38+
};
39+
40+
return style;
41+
},
42+
43+
_button: function (){
44+
var marginVertical = (CustomVariables.toolbarHeight - CustomVariables.buttonHeight) / 2;
45+
var marginHorizontal = CustomVariables.spacing.desktopGutter;
46+
return {
47+
float: 'left',
48+
margin: marginVertical + 'px ' + marginHorizontal + 'px',
49+
position: 'relative',
50+
};
51+
},
52+
53+
_icon: function() {
54+
return {
55+
main: {
56+
float: 'left',
57+
cursor: 'pointer',
58+
color: CustomVariables.toolbarIconColor,
59+
lineHeight: CustomVariables.toolbarHeight + 'px',
60+
paddingLeft: CustomVariables.spacing.desktopGutter,
61+
},
62+
hover: {
63+
zIndex: 1,
64+
color: CustomVariables.colors.darkBlack,
65+
}
66+
};
67+
},
68+
69+
_span: function() {
70+
return {
71+
float: 'left',
72+
color: CustomVariables.toolbarIconColor,
73+
lineHeight: CustomVariables.toolbarHeight + 'px',
74+
};
75+
},
76+
77+
78+
render: function() {
79+
80+
var styles = this.mergeAndPrefix({
81+
position: 'relative',
82+
float: this.props.float,
83+
});
84+
85+
if (this.props.firstChild) styles.marginLeft = -24;
86+
if (this.props.lastChild) styles.marginRight = -24;
87+
88+
React.Children.forEach(this.props.children, function(currentChild) {
89+
switch (currentChild.type.displayName) {
90+
case 'DropDownMenu' :
91+
currentChild.props.style = this._dropDownMenu().main;
92+
currentChild.props.styleControlBg = this._dropDownMenu().controlBg;
93+
currentChild.props.styleUnderline = this._dropDownMenu().underline;
94+
break;
95+
case 'DropDownIcon' :
96+
currentChild.props.style = {float: 'left'};
97+
currentChild.props.iconStyle = this._icon().main;
98+
currentChild.props.hoverStyle = this._icon().hover;
99+
break;
100+
case 'RaisedButton' : case 'FlatButton' :
101+
currentChild.props.style = this._button();
102+
break;
103+
case 'FontIcon' :
104+
currentChild.props.style = this._icon().main;
105+
currentChild.props.hoverStyle = this._icon().hover;
106+
break;
107+
case 'ToolbarSeparator' : case 'ToolbarTitle' :
108+
currentChild.props.style = this._span();
109+
break;
110+
}
111+
}, this);
112+
113+
return (
114+
<div className={this.props.className} style={styles}>
115+
{this.props.children}
116+
</div>
117+
);
118+
}
119+
120+
});
121+
122+
module.exports = ToolbarGroup;

‎src/js/toolbar/toolbar-separator.jsx‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
var React = require('react');
2+
var StylePropable = require('../mixins/style-propable');
3+
var CustomVariables = require('../styles/variables/custom-variables');
4+
5+
var ToolbarSeparator = React.createClass({
6+
7+
mixins: [StylePropable],
8+
9+
render: function() {
10+
11+
var styles = this.mergeAndPrefix({
12+
backgroundColor: CustomVariables.toolbarSeparatorColor,
13+
display: 'inline-block',
14+
height: CustomVariables.spacing.desktopGutterMore,
15+
marginLeft: CustomVariables.spacing.desktopGutter,
16+
position: 'relative',
17+
top: ((CustomVariables.toolbarHeight - CustomVariables.spacing.desktopGutterMore) / 2),
18+
width: 1,
19+
});
20+
21+
return (
22+
<span className={this.props.className} style={styles}/>
23+
);
24+
}
25+
26+
});
27+
28+
module.exports = ToolbarSeparator;

‎src/js/toolbar/toolbar-title.jsx‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
var React = require('react');
2+
var StylePropable = require('../mixins/style-propable');
3+
var CustomVariables = require('../styles/variables/custom-variables');
4+
5+
var ToolbarTitle = React.createClass({
6+
7+
mixins: [StylePropable],
8+
9+
propTypes: {
10+
text: React.PropTypes.string,
11+
},
12+
13+
render: function() {
14+
15+
var styles = this.mergeAndPrefix({
16+
paddingRight: CustomVariables.spacing.desktopGutterLess,
17+
lineHeight: CustomVariables.toolbarHeight + 'px',
18+
fontSize: CustomVariables.toolbarTitleFontSize + 'px',
19+
display: 'inline-block',
20+
position: 'relative',
21+
});
22+
23+
return (
24+
<span className={this.props.className} style={styles}>{this.props.text}</span>
25+
);
26+
}
27+
28+
});
29+
30+
module.exports = ToolbarTitle;

‎src/js/toolbar/toolbar.jsx‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
var React = require('react');
2+
var StylePropable = require('../mixins/style-propable');
3+
var CustomVariables = require('../styles/variables/custom-variables');
4+
5+
var Toolbar = React.createClass({
6+
7+
mixins: [StylePropable],
8+
9+
propTypes: {
10+
className: React.PropTypes.string,
11+
},
12+
13+
/** Styles */
14+
_main: function() {
15+
return this.mergeAndPrefix({
16+
backgroundColor: CustomVariables.toolbarBackgroundColor,
17+
height: CustomVariables.toolbarHeight,
18+
width: '100%',
19+
padding: '0px ' + CustomVariables.spacing.desktopGutter + 'px',
20+
});
21+
},
22+
23+
render: function() {
24+
25+
var firstChild = this.props.children[0];
26+
var lastChild = this.props.children[this.props.children.length - 1];
27+
if (firstChild.type.displayName === 'ToolbarGroup') firstChild.props.firstChild = true;
28+
if (lastChild.type.displayName === 'ToolbarGroup') lastChild.props.lastChild = true;
29+
30+
return (
31+
<div className={this.props.className} style={this._main()}>
32+
{this.props.children}
33+
</div>
34+
);
35+
}
36+
37+
});
38+
39+
module.exports = Toolbar;

0 commit comments

Comments
 (0)