From f1421b6d7dbbe47286cda3b7339562c34a407036 Mon Sep 17 00:00:00 2001 From: fef Date: Wed, 30 Nov 2022 13:20:20 +0000 Subject: [PATCH] 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. --- .env.production.sample | 2 +- .../flavours/glitch/components/status.jsx | 1 + .../glitch/components/status_reactions.js | 23 +- .../features/local_settings/page/index.jsx | 12 ++ .../local_settings/page/item/index.jsx | 11 +- app/javascript/flavours/glitch/locales/de.js | 15 ++ .../flavours/glitch/locales/de.json | 3 + app/javascript/flavours/glitch/locales/en.js | 199 ++++++++++++++++++ .../flavours/glitch/locales/en.json | 3 + app/javascript/flavours/glitch/locales/fr.js | 15 ++ .../flavours/glitch/locales/fr.json | 3 + .../glitch/reducers/local_settings.js | 1 + 12 files changed, 272 insertions(+), 16 deletions(-) create mode 100644 app/javascript/flavours/glitch/locales/de.js create mode 100644 app/javascript/flavours/glitch/locales/en.js create mode 100644 app/javascript/flavours/glitch/locales/fr.js diff --git a/.env.production.sample b/.env.production.sample index 326c2cc40..b604c4b04 100644 --- a/.env.production.sample +++ b/.env.production.sample @@ -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 diff --git a/app/javascript/flavours/glitch/components/status.jsx b/app/javascript/flavours/glitch/components/status.jsx index 580327321..48b21c393 100644 --- a/app/javascript/flavours/glitch/components/status.jsx +++ b/app/javascript/flavours/glitch/components/status.jsx @@ -823,6 +823,7 @@ class Status extends ImmutablePureComponent { { - 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'), diff --git a/app/javascript/flavours/glitch/features/local_settings/page/index.jsx b/app/javascript/flavours/glitch/features/local_settings/page/index.jsx index 91582a318..72e223a96 100644 --- a/app/javascript/flavours/glitch/features/local_settings/page/index.jsx +++ b/app/javascript/flavours/glitch/features/local_settings/page/index.jsx @@ -33,6 +33,8 @@ const messages = defineMessages({ unlisted: { id: 'privacy.unlisted.short', defaultMessage: 'Unlisted' }, private: { id: 'privacy.private.short', defaultMessage: 'Followers-only' }, direct: { id: 'privacy.direct.short', defaultMessage: 'Mentioned people only' }, + 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' }, }); class LocalSettingsPage extends React.PureComponent { @@ -95,6 +97,16 @@ class LocalSettingsPage extends React.PureComponent { > + + +

{ 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, inputProps, options, children, dependsOn, dependsOnNot, placeholder, disabled } = this.props; + const { settings, item, id, inputProps, options, children, dependsOn, dependsOnNot, placeholder, number, disabled } = this.props; let enabled = !disabled; if (dependsOn) { @@ -79,7 +80,7 @@ export default class LocalSettingsPageItem extends React.PureComponent { ); - } else if (placeholder) { + } else if (placeholder || number) { return (