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

l

Browse Source
demo
taha12322 3 years ago
parent 9e2ece9d48
commit 2de1868c05
6 changed files with 38 additions and 19 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
      public/images/Edit.svg
  2. 4
      public/images/Setting.svg
  3. 12
      src/components/header/ControlBtn.tsx
  4. 6
      src/components/header/Edit.svg
  5. 4
      src/components/header/Logo.tsx
  6. 25
      src/containers/Header.tsx

6
public/images/Edit.svg
Unescape View File

@ -1,7 +1,7 @@
<svg id="Iconly_Curved_Edit" data-name="Iconly/Curved/Edit" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<g id="Edit" transform="translate(3.5 3.5)">
<path id="Stroke_1" data-name="Stroke 1" d="M0,.5H6.377" transform="translate(9.835 15.508)" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"/>
<path id="Stroke_3" data-name="Stroke 3" d="M11.808.609h0a3.042,3.042,0,0,0-4.258.607l-6.752,9C-.941,12.529.7,15.4.7,15.4s3.244.746,4.958-1.539l6.752-8.995A3.042,3.042,0,0,0,11.808.609Z" transform="translate(0.75 0.75)" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"/>
<path id="Stroke_5" data-name="Stroke 5" d="M0,0,4.864,3.651" transform="translate(7.004 3.711)" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"/>
<path id="Stroke_1" data-name="Stroke 1" d="M0,.5H6.377" transform="translate(9.835 15.508)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"/>
<path id="Stroke_3" data-name="Stroke 3" d="M11.808.609h0a3.042,3.042,0,0,0-4.258.607l-6.752,9C-.941,12.529.7,15.4.7,15.4s3.244.746,4.958-1.539l6.752-8.995A3.042,3.042,0,0,0,11.808.609Z" transform="translate(0.75 0.75)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"/>
<path id="Stroke_5" data-name="Stroke 5" d="M0,0,4.864,3.651" transform="translate(7.004 3.711)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"/>
</g>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 973 B

After

Width:  |  Height:  |  Size: 973 B

4
public/images/Setting.svg
Unescape View File

@ -1,6 +1,6 @@
<svg id="Iconly_Curved_Setting" data-name="Iconly/Curved/Setting" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<g id="Setting" transform="translate(3.5 2.5)">
<path id="Stroke_1" data-name="Stroke 1" d="M2.5,0A2.5,2.5,0,1,1,0,2.5,2.5,2.5,0,0,1,2.5,0Z" transform="translate(6 7)" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"/>
<path id="Stroke_3" data-name="Stroke 3" d="M16.668,4.75h0a2.464,2.464,0,0,0-3.379-.912,1.543,1.543,0,0,1-2.314-1.346A2.484,2.484,0,0,0,8.5,0h0A2.484,2.484,0,0,0,6.025,2.492,1.543,1.543,0,0,1,3.712,3.839a2.465,2.465,0,0,0-3.38.912,2.5,2.5,0,0,0,.906,3.4,1.56,1.56,0,0,1,0,2.692,2.5,2.5,0,0,0-.906,3.4,2.465,2.465,0,0,0,3.379.913h0a1.542,1.542,0,0,1,2.313,1.345h0A2.484,2.484,0,0,0,8.5,19h0a2.484,2.484,0,0,0,2.474-2.492h0a1.543,1.543,0,0,1,2.314-1.345,2.465,2.465,0,0,0,3.379-.913,2.5,2.5,0,0,0-.905-3.4h0a1.56,1.56,0,0,1,0-2.692A2.5,2.5,0,0,0,16.668,4.75Z" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"/>
<path id="Stroke_1" data-name="Stroke 1" d="M2.5,0A2.5,2.5,0,1,1,0,2.5,2.5,2.5,0,0,1,2.5,0Z" transform="translate(6 7)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"/>
<path id="Stroke_3" data-name="Stroke 3" d="M16.668,4.75h0a2.464,2.464,0,0,0-3.379-.912,1.543,1.543,0,0,1-2.314-1.346A2.484,2.484,0,0,0,8.5,0h0A2.484,2.484,0,0,0,6.025,2.492,1.543,1.543,0,0,1,3.712,3.839a2.465,2.465,0,0,0-3.38.912,2.5,2.5,0,0,0,.906,3.4,1.56,1.56,0,0,1,0,2.692,2.5,2.5,0,0,0-.906,3.4,2.465,2.465,0,0,0,3.379.913h0a1.542,1.542,0,0,1,2.313,1.345h0A2.484,2.484,0,0,0,8.5,19h0a2.484,2.484,0,0,0,2.474-2.492h0a1.543,1.543,0,0,1,2.314-1.345,2.465,2.465,0,0,0,3.379-.913,2.5,2.5,0,0,0-.905-3.4h0a1.56,1.56,0,0,1,0-2.692A2.5,2.5,0,0,0,16.668,4.75Z" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"/>
</g>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

12
src/components/header/ControlBtn.tsx
Unescape View File

@ -3,12 +3,17 @@ import styled from "styled-components";
import * as styles from "lib/styles/styles";
import palette from "lib/styles/palette";
const ControlBtn = ({ massege, onClick }: Props) => {
return <Btn onClick={() => onClick()}>{massege}</Btn>;
const ControlBtn = ({ src , onClick }: Props) => {
return (
<>
<Img src='' onClick={() => onClick()} />
</>
);
};
const Img = styled.img`
height: 44px;
cursor: pointer;
`;
const Btn = styled.button`
@ -32,7 +37,8 @@ const Btn = styled.button`
`;
interface Props {
massege: String;
src: String;
// massege: String;
onClick: (value?: boolean) => void;
}

6
src/components/header/Edit.svg
Unescape View File

@ -1,7 +1,7 @@
<svg id="Iconly_Curved_Edit" data-name="Iconly/Curved/Edit" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<g id="Edit" transform="translate(3.5 3.5)">
<path id="Stroke_1" data-name="Stroke 1" d="M0,.5H6.377" transform="translate(9.835 15.508)" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"/>
<path id="Stroke_3" data-name="Stroke 3" d="M11.808.609h0a3.042,3.042,0,0,0-4.258.607l-6.752,9C-.941,12.529.7,15.4.7,15.4s3.244.746,4.958-1.539l6.752-8.995A3.042,3.042,0,0,0,11.808.609Z" transform="translate(0.75 0.75)" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"/>
<path id="Stroke_5" data-name="Stroke 5" d="M0,0,4.864,3.651" transform="translate(7.004 3.711)" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"/>
<path id="Stroke_1" data-name="Stroke 1" d="M0,.5H6.377" transform="translate(9.835 15.508)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"/>
<path id="Stroke_3" data-name="Stroke 3" d="M11.808.609h0a3.042,3.042,0,0,0-4.258.607l-6.752,9C-.941,12.529.7,15.4.7,15.4s3.244.746,4.958-1.539l6.752-8.995A3.042,3.042,0,0,0,11.808.609Z" transform="translate(0.75 0.75)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"/>
<path id="Stroke_5" data-name="Stroke 5" d="M0,0,4.864,3.651" transform="translate(7.004 3.711)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"/>
</g>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 973 B

After

Width:  |  Height:  |  Size: 973 B

4
src/components/header/Logo.tsx
Unescape View File

@ -17,7 +17,6 @@ const Wrapper = styled.a`
align-items: center;
justify-content: center;
outline: none;
margin-right: 16px;
background-color: #009AA8;
transition: .2s ${styles.transition};
border-radius: 8px;
@ -30,7 +29,8 @@ const Wrapper = styled.a`
`;
const Img = styled.img`
height: 44px;
height: 30px;
cursor: pointer;
`;
export default Logo

25
src/containers/Header.tsx
Unescape View File

@ -1,4 +1,5 @@
// components
import styled from "styled-components";
import Wrapper from "components/header/Wrapper";
import Layout, { AutoLayout } from "components/header/Layout";
import Logo from "components/header/Logo";
@ -9,18 +10,30 @@ const Header = ({ onNavToggle, onOptionToggle, onLearningToggle }: Props) => {
<Wrapper>
<Layout>
<AutoLayout style={{ backgroundColor: "#009AA8" }}>
<div>
<ControlBtn massege='فهرست' onClick={onNavToggle} />
<ControlBtn massege='تنظیمات' onClick={onOptionToggle} />
<ControlBtn massege='نشانه گذاری' onClick={onLearningToggle} />
</div>
<Logo />
<nav style={{ display: "flex", marginLeft: "16px" }}>
<Img 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 style={{ display: "flex", marginRight: "16px" }}>
<Logo />
<Img
src="/react-epub-viewer/images/menu.svg"
onClick={onNavToggle as any}
alt="Logo"
/>
</nav>
{/* <ControlBtn massege="فهرست" onClick={onNavToggle} /> */}
{/* <ControlBtn massege="تنظیمات" onClick={onOptionToggle} />
<ControlBtn massege="نشانه گذاری" onClick={onLearningToggle} /> */}
</AutoLayout>
</Layout>
</Wrapper>
);
};
const Img = styled.img`
width: 25px;
`;
interface Props {
onNavToggle: (value?: boolean) => void;
onOptionToggle: (value?: boolean) => void;

Write Preview
Loading…
Cancel
Save