slider pageNumber Button buy book Setting

not complited collaps
demo
taha12322 3 years ago
parent 16cac55ec0
commit db4037dd07
  1. 1
      package.json
  2. 10
      public/index.html
  3. 5
      src/components/Setting/setting.js
  4. 2
      src/components/contextMenu/Item.tsx
  5. 6
      src/components/footer/Item.tsx
  6. 4
      src/components/footer/Wrapper.tsx
  7. 59
      src/components/footer/progressBar.js
  8. 4
      src/components/nav/NavItem.tsx
  9. 3
      src/components/note/Layout.tsx
  10. 1
      src/components/option/Layout.tsx
  11. 24
      src/containers/Footer.tsx
  12. 91
      src/containers/Header.tsx
  13. 95
      src/containers/Reader.tsx
  14. 208
      src/containers/menu/Option.tsx
  15. 5
      yarn.lock

@ -42,6 +42,7 @@
"dependencies": { "dependencies": {
"@material-ui/core": "^4.12.3", "@material-ui/core": "^4.12.3",
"@material-ui/icons": "^4.11.2", "@material-ui/icons": "^4.11.2",
"bootstrap": "^5.1.0",
"epubjs": "^0.3.88", "epubjs": "^0.3.88",
"node-sass": "4.14.1", "node-sass": "4.14.1",
"react-epub-viewer": "^0.1.7", "react-epub-viewer": "^0.1.7",

@ -21,11 +21,17 @@
@font-face { @font-face {
font-family: "SansNum"; font-family: "SansNum";
src: url(../fonts/IRANSansWebFaNum.woff); src: url(%PUBLIC_URL%/css/IRANSansWebFaNum.woff);
} }
* , body { *,
body {
font-family: Sans, Nazanin; font-family: Sans, Nazanin;
} }
.nav-footer-item > div > span {
font-family: "SansNum" !important;
color: #000 !important;
}
</style> </style>
</head> </head>
<body> <body>

@ -1,6 +1,5 @@
import React from 'react' import React from 'react'
import { UncontrolledCollapse, Card } from 'reactstrap' import { UncontrolledCollapse, Card } from 'reactstrap'
import '../../../src/components/style/setting.scss'
import Fontstyle from './FontStyle/Fontstyle' import Fontstyle from './FontStyle/Fontstyle'
import Colors from './FontColor/colors' import Colors from './FontColor/colors'
import FontSize from './FontSize/fontsize' import FontSize from './FontSize/fontsize'
@ -8,6 +7,7 @@ import LineHeight from './LineHeight/lineheight'
const Setting = (props) => { const Setting = (props) => {
const { const {
isOpen,
setIsChecked, setIsChecked,
isChecked, isChecked,
countersize, countersize,
@ -22,8 +22,7 @@ const Setting = (props) => {
return ( return (
<> <>
<Card isOpen={isOpen}>
<Card>
<nav className="nav-content"> <nav className="nav-content">
<nav className="nav-items"> <nav className="nav-items">
<Colors <Colors

@ -13,7 +13,7 @@ const Container = styled.button`
line-height: 32px; line-height: 32px;
text-align: center; text-align: center;
font-size: 14px; font-size: 14px;
color: #ccc; color: #000;
transition: .1s ${styles.transition}; transition: .1s ${styles.transition};
background-color: rgba(0,0,0,0); background-color: rgba(0,0,0,0);
border-radius: 6px; border-radius: 6px;

@ -1,6 +1,6 @@
import styled from 'styled-components' import styled from "styled-components";
// lib // lib
import palette from 'lib/styles/palette' import palette from "lib/styles/palette";
const Item = ({ text }: Props) => { const Item = ({ text }: Props) => {
return ( return (
@ -8,7 +8,7 @@ const Item = ({ text }: Props) => {
<span>{text}</span> <span>{text}</span>
</Container> </Container>
); );
} };
const Container = styled.div` const Container = styled.div`
height: 100%; height: 100%;

@ -12,6 +12,10 @@ const Wrapper = styled.div`
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background-color: ${palette.white}; background-color: ${palette.white};
$ < span {
color: #000 ;
}
`; `;
export default Wrapper export default Wrapper

@ -0,0 +1,59 @@
import React from 'react'
import { withStyles, makeStyles } from '@material-ui/core/styles'
import Slider from '@material-ui/core/Slider'
const useStyles = makeStyles((theme) => ({
root: {
width: 500 + theme.spacing(0),
},
margin: {
height: theme.spacing(3),
},
}))
const PrettoSlider = withStyles({
root: {
color: '#009AA8',
height: '5px',
padding: 0,
direction: 'rtl !important',
},
thumb: {
height: '15px',
width: '15px',
backgroundColor: '#fff',
border: '1.5px solid currentColor',
marginTop: '-6px',
marginLeft: '-11px',
direction: 'rtl !important',
'&:focus, &:hover, &$active': {
boxShadow: 'inherit',
direction: 'rtl !important',
},
},
active: {},
track: {
height: '5px',
borderRadius: 4,
direction: 'rtl !important',
},
rail: {
height: '5px',
borderRadius: 4,
},
})(Slider)
export default function ProgressBar(props) {
const classes = useStyles()
const { CountPage } = props;
return (
<div className={classes.root}>
<PrettoSlider
track="inverted"
value={CountPage}
max={100}
min={1}
marks={true}
/>
</div>
)
}

@ -30,8 +30,8 @@ const Content = styled.button`
&:focus, &:hover { &:focus, &:hover {
& > span { & > span {
color: ${palette.blue3}; color: rgb(0, 154, 168);
margin-left: 12px; margin-right: 12px;
} }
} }

@ -6,6 +6,9 @@ const Layout = styled.div`
flex-direction: column; flex-direction: column;
box-sizing: border-box; box-sizing: border-box;
padding: 24px 0; padding: 24px 0;
&:focus, &:hover < div { {
color: rgb(0, 154, 168);
}
`; `;
export default Layout export default Layout

@ -3,6 +3,7 @@ import styled from 'styled-components'
const Wrapper = styled.div` const Wrapper = styled.div`
box-sizing: border-box; box-sizing: border-box;
padding: 24px; padding: 24px;
direction: ltr;
`; `;
export default Wrapper export default Wrapper

@ -3,12 +3,31 @@ import Wrapper from "components/footer/Wrapper";
import Item from "components/footer/Item"; import Item from "components/footer/Item";
import MoveBtn from "components/footer/MoveBtn"; import MoveBtn from "components/footer/MoveBtn";
import styled from "styled-components"; import styled from "styled-components";
import ProgressBar from "../components/footer/progressBar";
const Footer = ({ title, nowPage, totalPage, onPageMove }: Props) => { const Footer = ({
title,
nowPage,
totalPage,
onPageMove,
CountPage,
}: Props) => {
return ( return (
<> <>
<Wrapper> <Wrapper>
{/* <Item text={`${nowPage} / ${totalPage}`} /> */} <nav
style={{
display: "flex",
justifyContent: "space-between",
padding: "0rem 2rem",
width: "100%",
}}
>
<nav className="nav-footer-item" id="toggler">
<Item text={`${nowPage} / ${totalPage}`} />
</nav>
<ProgressBar CountPage={CountPage} />
</nav>
{window.innerWidth < 768 ? <Button>خرید کتاب</Button> : null} {window.innerWidth < 768 ? <Button>خرید کتاب</Button> : null}
</Wrapper> </Wrapper>
</> </>
@ -30,6 +49,7 @@ interface Props {
title: string; title: string;
nowPage: number; nowPage: number;
totalPage: number; totalPage: number;
CountPage: number;
onPageMove: (type: "PREV" | "NEXT") => void; onPageMove: (type: "PREV" | "NEXT") => void;
} }

@ -1,9 +1,11 @@
// components // components
import { useState } from "react";
import styled from "styled-components"; import styled from "styled-components";
import Wrapper from "components/header/Wrapper"; import Wrapper from "components/header/Wrapper";
import Layout, { AutoLayout } from "components/header/Layout"; import Layout, { AutoLayout } from "components/header/Layout";
import Logo from "components/header/Logo"; import Logo from "components/header/Logo";
import Item from "components/footer/Item"; import Item from "components/footer/Item";
import Setting from "components/Setting/setting";
const Header = ({ const Header = ({
onNavToggle, onNavToggle,
@ -11,49 +13,56 @@ const Header = ({
onLearningToggle, onLearningToggle,
title, title,
}: Props) => { }: Props) => {
const [isOpen, setIsOpen] = useState(false);
const toggle = () => setIsOpen(!isOpen);
return ( return (
<Wrapper> <>
<Layout> <Wrapper>
<AutoLayout style={{ backgroundColor: "#009AA8" }}> <Layout>
<nav style={{ display: "flex", marginLeft: "16px" }}> <AutoLayout style={{ backgroundColor: "#009AA8" }}>
<Img <nav style={{ display: "flex", marginLeft: "16px" }}>
src="/react-epub-viewer/images/Setting.svg" <nav onClick={toggle} style={{ display: "flex" }} id="toggler">
onClick={onOptionToggle as any} <Img
alt="Logo" src="/react-epub-viewer/images/Setting.svg"
/> onClick={onOptionToggle as any}
<Img alt="Logo"
src="/react-epub-viewer/images/Edit.svg" />
alt="Logo" </nav>
onClick={onLearningToggle as any} <Img
/> src="/react-epub-viewer/images/Edit.svg"
</nav> alt="Logo"
<nav> onClick={onLearningToggle as any}
{window.innerWidth > 768 ? <Button>خرید کتاب</Button> : null} />
</nav> </nav>
<nav <nav>
style={{ {window.innerWidth > 768 ? <Button>خرید کتاب</Button> : null}
display: "flex", </nav>
marginRight: "16px", <nav
alignItems: "center", style={{
}} display: "flex",
> marginRight: "16px",
<Item text={title as any} /> alignItems: "center",
<span style={{ color: "#fff", marginRight: "10px" }}>|</span> }}
<p style={{ margin: "0", color: "#fff" }}> >
</p> <Item text={title as any} />
<Logo /> <span style={{ color: "#fff", marginRight: "10px" }}>|</span>
<Img <p style={{ margin: "0", color: "#fff" }}></p>
src="/react-epub-viewer/images/menu.svg" <Logo />
onClick={onNavToggle as any} <Img
alt="Logo" src="/react-epub-viewer/images/menu.svg"
/> onClick={onNavToggle as any}
</nav> alt="Logo"
{/* <ControlBtn massege="فهرست" onClick={onNavToggle} /> */} />
{/* <ControlBtn massege="تنظیمات" onClick={onOptionToggle} /> </nav>
{/* <ControlBtn massege="فهرست" onClick={onNavToggle} /> */}
{/* <ControlBtn massege="تنظیمات" onClick={onOptionToggle} />
<ControlBtn massege="نشانه گذاری" onClick={onLearningToggle} /> */} <ControlBtn massege="نشانه گذاری" onClick={onLearningToggle} /> */}
</AutoLayout> </AutoLayout>
</Layout> </Layout>
</Wrapper> </Wrapper>
<Setting isOpen={isOpen}/>
</>
); );
}; };

@ -63,7 +63,7 @@ const Reader = ({ url, loadingView }: Props) => {
}); });
const [navControl, onNavToggle] = useMenu(navRef, 300); const [navControl, onNavToggle] = useMenu(navRef, 300);
const [optionControl, onOptionToggle, emitEvent] = useMenu(optionRef, 5000); const [optionControl, onOptionToggle, emitEvent] = useMenu(optionRef, 300);
const [learningControl, onLearningToggle] = useMenu(learningRef, 300); const [learningControl, onLearningToggle] = useMenu(learningRef, 300);
const { const {
selection, selection,
@ -166,15 +166,19 @@ const Reader = ({ url, loadingView }: Props) => {
setsettingicon(!settingicon); setsettingicon(!settingicon);
}; };
const [CountPage, setCountPage] = useState(0);
return ( return (
<> <>
<ViewerWrapper> <ViewerWrapper>
<Header <Header
title={currentLocation.chapterName} title={currentLocation.chapterName}
onNavToggle={onNavToggle} onNavToggle={onNavToggle}
onOptionToggle={onOptionToggle} onOptionToggle={onOptionToggle}
onLearningToggle={onLearningToggle} onLearningToggle={onLearningToggle}
/> />
<nav <nav
style={{ style={{
display: "flex", display: "flex",
@ -183,24 +187,35 @@ const Reader = ({ url, loadingView }: Props) => {
}} }}
> >
{window.innerWidth < 768 ? ( {window.innerWidth < 768 ? (
<button <>
style={{ <nav onClick={() => setCountPage(CountPage + 1)}>
opacity: "0", <button
position: "absolute", style={{
left: "0", opacity: "0",
width: "20%", position: "absolute",
height: "85%", left: "0",
top: "4rem", width: "20%",
zIndex: 10, height: "85%",
}} top: "4rem",
onClick={() => onPageMove("NEXT")} zIndex: 10,
> }}
<ArrowBackIosRoundedIcon /> onClick={() => onPageMove("NEXT")}
</button> >
<ArrowBackIosRoundedIcon />
</button>
</nav>
</>
) : ( ) : (
<button onClick={() => onPageMove("NEXT")}> <>
<ArrowBackIosRoundedIcon /> <nav
</button> style={{ display: "flex" }}
onClick={() => setCountPage(CountPage + 1)}
>
<button onClick={() => onPageMove("NEXT")}>
<ArrowBackIosRoundedIcon />
</button>
</nav>
</>
)} )}
<nav style={{ overflow: "hidden" }}> <nav style={{ overflow: "hidden" }}>
@ -218,27 +233,39 @@ const Reader = ({ url, loadingView }: Props) => {
/> />
</nav> </nav>
{window.innerWidth < 768 ? ( {window.innerWidth < 768 ? (
<button <>
style={{ <nav onClick={() => setCountPage(CountPage - 1)}>
opacity: "0", <button
position: "absolute", style={{
right: "0", opacity: "0",
width: "20%", position: "absolute",
height: "85%", right: "0",
top: "4rem", width: "20%",
}} height: "85%",
onClick={() => onPageMove("PREV")} top: "4rem",
> }}
<ArrowForwardIosRoundedIcon /> onClick={() => onPageMove("PREV")}
</button> >
<ArrowForwardIosRoundedIcon />
</button>
</nav>
</>
) : ( ) : (
<button onClick={() => onPageMove("PREV")}> <>
<ArrowForwardIosRoundedIcon /> <nav
</button> style={{ display: "flex" }}
onClick={() => setCountPage(CountPage - 1)}
>
<button onClick={() => onPageMove("PREV")}>
<ArrowForwardIosRoundedIcon />
</button>
</nav>
</>
)} )}
</nav> </nav>
<Footer <Footer
CountPage={CountPage}
title={currentLocation.chapterName} title={currentLocation.chapterName}
nowPage={currentLocation.currentPage} nowPage={currentLocation.currentPage}
totalPage={currentLocation.totalPage} totalPage={currentLocation.totalPage}

@ -11,6 +11,10 @@ import ControlIconBtn from "components/option/ControlIconBtn";
import { BookStyle, BookFontFamily, BookFlow } from "types/book"; import { BookStyle, BookFontFamily, BookFlow } from "types/book";
import { MenuControl } from "lib/hooks/useMenu"; import { MenuControl } from "lib/hooks/useMenu";
import { BookOption } from "types/book"; import { BookOption } from "types/book";
import * as styles from 'lib/styles/styles'
import palette from 'lib/styles/palette'
import styled, { css } from 'styled-components'
import Setting from "components/Setting/setting"; import Setting from "components/Setting/setting";
const Option = ( const Option = (
@ -140,10 +144,94 @@ const Option = (
ref={ref} ref={ref}
> >
<OptionLayout> <OptionLayout>
<Setting/> <ControlIconBtnWrapper title="نحوه دیدن صفحه">
<ControlIconBtn
type="ScrollHorizontal"
alt="Horizontal View"
active={true}
isSelected={isScrollHorizontal}
onClick={() => onClickDirection("Horizontal")}
/>
<ControlIconBtn
type="ScrollVertical"
alt="Vertical View"
active={true}
isSelected={!isScrollHorizontal}
onClick={() => onClickDirection("Vertical")}
/>
</ControlIconBtnWrapper>
<ControlIconBtnWrapper title="حالت صفحه">
<ControlIconBtn
type="BookOpen"
alt="دو صفحه"
active={viewType.active}
isSelected={viewType.spread}
onClick={() => onClickViewType(true)}
/>
<ControlIconBtn
type="BookClose"
alt="تک صفحه"
active={viewType.active}
isSelected={!viewType.spread}
onClick={() => onClickViewType(false)}
/>
</ControlIconBtnWrapper>
<OptionDropdown
title="فونت"
defaultValue={fontFamily}
valueList={["Nazanin", "Sans"]}
onSelect={onSelectFontFamily}
/>
<OptionSlider
active={true}
title="اندازه"
minValue={8}
maxValue={36}
defaultValue={fontSize}
step={1}
onChange={(e) => onChangeSlider("FontSize", e)}
/>
<OptionSlider
active={true}
title="فاصله ی بین خط ها"
minValue={1}
maxValue={3}
defaultValue={lineHeight}
step={0.1}
onChange={(e) => onChangeSlider("LineHeight", e)}
/>
<OptionTitle>رنگ ها</OptionTitle>
<BtnWrapper>
<Btn>الف</Btn>
<Btn>الف</Btn>
<Btn>الف</Btn>
<Btn>الف</Btn>
</BtnWrapper>
<BtnWrapper>
<Btn>الف</Btn>
<Btn>الف</Btn>
<Btn>الف</Btn>
<Btn>الف</Btn>
</BtnWrapper>
{/* <OptionSlider
active={true}
title="Horizontal margin"
minValue={0}
maxValue={100}
defaultValue={marginHorizontal}
step={1}
onChange={(e) => onChangeSlider("MarginHorizontal", e)}
/> */}
{/* <OptionSlider
active={bookFlow === "paginated"}
title="Vertical margin"
minValue={0}
maxValue={100}
defaultValue={marginVertical}
step={1}
onChange={(e) => onChangeSlider("MarginVertical", e)}
/> */}
</OptionLayout> </OptionLayout>
</Wrapper> </Wrapper>
)} )}
</> </>
@ -161,6 +249,43 @@ interface Props {
onBookOptionChange: (bookOption: BookOption) => void; onBookOptionChange: (bookOption: BookOption) => void;
} }
const Btn = styled.button`
position: relative;
height: 100%;
padding: 0 12px;
dispayl: flex;
align-items: center;
justify-content: center;
z-index: 0;
transition: .3s ${styles.transition};
outline: none;
&::before {
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
z-index: -1;
border-radius: 30px;
transition: .1s ${styles.transition};
background-color: rgb(0, 154, 168);
};
`;
const BtnWrapper = styled.div`
display: flex;
align-items: center;
justify-content: space-around;
padding: 8px 0;
`;
const OptionTitle = styled.div`
font-size: 14px;
font-weight: 500;
margin-bottom: 16px;
`;
type SliderType = type SliderType =
| "FontSize" | "FontSize"
| "LineHeight" | "LineHeight"
@ -173,80 +298,3 @@ type ViewType = {
}; };
export default React.forwardRef(Option); export default React.forwardRef(Option);
{/* <ControlIconBtnWrapper title="View Direction">
<ControlIconBtn
type="ScrollHorizontal"
alt="Horizontal View"
active={true}
isSelected={isScrollHorizontal}
onClick={() => onClickDirection("Horizontal")}
/>
<ControlIconBtn
type="ScrollVertical"
alt="Vertical View"
active={true}
isSelected={!isScrollHorizontal}
onClick={() => onClickDirection("Vertical")}
/>
</ControlIconBtnWrapper>
<ControlIconBtnWrapper title="View Spread">
<ControlIconBtn
type="BookOpen"
alt="Two Page View"
active={viewType.active}
isSelected={viewType.spread}
onClick={() => onClickViewType(true)}
/>
<ControlIconBtn
type="BookClose"
alt="One Page View"
active={viewType.active}
isSelected={!viewType.spread}
onClick={() => onClickViewType(false)}
/>
</ControlIconBtnWrapper>
<OptionDropdown
title="Font"
defaultValue={fontFamily}
valueList={["Nazanin", "Sans"]}
onSelect={onSelectFontFamily}
/>
<OptionSlider
active={true}
title="Size"
minValue={8}
maxValue={36}
defaultValue={fontSize}
step={1}
onChange={(e) => onChangeSlider("FontSize", e)}
/>
<OptionSlider
active={true}
title="Line height"
minValue={1}
maxValue={3}
defaultValue={lineHeight}
step={0.1}
onChange={(e) => onChangeSlider("LineHeight", e)}
/>
<OptionSlider
active={true}
title="Horizontal margin"
minValue={0}
maxValue={100}
defaultValue={marginHorizontal}
step={1}
onChange={(e) => onChangeSlider("MarginHorizontal", e)}
/>
<OptionSlider
active={bookFlow === "paginated"}
title="Vertical margin"
minValue={0}
maxValue={100}
defaultValue={marginVertical}
step={1}
onChange={(e) => onChangeSlider("MarginVertical", e)}
/> */}

@ -3301,6 +3301,11 @@ boolbase@^1.0.0, boolbase@~1.0.0:
resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e" resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
integrity sha1-aN/1++YMUes3cl6p4+0xDcwed24= integrity sha1-aN/1++YMUes3cl6p4+0xDcwed24=
bootstrap@^5.1.0:
version "5.1.0"
resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-5.1.0.tgz#543ef8f44f4b9af67b0230f19508542fec38ef55"
integrity sha512-bs74WNI9BgBo3cEovmdMHikSKoXnDgA6VQjJ7TyTotU6L7d41ZyCEEelPwkYEzsG/Zjv3ie9IE3EMAje0W9Xew==
brace-expansion@^1.1.7: brace-expansion@^1.1.7:
version "1.1.11" version "1.1.11"
resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd" resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"

Loading…
Cancel
Save