footer finished (responsive)

background color of the iftram finished
color of the book (not finished)
demo
taha12322 3 years ago
parent 741b12261b
commit 78f4b96430
  1. 6
      src/components/Setting/FontColor/Colors/chosecolor.js
  2. 4
      src/components/Setting/FontColor/colors.js
  3. 2
      src/components/Setting/setting.js
  4. 54
      src/components/footer/progressBar.js
  5. 30
      src/components/style/footerStyle.scss
  6. 48
      src/components/style/slider.scss
  7. 99
      src/containers/Footer.tsx
  8. 30
      src/containers/Header.tsx
  9. 44
      src/containers/Reader.tsx

@ -4,15 +4,11 @@ import '../../../style/chosecolor.scss';
const Chosecolor = (props) => { const Chosecolor = (props) => {
const {setcolor} = props; const {setcolor , isChecked} = props;
const changeColorHandler = (value) => { const changeColorHandler = (value) => {
setcolor(value) setcolor(value)
} }
const {isChecked} = props;
return ( return (
<> <>
{isChecked ? {isChecked ?

@ -7,10 +7,12 @@ import { Dropdown, DropdownToggle, DropdownMenu } from 'reactstrap';
const Colors = (props) => { const Colors = (props) => {
const { setcolor, color} = props;
const [dropdownOpen, setDropdownOpen] = useState(false); const [dropdownOpen, setDropdownOpen] = useState(false);
const toggle = () => setDropdownOpen(prevState => !prevState); const toggle = () => setDropdownOpen(prevState => !prevState);
const {setIsChecked, isChecked , setcolor , color } = props;
const [isChecked, setIsChecked] = useState(false)
const [Icon, seticon] = useState(PalletColorOutline); const [Icon, seticon] = useState(PalletColorOutline);
const changeIcone = () => { const changeIcone = () => {

@ -30,9 +30,9 @@ const Setting = (props) => {
<nav className="nav-content"> <nav className="nav-content">
<nav className="nav-items"> <nav className="nav-items">
<Colors <Colors
setcolor={setcolor}
setIsChecked={setIsChecked} setIsChecked={setIsChecked}
isChecked={isChecked} isChecked={isChecked}
setcolor={setcolor}
color={color} color={color}
/> />
</nav> </nav>

@ -1,52 +1,50 @@
import React from 'react' import React from "react";
import { withStyles, makeStyles } from '@material-ui/core/styles' import { withStyles, makeStyles } from "@material-ui/core/styles";
import Slider from '@material-ui/core/Slider' import Slider from "@material-ui/core/Slider";
import "components/style/slider.scss";
const useStyles = makeStyles((theme) => ({ const useStyles = makeStyles((theme) => ({
root: {
width: 900 + theme.spacing(0),
},
margin: { margin: {
height: theme.spacing(3), height: theme.spacing(0),
}, },
})) }));
const PrettoSlider = withStyles({ const PrettoSlider = withStyles({
root: { root: {
color: '#009AA8', color: "#009AA8",
height: '5px', height: "5px",
padding: 0, padding: 0,
direction: 'rtl !important', direction: "rtl !important",
}, },
thumb: { thumb: {
height: '15px', height: "15px",
width: '15px', width: "15px",
backgroundColor: '#fff', backgroundColor: "#fff",
border: '1.5px solid currentColor', border: "1.5px solid currentColor",
marginTop: '-6px', marginTop: "-6px",
marginLeft: '-11px', marginLeft: "-11px",
direction: 'rtl !important', direction: "rtl !important",
'&:focus, &:hover, &$active': { "&:focus, &:hover, &$active": {
boxShadow: 'inherit', boxShadow: "inherit",
direction: 'rtl !important', direction: "rtl !important",
}, },
}, },
active: {}, active: {},
track: { track: {
height: '5px', height: "5px",
borderRadius: 4, borderRadius: 4,
direction: 'rtl !important', direction: "rtl !important",
}, },
rail: { rail: {
height: '5px', height: "5px",
borderRadius: 4, borderRadius: 4,
}, },
})(Slider) })(Slider);
export default function ProgressBar(props) { export default function ProgressBar(props) {
const classes = useStyles() const classes = useStyles();
const { CountPage } = props; const { CountPage } = props;
return ( return (
<div className={classes.root}> <div className={(classes.root, "root")}>
<PrettoSlider <PrettoSlider
track="inverted" track="inverted"
value={CountPage} value={CountPage}
@ -55,5 +53,5 @@ export default function ProgressBar(props) {
marks={true} marks={true}
/> />
</div> </div>
) );
} }

@ -1,4 +1,34 @@
@import './colors';
.icons-disable { .icons-disable {
opacity: 0.3; opacity: 0.3;
cursor: auto; cursor: auto;
} }
.nav-footer {
background-color: #fff;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
.footer-item {
display: flex;
justify-content: space-evenly;
padding: 0 5px;
align-items: center;
margin-bottom: 5px;
}
}
.active{
border-radius: 20%;
width: 65px;
background-color: #009aa873;
}
.icon{
width: 65px;
}

@ -0,0 +1,48 @@
.root {
width: 900px;
}
@media screen and (max-width: 1024px) {
.root {
width: 800px;
}
}
@media screen and (max-width: 768px) {
.root {
width: 600px;
}
}
@media screen and (max-width: 530px) {
.root {
width: 280px;
}
}
@media screen and (max-width: 425px) {
.root {
width: 295px;
}
}
@media screen and (max-width: 375px) {
.root {
width: 230px;
}
}
@media screen and (max-width: 320px) {
.root {
width: 175px;
}
}
//1024 => 800
//768 => 600
//530 => 390
//425 => 285
//375 => 245
//320 => 175

@ -31,9 +31,15 @@ const Footer = ({
const changeIcone = () => { const changeIcone = () => {
setIcon(!Icon); setIcon(!Icon);
}; };
const [active, setActive] = useState(1);
const [toggleIcon, setToggleIcon] = useState(false);
const onToggle = () => {
setToggleIcon(false);
if (active === 1 || 2) {
setActive(3);
}
const [toggleIcon, setToggleIcon] = useState(true); };
return ( return (
<> <>
<Wrapper> <Wrapper>
@ -49,23 +55,30 @@ const Footer = ({
<Item text={`${nowPage} / ${totalPage}`} /> <Item text={`${nowPage} / ${totalPage}`} />
</nav> </nav>
<ProgressBar CountPage={CountPage} /> <ProgressBar CountPage={CountPage} />
<nav onClick={() => changeIcone()} className="nav-icon "> <nav onClick={() => changeIcone()} className="nav-icon">
{window.innerWidth > 768 ? ( {window.innerWidth > 768 ? (
<div className="display-icon" style={{ cursor: "pointer" }}> <div className="display-icon" style={{ cursor: "pointer" }}>
<nav style={{ width: "65px", display: "flex" }}> <nav style={{ width: "65px", display: "flex" }}>
<BookOpenIcon <nav
className={`${toggleIcon ? "icons-disable" : ""}`} className={`${active === 1 ? "active" : null} icon`}
onClick={() => onClickViewType(true)} onClick={toggleIcon ? () => setActive(3): () => setActive(1)}
/> >
<BookCloseIcon <BookOpenIcon
className={`${toggleIcon ? "icons-disable" : ""}`} className={`${toggleIcon ? "icons-disable" : ""}`}
onClick={() => onClickViewType(false)} onClick={toggleIcon ? null : () => onClickViewType(true)}
/> />
</nav>
<nav
className={`${active === 2 ? "active" : null} icon`}
onClick={toggleIcon ? () => setActive(3): () => setActive(2)}
>
<BookCloseIcon
className={`${toggleIcon ? "icons-disable" : ""}`}
onClick={toggleIcon ? null : () => onClickViewType(false)}
/>
</nav>
{toggleIcon === true ? ( {toggleIcon === true ? (
<nav <nav style={{ width: "65px" }} onClick={onToggle}>
style={{ width: "65px" }}
onClick={() => setToggleIcon(false)}
>
<ScrollVerticalIcon <ScrollVerticalIcon
onClick={() => onClick={() =>
onBookOptionChange({ onBookOptionChange({
@ -92,11 +105,56 @@ const Footer = ({
)} )}
</nav> </nav>
</div> </div>
) : null} ) : (
""
)}
</nav> </nav>
</nav> </nav>
</Wrapper> </Wrapper>
{window.innerWidth < 768 ? <Button>خرید کتاب</Button> : null} {window.innerWidth <= 768 ? (
<>
<nav className="nav-footer">
<nav className="footer-item">
<nav className="nav-footer-item" id="toggler">
<Item text={`${nowPage} / ${100}`} />
</nav>
<ProgressBar CountPage={CountPage} />
{toggleIcon === true ? (
<nav
style={{ width: "25px" }}
onClick={() => setToggleIcon(false)}
>
<ScrollVerticalIcon
onClick={() =>
onBookOptionChange({
...bookOption,
flow: "paginated",
})
}
/>
</nav>
) : (
<nav
style={{ width: "25px" }}
onClick={() => setToggleIcon(true)}
>
<ScrollHorizontalIcon
onClick={() =>
onBookOptionChange({
...bookOption,
flow: "scrolled-doc",
})
}
/>
</nav>
)}
</nav>
<Button>خرید کتاب</Button>
</nav>
</>
) : (
""
)}
</> </>
); );
}; };
@ -114,11 +172,10 @@ const Icon = styled.div`
const Button = styled.button` const Button = styled.button`
width: 100%; width: 100%;
justify-content: center;
position: fixed;
bottom: 0;
display: flex;
height: 35px; height: 35px;
display: flex;
justify-content: center;
align-items: center;
padding: 2px 2rem; padding: 2px 2rem;
color: #fff; color: #fff;
font-family: inherit; font-family: inherit;

@ -5,6 +5,7 @@ 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 BookInfo from "components/nav/BookInfo";
// import { Collapse, Button, CardBody, Card } from "reactstrap"; // import { Collapse, Button, CardBody, Card } from "reactstrap";
const Header = ({ const Header = ({
@ -14,30 +15,29 @@ const Header = ({
// onOptionToggle, // onOptionToggle,
onLearningToggle, onLearningToggle,
title, title,
nameBook,
}: Props) => { }: Props) => {
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={() => setIsOpen(!isOpen)} style={{ display: "flex" }} id="toggler"> <nav
<Img onClick={() => setIsOpen(!isOpen)}
src="/react-epub-viewer/images/Setting.svg" style={{ display: "flex" }}
// onClick={onOptionToggle as any} id="toggler"
alt="Logo" >
/> <Img src="/react-epub-viewer/images/Setting.svg" alt="Logo" />
</nav> </nav>
<Img <Img
src="/react-epub-viewer/images/Edit.svg" src="/react-epub-viewer/images/Edit.svg"
alt="Logo" alt="Logo"
onClick={onLearningToggle as any} onClick={onLearningToggle as any}
/> />
</nav> <nav>
<nav> {window.innerWidth > 768 ? <ButtonB>خرید کتاب</ButtonB> : null}
{window.innerWidth > 768 ? <ButtonB>خرید کتاب</ButtonB> : null} </nav>
</nav> </nav>
<nav <nav
style={{ style={{
@ -48,7 +48,10 @@ const Header = ({
> >
<Item text={title as any} /> <Item text={title as any} />
<span style={{ color: "#fff", marginRight: "10px" }}>|</span> <span style={{ color: "#fff", marginRight: "10px" }}>|</span>
<p style={{ margin: "0", color: "#fff" }}></p> {/* <BookInfo/> */}
<div>
<p style={{ margin: "0", color: "#fff" , width: '85px' }}>{nameBook}</p>
</div>
<Logo /> <Logo />
<Img <Img
src="/react-epub-viewer/images/menu.svg" src="/react-epub-viewer/images/menu.svg"
@ -86,11 +89,12 @@ const Img = styled.img`
`; `;
interface Props { interface Props {
title: String; title: String;
nameBook: string;
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; isOpen: any;
setIsOpen:any; setIsOpen: any;
// setsettingicon: (value?: boolean) => void; // setsettingicon: (value?: boolean) => void;
} }

@ -181,7 +181,7 @@ const Reader = ({ url, loadingView }: Props) => {
}); });
} }
}; };
console.log(isScrollHorizontal) console.log(isScrollHorizontal);
const [viewType, setViewType] = useState({ const [viewType, setViewType] = useState({
spread: true, spread: true,
@ -202,13 +202,41 @@ const Reader = ({ url, loadingView }: Props) => {
} }
}; };
const book = useSelector<RootState, Book>((state) => state.book.book);
const [CountPage, setCountPage] = useState(0); const [CountPage, setCountPage] = useState(0);
const [isOpen, setIsOpen] = useState(false); const [isOpen, setIsOpen] = useState(false);
const [color, setcolor] = useState("light-white");
// const Colors = [
// { name: "dark-white", value: "#fff" },
// { name: "dark-blue", value: "#fff" },
// { name: "dark-brown", value: "#fff4e1" },
// { name: "light-white", value: "#121212" },
// { name: "light-brown", value: "#af622e" },
// { name: "light-blue", value: "#5858df" },
// ];
const readyColors = [
{ name: "dark-white", value: "#121212" },
{ name: "light-white", value: "#fff" },
{ name: "dark-blue", value: "#5858d3" },
{ name: "dark-brown", value: "#af622e" },
{ name: "light-brown", value: "#fff4e1" },
{ name: "light-blue", value: "#C3DDFF" },
];
const colorHandler = (color: any) => {
let myColor = readyColors.filter((item) => item.name === color);
return myColor[0].value;
};
return ( return (
<> <>
<ViewerWrapper> <ViewerWrapper>
<Header <Header
nameBook={book.title}
title={currentLocation.chapterName} title={currentLocation.chapterName}
onNavToggle={onNavToggle} onNavToggle={onNavToggle}
onOptionToggle={onOptionToggle} onOptionToggle={onOptionToggle}
@ -217,6 +245,7 @@ const Reader = ({ url, loadingView }: Props) => {
setIsOpen={setIsOpen} setIsOpen={setIsOpen}
/> />
<Setting <Setting
setcolor={setcolor}
setBookStyle={setBookStyle} setBookStyle={setBookStyle}
bookStyle={bookStyle} bookStyle={bookStyle}
bookOption={bookOption} bookOption={bookOption}
@ -226,9 +255,10 @@ const Reader = ({ url, loadingView }: Props) => {
<nav <nav
style={{ style={{
backgroundColor: colorHandler(color),
display: "flex", display: "flex",
justifyContent: "center", justifyContent: "center",
marginTop: "1rem", paddingTop: "1rem",
}} }}
> >
{window.innerWidth < 768 ? ( {window.innerWidth < 768 ? (
@ -364,23 +394,29 @@ const Reader = ({ url, loadingView }: Props) => {
); );
}; };
const ReaderWrapper = ({ url, loadingView }: Props) => { const ReaderWrapper = ({ url, loadingView, colorHandler }: Props) => {
return ( return (
<> <>
<Provider store={store}> <Provider store={store}>
<Reader url={url} loadingView={loadingView} /> <Reader
colorHandler={colorHandler}
url={url}
loadingView={loadingView}
/>
</Provider> </Provider>
</> </>
); );
}; };
interface Props { interface Props {
colorHandler?: () => void;
viewerStyle?: BookStyle; viewerStyle?: BookStyle;
url: string; url: string;
loadingView?: React.ReactNode; loadingView?: React.ReactNode;
isOpen?: any; isOpen?: any;
setIsOpen?: any; setIsOpen?: any;
setIsScrollHorizontal?: any; setIsScrollHorizontal?: any;
color?: any;
} }
export default ReaderWrapper; export default ReaderWrapper;

Loading…
Cancel
Save