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

footer finished (responsive)

Browse Source 
background color of the iftram finished
color of the book (not finished)
demo
taha12322 3 years ago
parent 741b12261b
commit 78f4b96430
9 changed files with 245 additions and 74 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 6
      src/components/Setting/FontColor/Colors/chosecolor.js
  2. 4
      src/components/Setting/FontColor/colors.js
  3. 2
      src/components/Setting/setting.js
  4. 54
      src/components/footer/progressBar.js
  5. 30
      src/components/style/footerStyle.scss
  6. 48
      src/components/style/slider.scss
  7. 87
      src/containers/Footer.tsx
  8. 26
      src/containers/Header.tsx
  9. 44
      src/containers/Reader.tsx

6
src/components/Setting/FontColor/Colors/chosecolor.js
Unescape View File

@ -4,15 +4,11 @@ import '../../../style/chosecolor.scss';
const Chosecolor = (props) => {
const {setcolor} = props;
const {setcolor , isChecked} = props;
const changeColorHandler = (value) => {
setcolor(value)
}
const {isChecked} = props;
return (
<>
{isChecked ?

4
src/components/Setting/FontColor/colors.js
Unescape View File

@ -7,10 +7,12 @@ import { Dropdown, DropdownToggle, DropdownMenu } from 'reactstrap';
const Colors = (props) => {
const { setcolor, color} = props;
const [dropdownOpen, setDropdownOpen] = useState(false);
const toggle = () => setDropdownOpen(prevState => !prevState);
const {setIsChecked, isChecked , setcolor , color } = props;
const [isChecked, setIsChecked] = useState(false)
const [Icon, seticon] = useState(PalletColorOutline);
const changeIcone = () => {

2
src/components/Setting/setting.js
Unescape View File

@ -30,9 +30,9 @@ const Setting = (props) => {
<nav className="nav-content">
<nav className="nav-items">
<Colors
setcolor={setcolor}
setIsChecked={setIsChecked}
isChecked={isChecked}
setcolor={setcolor}
color={color}
/>
</nav>

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

@ -1,52 +1,50 @@
import React from 'react'
import { withStyles, makeStyles } from '@material-ui/core/styles'
import Slider from '@material-ui/core/Slider'
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) => ({
root: {
width: 900 + theme.spacing(0),
},
margin: {
height: theme.spacing(3),
height: theme.spacing(0),
},
}))
}));
const PrettoSlider = withStyles({
root: {
color: '#009AA8',
height: '5px',
color: "#009AA8",
height: "5px",
padding: 0,
direction: 'rtl !important',
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',
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',
height: "5px",
borderRadius: 4,
direction: 'rtl !important',
direction: "rtl !important",
},
rail: {
height: '5px',
height: "5px",
borderRadius: 4,
},
})(Slider)
})(Slider);
export default function ProgressBar(props) {
const classes = useStyles()
const classes = useStyles();
const { CountPage } = props;
return (
<div className={classes.root}>
<div className={(classes.root, "root")}>
<PrettoSlider
track="inverted"
value={CountPage}
@ -55,5 +53,5 @@ export default function ProgressBar(props) {
marks={true}
/>
</div>
)
);
}

30
src/components/style/footerStyle.scss
Unescape View File

@ -1,4 +1,34 @@
@import './colors';
.icons-disable {
opacity: 0.3;
cursor: auto;
}
.nav-footer {
background-color: #fff;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
.footer-item {
display: flex;
justify-content: space-evenly;
padding: 0 5px;
align-items: center;
margin-bottom: 5px;
}
}
.active{
border-radius: 20%;
width: 65px;
background-color: #009aa873;
}
.icon{
width: 65px;
}

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

@ -0,0 +1,48 @@
.root {
width: 900px;
}
@media screen and (max-width: 1024px) {
.root {
width: 800px;
}
}
@media screen and (max-width: 768px) {
.root {
width: 600px;
}
}
@media screen and (max-width: 530px) {
.root {
width: 280px;
}
}
@media screen and (max-width: 425px) {
.root {
width: 295px;
}
}
@media screen and (max-width: 375px) {
.root {
width: 230px;
}
}
@media screen and (max-width: 320px) {
.root {
width: 175px;
}
}
//1024 => 800
//768 => 600
//530 => 390
//425 => 285
//375 => 245
//320 => 175

87
src/containers/Footer.tsx
Unescape View File

@ -31,9 +31,15 @@ const Footer = ({
const changeIcone = () => {
setIcon(!Icon);
};
const [active, setActive] = useState(1);
const [toggleIcon, setToggleIcon] = useState(false);
const onToggle = () => {
setToggleIcon(false);
if (active === 1 || 2) {
setActive(3);
}
const [toggleIcon, setToggleIcon] = useState(true);
};
return (
<>
<Wrapper>
@ -49,23 +55,30 @@ const Footer = ({
<Item text={`${nowPage} / ${totalPage}`} />
</nav>
<ProgressBar CountPage={CountPage} />
<nav onClick={() => changeIcone()} className="nav-icon ">
<nav onClick={() => changeIcone()} className="nav-icon">
{window.innerWidth > 768 ? (
<div className="display-icon" style={{ cursor: "pointer" }}>
<nav style={{ width: "65px", display: "flex" }}>
<nav
className={`${active === 1 ? "active" : null} icon`}
onClick={toggleIcon ? () => setActive(3): () => setActive(1)}
>
<BookOpenIcon
className={`${toggleIcon ? "icons-disable" : ""}`}
onClick={() => onClickViewType(true)}
onClick={toggleIcon ? null : () => onClickViewType(true)}
/>
</nav>
<nav
className={`${active === 2 ? "active" : null} icon`}
onClick={toggleIcon ? () => setActive(3): () => setActive(2)}
>
<BookCloseIcon
className={`${toggleIcon ? "icons-disable" : ""}`}
onClick={() => onClickViewType(false)}
onClick={toggleIcon ? null : () => onClickViewType(false)}
/>
</nav>
{toggleIcon === true ? (
<nav
style={{ width: "65px" }}
onClick={() => setToggleIcon(false)}
>
<nav style={{ width: "65px" }} onClick={onToggle}>
<ScrollVerticalIcon
onClick={() =>
onBookOptionChange({
@ -92,11 +105,56 @@ const Footer = ({
)}
</nav>
</div>
) : null}
) : (
""
)}
</nav>
</nav>
</Wrapper>
{window.innerWidth < 768 ? <Button>خرید کتاب</Button> : null}
{window.innerWidth <= 768 ? (
<>
<nav className="nav-footer">
<nav className="footer-item">
<nav className="nav-footer-item" id="toggler">
<Item text={`${nowPage} / ${100}`} />
</nav>
<ProgressBar CountPage={CountPage} />
{toggleIcon === true ? (
<nav
style={{ width: "25px" }}
onClick={() => setToggleIcon(false)}
>
<ScrollVerticalIcon
onClick={() =>
onBookOptionChange({
...bookOption,
flow: "paginated",
})
}
/>
</nav>
) : (
<nav
style={{ width: "25px" }}
onClick={() => setToggleIcon(true)}
>
<ScrollHorizontalIcon
onClick={() =>
onBookOptionChange({
...bookOption,
flow: "scrolled-doc",
})
}
/>
</nav>
)}
</nav>
<Button>خرید کتاب</Button>
</nav>
</>
) : (
""
)}
</>
);
};
@ -114,11 +172,10 @@ const Icon = styled.div`
const Button = styled.button`
width: 100%;
justify-content: center;
position: fixed;
bottom: 0;
display: flex;
height: 35px;
display: flex;
justify-content: center;
align-items: center;
padding: 2px 2rem;
color: #fff;
font-family: inherit;

26
src/containers/Header.tsx
Unescape View File

@ -5,6 +5,7 @@ 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 BookInfo from "components/nav/BookInfo";
// import { Collapse, Button, CardBody, Card } from "reactstrap";
const Header = ({
@ -14,31 +15,30 @@ const Header = ({
// onOptionToggle,
onLearningToggle,
title,
nameBook,
}: Props) => {
return (
<>
<Wrapper>
<Layout>
<AutoLayout style={{ backgroundColor: "#009AA8" }}>
<nav style={{ display: "flex", marginLeft: "16px" }}>
<nav onClick={() => setIsOpen(!isOpen)} style={{ display: "flex" }} id="toggler">
<Img
src="/react-epub-viewer/images/Setting.svg"
// onClick={onOptionToggle as any}
alt="Logo"
/>
<nav
onClick={() => setIsOpen(!isOpen)}
style={{ display: "flex" }}
id="toggler"
>
<Img src="/react-epub-viewer/images/Setting.svg" alt="Logo" />
</nav>
<Img
src="/react-epub-viewer/images/Edit.svg"
alt="Logo"
onClick={onLearningToggle as any}
/>
</nav>
<nav>
{window.innerWidth > 768 ? <ButtonB>خرید کتاب</ButtonB> : null}
</nav>
</nav>
<nav
style={{
display: "flex",
@ -48,7 +48,10 @@ const Header = ({
>
<Item text={title as any} />
<span style={{ color: "#fff", marginRight: "10px" }}>|</span>
<p style={{ margin: "0", color: "#fff" }}></p>
{/* <BookInfo/> */}
<div>
<p style={{ margin: "0", color: "#fff" , width: '85px' }}>{nameBook}</p>
</div>
<Logo />
<Img
src="/react-epub-viewer/images/menu.svg"
@ -86,11 +89,12 @@ const Img = styled.img`
`;
interface Props {
title: String;
nameBook: string;
onNavToggle: (value?: boolean) => void;
onOptionToggle: (value?: boolean) => void;
onLearningToggle: (value?: boolean) => void;
isOpen: any;
setIsOpen:any;
setIsOpen: any;
// setsettingicon: (value?: boolean) => void;
}

44
src/containers/Reader.tsx
Unescape View File

@ -181,7 +181,7 @@ const Reader = ({ url, loadingView }: Props) => {
});
}
};
console.log(isScrollHorizontal)
console.log(isScrollHorizontal);
const [viewType, setViewType] = useState({
spread: true,
@ -202,13 +202,41 @@ const Reader = ({ url, loadingView }: Props) => {
}
};
const book = useSelector<RootState, Book>((state) => state.book.book);
const [CountPage, setCountPage] = useState(0);
const [isOpen, setIsOpen] = useState(false);
const [color, setcolor] = useState("light-white");
// const Colors = [
// { name: "dark-white", value: "#fff" },
// { name: "dark-blue", value: "#fff" },
// { name: "dark-brown", value: "#fff4e1" },
// { name: "light-white", value: "#121212" },
// { name: "light-brown", value: "#af622e" },
// { name: "light-blue", value: "#5858df" },
// ];
const readyColors = [
{ name: "dark-white", value: "#121212" },
{ name: "light-white", value: "#fff" },
{ name: "dark-blue", value: "#5858d3" },
{ name: "dark-brown", value: "#af622e" },
{ name: "light-brown", value: "#fff4e1" },
{ name: "light-blue", value: "#C3DDFF" },
];
const colorHandler = (color: any) => {
let myColor = readyColors.filter((item) => item.name === color);
return myColor[0].value;
};
return (
<>
<ViewerWrapper>
<Header
nameBook={book.title}
title={currentLocation.chapterName}
onNavToggle={onNavToggle}
onOptionToggle={onOptionToggle}
@ -217,6 +245,7 @@ const Reader = ({ url, loadingView }: Props) => {
setIsOpen={setIsOpen}
/>
<Setting
setcolor={setcolor}
setBookStyle={setBookStyle}
bookStyle={bookStyle}
bookOption={bookOption}
@ -226,9 +255,10 @@ const Reader = ({ url, loadingView }: Props) => {
<nav
style={{
backgroundColor: colorHandler(color),
display: "flex",
justifyContent: "center",
marginTop: "1rem",
paddingTop: "1rem",
}}
>
{window.innerWidth < 768 ? (
@ -364,23 +394,29 @@ const Reader = ({ url, loadingView }: Props) => {
);
};
const ReaderWrapper = ({ url, loadingView }: Props) => {
const ReaderWrapper = ({ url, loadingView, colorHandler }: Props) => {
return (
<>
<Provider store={store}>
<Reader url={url} loadingView={loadingView} />
<Reader
colorHandler={colorHandler}
url={url}
loadingView={loadingView}
/>
</Provider>
</>
);
};
interface Props {
colorHandler?: () => void;
viewerStyle?: BookStyle;
url: string;
loadingView?: React.ReactNode;
isOpen?: any;
setIsOpen?: any;
setIsScrollHorizontal?: any;
color?: any;
}
export default ReaderWrapper;

Write Preview
Loading…
Cancel
Save