From 2288b775bd016df3ca9d536e12437a3f2ccb37d0 Mon Sep 17 00:00:00 2001 From: marino <102478601+kemuru@users.noreply.github.com> Date: Wed, 13 Sep 2023 10:50:06 +0200 Subject: [PATCH 1/5] feat(web): style scrollbar a bit and add placeholder if not scrollable section --- web/src/styles/global-style.ts | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/web/src/styles/global-style.ts b/web/src/styles/global-style.ts index bf9404551..2cfdf3412 100644 --- a/web/src/styles/global-style.ts +++ b/web/src/styles/global-style.ts @@ -15,6 +15,7 @@ export const GlobalStyle = createGlobalStyle` html { box-sizing: border-box; + scrollbar-gutter: stable; } *, *:before, *:after { @@ -103,4 +104,21 @@ export const GlobalStyle = createGlobalStyle` --base-color: ${({ theme }) => theme.skeletonBackground}; --highlight-color: ${({ theme }) => theme.skeletonHighlight}; } + *::-webkit-scrollbar { + width: 6px; + height: 6px; + } + + *::-webkit-scrollbar-track { + background-color: ${({ theme }) => theme.mediumPurple}; +} + +*::-webkit-scrollbar-thumb { + background-color: ${({ theme }) => theme.primaryPurple}; + border-radius: 3px; +} + +*::-webkit-scrollbar-thumb:hover { + background-color: ${({ theme }) => theme.secondaryPurple}; +} `; From 8490c32691ada16fd95926d68dbdd492f70dce38 Mon Sep 17 00:00:00 2001 From: marino <102478601+kemuru@users.noreply.github.com> Date: Wed, 13 Sep 2023 18:17:27 +0200 Subject: [PATCH 2/5] feat(web): add overlay scrollbars plugin, style it, lock functionality --- web/package.json | 2 ++ web/src/context/OverlayScrollContext.tsx | 3 ++ web/src/hooks/useLockOverlayScroll.ts | 28 +++++++++++++++ web/src/layout/Header/navbar/index.tsx | 5 +-- web/src/layout/index.tsx | 34 ++++++++++++++----- .../pages/Cases/CaseDetails/Voting/index.tsx | 4 +-- .../Courts/CourtDetails/StakePanel/index.tsx | 4 +-- web/src/styles/global-style.ts | 21 +++--------- web/src/styles/themes.ts | 4 +++ yarn.lock | 19 +++++++++++ 10 files changed, 93 insertions(+), 31 deletions(-) create mode 100644 web/src/context/OverlayScrollContext.tsx create mode 100644 web/src/hooks/useLockOverlayScroll.ts diff --git a/web/package.json b/web/package.json index 7fb6d1826..ea2cc5bb4 100644 --- a/web/package.json +++ b/web/package.json @@ -82,6 +82,8 @@ "graphql": "^16.7.1", "graphql-request": "~6.1.0", "moment": "^2.29.4", + "overlayscrollbars": "^2.3.0", + "overlayscrollbars-react": "^0.5.2", "react": "^18.2.0", "react-chartjs-2": "^4.3.1", "react-dom": "^18.2.0", diff --git a/web/src/context/OverlayScrollContext.tsx b/web/src/context/OverlayScrollContext.tsx new file mode 100644 index 000000000..7b9629317 --- /dev/null +++ b/web/src/context/OverlayScrollContext.tsx @@ -0,0 +1,3 @@ +import { createContext, MutableRefObject } from "react"; + +export const OverlayScrollContext = createContext | null>(null); diff --git a/web/src/hooks/useLockOverlayScroll.ts b/web/src/hooks/useLockOverlayScroll.ts new file mode 100644 index 000000000..146cdcd2a --- /dev/null +++ b/web/src/hooks/useLockOverlayScroll.ts @@ -0,0 +1,28 @@ +import { useContext, useEffect, useCallback } from "react"; +import { OverlayScrollContext } from "context/OverlayScrollContext"; + +export const useLockOverlayScroll = (shouldLock: boolean) => { + const osInstanceRef = useContext(OverlayScrollContext); + + const lockScroll = useCallback(() => { + const osInstance = osInstanceRef?.current?.osInstance(); + if (osInstance) { + osInstance.options({ overflow: { x: "hidden", y: "hidden" } }); + } + }, [osInstanceRef]); + + const unlockScroll = useCallback(() => { + const osInstance = osInstanceRef?.current?.osInstance(); + if (osInstance) { + osInstance.options({ overflow: { x: "scroll", y: "scroll" } }); + } + }, [osInstanceRef]); + + useEffect(() => { + if (shouldLock) { + lockScroll(); + } else { + unlockScroll(); + } + }, [shouldLock, lockScroll, unlockScroll]); +}; diff --git a/web/src/layout/Header/navbar/index.tsx b/web/src/layout/Header/navbar/index.tsx index 684a36ebf..15e300754 100644 --- a/web/src/layout/Header/navbar/index.tsx +++ b/web/src/layout/Header/navbar/index.tsx @@ -1,6 +1,7 @@ import React from "react"; import styled from "styled-components"; -import { useLockBodyScroll, useToggle } from "react-use"; +import { useToggle } from "react-use"; +import { useLockOverlayScroll } from "hooks/useLockOverlayScroll"; import ConnectWallet from "components/ConnectWallet"; import LightButton from "components/LightButton"; import KlerosSolutionsIcon from "svgs/menu-icons/kleros-solutions.svg"; @@ -37,7 +38,7 @@ const Container = styled.div<{ isOpen: boolean }>` const NavBar: React.FC = () => { const [isSolutionsOpen, toggleSolution] = useToggle(false); const { isOpen } = useOpenContext(); - useLockBodyScroll(isOpen); + useLockOverlayScroll(isOpen); return ( diff --git a/web/src/layout/index.tsx b/web/src/layout/index.tsx index 4a50039d3..ab8859d71 100644 --- a/web/src/layout/index.tsx +++ b/web/src/layout/index.tsx @@ -1,7 +1,10 @@ -import React from "react"; +import React, { useRef } from "react"; import styled from "styled-components"; +import "overlayscrollbars/styles/overlayscrollbars.css"; import { Outlet } from "react-router-dom"; import { ToastContainer } from "react-toastify"; +import { OverlayScrollbarsComponent } from "overlayscrollbars-react"; +import { OverlayScrollContext } from "context/OverlayScrollContext"; import Header from "./Header"; import Footer from "./Footer"; @@ -10,18 +13,31 @@ const Container = styled.div` width: 100%; `; +const StyledOverlayScrollbarsComponent = styled(OverlayScrollbarsComponent)` + height: 100vh; + width: 100vw; +`; + const StyledToastContainer = styled(ToastContainer)` padding: 16px; padding-top: 70px; `; -const Layout: React.FC = () => ( - -
- - -