mirror of
https://github.com/mastodon/mastodon.git
synced 2024-11-08 08:44:27 +00:00
Change hashtag follow icon button into a text button
This commit is contained in:
parent
93372fee1e
commit
151576bafd
|
@ -1,7 +1,7 @@
|
|||
import PropTypes from 'prop-types';
|
||||
import { PureComponent } from 'react';
|
||||
|
||||
import { injectIntl, FormattedMessage, defineMessages } from 'react-intl';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
|
||||
import classNames from 'classnames';
|
||||
import { Helmet } from 'react-helmet';
|
||||
|
@ -17,17 +17,11 @@ import { fetchHashtag, followHashtag, unfollowHashtag } from 'mastodon/actions/t
|
|||
import { expandHashtagTimeline, clearTimeline } from 'mastodon/actions/timelines';
|
||||
import Column from 'mastodon/components/column';
|
||||
import ColumnHeader from 'mastodon/components/column_header';
|
||||
import { Icon } from 'mastodon/components/icon';
|
||||
|
||||
import StatusListContainer from '../ui/containers/status_list_container';
|
||||
|
||||
import ColumnSettingsContainer from './containers/column_settings_container';
|
||||
|
||||
const messages = defineMessages({
|
||||
followHashtag: { id: 'hashtag.follow', defaultMessage: 'Follow hashtag' },
|
||||
unfollowHashtag: { id: 'hashtag.unfollow', defaultMessage: 'Unfollow hashtag' },
|
||||
});
|
||||
|
||||
const mapStateToProps = (state, props) => ({
|
||||
hasUnread: state.getIn(['timelines', `hashtag:${props.params.id}${props.params.local ? ':local' : ''}`, 'unread']) > 0,
|
||||
tag: state.getIn(['tags', props.params.id]),
|
||||
|
@ -48,7 +42,6 @@ class HashtagTimeline extends PureComponent {
|
|||
hasUnread: PropTypes.bool,
|
||||
tag: ImmutablePropTypes.map,
|
||||
multiColumn: PropTypes.bool,
|
||||
intl: PropTypes.object,
|
||||
};
|
||||
|
||||
handlePin = () => {
|
||||
|
@ -188,7 +181,7 @@ class HashtagTimeline extends PureComponent {
|
|||
};
|
||||
|
||||
render () {
|
||||
const { hasUnread, columnId, multiColumn, tag, intl } = this.props;
|
||||
const { hasUnread, columnId, multiColumn, tag } = this.props;
|
||||
const { id, local } = this.props.params;
|
||||
const pinned = !!columnId;
|
||||
const { signedIn } = this.context.identity;
|
||||
|
@ -198,13 +191,13 @@ class HashtagTimeline extends PureComponent {
|
|||
if (tag) {
|
||||
const following = tag.get('following');
|
||||
|
||||
const classes = classNames('column-header__button', {
|
||||
const classes = classNames('column-header__text-button button', {
|
||||
active: following,
|
||||
});
|
||||
|
||||
followButton = (
|
||||
<button className={classes} onClick={this.handleFollow} disabled={!signedIn} title={intl.formatMessage(following ? messages.unfollowHashtag : messages.followHashtag)} aria-label={intl.formatMessage(following ? messages.unfollowHashtag : messages.followHashtag)}>
|
||||
<Icon id={following ? 'user-times' : 'user-plus'} fixedWidth className='column-header__icon' />
|
||||
<button className={classes} onClick={this.handleFollow} disabled={!signedIn}>
|
||||
{following ? <FormattedMessage id='hashtag.unfollow_button' defaultMessage='Unfollow' /> : <FormattedMessage id='hashtag.follow_button' defaultMessage='Follow' />}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
@ -245,4 +238,4 @@ class HashtagTimeline extends PureComponent {
|
|||
|
||||
}
|
||||
|
||||
export default connect(mapStateToProps)(injectIntl(HashtagTimeline));
|
||||
export default connect(mapStateToProps)(HashtagTimeline);
|
||||
|
|
|
@ -295,8 +295,8 @@
|
|||
"hashtag.column_settings.tag_mode.any": "Any of these",
|
||||
"hashtag.column_settings.tag_mode.none": "None of these",
|
||||
"hashtag.column_settings.tag_toggle": "Include additional tags for this column",
|
||||
"hashtag.follow": "Follow hashtag",
|
||||
"hashtag.unfollow": "Unfollow hashtag",
|
||||
"hashtag.follow_button": "Follow",
|
||||
"hashtag.unfollow_button": "Unfollow",
|
||||
"home.actions.go_to_explore": "See what's trending",
|
||||
"home.actions.go_to_suggestions": "Find people to follow",
|
||||
"home.column_settings.basic": "Basic",
|
||||
|
|
|
@ -3983,6 +3983,12 @@ a.status-card {
|
|||
}
|
||||
}
|
||||
|
||||
.column-header__text-button {
|
||||
align-self: center;
|
||||
margin-inline-start: 8px;
|
||||
margin-inline-end: 8px;
|
||||
}
|
||||
|
||||
.column-header__collapsible {
|
||||
max-height: 70vh;
|
||||
overflow: hidden;
|
||||
|
|
Loading…
Reference in a new issue