Auto-scroll to filter & add clear filter "button"
This commit is contained in:
parent
b49f003605
commit
0ee17395ae
2 changed files with 29 additions and 4 deletions
|
@ -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);
|
||||||
|
|
|
@ -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}
|
||||||
|
|
Loading…
Add table
Reference in a new issue