From 627dd3c9f58dcbd2aeeafa8b4115f54094e35c5a Mon Sep 17 00:00:00 2001
From: Darin Kelkhoff <darin.kelkhoff@gmail.com>
Date: Thu, 16 Nov 2023 10:01:20 -0600
Subject: [PATCH] CE-740 more widget padding changes

---
 .../components/widgets/DashboardWidgets.tsx   | 12 +++-
 src/qqq/components/widgets/ParentWidget.tsx   | 11 +++-
 src/qqq/components/widgets/Widget.tsx         | 60 +++++++++----------
 .../components/widgets/misc/ScriptViewer.tsx  |  8 +--
 4 files changed, 49 insertions(+), 42 deletions(-)

diff --git a/src/qqq/components/widgets/DashboardWidgets.tsx b/src/qqq/components/widgets/DashboardWidgets.tsx
index 22ffe0a..28b3858 100644
--- a/src/qqq/components/widgets/DashboardWidgets.tsx
+++ b/src/qqq/components/widgets/DashboardWidgets.tsx
@@ -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>);
                   }
diff --git a/src/qqq/components/widgets/ParentWidget.tsx b/src/qqq/components/widgets/ParentWidget.tsx
index 86235a1..dd0ac06 100644
--- a/src/qqq/components/widgets/ParentWidget.tsx
+++ b/src/qqq/components/widgets/ParentWidget.tsx
@@ -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"}/>
diff --git a/src/qqq/components/widgets/Widget.tsx b/src/qqq/components/widgets/Widget.tsx
index 9bc0917..b2a7f42 100644
--- a/src/qqq/components/widgets/Widget.tsx
+++ b/src/qqq/components/widgets/Widget.tsx
@@ -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;
diff --git a/src/qqq/components/widgets/misc/ScriptViewer.tsx b/src/qqq/components/widgets/misc/ScriptViewer.tsx
index 51266cb..9c1dbcc 100644
--- a/src/qqq/components/widgets/misc/ScriptViewer.tsx
+++ b/src/qqq/components/widgets/misc/ScriptViewer.tsx
@@ -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>
                {