mastofe

commit: aa76cbb2283b71ff7089e91160d2789edd08d706
parent: ea89621dd45800b2f03caad32ec3afd0d517056a
Author: Morgan Bazalgette <the@howl.moe>
Date:   Sat, 31 Mar 2018 15:41:25 +0200

make avatars circled

Diffstat:
M
app/javascript/mastodon/features/account/components/header.js
33
++++++++++++++-------------------
M
app/javascript/styles/mastodon/_mixins.scss
9
++++++++-
M
app/javascript/styles/mastodon/components.scss
8
++++++++

3 files changed, 30 insertions(+), 20 deletions(-)
diff --git a/app/javascript/mastodon/features/account/components/header.js b/app/javascript/mastodon/features/account/components/header.js
@@ -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>
     );
   }
 
diff --git a/app/javascript/styles/mastodon/_mixins.scss b/app/javascript/styles/mastodon/_mixins.scss
@@ -1,8 +1,15 @@
 @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) {
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
@@ -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 {