3 botton in footer finished

demo
taha12322 3 years ago
parent d5922b785e
commit 741b12261b
  1. 4
      src/components/style/footerStyle.scss
  2. 65
      src/containers/Footer.tsx
  3. 41
      src/containers/Reader.tsx
  4. 4
      src/containers/menu/Option.tsx

@ -0,0 +1,4 @@
.icons-disable {
opacity: 0.3;
cursor: auto;
}

@ -5,9 +5,15 @@ import Item from "components/footer/Item";
// import MoveBtn from "components/footer/MoveBtn";
import styled from "styled-components";
import ProgressBar from "../components/footer/progressBar";
import onePage from "../components/image/Document.svg";
import twoPage from "../components/image/Pages.svg";
import { BookCloseIcon, BookOpenIcon, ScrollVerticalIcon } from "lib/svg";
import {
BookCloseIcon,
BookOpenIcon,
ScrollVerticalIcon,
ScrollHorizontalIcon,
} from "lib/svg";
// import style
import "../components/style/footerStyle.scss";
const Footer = ({
// title,
@ -15,12 +21,19 @@ const Footer = ({
totalPage,
// onPageMove,
CountPage,
onClickDirection,
onClickViewType,
onBookOptionChange,
bookOption,
}: Props) => {
const [Icon, setIcon] = useState(false);
const changeIcone = () => {
setIcon(!Icon);
};
const [toggleIcon, setToggleIcon] = useState(true);
return (
<>
<Wrapper>
@ -39,10 +52,44 @@ const Footer = ({
<nav onClick={() => changeIcone()} className="nav-icon ">
{window.innerWidth > 768 ? (
<div className="display-icon" style={{ cursor: "pointer" }}>
<nav style={{ width: "65px" , display: 'flex' }}>
<BookOpenIcon />
<BookCloseIcon />
<ScrollVerticalIcon />
<nav style={{ width: "65px", display: "flex" }}>
<BookOpenIcon
className={`${toggleIcon ? "icons-disable" : ""}`}
onClick={() => onClickViewType(true)}
/>
<BookCloseIcon
className={`${toggleIcon ? "icons-disable" : ""}`}
onClick={() => onClickViewType(false)}
/>
{toggleIcon === true ? (
<nav
style={{ width: "65px" }}
onClick={() => setToggleIcon(false)}
>
<ScrollVerticalIcon
onClick={() =>
onBookOptionChange({
...bookOption,
flow: "paginated",
})
}
/>
</nav>
) : (
<nav
style={{ width: "65px" }}
onClick={() => setToggleIcon(true)}
>
<ScrollHorizontalIcon
onClick={() =>
onBookOptionChange({
...bookOption,
flow: "scrolled-doc",
})
}
/>
</nav>
)}
</nav>
</div>
) : null}
@ -79,10 +126,14 @@ const Button = styled.button`
`;
interface Props {
onBookOptionChange: any;
onClickViewType: any;
onClickDirection: any;
title: string;
nowPage: number;
totalPage: number;
CountPage: number;
bookOption: any;
onPageMove: (type: "PREV" | "NEXT") => void;
}

@ -93,7 +93,6 @@ const Reader = ({ url, loadingView }: Props) => {
const node =
iframe && iframe.contentWindow && iframe.contentWindow.document;
// node && node.head && node.head.appendChild(new_style_element);
console.log(node);
};
const onBookInfoChange = (book: Book) => {
loadFont();
@ -168,6 +167,41 @@ const Reader = ({ url, loadingView }: Props) => {
// setsettingicon(!settingicon);
// };
const [isScrollHorizontal, setIsScrollHorizontal] = useState(true);
const onClickDirection = (type: "Horizontal" | "Vertical") => {
if (type === "Horizontal") {
onBookOptionChange({
...bookOption,
flow: "paginated",
});
} else if (type === "Vertical") {
onBookOptionChange({
...bookOption,
flow: "scrolled-doc",
});
}
};
console.log(isScrollHorizontal)
const [viewType, setViewType] = useState({
spread: true,
});
const onClickViewType = (isSpread: boolean) => {
if (isSpread) {
setViewType({ ...viewType, spread: true });
onBookOptionChange({
...bookOption,
spread: "auto",
});
} else {
setViewType({ ...viewType, spread: false });
onBookOptionChange({
...bookOption,
spread: "none",
});
}
};
const [CountPage, setCountPage] = useState(0);
const [isOpen, setIsOpen] = useState(false);
@ -276,6 +310,10 @@ const Reader = ({ url, loadingView }: Props) => {
</nav>
<Footer
bookOption={bookOption}
onBookOptionChange={onBookOptionChange}
onClickViewType={onClickViewType}
onClickDirection={onClickDirection}
CountPage={CountPage}
title={currentLocation.chapterName}
nowPage={currentLocation.currentPage}
@ -342,6 +380,7 @@ interface Props {
loadingView?: React.ReactNode;
isOpen?: any;
setIsOpen?: any;
setIsScrollHorizontal?: any;
}
export default ReaderWrapper;

@ -41,8 +41,8 @@ const Option = (
const [marginVertical, setMarginVertical] = useState<number>(
bookStyle.marginVertical
);
const [isScrollHorizontal, setIsScrollHorizontal] = useState<boolean>(true);
const [viewType, setViewType] = useState<ViewType>({
const [isScrollHorizontal, setIsScrollHorizontal] = useState(true);
const [viewType, setViewType] = useState({
active: true,
spread: true,
});

Loading…
Cancel
Save