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 Chosecolor = (props) => {
const {color , setcolor} = props; const {setcolor} = props;
const changeColorHandler = (value) => { const changeColorHandler = (value) => {
setcolor(value) setcolor(value)

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

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

@ -1,33 +1,28 @@
import React , { useState } from 'react'; import React, { useState } from "react";
import { Dropdown, DropdownToggle, DropdownMenu } from 'reactstrap'; import { Dropdown, DropdownToggle, DropdownMenu } from "reactstrap";
import '../../../components/style/fontStyle.scss' import "../../../components/style/fontStyle.scss";
import Fonts from './Fonts/fonts' import Fonts from "./Fonts/fonts";
const Fontstyle = (props) => { 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); return (
const toggle = () => setDropdownOpen(prevState => !prevState) <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 ( export default Fontstyle;
<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

@ -1,5 +1,4 @@
import React, { useState } from "react"; import React, { useState } from "react";
import FormatLineSpacingRoundedIcon from "@material-ui/icons/FormatLineSpacingRounded";
import lineSpace from "../../image/lineSpace.svg"; import lineSpace from "../../image/lineSpace.svg";
import line from "../../image/line.svg"; import line from "../../image/line.svg";
import "../../../components/style/lineheight.scss"; import "../../../components/style/lineheight.scss";
@ -34,22 +33,31 @@ function Display(props) {
return <label className="label">{props.message}</label>; return <label className="label">{props.message}</label>;
} }
const Lineheight = () => { const Lineheight = (props) => {
const [counterline, setcounterline] = useState(1); const { setBookStyle, bookStyle } = props;
// const [counterline, setcounterline] = useState(1);
const incrementCounter = () => setcounterline(counterline + 1); const incrementCounter = () =>
let decrementCounter = () => setcounterline(counterline - 1); 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) { // 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={Math.round(bookStyle.lineHeight * 5) / 5} />
<ButtonDecrement onClickFunc={decrementCounter} /> <ButtonDecrement onClickFunc={decrementCounter} />
</nav> </nav>
</div> </div>

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

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

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

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

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

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

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

Loading…
Cancel
Save