mirror of
https://github.com/spacedriveapp/spacedrive
synced 2024-07-02 10:03:28 +00:00
[ENG-1777] Fix inspector scroll (#2564)
* fix inspector scroll * fix inspector toggle
This commit is contained in:
parent
a9eb3c7f42
commit
f0bc308653
|
@ -1,8 +1,4 @@
|
||||||
import { AppWindow, ArrowSquareOut, CaretRight, ClipboardText } from '@phosphor-icons/react';
|
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 {
|
import {
|
||||||
getExplorerItemData,
|
getExplorerItemData,
|
||||||
getIndexedItemFilePath,
|
getIndexedItemFilePath,
|
||||||
|
@ -10,9 +6,13 @@ import {
|
||||||
useLibraryQuery
|
useLibraryQuery
|
||||||
} from '@sd/client';
|
} from '@sd/client';
|
||||||
import { ContextMenu } from '@sd/ui';
|
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 { Icon } from '~/components';
|
||||||
import { useIsDark, useLocale, useOperatingSystem } from '~/hooks';
|
import { useIsDark, useLocale, useOperatingSystem } from '~/hooks';
|
||||||
import { useTabsContext } from '~/TabsContext';
|
|
||||||
import { usePlatform } from '~/util/Platform';
|
import { usePlatform } from '~/util/Platform';
|
||||||
|
|
||||||
import { useExplorerContext } from './Context';
|
import { useExplorerContext } from './Context';
|
||||||
|
@ -119,10 +119,10 @@ export const ExplorerPathBar = memo(() => {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className={clsx(
|
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'}
|
||||||
'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={{
|
||||||
`h-[${PATH_BAR_HEIGHT}px]`
|
height: PATH_BAR_HEIGHT
|
||||||
)}
|
}}
|
||||||
>
|
>
|
||||||
{paths.map((path, idx) => (
|
{paths.map((path, idx) => (
|
||||||
<Path
|
<Path
|
||||||
|
|
|
@ -1,6 +1,4 @@
|
||||||
import { Circle } from '@phosphor-icons/react';
|
import { Circle } from '@phosphor-icons/react';
|
||||||
import clsx from 'clsx';
|
|
||||||
import { ReactNode, useCallback, useEffect, useRef, useState } from 'react';
|
|
||||||
import {
|
import {
|
||||||
ExplorerItem,
|
ExplorerItem,
|
||||||
Tag,
|
Tag,
|
||||||
|
@ -11,13 +9,15 @@ import {
|
||||||
useSelector
|
useSelector
|
||||||
} from '@sd/client';
|
} from '@sd/client';
|
||||||
import { Shortcut, toast } from '@sd/ui';
|
import { Shortcut, toast } from '@sd/ui';
|
||||||
|
import clsx from 'clsx';
|
||||||
|
import { useEffect, useRef, useState } from 'react';
|
||||||
import { useIsDark, useKeybind, useLocale, useOperatingSystem } from '~/hooks';
|
import { useIsDark, useKeybind, useLocale, useOperatingSystem } from '~/hooks';
|
||||||
import { keybindForOs } from '~/util/keybinds';
|
import { keybindForOs } from '~/util/keybinds';
|
||||||
|
|
||||||
import { useExplorerContext } from './Context';
|
import { useExplorerContext } from './Context';
|
||||||
import { explorerStore } from './store';
|
import { explorerStore } from './store';
|
||||||
|
|
||||||
export const TAG_BAR_HEIGHT = 64;
|
export const TAG_BAR_HEIGHT = 54;
|
||||||
const NUMBER_KEYCODES: string[][] = [
|
const NUMBER_KEYCODES: string[][] = [
|
||||||
['Key1'],
|
['Key1'],
|
||||||
['Key2'],
|
['Key2'],
|
||||||
|
|
|
@ -103,7 +103,7 @@ export const Inspector = forwardRef<HTMLDivElement, Props>(
|
||||||
return (
|
return (
|
||||||
<div ref={ref} style={{ width: INSPECTOR_WIDTH, ...style }} {...props}>
|
<div ref={ref} style={{ width: INSPECTOR_WIDTH, ...style }} {...props}>
|
||||||
<Sticky
|
<Sticky
|
||||||
scrollElement={explorer.scrollRef.current || undefined}
|
scrollElement=".explorer-inspector-scroll"
|
||||||
stickyClassName="!top-[40px]"
|
stickyClassName="!top-[40px]"
|
||||||
topOffset={-40}
|
topOffset={-40}
|
||||||
>
|
>
|
||||||
|
|
|
@ -8,15 +8,15 @@ import {
|
||||||
SquaresFour,
|
SquaresFour,
|
||||||
Tag
|
Tag
|
||||||
} from '@phosphor-icons/react';
|
} from '@phosphor-icons/react';
|
||||||
|
import { ExplorerLayout, useSelector } from '@sd/client';
|
||||||
import clsx from 'clsx';
|
import clsx from 'clsx';
|
||||||
import { useMemo } from 'react';
|
import { useMemo } from 'react';
|
||||||
import { useDocumentEventListener } from 'rooks';
|
import { useDocumentEventListener } from 'rooks';
|
||||||
import { ExplorerLayout, useSelector } from '@sd/client';
|
|
||||||
import { useKeyMatcher, useLocale } from '~/hooks';
|
import { useKeyMatcher, useLocale } from '~/hooks';
|
||||||
|
|
||||||
import { KeyManager } from '../KeyManager';
|
import { KeyManager } from '../KeyManager';
|
||||||
import { Spacedrop, SpacedropButton } from '../Spacedrop';
|
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 { useExplorerContext } from './Context';
|
||||||
import OptionsPanel from './OptionsPanel';
|
import OptionsPanel from './OptionsPanel';
|
||||||
import { explorerStore } from './store';
|
import { explorerStore } from './store';
|
||||||
|
@ -83,7 +83,7 @@ export const useExplorerTopBarOptions = () => {
|
||||||
toolTipLabel: t('show_inspector'),
|
toolTipLabel: t('show_inspector'),
|
||||||
keybinds: [controlIcon, 'I'],
|
keybinds: [controlIcon, 'I'],
|
||||||
onClick: () => {
|
onClick: () => {
|
||||||
explorerStore.showInspector = !showInspector;
|
explorerStore.showInspector = !explorerStore.showInspector
|
||||||
},
|
},
|
||||||
icon: (
|
icon: (
|
||||||
<SidebarSimple
|
<SidebarSimple
|
||||||
|
|
|
@ -1,5 +1,4 @@
|
||||||
import { FolderNotchOpen } from '@phosphor-icons/react';
|
import { FolderNotchOpen } from '@phosphor-icons/react';
|
||||||
import { CSSProperties, type PropsWithChildren, type ReactNode } from 'react';
|
|
||||||
import {
|
import {
|
||||||
explorerLayout,
|
explorerLayout,
|
||||||
useExplorerLayoutStore,
|
useExplorerLayoutStore,
|
||||||
|
@ -7,6 +6,7 @@ import {
|
||||||
useRspcLibraryContext,
|
useRspcLibraryContext,
|
||||||
useSelector
|
useSelector
|
||||||
} from '@sd/client';
|
} from '@sd/client';
|
||||||
|
import { CSSProperties, type PropsWithChildren, type ReactNode } from 'react';
|
||||||
import { useShortcut } from '~/hooks';
|
import { useShortcut } from '~/hooks';
|
||||||
|
|
||||||
import { useTopBarContext } from '../TopBar/Context';
|
import { useTopBarContext } from '../TopBar/Context';
|
||||||
|
@ -26,7 +26,7 @@ import 'react-slidedown/lib/slidedown.css';
|
||||||
|
|
||||||
import clsx from 'clsx';
|
import clsx from 'clsx';
|
||||||
|
|
||||||
import { ExplorerTagBar } from './ExplorerTagBar';
|
import { ExplorerTagBar, TAG_BAR_HEIGHT } from './ExplorerTagBar';
|
||||||
import { useExplorerDnd } from './useExplorerDnd';
|
import { useExplorerDnd } from './useExplorerDnd';
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
|
@ -92,11 +92,11 @@ export default function Explorer(props: PropsWithChildren<Props>) {
|
||||||
<ExplorerContextMenu>
|
<ExplorerContextMenu>
|
||||||
<div
|
<div
|
||||||
ref={explorer.scrollRef}
|
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={
|
style={
|
||||||
{
|
{
|
||||||
'--scrollbar-margin-top': `${topBar.topBarHeight}px`,
|
'--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,
|
'paddingTop': topBar.topBarHeight,
|
||||||
'paddingRight': showInspector ? INSPECTOR_WIDTH : 0
|
'paddingRight': showInspector ? INSPECTOR_WIDTH : 0
|
||||||
} as CSSProperties
|
} as CSSProperties
|
||||||
|
@ -117,7 +117,7 @@ export default function Explorer(props: PropsWithChildren<Props>) {
|
||||||
listViewOptions={{ hideHeaderBorder: true }}
|
listViewOptions={{ hideHeaderBorder: true }}
|
||||||
scrollPadding={{
|
scrollPadding={{
|
||||||
top: topBar.topBarHeight,
|
top: topBar.topBarHeight,
|
||||||
bottom: showPathBar ? PATH_BAR_HEIGHT : undefined
|
bottom: showPathBar ? PATH_BAR_HEIGHT + (showTagBar ? TAG_BAR_HEIGHT : 0) : undefined
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
@ -132,11 +132,11 @@ export default function Explorer(props: PropsWithChildren<Props>) {
|
||||||
{showInspector && (
|
{showInspector && (
|
||||||
<Inspector
|
<Inspector
|
||||||
className={clsx(
|
className={clsx(
|
||||||
'no-scrollbar absolute right-1.5 top-0 pb-3 pl-3 pr-1.5',
|
'no-scrollbar absolute right-1.5 top-0 pb-3 pl-3 pr-1.5'
|
||||||
showPathBar && `b-[${PATH_BAR_HEIGHT}px]`
|
|
||||||
)}
|
)}
|
||||||
style={{
|
style={{
|
||||||
paddingTop: topBar.topBarHeight + 12
|
paddingTop: topBar.topBarHeight + 12,
|
||||||
|
bottom: showPathBar ? PATH_BAR_HEIGHT + (showTagBar ? TAG_BAR_HEIGHT : 0) : 0
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
|
Loading…
Reference in a new issue