fontsize style family height

demo
taha12322 3 years ago
parent 2d399de16d
commit dc75dd168a
  1. 2
      src/components/Setting/FontColor/Colors/chosecolor.js
  2. 21
      src/components/Setting/FontSize/fontsize.js
  3. 43
      src/components/Setting/FontStyle/Fonts/fonts.js
  4. 51
      src/components/Setting/FontStyle/Fontstyle.js
  5. 26
      src/components/Setting/LineHeight/lineheight.js
  6. 33
      src/components/Setting/setting.js
  7. 2
      src/components/contextMenu/Item.tsx
  8. 2
      src/components/header/Logo.tsx
  9. 28
      src/containers/Footer.tsx
  10. 16
      src/containers/Header.tsx
  11. 32
      src/containers/Reader.tsx
  12. 20
      src/containers/menu/Option.tsx

@ -4,7 +4,7 @@ import '../../../style/chosecolor.scss';
const Chosecolor = (props) => {
const {color , setcolor} = props;
const {setcolor} = props;
const changeColorHandler = (value) => {
setcolor(value)

@ -7,7 +7,7 @@ function ButtonIncrement(props) {
type="button"
outline
onClick={props.onClickFunc}
style={{ padding: "0px 5px" , color: "#009AA8" }}
style={{ padding: "0px 5px", color: "#009AA8" }}
>
+
</p>
@ -20,7 +20,7 @@ function ButtonDecrement(props) {
type="button"
outline
onClick={props.onClickFunc}
style={{ padding: "0px 5px" , color: "#009AA8" }}
style={{ padding: "0px 5px", color: "#009AA8" }}
>
-
</p>
@ -28,22 +28,23 @@ function ButtonDecrement(props) {
}
function Display(props) {
return <label style={{color: "#009AA8"}}>{props.message}</label>;
return <label style={{ color: "#009AA8" }}>{props.message}</label>;
}
const Fontsize = (props) => {
const [countersize, setCounter ] = useState(1)
const incrementCounter = () => setCounter(countersize + 1);
let decrementCounter = () => setCounter(countersize - 1);
const { bookStyle, setBookStyle } = props;
// const [countersize, setCounter ] = useState(1)
const incrementCounter = () =>
setBookStyle({ ...bookStyle, fontSize: bookStyle.fontSize + 1 });
let decrementCounter = () =>
setBookStyle({ ...bookStyle, fontSize: bookStyle.fontSize - 1 });
if (countersize <= 1) {
decrementCounter = () => setCounter(1);
}
return (
<div className="nav-fontBtn">
<nav>
<ButtonIncrement onClickFunc={incrementCounter} />
<Display message={countersize} />
<Display message={bookStyle.fontSize} />
<ButtonDecrement onClickFunc={decrementCounter} />
</nav>
</div>

@ -1,23 +1,30 @@
import React from 'react';
import '../../../style/fonts.scss';
import React from "react";
import "../../../style/fonts.scss";
const Fonts = (props) => {
const { setBookStyle, bookStyle } = props;
const {setname} = props;
return (
<>
<nav className="nav-btn">
<button
onClick={() => setBookStyle({ ...bookStyle, fontFamily: "Sans" })}
className="btn-font"
>
سانس
</button>
<button
onClick={() => setBookStyle({ ...bookStyle, fontFamily: "Nazanin" })}
className="btn-font"
>
نازنین
</button>
</nav>
</>
);
};
const fontHandler = (value) =>{
setname(value)
}
export default Fonts;
return (
<>
<nav className='nav-btn'>
<button onClick={() => fontHandler('Sans')} className='btn-font'>سانس</button>
<button onClick={() => fontHandler('Nazanin')} className='btn-font'>نازنین</button>
</nav>
</>
)
}
export default Fonts
// ()=>setBookStyle({fontFamily: bookStyle.fontFamily === "Nazanin" })
// ()=>setBookStyle({fontFamily: bookStyle.fontFamily === "Sans" })

@ -1,33 +1,28 @@
import React , { useState } from 'react';
import { Dropdown, DropdownToggle, DropdownMenu } from 'reactstrap';
import '../../../components/style/fontStyle.scss'
import Fonts from './Fonts/fonts'
import React, { useState } from "react";
import { Dropdown, DropdownToggle, DropdownMenu } from "reactstrap";
import "../../../components/style/fontStyle.scss";
import Fonts from "./Fonts/fonts";
const Fontstyle = (props) => {
const {setname ,name} = props;
const { bookStyle, setBookStyle } = props;
const [dropdownOpen, setDropdownOpen] = useState(false);
const toggle = () => setDropdownOpen((prevState) => !prevState);
const [dropdownOpen, setDropdownOpen] = useState(false);
const toggle = () => setDropdownOpen(prevState => !prevState)
return (
<div>
<Dropdown isOpen={dropdownOpen} toggle={toggle}>
<DropdownToggle id="dropdown-btn">
<button className="btn-font">
<p>{bookStyle.fontFamily === "Sans" ? "سانس" : "نازنین"}</p>
</button>
</DropdownToggle>
<DropdownMenu className="nav-menu-font">
<Fonts bookStyle={bookStyle} setBookStyle={setBookStyle} />
</DropdownMenu>
</Dropdown>
</div>
);
};
return (
<div>
<Dropdown isOpen={dropdownOpen} toggle={toggle}>
<DropdownToggle id='dropdown-btn'>
<button className='btn-font'>
<p>
{name === 'Sans' ? 'سانس': 'نازنین'}
</p>
</button>
</DropdownToggle>
<DropdownMenu className='nav-menu-font'>
<Fonts
setname={setname}
/>
</DropdownMenu>
</Dropdown>
</div>
)
}
export default Fontstyle
export default Fontstyle;

@ -1,5 +1,4 @@
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";
@ -34,22 +33,31 @@ function Display(props) {
return <label className="label">{props.message}</label>;
}
const Lineheight = () => {
const [counterline, setcounterline] = useState(1);
const Lineheight = (props) => {
const { setBookStyle, bookStyle } = props;
// const [counterline, setcounterline] = useState(1);
const incrementCounter = () => setcounterline(counterline + 1);
let decrementCounter = () => setcounterline(counterline - 1);
const incrementCounter = () =>
setBookStyle({
...bookStyle,
lineHeight: Math.round(bookStyle.lineHeight * 5) / 5 + 0.2,
});
let decrementCounter = () =>
setBookStyle({
...bookStyle,
lineHeight: Math.round(bookStyle.lineHeight * 5) / 5 - 0.2,
});
if (counterline <= 1) {
decrementCounter = () => setcounterline(1);
}
// if (counterline <= 1) {
// decrementCounter = () => setcounterline(1);
// }
return (
<>
<div className="nav-fontBtn">
<nav style={{ width: "70px" }}>
<ButtonIncrement onClickFunc={incrementCounter} />
<Display message={counterline} />
<Display message={Math.round(bookStyle.lineHeight * 5) / 5} />
<ButtonDecrement onClickFunc={decrementCounter} />
</nav>
</div>

@ -1,30 +1,27 @@
import React , {useState} from "react";
import React 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";
// import OptionDropdown from "../option/Dropdown";
const Setting = (props) => {
const {
BookStyle,
onSelect,
// BookStyle,
// onSelect,
isOpen,
valueList,
defaultValue,
title,
// valueList,
// defaultValue,
// title,
setIsChecked,
isChecked,
countersize,
setCounter,
counterline,
setcounterline,
setname,
name,
setcolor,
color,
bookStyle,
setBookStyle,
bookOption,
} = props;
return (
<>
@ -40,12 +37,12 @@ const Setting = (props) => {
/>
</nav>
<nav className="nav-items">
<LineHeight
counterline={counterline}
setcounterline={setcounterline}
<LineHeight setBookStyle={setBookStyle} bookStyle={bookStyle} />
<FontSize setBookStyle={setBookStyle} bookStyle={bookStyle} />
<Fontstyle
setBookStyle={setBookStyle}
bookStyle={bookStyle}
/>
<FontSize countersize={countersize} setCounter={setCounter} />
<Fontstyle name={name} setname={setname} />
{/* <OptionDropdown
title="فونت"
defaultValue={fontFamily}

@ -13,7 +13,7 @@ const Container = styled.button`
line-height: 32px;
text-align: center;
font-size: 14px;
color: #000;
color: #fff;
transition: .1s ${styles.transition};
background-color: rgba(0,0,0,0);
border-radius: 6px;

@ -1,7 +1,7 @@
import styled from 'styled-components'
// lib
import * as styles from 'lib/styles/styles'
import palette from 'lib/styles/palette'
// import palette from 'lib/styles/palette'
import { mediaQuery } from 'lib/styles/media'
const Logo = () => {

@ -2,17 +2,17 @@
import { useState } from "react";
import Wrapper from "components/footer/Wrapper";
import Item from "components/footer/Item";
import MoveBtn from "components/footer/MoveBtn";
// 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,
// title,
nowPage,
totalPage,
onPageMove,
// onPageMove,
CountPage,
}: Props) => {
const [Icon, setIcon] = useState(false);
@ -42,7 +42,7 @@ const Footer = ({
>
{window.innerWidth > 768 ? (
<div className="display-icon" style={{ cursor: "pointer" }}>
{Icon ? <img src={onePage} /> : <img src={twoPage} />}
{Icon ? <img src={onePage} alt='singlepage' /> : <img src={twoPage} alt='twopages' />}
</div>
) : null}
</nav>
@ -76,13 +76,13 @@ interface Props {
export default Footer;
const WrapperBtn = styled.div`
position: fixed;
left: 0;
top: 60px;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: space-between;
`;
// const WrapperBtn = styled.div`
// position: fixed;
// left: 0;
// top: 60px;
// width: 100%;
// height: 100%;
// display: flex;
// align-items: center;
// justify-content: space-between;
// `;

@ -5,24 +5,25 @@ import Wrapper from "components/header/Wrapper";
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";
// import { Collapse, Button, CardBody, Card } from "reactstrap";
const Header = ({
isOpen,
setIsOpen,
onNavToggle,
onOptionToggle,
// onOptionToggle,
onLearningToggle,
title,
}: Props) => {
const [isOpen, setIsOpen] = useState(false);
const toggle = () => setIsOpen(!isOpen);
return (
<>
<Wrapper>
<Layout>
<AutoLayout style={{ backgroundColor: "#009AA8" }}>
<nav style={{ display: "flex", marginLeft: "16px" }}>
<nav onClick={toggle} style={{ display: "flex" }} id="toggler">
<nav onClick={() => setIsOpen(!isOpen)} style={{ display: "flex" }} id="toggler">
<Img
src="/react-epub-viewer/images/Setting.svg"
// onClick={onOptionToggle as any}
@ -61,7 +62,6 @@ const Header = ({
</AutoLayout>
</Layout>
</Wrapper>
<Setting isOpen={isOpen} />
</>
);
};
@ -89,6 +89,8 @@ interface Props {
onNavToggle: (value?: boolean) => void;
onOptionToggle: (value?: boolean) => void;
onLearningToggle: (value?: boolean) => void;
isOpen: any;
setIsOpen:any;
// setsettingicon: (value?: boolean) => void;
}

@ -2,7 +2,7 @@ import { useState, useRef } from "react";
import { useSelector, useDispatch } from "react-redux";
import { Provider } from "react-redux";
import { ReactEpubViewer } from "react-epub-viewer";
import styled from "styled-components";
// import styled from "styled-components";
// containers
import Header from "containers/Header";
import Footer from "containers/Footer";
@ -14,7 +14,7 @@ import Snackbar from "containers/commons/Snackbar";
// components
import ViewerWrapper from "components/commons/ViewerWrapper";
import LoadingView from "LoadingView";
import BookInfo from "components/nav/BookInfo";
// import BookInfo from "components/nav/BookInfo";
// slices
import store from "slices";
import { updateBook, updateCurrentPage, updateToc } from "slices/book";
@ -30,10 +30,11 @@ import { ViewerRef } from "types";
import Book, { BookStyle, BookOption } from "types/book";
import Page from "types/page";
import Toc from "types/toc";
import { title } from "node:process";
// import { title } from "node:process";
import ArrowBackIosRoundedIcon from "@material-ui/icons/ArrowBackIosRounded";
import ArrowForwardIosRoundedIcon from "@material-ui/icons/ArrowForwardIosRounded";
import MoveBtn from "components/footer/MoveBtn";
import Setting from "components/Setting/setting";
// import MoveBtn from "components/footer/MoveBtn";
const Reader = ({ url, loadingView }: Props) => {
const dispatch = useDispatch();
@ -92,9 +93,10 @@ const Reader = ({ url, loadingView }: Props) => {
const node =
iframe && iframe.contentWindow && iframe.contentWindow.document;
// node && node.head && node.head.appendChild(new_style_element);
console.log(node);
};
const onBookInfoChange = (book: Book) => {
// loadFont();
loadFont();
dispatch(updateBook(book));
};
@ -160,13 +162,14 @@ const Reader = ({ url, loadingView }: Props) => {
/** ContextMenu off */
const onContextmMenuRemove = () => setIsContextMenu(false);
const [settingicon, setsettingicon] = useState(false);
// const [settingicon, setsettingicon] = useState(false);
const changeiconsettinghandler = () => {
setsettingicon(!settingicon);
};
// const changeiconsettinghandler = () => {
// setsettingicon(!settingicon);
// };
const [CountPage, setCountPage] = useState(0);
const [isOpen, setIsOpen] = useState(false);
return (
<>
@ -176,6 +179,15 @@ const Reader = ({ url, loadingView }: Props) => {
onNavToggle={onNavToggle}
onOptionToggle={onOptionToggle}
onLearningToggle={onLearningToggle}
isOpen={isOpen}
setIsOpen={setIsOpen}
/>
<Setting
setBookStyle={setBookStyle}
bookStyle={bookStyle}
bookOption={bookOption}
setBookOption={setBookOption}
isOpen={isOpen}
/>
<nav
@ -328,6 +340,8 @@ interface Props {
viewerStyle?: BookStyle;
url: string;
loadingView?: React.ReactNode;
isOpen?: any;
setIsOpen?: any;
}
export default ReaderWrapper;

@ -11,18 +11,18 @@ import ControlIconBtn from "components/option/ControlIconBtn";
import { BookStyle, BookFontFamily, BookFlow } from "types/book";
import { MenuControl } from "lib/hooks/useMenu";
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 * as styles from "lib/styles/styles";
// import palette from 'lib/styles/palette'
import styled from "styled-components";
import Setting from "components/Setting/setting";
// import Setting from "components/Setting/setting";
const Option = (
{
control,
bookStyle,
bookOption,
bookFlow,
// bookFlow,
onToggle,
emitEvent,
onBookStyleChange,
@ -249,8 +249,6 @@ interface Props {
onBookOptionChange: (bookOption: BookOption) => void;
}
const Btn = styled.button`
position: relative;
height: 100%;
@ -259,10 +257,10 @@ const Btn = styled.button`
align-items: center;
justify-content: center;
z-index: 0;
transition: .3s ${styles.transition};
transition: 0.3s ${styles.transition};
outline: none;
&::before {
content: '';
content: "";
position: absolute;
left: 0;
right: 0;
@ -271,9 +269,9 @@ const Btn = styled.button`
margin: auto;
z-index: -1;
border-radius: 30px;
transition: .1s ${styles.transition};
transition: 0.1s ${styles.transition};
background-color: rgb(0, 154, 168);
};
}
`;
const BtnWrapper = styled.div`
display: flex;

Loading…
Cancel
Save