diff --git a/app/javascript/flavours/glitch/features/compose/components/compose_form.jsx b/app/javascript/flavours/glitch/features/compose/components/compose_form.jsx index 4718d20ff8..c8d95a11a7 100644 --- a/app/javascript/flavours/glitch/features/compose/components/compose_form.jsx +++ b/app/javascript/flavours/glitch/features/compose/components/compose_form.jsx @@ -34,6 +34,7 @@ import { NavigationBar } from './navigation_bar'; import { PollForm } from "./poll_form"; import { ReplyIndicator } from './reply_indicator'; import { SecondaryPrivacyButton } from './secondary_privacy_button'; +import { ThreadModeButton } from './thread_mode_button'; const allowedAroundShortCode = '><\u0085\u0020\u00a0\u1680\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200a\u202f\u205f\u3000\u2028\u2029\u0009\u000a\u000b\u000c\u000d'; @@ -315,6 +316,7 @@ class ComposeForm extends ImmutablePureComponent { + diff --git a/app/javascript/flavours/glitch/features/compose/components/thread_mode_button.jsx b/app/javascript/flavours/glitch/features/compose/components/thread_mode_button.jsx new file mode 100644 index 0000000000..65b1b72897 --- /dev/null +++ b/app/javascript/flavours/glitch/features/compose/components/thread_mode_button.jsx @@ -0,0 +1,41 @@ +import { useCallback } from 'react'; + +import { useIntl, defineMessages } from 'react-intl'; + +import QuickreplyIcon from '@/material-icons/400-24px/quickreply.svg?react'; +import { changeComposeAdvancedOption } from 'flavours/glitch/actions/compose'; +import { IconButton } from 'flavours/glitch/components/icon_button'; +import { useAppSelector, useAppDispatch } from 'flavours/glitch/store'; + +const messages = defineMessages({ + enable_threaded_mode: { id: 'compose.enable_threaded_mode', defaultMessage: 'Enable threaded more' }, + disable_threaded_mode: { id: 'compose.disable_threaded_mode', defaultMessage: 'Disable threaded more' }, +}); + +export const ThreadModeButton = () => { + const intl = useIntl(); + + const isEditing = useAppSelector((state) => state.getIn(['compose', 'id']) !== null); + const active = useAppSelector((state) => state.getIn(['compose', 'advanced_options', 'threaded_mode'])); + + const dispatch = useAppDispatch(); + + const handleClick = useCallback(() => { + dispatch(changeComposeAdvancedOption('threaded_mode', !active)); + }, [active, dispatch]); + + const title = intl.formatMessage(active ? messages.disable_threaded_mode : messages.enable_threaded_mode); + + return ( + + ); +}; diff --git a/app/javascript/flavours/glitch/locales/en.json b/app/javascript/flavours/glitch/locales/en.json index 5b47393cab..9c530262f2 100644 --- a/app/javascript/flavours/glitch/locales/en.json +++ b/app/javascript/flavours/glitch/locales/en.json @@ -22,6 +22,8 @@ "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.disable_threaded_mode": "Disable threaded more", + "compose.enable_threaded_mode": "Enable threaded more", "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}}", diff --git a/app/javascript/material-icons/400-24px/quickreply-fill.svg b/app/javascript/material-icons/400-24px/quickreply-fill.svg new file mode 100644 index 0000000000..a9ce9705ac --- /dev/null +++ b/app/javascript/material-icons/400-24px/quickreply-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/javascript/material-icons/400-24px/quickreply.svg b/app/javascript/material-icons/400-24px/quickreply.svg new file mode 100644 index 0000000000..522093e3cc --- /dev/null +++ b/app/javascript/material-icons/400-24px/quickreply.svg @@ -0,0 +1 @@ + \ No newline at end of file