file show: auto-hide navigation
Massimo Melina committed
Jul 26, 2023 at 23:09 UTC
88f7a93d7b528be82d907b5b1e1a0b14e52effdb
2 files changed
+18
-4
frontend/src/index.scss
+2
-1
@@ -574,7 +574,7 @@ button label {
574
.fullWidth {
575
.showing-container, .showing { width: 100%; }
576
}
577
- --nav-size: min(25vh, 15vw);
577
+ --nav-size: min(25vh, 25vw);
578
.nav {
579
position: absolute;
580
margin: -.4em; // closer to the edge
@@ -585,6 +585,7 @@ button label {
585
user-select: none;
586
transition: opacity .3s;
587
&:hover { opacity: .7; }
588
+ &.nav-hidden { opacity: 0 }
589
}
590
.bar {
591
padding: .5em 1em;
frontend/src/show.ts
+16
-3
@@ -42,13 +42,26 @@ export function fileShow(entry: DirEntry) {
42
return
43
}
44
})
45
+ const [showNav, setShowNav] = useState(false)
46
+ const timerRef = useRef(0)
47
+ const navClass = 'nav' + (showNav ? '' : ' nav-hidden')
48
+
49
const [loading, setLoading] = useState(false)
50
const [failed, setFailed] = useState<false | string>(false)
51
const containerRef = useRef<HTMLDivElement>()
52
useEffect(() => { containerRef.current?.scrollTo(0,0) }, [cur])
53
const {t} = useI18N()
54
return h(Fragment, {},
51
- h(FlexV, { gap: 0, alignItems: 'stretch', className: ZoomMode[mode] },
55
+ h(FlexV, {
56
+ gap: 0,
57
+ alignItems: 'stretch',
58
+ className: ZoomMode[mode],
59
+ props: { onMouseMove() {
60
+ setShowNav(true)
61
+ clearTimeout(timerRef.current)
62
+ timerRef.current = +setTimeout(() => setShowNav(false), 1_000)
63
+ } }
64
+ },
65
h('div', { className: 'bar' },
66
h('div', { className: 'filename' }, cur.n),
67
h(EntryDetails, { entry: cur, midnight: useMidnight() }),
@@ -81,8 +94,8 @@ export function fileShow(entry: DirEntry) {
94
}
95
})
96
),
84
- hIcon('❮', { className: 'nav', style: { left: 0 }, onClick: () => go(-1) }),
85
- hIcon('❯', { className: 'nav', style: { right: 0 }, onClick: () => go(+1) }),
97
+ hIcon('❮', { className: navClass, style: { left: 0 }, onClick: () => go(-1) }),
98
+ hIcon('❯', { className: navClass, style: { right: 0 }, onClick: () => go(+1) }),
99
),
100
)
101
)