zoriya/flood
1
0
Fork 0
mirror of https://github.com/zoriya/flood.git synced 2026-06-01 10:35:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

dependencies: migrate overlayscrollbars to 2

Browse Source
This commit is contained in:
Jesse Chan
2023-06-11 03:24:59 -07:00
parent 197183bf91
commit e150453965
7 changed files with 136 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/javascript/components/general/ListViewport.tsx
+10 -6
View File
@@ -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<HTMLDivElement, ComponentProps<'div'>>((props: ComponentProps<'div'>, ref) => {
const {children, className, onScroll} = props;
const osRef = useRef<OverlayScrollbarsComponent>(null);
const {children, onScroll} = props;
const osRef = useRef<OverlayScrollbarsComponentRef>(null);
useEffect(() => {
const scrollbarRef = osRef.current;
@@ -21,7 +22,7 @@ const Overflow = forwardRef<HTMLDivElement, ComponentProps<'div'>>((props: Compo
};
}
const viewport = scrollbarRef.osInstance()?.getElements().viewport as HTMLDivElement;
const viewport = scrollbarRef.osInstance()?.elements().viewport as HTMLDivElement;
const refCallback = ref as RefCallback<HTMLDivElement>;
refCallback(viewport);
@@ -43,8 +44,11 @@ const Overflow = forwardRef<HTMLDivElement, ComponentProps<'div'>>((props: Compo
<OverlayScrollbarsComponent
{...props}
options={{
scrollbars: {autoHide: 'leave', clickScrolling: true},
className,
scrollbars: {
autoHide: 'leave',
clickScroll: true,
theme: `os-theme-${ConfigStore.isPreferDark ? 'light' : 'dark'}`,
},
}}
ref={osRef}
>
@@ -64,7 +68,7 @@ const ListViewport = forwardRef<FixedSizeList, ListViewportProps>((props: ListVi
return (
<FixedSizeList
className={`${className} ${ConfigStore.isPreferDark ? 'os-theme-light' : 'os-theme-dark'}`}
className={className}
height={Math.max(itemSize * 30, windowHeight)}
itemCount={itemCount}
itemKey={itemKey}
client/src/javascript/components/sidebar/Sidebar.tsx
+27 -20
View File
@@ -17,32 +17,39 @@ import TransferData from './TransferData';
const Sidebar: FC = () => (
<OverlayScrollbarsComponent
className="application__sidebar"
options={{
scrollbars: {
autoHide: 'scroll',
clickScrolling: false,
dragScrolling: false,
clickScroll: false,
dragScroll: false,
theme: `os-theme-thin`,
},
overflow: {
x: 'hidden',
y: 'scroll',
},
className: 'application__sidebar os-theme-thin',
}}
>
<SidebarActions>
<SpeedLimitDropdown />
<SettingsButton />
<FeedsButton />
<NotificationsButton />
<LogoutButton />
</SidebarActions>
<TransferData />
<SearchBox />
<StatusFilters />
<TagFilters />
<TrackerFilters />
<DiskUsage />
<div style={{flexGrow: 1}} />
<SidebarActions>
<ThemeSwitchButton />
</SidebarActions>
<div style={{display: 'flex', flexDirection: 'column'}}>
<SidebarActions>
<SpeedLimitDropdown />
<SettingsButton />
<FeedsButton />
<NotificationsButton />
<LogoutButton />
</SidebarActions>
<TransferData />
<SearchBox />
<StatusFilters />
<TagFilters />
<TrackerFilters />
<DiskUsage />
<div style={{flexGrow: 1}} />
<SidebarActions>
<ThemeSwitchButton />
</SidebarActions>
</div>
</OverlayScrollbarsComponent>
);
client/src/javascript/routes/Overview.tsx
+1 -1
View File
@@ -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'));
client/src/sass/base/_layout.scss
+1 -1
View File
@@ -36,7 +36,7 @@ body {
@media (max-width: 720px) {
.application__sidebar {
display: block;
display: flex;
transform: translateX(120px);
z-index: unset;
}
client/src/sass/components/_sidebar.scss
+85 -7
View File
@@ -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);
}
package-lock.json
Generated
+10 -17
View File
@@ -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": {
package.json
+2 -3
View File
@@ -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",