Add Experimental scroll to top button for status page

This commit is contained in:
Lim Chee Aun 2023-01-10 10:44:16 +08:00
parent 1727475336
commit 2bed0c7f03
2 changed files with 37 additions and 1 deletions

View file

@ -31,3 +31,11 @@
.hero-heading .insignificant {
font-weight: normal;
}
.ancestors-indicator {
font-size: 70% !important;
}
.ancestors-indicator[hidden] {
opacity: 0;
pointer-events: none;
}

View file

@ -17,6 +17,7 @@ import shortenNumber from '../utils/shorten-number';
import states, { saveStatus } from '../utils/states';
import store from '../utils/store';
import useDebouncedCallback from '../utils/useDebouncedCallback';
import useScroll from '../utils/useScroll';
import useTitle from '../utils/useTitle';
const LIMIT = 40;
@ -278,6 +279,7 @@ function StatusPage({ id }) {
const hasManyStatuses = statuses.length > LIMIT;
const hasDescendants = statuses.some((s) => s.descendant);
const ancestors = statuses.filter((s) => s.ancestor);
const [heroInView, setHeroInView] = useState(true);
const onView = useDebouncedCallback(setHeroInView, 100);
@ -292,6 +294,10 @@ function StatusPage({ id }) {
location.hash = closeLink;
});
const { nearReachTop } = useScroll({
scrollableElement: scrollableRef.current,
});
return (
<div class="deck-backdrop">
<Link href={closeLink}></Link>
@ -345,7 +351,29 @@ function StatusPage({ id }) {
</span>
</span>
) : (
'Status'
<>
Status{' '}
<button
type="button"
class="ancestors-indicator light small"
onClick={(e) => {
// Scroll to top
e.preventDefault();
e.stopPropagation();
scrollableRef.current.scrollTo({
top: 0,
behavior: 'smooth',
});
}}
hidden={!ancestors.length || nearReachTop}
>
<Icon icon="arrow-up" />
<Icon icon="comment" />{' '}
<span class="insignificant">
{shortenNumber(ancestors.length)}
</span>
</button>
</>
)}
</h1>
<div class="header-side">