From 18214bcf105cd9802c5a64603abaa0548d4794bd Mon Sep 17 00:00:00 2001 From: taha12322 <66300435+taha12322@users.noreply.github.com> Date: Fri, 27 Aug 2021 07:07:57 +0430 Subject: [PATCH] footer icons --- src/components/footer/Slider.js | 30 +++++ src/components/footer/progressBar.js | 53 +-------- src/components/style/index.scss | 43 ++++---- src/components/style/slider.scss | 1 - src/containers/Footer.tsx | 157 ++++++++++++++++----------- src/containers/Reader.tsx | 2 +- 6 files changed, 147 insertions(+), 139 deletions(-) create mode 100644 src/components/footer/Slider.js diff --git a/src/components/footer/Slider.js b/src/components/footer/Slider.js new file mode 100644 index 0000000..43cd3f5 --- /dev/null +++ b/src/components/footer/Slider.js @@ -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 ( +
+
+ +
+ ); +} \ No newline at end of file diff --git a/src/components/footer/progressBar.js b/src/components/footer/progressBar.js index 6eef1a9..81176d7 100644 --- a/src/components/footer/progressBar.js +++ b/src/components/footer/progressBar.js @@ -1,57 +1,12 @@ import React from "react"; -import { withStyles, makeStyles } from "@material-ui/core/styles"; -import Slider from "@material-ui/core/Slider"; import "components/style/slider.scss"; -const useStyles = makeStyles((theme) => ({ - 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); +import Slider from "./Slider"; export default function ProgressBar(props) { - const classes = useStyles(); const { CountPage } = props; return ( -
- -
+ <> + + ); } diff --git a/src/components/style/index.scss b/src/components/style/index.scss index d34f06d..7fb96c1 100644 --- a/src/components/style/index.scss +++ b/src/components/style/index.scss @@ -1,31 +1,30 @@ -@import './colors'; +@import "./colors"; @font-face { - font-family: 'Nazanin'; - src: local('Nazanin'), url(../fonts/Nazanin.woff) format('woff'); - } - + font-family: "Nazanin"; + src: local("Nazanin"), url(../fonts/Nazanin.woff) format("woff"); +} - @font-face { - font-family: 'Sans'; - src: local('IRANSansWeb'), url(../fonts/IRANSansWeb.woff) format('woff'); - } +@font-face { + font-family: "Sans"; + src: local('IRANSansWeb'), url(../fonts/IRANSansWeb.woff) format('woff'); +} - @font-face { - font-family: 'SansNum'; - src: local('IRANSansWebFaNum'), url(../fonts/IRANSansWebFaNum.woff) format('woff'); - } +@font-face { + font-family: "SansNum"; + src: local('IRANSansWeb'), url(../fonts/IRANSansWeb.woff) format('woff'); +} body { - margin: 0; - padding: 0; - color: $green; - font-family: 'SansNum' , 'Sans' , 'Nazanin'; - text-align: right; - overflow: hidden; + margin: 0; + padding: 0; + color: $green; + font-family: "SansNum", "Sans", "Nazanin"; + text-align: right; + overflow: hidden; } -html,body,#root{ +html, +body, +#root { height: 100%; } - - diff --git a/src/components/style/slider.scss b/src/components/style/slider.scss index 73a115c..14312dd 100644 --- a/src/components/style/slider.scss +++ b/src/components/style/slider.scss @@ -7,7 +7,6 @@ @media screen and (max-width: 1024px) { .root { width: 800px; - } } diff --git a/src/containers/Footer.tsx b/src/containers/Footer.tsx index 6ac306c..3cb71d0 100644 --- a/src/containers/Footer.tsx +++ b/src/containers/Footer.tsx @@ -19,6 +19,7 @@ const Footer = ({ // title, nowPage, totalPage, + viewType, // onPageMove, CountPage, onClickDirection, @@ -26,19 +27,41 @@ const Footer = ({ onBookOptionChange, bookOption, }: Props) => { - const [Icon, setIcon] = useState(false); - - const changeIcone = () => { - setIcon(!Icon); - }; - const [active, setActive] = useState(1); - const [toggleIcon, setToggleIcon] = useState(false); - const onToggle = () => { - setToggleIcon(false); - if (active === 1 || 2) { - setActive(3); - } - }; + //scroll onepage + //noscoroll onepage + //noscroll twopage + + const [scrollToggle, setScrollToggle] = useState(false); + + // const [settingIcons, setSettingIcons] = useState({ + // scroll: 0, + // onePage: 0, + // twoPage: 0, + // 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 ( <> @@ -53,37 +76,39 @@ const Footer = ({ - -