Add thread mode button
This commit is contained in:
parent
e333453343
commit
9ab030bb13
|
@ -34,6 +34,7 @@ import { NavigationBar } from './navigation_bar';
|
||||||
import { PollForm } from "./poll_form";
|
import { PollForm } from "./poll_form";
|
||||||
import { ReplyIndicator } from './reply_indicator';
|
import { ReplyIndicator } from './reply_indicator';
|
||||||
import { SecondaryPrivacyButton } from './secondary_privacy_button';
|
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';
|
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 {
|
||||||
<ContentTypeButton />
|
<ContentTypeButton />
|
||||||
<EmojiPickerDropdown onPickEmoji={this.handleEmojiPick} />
|
<EmojiPickerDropdown onPickEmoji={this.handleEmojiPick} />
|
||||||
<FederationButton />
|
<FederationButton />
|
||||||
|
<ThreadModeButton />
|
||||||
<CharacterCounter max={maxChars} text={this.getFulltextForCharacterCounting()} />
|
<CharacterCounter max={maxChars} text={this.getFulltextForCharacterCounting()} />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
@ -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 (
|
||||||
|
<IconButton
|
||||||
|
disabled={isEditing}
|
||||||
|
icon=''
|
||||||
|
onClick={handleClick}
|
||||||
|
iconComponent={QuickreplyIcon}
|
||||||
|
title={title}
|
||||||
|
active={active}
|
||||||
|
size={18}
|
||||||
|
inverted
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
|
@ -22,6 +22,8 @@
|
||||||
"compose.content-type.markdown_meta": "Format your posts using Markdown",
|
"compose.content-type.markdown_meta": "Format your posts using Markdown",
|
||||||
"compose.content-type.plain": "Plain text",
|
"compose.content-type.plain": "Plain text",
|
||||||
"compose.content-type.plain_meta": "Write with no advanced formatting",
|
"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.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.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}}",
|
"compose_form.sensitive.unmarked": "{count, plural, one {Media is not marked as sensitive} other {Media is not marked as sensitive}}",
|
||||||
|
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M760-40v-200h-80v-240h200l-68 160h88L760-40ZM80-80v-720q0-33 23.5-56.5T160-880h640q33 0 56.5 23.5T880-800v240H600v320H240L80-80Z"/></svg>
|
After Width: | Height: | Size: 234 B |
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M80-80v-720q0-33 23.5-56.5T160-880h640q33 0 56.5 23.5T880-800v240h-80v-240H160v525l46-45h394v80H240L80-80Zm80-240v-480 480ZM760-40v-200h-80v-240h200l-68 160h88L760-40Z"/></svg>
|
After Width: | Height: | Size: 273 B |
Loading…
Reference in New Issue