moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

AccountHeader: refactor Follow button, remove Message button in favor of a menu item 

This is better on mobile and simpler to newcomers
This commit is contained in:
Alex Gleason 2021-10-02 15:39:12 -05:00
parent 5f7a201f08
commit d3908f107a
No known key found for this signature in database
GPG Key ID: 7211D1F99744FBB7
3 changed files with 24 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
app/soapbox/features/account/components/header.js
View File

@ -5,8 +5,6 @@ import { connect } from 'react-redux';
import ImmutablePropTypes from 'react-immutable-proptypes';
import PropTypes from 'prop-types';
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import Icon from 'soapbox/components/icon';
import Button from 'soapbox/components/button';
import ImmutablePureComponent from 'react-immutable-pure-component';
import {
isStaff,
@ -35,6 +33,7 @@ const messages = defineMessages({
linkVerifiedOn: { id: 'account.link_verified_on', defaultMessage: 'Ownership of this link was checked on {date}' },
account_locked: { id: 'account.locked_info', defaultMessage: 'This account privacy status is set to locked. The owner manually reviews who can follow them.' },
mention: { id: 'account.mention', defaultMessage: 'Mention' },
chat: { id: 'account.chat', defaultMessage: 'Chat with @{name}' },
direct: { id: 'account.direct', defaultMessage: 'Direct message @{name}' },
unmute: { id: 'account.unmute', defaultMessage: 'Unmute @{name}' },
block: { id: 'account.block', defaultMessage: 'Block @{name}' },
@ -181,6 +180,11 @@ class Header extends ImmutablePureComponent {
menu.push({ text: intl.formatMessage(messages.domain_blocks), to: '/domain_blocks' });
} else {
menu.push({ text: intl.formatMessage(messages.mention, { name: account.get('username') }), action: this.props.onMention });
if (account.getIn(['pleroma', 'accepts_chat_messages'], false) === true) {
menu.push({ text: intl.formatMessage(messages.chat, { name: account.get('username') }), action: this.props.onChat });
}
if (account.getIn(['relationship', 'following'])) {
if (account.getIn(['relationship', 'showing_reblogs'])) {
menu.push({ text: intl.formatMessage(messages.hideReblogs, { name: account.get('username') }), action: this.props.onReblogToggle });
@ -355,12 +359,6 @@ class Header extends ImmutablePureComponent {
<div className='account__header__extra__buttons'>
<ActionButton account={account} />
{me && account.get('id') !== me && account.getIn(['pleroma', 'accepts_chat_messages'], false) === true &&
<Button className='button-alternative-2' onClick={this.props.onChat}>
<Icon id='comment' />
<FormattedMessage id='account.message' defaultMessage='Message' />
</Button>
}
{me && <DropdownMenuContainer items={menu} icon='ellipsis-v' size={24} direction='right' />}
</div>

9
app/soapbox/features/ui/components/action_button.js
View File

@ -3,6 +3,7 @@ import { connect } from 'react-redux';
import ImmutablePropTypes from 'react-immutable-proptypes';
import PropTypes from 'prop-types';
import { defineMessages, injectIntl } from 'react-intl';
import Icon from 'soapbox/components/icon';
import Button from 'soapbox/components/button';
import ImmutablePureComponent from 'react-immutable-pure-component';
import classNames from 'classnames';
@ -103,12 +104,14 @@ class ActionButton extends ImmutablePureComponent {
// Follow & Unfollow
return (<Button
disabled={account.getIn(['relationship', 'blocked_by'])}
className={classNames('logo-button', {
className={classNames('follow-button', {
'button--destructive': account.getIn(['relationship', 'following']),
})}
text={intl.formatMessage(account.getIn(['relationship', 'following']) ? messages.unfollow : messages.follow)}
onClick={this.handleFollow}
/>);
>
{intl.formatMessage(account.getIn(['relationship', 'following']) ? messages.unfollow : messages.follow)}
<Icon src={account.getIn(['relationship', 'following']) ? require('@tabler/icons/icons/minus.svg') : require('@tabler/icons/icons/plus.svg')} />
</Button>);
} else if (account.getIn(['relationship', 'blocking'])) {
// Unblock
return <Button className='logo-button' text={intl.formatMessage(messages.unblock, { name: account.get('username') })} onClick={this.handleBlock} />;

12
app/styles/components/buttons.scss
View File

@ -142,3 +142,15 @@ a.button {
margin-right: 0.6em;
}
}
.follow-button {
display: flex;
align-items: center;
justify-content: center;
.svg-icon {
margin-left: 6px;
width: 20px;
height: 20px;
}
}