From a097bdc2028cfacb8e450076300b5ea789f9605a Mon Sep 17 00:00:00 2001 From: M03M Date: Wed, 18 Mar 2015 15:21:58 -0500 Subject: [PATCH 1/3] Refactored paper --- .../app/components/pages/components/paper.jsx | 97 ++++++++++--------- src/js/paper.jsx | 81 ++++++++++++---- 2 files changed, 116 insertions(+), 62 deletions(-) diff --git a/docs/src/app/components/pages/components/paper.jsx b/docs/src/app/components/pages/components/paper.jsx index fb553821ac9660..01ec5bf8ec4f36 100644 --- a/docs/src/app/components/pages/components/paper.jsx +++ b/docs/src/app/components/pages/components/paper.jsx @@ -103,6 +103,13 @@ var PaperPage = React.createClass({ } ]; + var styles = { + height: 100, + width: 100, + margin: '0 auto', + marginBottom: 64, + }; + return (
- -

zDepth=1

- - -

zDepth=2

- - -

zDepth=3

- - -

zDepth=4

- - -

zDepth=5

- + +

zDepth=1

+ + +

zDepth=2

+ + +

zDepth=3

+ + +

zDepth=4

+ + +

zDepth=5

+
- -

rounded=false

- - -

rounded=false

- - -

rounded=false

- - -

rounded=false

- - -

rounded=false

- + +

rounded=false

+ + +

rounded=false

+ + +

rounded=false

+ + +

rounded=false

+ + +

rounded=false

+
- -

circle=true

- - -

circle=true

- - -

circle=true

- - -

circle=true

- - -

circle=true

- + +

circle=true

+ + +

circle=true

+ + +

circle=true

+ + +

circle=true

+ + +

circle=true

+
diff --git a/src/js/paper.jsx b/src/js/paper.jsx index 8620c27de770d3..64c0ed7acf032b 100644 --- a/src/js/paper.jsx +++ b/src/js/paper.jsx @@ -1,12 +1,13 @@ 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, @@ -21,29 +22,44 @@ 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 = this.mergeAndPrefix({ + boxShadow: this.getZDepthShadows(this.props.zDepth).bottomBoxShadow, + width: '100%', + height: '100%', + }, this._main()); + + 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 ( -
-
+
+
{this.props.children}
@@ -52,6 +68,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]; } }); From a643c91d287e0d43fbf995215cce54d4b4b73400 Mon Sep 17 00:00:00 2001 From: M03M Date: Wed, 18 Mar 2015 16:16:05 -0500 Subject: [PATCH 2/3] Updated component which override paper inline styles. --- src/js/enhanced-switch.jsx | 2 +- src/js/menu/menu.jsx | 23 ++++++----- src/js/paper.jsx | 11 ++++-- src/js/toggle.jsx | 2 +- src/less/components.less | 3 -- src/less/components/components.less | 1 - src/less/components/paper.less | 59 ----------------------------- 7 files changed, 23 insertions(+), 78 deletions(-) delete mode 100644 src/less/components/components.less delete mode 100644 src/less/components/paper.less diff --git a/src/js/enhanced-switch.jsx b/src/js/enhanced-switch.jsx index 1725419d24b988..dadd733cff5215 100644 --- a/src/js/enhanced-switch.jsx +++ b/src/js/enhanced-switch.jsx @@ -216,7 +216,7 @@ var EnhancedSwitch = React.createClass({ ) : (
- {ripples} + {ripples}
); diff --git a/src/js/menu/menu.jsx b/src/js/menu/menu.jsx index f6b9f8acec2d60..feae8f81a3cbf9 100644 --- a/src/js/menu/menu.jsx +++ b/src/js/menu/menu.jsx @@ -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() { @@ -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 ( - + {this._getChildren()} ); diff --git a/src/js/paper.jsx b/src/js/paper.jsx index 64c0ed7acf032b..a1e8698353b7c8 100644 --- a/src/js/paper.jsx +++ b/src/js/paper.jsx @@ -11,7 +11,7 @@ var Paper = React.createClass({ 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() { @@ -33,11 +33,14 @@ var Paper = React.createClass({ }, _inner: function() { - var style = this.mergeAndPrefix({ - boxShadow: this.getZDepthShadows(this.props.zDepth).bottomBoxShadow, + var style = { width: '100%', height: '100%', - }, this._main()); + 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); diff --git a/src/js/toggle.jsx b/src/js/toggle.jsx index 755b05b6a2eafb..89b33a6cd41232 100644 --- a/src/js/toggle.jsx +++ b/src/js/toggle.jsx @@ -82,7 +82,7 @@ var Toggle = React.createClass({ var toggleElement = (
- +
); diff --git a/src/less/components.less b/src/less/components.less index 4a027bce71f74f..96427cb6ee03b6 100644 --- a/src/less/components.less +++ b/src/less/components.less @@ -1,5 +1,2 @@ // Core CSS @import "core/core.less"; - -// Components -@import "components/components.less"; diff --git a/src/less/components/components.less b/src/less/components/components.less deleted file mode 100644 index 7f742d3dcf1e96..00000000000000 --- a/src/less/components/components.less +++ /dev/null @@ -1 +0,0 @@ -@import "paper.less"; \ No newline at end of file diff --git a/src/less/components/paper.less b/src/less/components/paper.less deleted file mode 100644 index 059903ed26a46a..00000000000000 --- a/src/less/components/paper.less +++ /dev/null @@ -1,59 +0,0 @@ -.mui-paper { - - &.mui-rounded { - border-radius: 2px; - - & > .mui-paper-container { - border-radius: 2px; - } - } - - &.mui-circle { - border-radius: 50%; - - & > .mui-paper-container { - border-radius: 50%; - } - } - - & > .mui-paper-container { - height: 100%; - width: 100%; - } - - &.mui-z-depth-1 { - box-shadow: 0 1px 4px rgba(0, 0, 0, 0.24); - & > .mui-z-depth-bottom { - box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12); - } - } - - &.mui-z-depth-2 { - box-shadow: 0 3px 10px rgba(0, 0, 0, 0.23); - & > .mui-z-depth-bottom { - box-shadow: 0 3px 10px rgba(0, 0, 0, 0.16); - } - } - - &.mui-z-depth-3 { - box-shadow: 0 6px 10px rgba(0, 0, 0, 0.23); - & > .mui-z-depth-bottom { - box-shadow: 0 10px 30px rgba(0, 0, 0, 0.19); - } - } - - &.mui-z-depth-4 { - box-shadow: 0 10px 18px rgba(0, 0, 0, 0.22); - & > .mui-z-depth-bottom { - box-shadow: 0 14px 45px rgba(0, 0, 0, 0.25); - } - } - - &.mui-z-depth-5 { - box-shadow: 0 15px 20px rgba(0, 0, 0, 0.22); - & > .mui-z-depth-bottom { - box-shadow: 0 19px 60px rgba(0, 0, 0, 0.30); - } - } - -} From eac16ec9ac9c8756cc605319d5d99a762202f24c Mon Sep 17 00:00:00 2001 From: M03M Date: Wed, 18 Mar 2015 16:19:24 -0500 Subject: [PATCH 3/3] Updated docs site. --- docs/src/app/components/pages/components/paper.jsx | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/docs/src/app/components/pages/components/paper.jsx b/docs/src/app/components/pages/components/paper.jsx index 01ec5bf8ec4f36..f4f9149ba73c98 100644 --- a/docs/src/app/components/pages/components/paper.jsx +++ b/docs/src/app/components/pages/components/paper.jsx @@ -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',