demo
taha12322 3 years ago
parent db4037dd07
commit 2d399de16d
  1. 38
      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. 8
      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. 30
      src/components/style/fontStyle.scss
  10. 4
      src/components/style/fontsize.scss
  11. 12
      src/components/style/lineheight.scss
  12. 23
      src/containers/Footer.tsx
  13. 8
      src/containers/Header.tsx
  14. 6
      src/containers/Reader.tsx
  15. 1
      src/index.tsx

@ -1,32 +1,38 @@
import React from 'react';
import '../../../components/style/fontsize.scss';
import React, { useState } from "react";
import "../../../components/style/fontsize.scss";
function ButtonIncrement(props) {
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>
)
);
}
function ButtonDecrement(props) {
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>
)
);
}
function Display(props) {
return (
<label >{props.message}</label>
)
return <label style={{color: "#009AA8"}}>{props.message}</label>;
}
const Fontsize = (props) => {
const {countersize, setCounter} = props;
const [countersize, setCounter ] = useState(1)
const incrementCounter = () => setCounter(countersize + 1);
let decrementCounter = () => setCounter(countersize - 1);
@ -34,14 +40,14 @@ const Fontsize = (props) => {
decrementCounter = () => setCounter(1);
}
return (
<div className='nav-fontBtn'>
<div className="nav-fontBtn">
<nav>
<ButtonIncrement onClickFunc={incrementCounter} />
<Display message={countersize} />
<ButtonDecrement onClickFunc={decrementCounter} />
</nav>
</div>
)
}
);
};
export default Fontsize
export default Fontsize;

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

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

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

@ -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 Wrapper = styled.div`
position: fixed;
@ -18,6 +18,4 @@ const Wrapper = styled.div`
}
`;
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'
const useStyles = makeStyles((theme) => ({
root: {
width: 500 + theme.spacing(0),
width: 900 + theme.spacing(0),
},
margin: {
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 @@
@import "./colors";
.nav-menu-font {
min-width: 4rem !important;
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 './btnStyle';
@import './twobtnStyle';
label{
font-family: "SansNum" !important;
}

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

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

@ -6,6 +6,7 @@ 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";
import { Collapse, Button, CardBody, Card } from "reactstrap";
const Header = ({
onNavToggle,
@ -14,7 +15,6 @@ const Header = ({
title,
}: Props) => {
const [isOpen, setIsOpen] = useState(false);
const toggle = () => setIsOpen(!isOpen);
return (
<>
@ -25,7 +25,7 @@ const Header = ({
<nav onClick={toggle} style={{ display: "flex" }} id="toggler">
<Img
src="/react-epub-viewer/images/Setting.svg"
onClick={onOptionToggle as any}
// onClick={onOptionToggle as any}
alt="Logo"
/>
</nav>
@ -36,7 +36,7 @@ const Header = ({
/>
</nav>
<nav>
{window.innerWidth > 768 ? <Button>خرید کتاب</Button> : null}
{window.innerWidth > 768 ? <ButtonB>خرید کتاب</ButtonB> : null}
</nav>
<nav
style={{
@ -66,7 +66,7 @@ const Header = ({
);
};
const Button = styled.button`
const ButtonB = styled.button`
display: flex;
margin-top: 15px;
border-radius: 5px;

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

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

Loading…
Cancel
Save