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

pl-fe: more alike input improvements

Browse Source 
Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
This commit is contained in:
nicole mikołajczyk
2025-10-31 14:25:37 +01:00
parent 8397c35820
commit be65b924ed
3 changed files with 36 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
packages/pl-fe/src/components/location-search.tsx
View File

@ -13,6 +13,7 @@ const noOp = () => {};
const messages = defineMessages({
placeholder: { id: 'location_search.placeholder', defaultMessage: 'Find an address' },
clear: { id: 'search.clear', defaultMessage: 'Clear input' },
});
interface ILocationSearch {
@ -66,10 +67,16 @@ const LocationSearch: React.FC<ILocationSearch> = ({ onSelected }) => {
searchTokens={[]}
onKeyDown={handleKeyDown}
/>
<div role='button' tabIndex={0} className='absolute inset-y-0 right-0 flex cursor-pointer items-center px-3 rtl:left-0 rtl:right-auto' onClick={handleClear}>
<button
disabled={empty}
tabIndex={0}
className='absolute inset-y-0 right-0 flex cursor-pointer items-center px-3 rtl:left-0 rtl:right-auto'
onClick={handleClear}
title={intl.formatMessage(messages.clear)}
>
<Icon src={require('@phosphor-icons/core/regular/magnifying-glass.svg')} className={clsx('size-5 text-gray-600', { 'hidden': !empty })} />
<Icon src={require('@phosphor-icons/core/regular/backspace.svg')} className={clsx('size-5 text-gray-600', { 'hidden': empty })} aria-label={intl.formatMessage(messages.placeholder)} />
</div>
<Icon src={require('@phosphor-icons/core/regular/backspace.svg')} className={clsx('size-5 text-gray-600', { 'hidden': empty })} />
</button>
</div>
);
};

13
packages/pl-fe/src/features/compose/components/language-dropdown.tsx
View File

@ -27,6 +27,7 @@ const messages = defineMessages({
languageSuggestion: { id: 'compose.language_dropdown.suggestion', defaultMessage: '{language} (detected)' },
multipleLanguages: { id: 'compose.language_dropdown.more_languages', defaultMessage: '{count, plural, one {# more language} other {# more languages}}' },
search: { id: 'compose.language_dropdown.search', defaultMessage: 'Search language…' },
clear: { id: 'search.clear', defaultMessage: 'Clear input' },
addLanguage: { id: 'compose.language_dropdown.add_language', defaultMessage: 'Add language' },
deleteLanguage: { id: 'compose.language_dropdown.delete_language', defaultMessage: 'Delete language' },
});
@ -147,7 +148,7 @@ const getLanguageDropdown = (composeId: string): React.FC<ILanguageDropdown> =>
return (
<>
<label className='relative block grow p-2 pt-1'>
<label className='relative m-2 mt-1 block grow'>
<span style={{ display: 'none' }}>{intl.formatMessage(messages.search)}</span>
<Input
@ -158,13 +159,17 @@ const getLanguageDropdown = (composeId: string): React.FC<ILanguageDropdown> =>
outerClassName='mt-0'
placeholder={intl.formatMessage(messages.search)}
/>
<div role='button' tabIndex={0} className='absolute inset-y-0 right-0 flex cursor-pointer items-center px-5 rtl:left-0 rtl:right-auto' onClick={handleClear}>
<button
tabIndex={0}
className='absolute inset-y-0 right-0 flex cursor-pointer items-center px-2 rtl:left-0 rtl:right-auto'
onClick={handleClear}
title={isSearching ? intl.formatMessage(messages.clear) : intl.formatMessage(messages.search)}
>
<Icon
className='size-5 text-gray-600'
src={isSearching ? require('@phosphor-icons/core/regular/backspace.svg') : require('@phosphor-icons/core/regular/magnifying-glass.svg')}
aria-label={intl.formatMessage(messages.search)}
/>
</div>
</button>
</label>
<div className='-mb-1 h-96 w-full overflow-auto' ref={node} tabIndex={-1}>
{results.map(([code, name]) => {

25
packages/pl-fe/src/pages/settings/aliases.tsx
View File

@ -27,6 +27,7 @@ const messages = defineMessages({
add: { id: 'aliases.account.add', defaultMessage: 'Create alias' },
search: { id: 'aliases.search', defaultMessage: 'Search your old account' },
searchTitle: { id: 'tabs_bar.search', defaultMessage: 'Search' },
clear: { id: 'search.clear', defaultMessage: 'Clear input' },
});
interface IAccount {
@ -93,6 +94,7 @@ const Search: React.FC<IAliasesSearch> = ({ onSubmit }) => {
};
const handleClear = () => {
setValue('');
onSubmit('');
};
@ -112,9 +114,14 @@ const Search: React.FC<IAliasesSearch> = ({ onSubmit }) => {
placeholder={intl.formatMessage(messages.search)}
/>
<div role='button' tabIndex={hasValue ? 0 : -1} className='absolute inset-y-0 right-0 flex cursor-pointer items-center px-3 rtl:left-0 rtl:right-auto' onClick={handleClear}>
<Icon src={require('@phosphor-icons/core/regular/backspace.svg')} aria-label={intl.formatMessage(messages.search)} className={clsx('size-5 text-gray-600', { 'hidden': !hasValue })} />
</div>
<button
disabled={!hasValue}
className='absolute inset-y-0 right-0 flex cursor-pointer items-center px-3 rtl:left-0 rtl:right-auto'
onClick={handleClear}
title={intl.formatMessage(messages.clear)}
>
<Icon src={require('@phosphor-icons/core/regular/backspace.svg')} className={clsx('size-5 text-gray-600', { 'hidden': !hasValue })} />
</button>
</label>
<Button onClick={handleSubmit}>{intl.formatMessage(messages.searchTitle)}</Button>
</div>
@ -130,7 +137,7 @@ const AliasesPage = () => {
const { data: searchAccountIds = [], isFetched } = useSearchAccounts(query);
const { mutate: deleteAccountAlias } = useDeleteAccountAlias();
const handleAliasDelete: React.MouseEventHandler<HTMLDivElement> = e => {
const handleAliasDelete: React.MouseEventHandler<HTMLButtonElement> = e => {
deleteAccountAlias(e.currentTarget.dataset.value as string);
};
@ -168,10 +175,12 @@ const AliasesPage = () => {
{' '}
<Text tag='span'>{alias}</Text>
</div>
<div className='flex items-center' role='button' tabIndex={0} onClick={handleAliasDelete} data-value={alias} aria-label={intl.formatMessage(messages.delete)}>
<Icon className='mr-1.5' src={require('@phosphor-icons/core/regular/x.svg')} />
<Text weight='bold' theme='muted'><FormattedMessage id='aliases.aliases_list_delete' defaultMessage='Unlink alias' /></Text>
</div>
<button onClick={handleAliasDelete} data-value={alias} aria-label={intl.formatMessage(messages.delete)}>
<Text theme='muted' className='flex items-center gap-1'>
<Icon src={require('@phosphor-icons/core/regular/x.svg')} />
<FormattedMessage id='aliases.aliases_list_delete' defaultMessage='Unlink alias' />
</Text>
</button>
</HStack>
))}
</ScrollableList>