Commit aa76cbb2 authored by Morgan Bazalgette's avatar Morgan Bazalgette

make avatars circled

parent ea89621d
......@@ -3,7 +3,6 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
import PropTypes from 'prop-types';
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import IconButton from '../../../components/icon_button';
import Motion from '../../ui/util/optional_motion';
import spring from 'react-motion/lib/spring';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { autoPlayGif, me } from '../../../initial_state';
......@@ -41,24 +40,20 @@ class Avatar extends ImmutablePureComponent {
const { isHovered } = this.state;
return (
<Motion defaultStyle={{ radius: 90 }} style={{ radius: spring(isHovered ? 30 : 90, { stiffness: 180, damping: 12 }) }}>
{({ radius }) => (
<a
href={account.get('url')}
className='account__header__avatar'
role='presentation'
target='_blank'
rel='noopener'
style={{ borderRadius: `${radius}px`, backgroundImage: `url(${autoPlayGif || isHovered ? account.get('avatar') : account.get('avatar_static')})` }}
onMouseOver={this.handleMouseOver}
onMouseOut={this.handleMouseOut}
onFocus={this.handleMouseOver}
onBlur={this.handleMouseOut}
>
<span style={{ display: 'none' }}>{account.get('acct')}</span>
</a>
)}
</Motion>
<a
href={account.get('url')}
className='account__header__avatar'
role='presentation'
target='_blank'
rel='noopener'
style={{ backgroundImage: `url(${autoPlayGif || isHovered ? account.get('avatar') : account.get('avatar_static')})` }}
onMouseOver={this.handleMouseOver}
onMouseOut={this.handleMouseOut}
onFocus={this.handleMouseOver}
onBlur={this.handleMouseOut}
>
<span style={{ display: 'none' }}>{account.get('acct')}</span>
</a>
);
}
......
@mixin avatar-radius() {
border-radius: 4px;
border-radius: 50%;
background: transparent no-repeat;
background-position: 50%;
background-clip: padding-box;
-moz-transition: all 300ms;
-o-transition: all 300ms;
-webkit-transition: all 300ms;
transition: all 300ms;
&:hover {
border-radius: 10%;
}
}
@mixin avatar-size($size:48px) {
......
......@@ -1271,6 +1271,14 @@
margin: 0 auto 10px;
overflow: hidden;
width: 90px;
border-radius: 50%;
-moz-transition: all 300ms;
-o-transition: all 300ms;
-webkit-transition: all 300ms;
transition: all 300ms;
&:hover {
border-radius: 10%;
}
}
.account-authorize {
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment