admin/accounts: list now scrolls independently
Massimo Melina committed
Nov 15, 2024 at 15:56 UTC
86b7a1ff5a0d551e5048f403278926760b54b162
1 file changed
+34
-32
admin/src/AccountsPage.ts
+34
-32
@@ -72,21 +72,23 @@ export default function AccountsPage() {
72
return () => void close()
73
}, [isSideBreakpoint, sel, selectedAccount])
74
75
- return element || h(Grid, { container: true, maxWidth: '80em' },
76
- h(Grid, { item: true, xs: 12 },
75
+ const scrollProps = { height: '100%', display: 'flex', flexDirection: 'column', overflow: 'auto' } as const
76
+ return element || h(Grid, { container: true, rowSpacing: 1, columnSpacing: 2, top: 0, flex: '1 1 auto', height: 0 },
77
+ h(Grid, { item: true, xs: 12, [sideBreakpoint]: 5, lg: 5, xl: 5, ...scrollProps },
78
h(Box, {
78
- display: 'flex',
79
- flexWrap: 'wrap',
80
- gap: 2,
81
- mb: 2,
82
- sx: {
83
- position: 'sticky',
84
- top: 0,
85
- zIndex: 2,
86
- backgroundColor: 'background.paper',
87
- width: 'fit-content',
79
+ display: 'flex',
80
+ flexWrap: 'wrap',
81
+ gap: 2,
82
+ mb: 2,
83
+ boxShadow: '0px -8px 4px 10px #111',
84
+ sx: {
85
+ position: 'sticky',
86
+ top: 0,
87
+ zIndex: 2,
88
+ backgroundColor: 'background.paper',
89
+ width: 'fit-content',
90
+ },
91
},
89
- },
92
h(MenuButton, {
93
variant: 'contained',
94
startIcon: h(PersonAdd),
@@ -98,30 +100,29 @@ export default function AccountsPage() {
100
}, "Add"),
101
reloadBtn(reload),
102
list?.length! > 0 && h(Typography, { p: 1 }, `${list!.length} account(s)`),
101
- ) ),
102
- h(Grid, { item: true, md: 5 },
103
+ ),
104
!list?.length && h(Alert, { severity: 'info' }, md`To access administration <u>remotely</u> you will need to create a user account with admin permission`),
105
h(TreeView<true>, { // true because it's not detecting multiSelect correctly (ts495)
105
- multiSelect: true,
106
- sx: { pr: 4, pb: 2, minWidth: '15em' },
107
- selected: selectionMode ? sel : [],
108
- onNodeSelect(ev, ids) {
109
- setSel(ids)
110
- }
111
- },
106
+ multiSelect: true,
107
+ sx: { pr: 4, pb: 2, minWidth: '15em' },
108
+ selected: selectionMode ? sel : [],
109
+ onNodeSelect(ev, ids) {
110
+ setSel(ids)
111
+ }
112
+ },
113
list?.map(ac =>
114
h(TreeItem, {
115
key: ac.username,
116
nodeId: ac.username,
117
label: h(Box, {
117
- sx: {
118
- display: 'flex',
119
- flexWrap: 'wrap',
120
- padding: '.2em 0',
121
- gap: '.5em',
122
- alignItems: 'center',
123
- }
124
- },
118
+ sx: {
119
+ display: 'flex',
120
+ flexWrap: 'wrap',
121
+ padding: '.2em 0',
122
+ gap: '.5em',
123
+ alignItems: 'center',
124
+ }
125
+ },
126
account2icon(ac),
127
ac.disabled && h(DoNotDisturb),
128
(ac.expire || ac.days_to_live) && h(Schedule),
@@ -134,8 +135,9 @@ export default function AccountsPage() {
135
)
136
)
137
),
137
- isSideBreakpoint && sideContent && h(Grid, { item: true, md: 7 },
138
- h(Card, {}, h(CardContent, {}, sideContent) )),
138
+ isSideBreakpoint && sideContent && h(Grid, { item: true, [sideBreakpoint]: true, maxWidth: '100%', ...scrollProps },
139
+ h(Card, { sx: { overflow: 'initial' } }, // overflow is incompatible with stickyBar
140
+ h(CardContent, {}, sideContent)) )
141
)
142
143
function selectNone() {