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

CE-740 more widget padding changes

Browse Source
This commit is contained in:
darin.kelkhoff
2023-11-16 10:01:20 -06:00
parent 40ac89dac3
commit 627dd3c9f5
4 changed files with 49 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/qqq/components/widgets/DashboardWidgets.tsx
View File

@ -497,6 +497,11 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
);
};
if(wrapWidgetsInTabPanels)
{
omitWrappingGridContainer = true;
}
const body: JSX.Element =
(
<>
@ -515,7 +520,12 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
if (wrapWidgetsInTabPanels)
{
renderedWidget = (<TabPanel index={i} value={selectedTab} style={{padding: "1rem 0 0 1.25rem", width: "100%", marginBottom: "-1.5rem"}}>
renderedWidget = (<TabPanel index={i} value={selectedTab} style={{
padding: 0,
margin: "-1rem",
marginBottom: "-3.5rem",
width: "calc(100% + 2rem)"
}}>
{renderedWidget}
</TabPanel>);
}

11
src/qqq/components/widgets/ParentWidget.tsx
View File

@ -106,9 +106,15 @@ function ParentWidget({urlParams, widgetMetaData, widgetIndex, data, reloadWidge
///////////////////////////////////////////////////////////////////////////////////////////
// if this parent widget is in card form, and its children are too, then we need some px //
///////////////////////////////////////////////////////////////////////////////////////////
const px = (widgetMetaData && widgetMetaData.isCard && widgets && widgets[0] && widgets[0].isCard) ? 3 : 0;
const parentIsCard = widgetMetaData && widgetMetaData.isCard;
const childrenAreCards = widgetMetaData && widgets && widgets[0] && widgets[0].isCard;
const px = (parentIsCard && childrenAreCards) ? 3 : 0;
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// if this is a parent, which is not a card, then we need to omit the padding, i think, on the Widget that ultimately gets rendered //
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
const omitPadding = !parentIsCard;
// @ts-ignore
return (
qInstance && data ? (
<Widget
@ -116,6 +122,7 @@ function ParentWidget({urlParams, widgetMetaData, widgetIndex, data, reloadWidge
widgetData={data}
storeDropdownSelections={storeDropdownSelections}
reloadWidgetCallback={parentReloadWidgetCallback}
omitPadding={omitPadding}
>
<Box sx={{height: "100%", width: "100%"}} px={px}>
<DashboardWidgets widgetMetaDataList={widgets} entityPrimaryKey={entityPrimaryKey} tableName={tableName} childUrlParams={childUrlParams} areChildren={true} parentWidgetMetaData={widgetMetaData} wrapWidgetsInTabPanels={data.layoutType == "TABS"}/>

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

@ -64,6 +64,7 @@ interface Props
isChild?: boolean;
footerHTML?: string;
storeDropdownSelections?: boolean;
omitPadding: boolean;
}
Widget.defaultProps = {
@ -74,6 +75,7 @@ Widget.defaultProps = {
labelAdditionalComponentsLeft: [],
labelAdditionalElementsLeft: [],
labelAdditionalComponentsRight: [],
omitPadding: false,
};
@ -460,7 +462,7 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
//////////////////////////////////////////////////////////////////////////////////////////
const labelToUse = props.widgetData?.label ?? props.widgetMetaData?.label
let labelElement = (
<Typography sx={{cursor: "default"}} variant="h6" display="inline">
<Typography sx={{cursor: "default", pl: props.widgetMetaData.isCard ? "auto" : "1rem", pt: props.widgetMetaData.type == "parentWidget" ? "1rem" : "auto"}} variant="h6" display="inline">
{labelToUse}
</Typography>
);
@ -480,11 +482,7 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
{
hasPermission ?
props.widgetMetaData?.icon && (
<Box
ml={1}
mr={2}
mt={-4}
sx={{
<Box ml={1} mr={2} mt={-4} sx={{
display: "flex",
justifyContent: "center",
alignItems: "center",
@ -502,10 +500,7 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
</Box>
) :
(
<Box
ml={3}
mt={-4}
sx={{
<Box ml={3} mt={-4} sx={{
display: "flex",
justifyContent: "center",
alignItems: "center",
@ -583,11 +578,12 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
}
</Box>;
const padding = props.omitPadding? "auto" : "24px 16px";
return props.widgetMetaData?.isCard
? <Card sx={{marginTop: props.widgetMetaData?.icon ? 2 : 0, width: "100%", py: "24px", px: "16px"}} className={fullScreenWidgetClassName}>
? <Card sx={{marginTop: props.widgetMetaData?.icon ? 2 : 0, width: "100%", p: padding}} className={fullScreenWidgetClassName}>
{widgetContent}
</Card>
: <span style={{width: "100%"}}>{widgetContent}</span>;
: <span style={{width: "100%", padding: padding}}>{widgetContent}</span>;
}
export default Widget;

8
src/qqq/components/widgets/misc/ScriptViewer.tsx
View File

@ -392,14 +392,8 @@ export default function ScriptViewer({scriptId, associatedScriptTableName, assoc
return JSON.stringify(new QQueryFilter([new QFilterCriteria("scriptRevisionId", QCriteriaOperator.EQUALS, [scriptRevisionId])]));
}
/*
position: relative;
left: -356px;
width: calc(100% + 380px);
*/
return (
<Grid container className="scriptViewer">
<Grid container className="scriptViewer" m={-2} pt={4} width={"calc(100% + 2rem)"}>
<Grid item xs={12}>
<Box>
{