From eb0dc1fdf24c6091c78ec97d762eb7293d94361c Mon Sep 17 00:00:00 2001 From: NB <47492535+altmshfkgudtjr@users.noreply.github.com> Date: Fri, 16 Apr 2021 22:33:51 +0900 Subject: [PATCH] Update Components --- README.md | 5 +- package.json | 1 - public/images/logo.png | Bin 0 -> 9333 bytes public/images/reactEpubIcon.png | Bin 5057 -> 0 bytes src/components/footer/Item.tsx | 7 ++ src/components/header/Layout.tsx | 3 +- src/components/header/Logo.tsx | 13 ++- src/components/learning/SortedBtn.tsx | 34 ------ src/components/learning/SortedBtnWrapper.tsx | 10 -- src/components/nav/NavItem.tsx | 4 + src/components/{learning => note}/Layout.tsx | 0 .../{learning => note}/highlight/PageNum.tsx | 0 .../{learning => note}/highlight/Post.tsx | 0 .../{learning => note}/highlight/Title.tsx | 0 .../{learning => note}/highlight/Wrapper.tsx | 0 .../{header => option}/ControlIconBtn.tsx | 0 .../option/ControlIconBtnWrapper.tsx | 29 +++++ src/components/sideMenu/Wrapper.tsx | 7 +- src/containers/Header.tsx | 99 +----------------- src/containers/Reader.tsx | 6 +- src/containers/menu/Note.tsx | 43 ++------ src/containers/menu/Option.tsx | 85 ++++++++++++++- src/containers/menu/commons/Highlight.tsx | 8 +- src/index.tsx | 2 +- src/lib/styles/viewerLayout.ts | 4 +- 25 files changed, 158 insertions(+), 202 deletions(-) create mode 100644 public/images/logo.png delete mode 100644 public/images/reactEpubIcon.png delete mode 100644 src/components/learning/SortedBtn.tsx delete mode 100644 src/components/learning/SortedBtnWrapper.tsx rename src/components/{learning => note}/Layout.tsx (100%) rename src/components/{learning => note}/highlight/PageNum.tsx (100%) rename src/components/{learning => note}/highlight/Post.tsx (100%) rename src/components/{learning => note}/highlight/Title.tsx (100%) rename src/components/{learning => note}/highlight/Wrapper.tsx (100%) rename src/components/{header => option}/ControlIconBtn.tsx (100%) create mode 100644 src/components/option/ControlIconBtnWrapper.tsx diff --git a/README.md b/README.md index 5f8a8b5..d6f064f 100644 --- a/README.md +++ b/README.md @@ -1,11 +1,10 @@ -
+

- react_epub + react_epub

- # React-Epub-Viewer [![Latest Stable Version](https://img.shields.io/npm/v/react-epub-viewer.svg?style=for-the-badge)](https://www.npmjs.com/package/react-epub-viewer) [![License](https://img.shields.io/badge/license-mit-red.svg?style=for-the-badge)](https://www.npmjs.com/package/react-epub-viewer) diff --git a/package.json b/package.json index cac66e9..1483cb3 100644 --- a/package.json +++ b/package.json @@ -18,7 +18,6 @@ "lib", "README.md" ], - "homepage": "https://altmshfkgudtjr.github.io/react-epub-viewer", "repository": { "type": "git", "url": "https://github.com/altmshfkgudtjr/react-epub-viewer" diff --git a/public/images/logo.png b/public/images/logo.png new file mode 100644 index 0000000000000000000000000000000000000000..135e59cbc85e7c02f015bed6f600b0c452b7ee8e GIT binary patch literal 9333 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 literal 0 HcmV?d00001 diff --git a/public/images/reactEpubIcon.png b/public/images/reactEpubIcon.png deleted file mode 100644 index 1ba02c0153668c3db8b0dd86ab985b3d6aabed75..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 5057 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 span { color: ${palette.gray4}; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } `; diff --git a/src/components/header/Layout.tsx b/src/components/header/Layout.tsx index f81c21e..f66a36e 100644 --- a/src/components/header/Layout.tsx +++ b/src/components/header/Layout.tsx @@ -9,8 +9,7 @@ const Layout = styled.div` align-items: center; justify-content: center; width: 100%; - height: 54px; - background-color: ${palette.white}; + height: 64px; z-index: ${zIndex.header}; `; diff --git a/src/components/header/Logo.tsx b/src/components/header/Logo.tsx index fd74471..cb902ff 100644 --- a/src/components/header/Logo.tsx +++ b/src/components/header/Logo.tsx @@ -2,11 +2,12 @@ import styled from 'styled-components' // lib import * as styles from 'lib/styles/styles' import palette from 'lib/styles/palette' +import { mediaQuery } from 'lib/styles/media' const Logo = () => { return ( - Logo + Logo ); } @@ -18,18 +19,22 @@ const Wrapper = styled.a` outline: none; margin-left: 16px; background-color: rgba(0,0,0,0); - transition: .3s ${styles.transition}; + transition: .2s ${styles.transition}; border-radius: 8px; padding: 4px 8px; cursor: pointer; + ${mediaQuery(700)} { + display: none; + } + &:focus, &:hover { - background-color: ${palette.blue1}; + background-color: ${palette.blue0}; } `; const Img = styled.img` - height: 32px; + height: 44px; `; export default Logo \ No newline at end of file diff --git a/src/components/learning/SortedBtn.tsx b/src/components/learning/SortedBtn.tsx deleted file mode 100644 index aa4dc5d..0000000 --- a/src/components/learning/SortedBtn.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import styled from 'styled-components' -// lib -import * as styles from 'lib/styles/styles' -import palette from 'lib/styles/palette' - -const SortedBtn = ({ text, isSelected, onClick }: Props) => { - return {text}; -} - -const Btn = styled.button<{isSelected: boolean}>` - height: 20px; - line-height: 20px; - font-size: 14px; - cursor: pointer; - text-align: center; - margin-left: 16px; - color: ${({isSelected}) => isSelected - ? palette.blue3 - : palette.gray4 - }; - transition: .2s ${styles.transition}; - - &:hover { - color: ${palette.blue3}; - } -`; - -interface Props { - text: string; - isSelected: boolean; - onClick: () => void; -} - -export default SortedBtn \ No newline at end of file diff --git a/src/components/learning/SortedBtnWrapper.tsx b/src/components/learning/SortedBtnWrapper.tsx deleted file mode 100644 index 23f2764..0000000 --- a/src/components/learning/SortedBtnWrapper.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import styled from 'styled-components' - -const SortedBtnWrapper = styled.div` - display: flex; - align-items: center; - justify-content: flex-end; - padding: 0 24px 24px 24px; -`; - -export default SortedBtnWrapper \ No newline at end of file diff --git a/src/components/nav/NavItem.tsx b/src/components/nav/NavItem.tsx index ed00999..632b7ac 100644 --- a/src/components/nav/NavItem.tsx +++ b/src/components/nav/NavItem.tsx @@ -33,6 +33,10 @@ const Content = styled.button` margin-left: 12px; } } + + &:last-child { + margin-bottom: 32px; + } `; interface Props { diff --git a/src/components/learning/Layout.tsx b/src/components/note/Layout.tsx similarity index 100% rename from src/components/learning/Layout.tsx rename to src/components/note/Layout.tsx diff --git a/src/components/learning/highlight/PageNum.tsx b/src/components/note/highlight/PageNum.tsx similarity index 100% rename from src/components/learning/highlight/PageNum.tsx rename to src/components/note/highlight/PageNum.tsx diff --git a/src/components/learning/highlight/Post.tsx b/src/components/note/highlight/Post.tsx similarity index 100% rename from src/components/learning/highlight/Post.tsx rename to src/components/note/highlight/Post.tsx diff --git a/src/components/learning/highlight/Title.tsx b/src/components/note/highlight/Title.tsx similarity index 100% rename from src/components/learning/highlight/Title.tsx rename to src/components/note/highlight/Title.tsx diff --git a/src/components/learning/highlight/Wrapper.tsx b/src/components/note/highlight/Wrapper.tsx similarity index 100% rename from src/components/learning/highlight/Wrapper.tsx rename to src/components/note/highlight/Wrapper.tsx diff --git a/src/components/header/ControlIconBtn.tsx b/src/components/option/ControlIconBtn.tsx similarity index 100% rename from src/components/header/ControlIconBtn.tsx rename to src/components/option/ControlIconBtn.tsx diff --git a/src/components/option/ControlIconBtnWrapper.tsx b/src/components/option/ControlIconBtnWrapper.tsx new file mode 100644 index 0000000..b642f7c --- /dev/null +++ b/src/components/option/ControlIconBtnWrapper.tsx @@ -0,0 +1,29 @@ +import styled from 'styled-components' +// components +import OptionWrapper from 'components/option/OptionWrapper' +import OptionTitle from 'components/option/OptionTitle' + +const ControlIconBtnWrapper = ({ title, children }: Props) => { + return ( + + {title} + + {children} + + + ); +} + +const BtnWrapper = styled.div` + display: flex; + align-items: center; + justify-content: space-around; + padding: 8px 0; +`; + +interface Props { + title: string; + children: any[] +} + +export default ControlIconBtnWrapper \ No newline at end of file diff --git a/src/components/sideMenu/Wrapper.tsx b/src/components/sideMenu/Wrapper.tsx index 29acca3..f230cee 100644 --- a/src/components/sideMenu/Wrapper.tsx +++ b/src/components/sideMenu/Wrapper.tsx @@ -24,6 +24,7 @@ const Container = styled.div` flex-direction: column; position: fixed; width: 340px; + max-width: 95vw; height: 100vh; top: 0; right: 0; @@ -33,9 +34,9 @@ const Container = styled.div` border-radius: 16px 0 0 16px; transform: ${({ show }: { show: boolean }) => show ? `translateX(0px) scale(1)` - : `translateX(420px) scale(.8)` + : `translateX(420px) scale(.9)` }; - transition: .3s ${styles.transition}; + transition: .4s ${styles.transition}; overflow-y: auto; ${styles.scrollbar()}; `; @@ -46,7 +47,7 @@ const Header = styled.div` display: flex; align-items: center; justify-content: space-between; - padding-top: 30px; + padding-top: 4px; & > span { padding-left: 24px; diff --git a/src/containers/Header.tsx b/src/containers/Header.tsx index 7b6f224..ef43c63 100644 --- a/src/containers/Header.tsx +++ b/src/containers/Header.tsx @@ -1,109 +1,24 @@ -import { useState } from 'react' // components import Wrapper from 'components/header/Wrapper' import Layout, { AutoLayout } from 'components/header/Layout' import Logo from 'components/header/Logo' import ControlBtn from 'components/header/ControlBtn' -import ControlIconBtn from 'components/header/ControlIconBtn' -import VerticalLine from 'components/header/VerticalLine' -// types -import { BookOption } from 'types/book' - -const Header = ({ - title, - bookOption, +const Header = ({ onNavToggle, onOptionToggle, - onLearningToggle, - onBookOptionChange + onLearningToggle }: Props) => { - const [isScrollHorizontal, setIsScrollHorizontal] = useState(true); - const [viewType, setViewType] = useState({ - active: true, - spread: true - }); - - - /** - * Select view direction - * @param type Direction - */ - const onClickDirection = (type: "Horizontal" | "Vertical") => { - if (type === "Horizontal") { - setIsScrollHorizontal(true); - setViewType({ ...viewType, active: true }); - onBookOptionChange({ - ...bookOption, - flow: "paginated" - }); - } else { - setIsScrollHorizontal(false); - setViewType({ ...viewType, active: false }); - onBookOptionChange({ - ...bookOption, - flow: "scrolled-doc" - }); - } - } - - /** - * Select isSpread - * @param isSpread Whether spread view - */ - const onClickViewType = (isSpread: boolean) => { - if (isSpread) { - setViewType({ ...viewType, spread: true }); - onBookOptionChange({ - ...bookOption, - spread: "auto" - }); - } else { - setViewType({ ...viewType, spread: false }); - onBookOptionChange({ - ...bookOption, - spread: "none" - }); - } - } - - return ( +
-
- -
- onClickDirection("Horizontal")} /> - onClickDirection("Vertical")} /> - - - - onClickViewType(true)} /> - onClickViewType(false)} /> -
@@ -111,17 +26,9 @@ const Header = ({ } interface Props { - title: string; - bookOption: BookOption; onNavToggle: (value?: boolean) => void; onOptionToggle: (value?: boolean) => void; onLearningToggle: (value?: boolean) => void; - onBookOptionChange: (bookOption: BookOption) => void; -} - -type ViewType = { - active: boolean, - spread: boolean } export default Header \ No newline at end of file diff --git a/src/containers/Reader.tsx b/src/containers/Reader.tsx index a0cf92a..a10a621 100644 --- a/src/containers/Reader.tsx +++ b/src/containers/Reader.tsx @@ -32,7 +32,6 @@ import Toc from 'types/toc' const Reader = ({ url, loadingView }: Props) => { const dispatch = useDispatch(); - const book = useSelector(state => state.book.book); const currentLocation = useSelector(state => state.book.currentLocation); const viewerRef = useRef(null); @@ -138,12 +137,9 @@ const Reader = ({ url, loadingView }: Props) => { return (<>
{