fedi/mastodon
1
0
Fork 1
mirror of https://github.com/mastodon/mastodon.git synced 2024-11-21 13:47:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

Change hashtag follow icon button into a text button

Browse source
This commit is contained in:
Claire 2023-08-04 11:41:35 +02:00
parent 93372fee1e
commit 151576bafd
3 changed files with 14 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
app/javascript/mastodon/features/hashtag_timeline/index.jsx
View file

@ -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);

4
app/javascript/mastodon/locales/en.json
View file

@ -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",

6
app/javascript/styles/mastodon/components.scss
View file

@ -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;