nki/phanpy
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Auto-scroll to filter & add clear filter "button"

Browse source
This commit is contained in:
Lim Chee Aun 2023-04-03 13:17:22 +08:00
parent b49f003605
commit 0ee17395ae
2 changed files with 29 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/app.css
View file

@ -1663,7 +1663,7 @@ ul.link-list li a .icon {
background-color: transparent; background-color: transparent;
} }
} }
.filter-bar > a { .filter-bar > a:not(.filter-clear) {
padding: 8px 16px; padding: 8px 16px;
border-radius: 999px; border-radius: 999px;
background-color: var(--bg-color); background-color: var(--bg-color);

31
src/pages/account-statuses.jsx
View file

@ -21,7 +21,6 @@ function AccountStatuses() {
const excludeReplies = !searchParams.get('replies'); const excludeReplies = !searchParams.get('replies');
const tagged = searchParams.get('tagged'); const tagged = searchParams.get('tagged');
const media = !!searchParams.get('media'); const media = !!searchParams.get('media');
console.log({ excludeReplies });
const { masto, instance, authenticated } = api({ instance: params.instance }); const { masto, instance, authenticated } = api({ instance: params.instance });
const accountStatusesIterator = useRef(); const accountStatusesIterator = useRef();
async function fetchAccountStatuses(firstLoad) { async function fetchAccountStatuses(firstLoad) {
@ -100,8 +99,10 @@ function AccountStatuses() {
const { displayName, acct, emojis } = account || {}; const { displayName, acct, emojis } = account || {};
const filterBarRef = useRef();
const TimelineStart = useMemo(() => { const TimelineStart = useMemo(() => {
const cachedAccount = snapStates.accounts[`${id}@${instance}`]; const cachedAccount = snapStates.accounts[`${id}@${instance}`];
const filtered = !excludeReplies || tagged || media;
return ( return (
<> <>
<AccountInfo <AccountInfo
@ -111,8 +112,18 @@ function AccountStatuses() {
authenticated={authenticated} authenticated={authenticated}
standalone standalone
/> />
<div class="filter-bar"> <div class="filter-bar" ref={filterBarRef}>
<Icon icon="filter" class="insignificant" size="l" /> {filtered ? (
<Link
to={`/${instance}/a/${id}`}
class="insignificant filter-clear"
title="Clear filters"
>
<Icon icon="x" size="l" />
</Link>
) : (
<Icon icon="filter" class="insignificant" size="l" />
)}
<Link <Link
to={`/${instance}/a/${id}${excludeReplies ? '?replies=1' : ''}`} to={`/${instance}/a/${id}${excludeReplies ? '?replies=1' : ''}`}
class={excludeReplies ? '' : 'is-active'} class={excludeReplies ? '' : 'is-active'}
@ -157,6 +168,20 @@ function AccountStatuses() {
media, media,
]); ]);
useEffect(() => {
// Focus on .is-active
const active = filterBarRef.current?.querySelector('.is-active');
if (active) {
console.log('active', active, active.offsetLeft);
filterBarRef.current.scrollTo({
behavior: 'smooth',
left:
active.offsetLeft -
(filterBarRef.current.offsetWidth - active.offsetWidth) / 2,
});
}
}, [featuredTags, tagged, media, excludeReplies]);
return ( return (
<Timeline <Timeline
key={id} key={id}