From 6d273ba959f65a99e419a6cee3cf4c061a9dfc1f Mon Sep 17 00:00:00 2001 From: NB <47492535+altmshfkgudtjr@users.noreply.github.com> Date: Thu, 15 Apr 2021 13:38:28 +0900 Subject: [PATCH] Demo page styles modified --- package.json | 2 +- src/components/learning/highlight/Wrapper.tsx | 6 +++--- src/components/nav/NavItem.tsx | 3 ++- src/components/option/DropdownItemWrapper.tsx | 4 ++++ src/components/option/DropdownValue.tsx | 5 +++-- src/components/option/SliderValue.tsx | 8 +++++++- src/components/sideMenu/CloseBtn.tsx | 3 ++- src/containers/Reader.tsx | 4 ++++ src/modules/reactViewer/ReactViewer.tsx | 17 ++++++++--------- 9 files changed, 34 insertions(+), 18 deletions(-) diff --git a/package.json b/package.json index 2c3ef86..c9c44e4 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@altmshfkgudtjr/react-epub-viewer", - "version": "0.0.1", + "version": "0.1.0", "author": "NB", "description": "Epub viewer for React.js powered by Epub.js", "license": "MIT", diff --git a/src/components/learning/highlight/Wrapper.tsx b/src/components/learning/highlight/Wrapper.tsx index 5680b1c..6e956b5 100644 --- a/src/components/learning/highlight/Wrapper.tsx +++ b/src/components/learning/highlight/Wrapper.tsx @@ -5,7 +5,6 @@ import * as styles from 'lib/styles/styles' const Wrapper = styled.button` padding: 16px 24px; - box-shadow: 0 3px 6px 0 rgba(0,0,0,.3); display: flex; align-items: flex-start; justify-content: flex-start; @@ -14,9 +13,10 @@ const Wrapper = styled.button` cursor: pointer; outline: none; text-align: left; + border-bottom: 1px solid ${palette.gray1}; - &:last-child { - box-shadow: 0 1px 4px rgb(0 0 0 / 20%); + &:nth-child(2) { + border-top: 1px solid ${palette.gray1}; } & > div { diff --git a/src/components/nav/NavItem.tsx b/src/components/nav/NavItem.tsx index c210036..ed00999 100644 --- a/src/components/nav/NavItem.tsx +++ b/src/components/nav/NavItem.tsx @@ -20,13 +20,14 @@ const Content = styled.button` align-items: center; cursor: pointer; background-color: ${palette.gray0}; + outline: none; & > span { transition: .2s ${styles.transition}; font-size: 14px; } - &:hover { + &:focus, &:hover { & > span { color: ${palette.blue3}; margin-left: 12px; diff --git a/src/components/option/DropdownItemWrapper.tsx b/src/components/option/DropdownItemWrapper.tsx index 9f68b1a..046690d 100644 --- a/src/components/option/DropdownItemWrapper.tsx +++ b/src/components/option/DropdownItemWrapper.tsx @@ -34,6 +34,10 @@ const Container = styled.div<{show: boolean}>` : 'translateY(-40px) scaleY(0);' }; ${styles.scrollbar(6)} + ${({show}) => show + ? '' + : styles.noselect + }; `; interface Props { diff --git a/src/components/option/DropdownValue.tsx b/src/components/option/DropdownValue.tsx index e8aca4f..7fe5faf 100644 --- a/src/components/option/DropdownValue.tsx +++ b/src/components/option/DropdownValue.tsx @@ -30,7 +30,7 @@ const Container = styled.button<{isDropdown: boolean}>` background-color: ${palette.white}; border: ${({isDropdown}) => isDropdown ? `2px solid ${palette.blue3}` - : `2px solid ${palette.gray2}` + : `2px solid ${palette.gray1}` }; border-radius: ${({isDropdown}) => isDropdown ? "20px 20px 0 0" @@ -48,7 +48,8 @@ const Container = styled.button<{isDropdown: boolean}>` border: 2px solid ${palette.blue3}; & > div { - opacity: .8; + opacity: 1; + filter: invert(40%) sepia(85%) saturate(1256%) hue-rotate(210deg) brightness(113%) contrast(101%); } } `; diff --git a/src/components/option/SliderValue.tsx b/src/components/option/SliderValue.tsx index 55c4d3c..a7c868c 100644 --- a/src/components/option/SliderValue.tsx +++ b/src/components/option/SliderValue.tsx @@ -74,6 +74,7 @@ const Slider = styled.input<{ active: boolean }>` border-radius: 6px; margin: 0; z-index: 2; + outline: none; &::-webkit-slider-thumb { appearance: none; @@ -103,11 +104,16 @@ const Slider = styled.input<{ active: boolean }>` &:active { box-shadow: none; background-color: ${props => props.active - ? palette.blue0 + ? palette.blue3 : '' }; } } + + &:focus::-webkit-slider-thumb { + box-shadow: none; + background-color: ${palette.blue3}; + } `; const Icon = styled.span` diff --git a/src/components/sideMenu/CloseBtn.tsx b/src/components/sideMenu/CloseBtn.tsx index f729c79..24fc3b2 100644 --- a/src/components/sideMenu/CloseBtn.tsx +++ b/src/components/sideMenu/CloseBtn.tsx @@ -21,8 +21,9 @@ const Btn = styled.button` align-items: center; justify-content: center; transition: .1s ${styles.transition}; + outline: none; - &:hover { + &:focus, &:hover { filter: invert(40%) sepia(85%) saturate(1256%) hue-rotate(210deg) brightness(113%) contrast(101%); } `; diff --git a/src/containers/Reader.tsx b/src/containers/Reader.tsx index e45dbdb..a7c6ae2 100644 --- a/src/containers/Reader.tsx +++ b/src/containers/Reader.tsx @@ -67,6 +67,8 @@ const Reader = ({ url, loadingView }: Props) => { onUpdateHighlight } = useHighlight(viewerRef, setIsContextMenu, bookStyle, bookOption.flow); + + /** * Change Epub book information * @param book Epub Book Info @@ -130,6 +132,8 @@ const Reader = ({ url, loadingView }: Props) => { /** ContextMenu off */ const onContextmMenuRemove = () => setIsContextMenu(false); + + return (<>
{ + const onResize = useCallback(debounce(250, () => { if (!rendition) return; const viewerLayout_ = viewerLayout || { @@ -126,7 +126,7 @@ const ReactViewer = ({ try { rendition.resize(w, h); } catch { } - }, [ + }), [ rendition, viewerLayout, bookStyle.marginHorizontal, @@ -253,9 +253,8 @@ const ReactViewer = ({ /** Emit screen resizing event */ useEffect(() => { - // TODO debounce 해제 안되는 이슈 수정하기 - window.addEventListener('resize', debounce(250, onResize)); - return () => window.removeEventListener('resize', debounce(250, onResize)); + window.addEventListener('resize', onResize); + return () => window.removeEventListener('resize', onResize); }, [onResize]); /** Emit selection event */