Skip to content

Commit

Permalink
[Avatar] remove border on images
Browse files Browse the repository at this point in the history
I can't find the border on the spec of material design.
  • Loading branch information
oliviertassinari committed Jul 19, 2015
1 parent b21bbff commit 490859c
Showing 1 changed file with 35 additions and 11 deletions.
46 changes: 35 additions & 11 deletions src/avatar.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -39,37 +39,61 @@ let Avatar = React.createClass({
...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: src ? size - 2 : size,
width: src ? size - 2 : size,
height: size,
width: size,
userSelect: 'none',
backgroundColor: backgroundColor,
borderRadius: '50%',
border: src ? 'solid 1px' : 'none',
borderColor: this.context.muiTheme.palette.borderColor,
boxShadow: src ? null : boxShadow, // Doesn't apply above an img
borderRadius: borderRadius,
display: 'inline-block',

//Needed for img
position: 'relative',

//Needed for letter avatars
textAlign: 'center',
lineHeight: size + 'px',
fontSize: size / 2 + 4,
color: color,
},

iconStyles: {
margin: 8,
},
};

let mergedRootStyles = this.mergeAndPrefix(styles.root, style);

if (src) {
return <img {...other} src={src} style={mergedRootStyles} />;
const styleImg = {
height: size,
width: size,
borderRadius: borderRadius,
};

const styleImgShadow = {
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
boxShadow: boxShadow,
borderRadius: borderRadius,
};

return <div {...other} style={mergedRootStyles} >
<img src={src} style={styleImg} />
<div style={this.mergeAndPrefix(styleImgShadow)} />
</div>;
} else {
const styleIcon = {
margin: 8,
};

let iconElement = icon ? React.cloneElement(icon, {
color: color,
style: this.mergeStyles(styles.iconStyles, icon.props.style),
style: this.mergeStyles(styleIcon, icon.props.style),
}) : null;

return <div {...other} style={mergedRootStyles}>
Expand Down

4 comments on commit 490859c

@CumpsD
Copy link
Contributor

@CumpsD CumpsD commented on 490859c Aug 24, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Any chance we can get the ability to get these borders back by setting a prop flag? Was kinda surprised to see my avatar borders gone today :)

@CumpsD
Copy link
Contributor

@CumpsD CumpsD commented on 490859c Aug 24, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nevermind...

avatar: {
            borderColor: Colors.white
        },

In my theme :)

@oliviertassinari
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This was rollback. see #1252

@CumpsD
Copy link
Contributor

@CumpsD CumpsD commented on 490859c Aug 24, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Quick reply :) Found it, thanks

Please sign in to comment.