make number of displayed reactions a setting

This adds an extra item to the local settings for
specifying the number of reactions shown in toots.
The detailed status view always shows all
reactions.
develop
anna 1 year ago
parent 7c11bd1df2
commit b0ae82beb2
Signed by: fef
GPG Key ID: EC22E476DC2D3D84

@ -270,7 +270,7 @@ MAX_POLL_OPTIONS=5
MAX_POLL_OPTION_CHARS=100
# Maximum number of emoji reactions per toot and user (minimum 1)
MAX_REACTIONS=8
MAX_REACTIONS=1
# Maximum image and video/audio upload sizes
# Units are in bytes

@ -808,6 +808,7 @@ class Status extends ImmutablePureComponent {
<StatusReactions
statusId={status.get('id')}
reactions={status.get('reactions')}
numVisible={settings.get('num_visible_reactions')}
addReaction={this.props.onReactionAdd}
removeReaction={this.props.onReactionRemove}
emojiMap={this.props.emojiMap}

@ -1,7 +1,7 @@
import ImmutablePureComponent from 'react-immutable-pure-component';
import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes';
import { maxReactions, reduceMotion } from '../initial_state';
import { reduceMotion } from '../initial_state';
import spring from 'react-motion/lib/spring';
import TransitionMotion from 'react-motion/lib/TransitionMotion';
import classNames from 'classnames';
@ -16,16 +16,12 @@ export default class StatusReactions extends ImmutablePureComponent {
static propTypes = {
statusId: PropTypes.string.isRequired,
reactions: ImmutablePropTypes.list.isRequired,
numVisible: PropTypes.number,
addReaction: PropTypes.func.isRequired,
removeReaction: PropTypes.func.isRequired,
emojiMap: ImmutablePropTypes.map.isRequired,
};
handleEmojiPick = data => {
const { addReaction, statusId } = this.props;
addReaction(statusId, data.native.replace(/:/g, ''));
}
willEnter() {
return { scale: reduceMotion ? 1 : 0 };
}
@ -35,11 +31,18 @@ export default class StatusReactions extends ImmutablePureComponent {
}
render() {
const { reactions } = this.props;
const visibleReactions = reactions
const { reactions, numVisible } = this.props;
let visibleReactions = reactions
.filter(x => x.get('count') > 0)
.sort((a, b) => b.get('count') - a.get('count'))
.filter((_, i) => i < maxReactions);
.sort((a, b) => b.get('count') - a.get('count'));
// numVisible might be NaN because it's pulled from local settings
// which doesn't do a whole lot of input validation, but that's okay
// because NaN >= 0 evaluates false.
// Still, this should be improved at some point.
if (numVisible >= 0) {
visibleReactions = visibleReactions.filter((_, i) => i < numVisible);
}
const styles = visibleReactions.map(reaction => ({
key: reaction.get('name'),

@ -29,6 +29,8 @@ const messages = defineMessages({
rewrite_mentions_username: { id: 'settings.rewrite_mentions_username', defaultMessage: 'Rewrite with username' },
pop_in_left: { id: 'settings.pop_in_left', defaultMessage: 'Left' },
pop_in_right: { id: 'settings.pop_in_right', defaultMessage: 'Right' },
visible_reactions_count: { id: 'settings.visible_reactions_count', defaultMessage: 'Number of visible reactions' },
enter_amount_prompt: { id: 'settings.enter_amount_prompt', defaultMessage: 'Enter an amount' },
});
export default @injectIntl
@ -92,6 +94,16 @@ class LocalSettingsPage extends React.PureComponent {
>
<FormattedMessage id='settings.rewrite_mentions' defaultMessage='Rewrite mentions in displayed statuses' />
</LocalSettingsPageItem>
<LocalSettingsPageItem
settings={settings}
item={['num_visible_reactions']}
id='mastodon-settings--num_visible_reactions'
onChange={onChange}
placeholder={intl.formatMessage(messages.enter_amount_prompt)}
number
>
<FormattedMessage id='settings.num_visible_reactions' defaultMessage='Number of visible reaction badges:' />
</LocalSettingsPageItem>
<section>
<h2><FormattedMessage id='settings.notifications_opts' defaultMessage='Notifications options' /></h2>
<LocalSettingsPageItem

@ -21,20 +21,21 @@ export default class LocalSettingsPageItem extends React.PureComponent {
})),
settings: ImmutablePropTypes.map.isRequired,
placeholder: PropTypes.string,
number: PropTypes.bool,
disabled: PropTypes.bool,
};
handleChange = e => {
const { target } = e;
const { item, onChange, options, placeholder } = this.props;
const { item, onChange, options, placeholder, number } = this.props;
if (options && options.length > 0) onChange(item, target.value);
else if (placeholder) onChange(item, target.value);
else if (placeholder) onChange(item, number ? parseInt(target.value) : target.value);
else onChange(item, target.checked);
}
render () {
const { handleChange } = this;
const { settings, item, id, options, children, dependsOn, dependsOnNot, placeholder, disabled } = this.props;
const { settings, item, id, options, children, dependsOn, dependsOnNot, placeholder, number, disabled } = this.props;
let enabled = !disabled;
if (dependsOn) {
@ -76,7 +77,7 @@ export default class LocalSettingsPageItem extends React.PureComponent {
</fieldset>
</div>
);
} else if (placeholder) {
} else if (placeholder || number) {
return (
<div className='glitch local-settings__page__item string'>
<label htmlFor={id}>
@ -84,7 +85,7 @@ export default class LocalSettingsPageItem extends React.PureComponent {
<p>
<input
id={id}
type='text'
type={number ? 'number' : 'text'}
value={settings.getIn(item)}
placeholder={placeholder}
onChange={handleChange}

@ -6,6 +6,9 @@ const messages = {
'tooltips.reactions': 'Reaktionen',
'settings.enter_amount_prompt': 'Gib eine Zahl ein',
'settings.num_visible_reactions': 'Anzahl sichtbarer Reaktionen',
'status.react': 'Reagieren',
};

@ -22,6 +22,7 @@ const messages = {
'settings.close': 'Close',
'settings.collapsed_statuses': 'Collapsed toots',
'settings.enable_collapsed': 'Enable collapsed toots',
'settings.enter_amount_prompt': 'Enter an amount',
'settings.general': 'General',
'settings.image_backgrounds': 'Image backgrounds',
'settings.image_backgrounds_media': 'Preview collapsed toot media',
@ -29,6 +30,7 @@ const messages = {
'settings.media': 'Media',
'settings.media_letterbox': 'Letterbox media',
'settings.media_fullwidth': 'Full-width media previews',
'settings.num_visible_reactions': 'Number of visible reactions',
'settings.preferences': 'User preferences',
'settings.wide_view': 'Wide view (Desktop mode only)',
'settings.navbar_under': 'Navbar at the bottom (Mobile only)',

@ -6,6 +6,9 @@ const messages = {
'tooltips.reactions': 'Réactions',
'settings.enter_amount_prompt': 'Entrez un montant',
'settings.num_visible_reactions': 'Nombre de réactions visibles',
'status.react': 'Réagir',
};

@ -23,6 +23,7 @@ const initialState = ImmutableMap({
show_content_type_choice: false,
tag_misleading_links: true,
rewrite_mentions: 'no',
num_visible_reactions: 6,
content_warnings : ImmutableMap({
filter : null,
media_outside: false,

Loading…
Cancel
Save