d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-05-24 15:09:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

feature: 悬浮按钮

Browse Source
This commit is contained in:
tangly1024
2022-01-11 16:54:37 +08:00
parent 2ce88eef04
commit 6d9695e411
4 changed files with 10 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
components/JumpToBottomButton.js
View File

@@ -1,5 +1,4 @@
import BLOG from '@/blog.config'
import { useGlobal } from '@/lib/global'
import { faArrowDown } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import React, { useEffect, useState } from 'react'
@@ -18,7 +17,6 @@ const JumpToBottomButton = ({ showPercent = false }) => {
return <></>
}
const { locale } = useGlobal()
const [show, switchShow] = useState(false)
const [percent, changePercent] = useState(0)
const scrollListener = () => {
@@ -47,12 +45,12 @@ const JumpToBottomButton = ({ showPercent = false }) => {
return () => document.removeEventListener('scroll', scrollListener)
}, [show])
return (<div onClick={() => scrollToBottom()}>
<div className='dark:text-gray-200 transform hover:scale-150 text-xs duration-200' title={locale.POST.TOP} >
<FontAwesomeIcon icon={faArrowDown} />
</div>
{showPercent && (<div className='w-10 text-xs dark:text-gray-200'>{percent}</div>)}
</div>)
return (<div className='flex space-x-1 transform hover:scale-105 text-xs 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>)}
</div>)
}
export default JumpToBottomButton

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' onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })} >
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' })} >
<div className='dark:text-gray-200' title={locale.POST.TOP} >
<FontAwesomeIcon icon={faArrowUp} />
</div>

6
components/TocDrawerButton.js
View File

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

2
layouts/BaseLayout.js
View File

@@ -97,7 +97,7 @@ const BaseLayout = ({
</main>
<div className='right-4 lg:right-2 bottom-2 fixed justify-end z-20 rounded font-sans'>
<div className={(show ? 'animate__animated ' : 'hidden') + ' px-3 py-2 animate__fadeInUp glassmorphism justify-center duration-500 animate__faster flex space-x-2 items-center cursor-pointer '}>
<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/>