From 811d895f7bb38fb3b75a52c54bc3365601da1590 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ond=C5=99ej=20Hru=C5=A1ka?= Date: Sun, 6 Aug 2017 20:59:19 +0200 Subject: [PATCH 1/3] Merged upstream PR #4526 --- app/javascript/mastodon/components/account.js | 2 +- app/javascript/mastodon/components/avatar.js | 9 +++-- .../mastodon/components/avatar_overlay.js | 12 +++---- app/javascript/mastodon/components/status.js | 4 +-- .../compose/components/autosuggest_account.js | 2 +- .../compose/components/navigation_bar.js | 2 +- .../compose/components/reply_indicator.js | 2 +- .../components/account_authorize.js | 2 +- .../status/components/detailed_status.js | 2 +- .../features/ui/components/actions_modal.js | 2 +- .../features/ui/components/boost_modal.js | 2 +- spec/javascript/components/avatar.test.js | 30 +++++++++++++--- .../components/avatar_overlay.test.js | 34 +++++++++++++++++++ 13 files changed, 82 insertions(+), 23 deletions(-) create mode 100644 spec/javascript/components/avatar_overlay.test.js diff --git a/app/javascript/mastodon/components/account.js b/app/javascript/mastodon/components/account.js index b6ca0661fb..69cc63d106 100644 --- a/app/javascript/mastodon/components/account.js +++ b/app/javascript/mastodon/components/account.js @@ -70,7 +70,7 @@ export default class Account extends ImmutablePureComponent {
-
+
diff --git a/app/javascript/mastodon/components/avatar.js b/app/javascript/mastodon/components/avatar.js index 4f81706576..f7c484ee3a 100644 --- a/app/javascript/mastodon/components/avatar.js +++ b/app/javascript/mastodon/components/avatar.js @@ -1,11 +1,11 @@ import React from 'react'; import PropTypes from 'prop-types'; +import ImmutablePropTypes from 'react-immutable-proptypes'; export default class Avatar extends React.PureComponent { static propTypes = { - src: PropTypes.string.isRequired, - staticSrc: PropTypes.string, + account: ImmutablePropTypes.map.isRequired, size: PropTypes.number.isRequired, style: PropTypes.object, animate: PropTypes.bool, @@ -33,9 +33,12 @@ export default class Avatar extends React.PureComponent { } render () { - const { src, size, staticSrc, animate, inline } = this.props; + const { account, size, animate, inline } = this.props; const { hovering } = this.state; + const src = account.get('avatar'); + const staticSrc = account.get('avatar_static'); + let className = 'account__avatar'; if (inline) { diff --git a/app/javascript/mastodon/components/avatar_overlay.js b/app/javascript/mastodon/components/avatar_overlay.js index de43e0ef51..f5d67b34e8 100644 --- a/app/javascript/mastodon/components/avatar_overlay.js +++ b/app/javascript/mastodon/components/avatar_overlay.js @@ -1,22 +1,22 @@ import React from 'react'; -import PropTypes from 'prop-types'; +import ImmutablePropTypes from 'react-immutable-proptypes'; export default class AvatarOverlay extends React.PureComponent { static propTypes = { - staticSrc: PropTypes.string.isRequired, - overlaySrc: PropTypes.string.isRequired, + account: ImmutablePropTypes.map.isRequired, + friend: ImmutablePropTypes.map.isRequired, }; render() { - const { staticSrc, overlaySrc } = this.props; + const { account, friend } = this.props; const baseStyle = { - backgroundImage: `url(${staticSrc})`, + backgroundImage: `url(${account.get('avatar_static')})`, }; const overlayStyle = { - backgroundImage: `url(${overlaySrc})`, + backgroundImage: `url(${friend.get('avatar_static')})`, }; return ( diff --git a/app/javascript/mastodon/components/status.js b/app/javascript/mastodon/components/status.js index ac82e536f7..9bc3523c82 100644 --- a/app/javascript/mastodon/components/status.js +++ b/app/javascript/mastodon/components/status.js @@ -231,9 +231,9 @@ export default class Status extends ImmutablePureComponent { } if (account === undefined || account === null) { - statusAvatar = ; + statusAvatar = ; }else{ - statusAvatar = ; + statusAvatar = ; } return ( diff --git a/app/javascript/mastodon/features/compose/components/autosuggest_account.js b/app/javascript/mastodon/features/compose/components/autosuggest_account.js index ebfa3c247b..e7de3716ba 100644 --- a/app/javascript/mastodon/features/compose/components/autosuggest_account.js +++ b/app/javascript/mastodon/features/compose/components/autosuggest_account.js @@ -15,7 +15,7 @@ export default class AutosuggestAccount extends ImmutablePureComponent { return (
-
+
); diff --git a/app/javascript/mastodon/features/compose/components/navigation_bar.js b/app/javascript/mastodon/features/compose/components/navigation_bar.js index 5000ea2f1f..7f346854ce 100644 --- a/app/javascript/mastodon/features/compose/components/navigation_bar.js +++ b/app/javascript/mastodon/features/compose/components/navigation_bar.js @@ -19,7 +19,7 @@ export default class NavigationBar extends ImmutablePureComponent {
{this.props.account.get('acct')} - +
diff --git a/app/javascript/mastodon/features/compose/components/reply_indicator.js b/app/javascript/mastodon/features/compose/components/reply_indicator.js index da00e46c51..35a9b4b1b4 100644 --- a/app/javascript/mastodon/features/compose/components/reply_indicator.js +++ b/app/javascript/mastodon/features/compose/components/reply_indicator.js @@ -51,7 +51,7 @@ export default class ReplyIndicator extends ImmutablePureComponent {
-
+
diff --git a/app/javascript/mastodon/features/follow_requests/components/account_authorize.js b/app/javascript/mastodon/features/follow_requests/components/account_authorize.js index 566953ddd6..66fa5c235c 100644 --- a/app/javascript/mastodon/features/follow_requests/components/account_authorize.js +++ b/app/javascript/mastodon/features/follow_requests/components/account_authorize.js @@ -32,7 +32,7 @@ export default class AccountAuthorize extends ImmutablePureComponent {
-
+
diff --git a/app/javascript/mastodon/features/status/components/detailed_status.js b/app/javascript/mastodon/features/status/components/detailed_status.js index 5d28d4390b..a098322ba0 100644 --- a/app/javascript/mastodon/features/status/components/detailed_status.js +++ b/app/javascript/mastodon/features/status/components/detailed_status.js @@ -81,7 +81,7 @@ export default class DetailedStatus extends ImmutablePureComponent { return (
-
+
diff --git a/app/javascript/mastodon/features/ui/components/actions_modal.js b/app/javascript/mastodon/features/ui/components/actions_modal.js index cc0620d1c4..3d40033be1 100644 --- a/app/javascript/mastodon/features/ui/components/actions_modal.js +++ b/app/javascript/mastodon/features/ui/components/actions_modal.js @@ -46,7 +46,7 @@ export default class ActionsModal extends ImmutablePureComponent {
- +
diff --git a/app/javascript/mastodon/features/ui/components/boost_modal.js b/app/javascript/mastodon/features/ui/components/boost_modal.js index a1b0cf4bd9..dfd1284e93 100644 --- a/app/javascript/mastodon/features/ui/components/boost_modal.js +++ b/app/javascript/mastodon/features/ui/components/boost_modal.js @@ -62,7 +62,7 @@ export default class BoostModal extends ImmutablePureComponent {
- +
diff --git a/spec/javascript/components/avatar.test.js b/spec/javascript/components/avatar.test.js index 03b71dc9d9..ee40812caf 100644 --- a/spec/javascript/components/avatar.test.js +++ b/spec/javascript/components/avatar.test.js @@ -1,20 +1,42 @@ import { expect } from 'chai'; import { render } from 'enzyme'; +import { fromJS } from 'immutable'; import React from 'react'; import Avatar from '../../../app/javascript/mastodon/components/avatar'; describe('', () => { - const src = '/path/to/image.jpg'; + const account = fromJS({ + username: 'alice', + acct: 'alice', + display_name: 'Alice', + avatar: '/animated/alice.gif', + avatar_static: '/static/alice.jpg', + }); const size = 100; - const wrapper = render(); + const animated = render(); + const still = render(); + // Autoplay it('renders a div element with the given src as background', () => { - expect(wrapper.find('div')).to.have.style('background-image', `url(${src})`); + expect(animated.find('div')).to.have.style('background-image', `url(${account.get('avatar')})`); }); it('renders a div element of the given size', () => { ['width', 'height'].map((attr) => { - expect(wrapper.find('div')).to.have.style(attr, `${size}px`); + expect(animated.find('div')).to.have.style(attr, `${size}px`); }); }); + + // Still + it('renders a div element with the given static src as background if not autoplay', () => { + expect(still.find('div')).to.have.style('background-image', `url(${account.get('avatar_static')})`); + }); + + it('renders a div element of the given size if not autoplay', () => { + ['width', 'height'].map((attr) => { + expect(still.find('div')).to.have.style(attr, `${size}px`); + }); + }); + + // TODO add autoplay test if possible }); diff --git a/spec/javascript/components/avatar_overlay.test.js b/spec/javascript/components/avatar_overlay.test.js new file mode 100644 index 0000000000..a8f0e13d52 --- /dev/null +++ b/spec/javascript/components/avatar_overlay.test.js @@ -0,0 +1,34 @@ +import { expect } from 'chai'; +import { render } from 'enzyme'; +import { fromJS } from 'immutable'; +import React from 'react'; +import AvatarOverlay from '../../../app/javascript/mastodon/components/avatar_overlay'; + +describe('', () => { + const account = fromJS({ + username: 'alice', + acct: 'alice', + display_name: 'Alice', + avatar: '/animated/alice.gif', + avatar_static: '/static/alice.jpg', + }); + const friend = fromJS({ + username: 'eve', + acct: 'eve@blackhat.lair', + display_name: 'Evelyn', + avatar: '/animated/eve.gif', + avatar_static: '/static/eve.jpg', + }); + + const overlay = render(); + + it('renders account static src as base of overlay avatar', () => { + expect(overlay.find('.account__avatar-overlay-base')) + .to.have.style('background-image', `url(${account.get('avatar_static')})`); + }); + + it('renders friend static src as overlay of overlay avatar', () => { + expect(overlay.find('.account__avatar-overlay-overlay')) + .to.have.style('background-image', `url(${friend.get('avatar_static')})`); + }); +}); From 7de0fa698dcdb6bd237b260fd42b1ce9bfc7191e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ond=C5=99ej=20Hru=C5=A1ka?= Date: Sun, 6 Aug 2017 20:59:53 +0200 Subject: [PATCH 2/3] Updated glitch files to use the new Avatar class correctly --- app/javascript/glitch/components/account/header.js | 6 +----- app/javascript/glitch/components/status/header.js | 11 ++--------- 2 files changed, 3 insertions(+), 14 deletions(-) diff --git a/app/javascript/glitch/components/account/header.js b/app/javascript/glitch/components/account/header.js index b79140c02d..a1197c4be8 100644 --- a/app/javascript/glitch/components/account/header.js +++ b/app/javascript/glitch/components/account/header.js @@ -194,11 +194,7 @@ Here, we render our component using all the things we've defined above.
- + ` if we don't. >
{ friend ? ( - + ) : ( - + ) }
From 91836d577e1f02ffbeb417246ef13e211455a123 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ond=C5=99ej=20Hru=C5=A1ka?= Date: Sun, 6 Aug 2017 21:07:26 +0200 Subject: [PATCH 3/3] Add data-avatar-of="@..." to all user avatars --- app/javascript/mastodon/components/avatar.js | 1 + app/javascript/mastodon/components/avatar_overlay.js | 4 ++-- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/app/javascript/mastodon/components/avatar.js b/app/javascript/mastodon/components/avatar.js index f7c484ee3a..dd155f0590 100644 --- a/app/javascript/mastodon/components/avatar.js +++ b/app/javascript/mastodon/components/avatar.js @@ -64,6 +64,7 @@ export default class Avatar extends React.PureComponent { onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave} style={style} + data-avatar-of={`@${account.get('acct')}`} /> ); } diff --git a/app/javascript/mastodon/components/avatar_overlay.js b/app/javascript/mastodon/components/avatar_overlay.js index f5d67b34e8..2ecf9fa448 100644 --- a/app/javascript/mastodon/components/avatar_overlay.js +++ b/app/javascript/mastodon/components/avatar_overlay.js @@ -21,8 +21,8 @@ export default class AvatarOverlay extends React.PureComponent { return (
-
-
+
+
); }