diff --git a/admin/src/ConfigFilePage.ts b/admin/src/ConfigFilePage.ts index d1d4ccb32..8e6ba459c 100644 --- 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 - 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 index 0d23881ff..c929b7921 100644 --- 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 index b572d6f05..c51e122b0 100644 --- a/admin/src/mui.ts +++ b/admin/src/mui.ts @@ -137,11 +137,12 @@ interface BtnProps extends Omit 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>) => Promisable } -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 @@ -149,6 +150,7 @@ export function Btn({ icon, title, onClick, disabled, progress, link, tooltipPro } if (link) onClick = () => window.open(link) + const showLabel = useBreakpoint(labelFrom || 'xs') let ret: ReturnType = 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)