From e1504539659eb90e984d563c82a50fedd01fce67 Mon Sep 17 00:00:00 2001 From: Jesse Chan Date: Sun, 11 Jun 2023 03:24:59 -0700 Subject: [PATCH] dependencies: migrate overlayscrollbars to 2 --- .../components/general/ListViewport.tsx | 16 ++-- .../javascript/components/sidebar/Sidebar.tsx | 47 ++++++---- client/src/javascript/routes/Overview.tsx | 2 +- client/src/sass/base/_layout.scss | 2 +- client/src/sass/components/_sidebar.scss | 92 +++++++++++++++++-- package-lock.json | 27 ++---- package.json | 5 +- 7 files changed, 136 insertions(+), 55 deletions(-) diff --git a/client/src/javascript/components/general/ListViewport.tsx b/client/src/javascript/components/general/ListViewport.tsx index dcac7bc4..28322206 100644 --- a/client/src/javascript/components/general/ListViewport.tsx +++ b/client/src/javascript/components/general/ListViewport.tsx @@ -6,11 +6,12 @@ import {useWindowSize} from 'react-use'; import ConfigStore from '@client/stores/ConfigStore'; +import type {OverlayScrollbarsComponentRef} from 'overlayscrollbars-react'; import type {FixedSizeListProps, ListChildComponentProps} from 'react-window'; const Overflow = forwardRef>((props: ComponentProps<'div'>, ref) => { - const {children, className, onScroll} = props; - const osRef = useRef(null); + const {children, onScroll} = props; + const osRef = useRef(null); useEffect(() => { const scrollbarRef = osRef.current; @@ -21,7 +22,7 @@ const Overflow = forwardRef>((props: Compo }; } - const viewport = scrollbarRef.osInstance()?.getElements().viewport as HTMLDivElement; + const viewport = scrollbarRef.osInstance()?.elements().viewport as HTMLDivElement; const refCallback = ref as RefCallback; refCallback(viewport); @@ -43,8 +44,11 @@ const Overflow = forwardRef>((props: Compo @@ -64,7 +68,7 @@ const ListViewport = forwardRef((props: ListVi return ( ( - - - - - - - - - - - - - -
- - - +
+ + + + + + + + + + + + + +
+ + + +
); diff --git a/client/src/javascript/routes/Overview.tsx b/client/src/javascript/routes/Overview.tsx index bfbf03fd..ff9db392 100644 --- a/client/src/javascript/routes/Overview.tsx +++ b/client/src/javascript/routes/Overview.tsx @@ -8,7 +8,7 @@ import FloodActions from '@client/actions/FloodActions'; import Sidebar from '@client/components/sidebar/Sidebar'; import TorrentList from '@client/components/torrent-list/TorrentList'; -import 'overlayscrollbars/css/OverlayScrollbars.css'; +import 'overlayscrollbars/overlayscrollbars.css'; const Alerts = lazy(() => import('@client/components/alerts/Alerts')); const Modals = lazy(() => import('@client/components/modals/Modals')); diff --git a/client/src/sass/base/_layout.scss b/client/src/sass/base/_layout.scss index 71023a8b..508a45b2 100644 --- a/client/src/sass/base/_layout.scss +++ b/client/src/sass/base/_layout.scss @@ -36,7 +36,7 @@ body { @media (max-width: 720px) { .application__sidebar { - display: block; + display: flex; transform: translateX(120px); z-index: unset; } diff --git a/client/src/sass/components/_sidebar.scss b/client/src/sass/components/_sidebar.scss index 7f6b3706..be937bb4 100644 --- a/client/src/sass/components/_sidebar.scss +++ b/client/src/sass/components/_sidebar.scss @@ -4,6 +4,91 @@ @use '../tools/themes'; @use '../tools/variables'; +.os-theme-thin { + &.os-scrollbar { + .os-scrollbar-track { + background: transparent; + } + + .os-scrollbar-track:before { + content: ''; + display: block; + position: absolute; + background: rgba(255, 255, 255, 0.15); + } + + .os-scrollbar-handle:before { + content: ''; + display: block; + position: absolute; + background: rgba(255, 255, 255, 0.5); + border-radius: 10px; + } + + .os-scrollbar-handle:hover:before, + .os-scrollbar-handle.active:before { + background: #fff; + } + } + + &.os-scrollbar-horizontal { + right: 14px; + height: 14px; + padding: 0px 6px; + + &.os-scrollbar-rtl { + left: 14px; + right: 0; + } + + .os-scrollbar-track:before, + .os-scrollbar-handle:before { + left: 0; + right: 0; + height: 2px; + top: 50%; + margin-top: -1px; + } + + .os-scrollbar-handle:hover:before, + .os-scrollbar-handle.active:before { + height: 4px; + margin-top: -2px; + } + + .os-scrollbar-handle { + height: 100%; + min-width: 30px; + } + } + + &.os-scrollbar-vertical { + bottom: 14px; + width: 14px; + padding: 6px 0px; + + .os-scrollbar-track:before, + .os-scrollbar-handle:before { + top: 0; + bottom: 0; + width: 2px; + left: 50%; + margin-left: -1px; + } + + .os-scrollbar-handle:hover:before, + .os-scrollbar-handle.active:before { + width: 4px; + margin-left: -2px; + } + + .os-scrollbar-handle { + width: 100%; + min-height: 30px; + } + } +} + .application { &__sidebar { @include themes.theme('background', 'sidebar--background'); @@ -13,17 +98,10 @@ min-width: 240px; max-width: 250px; height: 100%; - overflow-x: hidden; - overflow-y: overlay; position: relative; z-index: 2; transition: transform 0.2s; - .os-content { - display: flex; - flex-direction: column; - } - @media (max-width: 720px) { transform: translateX(-120px); } diff --git a/package-lock.json b/package-lock.json index 2987aff7..d1fdf2be 100644 --- a/package-lock.json +++ b/package-lock.json @@ -53,7 +53,6 @@ "@types/lodash": "^4.14.195", "@types/morgan": "^1.9.4", "@types/node": "^12.20.55", - "@types/overlayscrollbars": "^1.12.1", "@types/parse-torrent": "^5.8.4", "@types/passport": "^1.0.12", "@types/passport-jwt": "^3.0.8", @@ -117,8 +116,8 @@ "mobx": "^6.9.0", "mobx-react": "^7.6.0", "morgan": "^1.10.0", - "overlayscrollbars": "^1.13.3", - "overlayscrollbars-react": "^0.3.0", + "overlayscrollbars": "^2.2.0", + "overlayscrollbars-react": "^0.5.0", "parse-torrent": "^9.1.5", "passport": "^0.6.0", "passport-jwt": "^4.0.1", @@ -4115,12 +4114,6 @@ "integrity": "sha512-J8xLz7q2OFulZ2cyGTLE1TbbZcjpno7FaN6zdJNrgAdrJ+DZzh/uFR6YrTb4C+nXakvud8Q4+rbhoIWlYQbUFQ==", "dev": true }, - "node_modules/@types/overlayscrollbars": { - "version": "1.12.1", - "resolved": "https://registry.npmjs.org/@types/overlayscrollbars/-/overlayscrollbars-1.12.1.tgz", - "integrity": "sha512-V25YHbSoKQN35UasHf0EKD9U2vcmexRSp78qa8UglxFH8H3D+adEa9zGZwrqpH4TdvqeMrgMqVqsLB4woAryrQ==", - "dev": true - }, "node_modules/@types/parse-json": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz", @@ -13028,19 +13021,19 @@ } }, "node_modules/overlayscrollbars": { - "version": "1.13.3", - "resolved": "https://registry.npmjs.org/overlayscrollbars/-/overlayscrollbars-1.13.3.tgz", - "integrity": "sha512-1nB/B5kaakJuHXaLXLRK0bUIilWhUGT6q5g+l2s5vqYdLle/sd0kscBHkQC1kuuDg9p9WR4MTdySDOPbeL/86g==", + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/overlayscrollbars/-/overlayscrollbars-2.2.0.tgz", + "integrity": "sha512-Sx7gI2TEx+TFvFXJq4BUYM5R4bfWQR2ertdxyzAQ589ouPKKifMBU0/opdCb1bUC7x6sMiSNI1u9ngC0RbMnBg==", "dev": true }, "node_modules/overlayscrollbars-react": { - "version": "0.3.0", - "resolved": "https://registry.npmjs.org/overlayscrollbars-react/-/overlayscrollbars-react-0.3.0.tgz", - "integrity": "sha512-dV74p9VL/aImqJpeYz0vmpScZYu6UiNTmRKfyI4CS0OYUpYCUiTd723adY38Grz2W57hoNCECWDzkOJRFDQeZg==", + "version": "0.5.0", + "resolved": "https://registry.npmjs.org/overlayscrollbars-react/-/overlayscrollbars-react-0.5.0.tgz", + "integrity": "sha512-uCNTnkfWW74veoiEv3kSwoLelKt4e8gTNv65D771X3il0x5g5Yo0fUbro7SpQzR9yNgi23cvB2mQHTTdQH96pA==", "dev": true, "peerDependencies": { - "overlayscrollbars": "^1.10.0", - "react": "^16.4.0 || ^17.0.0 || ^18.0.0" + "overlayscrollbars": "^2.0.0", + "react": ">=16.8.0" } }, "node_modules/p-limit": { diff --git a/package.json b/package.json index a25ba08c..e1c22170 100644 --- a/package.json +++ b/package.json @@ -102,7 +102,6 @@ "@types/lodash": "^4.14.195", "@types/morgan": "^1.9.4", "@types/node": "^12.20.55", - "@types/overlayscrollbars": "^1.12.1", "@types/parse-torrent": "^5.8.4", "@types/passport": "^1.0.12", "@types/passport-jwt": "^3.0.8", @@ -166,8 +165,8 @@ "mobx": "^6.9.0", "mobx-react": "^7.6.0", "morgan": "^1.10.0", - "overlayscrollbars": "^1.13.3", - "overlayscrollbars-react": "^0.3.0", + "overlayscrollbars": "^2.2.0", + "overlayscrollbars-react": "^0.5.0", "parse-torrent": "^9.1.5", "passport": "^0.6.0", "passport-jwt": "^4.0.1",