matty/ncd-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve compose form UI on homepage

Browse Source 
Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
marcin mikołajczak
2024-08-24 19:40:47 +02:00
parent 2d6f052c93
commit 982891b53d
7 changed files with 18 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/features/compose/components/compose-form.tsx
View File

@ -62,9 +62,10 @@ interface IComposeForm<ID extends string> {
event?: string;
group?: string;
withAvatar?: boolean;
transparent?: boolean;
}
const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickableAreaRef, event, group, withAvatar }: IComposeForm<ID>) => {
const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickableAreaRef, event, group, withAvatar, transparent }: IComposeForm<ID>) => {
const history = useHistory();
const intl = useIntl();
const dispatch = useAppDispatch();
@ -258,6 +259,7 @@ const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickab
onSuggestionsFetchRequested={onSuggestionsFetchRequested}
onSuggestionsClearRequested={onSuggestionsClearRequested}
onSuggestionSelected={onSpoilerSuggestionSelected}
theme={transparent ? 'transparent' : 'normal'}
/>
<div>
@ -265,7 +267,10 @@ const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickab
<ComposeEditor
key={modifiedLanguage}
ref={editorRef}
className='rounded-md border-gray-400 px-3 py-2 ring-2 focus-within:border-primary-500 focus-within:ring-primary-500 dark:border-gray-800 dark:ring-gray-800 dark:focus-within:border-primary-500 dark:focus-within:ring-primary-500'
className={transparent
? ''
: 'rounded-md border-gray-400 px-3 py-2 ring-2 focus-within:border-primary-500 focus-within:ring-primary-500 dark:border-gray-800 dark:ring-gray-800 dark:focus-within:border-primary-500 dark:focus-within:ring-primary-500'}
placeholderClassName={transparent ? '' : 'pt-2'}
composeId={id}
condensed={condensed}
eventDiscussion={!!event}

4
src/features/compose/components/spoiler-input.tsx
View File

@ -9,7 +9,7 @@ const messages = defineMessages({
placeholder: { id: 'compose_form.spoiler_placeholder', defaultMessage: 'Subject (optional)' },
});
interface ISpoilerInput extends Pick<IAutosuggestInput, 'onSuggestionsFetchRequested' | 'onSuggestionsClearRequested' | 'onSuggestionSelected'> {
interface ISpoilerInput extends Pick<IAutosuggestInput, 'onSuggestionsFetchRequested' | 'onSuggestionsClearRequested' | 'onSuggestionSelected' | 'theme'> {
composeId: string extends 'default' ? never : string;
}
@ -19,6 +19,7 @@ const SpoilerInput = React.forwardRef<AutosuggestInput, ISpoilerInput>(({
onSuggestionsFetchRequested,
onSuggestionsClearRequested,
onSuggestionSelected,
theme,
}, ref) => {
const intl = useIntl();
const dispatch = useAppDispatch();
@ -39,6 +40,7 @@ const SpoilerInput = React.forwardRef<AutosuggestInput, ISpoilerInput>(({
onSuggestionsFetchRequested={onSuggestionsFetchRequested}
onSuggestionsClearRequested={onSuggestionsClearRequested}
onSuggestionSelected={onSuggestionSelected}
theme={theme}
searchTokens={[':']}
id='cw-spoiler-input'
className='rounded-md !bg-transparent dark:!bg-transparent'

2
src/features/compose/editor/index.tsx
View File

@ -198,7 +198,7 @@ const ComposeEditor = React.forwardRef<LexicalEditor, IComposeEditor>(({
placeholder={(
<div
className={clsx(
'pointer-events-none absolute top-2 select-none text-[1rem] text-gray-600 dark:placeholder:text-gray-600',
'pointer-events-none absolute top-0 select-none text-[1rem] text-gray-600 dark:placeholder:text-gray-600',
placeholderClassName,
)}
>