taha
/
epub_Reader
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

footer icons

Browse Source
demo
taha12322 3 years ago
parent fe9efa7128
commit 18214bcf10
6 changed files with 147 additions and 139 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. 30
      src/components/footer/Slider.js
  2. 53
      src/components/footer/progressBar.js
  3. 43
      src/components/style/index.scss
  4. 1
      src/components/style/slider.scss
  5. 157
      src/containers/Footer.tsx
  6. 2
      src/containers/Reader.tsx

30
src/components/footer/Slider.js
Unescape View File

@ -0,0 +1,30 @@
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Slider from '@material-ui/core/Slider';
const useStyles = makeStyles((theme) => ({
root: {
width: 825,
},
margin: {
height: theme.spacing(1),
},
}));
export default function TrackInvertedSlider({CountPage}) {
const classes = useStyles();
return (
<div className={classes.root}>
<div className={classes.margin} />
<Slider
// min={0}
// value={CountPage}
track="inverted"
aria-labelledby="track-inverted-range-slider"
value={1 - CountPage}
max={100}
/>
</div>
);
}

53
src/components/footer/progressBar.js
Unescape View File

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

43
src/components/style/index.scss
Unescape View File

@ -1,31 +1,30 @@
@import './colors'; @import "./colors";
@font-face { @font-face {
font-family: 'Nazanin'; font-family: "Nazanin";
src: local('Nazanin'), url(../fonts/Nazanin.woff) format('woff'); src: local("Nazanin"), url(../fonts/Nazanin.woff) format("woff");
} }
@font-face { @font-face {
font-family: 'Sans'; font-family: "Sans";
src: local('IRANSansWeb'), url(../fonts/IRANSansWeb.woff) format('woff'); src: local('IRANSansWeb'), url(../fonts/IRANSansWeb.woff) format('woff');
} }
@font-face { @font-face {
font-family: 'SansNum'; font-family: "SansNum";
src: local('IRANSansWebFaNum'), url(../fonts/IRANSansWebFaNum.woff) format('woff'); src: local('IRANSansWeb'), url(../fonts/IRANSansWeb.woff) format('woff');
} }
body { body {
margin: 0; margin: 0;
padding: 0; padding: 0;
color: $green; color: $green;
font-family: 'SansNum' , 'Sans' , 'Nazanin'; font-family: "SansNum", "Sans", "Nazanin";
text-align: right; text-align: right;
overflow: hidden; overflow: hidden;
} }
html,body,#root{ html,
body,
#root {
height: 100%; height: 100%;
} }

1
src/components/style/slider.scss
Unescape View File

@ -7,7 +7,6 @@
@media screen and (max-width: 1024px) { @media screen and (max-width: 1024px) {
.root { .root {
width: 800px; width: 800px;
} }
} }

157
src/containers/Footer.tsx
Unescape View File

@ -19,6 +19,7 @@ const Footer = ({
// title, // title,
nowPage, nowPage,
totalPage, totalPage,
viewType,
// onPageMove, // onPageMove,
CountPage, CountPage,
onClickDirection, onClickDirection,
@ -26,19 +27,41 @@ const Footer = ({
onBookOptionChange, onBookOptionChange,
bookOption, bookOption,
}: Props) => { }: Props) => {
const [Icon, setIcon] = useState(false); //scroll onepage
//noscoroll onepage
const changeIcone = () => { //noscroll twopage
setIcon(!Icon);
}; const [scrollToggle, setScrollToggle] = useState(false);
const [active, setActive] = useState(1);
const [toggleIcon, setToggleIcon] = useState(false); // const [settingIcons, setSettingIcons] = useState({
const onToggle = () => { // scroll: 0,
setToggleIcon(false); // onePage: 0,
if (active === 1 || 2) { // twoPage: 0,
setActive(3); // noscroll: 0,
} // });
};
// const changeActiveHandler = () => {
// if (toggleIcon === 1) {
// setSettingIcons({
// ...settingIcons,
// noscroll: 1,
// });
// } else if (toggleIcon === 2) {
// setSettingIcons({
// ...settingIcons,
// scroll: 1,
// });
// }
// };
// const [active, setActive] = useState(1);
// const [toggleIcon, setToggleIcon] = useState(false);
// const onToggle = () => {
// if (active === 1 || 2) {
// setActive(3);
// }
// setToggleIcon(false);
// };
return ( return (
<> <>
<Wrapper> <Wrapper>
@ -53,37 +76,39 @@ const Footer = ({
<nav className="nav-footer-item" id="toggler"> <nav className="nav-footer-item" id="toggler">
<Item text={`${nowPage} / ${totalPage}`} /> <Item text={`${nowPage} / ${totalPage}`} />
</nav> </nav>
<ProgressBar CountPage={CountPage} /> <nav style={{ direction: "rtl" }}>
<nav onClick={() => changeIcone()} className="nav-icon"> <ProgressBar CountPage={CountPage} />
</nav>
{/* icons in desktop setting */}
<nav className="nav-icon">
{window.innerWidth > 768 ? ( {window.innerWidth > 768 ? (
<div className="display-icon" style={{ cursor: "pointer" }}> <div className="display-icon" style={{ cursor: "pointer" }}>
<nav <nav
style={{ width: "65px", marginLeft: "1rem", display: "flex" }} style={{ width: "65px", marginLeft: "1rem", display: "flex" }}
> >
<nav <nav
className={`${active === 1 ? "active" : null} icon`} style={{
onClick={ width: "65px",
toggleIcon ? () => setActive(3) : () => setActive(1) }}
} className={`${viewType.spread ? "active" : ''}`}
> >
<BookOpenIcon <BookOpenIcon onClick={() => !scrollToggle ? onClickViewType(true) : null } />
className={`${toggleIcon ? "icons-disable" : ""}`}
onClick={toggleIcon ? null : () => onClickViewType(true)}
/>
</nav> </nav>
<nav <nav
className={`${active === 2 ? "active" : null} icon`} style={{
onClick={ width: "65px",
toggleIcon ? () => setActive(3) : () => setActive(2) }}
} className={`${!viewType.spread ? "active" : ''}`}
> >
<BookCloseIcon <BookCloseIcon onClick={() => onClickViewType(false)} />
className={`${toggleIcon ? "icons-disable" : ""}`}
onClick={toggleIcon ? null : () => onClickViewType(false)}
/>
</nav> </nav>
{toggleIcon === true ? ( {scrollToggle ? (
<nav style={{ width: "65px" }} onClick={onToggle}> <nav
style={{ width: "65px" }}
onClick={() => setScrollToggle(!scrollToggle)}
>
<ScrollVerticalIcon <ScrollVerticalIcon
onClick={() => onClick={() =>
onBookOptionChange({ onBookOptionChange({
@ -96,7 +121,7 @@ const Footer = ({
) : ( ) : (
<nav <nav
style={{ width: "65px" }} style={{ width: "65px" }}
onClick={() => setToggleIcon(true)} onClick={() => !viewType.spread ? setScrollToggle(!scrollToggle) :setScrollToggle(false) }
> >
<ScrollHorizontalIcon <ScrollHorizontalIcon
onClick={() => onClick={() =>
@ -116,6 +141,9 @@ const Footer = ({
</nav> </nav>
</nav> </nav>
</Wrapper> </Wrapper>
{/* mobile icon footer */}
{window.innerWidth <= 768 ? ( {window.innerWidth <= 768 ? (
<> <>
<nav className="nav-footer"> <nav className="nav-footer">
@ -124,38 +152,34 @@ const Footer = ({
<Item text={`${nowPage} / ${100}`} /> <Item text={`${nowPage} / ${100}`} />
</nav> </nav>
<ProgressBar CountPage={CountPage} /> <ProgressBar CountPage={CountPage} />
{toggleIcon === true ? (
<nav {/* icons in right of pages setting */}
style={{
width: "25px", <nav
marginLeft: "1rem", style={{
}} width: "25px",
onClick={() => setToggleIcon(false)} marginLeft: "1rem",
> }}
<ScrollVerticalIcon >
onClick={() => <ScrollVerticalIcon
onBookOptionChange({ onClick={() =>
...bookOption, onBookOptionChange({
flow: "paginated", ...bookOption,
}) flow: "paginated",
} })
/> }
</nav> />
) : ( </nav>
<nav <nav style={{ width: "25px", marginLeft: "1rem" }}>
style={{ width: "25px", marginLeft: "1rem" }} <ScrollHorizontalIcon
onClick={() => setToggleIcon(true)} onClick={() =>
> onBookOptionChange({
<ScrollHorizontalIcon ...bookOption,
onClick={() => flow: "scrolled-doc",
onBookOptionChange({ })
...bookOption, }
flow: "scrolled-doc", />
}) </nav>
}
/>
</nav>
)}
</nav> </nav>
<Button>خرید کتاب</Button> <Button>خرید کتاب</Button>
</nav> </nav>
@ -199,6 +223,7 @@ interface Props {
totalPage: number; totalPage: number;
CountPage: number; CountPage: number;
bookOption: any; bookOption: any;
viewType: any;
onPageMove: (type: "PREV" | "NEXT") => void; onPageMove: (type: "PREV" | "NEXT") => void;
} }

2
src/containers/Reader.tsx
Unescape View File

@ -182,7 +182,6 @@ const Reader = ({ url, loadingView }: Props) => {
}); });
} }
}; };
console.log(isScrollHorizontal);
const [viewType, setViewType] = useState({ const [viewType, setViewType] = useState({
spread: true, spread: true,
@ -342,6 +341,7 @@ const Reader = ({ url, loadingView }: Props) => {
</nav> </nav>
<Footer <Footer
viewType={viewType}
bookOption={bookOption} bookOption={bookOption}
onBookOptionChange={onBookOptionChange} onBookOptionChange={onBookOptionChange}
onClickViewType={onClickViewType} onClickViewType={onClickViewType}

Write Preview
Loading…
Cancel
Save