fix: long file menu can be not full visible with files on the center of the screen
Massimo Melina committed
Feb 29, 2024 at 18:56 UTC
25628d1c8837581272d2318797245fd63d1e07b3
1 file changed
+10
-4
shared/dialogs.ts
+10
-4
@@ -1,7 +1,7 @@
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,
4
- HTMLAttributes} from 'react'
4
+ HTMLAttributes, useState } from 'react'
5
import { proxy, ref, useSnapshot } from 'valtio'
6
import { isPrimitive, objSameKeys } from '.'
7
@@ -67,10 +67,16 @@ export function Dialogs(props: HTMLAttributes<HTMLDivElement>) {
67
h(Dialog, { key: d.$id, ...(d as DialogOptions) })))
68
}
69
70
-function Dialog(d:DialogOptions) {
70
+function Dialog(d: DialogOptions) {
71
const ref = useRef<HTMLElement>()
72
+ const [shiftY, setShiftY] = useState(0)
73
useEffect(()=>{
73
- ref.current?.focus()
74
+ if (!ref.current) return
75
+ ref.current.focus()
76
+ if (d.position) {
77
+ const rect = ref.current.querySelector('.dialog')!.getBoundingClientRect()
78
+ setShiftY(Math.min(0, rect.top, window.innerHeight - rect.bottom))
79
+ }
80
}, [])
81
d = { closable: true, ...dialogsDefaults, ...d }
82
if (d.Container)
@@ -119,7 +125,7 @@ function Dialog(d:DialogOptions) {
125
margin: '1em',
126
position: 'absolute',
127
...pos[0] < w / 2 ? { left: pos[0] } : { right: w - pos[0] },
122
- ...pos[1] < h / 2 ? { top: pos[1] } : { bottom: h - pos[1] },
128
+ ...pos[1] < h / 2 ? { top: shiftY + pos[1] } : { bottom: shiftY + h - pos[1] },
129
}
130
}
131
}