admin/accounts: smarter layout, will avoid scrolling on full-hd
Massimo Melina committed
Apr 13, 2022 at 14:55 UTC
8e813bf4e8cc79a6a7ec08aeeb7564c9281144b6
1 file changed
+13
-12
admin/src/AccountsPage.ts
+13
-12
@@ -4,7 +4,7 @@ import { isValidElement, createElement as h, useState, useEffect, Fragment, useR
4
import { apiCall, useApiComp } from './api'
5
import { Box, Button, Card, CardContent, Grid, List, ListItem, ListItemText, Typography } from '@mui/material'
6
import { Delete, Group, MilitaryTech, Person, PersonAdd, Refresh } from '@mui/icons-material'
7
-import { BoolField, Form, MultiSelectField, StringField } from './Form'
7
+import { BoolField, Form, MultiSelectField } from './Form'
8
import { alertDialog, confirmDialog } from './dialog'
9
import { iconTooltip, isEqualLax, modifiedSx, onlyTruthy } from './misc'
10
import { TreeItem, TreeView } from '@mui/lab'
@@ -42,7 +42,7 @@ export default function AccountsPage() {
42
if (isValidElement(res))
43
return res
44
const { list }: { list: Account[] } = res
45
- return h(Grid, { container: true, maxWidth: '60em' },
45
+ return h(Grid, { container: true, maxWidth: '80em' },
46
h(Grid, { item: true, xs: 12 },
47
h(Box, {
48
display: 'flex',
@@ -82,7 +82,7 @@ export default function AccountsPage() {
82
h(Button, { onClick: reload, startIcon: h(Refresh) }, "Reload"),
83
h(Typography, { p: 1 }, `${list.length} account(s)`),
84
) ),
85
- h(Grid, { item: true, md: 6 },
85
+ h(Grid, { item: true, md: 6, xl: 5, },
86
h(TreeView, {
87
multiSelect: true,
88
sx: { pr: 4, pb: 2, minWidth: '15em' },
@@ -107,7 +107,7 @@ export default function AccountsPage() {
107
)
108
),
109
sel.length > 0 // this clever test is true both when some accounts are selected and when we are in "new account" modes
110
- && h(Grid, { item: true, md: 6 },
110
+ && h(Grid, { item: true, md: 6, xl: 7 },
111
h(Card, {},
112
h(CardContent, {},
113
selectionMode && sel.length > 1 ? h(Box, {},
@@ -164,22 +164,23 @@ function AccountForm({ account, done, groups, close }: FormProps) {
164
account2icon(values, { fontSize: 'large', sx: { p: 1 }})
165
],
166
fields: [
167
- { k: 'username', label: group ? 'Group name' : undefined, autoComplete: 'off', validate: x => x>'' || "Required" },
168
- !group && { k: 'password', comp: StringField, md: 6, type: 'password', autoComplete: 'new-password', label: add ? "Password" : "Change password",
167
+ { k: 'username', label: group ? 'Group name' : undefined, autoComplete: 'off', validate: x => x>'' || "Required", xl: 4 },
168
+ !group && { k: 'password', md: 6, xl: 4, type: 'password', autoComplete: 'new-password', label: add ? "Password" : "Change password",
169
validate: x => x>'' || !add || "Please provide a password"
170
},
171
- !group && { k: 'password2', comp: StringField, md: 6, type: 'password', autoComplete: 'new-password', label: 'Repeat password',
171
+ !group && { k: 'password2', md: 6, xl: 4, type: 'password', autoComplete: 'new-password', label: 'Repeat password',
172
validate: (x, { values }) => x === values.password || "Enter same password" },
173
- { k: 'ignore_limits', comp: BoolField,
173
+ { k: 'ignore_limits', comp: BoolField, xl: 6,
174
helperText: values.ignore_limits ? "Speed limits don't apply to this account" : "Speed limits apply to this account" },
175
- { k: 'admin', comp: BoolField, fromField: (v:boolean) => v||null, label: "Permission to access Admin interface",
175
+ { k: 'admin', comp: BoolField, xl: 6, fromField: (v:boolean) => v||null, label: "Permission to access Admin interface",
176
helperText: "It's THIS interface you are using right now.",
177
...account.adminActualAccess && { value: true, disabled: true, helperText: "This permission is inherited" },
178
},
179
- { k: 'redirect', comp: StringField, helperText: "If you want this account to be redirected to a specific folder/address at login time" },
179
{ k: 'belongs', comp: MultiSelectField, label: "Inherits from", options: belongsOptions,
181
- helperText: "Options and permissions of the selected groups will be applied to this account. "
182
- + (belongsOptions.length ? '' : "There are no groups available, create one first.") }
180
+ helperText: "Specify groups to inherit permissions from."
181
+ + (belongsOptions.length ? '' : " There are no groups available, create one first.")
182
+ },
183
+ { k: 'redirect', helperText: "If you want this account to be redirected to a specific folder/address at login time" },
184
],
185
onError: alertDialog,
186
save: {