From 5998f52e9f2e60a3b51ed7b91af55201a139bf54 Mon Sep 17 00:00:00 2001 From: Mary Kate Date: Mon, 10 Aug 2020 12:08:32 -0500 Subject: [PATCH 1/4] fix relationship not loading on hover card --- .../profile_hover_card_container.js | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/app/soapbox/features/profile_hover_card/profile_hover_card_container.js b/app/soapbox/features/profile_hover_card/profile_hover_card_container.js index 9ab2c7678..8cd4e94e6 100644 --- a/app/soapbox/features/profile_hover_card/profile_hover_card_container.js +++ b/app/soapbox/features/profile_hover_card/profile_hover_card_container.js @@ -10,6 +10,7 @@ import ActionButton from '../ui/components/action_button'; import { isAdmin, isModerator } from 'soapbox/utils/accounts'; import Badge from 'soapbox/components/badge'; import classNames from 'classnames'; +import { fetchRelationships } from 'soapbox/actions/accounts'; const getAccount = makeGetAccount(); @@ -19,11 +20,7 @@ const mapStateToProps = (state, { accountId }) => { }; }; -const mapDispatchToProps = (dispatch) => ({ - -}); - -export default @connect(mapStateToProps, mapDispatchToProps) +export default @connect(mapStateToProps) @injectIntl class ProfileHoverCardContainer extends ImmutablePureComponent { @@ -32,6 +29,7 @@ class ProfileHoverCardContainer extends ImmutablePureComponent { accountId: PropTypes.string, account: ImmutablePropTypes.map, intl: PropTypes.object.isRequired, + dispatch: PropTypes.func.isRequired, } static defaultProps = { @@ -47,6 +45,10 @@ class ProfileHoverCardContainer extends ImmutablePureComponent { return badges; } + componentDidMount() { + this.props.dispatch(fetchRelationships([this.props.accountId])); + } + render() { const { visible, accountId, account } = this.props; if (!accountId) return null; From 6ac0c615fe0f78d2fe582144d5cbb62271014f22 Mon Sep 17 00:00:00 2001 From: Mary Kate Date: Mon, 10 Aug 2020 12:23:59 -0500 Subject: [PATCH 2/4] fixes #278, large awaiting approval button --- .../profile_hover_card/profile_hover_card_container.js | 2 +- app/soapbox/features/ui/components/action_button.js | 10 ++++++++-- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/app/soapbox/features/profile_hover_card/profile_hover_card_container.js b/app/soapbox/features/profile_hover_card/profile_hover_card_container.js index 8cd4e94e6..d4f706212 100644 --- a/app/soapbox/features/profile_hover_card/profile_hover_card_container.js +++ b/app/soapbox/features/profile_hover_card/profile_hover_card_container.js @@ -63,7 +63,7 @@ class ProfileHoverCardContainer extends ImmutablePureComponent { } -
+
{badges.length > 0 &&
diff --git a/app/soapbox/features/ui/components/action_button.js b/app/soapbox/features/ui/components/action_button.js index e1c88d232..b0b114ee6 100644 --- a/app/soapbox/features/ui/components/action_button.js +++ b/app/soapbox/features/ui/components/action_button.js @@ -17,6 +17,7 @@ const messages = defineMessages({ unfollow: { id: 'account.unfollow', defaultMessage: 'Unfollow' }, follow: { id: 'account.follow', defaultMessage: 'Follow' }, requested: { id: 'account.requested', defaultMessage: 'Awaiting approval. Click to cancel follow request' }, + requested_small: { id: 'account.requested_small', defaultMessage: 'Awaiting approval' }, unblock: { id: 'account.unblock', defaultMessage: 'Unblock @{name}' }, edit_profile: { id: 'account.edit_profile', defaultMessage: 'Edit profile' }, }); @@ -55,8 +56,13 @@ class ActionButton extends ImmutablePureComponent { onFollow: PropTypes.func.isRequired, onBlock: PropTypes.func.isRequired, intl: PropTypes.object.isRequired, + small: PropTypes.bool, }; + static defaultProps = { + small: false, + } + componentDidMount() { window.addEventListener('resize', this.handleResize, { passive: true }); } @@ -74,7 +80,7 @@ class ActionButton extends ImmutablePureComponent { } render() { - const { account, intl, me } = this.props; + const { account, intl, me, small } = this.props; let actionBtn = null; if (!account || !me) return actionBtn; @@ -83,7 +89,7 @@ class ActionButton extends ImmutablePureComponent { if (!account.get('relationship')) { // Wait until the relationship is loaded // } else if (account.getIn(['relationship', 'requested'])) { - actionBtn =
- + { profileCardVisible && + + } {status.get('group') && ( diff --git a/app/styles/application.scss b/app/styles/application.scss index c42cff3e4..7c2cd14b8 100644 --- a/app/styles/application.scss +++ b/app/styles/application.scss @@ -27,6 +27,7 @@ @import 'dyslexic'; @import 'demetricator'; @import 'pro'; +@import 'overflow_hacks'; // COMPONENTS @import 'components/buttons'; diff --git a/app/styles/components/account-header.scss b/app/styles/components/account-header.scss index 930a1fd3f..0a112f469 100644 --- a/app/styles/components/account-header.scss +++ b/app/styles/components/account-header.scss @@ -201,7 +201,7 @@ @media screen and (max-width: 895px) { .account-mobile-container { display: block; - background: var(--accent-color--faint); + background: var(--background-color); margin-top: 10px; position: relative; padding: 10px 10px 0; diff --git a/app/styles/overflow_hacks.scss b/app/styles/overflow_hacks.scss new file mode 100644 index 000000000..049d44157 --- /dev/null +++ b/app/styles/overflow_hacks.scss @@ -0,0 +1,16 @@ +// This is a file dedicated to fixing the css we broke by introducing the hover +// card and `overflow:visible` on drawer.scss line 23. If we ever figure out how +// to pop the hover card out while keeping `overflow:hidden`, feel free to delete +// this entire file. + +button.column-header__button.active { + border-radius: 0 10px 0 0; +} + +.column-back-button.column-back-button--slim-button { + border-radius: 0 10px 0 0; +} + +.detailed-status__wrapper .detailed-status__action-bar { + border-radius: 0; +} From 5349045e51f7d1c269582c0083a84e02f31c9947 Mon Sep 17 00:00:00 2001 From: Mary Kate Date: Mon, 10 Aug 2020 15:06:39 -0500 Subject: [PATCH 4/4] Revert "only render emoji selector in the dom when needed" This reverts commit 769a5124451cc03231e2bfa4d4977517a3cd6048. --- app/soapbox/components/status_action_bar.js | 4 +--- app/soapbox/features/status/components/action_bar.js | 4 +--- 2 files changed, 2 insertions(+), 6 deletions(-) diff --git a/app/soapbox/components/status_action_bar.js b/app/soapbox/components/status_action_bar.js index 579617145..1ee84ca00 100644 --- a/app/soapbox/components/status_action_bar.js +++ b/app/soapbox/components/status_action_bar.js @@ -367,9 +367,7 @@ class StatusActionBar extends ImmutablePureComponent { onMouseLeave={this.handleLikeButtonLeave} ref={this.setRef} > - { emojiSelectorVisible && - - } + - { emojiSelectorVisible && - - } +