change font color header setting

demo
taha12322 3 years ago
parent 2de1868c05
commit d4aa9d6e64
  1. 5
      package.json
  2. 62
      src/components/Setting/FontColor/Colors/chosecolor.js
  3. 48
      src/components/Setting/FontColor/colors.js
  4. 47
      src/components/Setting/FontSize/fontsize.js
  5. 23
      src/components/Setting/FontStyle/Fonts/fonts.js
  6. 33
      src/components/Setting/FontStyle/Fontstyle.js
  7. 54
      src/components/Setting/LineHeight/lineheight.js
  8. 50
      src/components/Setting/setting.js
  9. 2
      src/components/footer/Item.tsx
  10. 4
      src/components/footer/MoveBtn.tsx
  11. 1
      src/components/header/Logo.tsx
  12. 13
      src/components/image/Pages.svg
  13. 5
      src/components/image/PalletColorBold.svg
  14. 10
      src/components/image/PalletColorOutline.svg
  15. 18
      src/components/image/lineSpace.svg
  16. BIN
      src/components/image/logo.png
  17. 5
      src/components/image/menu.svg
  18. 160
      src/components/style/NavbarDrawer.scss
  19. 22
      src/components/style/_btnStyle.scss
  20. 4
      src/components/style/_colors.scss
  21. 23
      src/components/style/_twobtnStyle.scss
  22. 57
      src/components/style/bookPage.scss
  23. 12
      src/components/style/bookiconFooter.scss
  24. 48
      src/components/style/chosecolor.scss
  25. 88
      src/components/style/colorsComponents.scss
  26. 4
      src/components/style/fontStyle.scss
  27. 24
      src/components/style/fonts.scss
  28. 3
      src/components/style/fontsize.scss
  29. 44
      src/components/style/footer.scss
  30. 60
      src/components/style/header.scss
  31. 26
      src/components/style/home.scss
  32. 31
      src/components/style/index.scss
  33. 14
      src/components/style/lineheight.scss
  34. 97
      src/components/style/modal.scss
  35. 9
      src/components/style/progress.scss
  36. 3
      src/components/style/search.scss
  37. 61
      src/components/style/searchBox.scss
  38. 18
      src/components/style/setting.scss
  39. 87
      src/components/style/tabpanel.scss
  40. 5
      src/containers/Footer.tsx
  41. 48
      src/containers/Header.tsx
  42. 14
      src/containers/Reader.tsx
  43. 66
      src/containers/menu/Nav.tsx
  44. 2
      src/containers/menu/Note.tsx
  45. 9
      src/containers/menu/Option.tsx
  46. 837
      yarn.lock

@ -40,9 +40,12 @@
"postcompile": "cp -r ./src/types ./lib/types" "postcompile": "cp -r ./src/types ./lib/types"
}, },
"dependencies": { "dependencies": {
"@material-ui/core": "^4.12.3",
"epubjs": "^0.3.88", "epubjs": "^0.3.88",
"node-sass": "4.14.1",
"react-epub-viewer": "^0.1.7", "react-epub-viewer": "^0.1.7",
"react-iconly": "^2.2.3" "react-iconly": "^2.2.3",
"reactstrap": "^8.9.0"
}, },
"devDependencies": { "devDependencies": {
"@babel/cli": "^7.13.14", "@babel/cli": "^7.13.14",

@ -0,0 +1,62 @@
import React from 'react';
import '../../../style/chosecolor.scss';
const Chosecolor = (props) => {
const {color , setcolor} = props;
const changeColorHandler = (value) => {
setcolor(value)
}
const {isChecked} = props;
return (
<>
{isChecked ?
<div className='dark-mood'>
<div className='nav-btn'>
<div>
<button onClick={() => changeColorHandler('dark-white')} id='red-btn-d' className='btn-color'>
الف
</button>
</div>
<div className='nav-btn'>
<button onClick={() => changeColorHandler('dark-brown')} id='green-btn-d' className='btn-color'>
الف
</button>
</div>
<div className='nav-btn'>
<button onClick={() => changeColorHandler('dark-blue')} id='blue-btn-d' className='btn-color'>
الف
</button>
</div>
</div>
</div>:
<div className='light-mood'>
<div className='nav-btn'>
<div>
<button onClick={() => changeColorHandler('light-white')} id='red-btn-w' className='btn-color'>
الف
</button>
</div>
<div className='nav-btn'>
<button onClick={() => changeColorHandler('light-brown')} id='green-btn-w' className='btn-color'>
الف
</button>
</div>
<div className='nav-btn'>
<button onClick={() => changeColorHandler('light-blue')} id='blue-btn-w' className='btn-color'>
الف
</button>
</div>
</div>
</div>
}
</>
)
}
export default Chosecolor

@ -0,0 +1,48 @@
import React , { useState } from 'react';
import '../../../components/style/colorsComponents.scss';
import PalletColorOutline from '../../image/PalletColorOutline.svg';
import PalletColorbold from '../../image/PalletColorBold.svg';
import Chosecolor from './Colors/chosecolor'
import { Dropdown, DropdownToggle, DropdownMenu } from 'reactstrap';
const Colors = (props) => {
const [dropdownOpen, setDropdownOpen] = useState(false);
const toggle = () => setDropdownOpen(prevState => !prevState);
const {setIsChecked, isChecked , setcolor , color } = props;
const [Icon, seticon] = useState(PalletColorOutline);
const changeIcone = () => {
seticon(Icon===PalletColorOutline?PalletColorbold:PalletColorOutline);
};
return (
<>
<nav className='main-colors-setting'>
<label class="switch">
<input type="checkbox"
onChange={() => setIsChecked(!isChecked)}
/>
<span class="slider round"></span>
</label>
<Dropdown isOpen={dropdownOpen} toggle={toggle}>
<DropdownToggle id='dropdown-btn'>
<div onClick={()=>changeIcone()} >
<img src={Icon} set="curved" className='palette-icon' alt='icon'/>
</div>
</DropdownToggle>
<DropdownMenu className='nav-menu'>
<Chosecolor
isChecked={isChecked}
setcolor={setcolor}
color={color}
/>
</DropdownMenu>
</Dropdown>
</nav>
</>
)
}
export default Colors

@ -0,0 +1,47 @@
import React from 'react';
import '../../../components/style/fontsize.scss';
function ButtonIncrement(props) {
return (
<p type='button' outline onClick={props.onClickFunc} style={{padding: '0px 5px'}}>
+
</p>
)
}
function ButtonDecrement(props) {
return (
<p type='button' outline onClick={props.onClickFunc} style={{padding: '0px 5px'}}>
-
</p>
)
}
function Display(props) {
return (
<label >{props.message}</label>
)
}
const Fontsize = (props) => {
const {countersize, setCounter} = props;
const incrementCounter = () => setCounter(countersize + 1);
let decrementCounter = () => setCounter(countersize - 1);
if(countersize <= 1) {
decrementCounter = () => setCounter(1);
}
return (
<div className='nav-fontBtn'>
<nav>
<ButtonIncrement onClickFunc={incrementCounter}/>
<Display message={countersize}/>
<ButtonDecrement onClickFunc={decrementCounter}/>
</nav>
</div>
)
}
export default Fontsize

@ -0,0 +1,23 @@
import React from 'react';
import '../../../style/fonts.scss';
const Fonts = (props) => {
const {setname} = props;
const fontHandler = (value) =>{
setname(value)
}
return (
<>
<nav className='nav-btn'>
<button onClick={() => fontHandler('Sans')} className='btn-font'>سانس</button>
<button onClick={() => fontHandler('Nazanin')} className='btn-font'>نازنین</button>
</nav>
</>
)
}
export default Fonts

@ -0,0 +1,33 @@
import React , { useState } from 'react';
import { Dropdown, DropdownToggle, DropdownMenu } from 'reactstrap';
import '../../../components/style/fontStyle.scss'
import Fonts from './Fonts/fonts'
const Fontstyle = (props) => {
const {setname ,name} = props;
const [dropdownOpen, setDropdownOpen] = useState(false);
const toggle = () => setDropdownOpen(prevState => !prevState)
return (
<div>
<Dropdown isOpen={dropdownOpen} toggle={toggle}>
<DropdownToggle id='dropdown-btn'>
<button className='btn'>
<p>
{name === 'Sans' ? 'سانس': 'نازنین'}
</p>
</button>
</DropdownToggle>
<DropdownMenu className='nav-menu-font'>
<Fonts
setname={setname}
/>
</DropdownMenu>
</Dropdown>
</div>
)
}
export default Fontstyle

@ -0,0 +1,54 @@
import React from 'react'
// import {FormatLineSpacingRoundedIcon} from '@material-ui/icons/FormatLineSpacingRounded'
import lineSpace from '../../image/lineSpace.svg'
import '../../../components/style/lineheight.scss'
function ButtonIncrement(props) {
return (
<span type="button" outline onClick={props.onClickFunc}>
{/* <FormatLineSpacingRoundedIcon className="line-space-icon" /> */}
</span>
)
}
function ButtonDecrement(props) {
return (
<img
type="button"
outline
onClick={props.onClickFunc}
src={lineSpace}
alt="Icon"
className="line-space-icon-"
/>
)
}
function Display(props) {
return <label style={{ textAlign: 'center' }}>{props.message}</label>
}
const Lineheight = (props) => {
const { counterline, setcounterline } = props
const incrementCounter = () => setcounterline(counterline + 1)
let decrementCounter = () => setcounterline(counterline - 1)
if (counterline <= 1) {
decrementCounter = () => setcounterline(1)
}
return (
<>
<div className="nav-fontBtn">
<nav style={{ width: '70px' }}>
<ButtonIncrement onClickFunc={incrementCounter} />
<Display message={counterline} />
<ButtonDecrement onClickFunc={decrementCounter} />
</nav>
</div>
</>
)
}
export default Lineheight

@ -0,0 +1,50 @@
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'
import LineHeight from './LineHeight/lineheight'
const Setting = (props) => {
const {
setIsChecked,
isChecked,
countersize,
setCounter,
counterline,
setcounterline,
setname,
name,
setcolor,
color,
} = props
return (
<>
<Card>
<nav className="nav-content">
<nav className="nav-items">
<Colors
setIsChecked={setIsChecked}
isChecked={isChecked}
setcolor={setcolor}
color={color}
/>
</nav>
<nav className="nav-items">
<LineHeight
counterline={counterline}
setcounterline={setcounterline}
/>
<FontSize countersize={countersize} setCounter={setCounter} />
<Fontstyle name={name} setname={setname} />
</nav>
</nav>
</Card>
</>
)
}
export default Setting

@ -21,7 +21,7 @@ const Container = styled.div`
white-space: nowrap; white-space: nowrap;
& > span { & > span {
color: ${palette.gray4}; color: ${palette.white};
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;

@ -6,8 +6,8 @@ import * as styles from 'lib/styles/styles'
const MoveBtn = ({ type, onClick }: Props) => { const MoveBtn = ({ type, onClick }: Props) => {
const Icon = type === "PREV" const Icon = type === "PREV"
? PrevIcon ? NextIcon
: NextIcon; : PrevIcon;
const msg = type === "PREV" const msg = type === "PREV"
? "이전 페이지" ? "이전 페이지"

@ -17,6 +17,7 @@ const Wrapper = styled.a`
align-items: center; align-items: center;
justify-content: center; justify-content: center;
outline: none; outline: none;
marginRight: 10px;
background-color: #009AA8; background-color: #009AA8;
transition: .2s ${styles.transition}; transition: .2s ${styles.transition};
border-radius: 8px; border-radius: 8px;

@ -0,0 +1,13 @@
<svg xmlns="http://www.w3.org/2000/svg" width="18.282" height="20" viewBox="0 0 18.282 20">
<g id="Pages" transform="translate(-170.75 -67.25)">
<g id="Group_1" data-name="Group 1" transform="translate(1.204)">
<path id="Path_1" data-name="Path 1" d="M0,.5H3.251" transform="translate(173.796 80.446)" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.2"/>
<path id="Path_7" data-name="Path 7" d="M0,.5H3.251" transform="translate(180.127 80.446)" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.2"/>
<path id="Path_2" data-name="Path 2" d="M0,.5H3.251" transform="translate(173.796 76.686)" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.2"/>
<path id="Path_6" data-name="Path 6" d="M0,.5H3.251" transform="translate(180.127 76.686)" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.2"/>
<path id="Path_3" data-name="Path 3" d="M0,.5H3.251" transform="translate(173.796 72.927)" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.2"/>
<path id="Path_5" data-name="Path 5" d="M0,.5H3.251" transform="translate(180.127 72.927)" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.2"/>
</g>
<path id="Path_4" data-name="Path 4" d="M16.782,9.25c0,6.937-2.1,9.25-8.391,9.25S0,16.187,0,9.25C0,5.775.526,3.46,2.055,1.8,3.155.576,5.25,0,8.391,0,14.685,0,16.782,2.313,16.782,9.25Z" transform="translate(171.5 68)" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.8 KiB

@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" width="444" height="438.485" viewBox="0 0 444 438.485">
<g id="PalletColorBold" transform="translate(-615 12)">
<path id="Path_7" data-name="Path 7" d="M931.218,36.76c-122.49,0-222.15,98.28-222.15,219.09a44.487,44.487,0,0,0,1.95,13.01c.18.6.38,1.2.58,1.78.42,1.18.87,2.32,1.37,3.44.25.56.51,1.11.78,1.66.55,1.09,1.13,2.15,1.75,3.18s1.28,2.02,1.97,2.99c.35.48.7.96,1.07,1.42a43.132,43.132,0,0,0,3.52,3.98,44.6,44.6,0,0,0,44.67,11.19l50.24-15.37a35.571,35.571,0,0,1,39.61,14.19,34.112,34.112,0,0,1-.76,40.31l-22.09,30.09a63.615,63.615,0,0,0-9.08,57.53,61.765,61.765,0,0,0,40.87,40.17,222.689,222.689,0,0,0,65.7,9.82c121.79.54,221.03-97.61,221.85-219.39C1152.168,134.15,1052.928,36.14,931.218,36.76Zm-73.41,156.55a41.286,41.286,0,0,1-41.34,41.23h-.21a41.4,41.4,0,1,1,41.55-41.24Zm232.1-7.09v.01a41.3,41.3,0,0,1-41.36,41.23h-.19a41.4,41.4,0,1,1,41.55-41.24ZM972.458,118.6v.01a41.3,41.3,0,0,1-41.35,41.23h-.19a41.4,41.4,0,1,1,41.54-41.24Zm-48.64,307.85a41.39,41.39,0,1,1,41.55-41.24v.01a41.3,41.3,0,0,1-41.35,41.23Zm124.73-58.54h-.19a41.4,41.4,0,1,1,41.55-41.24v.01A41.3,41.3,0,0,1,1048.548,367.91Z" transform="translate(-94.068 -48.757)" fill="#009aa8"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

@ -0,0 +1,10 @@
<svg xmlns="http://www.w3.org/2000/svg" width="444" height="438.487" viewBox="0 0 444 438.487">
<g id="PalletColorOutline" transform="translate(-34 -36.756)">
<path id="Path_1" data-name="Path 1" d="M256.152,475.241a222.944,222.944,0,0,1-65.705-9.819,61.777,61.777,0,0,1-40.867-40.169,63.618,63.618,0,0,1,9.076-57.53l22.092-30.1a34.106,34.106,0,0,0,.761-40.309,35.564,35.564,0,0,0-39.6-14.182L91.657,298.5A44.621,44.621,0,0,1,34,255.854c0-120.812,99.659-219.1,222.152-219.1C377.855,36.14,477.1,134.147,478,255.848c-.817,121.786-100.06,219.931-221.848,219.393ZM151.977,269.123a47.96,47.96,0,0,1,39.96,21.033,47.021,47.021,0,0,1-1.008,54.974l-22.048,30.116a50.253,50.253,0,0,0-7.256,46.043,49.254,49.254,0,0,0,32.558,32.031,210.323,210.323,0,0,0,61.969,9.254c114.793.545,208.363-91.935,209.162-206.726-.9-114.7-94.465-207.022-209.162-206.4-115.5,0-209.466,92.593-209.466,206.4a31.937,31.937,0,0,0,41.266,30.5l50.464-15.407a52.554,52.554,0,0,1,13.561-1.821Z" fill="#009aa8"/>
<path id="Path_2" data-name="Path 2" d="M255.848,159.836A41.393,41.393,0,1,1,297.394,118.6v.012a41.292,41.292,0,0,1-41.354,41.23Zm0-70.1a28.74,28.74,0,1,0,.241,0Z" fill="#009aa8"/>
<path id="Path_3" data-name="Path 3" d="M373.292,227.457a41.393,41.393,0,1,1,41.546-41.241v.013a41.293,41.293,0,0,1-41.355,41.229Zm0-70.1a26.935,26.935,0,1,0,.274-.019c-.092,0-.183,0-.274,0Z" fill="#009aa8"/>
<path id="Path_4" data-name="Path 4" d="M373.292,367.907a41.393,41.393,0,1,1,41.546-41.241v.012a41.293,41.293,0,0,1-41.355,41.23Zm0-70.1a28.739,28.739,0,1,0,.242,0C373.453,297.8,373.373,297.8,373.292,297.806Z" fill="#009aa8"/>
<path id="Path_5" data-name="Path 5" d="M248.75,426.452A41.394,41.394,0,1,1,290.3,385.211v.012a41.286,41.286,0,0,1-41.342,41.229Zm0-70.1a28.739,28.739,0,1,0,.242,0C248.911,356.356,248.831,356.356,248.75,356.357Z" fill="#009aa8"/>
<path id="Path_6" data-name="Path 6" d="M141.194,234.536a41.394,41.394,0,1,1,41.546-41.241v.012a41.286,41.286,0,0,1-41.342,41.23Zm0-70.1a28.739,28.739,0,1,0,.242,0Z" fill="#009aa8"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.0 KiB

@ -0,0 +1,18 @@
<svg xmlns="http://www.w3.org/2000/svg" width="49.931" height="41.789" viewBox="0 0 49.931 41.789">
<g id="LineSpace" transform="translate(-840 -243)">
<path id="Path_8" data-name="Path 8" d="M36.547,25.757a2.112,2.112,0,0,1-2.109,2.114H2.113a2.112,2.112,0,1,1,0-4.223H34.438a2.11,2.11,0,0,1,2.109,2.109Z" transform="translate(840 219.352)" fill="#009aa8"/>
<path id="Path_9" data-name="Path 9" d="M34.438,37.453H2.113a2.112,2.112,0,1,0,0,4.223H34.438a2.112,2.112,0,0,0,0-4.223Z" transform="translate(840 217.547)" fill="#009aa8"/>
<path id="Path_10" data-name="Path 10" d="M34.438,51.7H2.113a2.112,2.112,0,1,0,0,4.223H34.438a2.112,2.112,0,0,0,0-4.223Z" transform="translate(840 228.299)" fill="#009aa8"/>
<path id="Path_12" data-name="Path 12" d="M34.438,51.7H2.113a2.112,2.112,0,1,0,0,4.223H34.438a2.112,2.112,0,0,0,0-4.223Z" transform="translate(840 216.299)" fill="#009aa8"/>
<g id="Group_3" data-name="Group 3" transform="translate(839.66 407.46) rotate(90)">
<g id="Group_2" data-name="Group 2" transform="translate(-164 -49.961)">
<path id="Path_11" data-name="Path 11" d="M-145.139-45.867h0l-3.894-3.875a.745.745,0,0,0-1.054,0,.745.745,0,0,0,0,1.054l2.614,2.6h-15.783a.745.745,0,0,0-.745.745.745.745,0,0,0,.745.745h15.783l-2.614,2.6a.745.745,0,0,0,0,1.054.746.746,0,0,0,1.054,0l3.894-3.875h0a.746.746,0,0,0,0-1.055Zm0,0" transform="translate(164 49.961)" fill="#009aa8" stroke="#009aa8" stroke-width="0.5"/>
</g>
</g>
<g id="Group_4" data-name="Group 4" transform="translate(880.38 284.539) rotate(-90)">
<g id="Group_2-2" data-name="Group 2" transform="translate(0 0)">
<path id="Path_11-2" data-name="Path 11" d="M18.861,5.148h0L14.966,9.024a.745.745,0,0,1-1.052-1.057l2.614-2.6H.745a.745.745,0,1,1,0-1.491H16.529l-2.614-2.6A.745.745,0,0,1,14.966.217L18.86,4.092h0a.746.746,0,0,1,0,1.055Zm0,0" fill="#009aa8" stroke="#009aa8" stroke-width="0.5"/>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 KiB

@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="12" viewBox="0 0 18 12">
<g id="menu" transform="translate(-19 -37.039)">
<path id="Path_1" data-name="Path 1" d="M20,49.039H36a1,1,0,0,0,0-2H20a1,1,0,0,0,0,2Zm0-5H36a1,1,0,0,0,0-2H20a1,1,0,0,0,0,2Zm-1-6a1,1,0,0,0,1,1H36a1,1,0,0,0,0-2H20a1,1,0,0,0-1,1Zm0,0" fill="#fff"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 351 B

@ -0,0 +1,160 @@
@import './colors';
.MuiDrawer-paperAnchorRight {
background: white;
&::-webkit-scrollbar {
display: none;
width: 0px;
font-family: inherit;
}
}
.MuiDrawer-paperAnchorRight {
top: 35px !important;
}
.navbar-drawer {
font-family: inherit;
text-align: right !important;
direction: rtl;
&__header {
height: 60px;
background-color: white;
width: 80% !important;
align-items: center;
&--right {
margin-right: 10px;
& h1 {
margin-bottom: 0px;
font-size: calc(100vw / 22);
color: #4d4d4f;
letter-spacing: -1px;
}
& div {
color: #4d4d4f;
font-size: calc(100vw / 34);
letter-spacing: -1px;
}
}
&--dropdown {
left: 10px;
top: 10px;
}
& img {
width: 100%;
height: 100%;
}
}
&__dropdown {
width: calc(100vw * 0.8);
.navbar-drawer-user {
width: 100%;
&__right {
margin-right: 10px;
& h1 {
margin-bottom: 0px;
font-size: calc(100vw / 22);
color: #4d4d4f;
letter-spacing: -1px;
}
& div {
color: #4d4d4f;
font-size: calc(100vw / 34);
letter-spacing: -1px;
}
}
}
}
&__bottom {
width: 100%;
&--link {
width: 100%;
align-items: center;
padding: 15px 10px;
& img {
width: 20px;
height: 20px;
margin-left: 20px;
}
& .badge {
background-color: red;
margin: 5px;
position: absolute;
left: 5px;
top: 12px;
}
}
&--button {
width: 100%;
height: 100px;
color: white;
padding: 15px 10px;
cursor: pointer;
& img {
width: 20px;
height: 20px;
margin-left: 20px;
}
}
&--version {
position: absolute;
bottom: 5px;
left: 0px;
width: 100%;
height: 32px;
font-size: 14px;
justify-content: center;
align-items: center;
& span {
color: #cfcfcf;
font-size: 14px;
}
}
}
}
.makeStyles-list-1 {
width: 300px !important;
}
.MuiBackdrop-root {
top: 35px !important;
}
.navbar-drawer__bottom a {
width: 100%;
color: #666;
text-decoration: none;
}
.navbar-drawer__bottom a:hover {
color: $green;
}
.navbar-drawer__bottom--link .navbar-drawer__bottom--link div {
font-size: 10px;
}
.MuiTabs-indicator {
background-color: $green !important;
}
.MuiTab-root {
min-width: 100px !important;
}
.MuiTab-wrapper {
color: $green;
}
.PrivateSwipeArea-root-15 {
left: 0 !important;
right: 0 !important;
}
.MuiPaper-elevation {
box-shadow: none;
}
.nav-cansel {
color: red;
text-align: left;
}

@ -0,0 +1,22 @@
@import './colors';
.btn{
border: $green solid 1.5px !important;
padding: 0px 3px 4px 3px !important;
height: 1.5rem;
color: $green !important;
p{
font-size: 12px;
margin: 0;
padding: 2px 5px !important;
}
}
.btn:hover{
color: $white !important;
background-color: $green !important;
}
.btn:focus {
box-shadow: none !important;
}

@ -0,0 +1,4 @@
$green : #009AA8;
$white : #fff;
$black : #000;
$gray : #fafafa;

@ -0,0 +1,23 @@
@import './colors';
.nav-fontBtn{
margin-right: 5px;
nav{
display: flex;
justify-content: space-between;
width: 60px;
height: 1.5rem;
border-radius: 5px;
border: 1.5px solid $green;
.counter{
font-size: 0.95rem;
}
p{
padding-left: 2px;
padding-right: 2px;
font-family: inherit;
}
}
}

@ -0,0 +1,57 @@
@import './colors';
.paragraph {
text-align: justify;
direction: rtl;
color: black;
}
.slider-btn-left {
display: flex;
align-items: center;
}
.slider-btn-right {
display: flex;
align-items: center;
}
.nav-flex-items-pages {
height: 100%;
max-height: 100%;
display: flex;
justify-content: center;
}
.main-nav{
height: calc(100% - 90px);
margin-top: 15px;
display: flex;
justify-content: center;
}
@media only screen and (max-width: 700px) {
.slider-btn-left {
display: flex;
align-items: center;
opacity: 0;
width: 40%;
left: 0;
top: 60px;
z-index: 500;
position: absolute;
height: 85%;
}
.slider-btn-right{
display: flex;
align-items: center;
opacity: 0;
width: 40%;
right: 0;
top: 60px;
z-index: 500;
position: absolute;
height: 85%;
}
}

@ -0,0 +1,12 @@
.nav-icon {
cursor: 'pointer';
z-index: 500;
position: 'relative';
margin-left: 0.5rem;
}
@media only screen and (max-width: 900px ) {
.display-icon {
display: none;
}
}

@ -0,0 +1,48 @@
@import './colors';
.nav-btn{
text-align: center;
}
.btn-color{
outline: none;
border-radius: 5px;
margin: 1px;
}
#red-btn-w{
background-color: #fff;
color: #121212;
border: $green solid 1px;
}
#green-btn-w{
background-color: #fff4e1;
color: #af622e;
border: $green solid 1px;
}
#blue-btn-w{
background-color: #86bbff ;
color: rgb(88, 88, 211);
border: $green solid 1px;
}
#red-btn-d{
background-color: #121212;
color: #fff;
border: $green solid 1px;
}
#green-btn-d{
background-color: #af622e;
color: rgb(255, 244, 225);
border: $green solid 1px;
}
#blue-btn-d{
background-color: #5858d3;
color: #86bbff;
border: $green solid 1px;
}

@ -0,0 +1,88 @@
@import './colors';
.switch {
position: relative;
display: inline-block;
width: 35px;
height: 18px;
margin-right: 5px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgb(187, 187, 187);
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 12px;
width: 12px;
left: 2px;
bottom: 3px;
background-color: white;
transition: .4s;
}
input:checked + .slider {
background-color: $green;
}
input:checked + .slider:before {
background-color: black;
}
input:focus + .slider {
box-shadow: 0 0 1px $green;
}
input:checked + .slider:before {
transform: translateX(18px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
.main-colors-setting{
display: flex;
align-items: center;
}
#dropdown-btn{
background-color: white !important;
border: none !important ;
padding: 0px !important;
margin: 0px !important;
}
#dropdown-btn:hover{
color: $green !important;
}
.palette-icon{
width: 1.4rem;
margin-top: 2px;
}

@ -0,0 +1,4 @@
.nav-menu-font{
min-width: 4rem !important;
transform: translate3d(-5px, 24px, 0px) !important;
}

@ -0,0 +1,24 @@
@import './colors';
.nav-btn{
text-align: center;
.btn-font{
outline: none;
border-radius: 5px;
margin: 5px;
border: $green solid 1.5px;
color: $green;
background-color: white;
width: 2.8rem;
font-size: 10px;
}
.btn-font:hover{
border: $green solid 1.5px;
color: white;
background-color: $green;
}
}

@ -0,0 +1,3 @@
@import './colors';
@import './btnStyle';
@import './twobtnStyle';

@ -0,0 +1,44 @@
@import './colors';
.main-footer {
width: 100%;
background-color: white;
height: 60px;
position: fixed;
bottom: 0;
text-align: center;
padding: 0.25rem 1rem;
}
.nav-items {
display: flex;
justify-content: center;
text-align: center;
p {
padding-right: 0.75rem;
}
}
.buy-btn-mobile {
border: solid 1.5px white;
background-color: #009AA8;
border-radius: 5px;
color: white;
font-size: 12px;
padding: 0.30rem 2rem;
width: 112%;
position: fixed;
bottom: -1px;
right: -20px;
}
@media only screen and (min-width: 700px ) {
.buy-btn-mobile {
display: none;
}
.main-footer{
height: 30px;
}
}

@ -0,0 +1,60 @@
@import './colors';
.nav-header {
width: 100%;
background-color: $green;
height: 35px;
color: $white;
display: flex;
justify-content: space-between;
align-items: center;
.items {
display: flex;
padding: 0.25rem 1rem;
.icon {
margin-right: 5px;
width: 20px;
}
.header-title {
margin: 0;
padding: 0;
font-size: 14px;
}
.logo {
width: 50px;
margin-right: 1rem;
}
}
}
.buy-btn {
border: solid 1.5px white;
background-color: $green;
border-radius: 5px;
color: white;
margin-right: 7px;
font-size: 12px;
width: 8rem;
}
.buy-btn:hover{
color: $green;
background-color: white;
font-weight: bold;
}
@media only screen and (max-width: 700px ) {
.buy-btn {
display: none;
}
}

@ -0,0 +1,26 @@
@import './colors';
.custom-drawer {
height: 100%;
width: 0px;
position: relative;
display: none;
}
@keyframes drawerActive {
0% {
width: 0px;
}
100% {
width: 300px;
}
}
.custom-drawer-active {
border-left: solid 1.5px #009aa882;
border-radius: 9px;
background-color: #fff;
width: 300px;
animation-name: drawerActive;
animation-duration: 0.2s;
}

@ -0,0 +1,31 @@
@import './colors';
@font-face {
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: 'SansNum';
src: local('IRANSansWebFaNum'), url(../fonts/IRANSansWebFaNum.woff) format('woff');
}
body {
margin: 0;
padding: 0;
color: $green;
font-family: 'SansNum' , 'Sans' , 'Nazanin';
text-align: right;
overflow: hidden;
}
html,body,#root{
height: 100%;
}

@ -0,0 +1,14 @@
@import './btnStyle';
@import './twobtnStyle';
.line-space-icon-{
font-size: 1rem !important;
width: 1rem !important;
margin: 3px;
}
.line-space-icon{
font-size: 1rem !important;
width: 1rem !important;
}

@ -0,0 +1,97 @@
@import './colors';
.modal {
top: 6rem !important;
left: 6rem !important;
}
.modal-content {
width: 300px !important;
}
.modal-footer {
justify-content: flex-start !important;
}
.title-input {
text-align: right;
direction: rtl;
width: 100% !important;
border: 1px gray solid;
outline: none;
padding: 0.25rem 1rem;
font-size: 14px;
border-radius: 3px;
margin-bottom: 0.75rem;
}
.title-input::placeholder{
font-size: 10px;
font-weight: 500;
}
.dis-input {
text-align: right;
direction: rtl;
outline: none;
width: 100%;
padding: 0.25rem 1rem;
font-size: 12px;
border-radius: 3px;
resize: none;
}
.dis-input::placeholder{
font-size: 9px;
font-weight: 300;
}
.save-btn {
border: none;
background-color: $green;
border-radius: 4px;
padding: 0.25rem 1rem;
color: #fff;
font-size: 14px;
margin-right: 0.5rem;
}
.close-btn {
border: red solid 1px;
background-color: #fff;
border-radius: 4px;
padding: 0.25rem 1rem;
color: red;
font-size: 14px;
}
.save-number-page{
font-size: 10px;
text-align: left;
direction: ltr;
}
.span-num{
color: red;
font-weight: bold;
}
.nav-btn-form{
text-align: left;
}
.lable-input{
font-size: 12px;
font-weight: bold;
}
.bookmark{
z-index: 2000;
position: absolute;
top: 3.75rem;
left: 34.75rem;
width: 8rem;
}

@ -0,0 +1,9 @@
@import './colors';
.edit-progress{
direction: rtl;
width: 90% !important;
height: 5px !important;
}

@ -0,0 +1,3 @@
.nav-search{
display: flex !important;
}

@ -0,0 +1,61 @@
@import './colors';
.nav-color {
background-color: #fff;
width: 100%;
}
.nav-serch-items {
display: flex;
align-items: center;
border: solid 1.5px $green;
border-radius: 12px;
color: $green;
width: 100%;
form {
width: 100%;
display: flex;
justify-content: space-between;
}
svg {
margin-right: 10px;
}
.input-text {
width: 100%;
color: $green;
font-size: 14px;
padding: 5px 5px;
border: none;
outline: none;
}
input[type='search']::-webkit-search-cancel-button {
height: 10px;
width: 10px;
}
.input-submit {
color: $green;
font-size: 15px;
padding: 5px 8px;
border-right: solid 1.5px $green;
border-left: none;
border-top: none;
border-bottom: none;
outline: none;
background-color: inherit;
}
.input-submit:hover {
color: #fff;
background-color: $green;
border-left: none;
border-top: none;
border-bottom: none;
border-right: solid 1.5px $green;
border-left: solid 1.5px $green;
border-radius: 10px 0 0 10px;
}
}

@ -0,0 +1,18 @@
.nav-content{
display: flex;
align-items: center;
padding: 0.25rem 1rem;
justify-content: space-between;
.nav-items{
display: flex;
margin-left: 5px;
}
}
.nav-menu{
min-width: 3rem !important;
transform: translate3d(-12px, 24px, 0px) !important;
padding: 2px !important;
}

@ -0,0 +1,87 @@
@import './colors';
.main-tab {
background-color: white !important;
color: black !important;
font-family: inherit !important;
width: 100% !important;
position: static !important;
box-shadow: none;
}
.MuiBox-root {
padding: 0 !important;
}
.MuiPaper-root{
box-shadow: none !important;
}
.list-note {
margin-bottom: 0.5rem;
padding: 15px 10px;
display: flex;
justify-content: space-between;
color: #666;
align-items: center;
font-family: 'Sans', 'SansNum';
border-bottom: solid 1px #009aa833;
margin: 0;
width: 100%;
font-size: 15px;
li {
display: flex;
list-style: none;
}
p {
margin: 0;
padding: 0;
}
}
.nav-list-book {
border-bottom: solid 1px #009aa833;
margin: 0;
width: 100%;
font-size: 15px;
}
.nav-list-book-active {
background-color:#009aa85b;
color: $green;
border-bottom: solid 1px #009aa833;
margin: 0;
width: 100%;
font-size: 15px;
}
.nav-list-book:hover {
background-color: rgba(200, 231, 231, 0.616);
}
.list-note:hover {
background-color: rgba(200, 231, 231, 0.616);
color: $green;
}
.MuiPaper-elevation{
box-shadow: none ;
}
.MuiTabs-indicator{
display: none !important ;
}
.border-tab{
font-family: inherit !important;
font-size: 12px !important;
padding: 0 !important;
}
.border-tab-active{
border-bottom: $green solid 1.5px !important;
}

@ -6,10 +6,9 @@ import MoveBtn from "components/footer/MoveBtn";
const Footer = ({ title, nowPage, totalPage, onPageMove }: Props) => { const Footer = ({ title, nowPage, totalPage, onPageMove }: Props) => {
return ( return (
<Wrapper> <Wrapper>
<MoveBtn type="PREV" onClick={() => onPageMove("PREV")} />
<Item text={title} />
<Item text={`${nowPage} / ${totalPage}`} />
<MoveBtn type="NEXT" onClick={() => onPageMove("NEXT")} /> <MoveBtn type="NEXT" onClick={() => onPageMove("NEXT")} />
<Item text={`${nowPage} / ${totalPage}`} />
<MoveBtn type="PREV" onClick={() => onPageMove("PREV")} />
</Wrapper> </Wrapper>
); );
}; };

@ -3,18 +3,43 @@ import styled from "styled-components";
import Wrapper from "components/header/Wrapper"; import Wrapper from "components/header/Wrapper";
import Layout, { AutoLayout } from "components/header/Layout"; import Layout, { AutoLayout } from "components/header/Layout";
import Logo from "components/header/Logo"; import Logo from "components/header/Logo";
import ControlBtn from "components/header/ControlBtn"; import Item from "components/footer/Item";
const Header = ({ onNavToggle, onOptionToggle, onLearningToggle }: Props) => { const Header = ({
onNavToggle,
onOptionToggle,
onLearningToggle,
title,
}: Props) => {
return ( return (
<Wrapper> <Wrapper>
<Layout> <Layout>
<AutoLayout style={{ backgroundColor: "#009AA8" }}> <AutoLayout style={{ backgroundColor: "#009AA8" }}>
<nav style={{ display: "flex", marginLeft: "16px" }}> <nav style={{ display: "flex", marginLeft: "16px" }}>
<Img src="/react-epub-viewer/images/Setting.svg" onClick={onOptionToggle as any} alt="Logo" /> <Img
<Img src="/react-epub-viewer/images/Edit.svg" alt="Logo" onClick={onLearningToggle as any} /> src="/react-epub-viewer/images/Setting.svg"
onClick={onOptionToggle as any}
alt="Logo"
/>
<Img
src="/react-epub-viewer/images/Edit.svg"
alt="Logo"
onClick={onLearningToggle as any}
/>
</nav>
<nav>
<Button>خرید کتاب</Button>
</nav> </nav>
<nav style={{ display: "flex", marginRight: "16px" }}> <nav
style={{
display: "flex",
marginRight: "16px",
alignItems: "center",
}}
>
<Item text={title as any} />
<span style={{ color: "#fff", marginRight: "10px" }}>||</span>
<p style={{ margin: "0", color: "#fff" }}>نام کتاب </p>
<Logo /> <Logo />
<Img <Img
src="/react-epub-viewer/images/menu.svg" src="/react-epub-viewer/images/menu.svg"
@ -31,13 +56,26 @@ const Header = ({ onNavToggle, onOptionToggle, onLearningToggle }: Props) => {
); );
}; };
const Button = styled.button`
display: flex;
margin-top: 11px;
border-radius: 5px;
border: solid 2px #fff;
padding: 3px 2rem;
color: #fff;
font-family: inherit;
`;
const Img = styled.img` const Img = styled.img`
width: 25px; width: 25px;
`; `;
interface Props { interface Props {
title: String;
onNavToggle: (value?: boolean) => void; onNavToggle: (value?: boolean) => void;
onOptionToggle: (value?: boolean) => void; onOptionToggle: (value?: boolean) => void;
onLearningToggle: (value?: boolean) => void; onLearningToggle: (value?: boolean) => void;
// setsettingicon: (value?: boolean) => void;
} }
export default Header; export default Header;

@ -28,6 +28,7 @@ import { ViewerRef } from "types";
import Book, { BookStyle, BookOption } from "types/book"; import Book, { BookStyle, BookOption } from "types/book";
import Page from "types/page"; import Page from "types/page";
import Toc from "types/toc"; import Toc from "types/toc";
import { title } from "node:process";
const Reader = ({ url, loadingView }: Props) => { const Reader = ({ url, loadingView }: Props) => {
const dispatch = useDispatch(); const dispatch = useDispatch();
@ -106,13 +107,13 @@ const Reader = ({ url, loadingView }: Props) => {
* Move page * Move page
* @param type Direction * @param type Direction
*/ */
const onPageMove = (type: "PREV" | "NEXT") => { const onPageMove = (type: "NEXT" | "PREV") => {
//loadFont(); //loadFont();
const node = viewerRef.current; const node = viewerRef.current;
if (!node || !node.prevPage || !node.nextPage) return; if (!node || !node.prevPage || !node.nextPage) return;
type === "PREV" && node.prevPage();
type === "NEXT" && node.nextPage(); type === "NEXT" && node.nextPage();
type === "PREV" && node.prevPage();
}; };
/** /**
@ -154,11 +155,18 @@ const Reader = ({ url, loadingView }: Props) => {
/** ContextMenu off */ /** ContextMenu off */
const onContextmMenuRemove = () => setIsContextMenu(false); const onContextmMenuRemove = () => setIsContextMenu(false);
console.log({viewerRef}) console.log({ viewerRef });
const [settingicon, setsettingicon] = useState(false);
const changeiconsettinghandler = () => {
setsettingicon(!settingicon);
};
return ( return (
<> <>
<ViewerWrapper> <ViewerWrapper>
<Header <Header
title={currentLocation.chapterName}
onNavToggle={onNavToggle} onNavToggle={onNavToggle}
onOptionToggle={onOptionToggle} onOptionToggle={onOptionToggle}
onLearningToggle={onLearningToggle} onLearningToggle={onLearningToggle}

@ -1,47 +1,45 @@
import React from 'react' import React from "react";
import { useSelector } from 'react-redux' import { useSelector } from "react-redux";
// components // components
import Wrapper from 'components/sideMenu/Wrapper' import Wrapper from "components/sideMenu/Wrapper";
import BookInfo from 'components/nav/BookInfo' import BookInfo from "components/nav/BookInfo";
import NavItem from 'components/nav/NavItem' import NavItem from "components/nav/NavItem";
// types // types
import { RootState } from 'slices' import { RootState } from "slices";
import Book from 'types/book' import Book from "types/book";
import Toc from 'types/toc' import Toc from "types/toc";
import { MenuControl } from 'lib/hooks/useMenu' import { MenuControl } from "lib/hooks/useMenu";
const Nav = ({ control, onToggle, onLocation }: Props, ref: any) => { const Nav = ({ control, onToggle, onLocation }: Props, ref: any) => {
const book = useSelector<RootState, Book>(state => state.book.book); const book = useSelector<RootState, Book>((state) => state.book.book);
const bookToc = useSelector<RootState, Toc[]>(state => state.book.toc); const bookToc = useSelector<RootState, Toc[]>((state) => state.book.toc);
/** Click nav item */ /** Click nav item */
const onClickItem = (loc: string) => { const onClickItem = (loc: string) => {
onLocation(loc); onLocation(loc);
onToggle(); onToggle();
} };
const Tocs = bookToc.map((t, idx) =>
<NavItem key={idx}
message={t.label}
onClick={() => onClickItem(t.href)} />
);
const Tocs = bookToc.map((t, idx) => (
<NavItem key={idx} message={t.label} onClick={() => onClickItem(t.href)} />
));
return (<> return (
{control.display && <Wrapper title="فهرست" <>
show={control.open} {control.display && (
onClose={onToggle} <Wrapper title="فهرست" show={control.open} onClose={onToggle} ref={ref}>
ref={ref}> <BookInfo
<BookInfo src={book.coverURL}
src={book.coverURL} title={book.title}
title={book.title} publisher={book.publisher}
publisher={book.publisher} author={book.author}
author={book.author} />
/> {Tocs}
{Tocs} </Wrapper>
</Wrapper>} )}
</>); </>
} );
};
interface Props { interface Props {
control: MenuControl; control: MenuControl;
@ -49,4 +47,4 @@ interface Props {
onLocation: (loc: string) => void; onLocation: (loc: string) => void;
} }
export default React.forwardRef(Nav) export default React.forwardRef(Nav);

@ -49,7 +49,7 @@ const Note = ({
<LearningLayout> <LearningLayout>
{highlightList.length > 0 {highlightList.length > 0
? highlightList ? highlightList
: <MenuEmpty text="Empty highlights!" /> : <MenuEmpty text="! نشانه ای موجود نیست " />
} }
</LearningLayout> </LearningLayout>
</Wrapper>} </Wrapper>}

@ -11,6 +11,7 @@ import ControlIconBtn from "components/option/ControlIconBtn";
import { BookStyle, BookFontFamily, BookFlow } from "types/book"; import { BookStyle, BookFontFamily, BookFlow } from "types/book";
import { MenuControl } from "lib/hooks/useMenu"; import { MenuControl } from "lib/hooks/useMenu";
import { BookOption } from "types/book"; import { BookOption } from "types/book";
import Setting from "components/Setting/setting";
const Option = ( const Option = (
{ {
@ -138,7 +139,7 @@ const Option = (
onClose={onToggle} onClose={onToggle}
ref={ref} ref={ref}
> >
<OptionLayout> {/* <OptionLayout>
<ControlIconBtnWrapper title="View Direction"> <ControlIconBtnWrapper title="View Direction">
<ControlIconBtn <ControlIconBtn
type="ScrollHorizontal" type="ScrollHorizontal"
@ -213,7 +214,11 @@ const Option = (
step={1} step={1}
onChange={(e) => onChangeSlider("MarginVertical", e)} onChange={(e) => onChangeSlider("MarginVertical", e)}
/> />
</OptionLayout> </OptionLayout> */}
<Setting
id="t"
/>
</Wrapper> </Wrapper>
)} )}
</> </>

File diff suppressed because it is too large Load Diff
Loading…
Cancel
Save