mirror of
https://github.com/Kingsrook/qqq-frontend-material-dashboard.git
synced 2025-07-18 05:10:45 +00:00
CE-740 more widget padding changes
This commit is contained in:
@ -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>);
|
||||
}
|
||||
|
||||
@ -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"}/>
|
||||
|
||||
@ -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,21 +482,17 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
|
||||
{
|
||||
hasPermission ?
|
||||
props.widgetMetaData?.icon && (
|
||||
<Box
|
||||
ml={1}
|
||||
mr={2}
|
||||
mt={-4}
|
||||
sx={{
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
width: "64px",
|
||||
height: "64px",
|
||||
borderRadius: "8px",
|
||||
background: colors.info.main,
|
||||
color: "#ffffff",
|
||||
float: "left"
|
||||
}}
|
||||
<Box ml={1} mr={2} mt={-4} sx={{
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
width: "64px",
|
||||
height: "64px",
|
||||
borderRadius: "8px",
|
||||
background: colors.info.main,
|
||||
color: "#ffffff",
|
||||
float: "left"
|
||||
}}
|
||||
>
|
||||
<Icon fontSize="medium" color="inherit">
|
||||
{props.widgetMetaData.icon}
|
||||
@ -502,20 +500,17 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
|
||||
</Box>
|
||||
) :
|
||||
(
|
||||
<Box
|
||||
ml={3}
|
||||
mt={-4}
|
||||
sx={{
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
width: "64px",
|
||||
height: "64px",
|
||||
borderRadius: "8px",
|
||||
background: colors.info.main,
|
||||
color: "#ffffff",
|
||||
float: "left"
|
||||
}}
|
||||
<Box ml={3} mt={-4} sx={{
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
width: "64px",
|
||||
height: "64px",
|
||||
borderRadius: "8px",
|
||||
background: colors.info.main,
|
||||
color: "#ffffff",
|
||||
float: "left"
|
||||
}}
|
||||
>
|
||||
<Icon fontSize="medium" color="inherit">lock</Icon>
|
||||
</Box>
|
||||
@ -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;
|
||||
|
||||
@ -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>
|
||||
{
|
||||
|
||||
Reference in New Issue
Block a user