external/hydra
1
0
Fork 0
mirror of https://github.com/hydralauncher/hydra.git synced 2025-03-09 15:40:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: adding right content to text field

Browse source
This commit is contained in:
Chubby Granny Chaser 2024-06-12 18:19:38 +01:00
parent 55d1bfb34d
commit 50665b4472
No known key found for this signature in database
10 changed files with 123 additions and 118 deletions
Download patch file Download diff file Expand all files Collapse all files

18
src/renderer/src/pages/game-details/game-details-content.tsx
View file

@ -13,7 +13,10 @@ import * as styles from "./game-details.css";
import { useTranslation } from "react-i18next";
import { gameDetailsContext } from "@renderer/context";
const HERO_ANIMATION_THRESHOLD = 25;
export function GameDetailsContent() {
const heroRef = useRef<HTMLDivElement | null>(null);
const containerRef = useRef<HTMLDivElement | null>(null);
const [isHeaderStuck, setIsHeaderStuck] = useState(false);
@ -42,14 +45,19 @@ export function GameDetailsContent() {
}, [objectID]);
const onScroll: React.UIEventHandler<HTMLElement> = (event) => {
const scrollY = (event.target as HTMLDivElement).scrollTop;
const opacity = Math.max(0, 1 - scrollY / styles.HERO_HEIGHT);
const heroHeight = heroRef.current?.clientHeight ?? styles.HERO_HEIGHT;
if (scrollY >= styles.HERO_HEIGHT && !isHeaderStuck) {
const scrollY = (event.target as HTMLDivElement).scrollTop;
const opacity = Math.max(
0,
1 - scrollY / (heroHeight - HERO_ANIMATION_THRESHOLD)
);
if (scrollY >= heroHeight && !isHeaderStuck) {
setIsHeaderStuck(true);
}
if (scrollY <= styles.HERO_HEIGHT && isHeaderStuck) {
if (scrollY <= heroHeight && isHeaderStuck) {
setIsHeaderStuck(false);
}
@ -70,7 +78,7 @@ export function GameDetailsContent() {
onScroll={onScroll}
className={styles.container}
>
<div className={styles.hero}>
<div ref={heroRef} className={styles.hero}>
<div
style={{
backgroundColor: gameColor,