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
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 56
      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. 32
      src/components/style/fontStyle.scss
  10. 4
      src/components/style/fontsize.scss
  11. 16
      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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

23
src/containers/Footer.tsx
Unescape View File

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

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

6
src/containers/Reader.tsx
Unescape View File

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

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

Write Preview
Loading…
Cancel
Save