diff --git a/web/eclipse/src/pages/files/Files.tsx b/web/eclipse/src/pages/files/Files.tsx index 43c80f1..84f87f9 100644 --- a/web/eclipse/src/pages/files/Files.tsx +++ b/web/eclipse/src/pages/files/Files.tsx @@ -76,7 +76,7 @@ export default function Files() { {files.error && } {files.data && (
- +
)} diff --git a/web/eclipse/src/pages/files/VDirectory.tsx b/web/eclipse/src/pages/files/VDirectory.tsx index 4e1e68c..9bf9267 100644 --- a/web/eclipse/src/pages/files/VDirectory.tsx +++ b/web/eclipse/src/pages/files/VDirectory.tsx @@ -6,10 +6,13 @@ export type VDirectoryData = { path: string; nested: (VDirectoryData | VFileData)[]; indent: number; - globalErrorHook?: (error: string) => void }; -type VDirectoryProps = VDirectoryData; +type VDirectoryProps = { + data: VDirectoryData + isLast?: boolean + globalErrorHook?: (error: string) => void +}; type VDirectoryState = { open: boolean; @@ -27,14 +30,16 @@ export class VDirectory extends React.Component { e.stopPropagation(); - window.location.hash = `#/upload/${this.props.path}`; + window.location.hash = `#/upload/${this.props.data.path}`; } actionCreateFolder = (e: React.MouseEvent) => { @@ -54,10 +59,18 @@ export class VDirectory extends React.Component ( + { + ...item, + isLast: isLast && index === nested.length - 1 + } + )); return (
-
this.setState({ open: !this.state.open })}> +
this.setState({ open: !this.state.open })}> {[...Array(indent)].map((_, i) => ( ))} @@ -80,10 +93,10 @@ export class VDirectory extends React.Component {this.state.open && (
- {nested.map(item => + {nestedModified.map(item => "nested" in item - ? - : + ? + : )}
)} diff --git a/web/eclipse/src/pages/files/VFile.tsx b/web/eclipse/src/pages/files/VFile.tsx index db0d965..2257304 100644 --- a/web/eclipse/src/pages/files/VFile.tsx +++ b/web/eclipse/src/pages/files/VFile.tsx @@ -6,14 +6,17 @@ export type VFileData = { name: string; path: string; indent: number; - globalErrorHook?: (error: string) => void }; type VFileState = { isLoading: boolean; } -type VFileProps = VFileData; +type VFileProps = { + data: VFileData; + isLast?: boolean + globalErrorHook?: (error: string) => void +}; export class VFile extends React.PureComponent { constructor(props: VFileProps) { @@ -28,7 +31,7 @@ export class VFile extends React.PureComponent { this.setState({ isLoading: true }); RequestCollection.getSettings.getSettings().then((settings) => { if (settings.data) { - window.location.hash = `#/lookup/${settings.data.domain}/${this.props.path}`; + window.location.hash = `#/lookup/${settings.data.domain}/${this.props.data.path}`; } else { this.props.globalErrorHook?.("Settings not found or domain is empty"); console.log("Expected settings, got:", settings); @@ -41,10 +44,11 @@ export class VFile extends React.PureComponent { } render() { - const { name, path, indent } = this.props; + const { name, path, indent } = this.props.data; + const isLast = this.props.isLast ?? false; return (
-
+
{[...Array(indent)].map((_, i) => ( ))} diff --git a/web/eclipse/src/pages/files/VObj.scss b/web/eclipse/src/pages/files/VObj.scss index 880968a..1e65a22 100644 --- a/web/eclipse/src/pages/files/VObj.scss +++ b/web/eclipse/src/pages/files/VObj.scss @@ -16,6 +16,10 @@ background-color: var(--text-input-color); align-items: center; + &:not(.vobj-last) { + border-bottom: 2px dashed var(--secondary-background-color); + } + // font-variation-settings: 'wght' 300; & .vobj-indent {