header
footer
demo
taha12322 3 years ago
parent 78f4b96430
commit fe9efa7128
  1. 18
      src/components/Setting/FontSize/fontsize.js
  2. 30
      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. 4
      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 Fontsize = (props) => {
const { bookStyle, setBookStyle } = props; const { bookStyle, setBookStyle } = props;
// const [countersize, setCounter ] = useState(1) // const [countersize, setCounter ] = useState(1)
const incrementCounter = () => const incrementCounter = () => {
setBookStyle({ ...bookStyle, fontSize: bookStyle.fontSize + 1 }); if (bookStyle.fontSize !== 20) {
let decrementCounter = () => setBookStyle({ ...bookStyle, fontSize: bookStyle.fontSize + 1 });
setBookStyle({ ...bookStyle, fontSize: bookStyle.fontSize - 1 }); } else {
return;
}
};
let decrementCounter = () => {
if (bookStyle.fontSize !== 10) {
setBookStyle({ ...bookStyle, fontSize: bookStyle.fontSize - 1 });
} else {
return;
}
};
return ( return (
<div className="nav-fontBtn"> <div className="nav-fontBtn">

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

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

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

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

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

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

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

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

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

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

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

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

Loading…
Cancel
Save