QRunIO/qqq-frontend-material-dashboard
2
0
Fork 0
mirror of https://github.com/Kingsrook/qqq-frontend-material-dashboard.git synced 2025-07-17 21:00:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fixes for styles (spacing) in header record grid widget

Browse Source
This commit is contained in:
darin.kelkhoff
2023-12-07 12:00:23 -06:00
parent adb2b4613d
commit 68f652f3f3
2 changed files with 8 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/qqq/components/widgets/Widget.tsx
View File

@ -56,6 +56,7 @@ interface Props
labelAdditionalComponentsLeft: LabelComponent[]; labelAdditionalComponentsLeft: LabelComponent[];
labelAdditionalElementsLeft: JSX.Element[]; labelAdditionalElementsLeft: JSX.Element[];
labelAdditionalComponentsRight: LabelComponent[]; labelAdditionalComponentsRight: LabelComponent[];
labelBoxAdditionalSx?: any;
widgetMetaData?: QWidgetMetaData; widgetMetaData?: QWidgetMetaData;
widgetData?: WidgetData; widgetData?: WidgetData;
children: JSX.Element; children: JSX.Element;
@ -75,6 +76,7 @@ Widget.defaultProps = {
labelAdditionalComponentsLeft: [], labelAdditionalComponentsLeft: [],
labelAdditionalElementsLeft: [], labelAdditionalElementsLeft: [],
labelAdditionalComponentsRight: [], labelAdditionalComponentsRight: [],
labelBoxAdditionalSx: {},
omitPadding: false, omitPadding: false,
}; };
@ -174,7 +176,7 @@ export class AddNewRecordButton extends LabelComponent
render = (args: LabelComponentRenderArgs): JSX.Element => render = (args: LabelComponentRenderArgs): JSX.Element =>
{ {
return ( return (
<Typography variant="body2" p={2} pr={0} display="inline" position="relative" top="0.25rem"> <Typography variant="body2" p={2} pr={0} display="inline" position="relative" top="-0.5rem">
<Button sx={{mt: 0.75}} onClick={() => this.openEditForm(args.navigate, this.table, null, this.defaultValues, this.disabledFields)}>{this.label}</Button> <Button sx={{mt: 0.75}} onClick={() => this.openEditForm(args.navigate, this.table, null, this.defaultValues, this.disabledFields)}>{this.label}</Button>
</Typography> </Typography>
); );
@ -552,7 +554,7 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
<Box sx={{width: "100%", height: "100%", minHeight: props.widgetMetaData?.minHeight ? props.widgetMetaData?.minHeight : "initial"}}> <Box sx={{width: "100%", height: "100%", minHeight: props.widgetMetaData?.minHeight ? props.widgetMetaData?.minHeight : "initial"}}>
{ {
needLabelBox && needLabelBox &&
<Box display="flex" justifyContent="space-between" alignItems="flex-start" sx={{width: "100%"}} minHeight={"2.5rem"}> <Box display="flex" justifyContent="space-between" alignItems="flex-start" sx={{width: "100%", ...props.labelBoxAdditionalSx}} minHeight={"2.5rem"}>
<Box> <Box>
{ {
hasPermission ? hasPermission ?

7
src/qqq/components/widgets/misc/RecordGridWidget.tsx
View File

@ -135,7 +135,7 @@ function RecordGridWidget({widgetMetaData, data}: Props): JSX.Element
if(data && data.viewAllLink) if(data && data.viewAllLink)
{ {
labelAdditionalElementsLeft.push( labelAdditionalElementsLeft.push(
<Typography variant="body2" p={2} display="inline" fontSize=".875rem" pt="0" position="relative" top="-0.25rem"> <Typography variant="body2" p={2} display="inline" fontSize=".875rem" pt="0" position="relative">
<Link to={data.viewAllLink}>View All</Link> <Link to={data.viewAllLink}>View All</Link>
</Typography> </Typography>
) )
@ -175,8 +175,8 @@ function RecordGridWidget({widgetMetaData, data}: Props): JSX.Element
if(widgetMetaData?.showExportButton) if(widgetMetaData?.showExportButton)
{ {
labelAdditionalElementsLeft.push( labelAdditionalElementsLeft.push(
<Typography key={1} variant="body2" py={2} px={0} display="inline" position="relative" top="-0.25rem"> <Typography key={1} variant="body2" py={2} px={0} display="inline" position="relative">
<Tooltip title={tooltipTitle}><Button sx={{px: 1, py: 0, minWidth: "initial"}} onClick={onExportClick} disabled={isExportDisabled}><Icon sx={{color: "#757575", fontSize: 1.125}}>save_alt</Icon></Button></Tooltip> <Tooltip title={tooltipTitle}><Button sx={{px: 1, py: 0, minWidth: "initial"}} onClick={onExportClick} disabled={isExportDisabled}><Icon sx={{color: "#757575", fontSize: 1.25}}>save_alt</Icon></Button></Tooltip>
</Typography> </Typography>
); );
} }
@ -216,6 +216,7 @@ function RecordGridWidget({widgetMetaData, data}: Props): JSX.Element
widgetData={data} widgetData={data}
labelAdditionalElementsLeft={labelAdditionalElementsLeft} labelAdditionalElementsLeft={labelAdditionalElementsLeft}
labelAdditionalComponentsRight={labelAdditionalComponentsRight} labelAdditionalComponentsRight={labelAdditionalComponentsRight}
labelBoxAdditionalSx={{position: "relative", top: "-0.375rem"}}
> >
<Box mx={-2} mb={-3}> <Box mx={-2} mb={-3}>
<DataGridPro <DataGridPro