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

Merge branch 'autosuggest-snapped-scroll' into 'main'

Browse source 
adding tailwind snap effect to scrolled autosuggested items

See merge request soapbox-pub/soapbox!2819
This commit is contained in:
Alex Gleason 2023-10-15 03:17:12 +00:00
commit 8ea10e4433
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);
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}
data-index={i}
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,
'bg-gray-100 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-800': i === selectedSuggestion,
'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,
'snap-start snap-always bg-gray-100 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-800': i === selectedSuggestion,
})}
onMouseDown={handleSelectSuggestion}
>
@ -538,7 +538,7 @@ const AutosuggestPlugin = ({
? ReactDOM.createPortal(
<div
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(),
block: !suggestionsHidden && !suggestions.isEmpty(),
})}