forked from mastodon/mastodon
-
Notifications
You must be signed in to change notification settings - Fork 186
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[WiP] Switch to dropdown for local-only setting
- Loading branch information
1 parent
bd1be6a
commit b2bcd3d
Showing
2 changed files
with
79 additions
and
21 deletions.
There are no files selected for viewing
93 changes: 74 additions & 19 deletions
93
app/javascript/flavours/glitch/features/compose/components/federation_button.jsx
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 |
|---|---|---|
| @@ -1,39 +1,94 @@ | ||
| import { useCallback } from 'react'; | ||
| import { useCallback, useState, useRef } from 'react'; | ||
|
|
||
| import { useIntl, defineMessages } from 'react-intl'; | ||
|
|
||
| import Overlay from 'react-overlays/Overlay'; | ||
|
|
||
| import ShareIcon from '@/material-icons/400-24px/share.svg?react'; | ||
| import ShareOffIcon from '@/material-icons/400-24px/share_off.svg?react'; | ||
| import { changeComposeAdvancedOption } from 'flavours/glitch/actions/compose'; | ||
| import { IconButton } from 'flavours/glitch/components/icon_button'; | ||
| import { useAppSelector, useAppDispatch } from 'flavours/glitch/store'; | ||
|
|
||
| import DropdownMenu from './dropdown_menu'; | ||
|
|
||
| const messages = defineMessages({ | ||
| enable_local_only: { id: 'compose.federation.enable_local_only', defaultMessage: 'Disallow federation for this post' }, | ||
| disable_local_only: { id: 'compose.federation.disable_local_only', defaultMessage: 'Allow federation for this post' }, | ||
| change_federation_settings: { id: 'compose.change_federation', defaultMessage: 'Change federation settings' }, | ||
| local_only_label: { id: 'federation.local_only.short', defaultMessage: 'Local-only' }, | ||
| local_only_meta: { id: 'federation.local_only.long', defaultMessage: 'Prevent this post from reaching other servers' }, | ||
| federated_label: { id: 'federation.federated.short', defaultMessage: 'Federate' }, | ||
| federated_meta: { id: 'federation.federated.long', defaultMessage: 'Allow this post to reach other servers' }, | ||
| }); | ||
|
|
||
| export const FederationButton = () => { | ||
| const intl = useIntl(); | ||
|
|
||
| const disabled = useAppSelector((state) => state.getIn(['compose', 'id']) !== null); | ||
| const active = useAppSelector((state) => state.getIn(['compose', 'advanced_options', 'do_not_federate'])); | ||
|
|
||
| const do_not_federate = useAppSelector((state) => state.getIn(['compose', 'advanced_options', 'do_not_federate'])); | ||
| const dispatch = useAppDispatch(); | ||
|
|
||
| const handleClick = useCallback(() => { | ||
| dispatch(changeComposeAdvancedOption('do_not_federate', !active)); | ||
| }, [active, dispatch]); | ||
| const containerRef = useRef(null); | ||
|
|
||
| const [activeElement, setActiveElement] = useState(null); | ||
| const [open, setOpen] = useState(false); | ||
| const [placement, setPlacement] = useState('bottom'); | ||
|
|
||
| const handleToggle = useCallback(() => { | ||
| if (open && activeElement) { | ||
| activeElement.focus({ preventScroll: true }); | ||
| setActiveElement(null); | ||
| } | ||
|
|
||
| setOpen(!open); | ||
| }, [open, setOpen, activeElement, setActiveElement]); | ||
|
|
||
| const handleClose = useCallback(() => { | ||
| if (open && activeElement) { | ||
| activeElement.focus({ preventScroll: true }); | ||
| setActiveElement(null); | ||
| } | ||
|
|
||
| setOpen(false); | ||
| }, [open, setOpen, activeElement, setActiveElement]); | ||
|
|
||
| const handleChange = useCallback((value) => { | ||
| dispatch(changeComposeAdvancedOption('do_not_federate', value === 'local-only')); | ||
| }, [dispatch]); | ||
|
|
||
| const handleOverlayEnter = useCallback((state) => { | ||
| setPlacement(state.placement); | ||
| }, [setPlacement]); | ||
|
|
||
| const options = [ | ||
| { icon: 'link', iconComponent: ShareIcon, value: 'local-only', text: intl.formatMessage(messages.local_only_label), meta: intl.formatMessage(messages.local_only_meta) }, | ||
| { icon: 'link-slash', iconComponent: ShareOffIcon, value: 'federated', text: intl.formatMessage(messages.federated_label), meta: intl.formatMessage(messages.federated_meta) }, | ||
| ]; | ||
|
|
||
| return ( | ||
| <IconButton | ||
| onClick={handleClick} | ||
| icon={'share-off'} | ||
| iconComponent={ShareOffIcon} | ||
| title={intl.formatMessage(active ? messages.disable_local_only : messages.enable_local_only)} | ||
| active={active} | ||
| size={18} | ||
| disabled={disabled} | ||
| inverted | ||
| /> | ||
| <div ref={containerRef}> | ||
| <IconButton | ||
| icon={do_not_federate ? 'link-slash' : 'link'} | ||
| onClick={handleToggle} | ||
| iconComponent={do_not_federate ? ShareOffIcon : ShareIcon} | ||
| title={intl.formatMessage(messages.change_federation_settings)} | ||
| active={open} | ||
| size={18} | ||
| inverted | ||
| /> | ||
|
|
||
| <Overlay show={open} offset={[5, 5]} placement={placement} flip target={containerRef} popperConfig={{ strategy: 'fixed', onFirstUpdate: handleOverlayEnter }}> | ||
| {({ props, placement }) => ( | ||
| <div {...props}> | ||
| <div className={`dropdown-animation privacy-dropdown__dropdown ${placement}`}> | ||
| <DropdownMenu | ||
| items={options} | ||
| value={do_not_federate ? 'local-only' : 'federated'} | ||
| onClose={handleClose} | ||
| onChange={handleChange} | ||
| /> | ||
| </div> | ||
| </div> | ||
| )} | ||
| </Overlay> | ||
| </div> | ||
| ); | ||
| }; |
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