From dc75dd168aa898c2b6ce88ab9ae2898d19139e59 Mon Sep 17 00:00:00 2001 From: taha12322 <66300435+taha12322@users.noreply.github.com> Date: Tue, 17 Aug 2021 15:28:54 +0430 Subject: [PATCH] fontsize style family height --- .../Setting/FontColor/Colors/chosecolor.js | 2 +- src/components/Setting/FontSize/fontsize.js | 21 ++++---- .../Setting/FontStyle/Fonts/fonts.js | 43 +++++++++------- src/components/Setting/FontStyle/Fontstyle.js | 51 +++++++++---------- .../Setting/LineHeight/lineheight.js | 26 ++++++---- src/components/Setting/setting.js | 33 ++++++------ src/components/contextMenu/Item.tsx | 2 +- src/components/header/Logo.tsx | 2 +- src/containers/Footer.tsx | 28 +++++----- src/containers/Header.tsx | 16 +++--- src/containers/Reader.tsx | 32 ++++++++---- src/containers/menu/Option.tsx | 20 ++++---- 12 files changed, 149 insertions(+), 127 deletions(-) diff --git a/src/components/Setting/FontColor/Colors/chosecolor.js b/src/components/Setting/FontColor/Colors/chosecolor.js index ba58309..a0d2b6e 100644 --- a/src/components/Setting/FontColor/Colors/chosecolor.js +++ b/src/components/Setting/FontColor/Colors/chosecolor.js @@ -4,7 +4,7 @@ import '../../../style/chosecolor.scss'; const Chosecolor = (props) => { - const {color , setcolor} = props; + const {setcolor} = props; const changeColorHandler = (value) => { setcolor(value) diff --git a/src/components/Setting/FontSize/fontsize.js b/src/components/Setting/FontSize/fontsize.js index 0eac8b9..b953c64 100644 --- a/src/components/Setting/FontSize/fontsize.js +++ b/src/components/Setting/FontSize/fontsize.js @@ -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" }} > +

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

@@ -28,22 +28,23 @@ function ButtonDecrement(props) { } function Display(props) { - return ; + return ; } 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 (
diff --git a/src/components/Setting/FontStyle/Fonts/fonts.js b/src/components/Setting/FontStyle/Fonts/fonts.js index 0758ba2..676a3b3 100644 --- a/src/components/Setting/FontStyle/Fonts/fonts.js +++ b/src/components/Setting/FontStyle/Fonts/fonts.js @@ -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 ( + <> + + + ); +}; - const fontHandler = (value) =>{ - setname(value) - } +export default Fonts; - - return ( - <> - - - ) -} - -export default Fonts +// ()=>setBookStyle({fontFamily: bookStyle.fontFamily === "Nazanin" }) +// ()=>setBookStyle({fontFamily: bookStyle.fontFamily === "Sans" }) diff --git a/src/components/Setting/FontStyle/Fontstyle.js b/src/components/Setting/FontStyle/Fontstyle.js index b04fdce..a159284 100644 --- a/src/components/Setting/FontStyle/Fontstyle.js +++ b/src/components/Setting/FontStyle/Fontstyle.js @@ -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 ( +
+ + + + + + + + +
+ ); +}; - return ( -
- - - - - - - - -
- ) -} - -export default Fontstyle +export default Fontstyle; diff --git a/src/components/Setting/LineHeight/lineheight.js b/src/components/Setting/LineHeight/lineheight.js index 9b78b62..02f15cf 100644 --- a/src/components/Setting/LineHeight/lineheight.js +++ b/src/components/Setting/LineHeight/lineheight.js @@ -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 ; } -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 ( <>
diff --git a/src/components/Setting/setting.js b/src/components/Setting/setting.js index e1f0419..ca68400 100644 --- a/src/components/Setting/setting.js +++ b/src/components/Setting/setting.js @@ -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) => { /> @@ -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; +// `; diff --git a/src/containers/Header.tsx b/src/containers/Header.tsx index 716e16a..c70a41f 100644 --- a/src/containers/Header.tsx +++ b/src/containers/Header.tsx @@ -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 ( <>