file-show: local help (no wiki link)
Massimo Melina committed
Jul 31, 2023 at 18:58 UTC
e7e031f8cda95c0f58f03f6382cd36f04fbd0369
2 files changed
+39
-4
frontend/src/index.scss
+19
@@ -149,6 +149,21 @@ header {
149
z-index: 3; // necessary to not be covered by checkboxes
150
}
151
152
+kbd {
153
+ background-color: #eee;
154
+ border-radius: 3px;
155
+ border: 1px solid #b4b4b4;
156
+ box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 2px 0 0 rgba(255, 255, 255, 0.7) inset;
157
+ color: #333;
158
+ display: inline-block;
159
+ font-size: 0.85em;
160
+ font-weight: 700;
161
+ line-height: 1;
162
+ padding: 2px 4px;
163
+ white-space: nowrap;
164
+ margin-right: .5em;
165
+}
166
+
167
.before-sliding {
168
width: 0 !important;
169
flex: 0 !important;
@@ -603,6 +618,10 @@ button label {
618
.entry-size::after { display: none }
619
}
620
}
621
+.file-show-help {
622
+ kbd { margin: .5em }
623
+ kbd:first-of-type { margin-top: 1em; }
624
+}
625
626
@media (min-width: 42em) {
627
body {
frontend/src/show.ts
+20
-4
@@ -1,9 +1,9 @@
1
import { DirEntry, ext2type, state } from './state'
2
import { createElement as h, Fragment, useEffect, useRef, useState } from 'react'
3
-import { hfsEvent, hIcon, newDialog, restartAnimation, WIKI_URL } from './misc'
3
+import { hfsEvent, hIcon, newDialog, restartAnimation } from './misc'
4
import { useEventListener, useWindowSize } from 'usehooks-ts'
5
import { EntryDetails, useMidnight } from './BrowseFiles'
6
-import { Flex, FlexV, iconBtn, Spinner } from './components'
6
+import { Flex, FlexV, Html, iconBtn, Spinner } from './components'
7
import { openFileMenu } from './fileMenu'
8
import { useI18N } from './i18n'
9
import md from '@hfs/admin/src/md'
@@ -76,7 +76,7 @@ export function fileShow(entry: DirEntry) {
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')),
79
+ useWindowSize().width > 1280 && iconBtn('?', showHelp),
80
iconBtn('menu', ev => openFileMenu(cur, ev, [
81
'open','delete',
82
{ id: 'zoom', icon: 'zoom', label: md(t`Switch _z_oom mode`), onClick: switchZoomMode },
@@ -165,4 +165,20 @@ function Audio({ onLoad, ...rest }: any) {
165
166
function Video({ onLoad, ...rest }: any) {
167
return h('video', { onLoadedData: onLoad, controls: true, ...rest })
168
-}
\ No newline at end of file
168
+}
169
+
170
+function showHelp() {
171
+ newDialog({
172
+ title: "File show help",
173
+ className: 'file-show-help',
174
+ Content: () => h(Html, { code: `
175
+ You can use the keyboard for some actions:
176
+ <br/><kbd>left/right</kbd> go to previous/next file
177
+ <br/><kbd>up/down</kbd> scroll tall images
178
+ <br/><kbd>space</kbd> select
179
+ <br/><kbd>D</kbd> download
180
+ <br/><kbd>Z</kbd> zoom modes
181
+ <br/><kbd>F</kbd> full screen
182
+ ` })
183
+ })
184
+}