consider file-show as a dialog
Massimo Melina committed
Jul 29, 2023 at 19:21 UTC
de53c6229e1df55d25cdc443ad434dfcc0028df0
1 file changed
+44
-43
frontend/src/show.ts
+44
-43
@@ -59,54 +59,55 @@ export function fileShow(entry: DirEntry) {
59
const mainRef = useRef<HTMLDivElement>()
60
useEffect(() => { scrollY(-1E9) }, [cur])
61
const {t} = useI18N()
62
- return h(Fragment, {},
63
- h(FlexV, {
62
+ return h(FlexV, {
63
gap: 0,
64
alignItems: 'stretch',
65
className: ZoomMode[mode],
67
- props: { onMouseMove() {
68
- setShowNav(true)
69
- clearTimeout(timerRef.current)
70
- timerRef.current = +setTimeout(() => setShowNav(false), 1_000)
71
- } }
66
+ props: {
67
+ role: 'dialog',
68
+ onMouseMove() {
69
+ setShowNav(true)
70
+ clearTimeout(timerRef.current)
71
+ timerRef.current = +setTimeout(() => setShowNav(false), 1_000)
72
+ }
73
+ }
74
},
73
- h('div', { className: 'bar' },
74
- h('div', { className: 'filename' }, cur.n),
75
- h(EntryDetails, { entry: cur, midnight: useMidnight() }),
76
- h(Flex, {},
77
- useWindowSize().width > 1280 && iconBtn('?', () => window.open(WIKI_URL + 'File-show')),
78
- iconBtn('menu', ev => openFileMenu(cur, ev, [
79
- 'open','delete',
80
- { id: 'zoom', icon: 'zoom', label: md(t`Switch _z_oom mode`), onClick: switchZoomMode },
81
- { id: 'fullscreen', icon: 'fullscreen', label: md(t`_F_ull screen`), onClick: toggleFullScreen },
82
- ])),
83
- iconBtn('close', close),
84
- )
85
- ),
86
- h(FlexV, { center: true, className: 'main', ref: mainRef },
87
- loading && h(Spinner, { style: { position: 'absolute', fontSize: '20vh', opacity: .5 } }),
88
- failed === cur.n ? h(FlexV, { alignItems: 'center', textAlign: 'center' },
89
- hIcon('error', { style: { fontSize: '20vh' } }),
90
- h('div', {}, cur.name),
91
- t`Loading failed`
92
- ) : h('div', { className: 'showing-container', ref: containerRef },
93
- h(getShowType(cur) || Fragment, {
94
- src: cur.uri,
95
- className: 'showing',
96
- onLoad: () => {
97
- lastGood.current = cur
98
- setLoading(false)
99
- },
100
- onError: () => {
101
- go()
102
- setFailed(cur.n)
103
- }
104
- })
105
- ),
106
- hIcon('❮', { className: navClass, style: { left: 0 }, onClick: () => go(-1) }),
107
- hIcon('❯', { className: navClass, style: { right: 0 }, onClick: () => go(+1) }),
75
+ h('div', { className: 'bar' },
76
+ h('div', { className: 'filename' }, cur.n),
77
+ h(EntryDetails, { entry: cur, midnight: useMidnight() }),
78
+ h(Flex, {},
79
+ useWindowSize().width > 1280 && iconBtn('?', () => window.open(WIKI_URL + 'File-show')),
80
+ iconBtn('menu', ev => openFileMenu(cur, ev, [
81
+ 'open','delete',
82
+ { id: 'zoom', icon: 'zoom', label: md(t`Switch _z_oom mode`), onClick: switchZoomMode },
83
+ { id: 'fullscreen', icon: 'fullscreen', label: md(t`_F_ull screen`), onClick: toggleFullScreen },
84
+ ])),
85
+ iconBtn('close', close),
86
+ )
87
+ ),
88
+ h(FlexV, { center: true, className: 'main', ref: mainRef },
89
+ loading && h(Spinner, { style: { position: 'absolute', fontSize: '20vh', opacity: .5 } }),
90
+ failed === cur.n ? h(FlexV, { alignItems: 'center', textAlign: 'center' },
91
+ hIcon('error', { style: { fontSize: '20vh' } }),
92
+ h('div', {}, cur.name),
93
+ t`Loading failed`
94
+ ) : h('div', { className: 'showing-container', ref: containerRef },
95
+ h(getShowType(cur) || Fragment, {
96
+ src: cur.uri,
97
+ className: 'showing',
98
+ onLoad: () => {
99
+ lastGood.current = cur
100
+ setLoading(false)
101
+ },
102
+ onError: () => {
103
+ go()
104
+ setFailed(cur.n)
105
+ }
106
+ })
107
),
109
- )
108
+ hIcon('❮', { className: navClass, style: { left: 0 }, onClick: () => go(-1) }),
109
+ hIcon('❯', { className: navClass, style: { right: 0 }, onClick: () => go(+1) }),
110
+ ),
111
)
112
113
function go(dir?: number) {