From 180449e9cd49673ffe122ce7dac15e1ee9973046 Mon Sep 17 00:00:00 2001 From: Innei Date: Thu, 2 Nov 2023 15:27:49 +0800 Subject: [PATCH] feat: add bottombar actions Signed-off-by: Innei --- src/app/notes/[id]/pageImpl.tsx | 10 +++++++--- .../[category]/[slug]/pageImpl.tsx | 2 ++ .../widgets/note/NoteActionAside.tsx | 18 ++++++++++++++++++ .../widgets/post/PostActionAside.tsx | 14 ++++++++++++++ .../widgets/shared/ActionAsideContainer.tsx | 4 ++-- .../widgets/shared/ReadIndicator.tsx | 4 ++-- src/components/widgets/subscribe/hooks.tsx | 2 +- src/components/widgets/toc/TocFAB.tsx | 2 +- .../shared/WrappedElementProvider.tsx | 4 ++-- 9 files changed, 49 insertions(+), 11 deletions(-) diff --git a/src/app/notes/[id]/pageImpl.tsx b/src/app/notes/[id]/pageImpl.tsx index 70fb34ae8f..23c65cad91 100644 --- a/src/app/notes/[id]/pageImpl.tsx +++ b/src/app/notes/[id]/pageImpl.tsx @@ -7,6 +7,7 @@ import { AckRead } from '~/components/common/AckRead' import { ClientOnly } from '~/components/common/ClientOnly' import { NoteActionAside, + NoteBottomBarAction, NoteFooterNavigationBarForMobile, NoteTopic, } from '~/components/widgets/note' @@ -71,9 +72,12 @@ const NotePage = function (props: NoteModel) { {/* */} - - - + + + + + + ) } diff --git a/src/app/posts/(post-detail)/[category]/[slug]/pageImpl.tsx b/src/app/posts/(post-detail)/[category]/[slug]/pageImpl.tsx index 2c743288b7..507d782a81 100644 --- a/src/app/posts/(post-detail)/[category]/[slug]/pageImpl.tsx +++ b/src/app/posts/(post-detail)/[category]/[slug]/pageImpl.tsx @@ -4,6 +4,7 @@ import { AckRead } from '~/components/common/AckRead' import { ClientOnly } from '~/components/common/ClientOnly' import { PostActionAside, + PostBottomBarAction, PostCopyright, PostOutdate, PostRelated, @@ -67,6 +68,7 @@ const PostPage = (props: PostModel) => { {/* */} + ) diff --git a/src/components/widgets/note/NoteActionAside.tsx b/src/components/widgets/note/NoteActionAside.tsx index fb42db1151..6a6384e51a 100644 --- a/src/components/widgets/note/NoteActionAside.tsx +++ b/src/components/widgets/note/NoteActionAside.tsx @@ -2,6 +2,7 @@ import { m, useAnimationControls, useForceUpdate } from 'framer-motion' +import { useIsMobile } from '~/atoms' import { MotionButtonBase } from '~/components/ui/button' import { NumberSmoothTransition } from '~/components/ui/number-transition/NumberSmoothTransition' import { useIsClient } from '~/hooks/common/use-is-client' @@ -18,6 +19,7 @@ import { } from '~/providers/note/CurrentNoteDataProvider' import { useCurrentNoteId } from '~/providers/note/CurrentNoteIdProvider' import { useModalStack } from '~/providers/root/modal-stack-provider' +import { useIsEoFWrappedElement } from '~/providers/shared/WrappedElementProvider' import { ActionAsideContainer, @@ -29,6 +31,19 @@ import { AsideDonateButton } from '../shared/AsideDonateButton' import { ShareModal } from '../shared/ShareModal' import { usePresentSubscribeModal } from '../subscribe' +export const NoteBottomBarAction: Component = () => { + const isMobile = useIsMobile() + if (!isMobile) return null + return ( +
+ + + + +
+ ) +} + export const NoteActionAside: Component = ({ className }) => { return ( @@ -50,7 +65,10 @@ const NoteAsideCommentButton = () => { id: data?.id, } }) || {} + + const isEoF = useIsEoFWrappedElement() if (!id) return null + if (isEoF) return null return } diff --git a/src/components/widgets/post/PostActionAside.tsx b/src/components/widgets/post/PostActionAside.tsx index 64a6b7ab78..d4117cf6b2 100644 --- a/src/components/widgets/post/PostActionAside.tsx +++ b/src/components/widgets/post/PostActionAside.tsx @@ -2,6 +2,7 @@ import { m, useAnimationControls, useForceUpdate } from 'framer-motion' +import { useIsMobile } from '~/atoms' import { ThumbsupIcon } from '~/components/icons/thumbs-up' import { MotionButtonBase } from '~/components/ui/button' import { NumberSmoothTransition } from '~/components/ui/number-transition/NumberSmoothTransition' @@ -29,6 +30,19 @@ import { AsideDonateButton } from '../shared/AsideDonateButton' import { ShareModal } from '../shared/ShareModal' import { usePresentSubscribeModal } from '../subscribe' +export const PostBottomBarAction: Component = () => { + const isMobile = useIsMobile() + if (!isMobile) return null + return ( +
+ + + + +
+ ) +} + export const PostActionAside: Component = ({ className }) => { return ( diff --git a/src/components/widgets/shared/ActionAsideContainer.tsx b/src/components/widgets/shared/ActionAsideContainer.tsx index 43100a9303..24826f31e8 100644 --- a/src/components/widgets/shared/ActionAsideContainer.tsx +++ b/src/components/widgets/shared/ActionAsideContainer.tsx @@ -3,7 +3,7 @@ import { useViewport } from '~/atoms' import { clsxm } from '~/lib/helper' import { usePageScrollLocationSelector } from '~/providers/root/page-scroll-info-provider' -import { useIsEOWrappedElement } from '~/providers/shared/WrappedElementProvider' +import { useIsEoFWrappedElement } from '~/providers/shared/WrappedElementProvider' export const asideButtonStyles = { base: 'text-[24px] opacity-80 duration-200 hover:opacity-100 relative', @@ -13,7 +13,7 @@ export const ActionAsideIcon: Component = (props) => { return } export const ActionAsideContainer: Component = ({ className, children }) => { - const isEOA = useIsEOWrappedElement() + const isEOA = useIsEoFWrappedElement() const h = useViewport((v) => v.h) const isEndOfPage = usePageScrollLocationSelector( diff --git a/src/components/widgets/shared/ReadIndicator.tsx b/src/components/widgets/shared/ReadIndicator.tsx index 29a35c4e7c..3a4dcf3db0 100644 --- a/src/components/widgets/shared/ReadIndicator.tsx +++ b/src/components/widgets/shared/ReadIndicator.tsx @@ -8,7 +8,7 @@ import { useIsMobile } from '~/atoms' import { RootPortal } from '~/components/ui/portal' import { useReadPercent } from '~/hooks/shared/use-read-percent' import { clsxm } from '~/lib/helper' -import { useIsEOWrappedElement } from '~/providers/shared/WrappedElementProvider' +import { useIsEoFWrappedElement } from '~/providers/shared/WrappedElementProvider' export const ReadIndicator: Component<{ as?: ElementType @@ -31,7 +31,7 @@ export const ReadIndicator: Component<{ const ReadIndicatorVertical: Component = ({ className }) => { const readPercent = useDeferredValue(useReadPercent()) - const isEOA = useIsEOWrappedElement() + const isEOA = useIsEoFWrappedElement() return (
{ const dispose = present({ title: '邮件订阅', - + clickOutsideToDismiss: true, content: () => ( ), diff --git a/src/components/widgets/toc/TocFAB.tsx b/src/components/widgets/toc/TocFAB.tsx index e5e6e65122..8ed073b678 100644 --- a/src/components/widgets/toc/TocFAB.tsx +++ b/src/components/widgets/toc/TocFAB.tsx @@ -27,7 +27,7 @@ export const TocFAB = () => { const presentToc = useCallback(() => { const dispose = present({ title: 'Table of Content', - + clickOutsideToDismiss: true, content: () => ( (false) @@ -132,7 +132,7 @@ export { WrappedElementProvider, useSetWrappedElement, useWrappedElement, - useIsEOWrappedElement, + useIsEoFWrappedElement, useWrappedElementSize, useWrappedElementPositsion, }