Software-Mac/spacedrive
Software-Mac/spacedrive
1
0
Fork 0
mirror of https://github.com/spacedriveapp/spacedrive synced 2024-07-07 06:43:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ENG-789] Add topbar page scroll (#1010)

Browse source 
Add topbar page scroll
This commit is contained in:
nikec 2023-06-23 12:39:13 -04:00 committed by GitHub
parent b980a6f630
commit 50c6402033
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 17 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
interface/app/$libraryId/PageLayout.tsx
View file

@ -11,7 +11,7 @@ export const Component = () => {
return (
<div
ref={ref}
className="custom-scroll page-scroll app-background flex h-screen w-full flex-col"
className="custom-scroll topbar-page-scroll app-background flex h-screen w-full flex-col"
style={{ paddingTop: TOP_BAR_HEIGHT }}
>
<PageContext.Provider value={{ ref }}>

9
interface/app/$libraryId/settings/Layout.tsx
View file

@ -10,14 +10,9 @@ export const Component = () => {
return (
<div className="app-background flex w-full flex-row">
<Sidebar />
<div className="w-full">
{os !== 'browser' ? (
<div data-tauri-drag-region className="h-3 w-full" />
) : (
<div className="h-5" />
)}
<div className="relative w-full">
<Suspense>
<DragRegion />
<DragRegion className="absolute inset-x-0 top-0 z-50 h-8" />
<Outlet />
</Suspense>
</div>

2
interface/app/$libraryId/settings/OverviewLayout.tsx
View file

@ -1,7 +1,7 @@
import { Outlet } from 'react-router';
export const Component = () => (
<div className="custom-scroll page-scroll relative flex h-full max-h-screen w-full grow-0">
<div className="custom-scroll page-scroll relative flex h-full max-h-screen w-full grow-0 pt-8">
<div className="flex w-full max-w-4xl flex-col space-y-6 px-12 pb-5 pt-2">
<Outlet />
<div className="block h-20" />

14
interface/app/style.scss
View file

@ -77,7 +77,19 @@ body {
width: 8px;
}
&::-webkit-scrollbar-track {
@apply my-[10px] rounded-[6px] bg-transparent;
@apply rounded-[6px] bg-transparent;
}
&::-webkit-scrollbar-thumb {
@apply rounded-[6px] bg-app-box;
}
}
.topbar-page-scroll {
&::-webkit-scrollbar {
height: 6px;
width: 8px;
}
&::-webkit-scrollbar-track {
@apply mt-[46px] rounded-[6px] bg-transparent;
}
&::-webkit-scrollbar-thumb {
@apply rounded-[6px] bg-app-box;