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. 13
      src/containers/Header.tsx
  13. 29
      src/containers/Reader.tsx
  14. 208
      src/containers/menu/Option.tsx
  15. 5
      yarn.lock

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

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

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

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

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

@ -12,6 +12,10 @@ const Wrapper = styled.div`
align-items: center;
justify-content: center;
background-color: ${palette.white};
$ < span {
color: #000 ;
}
`;
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 {
& > span {
color: ${palette.blue3};
margin-left: 12px;
color: rgb(0, 154, 168);
margin-right: 12px;
}
}

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

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

@ -3,12 +3,31 @@ import Wrapper from "components/footer/Wrapper";
import Item from "components/footer/Item";
import MoveBtn from "components/footer/MoveBtn";
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 (
<>
<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}
</Wrapper>
</>
@ -30,6 +49,7 @@ interface Props {
title: string;
nowPage: number;
totalPage: number;
CountPage: number;
onPageMove: (type: "PREV" | "NEXT") => void;
}

@ -1,9 +1,11 @@
// components
import { useState } from "react";
import styled from "styled-components";
import Wrapper from "components/header/Wrapper";
import Layout, { AutoLayout } from "components/header/Layout";
import Logo from "components/header/Logo";
import Item from "components/footer/Item";
import Setting from "components/Setting/setting";
const Header = ({
onNavToggle,
@ -11,16 +13,22 @@ const Header = ({
onLearningToggle,
title,
}: Props) => {
const [isOpen, setIsOpen] = useState(false);
const toggle = () => setIsOpen(!isOpen);
return (
<>
<Wrapper>
<Layout>
<AutoLayout style={{ backgroundColor: "#009AA8" }}>
<nav style={{ display: "flex", marginLeft: "16px" }}>
<nav onClick={toggle} style={{ display: "flex" }} id="toggler">
<Img
src="/react-epub-viewer/images/Setting.svg"
onClick={onOptionToggle as any}
alt="Logo"
/>
</nav>
<Img
src="/react-epub-viewer/images/Edit.svg"
alt="Logo"
@ -39,8 +47,7 @@ const Header = ({
>
<Item text={title as any} />
<span style={{ color: "#fff", marginRight: "10px" }}>|</span>
<p style={{ margin: "0", color: "#fff" }}>
</p>
<p style={{ margin: "0", color: "#fff" }}></p>
<Logo />
<Img
src="/react-epub-viewer/images/menu.svg"
@ -54,6 +61,8 @@ const Header = ({
</AutoLayout>
</Layout>
</Wrapper>
<Setting isOpen={isOpen}/>
</>
);
};

@ -63,7 +63,7 @@ const Reader = ({ url, loadingView }: Props) => {
});
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 {
selection,
@ -166,15 +166,19 @@ const Reader = ({ url, loadingView }: Props) => {
setsettingicon(!settingicon);
};
const [CountPage, setCountPage] = useState(0);
return (
<>
<ViewerWrapper>
<Header
title={currentLocation.chapterName}
onNavToggle={onNavToggle}
onOptionToggle={onOptionToggle}
onLearningToggle={onLearningToggle}
/>
<nav
style={{
display: "flex",
@ -183,6 +187,8 @@ const Reader = ({ url, loadingView }: Props) => {
}}
>
{window.innerWidth < 768 ? (
<>
<nav onClick={() => setCountPage(CountPage + 1)}>
<button
style={{
opacity: "0",
@ -197,10 +203,19 @@ const Reader = ({ url, loadingView }: Props) => {
>
<ArrowBackIosRoundedIcon />
</button>
</nav>
</>
) : (
<>
<nav
style={{ display: "flex" }}
onClick={() => setCountPage(CountPage + 1)}
>
<button onClick={() => onPageMove("NEXT")}>
<ArrowBackIosRoundedIcon />
</button>
</nav>
</>
)}
<nav style={{ overflow: "hidden" }}>
@ -218,6 +233,8 @@ const Reader = ({ url, loadingView }: Props) => {
/>
</nav>
{window.innerWidth < 768 ? (
<>
<nav onClick={() => setCountPage(CountPage - 1)}>
<button
style={{
opacity: "0",
@ -231,14 +248,24 @@ const Reader = ({ url, loadingView }: Props) => {
>
<ArrowForwardIosRoundedIcon />
</button>
</nav>
</>
) : (
<>
<nav
style={{ display: "flex" }}
onClick={() => setCountPage(CountPage - 1)}
>
<button onClick={() => onPageMove("PREV")}>
<ArrowForwardIosRoundedIcon />
</button>
</nav>
</>
)}
</nav>
<Footer
CountPage={CountPage}
title={currentLocation.chapterName}
nowPage={currentLocation.currentPage}
totalPage={currentLocation.totalPage}

@ -11,6 +11,10 @@ import ControlIconBtn from "components/option/ControlIconBtn";
import { BookStyle, BookFontFamily, BookFlow } from "types/book";
import { MenuControl } from "lib/hooks/useMenu";
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";
const Option = (
@ -140,10 +144,94 @@ const Option = (
ref={ref}
>
<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>
</Wrapper>
)}
</>
@ -161,6 +249,43 @@ interface Props {
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 =
| "FontSize"
| "LineHeight"
@ -173,80 +298,3 @@ type ViewType = {
};
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"
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:
version "1.1.11"
resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"

Loading…
Cancel
Save