forked from glitch-soc/mastodon
-
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Further de-emphasize filtered notifications banner and add setting to…
… minimize it (mastodon#31250)
- Loading branch information
1 parent
2ec1181
commit ad95c98
Showing
12 changed files
with
321 additions
and
119 deletions.
There are no files selected for viewing
31 changes: 0 additions & 31 deletions
31
app/javascript/mastodon/features/notifications/components/checkbox_with_label.jsx
This file was deleted.
Oops, something went wrong.
40 changes: 40 additions & 0 deletions
40
app/javascript/mastodon/features/notifications/components/checkbox_with_label.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| import type { PropsWithChildren } from 'react'; | ||
| import { useCallback } from 'react'; | ||
|
|
||
| import Toggle from 'react-toggle'; | ||
|
|
||
| interface Props { | ||
| checked: boolean; | ||
| disabled?: boolean; | ||
| onChange: (checked: boolean) => void; | ||
| } | ||
|
|
||
| export const CheckboxWithLabel: React.FC<PropsWithChildren<Props>> = ({ | ||
| checked, | ||
| disabled, | ||
| children, | ||
| onChange, | ||
| }) => { | ||
| const handleChange = useCallback( | ||
| ({ target }: React.ChangeEvent<HTMLInputElement>) => { | ||
| onChange(target.checked); | ||
| }, | ||
| [onChange], | ||
| ); | ||
|
|
||
| return ( | ||
| <label className='app-form__toggle'> | ||
| <div className='app-form__toggle__label'>{children}</div> | ||
|
|
||
| <div className='app-form__toggle__toggle'> | ||
| <div> | ||
| <Toggle | ||
| checked={checked} | ||
| onChange={handleChange} | ||
| disabled={disabled} | ||
| /> | ||
| </div> | ||
| </div> | ||
| </label> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
141 changes: 141 additions & 0 deletions
141
app/javascript/mastodon/features/notifications/components/policy_controls.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,141 @@ | ||
| import { useCallback } from 'react'; | ||
|
|
||
| import { FormattedMessage } from 'react-intl'; | ||
|
|
||
| import { updateNotificationsPolicy } from 'mastodon/actions/notification_policies'; | ||
| import { useAppSelector, useAppDispatch } from 'mastodon/store'; | ||
|
|
||
| import { CheckboxWithLabel } from './checkbox_with_label'; | ||
|
|
||
| export const PolicyControls: React.FC = () => { | ||
| const dispatch = useAppDispatch(); | ||
|
|
||
| const notificationPolicy = useAppSelector( | ||
| (state) => state.notificationPolicy, | ||
| ); | ||
|
|
||
| const handleFilterNotFollowing = useCallback( | ||
| (checked: boolean) => { | ||
| void dispatch( | ||
| updateNotificationsPolicy({ filter_not_following: checked }), | ||
| ); | ||
| }, | ||
| [dispatch], | ||
| ); | ||
|
|
||
| const handleFilterNotFollowers = useCallback( | ||
| (checked: boolean) => { | ||
| void dispatch( | ||
| updateNotificationsPolicy({ filter_not_followers: checked }), | ||
| ); | ||
| }, | ||
| [dispatch], | ||
| ); | ||
|
|
||
| const handleFilterNewAccounts = useCallback( | ||
| (checked: boolean) => { | ||
| void dispatch( | ||
| updateNotificationsPolicy({ filter_new_accounts: checked }), | ||
| ); | ||
| }, | ||
| [dispatch], | ||
| ); | ||
|
|
||
| const handleFilterPrivateMentions = useCallback( | ||
| (checked: boolean) => { | ||
| void dispatch( | ||
| updateNotificationsPolicy({ filter_private_mentions: checked }), | ||
| ); | ||
| }, | ||
| [dispatch], | ||
| ); | ||
|
|
||
| if (!notificationPolicy) return null; | ||
|
|
||
| return ( | ||
| <section> | ||
| <h3> | ||
| <FormattedMessage | ||
| id='notifications.policy.title' | ||
| defaultMessage='Filter out notifications from…' | ||
| /> | ||
| </h3> | ||
|
|
||
| <div className='column-settings__row'> | ||
| <CheckboxWithLabel | ||
| checked={notificationPolicy.filter_not_following} | ||
| onChange={handleFilterNotFollowing} | ||
| > | ||
| <strong> | ||
| <FormattedMessage | ||
| id='notifications.policy.filter_not_following_title' | ||
| defaultMessage="People you don't follow" | ||
| /> | ||
| </strong> | ||
| <span className='hint'> | ||
| <FormattedMessage | ||
| id='notifications.policy.filter_not_following_hint' | ||
| defaultMessage='Until you manually approve them' | ||
| /> | ||
| </span> | ||
| </CheckboxWithLabel> | ||
|
|
||
| <CheckboxWithLabel | ||
| checked={notificationPolicy.filter_not_followers} | ||
| onChange={handleFilterNotFollowers} | ||
| > | ||
| <strong> | ||
| <FormattedMessage | ||
| id='notifications.policy.filter_not_followers_title' | ||
| defaultMessage='People not following you' | ||
| /> | ||
| </strong> | ||
| <span className='hint'> | ||
| <FormattedMessage | ||
| id='notifications.policy.filter_not_followers_hint' | ||
| defaultMessage='Including people who have been following you fewer than {days, plural, one {one day} other {# days}}' | ||
| values={{ days: 3 }} | ||
| /> | ||
| </span> | ||
| </CheckboxWithLabel> | ||
|
|
||
| <CheckboxWithLabel | ||
| checked={notificationPolicy.filter_new_accounts} | ||
| onChange={handleFilterNewAccounts} | ||
| > | ||
| <strong> | ||
| <FormattedMessage | ||
| id='notifications.policy.filter_new_accounts_title' | ||
| defaultMessage='New accounts' | ||
| /> | ||
| </strong> | ||
| <span className='hint'> | ||
| <FormattedMessage | ||
| id='notifications.policy.filter_new_accounts.hint' | ||
| defaultMessage='Created within the past {days, plural, one {one day} other {# days}}' | ||
| values={{ days: 30 }} | ||
| /> | ||
| </span> | ||
| </CheckboxWithLabel> | ||
|
|
||
| <CheckboxWithLabel | ||
| checked={notificationPolicy.filter_private_mentions} | ||
| onChange={handleFilterPrivateMentions} | ||
| > | ||
| <strong> | ||
| <FormattedMessage | ||
| id='notifications.policy.filter_private_mentions_title' | ||
| defaultMessage='Unsolicited private mentions' | ||
| /> | ||
| </strong> | ||
| <span className='hint'> | ||
| <FormattedMessage | ||
| id='notifications.policy.filter_private_mentions_hint' | ||
| defaultMessage="Filtered unless it's in reply to your own mention or if you follow the sender" | ||
| /> | ||
| </span> | ||
| </CheckboxWithLabel> | ||
| </div> | ||
| </section> | ||
| ); | ||
| }; |
Oops, something went wrong.