Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refactored css into js for paper #445

Merged
merged 3 commits into from
Mar 18, 2015
Merged

Refactored css into js for paper #445

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a097bdc
Refactored paper
mmrtnz Mar 18, 2015
a643c91
Updated component which override paper inline styles.
mmrtnz Mar 18, 2015
eac16ec
Updated docs site.
mmrtnz Mar 18, 2015
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
104 changes: 59 additions & 45 deletions docs/src/app/components/pages/components/paper.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,13 @@ var PaperPage = React.createClass({
'sometimes helpful to assign an className to the inner div ' +
'for styling. This property is the className for the inner div.'
},
{
name: 'innerStyle',
type: 'string',
header: 'optional',
desc: 'Similiar to innerClassName. Overrides the inline-style of ' +
'the inner div.'
},
{
name: 'rounded',
type: 'bool',
Expand Down Expand Up @@ -103,6 +110,13 @@ var PaperPage = React.createClass({
}
];

var styles = {
height: 100,
width: 100,
margin: '0 auto',
marginBottom: 64,
};

return (
<ComponentDoc
name="Paper"
Expand All @@ -111,57 +125,57 @@ var PaperPage = React.createClass({

<div className="paper-examples">
<div className="paper-examples-group">
<Paper zDepth={1}>
<p>zDepth=1</p>
</Paper>
<Paper zDepth={2}>
<p>zDepth=2</p>
</Paper>
<Paper zDepth={3}>
<p>zDepth=3</p>
</Paper>
<Paper zDepth={4}>
<p>zDepth=4</p>
</Paper>
<Paper zDepth={5}>
<p>zDepth=5</p>
</Paper>
<Paper style={styles} innerClassName="mui-paper-container" zDepth={1}>
<p>zDepth=1</p>
</Paper>
<Paper style={styles} innerClassName="mui-paper-container" zDepth={2}>
<p>zDepth=2</p>
</Paper>
<Paper style={styles} innerClassName="mui-paper-container" zDepth={3}>
<p>zDepth=3</p>
</Paper>
<Paper style={styles} innerClassName="mui-paper-container" zDepth={4}>
<p>zDepth=4</p>
</Paper>
<Paper style={styles} innerClassName="mui-paper-container" zDepth={5}>
<p>zDepth=5</p>
</Paper>
</div>

<div className="paper-examples-group">
<Paper zDepth={1} rounded={false}>
<p>rounded=false</p>
</Paper>
<Paper zDepth={2} rounded={false}>
<p>rounded=false</p>
</Paper>
<Paper zDepth={3} rounded={false}>
<p>rounded=false</p>
</Paper>
<Paper zDepth={4} rounded={false}>
<p>rounded=false</p>
</Paper>
<Paper zDepth={5} rounded={false}>
<p>rounded=false</p>
</Paper>
<Paper style={styles} innerClassName="mui-paper-container" zDepth={1} rounded={false}>
<p>rounded=false</p>
</Paper>
<Paper style={styles} innerClassName="mui-paper-container" zDepth={2} rounded={false}>
<p>rounded=false</p>
</Paper>
<Paper style={styles} innerClassName="mui-paper-container" zDepth={3} rounded={false}>
<p>rounded=false</p>
</Paper>
<Paper style={styles} innerClassName="mui-paper-container" zDepth={4} rounded={false}>
<p>rounded=false</p>
</Paper>
<Paper style={styles} innerClassName="mui-paper-container" zDepth={5} rounded={false}>
<p>rounded=false</p>
</Paper>
</div>

<div className="paper-examples-group">
<Paper zDepth={1} circle={true}>
<p>circle=true</p>
</Paper>
<Paper zDepth={2} circle={true}>
<p>circle=true</p>
</Paper>
<Paper zDepth={3} circle={true}>
<p>circle=true</p>
</Paper>
<Paper zDepth={4} circle={true}>
<p>circle=true</p>
</Paper>
<Paper zDepth={5} circle={true}>
<p>circle=true</p>
</Paper>
<Paper style={styles} innerClassName="mui-paper-container" zDepth={1} circle={true}>
<p>circle=true</p>
</Paper>
<Paper style={styles} innerClassName="mui-paper-container" zDepth={2} circle={true}>
<p>circle=true</p>
</Paper>
<Paper style={styles} innerClassName="mui-paper-container" zDepth={3} circle={true}>
<p>circle=true</p>
</Paper>
<Paper style={styles} innerClassName="mui-paper-container" zDepth={4} circle={true}>
<p>circle=true</p>
</Paper>
<Paper style={styles} innerClassName="mui-paper-container" zDepth={5} circle={true}>
<p>circle=true</p>
</Paper>
</div>
</div>

Expand Down
2 changes: 1 addition & 1 deletion src/js/enhanced-switch.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -216,7 +216,7 @@ var EnhancedSwitch = React.createClass({
) : (
<div style={wrapStyles}>
<div style={this.props.trackStyle}/>
<Paper style={this.props.thumbStyle} zDepth={1}> {ripples} </Paper>
<Paper style={this.props.thumbStyle} zDepth={1} circle={true}> {ripples} </Paper>
</div>
);

Expand Down
23 changes: 14 additions & 9 deletions src/js/menu/menu.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -180,22 +180,27 @@ var Menu = React.createClass({
},

// Main Style
_paperContainer: function() {
var styles = {
paddingTop: CustomVariables.spacing.desktopGutterMini,
paddingBottom: CustomVariables.spacing.desktopGutterMini,
_main: function() {
return this.mergeAndPrefix({
backgroundColor: CustomVariables.menuBackgroundColor,
transition: Transitions.easeOut(null, 'height'),
};
});
},

_innerPaper: function() {
var style = {
paddingTop: CustomVariables.spacing.desktopGutterMini,
paddingBottom: CustomVariables.spacing.desktopGutterMini,
}

if (this.props.hideable) {
this.mergeStyles(styles, {
this.mergeStyles(style, {
overflow: 'hidden',
padding: 0,
});
}

return this.mergeAndPrefix(styles);
return style;
},

_subheader: function() {
Expand All @@ -206,11 +211,11 @@ var Menu = React.createClass({
},

render: function() {
var styles = this._paperContainer();
var styles = this._main();
if (this.props.hideable) styles = this.mergeStyles(styles, this._hideable());

return (
<Paper ref="paperContainer" zDepth={this.props.zDepth} style={styles}>
<Paper ref="paperContainer" zDepth={this.props.zDepth} style={styles} innerStyle={this._innerPaper()}>
{this._getChildren()}
</Paper>
);
Expand Down
86 changes: 68 additions & 18 deletions src/js/paper.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,17 @@
var React = require('react');
var Classable = require('./mixins/classable');
var StylePropable = require('./mixins/style-propable');

var Paper = React.createClass({

mixins: [Classable],
mixins: [StylePropable],

propTypes: {
circle: React.PropTypes.bool,
className: React.PropTypes.string,
innerClassName: React.PropTypes.string,
innerStyle: React.PropTypes.object,
rounded: React.PropTypes.bool,
zDepth: React.PropTypes.oneOf([0,1,2,3,4,5])
zDepth: React.PropTypes.oneOf([0,1,2,3,4,5]),
},

getDefaultProps: function() {
Expand All @@ -21,29 +22,47 @@ var Paper = React.createClass({
};
},

/** Styles */
_main: function() {
return this.mergeAndPrefix({
boxShadow: this.getZDepthShadows(this.props.zDepth).boxShadow,
borderRadius: this.props.circle ? '50%' :
this.props.rounded ? '2px' :
'0px',
});
},

_inner: function() {
var style = {
width: '100%',
height: '100%',
boxShadow: this.getZDepthShadows(this.props.zDepth).bottomBoxShadow,
borderRadius: this.props.circle ? '50%' :
this.props.rounded ? '2px' :
'0px',
};

if (this.props.innerStyle) {
style = this.mergeAndPrefix(style, this.props.innerStyle);
}

return style;
},

render: function() {
var {
className,
circle,
innerClassName,
style,
innerStyle,
circle,
rounded,
zDepth,
innerStyle,
...other } = this.props,
classes = this.getClasses(
'mui-paper ' +
'mui-z-depth-' + this.props.zDepth, {
'mui-rounded': this.props.rounded,
'mui-circle': this.props.circle
}),
insideClasses =
this.props.innerClassName + ' ' +
'mui-paper-container ' +
'mui-z-depth-bottom';
...other } = this.props;

return (
<div {...other} className={classes}>
<div ref="innerContainer" className={insideClasses} style={innerStyle || {}}>
<div {...other} className={this.props.className} style={this._main()}>
<div ref="innerContainer" className={this.props.innerClassName} style={this._inner()}>
{this.props.children}
</div>
</div>
Expand All @@ -52,6 +71,37 @@ var Paper = React.createClass({

getInnerContainer: function() {
return this.refs.innerContainer;
},

getZDepthShadows: function(zDepth) {
var shadows = [
{
boxShadow: '',
bottomBoxShadow: '',
},
{
boxShadow: '0 1px 4px rgba(0, 0, 0, 0.24)',
bottomBoxShadow: '0 1px 6px rgba(0, 0, 0, 0.12)',
},
{
boxShadow: '0 3px 10px rgba(0, 0, 0, 0.23)',
bottomBoxShadow: '0 3px 10px rgba(0, 0, 0, 0.16)',
},
{
boxShadow: '0 6px 10px rgba(0, 0, 0, 0.23)',
bottomBoxShadow: '0 10px 30px rgba(0, 0, 0, 0.19)',
},
{
boxShadow: '0 10px 18px rgba(0, 0, 0, 0.22)',
bottomBoxShadow: '0 14px 45px rgba(0, 0, 0, 0.25)',
},
{
boxShadow: '0 15px 20px rgba(0, 0, 0, 0.22)',
bottomBoxShadow: '0 19px 60px rgba(0, 0, 0, 0.30)',
},
];

return shadows[zDepth];
}

});
Expand Down
2 changes: 1 addition & 1 deletion src/js/toggle.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@ var Toggle = React.createClass({
var toggleElement = (
<div>
<div style={trackStyles} />
<Paper style={thumbStyles} zDepth={1}/>
<Paper style={thumbStyles} circle={true} zDepth={1} />
</div>
);

Expand Down
3 changes: 0 additions & 3 deletions src/less/components.less
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,2 @@
// Core CSS
@import "core/core.less";

// Components
@import "components/components.less";
1 change: 0 additions & 1 deletion src/less/components/components.less
View file
Open in desktop

This file was deleted.

59 changes: 0 additions & 59 deletions src/less/components/paper.less
View file
Open in desktop

This file was deleted.