Skip to content

Commit c396399

Browse files
hai-ceahai-cea
committed
[avatar] Allow for letter avatar & updated docs
1 parent 1d4367d commit c396399

File tree

6 files changed

+136
-7
lines changed

6 files changed

+136
-7
lines changed

‎docs/src/app/app-routes.jsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ var InlineStyles = require('./components/pages/customization/inline-styles.jsx')
1717

1818
var Components = require('./components/pages/components.jsx');
1919
var AppBar = require('./components/pages/components/app-bar.jsx');
20+
var Avatars = require('./components/pages/components/avatars.jsx');
2021
var Buttons = require('./components/pages/components/buttons.jsx');
2122
var DatePicker = require('./components/pages/components/date-picker.jsx');
2223
var Dialog = require('./components/pages/components/dialog.jsx');
@@ -59,6 +60,7 @@ var AppRoutes = (
5960

6061
<Route name="components" handler={Components}>
6162
<Route name="appbar" handler={AppBar} />
63+
<Route name="avatars" handler={Avatars} />
6264
<Route name="buttons" handler={Buttons} />
6365
<Route name="date-picker" handler={DatePicker} />
6466
<Route name="dialog" handler={Dialog} />

‎docs/src/app/components/pages/components.jsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ class Components extends React.Component {
66
render() {
77
var menuItems = [
88
{ route: 'appbar', text: 'AppBar'},
9+
{ route: 'avatars', text: 'Avatars'},
910
{ route: 'buttons', text: 'Buttons'},
1011
{ route: 'date-picker', text: 'Date Picker'},
1112
{ route: 'dialog', text: 'Dialog'},

‎docs/src/app/components/pages/components/avatars.jsx‎

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
var React = require('react');
2+
var mui = require('mui');
3+
var Colors = mui.Styles.Colors;
4+
var Avatar = mui.Avatar;
5+
var FontIcon = mui.FontIcon;
6+
var List = mui.List;
7+
var ListItem = mui.ListItem;
8+
var ComponentDoc = require('../../component-doc.jsx');
9+
var FileFolder = require('../../svg-icons/file-folder.jsx');
10+
11+
class IconButtonsPage extends React.Component {
12+
13+
render() {
14+
15+
var code = `
16+
//image avatar
17+
<Avatar src="images/uxceo-128.jpg" />
18+
19+
//SvgIcon avatar
20+
<Avatar icon={<FileFolder />} />
21+
22+
//SvgIcon avatar with custom colors
23+
<Avatar
24+
icon={<FileFolder />}
25+
iconColor={Colors.orange200}
26+
color={Colors.pink400} />
27+
28+
//FontIcon avatar
29+
<Avatar
30+
icon={
31+
<FontIcon className="muidocs-icon-communication-voicemail" />
32+
} />
33+
34+
//FontIcon avatar with custom colors
35+
<Avatar
36+
icon={<FontIcon className="muidocs-icon-communication-voicemail" />}
37+
iconColor={Colors.blue300}
38+
color={Colors.indigo900} />
39+
40+
//Letter avatar
41+
<Avatar>A</Avatar>
42+
43+
//Letter avatar with custom colors
44+
<Avatar
45+
iconColor={Colors.deepOrange300}
46+
color={Colors.purple500}>
47+
A
48+
</Avatar>
49+
`;
50+
51+
var desc = null;
52+
53+
var componentInfo = [
54+
{
55+
name: 'Props',
56+
infoArray: [
57+
{
58+
name: 'icon',
59+
type: 'element',
60+
header: 'optional',
61+
desc: 'This is the SvgIcon or FontIcon to be used inside the avatar.'
62+
},
63+
{
64+
name: 'color',
65+
type: 'string',
66+
header: 'default: grey400',
67+
desc: 'The color of the avatar. Does not apply to image avatars.'
68+
},
69+
{
70+
name: 'iconColor',
71+
type: 'string',
72+
header: 'default: white',
73+
desc: 'The icon or letter color.'
74+
},
75+
{
76+
name: 'src',
77+
type: 'string',
78+
header: 'optional',
79+
desc: 'If passed in, this component will render an img element. Otherwise, a div will be rendered.'
80+
}
81+
]
82+
}
83+
];
84+
85+
var imageAvatar = <Avatar src="images/uxceo-128.jpg" />;
86+
var svgAvatar = <Avatar icon={<FileFolder />} />;
87+
var customSvgAvatar = <Avatar icon={<FileFolder />} iconColor={Colors.orange200} color={Colors.pink400} />;
88+
var fontAvatar = <Avatar icon={<FontIcon className="muidocs-icon-communication-voicemail" />} />;
89+
var customFontAvatar = <Avatar icon={<FontIcon className="muidocs-icon-communication-voicemail" />} iconColor={Colors.blue300} color={Colors.indigo900} />;
90+
var letterAvatar = <Avatar>A</Avatar>;
91+
var customLetterAvatar = <Avatar iconColor={Colors.deepOrange300} color={Colors.purple500}>A</Avatar>;
92+
93+
return (
94+
<ComponentDoc
95+
name="Avatars"
96+
code={code}
97+
desc={desc}
98+
componentInfo={componentInfo}>
99+
100+
<List>
101+
<ListItem leftAvatar={imageAvatar} disableTouchTap={true}>Image Avatar</ListItem>
102+
<ListItem leftAvatar={svgAvatar} disableTouchTap={true}>SvgIcon Avatar</ListItem>
103+
<ListItem leftAvatar={customSvgAvatar} disableTouchTap={true}>SvgIcon Avatar with custom colors</ListItem>
104+
<ListItem leftAvatar={fontAvatar} disableTouchTap={true}>FontIcon Avatar</ListItem>
105+
<ListItem leftAvatar={customFontAvatar} disableTouchTap={true}>FontIcon Avatar with custom colors</ListItem>
106+
<ListItem leftAvatar={letterAvatar} disableTouchTap={true}>Letter Avatar</ListItem>
107+
<ListItem leftAvatar={customLetterAvatar} disableTouchTap={true}>Letter Avatar with custom colors</ListItem>
108+
</List>
109+
110+
</ComponentDoc>
111+
);
112+
113+
}
114+
115+
}
116+
117+
module.exports = IconButtonsPage;

‎docs/src/app/components/pages/components/icon-buttons.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ class IconButtonsPage extends React.Component {
1919
' <ActionGrade/>\n' +
2020
'</IconButton>\n\n' +
2121
'//Method 3: Manually creating a mui.FontIcon component within ' +
22-
'IconButton\n' +
22+
'IconButtona\n' +
2323
'<IconButton tooltip="Sort" disabled={true}>\n' +
2424
' <FontIcon className="muidocs-icon-custom-sort"/>\n' +
2525
'</IconButton>';

‎docs/src/app/components/pages/components/lists.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -274,13 +274,13 @@ class SnackbarPage extends React.Component {
274274
<ListDivider inset={true} />
275275
<List subheader="Files" insetSubheader={true}>
276276
<ListItem
277-
leftAvatar={<Avatar icon={<ActionAssignment />} iconBgColor={Colors.blue500} />}
277+
leftAvatar={<Avatar icon={<ActionAssignment />} color={Colors.blue500} />}
278278
rightIcon={<ActionInfo />}
279279
secondaryText="Jan 20, 2014">
280280
Vacation itinerary
281281
</ListItem>
282282
<ListItem
283-
leftAvatar={<Avatar icon={<EditorInsertChart />} iconBgColor={Colors.yellow600} />}
283+
leftAvatar={<Avatar icon={<EditorInsertChart />} color={Colors.yellow600} />}
284284
rightIcon={<ActionInfo />}
285285
secondaryText="Jan 10, 2014">
286286
Kitchen remodel

‎src/avatar.jsx‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
var React = require('react/addons');
22
var StylePropable = require('./mixins/style-propable');
33
var Colors = require('./styles/colors');
4+
var Typography = require('./styles/typography');
45

56
var SvgIcon = React.createClass({
67

@@ -12,14 +13,14 @@ var SvgIcon = React.createClass({
1213

1314
propTypes: {
1415
icon: React.PropTypes.element,
15-
iconBgColor: React.PropTypes.string,
16+
color: React.PropTypes.string,
1617
iconColor: React.PropTypes.string,
1718
src: React.PropTypes.string
1819
},
1920

2021
getDefaultProps: function() {
2122
return {
22-
iconBgColor: Colors.grey400,
23+
color: Colors.grey400,
2324
iconColor: Colors.white
2425
};
2526
},
@@ -28,7 +29,7 @@ var SvgIcon = React.createClass({
2829

2930
var {
3031
icon,
31-
iconBgColor,
32+
color,
3233
iconColor,
3334
src,
3435
style,
@@ -40,10 +41,17 @@ var SvgIcon = React.createClass({
4041
height: src ? 38 : 40,
4142
width: src ? 38 : 40,
4243
userSelect: 'none',
43-
backgroundColor: iconBgColor,
44+
backgroundColor: color,
4445
borderRadius: '50%',
4546
border: src ? 'solid 1px' : 'none',
4647
borderColor: this.context.muiTheme.palette.borderColor,
48+
49+
//Needed for letter avatars
50+
textAlign: 'center',
51+
lineHeight: '40px',
52+
fontSize: 24,
53+
fontWeight: Typography.fontWeightLight,
54+
color: iconColor
4755
},
4856

4957
iconStyles: {
@@ -66,6 +74,7 @@ var SvgIcon = React.createClass({
6674
) : (
6775
<div {...other} style={mergedRootStyles}>
6876
{iconElement}
77+
{this.props.children}
6978
</div>
7079
);
7180
}

0 commit comments

Comments
 (0)