bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

adding tailwind snap effect to scrolled autosuggested items

Browse source
This commit is contained in:
tassoman 2023-10-15 02:16:27 +02:00
parent 7e884aabce
commit fba42b531b
2 changed files with 8 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/features/compose/components/autosuggest-account.tsx
View file

@ -11,7 +11,11 @@ const AutosuggestAccount: React.FC<IAutosuggestAccount> = ({ id }) => {
const { account } = useAccount(id); const { account } = useAccount(id);
if (!account) return null; if (!account) return null;
return <Account account={account} hideActions showProfileHoverCard={false} />; return (
<div className='snap-start snap-always'>
<Account account={account} hideActions showProfileHoverCard={false} />
</div>
);
}; };

6
src/features/compose/editor/plugins/autosuggest-plugin.tsx
View file

@ -378,8 +378,8 @@ const AutosuggestPlugin = ({
key={key} key={key}
data-index={i} data-index={i}
className={clsx({ className={clsx({
'px-4 py-2.5 text-sm text-gray-700 dark:text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800 focus:bg-gray-100 dark:focus:bg-primary-800 group': true, 'snap-start snap-always px-4 py-2.5 text-sm text-gray-700 dark:text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800 focus:bg-gray-100 dark:focus:bg-primary-800 group': true,
'bg-gray-100 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-800': i === selectedSuggestion, 'snap-start snap-always bg-gray-100 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-800': i === selectedSuggestion,
})} })}
onMouseDown={handleSelectSuggestion} onMouseDown={handleSelectSuggestion}
> >
@ -538,7 +538,7 @@ const AutosuggestPlugin = ({
? ReactDOM.createPortal( ? ReactDOM.createPortal(
<div <div
className={clsx({ className={clsx({
'mt-6 overflow-y-auto max-h-56 relative w-max z-1000 shadow bg-white dark:bg-gray-900 rounded-lg py-1 space-y-0 dark:ring-2 dark:ring-primary-700 focus:outline-none': true, 'scroll-smooth snap-y snap-always will-change-scroll mt-6 overflow-y-auto max-h-56 relative w-max z-1000 shadow bg-white dark:bg-gray-900 rounded-lg py-1 space-y-0 dark:ring-2 dark:ring-primary-700 focus:outline-none': true,
hidden: suggestionsHidden || suggestions.isEmpty(), hidden: suggestionsHidden || suggestions.isEmpty(),
block: !suggestionsHidden && !suggestions.isEmpty(), block: !suggestionsHidden && !suggestions.isEmpty(),
})} })}