From dba4be1038063845a74e83aaa85d6ab08d5625dd Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Mon, 7 Mar 2022 11:38:52 +0100 Subject: [PATCH] Change appearance of account cards in web UI (#17689) * Change appearance of account cards in web UI * Various fixes and improvements * Various fixes and improvements --- .../directory/components/account_card.js | 204 +++++++----------- .../mastodon/features/directory/index.js | 10 +- .../mastodon/features/explore/suggestions.js | 8 +- .../styles/mastodon-light/diff.scss | 13 +- app/javascript/styles/mastodon/admin.scss | 50 +++-- .../styles/mastodon/components.scss | 153 ++----------- .../styles/mastodon/containers.scss | 24 +-- app/javascript/styles/mastodon/rtl.scss | 5 - app/views/directories/index.html.haml | 57 +++-- config/locales/en.yml | 1 - 10 files changed, 178 insertions(+), 347 deletions(-) diff --git a/app/javascript/mastodon/features/directory/components/account_card.js b/app/javascript/mastodon/features/directory/components/account_card.js index 03e13f28e4..31f59cd848 100644 --- a/app/javascript/mastodon/features/directory/components/account_card.js +++ b/app/javascript/mastodon/features/directory/components/account_card.js @@ -7,31 +7,28 @@ import { makeGetAccount } from 'mastodon/selectors'; import Avatar from 'mastodon/components/avatar'; import DisplayName from 'mastodon/components/display_name'; import Permalink from 'mastodon/components/permalink'; -import RelativeTimestamp from 'mastodon/components/relative_timestamp'; -import IconButton from 'mastodon/components/icon_button'; +import Button from 'mastodon/components/button'; import { FormattedMessage, injectIntl, defineMessages } from 'react-intl'; import { autoPlayGif, me, unfollowModal } from 'mastodon/initial_state'; import ShortNumber from 'mastodon/components/short_number'; import { followAccount, unfollowAccount, - blockAccount, unblockAccount, unmuteAccount, } from 'mastodon/actions/accounts'; import { openModal } from 'mastodon/actions/modal'; -import { initMuteModal } from 'mastodon/actions/mutes'; +import classNames from 'classnames'; const messages = defineMessages({ - follow: { id: 'account.follow', defaultMessage: 'Follow' }, unfollow: { id: 'account.unfollow', defaultMessage: 'Unfollow' }, - requested: { id: 'account.requested', defaultMessage: 'Awaiting approval' }, - unblock: { id: 'account.unblock', defaultMessage: 'Unblock @{name}' }, - unmute: { id: 'account.unmute', defaultMessage: 'Unmute @{name}' }, - unfollowConfirm: { - id: 'confirmations.unfollow.confirm', - defaultMessage: 'Unfollow', - }, + follow: { id: 'account.follow', defaultMessage: 'Follow' }, + cancel_follow_request: { id: 'account.cancel_follow_request', defaultMessage: 'Cancel follow request' }, + requested: { id: 'account.requested', defaultMessage: 'Awaiting approval. Click to cancel follow request' }, + unblock: { id: 'account.unblock_short', defaultMessage: 'Unblock' }, + unmute: { id: 'account.unmute_short', defaultMessage: 'Unmute' }, + unfollowConfirm: { id: 'confirmations.unfollow.confirm', defaultMessage: 'Unfollow' }, + edit_profile: { id: 'account.edit_profile', defaultMessage: 'Edit profile' }, }); const makeMapStateToProps = () => { @@ -75,18 +72,15 @@ const mapDispatchToProps = (dispatch, { intl }) => ({ onBlock(account) { if (account.getIn(['relationship', 'blocking'])) { dispatch(unblockAccount(account.get('id'))); - } else { - dispatch(blockAccount(account.get('id'))); } }, onMute(account) { if (account.getIn(['relationship', 'muting'])) { dispatch(unmuteAccount(account.get('id'))); - } else { - dispatch(initMuteModal(account)); } }, + }); export default @@ -138,130 +132,92 @@ class AccountCard extends ImmutablePureComponent { handleMute = () => { this.props.onMute(this.props.account); - }; + } + + handleEditProfile = () => { + window.open('/settings/profile', '_blank'); + } render() { const { account, intl } = this.props; - let buttons; + let actionBtn; - if ( - account.get('id') !== me && - account.get('relationship', null) !== null - ) { - const following = account.getIn(['relationship', 'following']); - const requested = account.getIn(['relationship', 'requested']); - const blocking = account.getIn(['relationship', 'blocking']); - const muting = account.getIn(['relationship', 'muting']); - - if (requested) { - buttons = ( - - ); - } else if (blocking) { - buttons = ( - - ); - } else if (muting) { - buttons = ( - - ); - } else if (!account.get('moved') || following) { - buttons = ( - - ); + if (me !== account.get('id')) { + if (!account.get('relationship')) { // Wait until the relationship is loaded + actionBtn = ''; + } else if (account.getIn(['relationship', 'requested'])) { + actionBtn =