fix: admin/fs: selecting home didn't show a "close" button on mobile
Massimo Melina committed
Nov 4, 2023 at 15:48 UTC
fb2dd5272e89dbc14f7430e8008ce32c9ea11c11
3 files changed
+14
-8
admin/src/VfsPage.ts
+3
-2
@@ -5,7 +5,7 @@ import { apiCall, useApiEx } from './api'
5
import { Alert, Button, Card, CardContent, Grid, Link, List, ListItem, ListItemText, Typography } from '@mui/material'
6
import { state, useSnapState } from './state'
7
import VfsMenuBar from './VfsMenuBar'
8
-import VfsTree from './VfsTree'
8
+import VfsTree, { vfsNodeIcon } from './VfsTree'
9
import { Flex, IconBtn, newDialog, onlyTruthy, prefix, useBreakpoint, VfsNodeAdminSend } from './misc'
10
import { reactJoin } from '@hfs/shared'
11
import _ from 'lodash'
@@ -73,7 +73,8 @@ export default function VfsPage() {
73
useEffect(() => {
74
if (isSideBreakpoint || !sideContent) return
75
const { close } = newDialog({
76
- title: selectedFiles.length > 1 ? "Multiple selection" : selectedFiles[0].name,
76
+ title: selectedFiles.length > 1 ? "Multiple selection" :
77
+ h(Flex, { alignItems: 'center' }, vfsNodeIcon(selectedFiles[0] as VfsNode), selectedFiles[0].name || "Home"),
78
Content: () => sideContent,
79
onClose: selectNone,
80
})
admin/src/VfsTree.ts
+8
-4
@@ -81,10 +81,7 @@ export default function VfsTree({ id2node }:{ id2node: Map<string, VfsNode> }) {
81
}
82
},
83
h(Box, { display: 'flex', flex: 0, },
84
- isRoot ? iconTooltip(Home, "home, or root if you like")
85
- : folder ? iconTooltip(FolderIcon, "Folder")
86
- : node.url ? iconTooltip(Link, "Web-link")
87
- : iconTooltip(FileIcon, "File"),
84
+ vfsNodeIcon(node),
85
// attributes
86
h(Box, { sx: {
87
flex: 0, ml: '2px', my: '2px', '&>*': { fontSize: '87%', opacity: .6, mt: '-2px' },
@@ -139,3 +136,10 @@ export function moveVfs(from: string, to: string) {
136
reloadVfs([ to + from.slice(1 + from.lastIndexOf('/', from.length-2)) ])
137
}, alertDialog)
138
}
139
+
140
+export function vfsNodeIcon(node: VfsNode) {
141
+ return node.isRoot ? iconTooltip(Home, "home, or root if you like")
142
+ : node.type === 'folder' ? iconTooltip(FolderIcon, "Folder")
143
+ : node.url ? iconTooltip(Link, "Web-link")
144
+ : iconTooltip(FileIcon, "File")
145
+}
\ No newline at end of file
shared/dialogs.ts
+3
-2
@@ -1,8 +1,8 @@
1
// This file is part of HFS - Copyright 2021-2023, Massimo Melina <a@rejetto.com> - License https://www.gnu.org/licenses/gpl-3.0.txt
2
3
import { createElement as h, Fragment, FunctionComponent, isValidElement, ReactNode, useEffect, useRef } from 'react'
4
-import { proxy, useSnapshot } from 'valtio'
5
-import { isPrimitive } from '.'
4
+import { proxy, ref, useSnapshot } from 'valtio'
5
+import { isPrimitive, objSameKeys } from '.'
6
7
export interface DialogOptions {
8
Content: FunctionComponent<any>,
@@ -133,6 +133,7 @@ function onKeyDown(ev:any) {
133
export function newDialog(options: DialogOptions) {
134
const $id = Math.random()
135
options.$id = $id // object identity is not working because of the proxy. This is a possible workaround
136
+ options = objSameKeys(options, x => isValidElement(x) ? ref(x) : x) as typeof options // encapsulate elements as react will try to write, but valtio makes them readonly
137
dialogs.push(options)
138
return { close }
139