footer icons

demo
taha12322 3 years ago
parent fe9efa7128
commit 18214bcf10
  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

@ -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>
);
}

@ -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>
); );
} }

@ -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%;
} }

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

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

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

Loading…
Cancel
Save