From b2bcd3d89bd654536079563b3cac518b879e8e22 Mon Sep 17 00:00:00 2001 From: Claire Date: Fri, 23 Feb 2024 13:49:27 +0100 Subject: [PATCH] [WiP] Switch to dropdown for local-only setting --- .../compose/components/federation_button.jsx | 93 +++++++++++++++---- .../flavours/glitch/locales/en.json | 7 +- 2 files changed, 79 insertions(+), 21 deletions(-) diff --git a/app/javascript/flavours/glitch/features/compose/components/federation_button.jsx b/app/javascript/flavours/glitch/features/compose/components/federation_button.jsx index b2773a28072525..754431be5a68e4 100644 --- a/app/javascript/flavours/glitch/features/compose/components/federation_button.jsx +++ b/app/javascript/flavours/glitch/features/compose/components/federation_button.jsx @@ -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 ( - +
+ + + + {({ props, placement }) => ( +
+
+ +
+
+ )} + +
); }; diff --git a/app/javascript/flavours/glitch/locales/en.json b/app/javascript/flavours/glitch/locales/en.json index dbd9c9d8154640..c3f3ad7b09b006 100644 --- a/app/javascript/flavours/glitch/locales/en.json +++ b/app/javascript/flavours/glitch/locales/en.json @@ -14,6 +14,7 @@ "column_subheading.lists": "Lists", "column_subheading.navigation": "Navigation", "community.column_settings.allow_local_only": "Show local-only toots", + "compose.change_federation": "Change federation settings", "compose.content-type.change": "Change advanced formatting options", "compose.content-type.html": "HTML", "compose.content-type.html_meta": "Format your posts using HTML", @@ -21,8 +22,6 @@ "compose.content-type.markdown_meta": "Format your posts using Markdown", "compose.content-type.plain": "Plain text", "compose.content-type.plain_meta": "Write with no advanced formatting", - "compose.federation.disable_local_only": "Allow federation for this post", - "compose.federation.enable_local_only": "Disallow federation for this post", "compose_form.sensitive.hide": "{count, plural, one {Mark media as sensitive} other {Mark media as sensitive}}", "compose_form.sensitive.marked": "{count, plural, one {Media is marked as sensitive} other {Media is marked as sensitive}}", "compose_form.sensitive.unmarked": "{count, plural, one {Media is not marked as sensitive} other {Media is not marked as sensitive}}", @@ -36,6 +35,10 @@ "direct.group_by_conversations": "Group by conversation", "endorsed_accounts_editor.endorsed_accounts": "Featured accounts", "favourite_modal.combo": "You can press {combo} to skip this next time", + "federation.federated.long": "Allow this post to reach other servers", + "federation.federated.short": "Federate", + "federation.local_only.long": "Prevent this post from reaching other servers", + "federation.local_only.short": "Local-only", "firehose.column_settings.allow_local_only": "Show local-only posts in \"All\"", "home.column_settings.advanced": "Advanced", "home.column_settings.filter_regex": "Filter out by regular expressions",