forked from mastodon/mastodon
-
Notifications
You must be signed in to change notification settings - Fork 185
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[Glitch] Further de-emphasize filtered notifications banner and add s…
…etting to minimize it Port ad95c98 to glitch-soc Signed-off-by: Claire <[email protected]>
- Loading branch information
1 parent
f273671
commit 1ca81a1
Showing
11 changed files
with
307 additions
and
106 deletions.
There are no files selected for viewing
31 changes: 0 additions & 31 deletions
31
app/javascript/flavours/glitch/features/notifications/components/checkbox_with_label.jsx
This file was deleted.
Oops, something went wrong.
40 changes: 40 additions & 0 deletions
40
app/javascript/flavours/glitch/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/flavours/glitch/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 'flavours/glitch/actions/notification_policies'; | ||
| import { useAppSelector, useAppDispatch } from 'flavours/glitch/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.