mastofe

commit: 133c3b76be90f0d2b9215b05d2395a7a24db70a9
parent: 8d064c253644cba25c3b1eef424db6daa4a13471
Author: Haelwenn (lanodan) Monnier <contact@hacktivis.me>
Date:   Sun,  1 Apr 2018 15:00:05 +0200

[MastodonFE] Revert "make avatars circled"

This reverts commit aa76cbb2283b71ff7089e91160d2789edd08d706.

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, 20 insertions(+), 30 deletions(-)
diff --git a/app/javascript/mastodon/features/account/components/header.js b/app/javascript/mastodon/features/account/components/header.js
@@ -3,6 +3,7 @@ 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';
@@ -40,20 +41,24 @@ class Avatar extends ImmutablePureComponent {
     const { isHovered } = this.state;
 
     return (
-      <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>
+      <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>
     );
   }
 
diff --git a/app/javascript/styles/mastodon/_mixins.scss b/app/javascript/styles/mastodon/_mixins.scss
@@ -1,15 +1,8 @@
 @mixin avatar-radius() {
-  border-radius: 50%;
+  border-radius: 4px;
   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,14 +1271,6 @@
   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 {