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

feature:

Browse Source 
阴影效果
This commit is contained in:
tangly1024
2021-12-17 14:38:01 +08:00
parent 8ea86d3976
commit f154f24f88
6 changed files with 39 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/BlogPostListScroll.js
View File

@@ -64,7 +64,7 @@ const BlogPostListScroll = ({ posts = [], tags, currentSearch, currentCategory,
<div onClick={() => {
handleGetMore()
}}
className='w-full my-4 py-4 bg-gray-200 text-center cursor-pointer dark:bg-gray-700 dark:text-gray-200'
className='w-full my-4 py-4 text-center cursor-pointer glassmorphism dark:text-gray-200'
> {hasMore ? '继续加载' : '加载完了😰'} </div>
</div>
</div>

33
components/FloatDarkModeButton.js
View File

@@ -1,5 +1,7 @@
import { useEffect, useState } from 'react'
import DarkModeButton from './DarkModeButton'
import { loadUserThemeFromCookies, saveTheme, useGlobal } from '@/lib/global'
import { faMoon, faSun } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
let windowTop = 0
export default function FloatDarkModeButton () {
@@ -18,12 +20,29 @@ export default function FloatDarkModeButton () {
return () => document.removeEventListener('scroll', scrollListener)
})
const { changeTheme } = useGlobal()
const userTheme = loadUserThemeFromCookies()
// 用户手动设置主题
const handleChangeDarkMode = () => {
const newTheme = userTheme === 'light' ? 'dark' : 'light'
saveTheme(newTheme)
changeTheme(newTheme)
}
return (
<div
className={(show ? 'animate__fadeInRight ' : 'hidden lg:block') + ' animate__animated animate__faster shadow-card fixed right-5 bottom-36 py-1.5 px-2.5 rounded-full' +
' text-black shadow-card dark:border-gray-500 glassmorphism dark:bg-gray-700 dark:text-gray-200'}
>
<DarkModeButton />
</div>
<div
onClick={handleChangeDarkMode}
className={
(show ? 'animate__fadeInRight ' : 'hidden lg:block') +
' px-3.5 py-3 animate__animated animate__faster shadow-card fixed right-5 bottom-36 z-10 duration-200 text-xs cursor-pointer rounded-xl' +
' text-black shadow-card dark:border-gray-500 glassmorphism dark:bg-gray-700 dark:text-gray-200'
}
>
<FontAwesomeIcon
icon={userTheme === 'dark' ? faSun : faMoon}
id="darkModeButton"
className="hover:scale-150 transform duration-200"
/>
</div>
)
}

4
components/JumpToTopButton.js
View File

@@ -42,9 +42,9 @@ const JumpToTopButton = ({ targetRef, showPercent = true }) => {
return (<div id='jump-to-top' className='right-5 fixed flex bottom-48 duration-500 z-20'>
<div onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
className={(show ? '' : 'hidden') + ' animate__fadeInRight animate__animated animate__faster shadow-card rounded-full glassmorphism py-1 cursor-pointer '}>
className={(show ? '' : 'hidden') + ' animate__fadeInRight animate__animated animate__faster shadow-card rounded-xl glassmorphism py-1 cursor-pointer '}>
<div className='text-center'>
<div className='w-10 dark:text-gray-200 transform hover:scale-125 duration-200 text-xs' title={locale.POST.TOP} >
<div className='w-10 dark:text-gray-200 transform hover:scale-150 duration-200 text-xs' title={locale.POST.TOP} >
<FontAwesomeIcon icon={faArrowUp} />
</div>
{showPercent && (<div className='w-10 text-xs dark:text-gray-200'>{percent}</div>)}

12
components/SideArea.js
View File

@@ -27,7 +27,7 @@ const SideArea = ({ title, tags, currentTag, post, posts, categories, currentCat
const { locale } = useGlobal()
return <aside id='sidebar' className='w-72 z-10 scroll-hidden h-full'>
<section className='hidden lg:block bg-white dark:bg-gray-800 rounded-xl py-8 shadow-lg'>
<section className='hidden lg:block bg-white dark:bg-gray-800 rounded-xl hover:shadow-2xl duration-200 py-8 shadow-lg'>
<InfoCard />
</section>
@@ -35,7 +35,7 @@ const SideArea = ({ title, tags, currentTag, post, posts, categories, currentCat
{/* <hr className='dark:border-gray-700 mt-5 py-1' /> */}
<section className='hidden lg:block mt-5 py-4 rounded-xl shadow-lg bg-white dark:bg-gray-800'>
<section className='hidden lg:block mt-5 py-4 rounded-xl shadow-lg bg-white dark:bg-gray-800 hover:shadow-2xl duration-200'>
<MenuButtonGroup allowCollapse={true} />
<div className='px-5 pt-2'>
<SearchInput currentTag={currentTag} currentSearch={currentSearch} />
@@ -44,7 +44,7 @@ const SideArea = ({ title, tags, currentTag, post, posts, categories, currentCat
{/* 最新文章 */}
{posts && (
<section className='rounded-xl shadow-lg py-4 mt-5 bg-white dark:bg-gray-800'>
<section className='rounded-xl shadow-lg py-4 mt-5 bg-white dark:bg-gray-800 hover:shadow-2xl duration-200'>
<div className='text-sm pb-2 px-5 flex flex-nowrap justify-between'>
<div className='font-light text-gray-600 dark:text-gray-200'><FontAwesomeIcon icon={faArchive} className='mr-2' />{locale.COMMON.LATEST_POSTS}</div>
</div>
@@ -54,7 +54,7 @@ const SideArea = ({ title, tags, currentTag, post, posts, categories, currentCat
{/* 分类 */}
{categories && (
<section className='rounded-xl shadow-lg py-4 mt-5 bg-white dark:bg-gray-800'>
<section className='rounded-xl shadow-lg py-4 mt-5 bg-white dark:bg-gray-800 hover:shadow-2xl duration-200'>
<div className='text-sm px-5 flex flex-nowrap justify-between font-light'>
<div className='pb-1 text-gray-600 dark:text-gray-200'><FontAwesomeIcon icon={faThList} className='mr-2' />{locale.COMMON.CATEGORY}</div>
<Link href='/category' passHref>
@@ -69,7 +69,7 @@ const SideArea = ({ title, tags, currentTag, post, posts, categories, currentCat
{/* 标签云 */}
{tags && (
<section className='rounded-xl shadow-lg py-4 mt-5 bg-white dark:bg-gray-800'>
<section className='rounded-xl shadow-lg py-4 mt-5 bg-white dark:bg-gray-800 hover:shadow-2xl duration-200'>
<div className='text-sm pb-1 px-5 flex flex-nowrap justify-between font-light dark:text-gray-200'>
<div className='text-gray-600 dark:text-gray-200'><FontAwesomeIcon icon={faTags} className='mr-2'/>{locale.COMMON.TAGS}</div>
<Link href='/tag' passHref>
@@ -86,7 +86,7 @@ const SideArea = ({ title, tags, currentTag, post, posts, categories, currentCat
</div>
{post && (
<section id='left-toc' className='sticky pb-20 top-6 rounded-xl shadow-lg bg-white dark:bg-gray-800'>
<section id='left-toc' className='sticky pb-20 top-6 rounded-xl shadow-lg bg-white dark:bg-gray-800 hover:shadow-2xl duration-200'>
<div className='border-b text-2xl bg-white text-black rounded-t-xl dark:border-gray-700 dark:bg-gray-700 dark:text-white py-6 px-6'>
{locale.COMMON.TABLE_OF_CONTENTS}
</div>

2
components/StickyBar.js
View File

@@ -14,7 +14,7 @@ const StickyBar = ({ children }) => {
<div className='z-30 absolute h-12 left-0 flex'>
<div className='pr-6 md:ml-5 -line-x-opacity'/>
</div>
<div id='tag-container' className="max-w-xs md:max-w-lg xl:max-w-2xl 2xl:max-w-5xl 3xl:max-w-6xl">
<div id='tag-container' className="md:pl-3 max-w-xs md:max-w-lg xl:max-w-2xl 2xl:max-w-5xl 3xl:max-w-6xl">
{ children }
</div>
<div className='z-30 absolute h-12 right-0 flex'>

6
components/TocDrawerButton.js
View File

@@ -30,9 +30,9 @@ const TocDrawerButton = (props) => {
})
return (
<div id='toc-drawer-button' className='right-5 fixed bottom-60 duration-500 z-40' onClick={props.onClick}>
<div className={(show ? 'animate__fadeInRight' : 'hidden') + ' py-3 px-3.5 animate__animated glassmorphism rounded-full cursor-pointer shadow-card' }>
<div className='dark:text-gray-200 text-center transform hover:scale-125 duration-200 text-xs' title={locale.POST.TOP} >
<div id='toc-drawer-button' className='right-5 fixed bottom-60 duration-500 z-40'>
<div onClick={props.onClick} className={(show ? 'animate__fadeInRight' : 'hidden') + ' py-3 px-3.5 animate__animated glassmorphism rounded-xl cursor-pointer shadow-card' }>
<div className='dark:text-gray-200 text-center transform hover:scale-150 duration-200 text-xs' title={locale.POST.TOP} >
<FontAwesomeIcon icon={faListOl} />
</div>
</div>