From e7d97a9dfe531fff62023afeb5d64c6d82312bca Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Sat, 5 Jun 2021 17:17:31 +0300 Subject: [PATCH 01/10] feat(v2): add back to top button --- .../src/theme/BackToTopButton/index.tsx | 63 +++++++++++++++++++ .../theme/BackToTopButton/styles.module.css | 41 ++++++++++++ .../src/theme/DocPage/index.tsx | 3 + 3 files changed, 107 insertions(+) create mode 100644 packages/docusaurus-theme-classic/src/theme/BackToTopButton/index.tsx create mode 100644 packages/docusaurus-theme-classic/src/theme/BackToTopButton/styles.module.css diff --git a/packages/docusaurus-theme-classic/src/theme/BackToTopButton/index.tsx b/packages/docusaurus-theme-classic/src/theme/BackToTopButton/index.tsx new file mode 100644 index 000000000000..a5755aad2c14 --- /dev/null +++ b/packages/docusaurus-theme-classic/src/theme/BackToTopButton/index.tsx @@ -0,0 +1,63 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import React, {useState} from 'react'; +import clsx from 'clsx'; +import useScrollPosition from '@theme/hooks/useScrollPosition'; + +import styles from './styles.module.css'; + +const threshold = 300; + +function smoothScrollToTop() { + const currentScroll = document.documentElement.scrollTop; + + if (currentScroll > 0) { + requestAnimationFrame(smoothScrollToTop); + + window.scrollTo(0, Math.floor(currentScroll * 0.85)); + } +} + +function BackToTopButton(): JSX.Element { + const [show, setShow] = useState(false); + + useScrollPosition(({scrollY: scrollTop}, {scrollY: lastScrollTop}) => { + if (scrollTop < threshold) { + setShow(false); + return; + } + + const documentHeight = document.documentElement.scrollHeight; + const windowHeight = window.innerHeight; + + if (lastScrollTop && scrollTop >= lastScrollTop) { + setShow(false); + } else if (scrollTop + windowHeight < documentHeight) { + setShow(true); + } + }, []); + + return ( + + ); +} + +export default BackToTopButton; diff --git a/packages/docusaurus-theme-classic/src/theme/BackToTopButton/styles.module.css b/packages/docusaurus-theme-classic/src/theme/BackToTopButton/styles.module.css new file mode 100644 index 000000000000..bdf36f2a1173 --- /dev/null +++ b/packages/docusaurus-theme-classic/src/theme/BackToTopButton/styles.module.css @@ -0,0 +1,41 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +:root { + --docusaurus-btt-background: var(--ifm-color-primary); + --docusaurus-btt-color: #fff; +} + +.BackToTopButton { + display: flex; + align-items: center; + justify-content: center; + position: fixed; + right: 1.3rem; + bottom: 1.3rem; + border-radius: 50%; + border: none; + background: var(--docusaurus-btt-background); + color: var(--docusaurus-btt-color); + width: 3rem; + height: 3rem; + z-index: var(--ifm-z-index-fixed); + cursor: pointer; + box-shadow: 0 0.125rem 0.3125rem 0 rgba(0, 0, 0, 0.3); + transition: all var(--ifm-transition-fast) ease-in-out; + opacity: 0; + transform: scale(0); +} + +.BackToTopButton:hover { + opacity: 0.8; +} + +.BackToTopButtonShow { + opacity: 1; + transform: scale(1); +} diff --git a/packages/docusaurus-theme-classic/src/theme/DocPage/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocPage/index.tsx index d73e5d3810a4..3dadd160df00 100644 --- a/packages/docusaurus-theme-classic/src/theme/DocPage/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/DocPage/index.tsx @@ -18,6 +18,7 @@ import NotFound from '@theme/NotFound'; import type {DocumentRoute} from '@theme/DocItem'; import type {Props} from '@theme/DocPage'; import IconArrow from '@theme/IconArrow'; +import BackToTopButton from '@theme/BackToTopButton'; import {matchPath} from '@docusaurus/router'; import {translate} from '@docusaurus/Translate'; @@ -61,6 +62,8 @@ function DocPageContent({ tag: docVersionSearchTag(pluginId, version), }}>
+ + {sidebar && (
Date: Sat, 5 Jun 2021 17:38:47 +0300 Subject: [PATCH 02/10] Test on mobiles --- .../src/theme/BackToTopButton/styles.module.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/docusaurus-theme-classic/src/theme/BackToTopButton/styles.module.css b/packages/docusaurus-theme-classic/src/theme/BackToTopButton/styles.module.css index bdf36f2a1173..6dcd19e61d1f 100644 --- a/packages/docusaurus-theme-classic/src/theme/BackToTopButton/styles.module.css +++ b/packages/docusaurus-theme-classic/src/theme/BackToTopButton/styles.module.css @@ -39,3 +39,8 @@ opacity: 1; transform: scale(1); } + +/* Temporary, for test on mobiles */ +:global(.menu--responsive .menu__button) { + display: none !important; +} From 8b610f54eb0af697ea2c8ca91f9ca7e18fbc8367 Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Tue, 20 Jul 2021 10:50:31 +0300 Subject: [PATCH 03/10] Use clean-btn class --- .../src/theme/BackToTopButton/index.tsx | 2 +- .../src/theme/BackToTopButton/styles.module.css | 7 ------- 2 files changed, 1 insertion(+), 8 deletions(-) diff --git a/packages/docusaurus-theme-classic/src/theme/BackToTopButton/index.tsx b/packages/docusaurus-theme-classic/src/theme/BackToTopButton/index.tsx index a5755aad2c14..f4e851b7d8dd 100644 --- a/packages/docusaurus-theme-classic/src/theme/BackToTopButton/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/BackToTopButton/index.tsx @@ -44,7 +44,7 @@ function BackToTopButton(): JSX.Element { return (