pl-fe: preparing for compose form panel
Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
This commit is contained in:
@ -122,9 +122,10 @@ interface IComposeForm<ID extends string> {
|
||||
group?: string;
|
||||
withAvatar?: boolean;
|
||||
transparent?: boolean;
|
||||
compact?: boolean;
|
||||
}
|
||||
|
||||
const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickableAreaRef, event, group, withAvatar, transparent }: IComposeForm<ID>) => {
|
||||
const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickableAreaRef, event, group, withAvatar, transparent, compact }: IComposeForm<ID>) => {
|
||||
const history = useHistory();
|
||||
const intl = useIntl();
|
||||
const dispatch = useAppDispatch();
|
||||
@ -323,9 +324,9 @@ const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickab
|
||||
|
||||
const selectButtons = [];
|
||||
|
||||
if (features.privacyScopes && !group && !groupId) selectButtons.push(<PrivacyDropdown key='privacy-dropdown' composeId={id} />);
|
||||
if (features.richText) selectButtons.push(<ContentTypeButton key='compose-type-button' composeId={id} />);
|
||||
if (features.postLanguages) selectButtons.push(<LanguageDropdown key='language-dropdown' composeId={id} />);
|
||||
if (features.privacyScopes && !group && !groupId) selectButtons.push(<PrivacyDropdown key='privacy-dropdown' composeId={id} compact={compact} />);
|
||||
if (features.richText) selectButtons.push(<ContentTypeButton key='compose-type-button' composeId={id} compact={compact} />);
|
||||
if (features.postLanguages) selectButtons.push(<LanguageDropdown key='language-dropdown' composeId={id} compact={compact} />);
|
||||
|
||||
const actionsMenu: Menu = [];
|
||||
|
||||
@ -425,7 +426,7 @@ const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickab
|
||||
<div className='⁂-compose-form__actions'>
|
||||
{maxTootChars && (
|
||||
<div className='⁂-compose-form__counter'>
|
||||
<TextCharacterCounter max={maxTootChars} text={text} />
|
||||
{!compact && <TextCharacterCounter max={maxTootChars} text={text} />}
|
||||
<VisualCharacterCounter max={maxTootChars} text={text} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
@ -19,9 +19,10 @@ const messages = defineMessages({
|
||||
|
||||
interface IContentTypeButton {
|
||||
composeId: string;
|
||||
compact?: boolean;
|
||||
}
|
||||
|
||||
const ContentTypeButton: React.FC<IContentTypeButton> = ({ composeId }) => {
|
||||
const ContentTypeButton: React.FC<IContentTypeButton> = ({ composeId, compact }) => {
|
||||
const intl = useIntl();
|
||||
const dispatch = useAppDispatch();
|
||||
const instance = useInstance();
|
||||
@ -88,10 +89,10 @@ const ContentTypeButton: React.FC<IContentTypeButton> = ({ composeId }) => {
|
||||
<Button
|
||||
theme='muted'
|
||||
size='xs'
|
||||
text={option?.text}
|
||||
text={compact ? undefined : option?.text}
|
||||
icon={option?.icon}
|
||||
secondaryIcon={require('@phosphor-icons/core/regular/caret-down.svg')}
|
||||
title={intl.formatMessage(messages.change_content_type)}
|
||||
title={compact ? option?.text : intl.formatMessage(messages.change_content_type)}
|
||||
/>
|
||||
</DropdownMenu>
|
||||
);
|
||||
|
||||
@ -218,9 +218,10 @@ const getLanguageDropdown = (composeId: string): React.FC<ILanguageDropdown> =>
|
||||
|
||||
interface ILanguageDropdownButton {
|
||||
composeId: string;
|
||||
compact?: boolean;
|
||||
}
|
||||
|
||||
const LanguageDropdownButton: React.FC<ILanguageDropdownButton> = ({ composeId }) => {
|
||||
const LanguageDropdownButton: React.FC<ILanguageDropdownButton> = ({ composeId, compact }) => {
|
||||
const intl = useIntl();
|
||||
|
||||
const {
|
||||
@ -232,7 +233,7 @@ const LanguageDropdownButton: React.FC<ILanguageDropdownButton> = ({ composeId }
|
||||
|
||||
const languagesCount = Object.keys(textMap).length;
|
||||
|
||||
let buttonLabel = intl.formatMessage(messages.languagePrompt);
|
||||
let buttonLabel = compact ? undefined : intl.formatMessage(messages.languagePrompt);
|
||||
if (language) {
|
||||
const list: string[] = [languagesObject[(modifiedLanguage || language) as Language]];
|
||||
if (languagesCount) list.push(intl.formatMessage(messages.multipleLanguages, {
|
||||
|
||||
@ -122,10 +122,12 @@ const getItems = (features: Features, lists: ReturnType<typeof getOrderedLists>,
|
||||
|
||||
interface IPrivacyDropdown {
|
||||
composeId: string;
|
||||
compact?: boolean;
|
||||
}
|
||||
|
||||
const PrivacyDropdown: React.FC<IPrivacyDropdown> = ({
|
||||
composeId,
|
||||
compact,
|
||||
}) => {
|
||||
const intl = useIntl();
|
||||
const features = useFeatures();
|
||||
@ -173,17 +175,19 @@ const PrivacyDropdown: React.FC<IPrivacyDropdown> = ({
|
||||
return null;
|
||||
}
|
||||
|
||||
const text = compose.federated ? valueOption?.text : intl.formatMessage(messages.local, {
|
||||
privacy: valueOption?.text,
|
||||
});
|
||||
|
||||
return (
|
||||
<DropdownMenu items={items} width='16rem'>
|
||||
<Button
|
||||
theme='muted'
|
||||
size='xs'
|
||||
text={compose.federated ? valueOption?.text : intl.formatMessage(messages.local, {
|
||||
privacy: valueOption?.text,
|
||||
})}
|
||||
text={compact ? undefined : text}
|
||||
icon={valueOption?.icon}
|
||||
secondaryIcon={require('@phosphor-icons/core/regular/caret-down.svg')}
|
||||
title={intl.formatMessage(messages.change_privacy)}
|
||||
title={compact ? text : intl.formatMessage(messages.change_privacy)}
|
||||
/>
|
||||
</DropdownMenu>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user