diff --git a/src/qqq/components/widgets/CompositeWidget.tsx b/src/qqq/components/widgets/CompositeWidget.tsx
index b345487..b7347ff 100644
--- a/src/qqq/components/widgets/CompositeWidget.tsx
+++ b/src/qqq/components/widgets/CompositeWidget.tsx
@@ -22,16 +22,19 @@
import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
import {Box, Skeleton} from "@mui/material";
+import parse from "html-react-parser";
import {BlockData} from "qqq/components/widgets/blocks/BlockModels";
import WidgetBlock from "qqq/components/widgets/WidgetBlock";
import React from "react";
-interface CompositeData
+export interface CompositeData
{
blocks: BlockData[];
styleOverrides?: any;
layout?: string;
+ overlayHtml?: string;
+ overlayStyleOverrides?: any;
}
@@ -97,20 +100,34 @@ export default function CompositeWidget({widgetMetaData, data}: CompositeWidgetP
boxStyle.borderRadius = "0.5rem";
boxStyle.background = "#FFFFFF";
}
-
if (data?.styleOverrides)
{
boxStyle = {...boxStyle, ...data.styleOverrides};
}
- return (
- {
- data.blocks.map((block: BlockData, index) => (
-
-
-
- ))
- }
- );
+ let overlayStyle: any = {};
+
+ if (data?.overlayStyleOverrides)
+ {
+ overlayStyle = {...overlayStyle, ...data.overlayStyleOverrides};
+ }
+
+ return (
+ <>
+ {
+ data?.overlayHtml &&
+ {parse(data.overlayHtml)}
+ }
+
+ {
+ data.blocks.map((block: BlockData, index) => (
+
+
+
+ ))
+ }
+
+ >
+ );
}
diff --git a/src/qqq/components/widgets/DashboardWidgets.tsx b/src/qqq/components/widgets/DashboardWidgets.tsx
index f2d1dc0..38fe772 100644
--- a/src/qqq/components/widgets/DashboardWidgets.tsx
+++ b/src/qqq/components/widgets/DashboardWidgets.tsx
@@ -638,8 +638,28 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, reco
if (!omitWrappingGridContainer)
{
- // @ts-ignore
- renderedWidget = (
+ const gridProps: {[key: string]: any} = {};
+
+ for(let size of ["xs", "sm", "md", "lg", "xl", "xxl"])
+ {
+ const key = `gridCols:sizeClass:${size}`
+ if(widgetMetaData?.defaultValues?.has(key))
+ {
+ gridProps[size] = widgetMetaData?.defaultValues.get(key);
+ }
+ }
+
+ if(!gridProps["xxl"])
+ {
+ gridProps["xxl"] = widgetMetaData.gridColumns ? widgetMetaData.gridColumns : 12;
+ }
+
+ if(!gridProps["xs"])
+ {
+ gridProps["xs"] = 12;
+ }
+
+ renderedWidget = (
{renderedWidget}
);
}
diff --git a/src/qqq/components/widgets/blocks/BlockElementWrapper.tsx b/src/qqq/components/widgets/blocks/BlockElementWrapper.tsx
index dbfcce2..965522d 100644
--- a/src/qqq/components/widgets/blocks/BlockElementWrapper.tsx
+++ b/src/qqq/components/widgets/blocks/BlockElementWrapper.tsx
@@ -21,18 +21,19 @@
import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
-import {Tooltip} from "@mui/material";
-import React, {ReactElement, useContext} from "react";
-import {Link} from "react-router-dom";
+import {Box, Tooltip} from "@mui/material";
import QContext from "QContext";
import HelpContent, {hasHelpContent} from "qqq/components/misc/HelpContent";
import {BlockData, BlockLink, BlockTooltip} from "qqq/components/widgets/blocks/BlockModels";
+import CompositeWidget from "qqq/components/widgets/CompositeWidget";
+import React, {ReactElement, useContext} from "react";
+import {Link} from "react-router-dom";
interface BlockElementWrapperProps
{
data: BlockData;
metaData: QWidgetMetaData;
- slot: string
+ slot: string;
linkProps?: any;
children: ReactElement;
}
@@ -47,16 +48,16 @@ export default function BlockElementWrapper({data, metaData, slot, linkProps, ch
let link: BlockLink;
let tooltip: BlockTooltip;
- if(slot)
+ if (slot)
{
link = data.linkMap && data.linkMap[slot.toUpperCase()];
- if(!link)
+ if (!link)
{
link = data.link;
}
tooltip = data.tooltipMap && data.tooltipMap[slot.toUpperCase()];
- if(!tooltip)
+ if (!tooltip)
{
tooltip = data.tooltip;
}
@@ -67,9 +68,9 @@ export default function BlockElementWrapper({data, metaData, slot, linkProps, ch
tooltip = data.tooltip;
}
- if(!tooltip)
+ if (!tooltip)
{
- const helpRoles = ["ALL_SCREENS"]
+ const helpRoles = ["ALL_SCREENS"];
///////////////////////////////////////////////////////////////////////////////////////////////
// the full keys in the helpContent table will look like: //
@@ -80,26 +81,39 @@ export default function BlockElementWrapper({data, metaData, slot, linkProps, ch
const key = data.blockId ? `${data.blockId},${slot}` : slot;
const showHelp = helpHelpActive || hasHelpContent(metaData?.helpContent?.get(key), helpRoles);
- if(showHelp)
+ if (showHelp)
{
const formattedHelpContent = ;
- tooltip = {title: formattedHelpContent, placement: "bottom"}
+ tooltip = {title: formattedHelpContent, placement: "bottom"};
}
}
let rs = children;
- if(link)
+ if (link && link.href)
{
- rs = {rs}
+ rs = {rs};
}
- if(tooltip)
+ if (tooltip)
{
- let placement = tooltip.placement ? tooltip.placement.toLowerCase() : "bottom"
+ let placement = tooltip.placement ? tooltip.placement.toLowerCase() : "bottom";
// @ts-ignore - placement possible values
- rs = {rs}
+ if (tooltip.blockData)
+ {
+ // @ts-ignore - special case for composite type block...
+ rs =
+
+
+ }>{rs};
+ }
+ else
+ {
+ // @ts-ignore - placement possible values
+ rs = {rs};
+ }
}
return (rs);
diff --git a/src/qqq/components/widgets/blocks/BlockModels.ts b/src/qqq/components/widgets/blocks/BlockModels.ts
index 22a7c1e..c29f77c 100644
--- a/src/qqq/components/widgets/blocks/BlockModels.ts
+++ b/src/qqq/components/widgets/blocks/BlockModels.ts
@@ -20,6 +20,7 @@
*/
import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
+import {CompositeData} from "qqq/components/widgets/CompositeWidget";
export interface BlockData
@@ -29,8 +30,8 @@ export interface BlockData
tooltip?: BlockTooltip;
link?: BlockLink;
- tooltipMap?: {[slot: string]: BlockTooltip};
- linkMap?: {[slot: string]: BlockLink};
+ tooltipMap?: { [slot: string]: BlockTooltip };
+ linkMap?: { [slot: string]: BlockLink };
values: any;
styles?: any;
@@ -39,6 +40,7 @@ export interface BlockData
export interface BlockTooltip
{
+ blockData?: CompositeData;
title: string | JSX.Element;
placement: string;
}
diff --git a/src/qqq/styles/qqq-override-styles.css b/src/qqq/styles/qqq-override-styles.css
index ef5d407..c1de29c 100644
--- a/src/qqq/styles/qqq-override-styles.css
+++ b/src/qqq/styles/qqq-override-styles.css
@@ -787,3 +787,20 @@ input[type="search"]::-webkit-search-results-decoration
{
margin: 2rem 1rem;
}
+
+/* default styles for a block widget overlay */
+.blockWidgetOverlay
+{
+ font-weight: 400;
+ position: relative;
+ top: 15px;
+ height: 0;
+ display: flex;
+ font-size: 14px;
+ flex-direction: column;
+ align-items: center;
+}
+.blockWidgetOverlay a
+{
+ color: #0062FF !important;
+}