admin/plugins: use shorter labels on small screens
Massimo Melina committed
Jun 15, 2023 at 18:06 UTC
fcd46cb34ff2ce0755312a14767c77a3ab453ae2
1 file changed
+9
-3
admin/src/PluginsPage.ts
+9
-3
@@ -4,24 +4,30 @@ import { createElement as h, Fragment, useState } from "react"
4
import { Tab, Tabs } from '@mui/material'
5
import InstalledPlugins from "./InstalledPlugins"
6
import OnlinePlugins from "./OnlinePlugins"
7
+import { useBreakpoint } from "./misc"
8
9
const TABS = {
10
"Installed": InstalledPlugins,
10
- "Search online": OnlinePlugins,
11
- "Check updates": () => h(InstalledPlugins, { updates: true }),
11
+ "Search online|Search": OnlinePlugins,
12
+ "Check updates|Updates": () => h(InstalledPlugins, { updates: true }),
13
}
14
const LABELS = Object.keys(TABS)
15
const PANES = Object.values(TABS)
16
17
export default function PluginsPage() {
18
const [tab, setTab] = useState(0)
19
+ const tooSmall = !useBreakpoint('sm')
20
return h(Fragment, {},
21
h(Tabs, {
22
value: tab,
23
onChange(ev, i) {
24
setTab(i)
25
}
24
- }, LABELS.map(label => h(Tab, { label, key: label })) ),
26
+ }, LABELS.map(x =>
27
+ h(Tab, {
28
+ key: x,
29
+ label: x.split('|').slice(tooSmall ? -1 : 0)[0]
30
+ }))),
31
h(PANES[tab])
32
)
33
}