d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-05-31 07:26:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

feature:

Browse Source 
样式调整
This commit is contained in:
tangly1024
2021-12-14 17:48:00 +08:00
parent f1724dbe1a
commit 3796b0f64a
15 changed files with 71 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
components/TocDrawerButton.js
View File

@@ -1,8 +1,9 @@
import React from 'react'
import React, { useEffect, useState } from 'react'
import { useGlobal } from '@/lib/global'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faListOl } from '@fortawesome/free-solid-svg-icons'
let windowTop = 0
/**
* 点击召唤目录抽屉
* 当屏幕下滑500像素后会出现该控件
@@ -12,13 +13,28 @@ import { faListOl } from '@fortawesome/free-solid-svg-icons'
*/
const TocDrawerButton = (props) => {
const { locale } = useGlobal()
const [show, switchShow] = useState(false)
const scrollListener = () => {
const scrollY = window.pageYOffset
const shouldShow = scrollY > 100 && scrollY < windowTop
console.log('目录', shouldShow, scrollY, windowTop)
windowTop = scrollY
if (shouldShow !== show) {
switchShow(shouldShow)
}
}
useEffect(() => {
document.addEventListener('scroll', scrollListener)
return () => document.removeEventListener('scroll', scrollListener)
})
return (
<div id='toc-drawer-button' className='right-1 fixed flex bottom-52 duration-500 z-40 hidden' onClick={props.onClick}>
<div className='transform hover:scale-105 duration-200 '>
<div className='animate__fadeInRight animate__animated bg-white dark:bg-gray-700 px-1 py-2.5 cursor-pointer shadow-card'>
<div id='toc-drawer-button' className='right-5 fixed bottom-56 duration-500 z-40' onClick={props.onClick}>
<div className='transform hover:scale-105 duration-200'>
<div className={(show ? 'animate__fadeInRight' : 'hidden') + ' px-2 py-4 animate__animated glassmorphism rounded-full cursor-pointer shadow-card' }>
<div className='text-center dark:text-gray-100'>
<div className='w-10 text-xl' title={locale.COMMON.TABLE_OF_CONTENTS} ><FontAwesomeIcon icon={faListOl} /> </div>
<div className='w-10 text-md' title={locale.COMMON.TABLE_OF_CONTENTS} ><FontAwesomeIcon icon={faListOl} /> </div>
</div>
</div>
</div>