Merge pull request #566 from mmrtnz/css-styles

Refactored overriding inline styles
mui · Apr 24, 2015 · 1643c16 · 1643c16
2 parents 07a87b9 + d8fb499
commit 1643c16
Show file tree

Hide file tree

Showing 49 changed files with 1,561 additions and 1,580 deletions.
diff --git a/docs/src/app/components/code-example/code-example.jsx b/docs/src/app/components/code-example/code-example.jsx
@@ -6,14 +6,22 @@ var React = require('react'),
 class CodeExample extends React.Component {
 
   render() {
+    var borderColor = this.context.theme.palette.borderColor;
     var style = {
-      color: this.context.theme.palette.textColor
+      label: {
+        color: borderColor
+      },
+      block: {
+        borderRight: 'solid 1px ' + borderColor,
+        borderBottom: 'solid 1px ' + borderColor,
+        borderRadius: '0 0 2px 0'
+      }
     };
 
     return (
       <mui.Paper className="code-example">
-        <div className="example-label" style={style}>example</div>
-        <div className="example-block">
+        <div className="example-label" style={style.label}>example</div>
+        <div className="example-block" style={style.block}>
           {this.props.children}
         </div>
         <CodeBlock>{this.props.code}</CodeBlock>

diff --git a/docs/src/app/components/pages/home.jsx b/docs/src/app/components/pages/home.jsx
@@ -18,10 +18,10 @@ class HomePage extends React.Component {
         color: ThemeManager.palette.primary1Color,
       },
       githubStyle: {
-        margin: '16px 32px 0px 8px',
+        margin: '16px 32px 0px 8px'
       },
       demoStyle: {
-        margin: '16px 32px 0px 32px',
+        margin: '16px 32px 0px 32px'
       },
     }
   }
@@ -40,8 +40,20 @@ class HomePage extends React.Component {
                 Components <span className="no-wrap">that
                 Implement</span> <span className="no-wrap">Google&apos;s Material Design</span>
               </h2>
-              <RaisedButton className="demo-button" label="Demo" onTouchTap={this._onDemoClick} linkButton={true} style={this._raisedButton().demoStyle} labelStyle={this._raisedButton().label}/>
-              <RaisedButton className="github-button" label="GitHub" linkButton={true} href="https://github.com/callemall/material-ui" style={this._raisedButton().githubStyle} labelStyle={this._raisedButton().label}/>
+              <RaisedButton 
+                className="demo-button" 
+                label="Demo" 
+                onTouchTap={this._onDemoClick}
+                linkButton={true} 
+                style={this._raisedButton().demoStyle} 
+                labelStyle={this._raisedButton().label}/>
+              <RaisedButton 
+                className="github-button" 
+                label="GitHub" 
+                linkButton={true} 
+                href="https://github.com/callemall/material-ui" 
+                style={this._raisedButton().githubStyle} 
+                labelStyle={this._raisedButton().label}/>
             </div>
           </div>
         </div>

diff --git a/docs/src/less/main.less b/docs/src/less/main.less
@@ -91,10 +91,7 @@ body, h1, h2, h3, h4, h5, h6 {
     text-transform: uppercase;
     color: rgba(0, 0, 0, 0.26); // minBlack;
     padding: 8px;
-    border-right: solid 1px @border-color;
-    border-bottom: solid 1px @border-color;
     margin-bottom: 0;
-    border-radius: 0 0 2px 0;
   }
 
   .example-block,

diff --git a/src/app-bar.jsx b/src/app-bar.jsx
@@ -32,52 +32,6 @@ var AppBar = React.createClass({
     }
   },
 
-  /** Styles */
-
-  _main: function() {
-    return this.mergeAndPrefix({
-      zIndex: 5,
-      width: '100%',
-      minHeight: this.getSpacing().desktopKeylineIncrement,
-      backgroundColor: this.getThemeVariables().color,
-    });
-  },
-
-  _title: function() {
-    return {      
-      float: 'left',
-      paddingTop: 0,
-      letterSpacing: 0,
-      fontSize: '24px',
-      fontWeight: Typography.fontWeightNormal,
-      color: this.getThemeVariables().textColor,
-      lineHeight: this.getSpacing().desktopKeylineIncrement + 'px',
-    };
-  },
-
-  _iconButton: function() {
-    var iconButtonSize = this.context.theme.component.button.iconButtonSize;
-    return {
-      style: {
-        marginTop: (this.getThemeVariables().height - iconButtonSize) / 2,
-        float: 'left',
-        marginRight: 8,
-        marginLeft: -16,
-      },
-      iconStyle: {
-        fill: this.getThemeVariables().textColor,
-        color: this.getThemeVariables().textColor,
-      }
-    }
-  },
-
-  _paper: function() {
-    return {
-      paddingLeft: this.getSpacing().desktopGutter,
-      paddingRight: this.getSpacing().desktopGutter,
-    };
-  },
-
   componentDidMount: function() {
     if (process.NODE_ENV !== 'production' && 
        (this.props.iconElementLeft && this.props.iconClassNameLeft)) {
@@ -95,40 +49,79 @@ var AppBar = React.createClass({
     return this.context.theme.component.appBar;
   },
 
+  getStyles: function(){
+    var iconButtonSize = this.context.theme.component.button.iconButtonSize;
+    var styles = {
+      root: {
+        zIndex: 5,
+        width: '100%',
+        minHeight: this.getSpacing().desktopKeylineIncrement,
+        backgroundColor: this.getThemeVariables().color
+      },
+      title: {
+        float: 'left',
+        paddingTop: 0,
+        letterSpacing: 0,
+        fontSize: '24px',
+        fontWeight: Typography.fontWeightNormal,
+        color: this.getThemeVariables().textColor,
+        lineHeight: this.getSpacing().desktopKeylineIncrement + 'px'
+      },
+      iconButton: {
+        style: {
+          marginTop: (this.getThemeVariables().height - iconButtonSize) / 2,
+          float: 'left',
+          marginRight: 8,
+          marginLeft: -16
+        },
+        iconStyle: {
+          fill: this.getThemeVariables().textColor,
+          color: this.getThemeVariables().textColor
+        }
+      },
+      paper: {
+        paddingLeft: this.getSpacing().desktopGutter,
+        paddingRight: this.getSpacing().desktopGutter
+      }
+    };
+    return styles;
+  },
+
   render: function() {
     var {
       onTouchTap,
       ...other
     } = this.props;
+    var styles = this.getStyles();
 
     var title, menuElementLeft, menuElementRight;
-    var iconRightStyle = this.mergeAndPrefix(this._iconButton().style, {
+    var iconRightStyle = this.mergeAndPrefix(styles.iconButton.style, {
       float: 'right',
       marginRight: -16,
-      marginLeft: 8,
+      marginLeft: 8
     });
 
     if (this.props.title) {
       // If the title is a string, wrap in an h1 tag.
       // If not, just use it as a node.
       title = Object.prototype.toString.call(this.props.title) === '[object String]' ?
-        <h1 style={this._title()}>{this.props.title}</h1> :
+        <h1 style={this.mergeAndPrefix(styles.title)}>{this.props.title}</h1> :
         this.props.title;
     }
 
     if (this.props.showMenuIconButton) {
       if (this.props.iconElementLeft) {
         menuElementLeft = (
-          <div style={this._iconButton().style}> 
+          <div style={styles.iconButton.style}> 
             {this.props.iconElementLeft} 
           </div>
         );
       } else {
-        var child = (this.props.iconClassNameLeft) ? '' : <NavigationMenu style={this._iconButton().iconStyle}/>;
+        var child = (this.props.iconClassNameLeft) ? '' : <NavigationMenu style={this.mergeAndPrefix(styles.iconButton.iconStyle)}/>;
         menuElementLeft = (
           <IconButton
-            style={this._iconButton().style}
-            iconStyle={this._iconButton().iconStyle}
+            style={this.mergeAndPrefix(styles.iconButton.style)}
+            iconStyle={this.mergeAndPrefix(styles.iconButton.iconStyle)}
             iconClassName={this.props.iconClassNameLeft}
             onTouchTap={this._onMenuIconButtonTouchTap}>
               {child}
@@ -146,7 +139,7 @@ var AppBar = React.createClass({
         menuElementRight = (
           <IconButton
             style={iconRightStyle}
-            iconStyle={this._iconButton().iconStyle}
+            iconStyle={this.mergeAndPrefix(styles.iconButton.iconStyle)}
             iconClassName={this.props.iconClassNameRight}
             onTouchTap={this._onMenuIconButtonTouchTap}>
           </IconButton>
@@ -155,10 +148,15 @@ var AppBar = React.createClass({
     }
 
     return (
-      <Paper rounded={false} className={this.props.className}  style={this._main()} innerStyle={this._paper()} zDepth={this.props.zDepth}>
-        {menuElementLeft}
-        {title}
-        {menuElementRight}
+      <Paper 
+        rounded={false} 
+        className={this.props.className}  
+        style={this.mergeAndPrefix(styles.root, this.props.style)} 
+        innerStyle={this.mergeAndPrefix(styles.paper)} 
+        zDepth={this.props.zDepth}>
+          {menuElementLeft}
+          {title}
+          {menuElementRight}
       </Paper>
     );
   },

diff --git a/src/checkbox.jsx b/src/checkbox.jsx
@@ -31,60 +31,72 @@ var Checkbox = React.createClass({
     return this.context.theme.component.checkbox;
   },
 
+  getStyles: function() {
+    var checkboxSize = 24;
+    var styles = {
+      icon: {
+          height: checkboxSize,
+          width: checkboxSize,
+      },
+      check: {
+          positiion: 'absolute',
+          opacity: 0, 
+          transform: 'scale(0)',
+          transitionOrigin: '50% 50%',
+          transition: Transitions.easeOut('450ms', 'opacity', '0ms') + ', ' + 
+                      Transitions.easeOut('0ms', 'transform', '450ms'),
+          fill: this.getTheme().checkedColor   
+      },
+      box: {
+          position: 'absolute',
+          opacity: 1,
+          fill: this.getTheme().boxColor,          
+          transition: Transitions.easeOut('2s', null, '200ms') 
+      },
+      checkWhenSwitched: {
+        opacity: 1,
+        transform: 'scale(1)',
+        transition: Transitions.easeOut('0ms', 'opacity', '0ms') + ', ' + 
+                    Transitions.easeOut('800ms', 'transform', '0ms')
+      },
+      boxWhenSwitched: {
+        transition: Transitions.easeOut('100ms', null, '0ms'),
+        fill: this.getTheme().checkedColor
+      },
+      checkWhenDisabled: {
+        fill: this.getTheme().disabledColor
+      },
+      boxWhenDisabled: {
+        fill: this.getTheme().disabledColor
+      }
+    };
+    return styles;
+  },
+
   render: function() {
     var {
       onCheck,
       ...other
     } = this.props;
 
-    var checkboxSize = 24;
-
-    var iconStyles = {
-        height: checkboxSize,
-        width: checkboxSize,
-    }
-
-    var checkStyles = {
-        positiion: 'absolute',
-        opacity: 0,
-        transform: 'scale(0)',
-        transitionOrigin: '50% 50%',
-        transition: Transitions.easeOut('450ms', 'opacity', '0ms') + ', ' + 
-                    Transitions.easeOut('0ms', 'transform', '450ms'),
-        fill: this.getTheme().checkedColor   
-    }
-
-    var boxStyles = {
-        position: 'absolute',
-        opacity: 1,
-        fill: this.getTheme().boxColor,          
-        transition: Transitions.easeOut('2s', null, '200ms') 
-    }
-
-    if (this.state.switched) {
-      checkStyles = this.mergeStyles(checkStyles, {
-          opacity: 1,
-          transform: 'scale(1)',
-          transition: Transitions.easeOut('0ms', 'opacity', '0ms') + ', ' + 
-                      Transitions.easeOut('800ms', 'transform', '0ms')
-        });
-      boxStyles = this.mergeStyles(boxStyles, {
-          transition: Transitions.easeOut('100ms', null, '0ms'),
-          fill: this.getTheme().checkedColor
-        });
-    }
-
-    if (this.props.disabled) {
-      checkStyles.fill = this.getTheme().disabledColor;
-      boxStyles.fill = this.getTheme().disabledColor;
-    }
-
-    if (this.state.switched && this.props.disabled) boxStyles.opacity = 0;
+    var styles = this.getStyles();
 
     var checkboxElement = (
       <div>
-        <CheckboxOutline style={boxStyles} />
-        <CheckboxChecked style={checkStyles} />
+        <CheckboxOutline style={
+          this.mergeAndPrefix(
+            styles.box,
+            this.state.switched && styles.boxWhenSwitched,
+            this.props.style,
+            this.props.disabled && styles.boxWhenDisabled
+        )} />
+        <CheckboxChecked style={
+          this.mergeAndPrefix(
+            styles.check,
+            this.state.switched && styles.checkWhenSwitched,
+            this.props.style,            
+            this.props.disabled && styles.checkWhenDisabled
+        )} />
       </div>
     );
 
@@ -93,7 +105,7 @@ var Checkbox = React.createClass({
       inputType: "checkbox",
       switched: this.state.switched,
       switchElement: checkboxElement,
-      iconStyle: iconStyles,
+      iconStyle: styles.icon,
       onSwitch: this._handleCheck,
       onParentShouldUpdate: this._handleStateChange,
       defaultSwitched: this.props.defaultChecked,

diff --git a/src/date-picker/calendar.jsx b/src/date-picker/calendar.jsx
@@ -60,21 +60,18 @@ var Calendar = React.createClass({
       root: {
         fontSize: '12px'
       },
-
       calendarContainer: {
         width: isLandscape ? '280px' : '100%',
         height: weekCount === 5 ? '268px' :
           weekCount === 6 ? '308px' : '228px',
         float: isLandscape ? 'right' : 'none',
         transition: Transitions.easeOut('150ms', 'height')
       },
-
       dateDisplay: {
         width: isLandscape ? '280px' : '100%',
         height: '100%',
         float: isLandscape ? 'left' : 'none'
       },
-
       weekTitle: {
         padding: '0 14px',
         lineHeight: '12px',
@@ -83,7 +80,6 @@ var Calendar = React.createClass({
         fontWeight: '500',
         margin: 0
       },
-
       weekTitleDay: {
         listStyle: 'none',
         float: 'left',