footer icons

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 (
+    <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>
+  );
+}

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 (
-    <div className={(classes.root, "root")}>
-      <PrettoSlider
-        track="inverted"
-        value={CountPage}
-        max={100}
-        min={1}
-        // marks={true}
-      />
-    </div>
+    <>
+      <Slider CountPage={CountPage} />
+    </>
   );
 }

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

src/components/style/slider.scss

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

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

src/containers/Reader.tsx

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