taha
/
epub_Reader
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

styled

Browse Source
demo
taha12322 3 years ago
parent db4037dd07
commit 2d399de16d
15 changed files with 215 additions and 102 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  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

86
src/components/Setting/FontSize/fontsize.js
Unescape View File

@ -1,47 +1,53 @@
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'}}>
return (
<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>
)
}
function Display(props) {
return (
<label >{props.message}</label>
)
}
</p>
);
}
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;
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>
)
function Display(props) {
return <label style={{color: "#009AA8"}}>{props.message}</label>;
}
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;

2
src/components/Setting/FontStyle/Fontstyle.js
Unescape View File

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

44
src/components/Setting/LineHeight/lineheight.js
Unescape View File

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

38
src/components/Setting/setting.js
Unescape View File

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

10
src/components/footer/Wrapper.tsx
Unescape View File

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

2
src/components/footer/progressBar.js
Unescape View File

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

8
src/components/image/Document.svg
Unescape View File

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

After

Width:  |  Height:  |  Size: 1.1 KiB

21
src/components/image/line.svg
Unescape View File

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

After

Width:  |  Height:  |  Size: 1.8 KiB

36
src/components/style/fontStyle.scss
Unescape View File

@ -1,4 +1,32 @@
.nav-menu-font{
min-width: 4rem !important;
transform: translate3d(-5px, 24px, 0px) !important;
}
@import "./colors";
.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;
}
}

6
src/components/style/fontsize.scss
Unescape View File

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

24
src/components/style/lineheight.scss
Unescape View File

@ -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;
margin: 3px;
.line-space-icon {
font-size: 1rem !important;
width: 1rem !important;
}
.line-space-icon{
font-size: 1rem !important;
width: 1rem !important;
.label {
font-family: "SansNum" !important;
text-align: center;
color: #009aa8;
}

23
src/containers/Footer.tsx
Unescape View File

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

10
src/containers/Header.tsx
Unescape View File

@ -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={{
@ -61,12 +61,12 @@ const Header = ({
</AutoLayout>
</Layout>
</Wrapper>
<Setting isOpen={isOpen}/>
<Setting isOpen={isOpen} />
</>
);
};
const Button = styled.button`
const ButtonB = styled.button`
display: flex;
margin-top: 15px;
border-radius: 5px;

6
src/containers/Reader.tsx
Unescape View File

@ -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
src/index.tsx
Unescape View File

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

Write Preview
Loading…
Cancel
Save