pl-fe: preparing for compose form panel

Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
This commit is contained in:
nicole mikołajczyk
2025-10-27 15:56:22 +01:00
parent 55bd521ae9
commit 3e16e43326
4 changed files with 21 additions and 14 deletions

View File

@ -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>
)}

View File

@ -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>
);

View File

@ -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, {

View File

@ -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>
);