header
footer
demo
taha12322 3 years ago
parent 78f4b96430
commit fe9efa7128
  1. 16
      src/components/Setting/FontSize/fontsize.js
  2. 14
      src/components/Setting/LineHeight/lineheight.js
  3. 2
      src/components/footer/progressBar.js
  4. 6
      src/components/nav/BookInfo.tsx
  5. 4
      src/components/style/footerStyle.scss
  6. 5
      src/components/style/slider.scss
  7. 20
      src/containers/Footer.tsx
  8. 2
      src/containers/Header.tsx
  9. 20
      src/containers/Reader.tsx
  10. 1
      src/containers/menu/Nav.tsx
  11. 4
      src/containers/menu/Option.tsx
  12. 7
      src/lib/styles/readerStyle.css
  13. 1
      src/types/book.ts

@ -34,11 +34,21 @@ function Display(props) {
const Fontsize = (props) => {
const { bookStyle, setBookStyle } = props;
// const [countersize, setCounter ] = useState(1)
const incrementCounter = () =>
const incrementCounter = () => {
if (bookStyle.fontSize !== 20) {
setBookStyle({ ...bookStyle, fontSize: bookStyle.fontSize + 1 });
let decrementCounter = () =>
setBookStyle({ ...bookStyle, fontSize: bookStyle.fontSize - 1 });
} else {
return;
}
};
let decrementCounter = () => {
if (bookStyle.fontSize !== 10) {
setBookStyle({ ...bookStyle, fontSize: bookStyle.fontSize - 1 });
} else {
return;
}
};
return (
<div className="nav-fontBtn">

@ -37,16 +37,26 @@ const Lineheight = (props) => {
const { setBookStyle, bookStyle } = props;
// const [counterline, setcounterline] = useState(1);
const incrementCounter = () =>
const incrementCounter = () => {
if (bookStyle.lineHeight !== 2) {
setBookStyle({
...bookStyle,
lineHeight: Math.round(bookStyle.lineHeight * 5) / 5 + 0.2,
});
let decrementCounter = () =>
} else {
return;
}
};
let decrementCounter = () => {
if (bookStyle.lineHeight !== 1) {
setBookStyle({
...bookStyle,
lineHeight: Math.round(bookStyle.lineHeight * 5) / 5 - 0.2,
});
} else {
return;
}
};
// if (counterline <= 1) {
// decrementCounter = () => setcounterline(1);

@ -50,7 +50,7 @@ export default function ProgressBar(props) {
value={CountPage}
max={100}
min={1}
marks={true}
// marks={true}
/>
</div>
);

@ -1,9 +1,9 @@
import styled from 'styled-components'
const BookInfo = ({src="", title ,publisher, author}: Props) => {
const BookInfo = ({title ,publisher, author}: Props) => {
return (
<Container>
<BookImg src={src} alt={title} />
{/* <BookImg src={src} alt={title} /> */}
<BookContent>
<Title>{title}</Title>
<Info>{publisher}</Info>
@ -41,7 +41,7 @@ const Info = styled.div`
`;
interface Props {
src: string;
// src: string;
title: string;
publisher: string;
author: string;

@ -21,6 +21,10 @@
}
}
.nav-footer-item{
margin-right: 1.5rem;
}
.active{
border-radius: 20%;
width: 65px;

@ -1,3 +1,5 @@
@import './colors';
.root {
width: 900px;
}
@ -5,6 +7,7 @@
@media screen and (max-width: 1024px) {
.root {
width: 800px;
}
}
@ -38,8 +41,6 @@
}
}
//1024 => 800
//768 => 600
//530 => 390

@ -38,7 +38,6 @@ const Footer = ({
if (active === 1 || 2) {
setActive(3);
}
};
return (
<>
@ -58,10 +57,14 @@ const Footer = ({
<nav onClick={() => changeIcone()} className="nav-icon">
{window.innerWidth > 768 ? (
<div className="display-icon" style={{ cursor: "pointer" }}>
<nav style={{ width: "65px", display: "flex" }}>
<nav
style={{ width: "65px", marginLeft: "1rem", display: "flex" }}
>
<nav
className={`${active === 1 ? "active" : null} icon`}
onClick={toggleIcon ? () => setActive(3): () => setActive(1)}
onClick={
toggleIcon ? () => setActive(3) : () => setActive(1)
}
>
<BookOpenIcon
className={`${toggleIcon ? "icons-disable" : ""}`}
@ -70,7 +73,9 @@ const Footer = ({
</nav>
<nav
className={`${active === 2 ? "active" : null} icon`}
onClick={toggleIcon ? () => setActive(3): () => setActive(2)}
onClick={
toggleIcon ? () => setActive(3) : () => setActive(2)
}
>
<BookCloseIcon
className={`${toggleIcon ? "icons-disable" : ""}`}
@ -121,7 +126,10 @@ const Footer = ({
<ProgressBar CountPage={CountPage} />
{toggleIcon === true ? (
<nav
style={{ width: "25px" }}
style={{
width: "25px",
marginLeft: "1rem",
}}
onClick={() => setToggleIcon(false)}
>
<ScrollVerticalIcon
@ -135,7 +143,7 @@ const Footer = ({
</nav>
) : (
<nav
style={{ width: "25px" }}
style={{ width: "25px", marginLeft: "1rem" }}
onClick={() => setToggleIcon(true)}
>
<ScrollHorizontalIcon

@ -35,10 +35,10 @@ const Header = ({
alt="Logo"
onClick={onLearningToggle as any}
/>
</nav>
<nav>
{window.innerWidth > 768 ? <ButtonB>خرید کتاب</ButtonB> : null}
</nav>
</nav>
<nav
style={{
display: "flex",

@ -51,7 +51,8 @@ const Reader = ({ url, loadingView }: Props) => {
const [bookStyle, setBookStyle] = useState<BookStyle>({
fontFamily: "Sans",
fontSize: 18,
color: "red",
fontSize: 14,
lineHeight: 1.4,
marginHorizontal: 15,
marginVertical: 5,
@ -219,17 +220,17 @@ const Reader = ({ url, loadingView }: Props) => {
// ];
const readyColors = [
{ name: "dark-white", value: "#121212" },
{ name: "light-white", value: "#fff" },
{ name: "dark-blue", value: "#5858d3" },
{ name: "dark-brown", value: "#af622e" },
{ name: "light-brown", value: "#fff4e1" },
{ name: "light-blue", value: "#C3DDFF" },
{ name: "dark-white", bgColor: "#4e4e4e", color: "#fff" },
{ name: "light-white", bgColor: "#fff", color: "#292929" },
{ name: "dark-blue", bgColor: "#5858d3", color: "#fff" },
{ name: "dark-brown", bgColor: "#af622e", color: "#fff4e1" },
{ name: "light-brown", bgColor: "#fff4e1", color: "#af622e" },
{ name: "light-blue", bgColor: "#C3DDFF", color: "#5858df" },
];
const colorHandler = (color: any) => {
let myColor = readyColors.filter((item) => item.name === color);
return myColor[0].value;
return myColor[0].bgColor;
};
return (
@ -256,6 +257,7 @@ const Reader = ({ url, loadingView }: Props) => {
<nav
style={{
backgroundColor: colorHandler(color),
color: "green",
display: "flex",
justifyContent: "center",
paddingTop: "1rem",
@ -293,7 +295,7 @@ const Reader = ({ url, loadingView }: Props) => {
</>
)}
<nav style={{ overflow: "hidden" }}>
<nav className="nav-book">
<ReactEpubViewer
url={url}
viewerLayout={viewerLayout}

@ -29,7 +29,6 @@ const Nav = ({ control, onToggle, onLocation }: Props, ref: any) => {
{control.display && (
<Wrapper title="فهرست" show={control.open} onClose={onToggle} ref={ref}>
<BookInfo
src={book.coverURL}
title={book.title}
publisher={book.publisher}
author={book.author}

@ -19,6 +19,7 @@ import styled from "styled-components";
const Option = (
{
control,
bookStyle,
bookOption,
@ -117,8 +118,10 @@ const Option = (
// TODO Fix the infinite re-rendering issue, when inlcude `onBookStyleChange` to dependencies array.
/* eslint-disable */
useEffect(() => {
let color = "red";
const timer = window.setTimeout(() => {
onBookStyleChange({
color,
fontFamily,
fontSize,
lineHeight,
@ -243,6 +246,7 @@ interface Props {
bookStyle: BookStyle;
bookOption: BookOption;
bookFlow: BookFlow;
//color: string;
onToggle: () => void;
emitEvent: () => void;
onBookStyleChange: (bookStyle: BookStyle) => void;

@ -1,3 +1,5 @@
a {
text-decoration: none;
}
@ -22,3 +24,8 @@ input {
.epub-highlight:hover {
fill-opacity: 0.4;
}
.nav-book{
overflow: hidden;
color: red !important;
}

@ -33,6 +33,7 @@ export type BookStyle = {
fontFamily: BookFontFamily;
fontSize: number;
lineHeight: number;
color: string;
marginHorizontal: number;
marginVertical: number;
};

Loading…
Cancel
Save