Mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2025-03-21 05:18:51 +01:00
Code Issues Projects Releases Packages Wiki Activity

Tap media to toggle carousel controls

Browse source
This commit is contained in:
Lim Chee Aun 2022-12-28 19:31:08 +08:00
parent 7e3733d79e
commit 86df9fd9f8
2 changed files with 15 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/app.css
View file

@ -505,6 +505,9 @@ a.mention span {
text-align: center; text-align: center;
pointer-events: none; pointer-events: none;
} }
:is(.carousel-top-controls, .carousel-controls)[hidden] {
opacity: 0;
}
button.carousel-button, button.carousel-button,
button.carousel-dot { button.carousel-dot {
@ -549,6 +552,9 @@ button.carousel-dot[disabled].active {
transform: translateY(100%); transform: translateY(100%);
transition: transform 0.2s ease-in-out; transition: transform 0.2s ease-in-out;
} }
:is(.carousel-top-controls, .carousel-controls)[hidden] {
opacity: 1;
}
.carousel:hover + .carousel-top-controls, .carousel:hover + .carousel-top-controls,
.carousel:hover + .carousel-top-controls + .carousel-controls, .carousel:hover + .carousel-top-controls + .carousel-controls,
.carousel-top-controls:hover, .carousel-top-controls:hover,

11
src/components/status.jsx
View file

@ -1268,6 +1268,8 @@ function Carousel({ mediaAttachments, index = 0, onClose = () => {} }) {
} }
}, 100); }, 100);
const [showControls, setShowControls] = useState(false);
return ( return (
<> <>
<div <div
@ -1301,13 +1303,18 @@ function Carousel({ mediaAttachments, index = 0, onClose = () => {} }) {
root={carouselRef.current} root={carouselRef.current}
threshold={1} threshold={1}
onChange={(inView) => onSnap(inView, i)} onChange={(inView) => onSnap(inView, i)}
onClick={(e) => {
if (e.target !== e.currentTarget) {
setShowControls(!showControls);
}
}}
> >
<Media media={media} showOriginal /> <Media media={media} showOriginal />
</InView> </InView>
); );
})} })}
</div> </div>
<div class="carousel-top-controls"> <div class="carousel-top-controls" hidden={!showControls}>
<span /> <span />
<button <button
type="button" type="button"
@ -1318,7 +1325,7 @@ function Carousel({ mediaAttachments, index = 0, onClose = () => {} }) {
</button> </button>
</div> </div>
{mediaAttachments?.length > 1 && ( {mediaAttachments?.length > 1 && (
<div class="carousel-controls"> <div class="carousel-controls" hidden={!showControls}>
<button <button
type="button" type="button"
class="carousel-button plain2" class="carousel-button plain2"