d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-05-13 23:16:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

feature: 悬浮按钮调整；

Browse Source 
目录进度条bug修复
This commit is contained in:
tangly1024
2022-01-12 12:37:12 +08:00
parent d926c726b5
commit 5b69aaa3a5
9 changed files with 33 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/FloatDarkModeButton.js
View File

@@ -24,7 +24,7 @@ export default function FloatDarkModeButton () {
return (
<div
onClick={handleChangeDarkMode}
className={ ' text-black dark:border-gray-500 flex justify-center items-center w-8 h-8 dark:text-gray-200'
className={ ' text-black dark:border-gray-500 flex justify-center items-center dark:text-gray-200 py-2 px-3'
}
>
<FontAwesomeIcon

4
components/JumpToBottomButton.js
View File

@@ -45,11 +45,11 @@ const JumpToBottomButton = ({ showPercent = false }) => {
return () => document.removeEventListener('scroll', scrollListener)
}, [show])
return (<div className='flex space-x-1 transform hover:scale-105 text-xs duration-200 py-2 px-3' onClick={scrollToBottom} >
return (<div className='flex space-x-1 transform hover:scale-105 duration-200 py-2 px-3' onClick={scrollToBottom} >
<div className='dark:text-gray-200' >
<FontAwesomeIcon icon={faArrowDown} />
</div>
{showPercent && (<div className='text-xs dark:text-gray-200 block lg:hidden'>{percent}%</div>)}
{showPercent && (<div className='dark:text-gray-200 block lg:hidden'>{percent}%</div>)}
</div>)
}

2
components/JumpToTopButton.js
View File

@@ -17,7 +17,7 @@ const JumpToTopButton = ({ showPercent = true, percent }) => {
return <></>
}
const { locale } = useGlobal()
return (<div className='flex space-x-1 transform hover:scale-105 text-xs duration-200 py-2 px-3' onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })} >
return (<div className='flex space-x-1 items-center transform hover:scale-105 duration-200 py-2 px-3' onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })} >
<div className='dark:text-gray-200' title={locale.POST.TOP} >
<FontAwesomeIcon icon={faArrowUp} />
</div>

22
components/Progress.js
View File

@@ -9,11 +9,12 @@ const Progress = ({ targetRef, showPercent = true }) => {
const currentRef = targetRef?.current || targetRef
const [percent, changePercent] = useState(0)
const scrollListener = () => {
if (currentRef) {
const clientHeight = currentRef ? (currentRef.clientHeight) : 0
const target = currentRef || document.getElementById('container')
if (target) {
const clientHeight = target.clientHeight
const scrollY = window.pageYOffset
const fullHeight = clientHeight - window.outerHeight
let per = parseFloat(((scrollY / fullHeight * 100)).toFixed(0))
let per = parseFloat(((scrollY / fullHeight) * 100).toFixed(0))
if (per > 100) per = 100
if (per < 0) per = 0
changePercent(per)
@@ -25,11 +26,18 @@ const Progress = ({ targetRef, showPercent = true }) => {
return () => document.removeEventListener('scroll', scrollListener)
}, [percent])
return (<div className='h-4 w-full shadow-2xl bg-gray-400 font-sans'>
<div className='h-4 bg-gray-600 duration-200' style={{ width: `${percent}%` }}>
{showPercent && <div className='text-right text-white text-xs'>{percent}%</div>}
return (
<div className="h-4 w-full shadow-2xl bg-gray-400 font-sans">
<div
className="h-4 bg-gray-600 duration-200"
style={{ width: `${percent}%` }}
>
{showPercent && (
<div className="text-right text-white text-xs">{percent}%</div>
)}
</div>
</div>)
</div>
)
}
export default Progress

2
components/SideAreaLeft.js
View File

@@ -44,7 +44,7 @@ const SideAreaLeft = ({ title, tags, currentTag, post, postCount, categories, cu
<Tabs>
{showToc && (
<div key={locale.COMMON.TABLE_OF_CONTENTS} className='dark:text-gray-400 text-gray-600 bg-white dark:bg-gray-800 duration-200'>
<Toc toc={post.toc} targetRef={targetRef} />
<Toc toc={post.toc}/>
</div>
)}

4
components/Toc.js
View File

@@ -10,7 +10,7 @@ import Progress from './Progress'
* @returns {JSX.Element}
* @constructor
*/
const Toc = ({ toc, targetRef }) => {
const Toc = ({ toc }) => {
// 无目录就直接返回空
if (!toc || toc.length < 1) {
return <></>
@@ -54,7 +54,7 @@ const Toc = ({ toc, targetRef }) => {
return <>
<div className='w-full'>
<Progress targetRef={targetRef}/>
<Progress/>
</div>
<nav className='font-sans overflow-y-auto scroll-hidden'>
{toc.map((tocItem) => {

4
components/TocDrawer.js
View File

@@ -9,7 +9,7 @@ import { useGlobal } from '@/lib/global'
* @returns {JSX.Element}
* @constructor
*/
const TocDrawer = ({ post, cRef, targetRef }) => {
const TocDrawer = ({ post, cRef }) => {
// 暴露给父组件 通过cRef.current.handleMenuClick 调用
useImperativeHandle(cRef, () => {
return {
@@ -33,7 +33,7 @@ const TocDrawer = ({ post, cRef, targetRef }) => {
{locale.COMMON.TABLE_OF_CONTENTS}
</div>
<div className='p-6 dark:text-gray-400 text-gray-600 bg-white dark:bg-gray-800'>
<Toc toc={post.toc} targetRef={targetRef}/>
<Toc toc={post.toc}/>
</div>
</>
}

2
components/TocDrawerButton.js
View File

@@ -16,7 +16,7 @@ const TocDrawerButton = (props) => {
return <></>
}
const { locale } = useGlobal()
return (<div onClick={props.onClick} className='px-3 py-2 cursor-pointer dark:text-gray-200 text-center transform hover:scale-150 duration-200 text-xs flex justify-center items-center' title={locale.POST.TOP} >
return (<div onClick={props.onClick} className='py-2 px-3 cursor-pointer dark:text-gray-200 text-center transform hover:scale-150 duration-200 flex justify-center items-center' title={locale.POST.TOP} >
<FontAwesomeIcon icon={faListOl}/>
</div>)
}

15
layouts/BaseLayout.js
View File

@@ -96,15 +96,16 @@ const BaseLayout = ({
<SideAreaRight targetRef={targetRef} post={post} slot={rightAreaSlot} postCount={postCount} tags={tags} currentSearch={currentSearch} currentTag={currentTag} categories={categories} currentCategory={currentCategory}/>
</main>
<div className='right-4 lg:right-2 bottom-2 fixed justify-end z-20 rounded font-sans'>
<div className={(show ? 'animate__animated ' : 'hidden') + ' animate__fadeInUp glassmorphism justify-center duration-500 animate__faster flex space-x-2 items-center cursor-pointer '}>
<JumpToTopButton percent={percent}/>
<JumpToBottomButton />
<FloatDarkModeButton/>
{floatSlot}
{/* 右下角悬浮 */}
<div className='right-8 bottom-10 lg:right-2 lg:bottom-2 fixed justify-end z-20 font-sans'>
<div className={(show ? 'animate__animated ' : 'hidden') + ' animate__fadeInUp rounded-md glassmorphism justify-center duration-500 animate__faster flex space-x-2 items-center cursor-pointer '}>
<JumpToTopButton percent={percent}/>
<JumpToBottomButton />
<FloatDarkModeButton/>
{floatSlot}
</div>
</div>
</div>
<Footer title={meta.title}/>
</>
)