Web:Viewer Fixed navigation button

This commit is contained in:
Akmal Isomadinov 2023-04-29 21:53:05 +05:00
parent 9fed795cca
commit 86d4fd470f
3 changed files with 9 additions and 4 deletions

View File

@ -2,6 +2,7 @@ import styled from "styled-components";
type StyledSwitchToolbarProps = { type StyledSwitchToolbarProps = {
left?: boolean; left?: boolean;
isPdfFIle?: boolean;
}; };
const StyledSwitchToolbar = styled.div<StyledSwitchToolbarProps>` const StyledSwitchToolbar = styled.div<StyledSwitchToolbarProps>`
@ -13,7 +14,8 @@ const StyledSwitchToolbar = styled.div<StyledSwitchToolbarProps>`
display: block; display: block;
opacity: 0; opacity: 0;
transition: all 0.3s; transition: all 0.3s;
${(props) => (props.left ? "left: 0" : "right: 0")}; ${(props) =>
props.left ? "left: 0" : props.isPdfFIle ? "right: 20px" : "right: 0"};
&:hover { &:hover {
cursor: pointer; cursor: pointer;
opacity: 1; opacity: 1;

View File

@ -8,11 +8,12 @@ import MediaNextIcon from "PUBLIC_DIR/images/viewer.next.react.svg";
type NextButtonProps = { type NextButtonProps = {
nextClick: VoidFunction; nextClick: VoidFunction;
isPdfFIle: boolean;
}; };
function NextButton({ nextClick }: NextButtonProps) { function NextButton({ nextClick, isPdfFIle }: NextButtonProps) {
return ( return (
<StyledSwitchToolbar onClick={nextClick}> <StyledSwitchToolbar onClick={nextClick} isPdfFIle={isPdfFIle}>
<StyledButtonScroll orientation="right"> <StyledButtonScroll orientation="right">
<MediaNextIcon /> <MediaNextIcon />
</StyledButtonScroll> </StyledButtonScroll>

View File

@ -172,7 +172,9 @@ function Viewer(props: ViewerProps) {
{props.playlist.length > 1 && !isFullscreen && !isMobile && ( {props.playlist.length > 1 && !isFullscreen && !isMobile && (
<> <>
{isNotFirstElement && <PrevButton prevClick={prevClick} />} {isNotFirstElement && <PrevButton prevClick={prevClick} />}
{isNotLastElement && <NextButton nextClick={nextClick} />} {isNotLastElement && (
<NextButton isPdfFIle={props.isPdf} nextClick={nextClick} />
)}
</> </>
)} )}