slider pageNumber Button buy book Setting

not complited collaps
3 years ago · db4037dd07
parent 16cac55ec0
commit db4037dd07
15 changed files with 351 additions and 169 deletions
--- a/package.json
+++ b/package.json
@ -42,6 +42,7 @@
  "dependencies": {
    "@material-ui/core": "^4.12.3",
    "@material-ui/icons": "^4.11.2",
+    "bootstrap": "^5.1.0",
    "epubjs": "^0.3.88",
    "node-sass": "4.14.1",
    "react-epub-viewer": "^0.1.7",
--- a/public/index.html
+++ b/public/index.html
@ -21,11 +21,17 @@

      @font-face {
        font-family: "SansNum";
-        src: url(../fonts/IRANSansWebFaNum.woff);
+        src: url(%PUBLIC_URL%/css/IRANSansWebFaNum.woff);
      }
-      * , body {
+      *,
+      body {
        font-family: Sans, Nazanin;
      }
+
+      .nav-footer-item > div > span {
+        font-family: "SansNum" !important;
+        color: #000 !important;
+      }
    </style>
  </head>
  <body>
--- a/src/components/Setting/setting.js
+++ b/src/components/Setting/setting.js
@ -1,6 +1,5 @@
 import React from 'react'
 import { UncontrolledCollapse, Card } from 'reactstrap'
-import '../../../src/components/style/setting.scss'
 import Fontstyle from './FontStyle/Fontstyle'
 import Colors from './FontColor/colors'
 import FontSize from './FontSize/fontsize'
@ -8,6 +7,7 @@ import LineHeight from './LineHeight/lineheight'

 const Setting = (props) => {
  const {
+    isOpen,
    setIsChecked,
    isChecked,
    countersize,
@ -22,8 +22,7 @@ const Setting = (props) => {

  return (
    <>
-
-        <Card>
+        <Card isOpen={isOpen}>
          <nav className="nav-content">
            <nav className="nav-items">
              <Colors
--- a/src/components/contextMenu/Item.tsx
+++ b/src/components/contextMenu/Item.tsx
@ -13,7 +13,7 @@ const Container = styled.button`
  line-height: 32px;
  text-align: center;
  font-size: 14px;
-  color: #ccc;
+  color: #000;
  transition: .1s ${styles.transition};
  background-color: rgba(0,0,0,0);
  border-radius: 6px;
--- a/src/components/footer/Item.tsx
+++ b/src/components/footer/Item.tsx
@ -1,6 +1,6 @@
-import styled from 'styled-components'
+import styled from "styled-components";
 // lib
-import palette from 'lib/styles/palette'
+import palette from "lib/styles/palette";

 const Item = ({ text }: Props) => {
  return (
@ -8,7 +8,7 @@ const Item = ({ text }: Props) => {
      <span>{text}</span>
    </Container>
  );
-}
+};

 const Container = styled.div`
  height: 100%;
--- a/src/components/footer/Wrapper.tsx
+++ b/src/components/footer/Wrapper.tsx
@ -12,6 +12,10 @@ const Wrapper = styled.div`
  align-items: center;
  justify-content: center;
  background-color: ${palette.white};
+
+  $ < span {
+    color: #000 ;
+  }
 `;

 export default Wrapper
--- a/src/components/footer/progressBar.js
+++ b/src/components/footer/progressBar.js
@ -0,0 +1,59 @@
+import React from 'react'
+import { withStyles, makeStyles } from '@material-ui/core/styles'
+import Slider from '@material-ui/core/Slider'
+const useStyles = makeStyles((theme) => ({
+  root: {
+    width: 500 + theme.spacing(0),
+  },
+  margin: {
+    height: theme.spacing(3),
+  },
+}))
+
+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) {
+  const classes = useStyles()
+  const { CountPage } = props;
+  return (
+    <div className={classes.root}>
+      <PrettoSlider
+        track="inverted"
+        value={CountPage}
+        max={100}
+        min={1}
+        marks={true}
+      />
+    </div>
+  )
+}
--- a/src/components/nav/NavItem.tsx
+++ b/src/components/nav/NavItem.tsx
@ -30,8 +30,8 @@ const Content = styled.button`

  &:focus, &:hover {
    & > span {
-      color: ${palette.blue3};
-      margin-left: 12px;
+      color: rgb(0, 154, 168);
+      margin-right: 12px;
    }
  }

--- a/src/components/note/Layout.tsx
+++ b/src/components/note/Layout.tsx
@ -6,6 +6,9 @@ const Layout = styled.div`
  flex-direction: column;
  box-sizing: border-box;
  padding: 24px 0;
+  &:focus, &:hover < div { {
+      color: rgb(0, 154, 168);
+    }
 `;

 export default Layout
--- a/src/components/option/Layout.tsx
+++ b/src/components/option/Layout.tsx
@ -3,6 +3,7 @@ import styled from 'styled-components'
 const Wrapper = styled.div`
  box-sizing: border-box;
  padding: 24px;
+  direction: ltr;
 `;

 export default Wrapper
--- a/src/containers/Footer.tsx
+++ b/src/containers/Footer.tsx
@ -3,12 +3,31 @@ import Wrapper from "components/footer/Wrapper";
 import Item from "components/footer/Item";
 import MoveBtn from "components/footer/MoveBtn";
 import styled from "styled-components";
+import ProgressBar from "../components/footer/progressBar";

-const Footer = ({ title, nowPage, totalPage, onPageMove }: Props) => {
+const Footer = ({
+  title,
+  nowPage,
+  totalPage,
+  onPageMove,
+  CountPage,
+}: Props) => {
  return (
    <>
      <Wrapper>
-        {/* <Item text={`${nowPage} / ${totalPage}`} /> */}
+        <nav
+          style={{
+            display: "flex",
+            justifyContent: "space-between",
+            padding: "0rem 2rem",
+            width: "100%",
+          }}
+        >
+          <nav className="nav-footer-item" id="toggler">
+            <Item text={`${nowPage} / ${totalPage}`} />
+          </nav>
+          <ProgressBar CountPage={CountPage} />
+        </nav>
        {window.innerWidth < 768 ? <Button>خرید کتاب</Button> : null}
      </Wrapper>
    </>
@ -30,6 +49,7 @@ interface Props {
  title: string;
  nowPage: number;
  totalPage: number;
+  CountPage: number;
  onPageMove: (type: "PREV" | "NEXT") => void;
 }

--- a/src/containers/Header.tsx
+++ b/src/containers/Header.tsx
@ -1,9 +1,11 @@
 // components
+import { useState } from "react";
 import styled from "styled-components";
 import Wrapper from "components/header/Wrapper";
 import Layout, { AutoLayout } from "components/header/Layout";
 import Logo from "components/header/Logo";
 import Item from "components/footer/Item";
+import Setting from "components/Setting/setting";

 const Header = ({
  onNavToggle,
@ -11,16 +13,22 @@ const Header = ({
  onLearningToggle,
  title,
 }: Props) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const toggle = () => setIsOpen(!isOpen);
  return (
+    <>
      <Wrapper>
        <Layout>
          <AutoLayout style={{ backgroundColor: "#009AA8" }}>
            <nav style={{ display: "flex", marginLeft: "16px" }}>
+              <nav onClick={toggle} style={{ display: "flex" }} id="toggler">
                <Img
                  src="/react-epub-viewer/images/Setting.svg"
                  onClick={onOptionToggle as any}
                  alt="Logo"
                />
+              </nav>
              <Img
                src="/react-epub-viewer/images/Edit.svg"
                alt="Logo"
@ -39,8 +47,7 @@ const Header = ({
            >
              <Item text={title as any} />
              <span style={{ color: "#fff", marginRight: "10px" }}>|</span>
-            <p style={{ margin: "0", color: "#fff" }}>
-            </p>
+              <p style={{ margin: "0", color: "#fff" }}></p>
              <Logo />
              <Img
                src="/react-epub-viewer/images/menu.svg"
@ -54,6 +61,8 @@ const Header = ({
          </AutoLayout>
        </Layout>
      </Wrapper>
+      <Setting isOpen={isOpen}/>
+    </>
  );
 };

--- a/src/containers/Reader.tsx
+++ b/src/containers/Reader.tsx
@ -63,7 +63,7 @@ const Reader = ({ url, loadingView }: Props) => {
  });

  const [navControl, onNavToggle] = useMenu(navRef, 300);
-  const [optionControl, onOptionToggle, emitEvent] = useMenu(optionRef, 5000);
+  const [optionControl, onOptionToggle, emitEvent] = useMenu(optionRef, 300);
  const [learningControl, onLearningToggle] = useMenu(learningRef, 300);
  const {
    selection,
@ -166,15 +166,19 @@ const Reader = ({ url, loadingView }: Props) => {
    setsettingicon(!settingicon);
  };

+  const [CountPage, setCountPage] = useState(0);
+
  return (
    <>
      <ViewerWrapper>
        <Header
          title={currentLocation.chapterName}
+
          onNavToggle={onNavToggle}
          onOptionToggle={onOptionToggle}
          onLearningToggle={onLearningToggle}
        />
+
        <nav
          style={{
            display: "flex",
@ -183,6 +187,8 @@ const Reader = ({ url, loadingView }: Props) => {
          }}
        >
          {window.innerWidth < 768 ? (
+            <>
+              <nav onClick={() => setCountPage(CountPage + 1)}>
                <button
                  style={{
                    opacity: "0",
@ -197,10 +203,19 @@ const Reader = ({ url, loadingView }: Props) => {
                >
                  <ArrowBackIosRoundedIcon />
                </button>
+              </nav>
+            </>
          ) : (
+            <>
+              <nav
+                style={{ display: "flex" }}
+                onClick={() => setCountPage(CountPage + 1)}
+              >
                <button onClick={() => onPageMove("NEXT")}>
                  <ArrowBackIosRoundedIcon />
                </button>
+              </nav>
+            </>
          )}

          <nav style={{ overflow: "hidden" }}>
@ -218,6 +233,8 @@ const Reader = ({ url, loadingView }: Props) => {
            />
          </nav>
          {window.innerWidth < 768 ? (
+            <>
+              <nav onClick={() => setCountPage(CountPage - 1)}>
                <button
                  style={{
                    opacity: "0",
@ -231,14 +248,24 @@ const Reader = ({ url, loadingView }: Props) => {
                >
                  <ArrowForwardIosRoundedIcon />
                </button>
+              </nav>
+            </>
          ) : (
+            <>
+              <nav
+                style={{ display: "flex" }}
+                onClick={() => setCountPage(CountPage - 1)}
+              >
                <button onClick={() => onPageMove("PREV")}>
                  <ArrowForwardIosRoundedIcon />
                </button>
+              </nav>
+            </>
          )}
        </nav>

        <Footer
+          CountPage={CountPage}
          title={currentLocation.chapterName}
          nowPage={currentLocation.currentPage}
          totalPage={currentLocation.totalPage}
--- a/src/containers/menu/Option.tsx
+++ b/src/containers/menu/Option.tsx
@ -11,6 +11,10 @@ import ControlIconBtn from "components/option/ControlIconBtn";
 import { BookStyle, BookFontFamily, BookFlow } from "types/book";
 import { MenuControl } from "lib/hooks/useMenu";
 import { BookOption } from "types/book";
+import * as styles from 'lib/styles/styles'
+import palette from 'lib/styles/palette'
+import styled, { css } from 'styled-components'
+
 import Setting from "components/Setting/setting";

 const Option = (
@ -140,43 +144,7 @@ const Option = (
          ref={ref}
        >
          <OptionLayout>
-          <Setting/>
-          </OptionLayout>
-
-
-        </Wrapper>
-      )}
-    </>
-  );
-};
-
-interface Props {
-  control: MenuControl;
-  bookStyle: BookStyle;
-  bookOption: BookOption;
-  bookFlow: BookFlow;
-  onToggle: () => void;
-  emitEvent: () => void;
-  onBookStyleChange: (bookStyle: BookStyle) => void;
-  onBookOptionChange: (bookOption: BookOption) => void;
-}
-
-type SliderType =
-  | "FontSize"
-  | "LineHeight"
-  | "MarginHorizontal"
-  | "MarginVertical";
-
-type ViewType = {
-  active: boolean;
-  spread: boolean;
-};
-
-export default React.forwardRef(Option);
-
-
-
-{/* <ControlIconBtnWrapper title="View Direction">
+            <ControlIconBtnWrapper title="نحوه دیدن صفحه">
              <ControlIconBtn
                type="ScrollHorizontal"
                alt="Horizontal View"
@ -192,31 +160,31 @@ export default React.forwardRef(Option);
                onClick={() => onClickDirection("Vertical")}
              />
            </ControlIconBtnWrapper>
-<ControlIconBtnWrapper title="View Spread">
+            <ControlIconBtnWrapper title="حالت صفحه">
              <ControlIconBtn
                type="BookOpen"
-  alt="Two Page View"
+                alt="دو صفحه"
                active={viewType.active}
                isSelected={viewType.spread}
                onClick={() => onClickViewType(true)}
              />
              <ControlIconBtn
                type="BookClose"
-  alt="One Page View"
+                alt="تک صفحه"
                active={viewType.active}
                isSelected={!viewType.spread}
                onClick={() => onClickViewType(false)}
              />
            </ControlIconBtnWrapper>
            <OptionDropdown
-title="Font"
+              title="فونت"
              defaultValue={fontFamily}
              valueList={["Nazanin", "Sans"]}
              onSelect={onSelectFontFamily}
            />
            <OptionSlider
              active={true}
-title="Size"
+              title="اندازه"
              minValue={8}
              maxValue={36}
              defaultValue={fontSize}
@ -225,14 +193,27 @@ onChange={(e) => onChangeSlider("FontSize", e)}
            />
            <OptionSlider
              active={true}
-title="Line height"
+              title="فاصله ی بین خط ها"
              minValue={1}
              maxValue={3}
              defaultValue={lineHeight}
              step={0.1}
              onChange={(e) => onChangeSlider("LineHeight", e)}
            />
-<OptionSlider
+            <OptionTitle>رنگ ها</OptionTitle>
+            <BtnWrapper>
+              <Btn>الف</Btn>
+              <Btn>الف</Btn>
+              <Btn>الف</Btn>
+              <Btn>الف</Btn>
+            </BtnWrapper>
+            <BtnWrapper>
+              <Btn>الف</Btn>
+              <Btn>الف</Btn>
+              <Btn>الف</Btn>
+              <Btn>الف</Btn>
+            </BtnWrapper>
+            {/* <OptionSlider
              active={true}
              title="Horizontal margin"
              minValue={0}
@ -240,8 +221,8 @@ maxValue={100}
              defaultValue={marginHorizontal}
              step={1}
              onChange={(e) => onChangeSlider("MarginHorizontal", e)}
-/>
-<OptionSlider
+            /> */}
+            {/* <OptionSlider
              active={bookFlow === "paginated"}
              title="Vertical margin"
              minValue={0}
@ -250,3 +231,70 @@ defaultValue={marginVertical}
              step={1}
              onChange={(e) => onChangeSlider("MarginVertical", e)}
            /> */}
+          </OptionLayout>
+        </Wrapper>
+      )}
+    </>
+  );
+};
+
+interface Props {
+  control: MenuControl;
+  bookStyle: BookStyle;
+  bookOption: BookOption;
+  bookFlow: BookFlow;
+  onToggle: () => void;
+  emitEvent: () => void;
+  onBookStyleChange: (bookStyle: BookStyle) => void;
+  onBookOptionChange: (bookOption: BookOption) => void;
+}
+
+
+
+const Btn = styled.button`
+  position: relative;
+  height: 100%;
+  padding: 0 12px;
+  dispayl: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 0;
+  transition: .3s ${styles.transition};
+  outline: none;
+  &::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    margin: auto;
+    z-index: -1;
+    border-radius: 30px;
+    transition: .1s ${styles.transition};
+    background-color: rgb(0, 154, 168);
+  };
+`;
+const BtnWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  padding: 8px 0;
+`;
+const OptionTitle = styled.div`
+  font-size: 14px;
+  font-weight: 500;
+  margin-bottom: 16px;
+`;
+type SliderType =
+  | "FontSize"
+  | "LineHeight"
+  | "MarginHorizontal"
+  | "MarginVertical";
+
+type ViewType = {
+  active: boolean;
+  spread: boolean;
+};
+
+export default React.forwardRef(Option);
--- a/yarn.lock
+++ b/yarn.lock
@ -3301,6 +3301,11 @@ boolbase@^1.0.0, boolbase@~1.0.0:
  resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
  integrity sha1-aN/1++YMUes3cl6p4+0xDcwed24=

+bootstrap@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-5.1.0.tgz#543ef8f44f4b9af67b0230f19508542fec38ef55"
+  integrity sha512-bs74WNI9BgBo3cEovmdMHikSKoXnDgA6VQjJ7TyTotU6L7d41ZyCEEelPwkYEzsG/Zjv3ie9IE3EMAje0W9Xew==
+
 brace-expansion@^1.1.7:
  version "1.1.11"
  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"