Merge pull request #1252 from oliviertassinari/avatar

[Avatar] rollback, use ligter border color
mui · Jul 29, 2015 · 7798bb4 · 7798bb4
2 parents 3829890 + 99cccb5
commit 7798bb4
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 41 deletions.
diff --git a/.gitignore b/.gitignore
@@ -9,3 +9,6 @@ icon-builder/jsx
 
 # Exclude IDE project folders
 .idea
+
+# OS files
+.DS_STORE
diff --git a/docs/src/app/components/pages/components/lists.jsx b/docs/src/app/components/pages/components/lists.jsx
@@ -14,7 +14,6 @@ let ContentSend = require('svg-icons/content/send');
 let EditorInsertChart = require('svg-icons/editor/insert-chart');
 let FileFolder = require('svg-icons/file/folder');
 let MoreVertIcon = require('svg-icons/navigation/more-vert');
-let ToggleStarBorder = require('svg-icons/toggle/star-border');
 
 let {
   Avatar,

diff --git a/src/avatar.jsx b/src/avatar.jsx
@@ -11,9 +11,9 @@ let Avatar = React.createClass({
   },
 
   propTypes: {
-    icon: React.PropTypes.element,
     backgroundColor: React.PropTypes.string,
     color: React.PropTypes.string,
+    icon: React.PropTypes.element,
     size: React.PropTypes.number,
     src: React.PropTypes.string,
     style: React.PropTypes.object,
@@ -28,75 +28,57 @@ let Avatar = React.createClass({
   },
 
   render() {
-
     let {
-      icon,
       backgroundColor,
       color,
+      icon,
       size,
       src,
       style,
       ...other,
     } = this.props;
 
-    const boxShadow = (style && style.boxShadow) ? style.boxShadow : '0 0 1px 0 rgba(0, 0, 0, 0.2) inset';
-    const borderRadius = (style && style.borderRadius) ? style.borderRadius : '50%';
-
     let styles = {
       root: {
         height: size,
         width: size,
         userSelect: 'none',
-        backgroundColor: backgroundColor,
-        boxShadow: src ? null : boxShadow, // Doesn't apply above an img
-        borderRadius: borderRadius,
+        borderRadius: '50%',
         display: 'inline-block',
-
-        //Needed for img
-        position: 'relative',
-
-        //Needed for letter avatars
-        textAlign: 'center',
-        lineHeight: size + 'px',
-        fontSize: size / 2 + 4,
-        color: color,
       },
     };
 
-    let mergedRootStyles = this.mergeAndPrefix(styles.root, style);
-
     if (src) {
-      const styleImg = {
-        height: size,
-        width: size,
-        borderRadius: borderRadius,
-      };
+      const borderColor = this.context.muiTheme.component.avatar.borderColor;
 
-      const styleImgShadow = {
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        width: '100%',
-        height: '100%',
-        boxShadow: boxShadow,
-        borderRadius: borderRadius,
-      };
+      if(borderColor) {
+        styles.root = this.mergeStyles(styles.root, {
+          height: size - 2,
+          width: size - 2,
+          border: 'solid 1px ' + borderColor,
+        });
+      }
 
-      return <div {...other} style={mergedRootStyles} >
-          <img src={src} style={styleImg} />
-          <div style={this.mergeAndPrefix(styleImgShadow)} />
-        </div>;
+      return <img {...other} src={src} style={this.mergeAndPrefix(styles.root, style)} />;
     } else {
+      styles.root = this.mergeStyles(styles.root, {
+        backgroundColor: backgroundColor,
+        textAlign: 'center',
+        lineHeight: size + 'px',
+        fontSize: size / 2 + 4,
+        color: color,
+      });
+
       const styleIcon = {
         margin: 8,
       };
 
-      let iconElement = icon ? React.cloneElement(icon, {
+      const iconElement = icon ? React.cloneElement(icon, {
         color: color,
         style: this.mergeStyles(styleIcon, icon.props.style),
       }) : null;
 
-      return <div {...other} style={mergedRootStyles}>
+      return <div {...other} style={this.mergeAndPrefix(styles.root, style)}>
         {iconElement}
         {this.props.children}
       </div>;

diff --git a/src/styles/themes/dark-theme.js b/src/styles/themes/dark-theme.js
@@ -15,6 +15,9 @@ let DarkTheme = {
   getComponentThemes(palette) {
     let cardColor = Colors.grey800;
     return {
+      avatar: {
+        borderColor: 'rgba(0, 0, 0, 0.5)',
+      },
       floatingActionButton: {
         disabledColor: ColorManipulator.fade(palette.textColor, 0.12),
       },

diff --git a/src/styles/themes/light-theme.js b/src/styles/themes/light-theme.js
@@ -34,6 +34,9 @@ let LightTheme = {
         textColor: Colors.darkWhite,
         height: spacing.desktopKeylineIncrement,
       },
+      avatar: {
+        borderColor: 'rgba(0, 0, 0, 0.08)',
+      },
       button: {
         height: 36,
         minWidth: 88,