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

[ENG-1777] Fix inspector scroll (#2564)

Browse source 
* fix inspector scroll

* fix inspector toggle
This commit is contained in:
ameer2468 2024-06-24 19:04:47 +03:00 committed by GitHub
parent a9eb3c7f42
commit f0bc308653
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 24 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
interface/app/$libraryId/Explorer/ExplorerPathBar.tsx
View file

@ -1,8 +1,4 @@
import { AppWindow, ArrowSquareOut, CaretRight, ClipboardText } from '@phosphor-icons/react';
import clsx from 'clsx';
import { memo, useMemo, useState } from 'react';
import { useNavigate } from 'react-router';
import { createSearchParams } from 'react-router-dom';
import {
getExplorerItemData,
getIndexedItemFilePath,
@ -10,9 +6,13 @@ import {
useLibraryQuery
} from '@sd/client';
import { ContextMenu } from '@sd/ui';
import clsx from 'clsx';
import { memo, useMemo, useState } from 'react';
import { useNavigate } from 'react-router';
import { createSearchParams } from 'react-router-dom';
import { useTabsContext } from '~/TabsContext';
import { Icon } from '~/components';
import { useIsDark, useLocale, useOperatingSystem } from '~/hooks';
import { useTabsContext } from '~/TabsContext';
import { usePlatform } from '~/util/Platform';
import { useExplorerContext } from './Context';
@ -119,10 +119,10 @@ export const ExplorerPathBar = memo(() => {
return (
<div
className={clsx(
'group flex items-center border-t border-t-app-line bg-app/90 px-3.5 text-[11px] text-ink-dull backdrop-blur-lg',
`h-[${PATH_BAR_HEIGHT}px]`
)}
className={'group flex items-center border-t border-t-app-line bg-app/90 px-3.5 text-[11px] text-ink-dull backdrop-blur-lg'}
style={{
height: PATH_BAR_HEIGHT
}}
>
{paths.map((path, idx) => (
<Path

6
interface/app/$libraryId/Explorer/ExplorerTagBar.tsx
View file

@ -1,6 +1,4 @@
import { Circle } from '@phosphor-icons/react';
import clsx from 'clsx';
import { ReactNode, useCallback, useEffect, useRef, useState } from 'react';
import {
ExplorerItem,
Tag,
@ -11,13 +9,15 @@ import {
useSelector
} from '@sd/client';
import { Shortcut, toast } from '@sd/ui';
import clsx from 'clsx';
import { useEffect, useRef, useState } from 'react';
import { useIsDark, useKeybind, useLocale, useOperatingSystem } from '~/hooks';
import { keybindForOs } from '~/util/keybinds';
import { useExplorerContext } from './Context';
import { explorerStore } from './store';
export const TAG_BAR_HEIGHT = 64;
export const TAG_BAR_HEIGHT = 54;
const NUMBER_KEYCODES: string[][] = [
['Key1'],
['Key2'],

2
interface/app/$libraryId/Explorer/Inspector/index.tsx
View file

@ -103,7 +103,7 @@ export const Inspector = forwardRef<HTMLDivElement, Props>(
return (
<div ref={ref} style={{ width: INSPECTOR_WIDTH, ...style }} {...props}>
<Sticky
scrollElement={explorer.scrollRef.current || undefined}
scrollElement=".explorer-inspector-scroll"
stickyClassName="!top-[40px]"
topOffset={-40}
>

6
interface/app/$libraryId/Explorer/TopBarOptions.tsx
View file

@ -8,15 +8,15 @@ import {
SquaresFour,
Tag
} from '@phosphor-icons/react';
import { ExplorerLayout, useSelector } from '@sd/client';
import clsx from 'clsx';
import { useMemo } from 'react';
import { useDocumentEventListener } from 'rooks';
import { ExplorerLayout, useSelector } from '@sd/client';
import { useKeyMatcher, useLocale } from '~/hooks';
import { KeyManager } from '../KeyManager';
import { Spacedrop, SpacedropButton } from '../Spacedrop';
import TopBarOptions, { ToolOption, TOP_BAR_ICON_CLASSLIST } from '../TopBar/TopBarOptions';
import TopBarOptions, { TOP_BAR_ICON_CLASSLIST, ToolOption } from '../TopBar/TopBarOptions';
import { useExplorerContext } from './Context';
import OptionsPanel from './OptionsPanel';
import { explorerStore } from './store';
@ -83,7 +83,7 @@ export const useExplorerTopBarOptions = () => {
toolTipLabel: t('show_inspector'),
keybinds: [controlIcon, 'I'],
onClick: () => {
explorerStore.showInspector = !showInspector;
explorerStore.showInspector = !explorerStore.showInspector
},
icon: (
<SidebarSimple

16
interface/app/$libraryId/Explorer/index.tsx
View file

@ -1,5 +1,4 @@
import { FolderNotchOpen } from '@phosphor-icons/react';
import { CSSProperties, type PropsWithChildren, type ReactNode } from 'react';
import {
explorerLayout,
useExplorerLayoutStore,
@ -7,6 +6,7 @@ import {
useRspcLibraryContext,
useSelector
} from '@sd/client';
import { CSSProperties, type PropsWithChildren, type ReactNode } from 'react';
import { useShortcut } from '~/hooks';
import { useTopBarContext } from '../TopBar/Context';
@ -26,7 +26,7 @@ import 'react-slidedown/lib/slidedown.css';
import clsx from 'clsx';
import { ExplorerTagBar } from './ExplorerTagBar';
import { ExplorerTagBar, TAG_BAR_HEIGHT } from './ExplorerTagBar';
import { useExplorerDnd } from './useExplorerDnd';
interface Props {
@ -92,11 +92,11 @@ export default function Explorer(props: PropsWithChildren<Props>) {
<ExplorerContextMenu>
<div
ref={explorer.scrollRef}
className="custom-scroll explorer-scroll flex flex-1 flex-col overflow-x-hidden"
className="explorer-scroll explorer-inspector-scroll flex flex-1 flex-col overflow-x-hidden"
style={
{
'--scrollbar-margin-top': `${topBar.topBarHeight}px`,
'--scrollbar-margin-bottom': `${showPathBar ? PATH_BAR_HEIGHT : 0}px`,
'--scrollbar-margin-bottom': `${showPathBar ? PATH_BAR_HEIGHT + (showTagBar ? TAG_BAR_HEIGHT : 0) : 0}px`,
'paddingTop': topBar.topBarHeight,
'paddingRight': showInspector ? INSPECTOR_WIDTH : 0
} as CSSProperties
@ -117,7 +117,7 @@ export default function Explorer(props: PropsWithChildren<Props>) {
listViewOptions={{ hideHeaderBorder: true }}
scrollPadding={{
top: topBar.topBarHeight,
bottom: showPathBar ? PATH_BAR_HEIGHT : undefined
bottom: showPathBar ? PATH_BAR_HEIGHT + (showTagBar ? TAG_BAR_HEIGHT : 0) : undefined
}}
/>
</div>
@ -132,11 +132,11 @@ 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',
showPathBar && `b-[${PATH_BAR_HEIGHT}px]`
'no-scrollbar absolute right-1.5 top-0 pb-3 pl-3 pr-1.5'
)}
style={{
paddingTop: topBar.topBarHeight + 12
paddingTop: topBar.topBarHeight + 12,
bottom: showPathBar ? PATH_BAR_HEIGHT + (showTagBar ? TAG_BAR_HEIGHT : 0) : 0
}}
/>
)}