fix: (regression 0.49.0) admin/options: bad mobile layout

mir355 · Oct 29, 2023 · 667a39d · 667a39d
1 parent dc6e733
commit 667a39d
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 5 deletions.
diff --git a/admin/src/ConfigFilePage.ts b/admin/src/ConfigFilePage.ts
@@ -1,6 +1,6 @@
 // This file is part of HFS - Copyright 2021-2023, Massimo Melina <a@rejetto.com> - License https://www.gnu.org/licenses/gpl-3.0.txt
 
-import { createElement as h, Fragment, useEffect, useRef, useState } from 'react';
+import { createElement as h, Fragment, useEffect, useState } from 'react';
 import { apiCall, useApiEx } from './api'
 import { Alert, Box } from '@mui/material'
 import { Btn, Flex, IconBtn, isCtrlKey, KeepInScreen, modifiedSx, reloadBtn } from './misc';
@@ -19,7 +19,7 @@ export default function ConfigFilePage() {
     useEffect(() => { setSaved(data?.text) }, [data])
     useEffect(() => { saved !== undefined && setText(saved || '') }, [saved])
     return h(Fragment, {},
-        h(Flex, { alignItems: 'center' },
+        h(Flex, { alignItems: 'center', flexWrap: 'wrap', justifyContent: 'space-between' },
             h(Btn, { icon: ContentCopy, onClick: copy }, "Copy excluding passwords"),
             edit ? h(Fragment, {},
                 reloadBtn(reload),
@@ -33,6 +33,7 @@ export default function ConfigFilePage() {
             ) : h(Btn, {
                 icon: EditNote,
                 variant: 'outlined',
+                labelFrom: 'sm',
                 onClick() {
                     setEdit(true)
                     const el = document.querySelector('main textarea')

diff --git a/admin/src/OptionsPage.ts b/admin/src/OptionsPage.ts
@@ -7,7 +7,7 @@ import { state, useSnapState } from './state'
 import { Link as RouterLink } from 'react-router-dom'
 import { CardMembership, EditNote, Refresh, Warning } from '@mui/icons-material'
 import { Dict, iconTooltip, InLink, LinkBtn, MAX_TILES_SIZE, modifiedSx, REPO_URL, ipLocalHost,
-    wait, wikiLink, with_, try_, ipForUrl } from './misc'
+    wait, wikiLink, with_, try_, ipForUrl, useBreakpoint } from './misc'
 import { Form, BoolField, NumberField, SelectField, FieldProps, Field, StringField } from '@hfs/mui-grid-form';
 import { ArrayField } from './ArrayField'
 import FileField from './FileField'
@@ -47,6 +47,7 @@ export default function OptionsPage() {
     const reloadStatus = exposedReloadStatus = statusApi.reload
     useEffect(() => void(reloadStatus()), [data]) //eslint-disable-line
     useEffect(() => () => exposedReloadStatus = undefined, []) // clear on unmount
+    const sm = useBreakpoint('sm')
 
     const admins = useApiEx('get_admins').data?.list
 
@@ -88,7 +89,7 @@ export default function OptionsPage() {
                 component: RouterLink,
                 to: "/edit",
                 startIcon: h(EditNote),
-            }, "Edit config file"),
+            }, sm ? "Edit config file" : "File"),
         ],
         defaults() {
             return { sm: 6 }

diff --git a/admin/src/mui.ts b/admin/src/mui.ts
@@ -137,18 +137,20 @@ interface BtnProps extends Omit<LoadingButtonProps,'disabled'|'title'|'onClick'>
     progress?: boolean | number
     link?: string
     confirm?: boolean | string
+    labelFrom?: Breakpoint
     doneMessage?: boolean | string // displayed only if the result of onClick !== false
     tooltipProps?: TooltipProps
     onClick: (...args: Parameters<NonNullable<ButtonProps['onClick']>>) => Promisable<any>
 }
-export function Btn({ icon, title, onClick, disabled, progress, link, tooltipProps, confirm, doneMessage, ...rest }: BtnProps) {
+export function Btn({ icon, title, onClick, disabled, progress, link, tooltipProps, confirm, doneMessage, labelFrom, children, ...rest }: BtnProps) {
     const [loading, setLoading] = useStateMounted(false)
     if (typeof disabled === 'string') {
         title = disabled
         disabled = true
     }
     if (link)
         onClick = () => window.open(link)
+    const showLabel = useBreakpoint(labelFrom || 'xs')
     let ret: ReturnType<FC> = h(LoadingButton, {
         variant: 'contained',
         startIcon: icon && h(icon),
@@ -158,6 +160,16 @@ export function Btn({ icon, title, onClick, disabled, progress, link, tooltipPro
             : h(CircularProgress, { size: '1rem', value: progress*100, variant: 'determinate' }),
         disabled,
         ...rest,
+        children: showLabel && children,
+        sx: {
+            ...rest.sx,
+            ...!showLabel && {
+                minWidth: 'auto',
+                px: 2,
+                py: '7px',
+                '& span': { mx:0 },
+            }
+        },
         async onClick(...args) {
             if (confirm && !await confirmDialog(confirm === true ? "Are you sure?" : confirm)) return
             const ret = onClick?.apply(this,args)