xmj/element-call
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Merge pull request #1054 from robintown/local-feed-contrast

Browse source 
Use a more noticeable shadow when displaying one tile on top another
This commit is contained in:
Robin 2023-05-13 13:54:12 -04:00 • committed by GitHub
commit 1c9b2a24d9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 19 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

7
src/video-grid/VideoTile.tsx
View file

@ -47,6 +47,7 @@ interface Props {
opacity?: SpringValue<number>;
scale?: SpringValue<number>;
shadow?: SpringValue<number>;
shadowSpread?: SpringValue<number>;
zIndex?: SpringValue<number>;
x?: SpringValue<number>;
y?: SpringValue<number>;
@ -79,6 +80,7 @@ export const VideoTile = forwardRef<HTMLElement, Props>(
opacity,
scale,
shadow,
shadowSpread,
zIndex,
x,
y,
@ -141,9 +143,6 @@ export const VideoTile = forwardRef<HTMLElement, Props>(
style={{
opacity,
scale,
boxShadow: shadow?.to(
(s) => `rgba(0, 0, 0, 0.5) 0px ${s}px ${2 * s}px 0px`
),
zIndex,
x,
y,
@ -152,6 +151,8 @@ export const VideoTile = forwardRef<HTMLElement, Props>(
// but React's types say no
"--tileWidth": width?.to((w) => `${w}px`),
"--tileHeight": height?.to((h) => `${h}px`),
"--tileShadow": shadow?.to((s) => `${s}px`),
"--tileShadowSpread": shadowSpread?.to((s) => `${s}px`),
}}
ref={ref as ForwardedRef<HTMLDivElement>}
data-testid="videoTile"