demo
taha12322 3 years ago
parent db4037dd07
commit 2d399de16d
  1. 86
      src/components/Setting/FontSize/fontsize.js
  2. 2
      src/components/Setting/FontStyle/Fontstyle.js
  3. 44
      src/components/Setting/LineHeight/lineheight.js
  4. 38
      src/components/Setting/setting.js
  5. 10
      src/components/footer/Wrapper.tsx
  6. 2
      src/components/footer/progressBar.js
  7. 8
      src/components/image/Document.svg
  8. 21
      src/components/image/line.svg
  9. 36
      src/components/style/fontStyle.scss
  10. 6
      src/components/style/fontsize.scss
  11. 24
      src/components/style/lineheight.scss
  12. 23
      src/containers/Footer.tsx
  13. 10
      src/containers/Header.tsx
  14. 6
      src/containers/Reader.tsx
  15. 1
      src/index.tsx

@ -1,47 +1,53 @@
import React from 'react'; import React, { useState } from "react";
import '../../../components/style/fontsize.scss'; import "../../../components/style/fontsize.scss";
function ButtonIncrement(props) { function ButtonIncrement(props) {
return ( return (
<p type='button' outline onClick={props.onClickFunc} style={{padding: '0px 5px'}}> <p
type="button"
outline
onClick={props.onClickFunc}
style={{ padding: "0px 5px" , color: "#009AA8" }}
>
+ +
</p> </p>
) );
} }
function ButtonDecrement(props) {
return (
<p type='button' outline onClick={props.onClickFunc} style={{padding: '0px 5px'}}>
-
</p>
)
}
function Display(props) {
return (
<label >{props.message}</label>
)
}
const Fontsize = (props) => { function ButtonDecrement(props) {
return (
<p
type="button"
outline
onClick={props.onClickFunc}
style={{ padding: "0px 5px" , color: "#009AA8" }}
>
-
</p>
);
}
const {countersize, setCounter} = props; function Display(props) {
const incrementCounter = () => setCounter(countersize + 1); return <label style={{color: "#009AA8"}}>{props.message}</label>;
let decrementCounter = () => setCounter(countersize - 1);
if(countersize <= 1) {
decrementCounter = () => setCounter(1);
}
return (
<div className='nav-fontBtn'>
<nav>
<ButtonIncrement onClickFunc={incrementCounter}/>
<Display message={countersize}/>
<ButtonDecrement onClickFunc={decrementCounter}/>
</nav>
</div>
)
} }
export default Fontsize const Fontsize = (props) => {
const [countersize, setCounter ] = useState(1)
const incrementCounter = () => setCounter(countersize + 1);
let decrementCounter = () => setCounter(countersize - 1);
if (countersize <= 1) {
decrementCounter = () => setCounter(1);
}
return (
<div className="nav-fontBtn">
<nav>
<ButtonIncrement onClickFunc={incrementCounter} />
<Display message={countersize} />
<ButtonDecrement onClickFunc={decrementCounter} />
</nav>
</div>
);
};
export default Fontsize;

@ -14,7 +14,7 @@ const Fontstyle = (props) => {
<div> <div>
<Dropdown isOpen={dropdownOpen} toggle={toggle}> <Dropdown isOpen={dropdownOpen} toggle={toggle}>
<DropdownToggle id='dropdown-btn'> <DropdownToggle id='dropdown-btn'>
<button className='btn'> <button className='btn-font'>
<p> <p>
{name === 'Sans' ? 'سانس': 'نازنین'} {name === 'Sans' ? 'سانس': 'نازنین'}
</p> </p>

@ -1,14 +1,20 @@
import React from 'react' import React, { useState } from "react";
// import {FormatLineSpacingRoundedIcon} from '@material-ui/icons/FormatLineSpacingRounded' import FormatLineSpacingRoundedIcon from "@material-ui/icons/FormatLineSpacingRounded";
import lineSpace from '../../image/lineSpace.svg' import lineSpace from "../../image/lineSpace.svg";
import '../../../components/style/lineheight.scss' import line from "../../image/line.svg";
import "../../../components/style/lineheight.scss";
function ButtonIncrement(props) { function ButtonIncrement(props) {
return ( return (
<span type="button" outline onClick={props.onClickFunc}> <img
{/* <FormatLineSpacingRoundedIcon className="line-space-icon" /> */} type="button"
</span> outline
) onClick={props.onClickFunc}
src={line}
alt="Icon"
className="line-space-icon-"
/>
);
} }
function ButtonDecrement(props) { function ButtonDecrement(props) {
@ -21,34 +27,34 @@ function ButtonDecrement(props) {
alt="Icon" alt="Icon"
className="line-space-icon-" className="line-space-icon-"
/> />
) );
} }
function Display(props) { function Display(props) {
return <label style={{ textAlign: 'center' }}>{props.message}</label> return <label className="label">{props.message}</label>;
} }
const Lineheight = (props) => { const Lineheight = () => {
const { counterline, setcounterline } = props const [counterline, setcounterline] = useState(1);
const incrementCounter = () => setcounterline(counterline + 1) const incrementCounter = () => setcounterline(counterline + 1);
let decrementCounter = () => setcounterline(counterline - 1) let decrementCounter = () => setcounterline(counterline - 1);
if (counterline <= 1) { if (counterline <= 1) {
decrementCounter = () => setcounterline(1) decrementCounter = () => setcounterline(1);
} }
return ( return (
<> <>
<div className="nav-fontBtn"> <div className="nav-fontBtn">
<nav style={{ width: '70px' }}> <nav style={{ width: "70px" }}>
<ButtonIncrement onClickFunc={incrementCounter} /> <ButtonIncrement onClickFunc={incrementCounter} />
<Display message={counterline} /> <Display message={counterline} />
<ButtonDecrement onClickFunc={decrementCounter} /> <ButtonDecrement onClickFunc={decrementCounter} />
</nav> </nav>
</div> </div>
</> </>
) );
} };
export default Lineheight export default Lineheight;

@ -1,13 +1,20 @@
import React from 'react' import React , {useState} from "react";
import { UncontrolledCollapse, Card } from 'reactstrap' import { Collapse, Card } from "reactstrap";
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";
import LineHeight from './LineHeight/lineheight' import LineHeight from "./LineHeight/lineheight";
import "../style/setting.scss";
import OptionDropdown from "../option/Dropdown";
const Setting = (props) => { const Setting = (props) => {
const { const {
BookStyle,
onSelect,
isOpen, isOpen,
valueList,
defaultValue,
title,
setIsChecked, setIsChecked,
isChecked, isChecked,
countersize, countersize,
@ -18,11 +25,11 @@ const Setting = (props) => {
name, name,
setcolor, setcolor,
color, color,
} = props } = props;
return ( return (
<> <>
<Card isOpen={isOpen}> <Collapse isOpen={isOpen}>
<Card>
<nav className="nav-content"> <nav className="nav-content">
<nav className="nav-items"> <nav className="nav-items">
<Colors <Colors
@ -39,11 +46,18 @@ const Setting = (props) => {
/> />
<FontSize countersize={countersize} setCounter={setCounter} /> <FontSize countersize={countersize} setCounter={setCounter} />
<Fontstyle name={name} setname={setname} /> <Fontstyle name={name} setname={setname} />
{/* <OptionDropdown
title="فونت"
defaultValue={fontFamily}
valueList={["Nazanin", "Sans"]}
onSelect={onSelectFontFamily}
/> */}
</nav> </nav>
</nav> </nav>
</Card> </Card>
</Collapse>
</> </>
) );
} };
export default Setting export default Setting;

@ -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 Wrapper = styled.div` const Wrapper = styled.div`
position: fixed; position: fixed;
@ -14,10 +14,8 @@ const Wrapper = styled.div`
background-color: ${palette.white}; background-color: ${palette.white};
$ < span { $ < span {
color: #000 ; color: #000;
} }
`; `;
export default Wrapper export default Wrapper;

@ -3,7 +3,7 @@ import { withStyles, makeStyles } from '@material-ui/core/styles'
import Slider from '@material-ui/core/Slider' import Slider from '@material-ui/core/Slider'
const useStyles = makeStyles((theme) => ({ const useStyles = makeStyles((theme) => ({
root: { root: {
width: 500 + theme.spacing(0), width: 900 + theme.spacing(0),
}, },
margin: { margin: {
height: theme.spacing(3), height: theme.spacing(3),

@ -0,0 +1,8 @@
<svg id="Iconly_Curved_Document" data-name="Iconly/Curved/Document" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<g id="Document" transform="translate(3.61 2.75)">
<path id="Stroke_1" data-name="Stroke 1" d="M7.22.5H0" transform="translate(4.766 12.446)" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"/>
<path id="Stroke_2" data-name="Stroke 2" d="M7.22.5H0" transform="translate(4.766 8.686)" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"/>
<path id="Stroke_3" data-name="Stroke 3" d="M2.755.5H0" transform="translate(4.766 4.927)" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"/>
<path id="Stroke_4" data-name="Stroke 4" d="M0,9.25c0,6.937,2.1,9.25,8.391,9.25s8.391-2.313,8.391-9.25S14.685,0,8.391,0,0,2.313,0,9.25Z" transform="translate(0)" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

@ -0,0 +1,21 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 22.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="-49 141 512 512" style="enable-background:new -49 141 512 512;" xml:space="preserve">
<g>
<path style="fill:#009AA8;" d="M452.501,332.88h-299c-5.896,0-10.667,4.771-10.667,10.667c0,5.896,4.771,10.667,10.667,10.667h299
c5.896,0,10.667-4.771,10.667-10.667C463.168,337.651,458.397,332.88,452.501,332.88z"/>
<path style="fill:#009AA8;" d="M452.501,439.547H152.949c-5.896,0-10.667,4.771-10.667,10.667c0,5.896,4.771,10.667,10.667,10.667
h299.552c5.896,0,10.667-4.771,10.667-10.667C463.168,444.318,458.397,439.547,452.501,439.547z"/>
<path style="fill:#009AA8;" d="M452.501,546.214h-299c-5.896,0-10.667,4.771-10.667,10.667c0,5.896,4.771,10.667,10.667,10.667h299
c5.896,0,10.667-4.771,10.667-10.667C463.168,550.984,458.397,546.214,452.501,546.214z"/>
<path style="fill:#009AA8;" d="M153.501,247.547h299c5.896,0,10.667-4.771,10.667-10.667c0-5.896-4.771-10.667-10.667-10.667h-299
c-5.896,0-10.667,4.771-10.667,10.667C142.835,242.776,147.605,247.547,153.501,247.547z"/>
<path style="fill:#009AA8;" d="M80.97,307.276c2.094,2.802,5.292,4.271,8.542,4.271c2.229,0,4.469-0.698,6.385-2.135
c4.719-3.531,5.677-10.219,2.135-14.927l-64-85.333c-4.021-5.375-13.042-5.375-17.063,0l-64,85.333
c-3.542,4.708-2.583,11.396,2.135,14.927c4.74,3.552,11.406,2.594,14.927-2.135l44.802-59.728v298.664l-44.802-59.728
c-3.542-4.74-10.219-5.698-14.927-2.135c-4.719,3.531-5.677,10.219-2.135,14.927l64,85.333c2.01,2.688,5.177,4.271,8.531,4.271
s6.521-1.583,8.531-4.271l64-85.333c3.542-4.708,2.583-11.396-2.135-14.927c-4.708-3.531-11.385-2.594-14.927,2.135l-44.802,59.728
V247.548L80.97,307.276z"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.8 KiB

@ -1,4 +1,32 @@
.nav-menu-font{ @import "./colors";
min-width: 4rem !important;
transform: translate3d(-5px, 24px, 0px) !important; .nav-menu-font {
} min-width: 3.5rem !important;
transform: translate3d(-5px, 24px, 0px) !important;
}
.btn-font {
display: flex;
outline: none;
border-radius: 5px;
border: $green solid 1.5px;
color: $green;
background-color: white;
p {
padding: 0 5px !important;
margin: 0;
color: $green;
}
}
.btn-font:hover {
border: $green solid 1.5px;
color: white;
background-color: $green;
p {
padding: 0 5px !important;
margin: 0;
color: #fff;
}
}

@ -1,3 +1,7 @@
@import './colors'; @import './colors';
@import './btnStyle'; @import './btnStyle';
@import './twobtnStyle'; @import './twobtnStyle';
label{
font-family: "SansNum" !important;
}

@ -1,14 +1,20 @@
@import './btnStyle'; @import "./btnStyle";
@import './twobtnStyle'; @import "./twobtnStyle";
.line-space-icon- {
font-size: 1rem !important;
width: 1rem !important;
margin: 3px;
color: #009aa8 !important;
}
.line-space-icon-{ .line-space-icon {
font-size: 1rem !important; font-size: 1rem !important;
width: 1rem !important; width: 1rem !important;
margin: 3px;
} }
.line-space-icon{ .label {
font-size: 1rem !important; font-family: "SansNum" !important;
width: 1rem !important; text-align: center;
color: #009aa8;
} }

@ -1,9 +1,12 @@
// components // components
import { useState } from "react";
import Wrapper from "components/footer/Wrapper"; 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"; import ProgressBar from "../components/footer/progressBar";
import onePage from "../components/image/Document.svg";
import twoPage from "../components/image/Pages.svg";
const Footer = ({ const Footer = ({
title, title,
@ -12,6 +15,11 @@ const Footer = ({
onPageMove, onPageMove,
CountPage, CountPage,
}: Props) => { }: Props) => {
const [Icon, setIcon] = useState(false);
const changeIcone = () => {
setIcon(!Icon);
};
return ( return (
<> <>
<Wrapper> <Wrapper>
@ -27,9 +35,20 @@ const Footer = ({
<Item text={`${nowPage} / ${totalPage}`} /> <Item text={`${nowPage} / ${totalPage}`} />
</nav> </nav>
<ProgressBar CountPage={CountPage} /> <ProgressBar CountPage={CountPage} />
<nav
// style={{pointer='cruser'}}
onClick={() => changeIcone()}
className="nav-icon "
>
{window.innerWidth > 768 ? (
<div className="display-icon" style={{ cursor: "pointer" }}>
{Icon ? <img src={onePage} /> : <img src={twoPage} />}
</div>
) : null}
</nav>
</nav> </nav>
{window.innerWidth < 768 ? <Button>خرید کتاب</Button> : null}
</Wrapper> </Wrapper>
{window.innerWidth < 768 ? <Button>خرید کتاب</Button> : null}
</> </>
); );
}; };
@ -37,6 +56,8 @@ const Footer = ({
const Button = styled.button` const Button = styled.button`
width: 100%; width: 100%;
justify-content: center; justify-content: center;
position: fixed;
bottom: 0;
display: flex; display: flex;
height: 35px; height: 35px;
padding: 2px 2rem; padding: 2px 2rem;

@ -6,6 +6,7 @@ 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"; import Setting from "components/Setting/setting";
import { Collapse, Button, CardBody, Card } from "reactstrap";
const Header = ({ const Header = ({
onNavToggle, onNavToggle,
@ -14,7 +15,6 @@ const Header = ({
title, title,
}: Props) => { }: Props) => {
const [isOpen, setIsOpen] = useState(false); const [isOpen, setIsOpen] = useState(false);
const toggle = () => setIsOpen(!isOpen); const toggle = () => setIsOpen(!isOpen);
return ( return (
<> <>
@ -25,7 +25,7 @@ const Header = ({
<nav onClick={toggle} style={{ display: "flex" }} id="toggler"> <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> </nav>
@ -36,7 +36,7 @@ const Header = ({
/> />
</nav> </nav>
<nav> <nav>
{window.innerWidth > 768 ? <Button>خرید کتاب</Button> : null} {window.innerWidth > 768 ? <ButtonB>خرید کتاب</ButtonB> : null}
</nav> </nav>
<nav <nav
style={{ style={{
@ -61,12 +61,12 @@ const Header = ({
</AutoLayout> </AutoLayout>
</Layout> </Layout>
</Wrapper> </Wrapper>
<Setting isOpen={isOpen}/> <Setting isOpen={isOpen} />
</> </>
); );
}; };
const Button = styled.button` const ButtonB = styled.button`
display: flex; display: flex;
margin-top: 15px; margin-top: 15px;
border-radius: 5px; border-radius: 5px;

@ -173,7 +173,6 @@ const Reader = ({ url, loadingView }: Props) => {
<ViewerWrapper> <ViewerWrapper>
<Header <Header
title={currentLocation.chapterName} title={currentLocation.chapterName}
onNavToggle={onNavToggle} onNavToggle={onNavToggle}
onOptionToggle={onOptionToggle} onOptionToggle={onOptionToggle}
onLearningToggle={onLearningToggle} onLearningToggle={onLearningToggle}
@ -196,7 +195,7 @@ const Reader = ({ url, loadingView }: Props) => {
left: "0", left: "0",
width: "20%", width: "20%",
height: "85%", height: "85%",
top: "4rem", top: "6rem",
zIndex: 10, zIndex: 10,
}} }}
onClick={() => onPageMove("NEXT")} onClick={() => onPageMove("NEXT")}
@ -242,7 +241,7 @@ const Reader = ({ url, loadingView }: Props) => {
right: "0", right: "0",
width: "20%", width: "20%",
height: "85%", height: "85%",
top: "4rem", top: "6rem",
}} }}
onClick={() => onPageMove("PREV")} onClick={() => onPageMove("PREV")}
> >
@ -326,6 +325,7 @@ const ReaderWrapper = ({ url, loadingView }: Props) => {
}; };
interface Props { interface Props {
viewerStyle?: BookStyle;
url: string; url: string;
loadingView?: React.ReactNode; loadingView?: React.ReactNode;
} }

@ -1,5 +1,6 @@
import ReactDOM from "react-dom"; import ReactDOM from "react-dom";
import Reader from "containers/Reader"; import Reader from "containers/Reader";
import 'bootstrap/dist/css/bootstrap.min.css';
const EPUB_URL = "/react-epub-viewer/files/book2.epub"; const EPUB_URL = "/react-epub-viewer/files/book2.epub";

Loading…
Cancel
Save