mirror/spacedrive
1
0
Fork 0
mirror of https://github.com/spacedriveapp/spacedrive.git synced 2026-05-07 06:43:29 -04:00
Code Issues Packages Projects Releases Wiki Activity

[ENG-1925] Fix windows scroll (#2756)

Browse Source 
* Fix scroll on windows

* use a different class
This commit is contained in:
Ameer Al Ashhab
2024-10-09 23:57:48 +03:00
committed by GitHub
parent d0dc8bbae9
commit 51bee05a60
3 changed files with 14 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
interface/app/$libraryId/Explorer/index.tsx
View File

@@ -7,7 +7,7 @@ import {
useRspcLibraryContext,
useSelector
} from '@sd/client';
import { useShortcut } from '~/hooks';
import { useOperatingSystem, useShortcut } from '~/hooks';
import { useTopBarContext } from '../TopBar/Context';
import { useExplorerContext } from './Context';
@@ -45,6 +45,7 @@ export default function Explorer(props: PropsWithChildren<Props>) {
s.showInspector,
s.isTagAssignModeActive
]);
const isWindows = useOperatingSystem() === 'windows';
const showPathBar = explorer.showPathBar && layoutStore.showPathBar;
const rspc = useRspcLibraryContext();
@@ -95,6 +96,8 @@ export default function Explorer(props: PropsWithChildren<Props>) {
className="explorer-scroll explorer-inspector-scroll flex flex-1 flex-col overflow-x-hidden"
style={
{
'--scrollbar-width': isWindows ? '10px' : '6px',
'--scrollbar-height': isWindows ? '10px' : '6px',
'--scrollbar-margin-top': `${topBar.topBarHeight}px`,
'--scrollbar-margin-bottom': `${showPathBar ? PATH_BAR_HEIGHT + (showTagBar ? TAG_BAR_HEIGHT : 0) : 0}px`,
'paddingTop': topBar.topBarHeight,
@@ -133,7 +136,10 @@ export default function Explorer(props: PropsWithChildren<Props>) {
{showInspector && (
<Inspector
className={clsx('no-scrollbar absolute right-1.5 top-0 pb-3 pl-3 pr-1.5')}
className={clsx(
'no-scrollbar absolute top-0 pb-3 pl-3 pr-1.5',
isWindows ? 'right-3' : 'right-1.5'
)}
style={{
paddingTop: topBar.topBarHeight + 12,
bottom: showPathBar

4
interface/app/$libraryId/search/SearchOptions.tsx
View File

@@ -82,7 +82,7 @@ export const SearchOptionSubMenu = (
<SearchOptionItemInternals {...props}>{props.name}</SearchOptionItemInternals>
</ContextMenuDivItem>
}
className={clsx(MENU_STYLES, 'explorer-scroll -mt-1.5 max-h-80', props.className)}
className={clsx(MENU_STYLES, 'default-scroll -mt-1.5 max-h-80', props.className)}
>
{props.children}
</DropdownMenu.SubMenu>
@@ -237,7 +237,7 @@ function AddFilterButton() {
onKeyDown={(e) => e.stopPropagation()}
className={clsx(
MENU_STYLES,
'explorer-scroll max-h-[80vh] min-h-[100px] min-w-[200px] max-w-fit'
'default-scroll max-h-[80vh] min-h-[100px] min-w-[200px] max-w-fit'
)}
trigger={
<Button className="flex flex-row gap-1" size="xs" variant="dotted">

8
interface/app/style.scss
View File

@@ -113,8 +113,8 @@ body {
.explorer-scroll {
&::-webkit-scrollbar {
height: 6px;
width: 6px;
height: var(--scrollbar-height);
width: var(--scrollbar-width);
}
&::-webkit-scrollbar-track {
@apply rounded-[6px] bg-transparent;
@@ -129,13 +129,13 @@ body {
.default-scroll {
&::-webkit-scrollbar {
height: 6px;
width: 8px;
width: 6px;
}
&::-webkit-scrollbar-track {
@apply rounded-[6px] bg-transparent;
}
&::-webkit-scrollbar-thumb {
@apply rounded-[6px] bg-app-box;
@apply rounded-[6px] bg-app-explorerScrollbar;
}
}
.page-scroll {