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. 140
      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,16 +13,22 @@ const Header = ({
onLearningToggle, onLearningToggle,
title, title,
}: Props) => { }: Props) => {
const [isOpen, setIsOpen] = useState(false);
const toggle = () => setIsOpen(!isOpen);
return ( return (
<>
<Wrapper> <Wrapper>
<Layout> <Layout>
<AutoLayout style={{ backgroundColor: "#009AA8" }}> <AutoLayout style={{ backgroundColor: "#009AA8" }}>
<nav style={{ display: "flex", marginLeft: "16px" }}> <nav style={{ display: "flex", marginLeft: "16px" }}>
<nav onClick={toggle} style={{ display: "flex" }} id="toggler">
<Img <Img
src="/react-epub-viewer/images/Setting.svg" src="/react-epub-viewer/images/Setting.svg"
onClick={onOptionToggle as any} onClick={onOptionToggle as any}
alt="Logo" alt="Logo"
/> />
</nav>
<Img <Img
src="/react-epub-viewer/images/Edit.svg" src="/react-epub-viewer/images/Edit.svg"
alt="Logo" alt="Logo"
@ -39,8 +47,7 @@ const Header = ({
> >
<Item text={title as any} /> <Item text={title as any} />
<span style={{ color: "#fff", marginRight: "10px" }}>|</span> <span style={{ color: "#fff", marginRight: "10px" }}>|</span>
<p style={{ margin: "0", color: "#fff" }}> <p style={{ margin: "0", color: "#fff" }}></p>
</p>
<Logo /> <Logo />
<Img <Img
src="/react-epub-viewer/images/menu.svg" src="/react-epub-viewer/images/menu.svg"
@ -54,6 +61,8 @@ const Header = ({
</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,6 +187,8 @@ const Reader = ({ url, loadingView }: Props) => {
}} }}
> >
{window.innerWidth < 768 ? ( {window.innerWidth < 768 ? (
<>
<nav onClick={() => setCountPage(CountPage + 1)}>
<button <button
style={{ style={{
opacity: "0", opacity: "0",
@ -197,10 +203,19 @@ const Reader = ({ url, loadingView }: Props) => {
> >
<ArrowBackIosRoundedIcon /> <ArrowBackIosRoundedIcon />
</button> </button>
</nav>
</>
) : ( ) : (
<>
<nav
style={{ display: "flex" }}
onClick={() => setCountPage(CountPage + 1)}
>
<button onClick={() => onPageMove("NEXT")}> <button onClick={() => onPageMove("NEXT")}>
<ArrowBackIosRoundedIcon /> <ArrowBackIosRoundedIcon />
</button> </button>
</nav>
</>
)} )}
<nav style={{ overflow: "hidden" }}> <nav style={{ overflow: "hidden" }}>
@ -218,6 +233,8 @@ const Reader = ({ url, loadingView }: Props) => {
/> />
</nav> </nav>
{window.innerWidth < 768 ? ( {window.innerWidth < 768 ? (
<>
<nav onClick={() => setCountPage(CountPage - 1)}>
<button <button
style={{ style={{
opacity: "0", opacity: "0",
@ -231,14 +248,24 @@ const Reader = ({ url, loadingView }: Props) => {
> >
<ArrowForwardIosRoundedIcon /> <ArrowForwardIosRoundedIcon />
</button> </button>
</nav>
</>
) : ( ) : (
<>
<nav
style={{ display: "flex" }}
onClick={() => setCountPage(CountPage - 1)}
>
<button onClick={() => onPageMove("PREV")}> <button onClick={() => onPageMove("PREV")}>
<ArrowForwardIosRoundedIcon /> <ArrowForwardIosRoundedIcon />
</button> </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,43 +144,7 @@ const Option = (
ref={ref} ref={ref}
> >
<OptionLayout> <OptionLayout>
<Setting/> <ControlIconBtnWrapper title="نحوه دیدن صفحه">
</OptionLayout>
</Wrapper>
)}
</>
);
};
interface Props {
control: MenuControl;
bookStyle: BookStyle;
bookOption: BookOption;
bookFlow: BookFlow;
onToggle: () => void;
emitEvent: () => void;
onBookStyleChange: (bookStyle: BookStyle) => void;
onBookOptionChange: (bookOption: BookOption) => void;
}
type SliderType =
| "FontSize"
| "LineHeight"
| "MarginHorizontal"
| "MarginVertical";
type ViewType = {
active: boolean;
spread: boolean;
};
export default React.forwardRef(Option);
{/* <ControlIconBtnWrapper title="View Direction">
<ControlIconBtn <ControlIconBtn
type="ScrollHorizontal" type="ScrollHorizontal"
alt="Horizontal View" alt="Horizontal View"
@ -192,31 +160,31 @@ export default React.forwardRef(Option);
onClick={() => onClickDirection("Vertical")} onClick={() => onClickDirection("Vertical")}
/> />
</ControlIconBtnWrapper> </ControlIconBtnWrapper>
<ControlIconBtnWrapper title="View Spread"> <ControlIconBtnWrapper title="حالت صفحه">
<ControlIconBtn <ControlIconBtn
type="BookOpen" type="BookOpen"
alt="Two Page View" alt="دو صفحه"
active={viewType.active} active={viewType.active}
isSelected={viewType.spread} isSelected={viewType.spread}
onClick={() => onClickViewType(true)} onClick={() => onClickViewType(true)}
/> />
<ControlIconBtn <ControlIconBtn
type="BookClose" type="BookClose"
alt="One Page View" alt="تک صفحه"
active={viewType.active} active={viewType.active}
isSelected={!viewType.spread} isSelected={!viewType.spread}
onClick={() => onClickViewType(false)} onClick={() => onClickViewType(false)}
/> />
</ControlIconBtnWrapper> </ControlIconBtnWrapper>
<OptionDropdown <OptionDropdown
title="Font" title="فونت"
defaultValue={fontFamily} defaultValue={fontFamily}
valueList={["Nazanin", "Sans"]} valueList={["Nazanin", "Sans"]}
onSelect={onSelectFontFamily} onSelect={onSelectFontFamily}
/> />
<OptionSlider <OptionSlider
active={true} active={true}
title="Size" title="اندازه"
minValue={8} minValue={8}
maxValue={36} maxValue={36}
defaultValue={fontSize} defaultValue={fontSize}
@ -225,14 +193,27 @@ onChange={(e) => onChangeSlider("FontSize", e)}
/> />
<OptionSlider <OptionSlider
active={true} active={true}
title="Line height" title="فاصله ی بین خط ها"
minValue={1} minValue={1}
maxValue={3} maxValue={3}
defaultValue={lineHeight} defaultValue={lineHeight}
step={0.1} step={0.1}
onChange={(e) => onChangeSlider("LineHeight", e)} onChange={(e) => onChangeSlider("LineHeight", e)}
/> />
<OptionSlider <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} active={true}
title="Horizontal margin" title="Horizontal margin"
minValue={0} minValue={0}
@ -240,8 +221,8 @@ maxValue={100}
defaultValue={marginHorizontal} defaultValue={marginHorizontal}
step={1} step={1}
onChange={(e) => onChangeSlider("MarginHorizontal", e)} onChange={(e) => onChangeSlider("MarginHorizontal", e)}
/> /> */}
<OptionSlider {/* <OptionSlider
active={bookFlow === "paginated"} active={bookFlow === "paginated"}
title="Vertical margin" title="Vertical margin"
minValue={0} minValue={0}
@ -250,3 +231,70 @@ defaultValue={marginVertical}
step={1} step={1}
onChange={(e) => onChangeSlider("MarginVertical", e)} onChange={(e) => onChangeSlider("MarginVertical", e)}
/> */} /> */}
</OptionLayout>
</Wrapper>
)}
</>
);
};
interface Props {
control: MenuControl;
bookStyle: BookStyle;
bookOption: BookOption;
bookFlow: BookFlow;
onToggle: () => void;
emitEvent: () => void;
onBookStyleChange: (bookStyle: BookStyle) => 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 =
| "FontSize"
| "LineHeight"
| "MarginHorizontal"
| "MarginVertical";
type ViewType = {
active: boolean;
spread: boolean;
};
export default React.forwardRef(Option);

@ -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